[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" ) const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescript:file="lib/indexeddb.ts" isQuickEdit="true" isMerged="true" interface Conversation { id: string title: string messages: ChatMessage[] generatedImages: GeneratedImage[] createdAt: number updatedAt: number } interface ChatMessage { id: string type: "user" | "assistant" content: string image?: string generatedImage?: GeneratedImage timestamp: number } interface GeneratedImage { id: string url: string prompt: string timestamp: number model?: string // Added optional model field to track which AI model was used } class ConversationDB { private dbName = "ImageEditorDB" private version = 1 private db: IDBDatabase | null = null async init(): Promise { return new Promise((resolve, reject) => { const request = indexedDB.open(this.dbName, this.version) request.onerror = () => reject(request.error) request.onsuccess = () => { this.db = request.result resolve() } request.onupgradeneeded = (event) => { const db = (event.target as IDBOpenDBRequest).result if (!db.objectStoreNames.contains("conversations")) { const store = db.createObjectStore("conversations", { keyPath: "id" }) store.createIndex("createdAt", "createdAt", { unique: false }) } } }) } async saveConversation(conversation: Conversation): Promise { if (!this.db) await this.init() return new Promise((resolve, reject) => { const transaction = this.db!.transaction(["conversations"], "readwrite") const store = transaction.objectStore("conversations") const request = store.put(conversation) request.onerror = () => reject(request.error) request.onsuccess = () => resolve() }) } async getConversation(id: string): Promise { if (!this.db) await this.init() return new Promise((resolve, reject) => { const transaction = this.db!.transaction(["conversations"], "readonly") const store = transaction.objectStore("conversations") const request = store.get(id) request.onerror = () => reject(request.error) request.onsuccess = () => resolve(request.result || null) }) } async getAllConversations(): Promise { if (!this.db) await this.init() return new Promise((resolve, reject) => { const transaction = this.db!.transaction(["conversations"], "readonly") const store = transaction.objectStore("conversations") const index = store.index("createdAt") const request = index.getAll() request.onerror = () => reject(request.error) request.onsuccess = () => { const conversations = request.result.sort((a, b) => b.updatedAt - a.updatedAt) resolve(conversations) } }) } async deleteConversation(id: string): Promise { if (!this.db) await this.init() return new Promise((resolve, reject) => { const transaction = this.db!.transaction(["conversations"], "readwrite") const store = transaction.objectStore("conversations") const request = store.delete(id) request.onerror = () => reject(request.error) request.onsuccess = () => resolve() }) } } export const conversationDB = new ConversationDB() export type { Conversation, ChatMessage, GeneratedImage } [V0_FILE]typescript:file="app/api/generate-image/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { fal } from "@fal-ai/client" export async function POST(request: NextRequest) { try { const { falKey, prompt, imageUrl, model } = await request.json() console.log("[v0] API Request received:", { hasFalKey: !!falKey, prompt: prompt?.substring(0, 50) + "...", imageUrl: imageUrl?.substring(0, 50) + "...", model: model, }) if (!falKey || !prompt || !imageUrl) { console.log("[v0] Missing required fields:", { falKey: !!falKey, prompt: !!prompt, imageUrl: !!imageUrl }) return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } fal.config({ credentials: falKey, }) const modelEndpoints = { "Qwen Edit": "fal-ai/qwen-image-edit", Seeedit: "fal-ai/bytedance/seededit/v3/edit-image", "Kontext Pro Edit": "fal-ai/flux-pro/kontext", } const endpoint = modelEndpoints[model] || "fal-ai/flux-pro/kontext" console.log("[v0] Using model endpoint:", endpoint) let input = { image_url: imageUrl, prompt: prompt, } // Add model-specific parameters if (model === "Qwen Edit") { input = { ...input, strength: 0.8, num_inference_steps: 28, guidance_scale: 3.5, } } else if (model === "Seeedit") { input = { ...input, strength: 0.75, num_inference_steps: 20, } } else if (model === "Kontext Pro Edit") { input = { ...input, strength: 0.85, num_inference_steps: 30, guidance_scale: 4.0, } } console.log("[v0] Making FAL API request using fal-js client with model:", model) const result = await fal.subscribe(endpoint, { input, logs: true, onQueueUpdate: (update) => { if (update.status === "IN_PROGRESS") { console.log("[v0] FAL processing:", update.logs?.map((log) => log.message).join(", ")) } }, }) console.log("[v0] FAL API success, received result:", { hasImages: !!result.data.images, imageCount: result.data.images?.length || 0, requestId: result.requestId, model: model, }) return NextResponse.json({ imageUrl: result.data.images?.[0]?.url || "/placeholder.svg?height=512&width=512", model: model, }) } catch (error) { console.error("[v0] Error generating image:", error) return NextResponse.json({ error: `Failed to generate image: ${error.message}` }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/providers.tsx" isMerged="true" "use client" import type React from "react" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { useState } from "react" export function Providers({ children }: { children: React.ReactNode }) { const [queryClient] = useState( () => new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5, // 5 minutes refetchOnWindowFocus: false, }, }, }), ) return {children} } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import "./globals.css" import { Providers } from "@/components/providers" const geist = Geist({ subsets: ["latin"], variable: "--font-geist", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", }) export const metadata: Metadata = { title: "v0 for Images", description: "AI-powered image editing interface", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* Adding font configuration for Geist fonts */ --font-sans: var(--font-geist); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom 3D perspective utilities */ .perspective-1000 { perspective: 1000px; } .transform-gpu { transform: translateZ(0); } [V0_FILE]xml:file="public/logos/qwen.svg" isMerged="true" [V0_FILE]xml:file="public/logos/bfl.svg" isMerged="true" [V0_FILE]xml:file="public/logos/bytedance.svg" isMerged="true" [V0_FILE]xml:file="public/logos/fal.svg" isMerged="true" [V0_FILE]xml:file="public/logos/fal-logo.svg" isMerged="true" [V0_FILE]typescript:file="lib/queries.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query" import { conversationDB, type Conversation } from "./indexeddb" // Query keys export const queryKeys = { conversations: ["conversations"] as const, conversation: (id: string) => ["conversation", id] as const, settings: ["settings"] as const, } // Settings hook export function useSettings() { return useQuery({ queryKey: queryKeys.settings, queryFn: () => { const falKey = localStorage.getItem("falKey") || "" const selectedModel = localStorage.getItem("selectedModel") || "fal-ai/flux-pro/kontext" return { falKey, selectedModel } }, staleTime: Number.POSITIVE_INFINITY, }) } export function useUpdateSettings() { const queryClient = useQueryClient() return useMutation({ mutationFn: ({ falKey, selectedModel }: { falKey?: string; selectedModel?: string }) => { if (falKey !== undefined) localStorage.setItem("falKey", falKey) if (selectedModel !== undefined) localStorage.setItem("selectedModel", selectedModel) return Promise.resolve({ falKey, selectedModel }) }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: queryKeys.settings }) }, }) } // Conversations hook export function useConversations() { return useQuery({ queryKey: queryKeys.conversations, queryFn: async () => { await conversationDB.init() return conversationDB.getAllConversations() }, }) } // Current conversation hook export function useCurrentConversation(conversationId: string | null) { return useQuery({ queryKey: queryKeys.conversation(conversationId || ""), queryFn: async () => { if (!conversationId) return null return conversationDB.getConversation(conversationId) }, enabled: !!conversationId, }) } // Mutation hooks export function useSaveConversation() { const queryClient = useQueryClient() return useMutation({ mutationFn: async (conversation: Conversation) => { await conversationDB.saveConversation(conversation) return conversation }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: queryKeys.conversations }) }, }) } export function useDeleteConversation() { const queryClient = useQueryClient() return useMutation({ mutationFn: async (conversationId: string) => { console.log("[v0] Deleting conversation from database:", conversationId) await conversationDB.deleteConversation(conversationId) console.log("[v0] Successfully deleted from database:", conversationId) return conversationId }, onSuccess: async (conversationId) => { console.log("[v0] Invalidating queries after delete:", conversationId) queryClient.removeQueries({ queryKey: queryKeys.conversation(conversationId) }) await queryClient.invalidateQueries({ queryKey: queryKeys.conversations }) await queryClient.refetchQueries({ queryKey: queryKeys.conversations, type: "active" }) // Force immediate cache update queryClient.setQueryData(queryKeys.conversations, (oldData: Conversation[] | undefined) => { if (!oldData) return [] return oldData.filter((conv) => conv.id !== conversationId) }) }, onError: (error) => { console.error("[v0] Delete conversation mutation failed:", error) }, }) } export function useGenerateImage() { const queryClient = useQueryClient() return useMutation({ mutationFn: async ({ falKey, prompt, imageUrl, model, }: { falKey: string prompt: string imageUrl: string model: string }) => { const response = await fetch("/api/generate-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ falKey, prompt, imageUrl, model }), }) if (!response.ok) { throw new Error("Failed to generate image") } return response.json() }, }) } [V0_FILE]plaintext:file="LICENSE" isMerged="true" MIT License Copyright (c) 2025 Image Editor Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. [V0_FILE]json:file="lib/model-endpoints.json" isEdit="true" isMerged="true" [ { "label": "Qwen Edit", "endpoint": "fal-ai/qwen-image-edit", "logo": "/logos/qwen.svg" }, { "label": "Seededit", "endpoint": "fal-ai/bytedance/seededit/v3/edit-image", "logo": "/logos/bytedance.svg" }, { "label": "Kontext Pro Edit", "endpoint": "fal-ai/flux-pro/kontext", "logo": "/logos/bfl.svg" }, { "label": "Nano Banana Edit", "endpoint": "fal-ai/nano-banana/edit", "logo": "/logos/google.svg" } ] [V0_FILE]xml:file="public/logos/google.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/google-PeS0UlqB2kuoidwkz8GWAQrC4sQbWj.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useCallback, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription, } from "@/components/ui/dialog" import { Send, Settings, User, Bot, Paperclip, Eye, Plus, MessageSquare, Trash2, Download } from "lucide-react" import type { ChatMessage, GeneratedImage, Conversation } from "@/lib/indexeddb" import { useConversations, useCurrentConversation, useSettings, useUpdateSettings, useSaveConversation, useDeleteConversation, useGenerateImage, } from "@/lib/queries" import modelEndpoints from "@/lib/model-endpoints.json" export default function ImageEditor() { const [selectedImage, setSelectedImage] = useState(null) const [prompt, setPrompt] = useState("") const [showSettings, setShowSettings] = useState(false) const [hoveredVersion, setHoveredVersion] = useState(null) const [selectedVersion, setSelectedVersion] = useState(null) const [currentConversationId, setCurrentConversationId] = useState(null) const [showHistory, setShowHistory] = useState(false) const [isHistoryAnimating, setIsHistoryAnimating] = useState(false) const [localMessages, setLocalMessages] = useState([]) const [localGeneratedImages, setLocalGeneratedImages] = useState([]) const [settingsDialogOpen, setSettingsDialogOpen] = useState(false) const [tempFalKey, setTempFalKey] = useState("") const fileInputRef = useRef(null) const messagesEndRef = useRef(null) const { data: conversations = [], refetch: refetchConversations } = useConversations() const { data: currentConversation } = useCurrentConversation(currentConversationId) const { data: settings } = useSettings() const updateSettings = useUpdateSettings() const saveConversation = useSaveConversation() const deleteConversation = useDeleteConversation() const generateImageMutation = useGenerateImage() const falKey = settings?.falKey || "" const selectedModel = settings?.selectedModel || "fal-ai/nano-banana/edit" useEffect(() => { if (settingsDialogOpen) { setTempFalKey(falKey) } }, [settingsDialogOpen, falKey]) useEffect(() => { if (currentConversation) { setLocalMessages(currentConversation.messages || []) const limitedImages = (currentConversation.generatedImages || []).slice(0, 20) setLocalGeneratedImages(limitedImages) if (limitedImages.length > 0) { const latestImage = limitedImages[0] setSelectedVersion(latestImage) setSelectedImage(latestImage.url) } } }, [currentConversation]) useEffect(() => { if (currentConversationId && (localMessages.length > 0 || localGeneratedImages.length > 0)) { const title = localMessages.length > 0 ? localMessages[0].content.slice(0, 50) + (localMessages[0].content.length > 50 ? "..." : "") : "New Conversation" const limitedMessages = localMessages.slice(-50) const limitedImages = localGeneratedImages.slice(0, 20) console.log("[v0] Saving conversation with messages:", limitedMessages.length, "images:", limitedImages.length) saveConversation.mutate( { id: currentConversationId, title, messages: limitedMessages, generatedImages: limitedImages, createdAt: currentConversation?.createdAt || Date.now(), updatedAt: Date.now(), }, { onSuccess: () => { console.log("[v0] Conversation saved successfully") refetchConversations() }, onError: (error) => { console.error("[v0] Failed to save conversation:", error) }, }, ) } }, [localMessages, localGeneratedImages, currentConversationId, currentConversation?.createdAt]) const handleSaveFalKey = useCallback(() => { updateSettings.mutate({ falKey: tempFalKey }) setSettingsDialogOpen(false) }, [tempFalKey, updateSettings]) const toggleHistory = useCallback(() => { if (showHistory) { setIsHistoryAnimating(false) setTimeout(() => { setShowHistory(false) }, 300) } else { setShowHistory(true) setTimeout(() => { setIsHistoryAnimating(true) }, 10) } }, [showHistory]) const createNewConversation = useCallback(() => { if (currentConversationId && localMessages.length === 0 && localGeneratedImages.length === 0) { console.log("[v0] Current conversation is already empty, not creating new one") return } const newId = Date.now().toString() const newConversation: Conversation = { id: newId, title: "New Conversation", messages: [], generatedImages: [], createdAt: Date.now(), updatedAt: Date.now(), } saveConversation.mutate(newConversation, { onSuccess: () => { refetchConversations() }, }) setCurrentConversationId(newId) setLocalMessages([]) setLocalGeneratedImages([]) setSelectedImage(null) setSelectedVersion(null) setPrompt("") }, [saveConversation, refetchConversations, currentConversationId, localMessages.length, localGeneratedImages.length]) const loadConversation = useCallback((conversationId: string) => { setCurrentConversationId(conversationId) }, []) const handleDeleteConversation = useCallback( (conversationId: string, e: React.MouseEvent) => { e.stopPropagation() if (deleteConversation.isPending) { return } console.log("[v0] Attempting to delete conversation:", conversationId) deleteConversation.mutate(conversationId, { onSuccess: () => { console.log("[v0] Successfully deleted conversation:", conversationId) refetchConversations() if (currentConversationId === conversationId) { console.log("[v0] Deleted conversation was current, switching to another") if (conversations.length > 1) { const remaining = conversations.filter((c) => c.id !== conversationId) if (remaining.length > 0) { loadConversation(remaining[0].id) } else { createNewConversation() } } else { createNewConversation() } } }, onError: (error) => { console.error("[v0] Failed to delete conversation:", error) }, }) }, [ currentConversationId, conversations, loadConversation, createNewConversation, deleteConversation, refetchConversations, ], ) const handleImageUpload = useCallback( (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { const result = e.target?.result as string setSelectedImage(result) if (localGeneratedImages.length === 0) { const originalImage: GeneratedImage = { id: Date.now().toString() + "_original", url: result, prompt: "Original image", timestamp: Date.now(), model: "Original", } setLocalGeneratedImages([originalImage]) setSelectedVersion(originalImage) } } reader.onerror = () => { console.error("[v0] FileReader error") reader.abort() } reader.readAsDataURL(file) } if (event.target) { event.target.value = "" } }, [localGeneratedImages.length], ) const playNotificationSound = useCallback(() => { try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) oscillator.frequency.setValueAtTime(800, audioContext.currentTime) oscillator.frequency.setValueAtTime(600, audioContext.currentTime + 0.1) gainNode.gain.setValueAtTime(0.3, audioContext.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3) oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + 0.3) } catch (error) { console.log("[v0] Audio notification not supported:", error) } }, []) const handleGenerateImage = useCallback(async () => { if (!falKey || !prompt) return const attachmentImage = selectedImage || (localGeneratedImages.length > 0 ? localGeneratedImages[0].url : null) if (!attachmentImage) return let conversationId = currentConversationId if (!conversationId) { conversationId = Date.now().toString() setCurrentConversationId(conversationId) } if (localGeneratedImages.length === 0 && selectedImage) { const originalImage: GeneratedImage = { id: Date.now().toString() + "_original", url: selectedImage, prompt: "Original image", timestamp: Date.now(), model: "Original", } setLocalGeneratedImages([originalImage]) } const userMessage: ChatMessage = { id: Date.now().toString(), type: "user", content: prompt, image: attachmentImage, timestamp: Date.now(), } const updatedMessages = [...localMessages.slice(-49), userMessage] setLocalMessages(updatedMessages) const modelDisplayName = modelEndpoints.find((model) => model.endpoint === selectedModel)?.label || "Unknown Model" generateImageMutation.mutate( { falKey, prompt, imageUrl: attachmentImage, model: selectedModel }, { onSuccess: (data) => { const newImage: GeneratedImage = { id: Date.now().toString() + "_gen", url: data.imageUrl, prompt, timestamp: Date.now(), model: modelDisplayName, } const assistantMessage: ChatMessage = { id: Date.now().toString() + "_assistant", type: "assistant", content: "Here's your edited image:", generatedImage: newImage, timestamp: Date.now(), } setLocalGeneratedImages((prev) => { const newImages = [newImage, ...prev] if (newImages.length > 20) { return newImages.slice(0, 20) } return newImages }) setLocalMessages((prev) => [...prev.slice(-49), assistantMessage]) setSelectedVersion(newImage) setSelectedImage(newImage.url) setPrompt("") playNotificationSound() }, onError: (error) => { console.error("Error generating image:", error) const errorMessage: ChatMessage = { id: Date.now().toString() + "_error", type: "assistant", content: `Sorry, there was an error generating your image: ${error.message || "Unknown error occurred"}`, timestamp: Date.now(), } setLocalMessages((prev) => [...prev.slice(-49), errorMessage]) }, }, ) }, [ falKey, prompt, selectedImage, localGeneratedImages, currentConversationId, selectedModel, generateImageMutation, modelEndpoints, localMessages, playNotificationSound, ]) const scrollToBottom = useCallback(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, []) useEffect(() => { scrollToBottom() }, [localMessages, localGeneratedImages, scrollToBottom]) return (

{showHistory && ( <>

History

{conversations.map((conversation) => (

loadConversation(conversation.id)} >

{conversation.title}

{conversation.messages.length} messages

{new Date(conversation.updatedAt).toLocaleDateString()}

))}

)}

{localMessages.length === 0 ? (

Start a conversation by uploading an image and describing your edit

) : ( localMessages.map((message) => (

{message.type === "user" ? ( ) : ( )}

{message.type === "assistant" && message.generatedImage && (

{(() => { const model = modelEndpoints.find((m) => m.label === message.generatedImage?.model) return model ? (

) : null })()} {message.generatedImage.model}

)}

{message.content}

{message.image && ( Uploaded

)} {message.generatedImage && (

v{(() => { const imageIndex = localGeneratedImages.findIndex( (img) => img.id === message.generatedImage?.id, ) return imageIndex >= 0 ? localGeneratedImages.length - 1 - imageIndex : 1 })()}

)}

{new Date(message.timestamp).toLocaleTimeString()}

)) )} {generateImageMutation.isPending && (

Generating image...

)}

setPrompt(e.target.value)}
                disabled={generateImageMutation.isPending}
                className="flex-1 min-h-[60px] resize-none bg-black border-neutral-200/20 text-zinc-50 placeholder-zinc-500 focus:border-zinc-500 focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 focus:shadow-lg focus:shadow-zinc-800/50"
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault()
                    handleGenerateImage()
                  }
                }}
              />
              <Button
                onClick={handleGenerateImage}
                disabled={
                  !falKey ||
                  !prompt ||
                  (!selectedImage && localGeneratedImages.length === 0) ||
                  generateImageMutation.isPending
                }
                size="lg"
                className="flex-shrink-0 bg-zinc-50 hover:bg-zinc-200 text-zinc-900 disabled:bg-zinc-800 disabled:text-zinc-500 transition-all duration-200 hover:scale-105 hover:shadow-lg disabled:hover:scale-100"
              >
                <Send className="w-4 h-4" />
              </Button>
            </div>

