/* screen-scan.jsx — capture → OCR → AI identify → confirm → add */ // downscale an image source (dataURL/Blob URL) to a JPEG dataURL function downscale(src, max, q=0.82){ return new Promise((res)=>{ const img = new Image(); img.onload = ()=>{ let {width:w, height:h} = img; const scale = Math.min(1, max/Math.max(w,h)); w=Math.round(w*scale); h=Math.round(h*scale); const c=document.createElement("canvas"); c.width=w; c.height=h; c.getContext("2d").drawImage(img,0,0,w,h); res(c.toDataURL("image/jpeg", q)); }; img.onerror=()=>res(src); img.src=src; }); } const COLORS = ["Red","White","Rosé","Sparkling"]; function ScanScreen({ start="camera", onClose, onAdded }){ const [phase, setPhase] = React.useState(start==="manual" ? "confirm" : "camera"); // camera | processing | confirm | error const [progress, setProgress] = React.useState(0); const [progLabel, setProgLabel] = React.useState(""); const [shot, setShot] = React.useState(null); // full photo dataURL const [thumb, setThumb] = React.useState(null); // small stored photo const [ocr, setOcr] = React.useState(""); const [draft, setDraft] = React.useState(start==="manual" ? blankDraft() : null); const [conf, setConf] = React.useState(start==="manual" ? 0 : null); const [qty, setQty] = React.useState(1); const [err, setErr] = React.useState(""); const [camReady, setCamReady] = React.useState(false); const videoRef = React.useRef(null); const streamRef = React.useRef(null); const fileRef = React.useRef(null); // start camera React.useEffect(()=>{ if(phase!=="camera") return; let cancelled=false; (async()=>{ try{ const s = await navigator.mediaDevices.getUserMedia({ video:{ facingMode:{ideal:"environment"} }, audio:false }); if(cancelled){ s.getTracks().forEach(t=>t.stop()); return; } streamRef.current=s; if(videoRef.current){ videoRef.current.srcObject=s; await videoRef.current.play().catch(()=>{}); setCamReady(true); } }catch(e){ setCamReady(false); } })(); return ()=>{ cancelled=true; stopCam(); }; },[phase]); function stopCam(){ if(streamRef.current){ streamRef.current.getTracks().forEach(t=>t.stop()); streamRef.current=null; } } function captureFromVideo(){ const v=videoRef.current; if(!v||!v.videoWidth) return; const c=document.createElement("canvas"); c.width=v.videoWidth; c.height=v.videoHeight; c.getContext("2d").drawImage(v,0,0); stopCam(); runPipeline(c.toDataURL("image/jpeg",0.9)); } function onFile(e){ const f=e.target.files&&e.target.files[0]; if(!f) return; const url=URL.createObjectURL(f); stopCam(); runPipeline(url); } // jump straight to the editable form — no photo, no AI call function enterManually(){ stopCam(); setShot(null); setThumb(null); setOcr(""); setDraft(blankDraft()); setConf(0); setPhase("confirm"); } async function runPipeline(src){ setPhase("processing"); setErr(""); setProgress(8); setProgLabel("Reading the label…"); // gentle indeterminate progress while the vision model works let p = 8; const tick = setInterval(()=>{ p = Math.min(92, p + Math.random()*9); setProgress(Math.round(p)); }, 300); try{ const big = await downscale(src, 1100, 0.86); const small = await downscale(src, 360, 0.8); setShot(big); setThumb(small); setProgLabel("Identifying the wine…"); const obj = await identifyFromImage(big); clearInterval(tick); setProgress(100); setOcr(obj.labelText || ""); setConf(obj.confidence ?? null); setDraft(normalize(obj)); setPhase("confirm"); }catch(e){ clearInterval(tick); setErr(e.message || "Something went wrong reading that label."); setPhase("error"); } } function blankDraft(){ return { producer:"", cuvee:"", vintage:THIS_YEAR-3, color:"Red", country:"", region:"", subregion:"", appellation:"", classification:"Estate", varietal:"", abv:13.5, critScore:90, drinkFrom:THIS_YEAR, drinkTo:THIS_YEAR+6, peakFrom:THIS_YEAR+1, peakTo:THIS_YEAR+4, valueLow:null, valueHigh:null, valueEst:null, pairings:[], tasting:"", body:60, tannin:50, acidity:55, sweetness:10, ratings:{}, location:null }; } function normalize(o){ return { ...blankDraft(), ...o, pairings:Array.isArray(o.pairings)?o.pairings:[] }; } function field(k,v){ setDraft(d=>({...d,[k]:v})); } function save(){ const w = { ...draft, qty, photo:thumb, valueEst: draft.valueEst!=null?Number(draft.valueEst): (draft.valueLow&&draft.valueHigh?Math.round((+draft.valueLow+ +draft.valueHigh)/2):null) }; ["vintage","abv","critScore","drinkFrom","drinkTo","peakFrom","peakTo","valueLow","valueHigh","valueEst","body","tannin","acidity","sweetness"] .forEach(k=>{ if(w[k]!==null&&w[k]!=="") w[k]=Number(w[k]); }); const item = Cellar.addOrMerge(w, qty); onAdded && onAdded(item.id); } // ---------- render ---------- return (
{phase==="camera" && (