import React, { useState, useCallback } from "react"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; const PAINT_COLORS = [ { name: "Alabaster", hex: "#F2EFE4", group: "Whites" }, { name: "Eider White", hex: "#EAE6D9", group: "Whites" }, { name: "Agreeable Gray", hex: "#D0C9B8", group: "Grays" }, { name: "Repose Gray", hex: "#C2BDAF", group: "Grays" }, { name: "Accessible Beige", hex: "#C8BBA5", group: "Beiges" }, { name: "Pale Oak", hex: "#CBBFA8", group: "Beiges" }, { name: "Naval", hex: "#3E5B72", group: "Blues" }, { name: "Rainwashed", hex: "#8CAEAD", group: "Blues" }, { name: "Comfort Gray", hex: "#7D9E9C", group: "Blues" }, { name: "Sage", hex: "#8A9E7C", group: "Greens" }, { name: "Rosemary", hex: "#6B8C6E", group: "Greens" }, { name: "Dried Thyme", hex: "#7B8E72", group: "Greens" }, { name: "Coral Reef", hex: "#C97B63", group: "Reds" }, { name: "Cavern Clay", hex: "#BE7155", group: "Reds" }, { name: "Sundew", hex: "#D4A96A", group: "Yellows" }, { name: "Antique White", hex: "#E8D9B5", group: "Yellows" }, { name: "Charcoal", hex: "#4A4A4A", group: "Darks" }, { name: "Black Fox", hex: "#3D3530", group: "Darks" }, ]; function Spinner() { return ( ); } export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("home-color-preview"); const [roomFile, setRoomFile] = useState(null); const [roomPreview, setRoomPreview] = useState(null); const [selectedColor, setSelectedColor] = useState(null); const [projectName, setProjectName] = useState(""); const [isSaving, setIsSaving] = useState(false); const [activeProject, setActiveProject] = useState(null); const [isDragging, setIsDragging] = useState(false); const [filterGroup, setFilterGroup] = useState("All"); const [generatedPrompt, setGeneratedPrompt] = useState(null); const [generatedImages, setGeneratedImages] = useState(null); const { docs: projects } = useLiveQuery("type", { key: "project", descending: true }); const groups = ["All", ...Array.from(new Set(PAINT_COLORS.map(c => c.group)))]; const filteredColors = filterGroup === "All" ? PAINT_COLORS : PAINT_COLORS.filter(c => c.group === filterGroup); const handleDrop = useCallback((e) => { e.preventDefault(); setIsDragging(false); const file = e.dataTransfer?.files?.[0] || e.target.files?.[0]; if (file && file.type.startsWith("image/")) { setRoomFile(file); setRoomPreview(URL.createObjectURL(file)); setGeneratedPrompt(null); setGeneratedImages(null); setActiveProject(null); } }, []); const handleGenerate = useCallback(() => { if (!selectedColor || !roomFile) return; const prompt = `Interior room repainted in ${selectedColor.name} (${selectedColor.hex}), same room composition and furniture, realistic professional real estate photo, warm natural lighting, clean walls painted ${selectedColor.name} color`; setGeneratedPrompt(prompt); setGeneratedImages([roomFile]); }, [selectedColor, roomFile]); const handleSaveProject = useCallback(async () => { if (!projectName.trim() || !selectedColor || !generatedPrompt) return; setIsSaving(true); try { await database.put({ type: "project", name: projectName.trim(), colorName: selectedColor.name, colorHex: selectedColor.hex, colorGroup: selectedColor.group, prompt: generatedPrompt, createdAt: Date.now(), }); setProjectName(""); } finally { setIsSaving(false); } }, [database, projectName, selectedColor, generatedPrompt]); const handleLoadProject = useCallback((project) => { setActiveProject(project); setSelectedColor({ name: project.colorName, hex: project.colorHex, group: project.colorGroup }); setGeneratedPrompt(project.prompt); setGeneratedImages(null); setRoomFile(null); setRoomPreview(null); }, []); const handleDeleteProject = useCallback(async (id) => { await database.del(id); if (activeProject?._id === id) setActiveProject(null); }, [database, activeProject]); const c = { bg: "bg-[#f5f2ea]", card: "bg-[#ffffff]", ink: "text-[#0f172a]", muted: "text-[#50505a]", border: "border-[#0f172a]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", accent: "bg-[#c4401a]", accentText: "text-[#ffffff]", yellow: "bg-[#e8ca00]", green: "bg-[#4a9e62]", blue: "bg-[#3a6fd8]", btnPrimary: "bg-[#c4401a] text-white border-[3px] border-[#0f172a] shadow-[4px_4px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 font-bold uppercase tracking-wide text-sm rounded-[4px] px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed", btnSecondary: "bg-[#e8ca00] text-[#0f172a] border-[3px] border-[#0f172a] shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[5px_5px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 font-bold uppercase tracking-wide text-xs rounded-[4px] px-3 py-1.5", btnGhost: "bg-white text-[#0f172a] border-[3px] border-[#0f172a] hover:shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] transition-all duration-150 font-bold uppercase tracking-wide text-xs rounded-[4px] px-3 py-1.5", input: "border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 text-[#0f172a] font-medium focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_#0f172a] transition-all duration-150 bg-white w-full", section: "text-[0.6rem] uppercase tracking-[0.15em] text-[#50505a] font-bold mb-2", cardBase: "bg-white border-[3px] border-[#0f172a] rounded-[4px] shadow-[4px_4px_0px_#0f172a]", }; return (

{/* Ambient background */}

{/* NAV */} {/* HERO */}

Visualize Your
Dream Room

Upload a room photo, choose a paint color, and see your walls transformed with AI.

{/* UPLOAD */}

Step 1 — Upload Room Photo

{ e.preventDefault(); setIsDragging(true); }} onDragLeave={() => setIsDragging(false)} className={`border-[3px] border-dashed rounded-[4px] flex flex-col items-center justify-center gap-2 cursor-pointer transition-all duration-150 relative overflow-hidden ${isDragging ? "border-[#c4401a] bg-[#fef2ee]" : "border-[#0f172a] bg-[#f5f2ea] hover:bg-[#eee9de]"}`} style={{ minHeight: 160 }} > {roomPreview ? ( Room

) : ( <> Drop photo here or click to browse )}