<div className="flex gap-2 mt-2 relative">
              <div>
                <Select
                  value={selectedModel}
                  onValueChange={(value) => updateSettings.mutate({ selectedModel: value })}
                  disabled={generateImageMutation.isPending}
                >
                  <SelectTrigger className="w-fit h-8 bg-zinc-950/80 border-neutral-200/20 text-zinc-50 focus:border-zinc-500 focus:ring-0 text-xs whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed hover:bg-zinc-900/80 transition-colors duration-200">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-zinc-950/95 backdrop-blur-xl border-neutral-200/20">
                    {modelEndpoints.map((model) => (
                      <SelectItem
                        key={model.endpoint}
                        value={model.endpoint}
                        className="text-zinc-50 focus:bg-zinc-800 focus:text-zinc-50 text-xs whitespace-nowrap hover:bg-zinc-800/80 transition-colors duration-200"
                      >
                        <div className="flex items-center gap-2">
                          <img
                            src={model.logo || "/placeholder.svg"}
                            alt={model.label}
                            className="w-3 h-3 flex-shrink-0"
                          />
                          <span className="truncate">{model.label}</span>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="flex gap-2">
                <Button
                  variant="outline"
                  onClick={() => fileInputRef.current?.click()}
                  disabled={generateImageMutation.isPending}
                  className="flex-shrink-0 h-9 px-3 border-neutral-200/20 text-zinc-400 hover:bg-zinc-800/80 bg-zinc-950/80 hover:text-zinc-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:scale-105 disabled:hover:scale-100"
                >
                  <Paperclip className="w-4 h-4" />
                </Button>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/*"
                  onChange={handleImageUpload}
                  className="hidden"
                />
                {(selectedImage || (localGeneratedImages.length > 0 && localGeneratedImages[0])) && (
                  <div className="relative">
                    <img
                      src={selectedImage || localGeneratedImages[0]?.url || "/placeholder.svg"}
                      alt="Attachment"
                      className="w-9 h-9 rounded-lg object-cover border border-neutral-200/20 hover:border-zinc-500 transition-colors duration-200"
                    />
                    <div className="absolute -top-1 -right-1 bg-zinc-50 text-zinc-950 px-1.5 py-0.5 rounded-full text-xs font-bold min-w-[18px] h-[18px] flex items-center justify-center">
                      v
                      {selectedVersion
                        ? localGeneratedImages.findIndex((img) => img.id === selectedVersion.id) >= 0
                          ? localGeneratedImages.length -
                            1 -
                            localGeneratedImages.findIndex((img) => img.id === selectedVersion.id)
                          : 0
                        : localGeneratedImages.length > 0
                          ? localGeneratedImages.length - 1
                          : 0}
                    </div>
                  </div>
                )}
              </div>

<div className="absolute bottom-0 right-0 flex items-center gap-1 text-xs text-zinc-500">
                <span>Powered by</span>
                <a
                  href="https://fal.ai"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:opacity-100 transition-all duration-200 hover:scale-110"
                >
                  <img src="/logos/fal-logo.svg" alt="fal" className="h-3 opacity-70" />
                </a>
              </div>
            </div>
          </div>
        </div>

<div className="w-2/3 flex flex-col relative overflow-hidden border-t border-l border-neutral-200/20 rounded-tl-lg bg-black backdrop-blur-sm">
          <div className="p-4 border-b border-neutral-200/20 bg-zinc-800/30 backdrop-blur-sm">
            <h2 className="text-lg font-semibold text-zinc-50">Preview</h2>
            <p className="text-sm text-zinc-400">
              {selectedVersion
                ? `Selected: v${localGeneratedImages.findIndex((img) => img.id === selectedVersion.id) >= 0 ? localGeneratedImages.length - 1 - localGeneratedImages.findIndex((img) => img.id === selectedVersion.id) : 0}`
                : localGeneratedImages.length > 0
                  ? `Latest: v${localGeneratedImages.length - 1}`
                  : "No images generated"}
            </p>
          </div>

<div className="flex-1 relative p-6 flex items-center justify-center">
            {selectedImage || localGeneratedImages.length > 0 ? (
              <div className="relative group">
                <img
                  src={
                    hoveredVersion
                      ? localGeneratedImages.find((img) => img.id === hoveredVersion)?.url || "/placeholder.svg"
                      : (selectedVersion || localGeneratedImages[0])?.url || selectedImage || "/placeholder.svg"
                  }
                  alt="Preview image"
                  className="max-w-full max-h-[500px] object-contain rounded-lg shadow-2xl transition-all duration-300 group-hover:shadow-3xl"
                />
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    const currentImage = hoveredVersion
                      ? localGeneratedImages.find((img) => img.id === hoveredVersion)
                      : selectedVersion || localGeneratedImages[0]

if (currentImage?.url || selectedImage) {
                      const link = document.createElement("a")
                      link.href = currentImage?.url || selectedImage || ""
                      const versionNumber = currentImage
                        ? localGeneratedImages.findIndex((img) => img.id === currentImage.id) >= 0
                          ? localGeneratedImages.length -
                            1 -
                            localGeneratedImages.findIndex((img) => img.id === currentImage.id)
                          : 0
                        : 0
                      link.download = `image-edit-v${versionNumber}-${Date.now()}.png`
                      document.body.appendChild(link)
                      link.click()
                      document.body.removeChild(link)
                    }
                  }}
                  className="absolute top-4 right-4 bg-zinc-950/90 hover:bg-zinc-800/90 text-zinc-50 border border-neutral-200/20 h-8 w-8 p-0 backdrop-blur-sm transition-all duration-200 hover:scale-110"
                >
                  <Download className="w-4 h-4" />
                </Button>
              </div>
            ) : (
              <div className="text-center text-zinc-500">
                <Eye className="w-16 h-16 mx-auto mb-4 opacity-50" />
                <p>Generated images will appear here</p>
                <p className="text-sm mt-2">Start by uploading an image and describing your edit</p>
              </div>
            )}

{(selectedImage || localGeneratedImages.length > 0) && (
              <div className="absolute top-0 right-0 bg-zinc-950/95 backdrop-blur-xl border-l border-neutral-200/20 p-2 h-full">
                <div className="flex flex-col gap-1">
                  {localGeneratedImages.map((image, index) => {
                    const versionNumber = localGeneratedImages.length - 1 - index
                    const isSelected = selectedVersion?.id === image.id
                    const isOriginalHighlighted =
                      !selectedVersion && versionNumber === 0 && localGeneratedImages.length === 1
                    const shouldHighlight = isSelected || isOriginalHighlighted

return (
                      <div
                        key={image.id}
                        className="relative"
                        onMouseEnter={() => setHoveredVersion(image.id)}
                        onMouseLeave={() => setHoveredVersion(null)}
                      >
                        <div
                          className={
                            "w-12 h-12 relative cursor-pointer hover:scale-110 transition-all duration-200 hover:shadow-lg"
                          }
                          onClick={() => {
                            setSelectedVersion(image)
                            setSelectedImage(image.url)
                          }}
                        >
                          <img
                            src={image.url || "/placeholder.svg"}
                            alt={`Version ${versionNumber}`}
                            className={`w-full h-full object-cover rounded-lg border-2 transition-all duration-200 ${
                              shouldHighlight
                                ? "border-white shadow-lg shadow-white/20"
                                : "border-neutral-200/20 hover:border-zinc-500"
                            }`}
                          />
                          <div
                            className={`absolute -top-1 -right-1 px-1 py-0.5 rounded text-xs font-medium border transition-all duration-200 ${
                              shouldHighlight
                                ? "bg-zinc-50 text-zinc-950 border-zinc-50 shadow-lg"
                                : "bg-zinc-950/90 text-zinc-50 border-neutral-200/20 backdrop-blur-sm"
                            }`}
                          >
                            v{versionNumber}
                          </div>
                        </div>

{hoveredVersion === image.id && (
                          <div className="absolute top-0 right-full mr-2 z-50 bg-zinc-950/95 backdrop-blur-xl border border-neutral-200/20 rounded-lg p-3 w-64 shadow-2xl animate-in slide-in-from-right-2 duration-200">
                            <div className="space-y-2">
                              <div className="flex items-center justify-between">
                                <span className="text-zinc-50 font-medium text-sm">Version {versionNumber}</span>
                                <span className="text-zinc-400 text-xs">
                                  {new Date(image.timestamp).toLocaleString()}
                                </span>
                              </div>
                              <p className="text-zinc-300 text-sm">{image.prompt}</p>
                              {image.model && (
                                <div className="flex items-center gap-2">
                                  {(() => {
                                    const model = modelEndpoints.find((m) => m.label === image.model)
                                    return model ? (
                                      <img
                                        src={model.logo || "/placeholder.svg"}
                                        alt={model.label}
                                        className="w-4 h-4 flex-shrink-0"
                                      />
                                    ) : null
                                  })()}
                                  <div className="flex items-center gap-1">
                                    <span className="text-zinc-400 text-xs">Model:</span>
                                    <span className="text-zinc-300 text-xs font-medium">{image.model}</span>
                                  </div>
                                </div>
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This