Spaces:
Running
Running
| import { useEffect, useState } from 'react'; | |
| import { api } from './api'; | |
| import type { Project } from './types'; | |
| const order = ['corpus', 'benchmark', 'code', 'demo']; | |
| export default function App() { | |
| const [project, setProject] = useState<Project | null>(null); | |
| const [error, setError] = useState(''); | |
| const [attempt, setAttempt] = useState(0); | |
| useEffect(() => { | |
| const controller = new AbortController(); | |
| setError(''); | |
| api.project(controller.signal) | |
| .then(data => { if (!controller.signal.aborted) setProject(data); }) | |
| .catch(cause => { | |
| if (!controller.signal.aborted) { | |
| setError(cause instanceof Error ? cause.message : 'Unable to load project information.'); | |
| } | |
| }); | |
| return () => controller.abort(); | |
| }, [attempt]); | |
| if (error) { | |
| return <main className="project-page feedback" role="alert"> | |
| <h1>MedCaseAgent</h1> | |
| <p>{error}</p> | |
| <button onClick={() => setAttempt(value => value + 1)}>Try again</button> | |
| </main>; | |
| } | |
| if (!project) { | |
| return <main className="project-page feedback" role="status">Loading MedCaseAgent…</main>; | |
| } | |
| const resources = order.flatMap(id => project.resources.filter(resource => resource.id === id)); | |
| return <main className="project-page"> | |
| <header className="introduction"> | |
| <p className="organization">{project.organization}</p> | |
| <h1>{project.name}</h1> | |
| <p className="subtitle">{project.title}</p> | |
| <p className="description">{project.description}</p> | |
| </header> | |
| <figure className="teaser"> | |
| <a href="./teaser.pdf" target="_blank" rel="noreferrer" aria-label="Open the MedCaseAgent overview figure as a PDF"> | |
| <img src="./teaser.png" width="2380" height="1020" alt="MedCaseAgent overview from the paper: fragmented clinical evidence and medical images are processed by planning, writing, and refinement agents with external medical tools to produce a case report." fetchPriority="high" /> | |
| </a> | |
| <figcaption>MedCaseAgent at a glance. <a href="./teaser.pdf" target="_blank" rel="noreferrer">View figure <span aria-hidden="true">↗</span></a></figcaption> | |
| </figure> | |
| <section className="resources" aria-labelledby="resources-title"> | |
| <h2 id="resources-title">Resources</h2> | |
| <ul> | |
| {resources.map(resource => <li key={resource.id}> | |
| {resource.url ? <a className="resource-link" href={resource.url} target="_blank" rel="noreferrer"> | |
| <span className="resource-name">{resource.name}{resource.id === 'code' && <span className="code-label"> code</span>}</span> | |
| <span className="resource-description">{resource.description}</span> | |
| <span className="resource-arrow" aria-hidden="true">↗</span> | |
| </a> : <div className="resource-link"><span className="resource-name">{resource.name}</span><span className="resource-description">{resource.description}</span></div>} | |
| </li>)} | |
| </ul> | |
| </section> | |
| <footer>{project.organization} <span aria-hidden="true">·</span> {project.name}</footer> | |
| </main>; | |
| } | |