import React, { useState, useRef } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("font-spotter-db"); const { docs: fonts } = useLiveQuery("_id", { descending: true, limit: 50 }); const [dragging, setDragging] = useState(false); const [previewUrl, setPreviewUrl] = useState(null); const [imageFile, setImageFile] = useState(null); const [isLoading, setIsLoading] = useState(false); const [selected, setSelected] = useState(null); const [error, setError] = useState(""); const fileRef = useRef(); function handleFile(file) { if (!file || !file.type.startsWith("image/")) return; setImageFile(file); setPreviewUrl(URL.createObjectURL(file)); setError(""); } function onDrop(e) { e.preventDefault(); setDragging(false); handleFile(e.dataTransfer.files[0]); } async function identifyFont() { if (!imageFile) { setError("Upload an image first."); return; } setIsLoading(true); setError(""); try { const toBase64 = (file) => new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result.split(",")[1]); r.onerror = rej; r.readAsDataURL(file); }); const b64 = await toBase64(imageFile); const prompt = `You are a professional typographer and font expert. Analyze this image and identify the font(s) used. Return structured JSON with font identification details. Image base64: data:${imageFile.type};base64,${b64.substring(0, 200)}... (analyze the visual style) Focus on: serif vs sans-serif, weight, width, distinctive letterforms, era/style, likely use case.`; const result = await callAI(prompt, { schema: { properties: { fontName: { type: "string", description: "Most likely font name or family" }, category: { type: "string", description: "Category: Serif, Sans-Serif, Monospace, Display, Script, Decorative" }, weight: { type: "string", description: "Weight: Thin, Light, Regular, Medium, Bold, Black" }, style: { type: "string", description: "Style characteristics in 5-8 words" }, confidence: { type: "string", description: "Confidence: High, Medium, Low" }, alternatives: { type: "string", description: "2-3 similar alternative fonts, comma separated" }, usageNotes: { type: "string", description: "Brief usage recommendations (1-2 sentences)" }, era: { type: "string", description: "Design era or origin decade" }, } } }); const data = JSON.parse(result); const doc = { ...data, type: "font", spottedAt: Date.now(), imageName: imageFile.name, _files: { image: imageFile } }; const saved = await database.put(doc); setPreviewUrl(null); setImageFile(null); const newDoc = await database.get(saved.id); setSelected(newDoc); } catch (e) { setError("Identification failed. Try again."); } finally { setIsLoading(false); } } const Spinner = () => ( ); const categoryColor = (cat) => { if (!cat) return "bg-[#e2e8f0] text-[#0f172a]"; const c = cat.toLowerCase(); if (c.includes("serif") && !c.includes("sans")) return "bg-[#dbeafe] text-[#1e3a5f]"; if (c.includes("sans")) return "bg-[#fef9c3] text-[#713f12]"; if (c.includes("mono")) return "bg-[#dcfce7] text-[#14532d]"; if (c.includes("script") || c.includes("display") || c.includes("deco")) return "bg-[#fce7f3] text-[#701a75]"; return "bg-[#e2e8f0] text-[#0f172a]"; }; const confidenceDot = (conf) => { if (!conf) return "bg-[#94a3b8]"; const c = conf.toLowerCase(); if (c === "high") return "bg-[#4ade80]"; if (c === "medium") return "bg-[#facc15]"; return "bg-[#f87171]"; }; const c = { page: "min-h-screen bg-[#f5f3ee] font-[Space_Grotesk,sans-serif]", nav: "border-[3px] border-[#0f172a] bg-white shadow-[4px_4px_0px_#0f172a] rounded-[4px] flex items-center justify-between px-5 py-3 mb-6", logo: "flex items-center gap-2", logoText: "text-[0.85rem] font-[700] uppercase tracking-[0.08em] text-[#0f172a]", card: "border-[3px] border-[#0f172a] bg-white rounded-[4px] shadow-[4px_4px_0px_#0f172a]", dropzone: "border-[3px] border-dashed border-[#0f172a] bg-white rounded-[4px] p-8 text-center cursor-pointer transition-all", btnPrimary: "border-[3px] border-[#0f172a] bg-[#c2410c] text-white font-[700] uppercase text-[0.75rem] tracking-[0.08em] px-5 py-2.5 rounded-[4px] 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 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2", btnSecondary: "border-[3px] border-[#0f172a] bg-[#fde047] text-[#0f172a] font-[700] uppercase text-[0.75rem] tracking-[0.08em] px-5 py-2.5 rounded-[4px] 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", label: "text-[0.6rem] uppercase tracking-[0.15em] text-[#64748b] font-[600]", mono: "font-[JetBrains_Mono,monospace]", sectionHead: "text-[1rem] font-[700] uppercase tracking-[-0.02em] text-[#0f172a]", }; return (

{/* Ambient BG */}

{/* NAV */} {/* HERO UPLOAD CARD */}

Identify Any Font

Upload an image with text and AI will identify the typeface instantly.

{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={onDrop} onClick={() => fileRef.current?.click()} > handleFile(e.target.files[0])} /> {previewUrl ? (

{imageFile?.name}

) : (

Drop image here or click to upload

PNG, JPG, WEBP supported

)}

{error &&

{error}

}

{previewUrl && ( )}

{/* SELECTED DETAIL */} {selected && (

Font Details

{selected.fontName || "Unknown Font"}

{selected.category}

Weight

{selected.weight || "—"}

Era

{selected.era || "—"}

Confidence

{selected.confidence || "—"}

Style

{selected.style || "—"}

{selected.alternatives && (

Similar Fonts

{selected.alternatives.split(",").map((alt, i) => ( {alt.trim()} ))}

)} {selected.usageNotes && (

Usage Notes

{selected.usageNotes}

)}

)} {/* FONT LIBRARY */}

Font Library {fonts.length} entries

{fonts.length === 0 ? (

No fonts spotted yet. Upload an image above.

) : (

{fonts.map((doc, i) => (

setSelected(selected?._id === doc._id ? null : doc)} >

{doc.fontName || "Unknown"} {doc.category}

{doc.style}

{doc.confidence}

))}

)}

); }