import { useState, useRef } from "react"; import { Search, ShoppingCart, Store, Image as ImageIcon, Clock, ChevronRight, Sun, Moon, Tag, HelpCircle, Loader2, Sparkles, RotateCcw, Wrench, Sofa, Shirt, Hammer, } from "lucide-react"; // ─── Theme ──────────────────────────────────────────────────────────────────── const LIGHT = { bg: "#FAF6F0", surface: "#FFFFFF", surfaceHover: "#F7F3ED", resultBg: "#FEF3EE", resultBorder: "rgba(224,120,86,0.22)", resultShadow: "0 6px 28px rgba(224,120,86,0.12)", inputBg: "#F5F0E8", coral: "#E07856", coralLight: "#FAEAE3", coralDark: "#C45E3A", coralGlow: "0 3px 12px rgba(224,120,86,0.34)", coralFocus: "rgba(224,120,86,0.13)", teal: "#5A9B8E", tealLight: "#EAF4F2", tealDark: "#3D7A6E", tealBorder: "rgba(90,155,142,0.28)", text: "#2D2A26", textMuted: "#7A7570", textFaint: "#B0AAA3", border: "rgba(45,42,38,0.09)", borderMed: "rgba(45,42,38,0.16)", shadow: "0 2px 10px rgba(45,42,38,0.07)", shadowMd: "0 5px 20px rgba(45,42,38,0.09)", chipBg: "#EEE8DE", chipText: "#5A5248", chipBorder: "rgba(45,42,38,0.10)", historyHover: "#F7F3ED", toggleBg: "#EEE8DE", storeEtsy: { bg: "#2D2A26", text: "#FAF6F0" }, }; const DARK = { bg: "#17140E", surface: "#211E17", surfaceHover: "#2A261E", resultBg: "#2B1E17", resultBorder: "rgba(224,120,86,0.24)", resultShadow: "0 6px 28px rgba(0,0,0,0.36)", inputBg: "#1C1913", coral: "#E8845E", coralLight: "rgba(232,132,94,0.16)", coralDark: "#F09878", coralGlow: "0 3px 14px rgba(232,132,94,0.38)", coralFocus: "rgba(232,132,94,0.15)", teal: "#6AADA0", tealLight: "rgba(106,173,160,0.16)", tealDark: "#8ECFC4", tealBorder: "rgba(106,173,160,0.28)", text: "#F0EBE3", textMuted: "#9A9590", textFaint: "#524E48", border: "rgba(240,235,227,0.08)", borderMed: "rgba(240,235,227,0.15)", shadow: "0 2px 10px rgba(0,0,0,0.30)", shadowMd: "0 5px 20px rgba(0,0,0,0.38)", chipBg: "#2A2620", chipText: "#9A9288", chipBorder: "rgba(240,235,227,0.10)", historyHover: "#2A2620", toggleBg: "#2A2620", storeEtsy: { bg: "#EEE8DE", text: "#2D2A26" }, }; // ─── Logo ───────────────────────────────────────────────────────────────────── const LogoMark = ({ size = 60, coral, teal }) => ( ); // ─── Constants ──────────────────────────────────────────────────────────────── const EXAMPLES = [ "the rubber thing that opens jars", "clips that hold a duvet in place", "the tool for removing avocado pits", "the plastic tip at the end of a shoelace", "tiny brush for cleaning between teeth", ]; const SYSTEM_PROMPT = `You are an expert at identifying everyday items from vague or colloquial descriptions. You MUST respond with ONLY a valid raw JSON object — no markdown, no backtick fences, no preamble, no trailing text whatsoever. Exactly this shape: {"itemName":"...","confidence":"...","description":"...","alternatives":[],"images":[],"searchLinks":[{"label":"...","url":"..."}]} Rules: - itemName: the precise, specific name of the item — not a paraphrase of the user's description. Use the most correct technical or widely-recognized term. - confidence: a short honest phrase, e.g. "High confidence", "Fairly confident", "Moderate — a few possibilities", "Low confidence — hard to say without more context" - description: 2–3 sentences covering what it is, what it looks like, and what it is used for - alternatives: 0–1 entries if highly confident; 2–3 entries if uncertain; must be genuinely distinct items not synonyms - images: always an empty array - searchLinks: 2–4 stores where this item is typically sold. Each has a label (store name) and a search URL with the itemName URL-encoded. Pick real, specific stores — hardware items at Home Depot, electronics at Best Buy, furniture at IKEA or Wayfair, general items at Amazon or Walmart, handmade at eBay, etc. Never include stores that don't sell this type of item.`; // ─── Helpers ────────────────────────────────────────────────────────────────── const getConfLevel = (c = "") => { if (/high|very confident|certainly|definitely|^sure/i.test(c)) return "high"; if (/low|uncertain|unclear|not sure|not entirely|might|possibly|several|could be|hard to say/i.test(c)) return "low"; return "medium"; }; const confStyle = (lvl, T) => { if (lvl === "high") return { color: "#2E7D5E", bg: "rgba(46,125,94,0.13)" }; if (lvl === "low") return { color: T.coralDark, bg: T.coralLight }; return { color: T.tealDark, bg: T.tealLight }; }; // ─── App ────────────────────────────────────────────────────────────────────── export default function RememberIt() { const sys = typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches; const [mode, setMode] = useState(sys ? "dark" : "light"); const T = mode === "dark" ? DARK : LIGHT; const [query, setQuery] = useState(""); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [history, setHistory] = useState([]); const [animKey, setAnimKey] = useState(0); const [imgErrors, setImgErrors] = useState([]); const [imagesLoading, setImagesLoading] = useState(false); const inputRef = useRef(null); const fetchImages = async (itemName) => { try { const res = await fetch("/api/images", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ itemName }), }); if (!res.ok) return []; const data = await res.json(); return data.images || []; } catch { return []; } }; const identify = async (q) => { const raw = q.trim(); if (!raw) return; setLoading(true); setError(null); setResult(null); setImgErrors([]); try { const res = await fetch("/api/hf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "llama-3.3-70b-versatile", max_tokens: 1000, messages: [ { role: "system", content: SYSTEM_PROMPT }, { role: "user", content: `Identify this item: "${raw}"\nReturn ONLY the JSON object.` }, ], }), }); if (!res.ok) throw new Error(`API ${res.status}`); const data = await res.json(); const txt = (data.choices?.[0]?.message?.content || "").trim(); const clean = txt.replace(/^```(?:json)?\s*/i, "").replace(/\s*```$/i, "").trim(); const parsed = JSON.parse(clean); setResult(parsed); setAnimKey(k => k + 1); setHistory(prev => { const deduped = prev.filter(h => h.result.itemName.toLowerCase() !== parsed.itemName.toLowerCase()); return [{ id: Date.now(), query: raw, result: parsed }, ...deduped].slice(0, 5); }); if (getConfLevel(parsed.confidence) === "high" && !parsed.images?.length) { setImagesLoading(true); const urls = await fetchImages(parsed.itemName); if (urls.length) setResult(prev => ({ ...prev, images: urls })); setImagesLoading(false); } } catch (e) { setError(e.message?.includes("JSON") ? "Got an unexpected response — try rephrasing your description." : "Something went wrong. Check your connection and try again."); } finally { setLoading(false); } }; const handleKey = e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); identify(query); } }; const handleExample = ex => { setQuery(ex); identify(ex); }; const handleAlt = a => { setQuery(a); identify(a); }; const handleHistory = h => { setQuery(h.query); setResult(h.result); setAnimKey(k => k + 1); setError(null); }; const reset = () => { setResult(null); setQuery(""); setError(null); setTimeout(() => inputRef.current?.focus(), 50); }; const confLvl = result ? getConfLevel(result.confidence) : "medium"; const cs = result ? confStyle(confLvl, T) : {}; const imgUrl = result ? `https://www.google.com/search?q=${encodeURIComponent(result.itemName)}&tbm=isch` : "#"; const card = { background: T.surface, borderRadius: 15, border: `1px solid ${T.border}`, boxShadow: T.shadow, padding: "1.2rem 1.4rem" }; const lbl = { fontSize: 10.5, fontWeight: 700, color: T.textFaint, textTransform: "uppercase", letterSpacing: "0.09em", margin: "0 0 10px", display: "flex", alignItems: "center", gap: 5 }; const storeConfig = (lbl) => { const map = { Amazon: { bg: T.coral, text: "#fff", Icon: ShoppingCart }, Walmart: { bg: "#0071DC", text: "#fff", Icon: ShoppingCart }, Target: { bg: "#CC0000", text: "#fff", Icon: ShoppingCart }, eBay: { bg: "#0064D2", text: "#fff", Icon: Tag }, Etsy: { bg: T.storeEtsy.bg, text: T.storeEtsy.text, Icon: Store }, "Home Depot": { bg: "#F96302", text: "#fff", Icon: Wrench }, Lowe: { bg: "#004990", text: "#fff", Icon: Wrench }, "Best Buy": { bg: "#0046BE", text: "#fff", Icon: ShoppingCart }, IKEA: { bg: "#003399", text: "#fff", Icon: Sofa }, Wayfair: { bg: "#7B4B3A", text: "#fff", Icon: Sofa }, "Apple Store": { bg: "#555", text: "#fff", Icon: Store }, }; return map[lbl] || { bg: T.text, text: T.bg, Icon: ShoppingCart }; }; return (
{/* ── HEADER ─────────────────────────────────────────────────────── */}

Remember It

That thing you can't name? Describe it — we'll find it.

{/* ── INPUT ──────────────────────────────────────────────────────── */}