// Hero composite: tells the LEARNING story, not live monitoring. // 1) Video frame (installed cameras feed it automatically) with bounding boxes // 2) "Comportamentos descobertos" card — natural-language labels consolidating with rising confidence // 3) "Validação + pergunta da IA" card — human-in-the-loop + a genuine AI question // 4) "Sugestão de produtividade" pill emerging at the end const { useEffect, useState, useRef } = React; // ─────────────────────────────────────────────────────────────────────────── // Video frame — installed cameras, abstracted factory scene with tracked people // ─────────────────────────────────────────────────────────────────────────── function VideoFrame() { const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => setTick((t) => t + 1), 2000); return () => clearInterval(id); }, []); const ops = [ { id: "P-01", x: 14, y: 38, w: 18, h: 36, act: "movimenta peça" }, { id: "P-02", x: 45, y: 30, w: 16, h: 42, act: "ajusta setup" }, { id: "P-03", x: 70, y: 44, w: 14, h: 30, act: "aguarda máquina" }]; return (
{/* Bounding boxes — labelled with discovered ACTIVITIES (natural language) */} {ops.map((o, i) =>
{o.id}
{o.act}
)} {/* HUD — emphasizes auto-capture + interpretation, not "live surveillance" */}
INTERPRETANDO CAM-04 · captação automática
3 pessoas rastreadas · 3 ações descritas detect · track · descrever
); } // ─────────────────────────────────────────────────────────────────────────── // "Comportamentos descobertos" — labels consolidating, confidence rising // ─────────────────────────────────────────────────────────────────────────── function useConfidence(target, delay = 0, duration = 1600) { const [val, setVal] = useState(0); useEffect(() => { let raf, start; const startAt = performance.now() + delay; const step = (t) => { if (t < startAt) {raf = requestAnimationFrame(step);return;} if (!start) start = t; const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(target * eased); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [target, delay, duration]); return val; } function BehaviorRow({ label, group, conf, delay }) { const c = useConfidence(conf, delay); const settled = c >= conf - 0.3; return (
“{label}”
{group}
{Math.round(c)}%
); } function DiscoveryCard() { return (
Comportamentos descobertos
Linha A
vocabulário do seu processo, criado pela IA
); } // ─────────────────────────────────────────────────────────────────────────── // "Validação + pergunta da IA" — human-in-the-loop + genuine question // ─────────────────────────────────────────────────────────────────────────── function ValidationCard() { const [phase, setPhase] = useState(0); // 0 ask, 1 answered/confident useEffect(() => { const id = setInterval(() => setPhase((p) => (p + 1) % 2), 3600); return () => clearInterval(id); }, []); const conf = phase === 1 ? 94 : 71; return (
Prism aprende
validação · pergunta
{/* behavior to validate */}
Classifiquei como espera: “parado, aguardando ciclo”.
{phase === 1 ? "confirmado" : "confirmar"} corrigir
{/* genuine AI question */}
Pergunta da IA
Essa pausa antes da prensa é padrão do turno ou exceção?
{/* confidence growing */}
{conf}%
confiança do modelo {phase === 1 ? "após sua resposta" : "antes de aprender"}
); } // ─────────────────────────────────────────────────────────────────────────── // "Sugestão de produtividade" pill — emerges last // ─────────────────────────────────────────────────────────────────────────── function SuggestionPill() { return (
Sugestão Lean
Espera evitável antes da prensa — potencial de recuperar tempo na Linha A.
); } // ─────────────────────────────────────────────────────────────────────────── // HeroComposite — arranges the learning story // ─────────────────────────────────────────────────────────────────────────── function HeroComposite() { return (
{/* Floating discovery card — top right overlap */}
{/* Floating validation card — bottom left overlap */}
{/* Suggestion pill — bottom right, emerges last */}
{/* Mobile: stacked below */}
); } window.HeroComposite = HeroComposite;