// LiveDemo — user can actually select text and see Mark → Explain flow. // Deploy note: wire window.explainPassage(prompt, {lang}) to your backend proxy. // Falls back to a local deterministic mock so the demo still works offline. async function mockExplain(text, lang) { await new Promise(r => setTimeout(r, 700 + Math.random() * 600)); const snippet = text.length > 60 ? text.slice(0, 60) + '…' : text; return lang === 'zh' ? `关于"${snippet}" — 这是一段需要接入真实模型才能生动解释的文本. 部署后把 window.explainPassage 指向你的 /api/explain 端点, 就会生成 2-3 句平静友好的背景解释.` : `On "${snippet}" — once you wire window.explainPassage to your /api/explain endpoint, a real model will produce a 2-3 sentence calm, friendly explanation here.`; } function LiveDemo({ lang }) { const isMobile = useIsMobile(); const articleRef = React.useRef(null); const [selection, setSelection] = React.useState(null); // {text, rect} const [bubble, setBubble] = React.useState(null); // {x,y,text} const [card, setCard] = React.useState(null); // {text, loading, response, depth} const [toast, setToast] = React.useState(false); const passages = COPY.demo.passages[lang]; React.useEffect(() => { const onUp = () => { const sel = window.getSelection(); if (!sel || sel.isCollapsed || !articleRef.current) { setBubble(null); return; } const range = sel.getRangeAt(0); if (!articleRef.current.contains(range.commonAncestorContainer)) { setBubble(null); return; } const text = sel.toString().trim(); if (text.length < 4) { setBubble(null); return; } const rect = range.getBoundingClientRect(); const parentRect = articleRef.current.getBoundingClientRect(); setBubble({ x: rect.left + rect.width / 2 - parentRect.left, y: rect.top - parentRect.top, text, }); }; document.addEventListener('mouseup', onUp); document.addEventListener('selectionchange', () => { const sel = window.getSelection(); if (!sel || sel.isCollapsed) setBubble(null); }); return () => document.removeEventListener('mouseup', onUp); }, []); const onMark = async () => { if (!bubble) return; setCard({ text: bubble.text, loading: true, response: '', depth: 'detailed' }); setBubble(null); window.getSelection()?.removeAllRanges(); try { const prompt = lang === 'zh' ? `用 2-3 句话, 以平静友好的口吻, 解释下面这段话的背景和含义. 不要说 "这段话是…". 直接用中文解释.\n\n"${bubble.text}"` : `In 2-3 sentences, calm & friendly tone, explain the context and meaning of this passage. Don't start with "This passage is…". Just explain.\n\n"${bubble.text}"`; // TODO(deploy): replace this with a call to your backend proxy (e.g. /api/explain) // that forwards to Anthropic / OpenAI. Never expose API keys in the client. const response = await window.explainPassage ? await window.explainPassage(prompt, { lang }) : await mockExplain(bubble.text, lang); setCard(c => c ? { ...c, loading: false, response } : null); } catch (e) { setCard(c => c ? { ...c, loading: false, response: lang === 'zh' ? '抱歉, 请求失败了. 真实产品中会自动重试.' : 'Request failed. Real product auto-retries.' } : null); } }; const onSave = () => { setCard(null); setToast(true); setTimeout(() => setToast(false), 2800); }; return (
nature.com / the-geometry-of-biological-time

{t(COPY.demo.articleTitle, lang)}

{t(COPY.demo.byline, lang)}
{passages.map((p, i) => (

{p}

))}
{t(COPY.demo.hint, lang)}
{bubble && ( )}
{card && setCard(null)} onSave={onSave} setCard={setCard}/>} {toast && (
{lang === 'zh' ? '已保存到记忆 · 在你的灵感板上了' : 'Saved to memory · it\'s on your moodboard'}
)}
); } function LiveCard({ card, lang, onClose, onSave, setCard }) { const isMobile = useIsMobile(); return ( ); } function SectionHead({ lang, eyebrow, title, sub, center }) { const isMobile = useIsMobile(); return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } Object.assign(window, { LiveDemo, SectionHead });