{children}
114 | 
3 | EasyEdit
4 | 5 | 6 |7 | Edit images with a single prompt. Powered by Flux through Together.ai. 8 |
9 | 10 | ## Tech stack 11 | 12 | - [Flux.1 Kontext](https://www.together.ai/blog/flux-1-kontext) from BFL for the image model 13 | - [Together AI](https://togetherai.link) for inference 14 | - Next.js app router with Tailwind 15 | - Helicone for observability 16 | - Plausible for website analytics 17 | 18 | ## Cloning & running 19 | 20 | 1. Clone the repo: `git clone https://github.com/Nutlope/easyedit` 21 | 2. Create a `.env.local` file and add your [Together AI API key](https://togetherai.link): `TOGETHER_API_KEY=` 22 | 3. Run `npm install` and `npm run dev` to install dependencies and run locally 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": true, 12 | "noEmit": true, 13 | "esModuleInterop": true, 14 | "module": "esnext", 15 | "moduleResolution": "bundler", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "react-jsx", 19 | "incremental": true, 20 | "plugins": [ 21 | { 22 | "name": "next" 23 | } 24 | ], 25 | "paths": { 26 | "@/*": [ 27 | "./*" 28 | ] 29 | } 30 | }, 31 | "include": [ 32 | "next-env.d.ts", 33 | "**/*.ts", 34 | "**/*.tsx", 35 | ".next/types/**/*.ts", 36 | ".next/dev/types/**/*.ts" 37 | ], 38 | "exclude": [ 39 | "node_modules" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /app/components/DownloadIcon.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from "react"; 2 | 3 | export function DownloadIcon(props: ComponentProps<"svg">) { 4 | return ( 5 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/get-adjusted-dimentions.ts: -------------------------------------------------------------------------------- 1 | export function getAdjustedDimensions( 2 | width: number, 3 | height: number, 4 | ): { width: number; height: number } { 5 | const maxDim = 1024; 6 | const minDim = 64; 7 | 8 | const roundToMultipleOf16 = (n: number) => Math.round(n / 16) * 16; 9 | 10 | const aspectRatio = width / height; 11 | 12 | let scaledWidth = width; 13 | let scaledHeight = height; 14 | 15 | if (width > maxDim || height > maxDim) { 16 | if (aspectRatio >= 1) { 17 | scaledWidth = maxDim; 18 | scaledHeight = Math.round(maxDim / aspectRatio); 19 | } else { 20 | scaledHeight = maxDim; 21 | scaledWidth = Math.round(maxDim * aspectRatio); 22 | } 23 | } 24 | 25 | const adjustedWidth = Math.min( 26 | maxDim, 27 | Math.max(minDim, roundToMultipleOf16(scaledWidth)), 28 | ); 29 | const adjustedHeight = Math.min( 30 | maxDim, 31 | Math.max(minDim, roundToMultipleOf16(scaledHeight)), 32 | ); 33 | 34 | return { width: adjustedWidth, height: adjustedHeight }; 35 | } 36 | -------------------------------------------------------------------------------- /lib/rate-limiter.ts: -------------------------------------------------------------------------------- 1 | import { Ratelimit } from "@upstash/ratelimit"; 2 | import { Redis } from "@upstash/redis"; 3 | import { headers } from "next/headers"; 4 | import "server-only"; 5 | 6 | export function getRateLimiter() { 7 | let ratelimit: Ratelimit | undefined; 8 | 9 | // Add rate limiting if Upstash API keys are set, otherwise skip 10 | if (process.env.UPSTASH_REDIS_REST_URL) { 11 | ratelimit = new Ratelimit({ 12 | redis: Redis.fromEnv(), 13 | // Allow 5 requests per day 14 | limiter: Ratelimit.fixedWindow(5, "1 d"), 15 | analytics: true, 16 | prefix: "easyedit", 17 | }); 18 | } 19 | return ratelimit; 20 | } 21 | export async function getIPAddress() { 22 | const FALLBACK_IP_ADDRESS = "0.0.0.0"; 23 | const headersList = await headers(); 24 | const forwardedFor = headersList.get("x-forwarded-for"); 25 | 26 | if (forwardedFor) { 27 | return forwardedFor.split(",")[0] ?? FALLBACK_IP_ADDRESS; 28 | } 29 | 30 | return headersList.get("x-real-ip") ?? FALLBACK_IP_ADDRESS; 31 | } 32 | -------------------------------------------------------------------------------- /lib/preload-next-image.ts: -------------------------------------------------------------------------------- 1 | import { getImageProps, ImageProps } from "next/image"; 2 | 3 | export async function preloadNextImage(imageProps: Omit
36 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/app/api/validate-key/route.ts:
--------------------------------------------------------------------------------
1 | import { getTogether } from "@/lib/get-together";
2 |
3 | export async function POST(request: Request) {
4 | try {
5 | const { apiKey } = await request.json();
6 |
7 | if (!apiKey) {
8 | return new Response(
9 | JSON.stringify({
10 | success: false,
11 | message: "API key is required",
12 | }),
13 | { status: 200, headers: { "Content-Type": "application/json" } },
14 | );
15 | }
16 |
17 | const together = getTogether(apiKey);
18 |
19 | try {
20 | // Make a simple chat completion call to validate the API key
21 | await together.chat.completions.create({
22 | model: "Qwen/Qwen2.5-72B-Instruct-Turbo",
23 | messages: [
24 | {
25 | role: "user",
26 | content: "Hello, how are you?",
27 | },
28 | ],
29 | max_tokens: 1, // Minimal tokens for validation
30 | });
31 |
32 | return new Response(
33 | JSON.stringify({
34 | success: true,
35 | message: "API key is valid",
36 | }),
37 | { status: 200, headers: { "Content-Type": "application/json" } },
38 | );
39 | } catch (error) {
40 | console.error("API key validation failed:", error);
41 |
42 | const errorCode =
43 | typeof error === "object" && error !== null && "code" in error
44 | ? String((error as { code?: unknown }).code)
45 | : undefined;
46 |
47 | return new Response(
48 | JSON.stringify({
49 | success: false,
50 | message: "Invalid API key or service unavailable",
51 | code: errorCode || "VALIDATION_ERROR",
52 | }),
53 | { status: 200, headers: { "Content-Type": "application/json" } },
54 | );
55 | }
56 | } catch (error) {
57 | console.error("Request processing failed:", error);
58 | return new Response(
59 | JSON.stringify({
60 | success: false,
61 | message: "Invalid request format",
62 | code: "INVALID_REQUEST",
63 | }),
64 | { status: 200, headers: { "Content-Type": "application/json" } },
65 | );
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/app/actions.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | "use server";
3 |
4 | import { getAdjustedDimensions } from "@/lib/get-adjusted-dimentions";
5 | import { getTogether } from "@/lib/get-together";
6 | import { getIPAddress, getRateLimiter } from "@/lib/rate-limiter";
7 | import { z } from "zod";
8 |
9 | const ratelimit = getRateLimiter();
10 |
11 | const schema = z.object({
12 | imageUrl: z.string(),
13 | prompt: z.string(),
14 | width: z.number(),
15 | height: z.number(),
16 | userAPIKey: z.string().nullable(),
17 | model: z
18 | .enum([
19 | "black-forest-labs/FLUX.1-kontext-dev",
20 | "black-forest-labs/FLUX.1-kontext-pro",
21 | ])
22 | .default("black-forest-labs/FLUX.1-kontext-dev"),
23 | });
24 |
25 | export async function generateImage(
26 | unsafeData: z.infer37 | Nothing to upload?{" "} 38 | Try a sample image: 39 |
40 |
41 | {sampleImages.map((sample) => (
42 |
63 | ))}
64 |
65 |
54 |
55 |
56 | {/* {true ? ( */}
57 | {pending || !state ? (
58 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/app/UserAPIKey.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState, useRef } from "react";
4 | import { toast } from "sonner";
5 |
6 | export function UserAPIKey() {
7 | const [userAPIKey, setUserAPIKey] = useState
59 | {Array.from(Array(3).keys()).map((i) => (
60 |
64 | ))}
65 |
66 | ) : (
67 |
68 | {state?.suggestions.map((suggestion, i) => (
69 |
77 | ))}
78 |
79 | )}
80 |
74 |
101 | );
102 | }
103 |
--------------------------------------------------------------------------------
/app/ImageUploader.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { getImageData, useS3Upload } from "next-s3-upload";
3 | import { useRef, useState, useTransition } from "react";
4 | import Spinner from "./Spinner";
5 |
6 | export function ImageUploader({
7 | onUpload,
8 | }: {
9 | onUpload: ({
10 | url,
11 | width,
12 | height,
13 | }: {
14 | url: string;
15 | width: number;
16 | height: number;
17 | }) => void;
18 | }) {
19 | const fileInputRef = useRef
75 |
85 | [Optional] Add your
76 | 82 | Together API Key: 83 | 84 |
86 |
94 | {isValidating && (
95 |
100 |
96 |
97 |
98 | )}
99 |
82 |
89 |
97 |
110 |
136 |
424 |
425 | );
426 | }
427 |
--------------------------------------------------------------------------------
140 | {images
141 | .slice()
142 | .reverse()
143 | .map((image) => (
144 |
181 |
182 |
148 |
156 | v{image.version}
157 |
158 |
178 |
179 | ))}
180 |
183 | {!activeImage ? (
184 | <>
185 |
421 |
422 |
423 | 186 | Edit any image with a simple prompt 187 |
188 | 189 |
190 | {
192 | setImageData({ width, height });
193 | setImages([{ url, version: 0 }]);
194 | setActiveImageUrl(url);
195 | }}
196 | />
197 |
198 |
199 |
200 | {
202 | setImageData({ width, height });
203 | setImages([{ url, version: 0 }]);
204 | setActiveImageUrl(url);
205 | }}
206 | />
207 |
208 |
209 | ) : (
210 |
211 |
419 | )}
420 |
212 |
264 |
265 |
226 |
249 |
250 |
251 |
252 | {pending && (
253 |
227 |
241 |
248 |
228 |
232 | {activeImage.prompt && (
233 |
229 | v{activeImage.version}
230 |
231 |
234 |
239 | )}
240 | Prompt used:
235 |236 | {activeImage.prompt} 237 |
238 |
254 |
262 | )}
263 | 256 | Editing your image... 257 |
258 |259 | This can take up to 15 seconds. 260 |
261 |
266 | {activeImage ? (
267 |
412 | ) : (
413 |
418 | 414 | Select an image to make more edits. 415 |
416 | )} 417 |