{roomFile && (

{roomFile.name}

)}

{/* COLOR PICKER */}

Step 2 — Choose Paint Color

{groups.map(g => ( ))}

{filteredColors.map(color => ( ))}

{selectedColor && (

{selectedColor.name}

{selectedColor.hex} · {selectedColor.group}

)}

{/* GENERATE */}

Step 3 — Preview & Save

{generatedPrompt && (

setProjectName(e.target.value)} onKeyDown={e => e.key === "Enter" && handleSaveProject()} />

)}

{/* AI Preview */} {generatedPrompt && (

{roomPreview && (

Original

)}

AI Preview — {selectedColor?.name}

)} {/* Loaded project preview */} {activeProject && !generatedImages && (

{activeProject.name}

{activeProject.colorName}

)}

{/* SAVED PROJECTS */} {projects.length > 0 && (

Saved Projects ({projects.length})

{projects.map((project, i) => { const headerColors = ["bg-[#c4401a] text-white", "bg-[#e8ca00] text-[#0f172a]", "bg-[#3a6fd8] text-white", "bg-[#4a9e62] text-[#0f172a]"]; const hc = headerColors[i % 4]; return (

handleLoadProject(project)}>

{project.name}

{project.colorName}

{project.colorHex} · {project.colorGroup}

{new Date(project.createdAt).toLocaleDateString()}

); })}

)}

); }

Visualize YourDream Room

Visualize Your
Dream Room