import React, { useEffect, useRef, useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { ImgGen, useImgGen, useViewer, useVibe } from "use-vibes"; import { Badge, Button, Card, Empty, ErrorNote, Field, Figure, Heading, Icon, IconButton, Input, Row, RowCard, Spacer, Stack, Text } from "@vibes.diy/pouf"; const DB = "stomachCall"; const recipeSchema = { type: "object", properties: { title: { type: "string" }, description: { type: "string" }, minutes: { type: "number" }, ingredients: { type: "array", items: { type: "string" } }, missing: { type: "array", items: { type: "string" } }, steps: { type: "array", items: { type: "string" } }, }, required: ["title", "description", "minutes", "ingredients", "steps"], }; const strList = (v) => (Array.isArray(v) ? v.filter((s) => typeof s === "string" && s.trim()).map((s) => s.trim()) : []); function normalizeRecipe(raw) { if (!raw || typeof raw !== "object" || Array.isArray(raw)) return undefined; const title = typeof raw.title === "string" ? raw.title.trim() : ""; const steps = strList(raw.steps); if (!title || steps.length === 0) return undefined; const minutes = Number.isFinite(raw.minutes) ? Math.round(raw.minutes) : 30; return { title, description: typeof raw.description === "string" ? raw.description.trim() : "", minutes, ingredients: strList(raw.ingredients), missing: strList(raw.missing), steps, }; } function normalizeRecipes(raw) { const list = Array.isArray(raw?.recipes) ? raw.recipes.map(normalizeRecipe).filter(Boolean) : []; if (list.length === 0) throw new Error("No recipes came back. Give it another try."); return list.slice(0, 3); } function readAsDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = () => reject(reader.error); reader.readAsDataURL(file); }); } const RULES = "Return exactly 3 different dinner recipes doable tonight. For each: a title, a one-sentence description, minutes, the ingredients used, any missing staples (salt, oil and the like only), and numbered-style steps as a list."; async function recipesFromPhoto(file) { const dataUrl = await readAsDataUrl(file); const response = await callAI( [ { type: "text", text: `Look at this fridge photo. List the food ingredients you can see. ${RULES}` }, { type: "image_url", image_url: { url: dataUrl } }, ], { schema: { properties: { ingredients: { type: "array", items: { type: "string" } }, recipes: { type: "array", items: recipeSchema } }, required: ["ingredients", "recipes"] } } ); const raw = JSON.parse(response); const ingredients = strList(raw?.ingredients); if (ingredients.length === 0) throw new Error("Couldn't spot any food in that photo. Try a closer, brighter shot."); return { ingredients, recipes: normalizeRecipes(raw) }; } async function recipesFromList(ingredients) { const response = await callAI( `The person has these ingredients: ${ingredients.join(", ")}. ${RULES}`, { schema: { properties: { recipes: { type: "array", items: recipeSchema } }, required: ["recipes"] } } ); return normalizeRecipes(JSON.parse(response)); } function HeartIcon({ filled }) { return ( ); } function FavoriteToggle({ recipe, favorite, database, kitchenId, me, can }) { const { document: pic } = useImgGen({ _id: recipe._id, database }); const version = pic?.versions?.[pic.currentVersion ?? 0]; const source = version?.id ? pic?._files?.[version.id] : undefined; const draft = { _id: `fav:${recipe._id}`, type: "favorite", kitchenId, recipeId: recipe._id, authorHandle: me?.userHandle, title: recipe.title, description: recipe.description, minutes: recipe.minutes, ingredients: recipe.ingredients, missing: recipe.missing ?? [], steps: recipe.steps, savedAt: Date.now(), }; const allowed = Boolean(me?.userHandle) && (favorite ? can.delete(favorite).ok : can.create(draft).ok); async function toggle() { if (favorite) { await database.del(favorite._id); return; } // Saved instantly; the dish picture (if one exists) is attached right after. await database.put(draft); if (source) { try { await database.put({ ...draft, _files: { picture: await source.file() } }); } catch { // No copy of the picture; it is generated again on the favorite when opened. } } } return ( } onClick={toggle} /> ); } const TIMER_KEY = "stomachCall.timers"; let audioCtx; function unlockAudio() { try { const Ctx = window.AudioContext || window.webkitAudioContext; if (!Ctx) return; audioCtx = audioCtx ?? new Ctx(); if (audioCtx.state === "suspended") audioCtx.resume(); } catch { // Sound is optional. } } function beep() { try { unlockAudio(); if (!audioCtx) return; [0, 0.35, 0.7].forEach((offset) => { const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.frequency.value = 880; gain.gain.value = 0.2; osc.connect(gain); gain.connect(audioCtx.destination); osc.start(audioCtx.currentTime + offset); osc.stop(audioCtx.currentTime + offset + 0.18); }); } catch { // Sound is optional. } } function announce(title) { beep(); try { navigator.vibrate?.([300, 150, 300, 150, 300]); } catch { // Vibration is optional. } try { if ("Notification" in window && Notification.permission === "granted") { new Notification("Done!", { body: `${title} timer is up.` }); } } catch { // Notifications are optional. } } function loadTimers() { try { const raw = JSON.parse(localStorage.getItem(TIMER_KEY) ?? "{}"); if (!raw || typeof raw !== "object" || Array.isArray(raw)) return {}; const clean = {}; for (const [id, t] of Object.entries(raw)) { if (t && typeof t === "object" && Number.isFinite(t.left) && (t.endsAt === null || Number.isFinite(t.endsAt))) { clean[id] = { title: typeof t.title === "string" ? t.title : "Recipe", total: t.total, endsAt: t.endsAt, left: t.left, done: t.done === true }; } } return clean; } catch { return {}; } } function useTimers() { const [timers, setTimers] = useState(loadTimers); const [now, setNow] = useState(() => Date.now()); const anyRunning = Object.values(timers).some((t) => t.endsAt); useEffect(() => { try { localStorage.setItem(TIMER_KEY, JSON.stringify(timers)); } catch { // Storage can be unavailable; timers still work for this visit. } }, [timers]); useEffect(() => { if (!anyRunning) return undefined; setNow(Date.now()); const tick = setInterval(() => setNow(Date.now()), 250); return () => clearInterval(tick); }, [anyRunning]); useEffect(() => { const due = Object.entries(timers).filter(([, t]) => t.endsAt && t.endsAt <= now); if (due.length === 0) return; due.forEach(([, t]) => announce(t.title)); setTimers((prev) => { const next = { ...prev }; for (const [id] of due) if (next[id]?.endsAt) next[id] = { ...next[id], endsAt: null, left: 0, done: true }; return next; }); }, [now, timers]); function start(id, title, minutes) { unlockAudio(); try { if ("Notification" in window && Notification.permission === "default") Notification.requestPermission(); } catch { // Notifications are optional. } const ms = Math.max(1, Math.round(minutes) || 1) * 60000; setNow(Date.now()); setTimers((p) => ({ ...p, [id]: { title, total: ms, endsAt: Date.now() + ms, left: ms, done: false } })); } function pause(id) { setTimers((p) => { const t = p[id]; if (!t?.endsAt) return p; return { ...p, [id]: { ...t, endsAt: null, left: Math.max(1000, t.endsAt - Date.now()) } }; }); } function resume(id) { setTimers((p) => { const t = p[id]; if (!t || t.endsAt || t.done) return p; return { ...p, [id]: { ...t, endsAt: Date.now() + t.left } }; }); } function reset(id) { setTimers((p) => { const next = { ...p }; delete next[id]; return next; }); } function adjust(id, mins) { setTimers((p) => { const t = p[id]; if (!t || t.done) return p; if (t.endsAt) return { ...p, [id]: { ...t, endsAt: Math.max(Date.now() + 1000, t.endsAt + mins * 60000) } }; return { ...p, [id]: { ...t, left: Math.max(1000, t.left + mins * 60000) } }; }); } return { timers, now, start, pause, resume, reset, adjust }; } function fmt(ms) { const s = Math.ceil(ms / 1000); return `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`; } function PlayIcon() { return ( ); } function TimerControl({ id, title, minutes, tm }) { const t = tm.timers[id]; let body; if (!t) { body = ( ); } else if (t.done) { body = (

Done! {title} is ready.

); } else { const left = t.endsAt ? Math.max(0, t.endsAt - tm.now) : t.left; body = ( {fmt(left)} {t.endsAt ? ( ) : ( )} ); } return

