| 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 <BrandMark/>;} |
| 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<HTMLElement>('.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<HTMLAnchorElement>('.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<innerHeight*.4).at(-1); |
| links.forEach(a=>{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<HTMLButtonElement>('.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 <><a className="skip-link" href="#main">Skip to content</a><div className="reading-progress" aria-hidden="true"/><header className="site-header"><a href="#" className="brand" aria-label="Ouroboros home"><Mark/><span>ouroboros</span></a><MotionControl/><button aria-controls="main-navigation" className="menu-toggle" onClick={()=>setMenu(!menu)} aria-expanded={menu} aria-label="Toggle navigation">{menu?'Close':'Menu'}</button><nav id="main-navigation" className={menu?'open':''} aria-label="Main navigation">{[['#dual-learning','Dual learning'],['#dataset','Dataset'],['#atlas','Atlas'],['#petase','PETase'],['#evidence','Evidence']].map(([href,label])=><a key={href} href={href} onClick={()=>setMenu(false)}>{label}</a>)}<a href="#playground" className="nav-cta" onClick={()=>setMenu(false)}>Try Ouroboros <span>↗</span></a></nav></header> |
| <main id="main">{error?<div className="page-error"><h1>The research assets could not be loaded.</h1><p>Please refresh the page to try again.</p><button className="button" onClick={()=>location.reload()}>Reload</button></div>:!data?<div className="page-loading"><Mark/><p>Opening the world of protein & language…</p></div>:<> |
| <section className="hero" aria-label="Ouroboros introduction"><div className="hero-copy"><div className="hero-brand-lockup"><BrandMark animated/><div><span>OUROBOROS</span><p>PROTEIN × LANGUAGE · DUAL LEARNING</p></div></div><h1>Read a protein.<br/>Write a protein.<br/><em>Learn together.</em></h1><p className="hero-intro">Connecting amino-acid sequences and functional language through parameter-coupled dual learning.</p><div className="hero-actions"><a className="button primary" href="#dual-learning">Explore dual learning <span>↓</span></a><a className="text-button" href={atlasPath()}>Explore the Atlas ↗</a></div><a className="hero-atlas-link" href={atlasPath()}><span className="hero-atlas-points" aria-hidden="true"><i/><i/><i/><i/><i/><i/><i/><i/><i/></span><span><strong>51.32 million protein stories.</strong><small>Discover the Ouroboros Atlas</small></span><span>↗</span></a></div> |
| <HeroScene protein={data.cases[0]}/></section> |
| <div className="intro-strip"><p>One framework.<br/><strong>A world to explore.</strong></p><a href="#dual-learning"><span>01</span><strong>2 directions</strong><small>One coupled framework <b>↗</b></small></a><a href="#petase"><span>02</span><strong>9 active designs</strong><small>Of 12 submitted for wet-lab testing <b>↗</b></small></a><a href={atlasPath()}><span>03</span><strong>51.32M sequences</strong><small>Explore the annotated Atlas <b>↗</b></small></a></div> |
| <DualLearning example={data.core}/><Dataset data={data.dataset}/><AtlasPreview/><Petase cases={data.cases} wetlab={data.wetlab} onTry={goTry}/><Evidence data={data.evidence}/><Playground examples={[data.core,...data.examples]} incoming={incoming}/> |
| <section className="closing"><div className="closing-loop" aria-hidden="true"><BrandMark/></div><p className="eyebrow">KEEP EXPLORING</p><h2>Understanding informs design.<br/><em>Design invites understanding.</em></h2><div className="closing-actions"><a className="button primary" href="#playground">Try your own prompt <span>↗</span></a><a className="text-button" href={atlasPath()}>Find your next protein ↗</a></div><a className="closing-top" href="#main">Back to the beginning ↑</a></section> |
| </>}</main><footer><a href="#" className="brand"><Mark/><span>ouroboros</span></a><span>Bidirectional protein–text generation</span><div><a href="/data/provenance.json" download>Research sources ↗</a><a href="https://huggingface.co/REXWind/ouroboros-weights" target="_blank" rel="noreferrer">Model weights ↗</a></div></footer></>; |
| } |
| createRoot(document.getElementById('root')!).render(<MotionProvider>{['/atlas','/atlas/','/atlas.html','/atlas/index.html'].includes(window.location.pathname)?<AtlasPage/>:<App/>}</MotionProvider>); |
|
|
