import {atlasPath} from './api'; import {useEffect,useState} from 'react'; import {createRoot} from 'react-dom/client'; import {DualLearning} from './DualLearning'; import {Petase} from './Petase'; import type {WetlabData} from './AssayEvidence'; import {Evidence} from './Evidence'; import {Dataset} from './Dataset'; import type {DatasetData} from './Dataset'; import {Playground} from './Playground'; import {BrandMark} from './BrandMark'; import {HeroScene} from './HeroScene'; import {MotionProvider,MotionControl} from './Motion'; import {AtlasPage,AtlasPreview} from './Atlas'; import type {ProteinCase,Example,EvidenceData} from './types'; import './style.css'; import './showcase.css'; import './biosystem.css'; import './brand.css'; import './dual-story.css'; import './refinements.css'; function Mark(){return ;} function App(){ const [data,setData]=useState<{cases:ProteinCase[];evidence:EvidenceData;examples:Example[];wetlab:WetlabData;dataset:DatasetData;core:Example}|null>(null),[error,setError]=useState(false),[menu,setMenu]=useState(false),[incoming,setIncoming]=useState<{text:string;version:number;note?:string}|null>(null); useEffect(()=>{const ac=new AbortController();Promise.all(['petase','evidence','examples','wetlab','annotation-stats','core-example'].map(f=>fetch('/data/'+f+'.json',{signal:ac.signal}).then(r=>{if(!r.ok)throw new Error();return r.json();}))).then(([cases,evidence,examples,wetlab,dataset,core])=>setData({cases,evidence,examples,wetlab,dataset,core})).catch(()=>{if(!ac.signal.aborted)setError(true);});return()=>ac.abort();},[]); useEffect(()=>{ if(!data)return; const sections=[...document.querySelectorAll('.section, .closing')]; const reveal=new IntersectionObserver(entries=>entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('is-visible');reveal.unobserve(entry.target);}}),{threshold:.05}); sections.forEach(el=>{if(el.id==='dual-learning')el.classList.add('is-visible');else{el.classList.add('scroll-reveal');reveal.observe(el);}}); const visibility=new IntersectionObserver(entries=>entries.forEach(entry=>{(entry.target as HTMLElement).dataset.inView=String(entry.isIntersecting);}),{threshold:0}); sections.forEach(el=>visibility.observe(el)); const links=[...document.querySelectorAll('.site-header nav a')]; let frame=0; const update=()=>{ frame=0; const range=document.documentElement.scrollHeight-innerHeight; document.documentElement.style.setProperty('--reading-progress',String(range>0?Math.max(0,Math.min(1,scrollY/range)):0)); const current=sections.filter(s=>s.id&&s.getBoundingClientRect().top{if(current&&a.hash==='#'+current.id)a.setAttribute('aria-current','location');else a.removeAttribute('aria-current');}); }; const progress=()=>{if(!frame)frame=requestAnimationFrame(update);}; const resize=new ResizeObserver(progress);resize.observe(document.body); window.addEventListener('scroll',progress,{passive:true});window.addEventListener('resize',progress);progress(); return()=>{reveal.disconnect();visibility.disconnect();resize.disconnect();window.removeEventListener('scroll',progress);window.removeEventListener('resize',progress);cancelAnimationFrame(frame);}; },[data]); useEffect(()=>{ if(!menu)return; const close=(event:KeyboardEvent)=>{if(event.key==='Escape'){setMenu(false);document.querySelector('.menu-toggle')?.focus();}}; const outside=(event:PointerEvent)=>{if(!(event.target as Element).closest('.site-header'))setMenu(false);}; document.addEventListener('keydown',close);document.addEventListener('pointerdown',outside); return()=>{document.removeEventListener('keydown',close);document.removeEventListener('pointerdown',outside);}; },[menu]); const goTry=(p:ProteinCase)=>{setIncoming({text:p.prompt.match(/Capable of degrading[^.]*\./)?.[0]||p.prompt,version:Date.now(),note:`Original LoRA generation prompt for ${p.id.toUpperCase()}. The live playground runs base large-v5.`});document.getElementById('playground')?.scrollIntoView({behavior:window.matchMedia('(prefers-reduced-motion: reduce)').matches?'instant':'smooth'});}; return <>Skip to content