e.stopPropagation()}>{body}

; } function RecipeDetail({ recipe, database, onClose, toggle, timer }) { const c = { steps: "list-decimal pl-6 space-y-2", pic: "w-full rounded-lg" }; return ( {recipe.title} {toggle} } onClick={onClose} /> {recipe._files?.picture?.url ? (

) : ( )} {recipe.description} {recipe.minutes} min {recipe.ingredients.map((i) => {i})} {timer} {recipe.missing?.length > 0 && Also grab: {recipe.missing.join(", ")}}

); } export default function App() { const { database, useLiveQuery } = useFireproof(DB); const { me, can, ready } = useVibe(DB); const { ViewerTag, requestLogin, isViewerPending } = useViewer(); const kitchenId = me?.userHandle ? `default-${me.userHandle}` : "default-guest"; const { docs } = useLiveQuery("kitchenId", { key: kitchenId }); const scans = docs.filter((d) => d.type === "scan").sort((a, b) => b.createdAt - a.createdAt); const recipes = docs.filter((d) => d.type === "recipe"); const kitchen = docs.find((d) => d.type === "kitchen"); const favorites = docs.filter((d) => d.type === "favorite").sort((a, b) => b.savedAt - a.savedAt); const favByRecipe = new Map(favorites.map((f) => [f.recipeId, f])); const fileRef = useRef(null); const [file, setFile] = useState(null); const [previewUrl, setPreviewUrl] = useState(""); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const [pickedScanId, setPickedScanId] = useState(""); const [openRecipeId, setOpenRecipeId] = useState(""); const [newItem, setNewItem] = useState(""); const [view, setView] = useState("tonight"); const [openFavId, setOpenFavId] = useState(""); const openFav = favorites.find((f) => f._id === openFavId); const favProps = { database, kitchenId, me, can }; const tm = useTimers(); const scan = scans.find((s) => s._id === pickedScanId) ?? scans[0]; const scanRecipes = scan ? recipes.filter((r) => r.scanId === scan._id) : []; const openRecipe = recipes.find((r) => r._id === openRecipeId); const writable = ready && me?.userHandle && can.create({ type: "scan", kitchenId, authorHandle: me.userHandle }).ok; function onPick(e) { const f = e.target.files?.[0]; if (!f) return; setFile(f); setPreviewUrl(URL.createObjectURL(f)); setError(""); } async function ensureKitchen() { if (kitchen) return; await database.put({ _id: kitchenId, type: "kitchen", kitchenId, name: "Stomach Call", creatorHandle: me.userHandle }); } async function saveRecipes(scanId, list) { for (const r of list) { await database.put({ type: "recipe", kitchenId, scanId, authorHandle: me.userHandle, ...r }); } } async function getRecipes() { if (!file || busy || !writable) return; setBusy(true); setError(""); try { const { ingredients, recipes: list } = await recipesFromPhoto(file); await ensureKitchen(); const scanId = crypto.randomUUID(); await database.put({ _id: scanId, type: "scan", kitchenId, authorHandle: me.userHandle, ingredients, createdAt: Date.now(), _files: { photo: file } }); await saveRecipes(scanId, list); setPickedScanId(scanId); setOpenRecipeId(""); setFile(null); setPreviewUrl(""); } catch (err) { setError(err.reason === "refusal" ? "That photo didn't work for us. Try another angle." : err.message); } finally { setBusy(false); } } async function regenerate() { if (!scan || busy || scan.ingredients.length === 0) return; setBusy(true); setError(""); try { const list = await recipesFromList(scan.ingredients); for (const r of scanRecipes) await database.del(r._id); await saveRecipes(scan._id, list); setOpenRecipeId(""); } catch (err) { setError(err.message); } finally { setBusy(false); } } function setIngredients(ingredients) { database.put({ ...scan, ingredients }); } function addItem(e) { e.preventDefault(); const v = newItem.trim(); if (!v || !scan) return; setIngredients([...scan.ingredients, v]); setNewItem(""); } const c = { page: "min-h-screen bg-background text-foreground font-sans p-6 max-w-2xl mx-auto", hidden: "hidden", photo: "w-full max-h-72 object-cover rounded-lg", grow: "min-w-0 flex-1" }; return (

{view === "favorites" && (

Favorites {favorites.length === 0 ? ( ) : ( {favorites.map((f) => (

setOpenFavId(f._id)}> {f.title} {f.description} {f.minutes} min

))} )} {openFav && setOpenFavId("")} timer={} toggle={} />}

)} {view === "tonight" && (<>

{previewUrl ?

: null} {!ready || isViewerPending ? ( Checking your kitchen… ) : !me?.userHandle ? ( Your fridge scans and favorites are kept on your account. ) : !writable ? ( Only people in this kitchen can add scans here. ) : null} {file && ( )} {busy && Reading your fridge and cooking up ideas…} {error && ( {error} {file && } {!file && scan && } )}

{scan ? (

Tonight's three What we see in the fridge {scan.ingredients.map((ing) => ( {ing} } onClick={() => setIngredients(scan.ingredients.filter((i) => i !== ing))} /> ))} {scanRecipes.length === 0 ? ( ) : ( {scanRecipes.map((r) => (

setOpenRecipeId(r._id)}> {r.title} {r.description} {r.minutes} min

))} )} {openRecipe && } toggle={} onClose={() => setOpenRecipeId("")} />}

) : ( )} {scans.length > 0 && (

Earlier fridges {scans.map((s) => ( { setPickedScanId(s._id); setOpenRecipeId(""); }}> {s._files?.photo?.url &&

} {new Date(s.createdAt).toLocaleDateString()} {s.ingredients.slice(0, 5).join(", ")} {s.authorHandle && s.authorHandle !== me?.userHandle && } ))}

)} )}

); }