Spaces:
Running
on
T4
Running
on
T4
File size: 8,288 Bytes
59d87be |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
/**
* SimulationBriefing Component
*
* "What's happening in this assessment" page
* Adapted from appoint-ready's RolePlayDialogs pattern
* Explains the two "agents" and what to expect
*/
import React from 'react';
import './SimulationBriefing.css';
const SimulationBriefing = ({ selectedPatient, selectedWound, onStart, onBack }) => {
return (
<div className="page simulation-briefing-page">
{/* Header */}
<header className="header">
<div className="header-left">
<button className="back-button" onClick={onBack}>
← Back
</button>
<div className="logo-container">
<span className="logo">EWAAST</span>
<span className="powered-by">
powered by <span className="medgemma-badge">MedGemma 1.5</span>
</span>
</div>
</div>
<button className="details-button">
ℹ️ Details about this Demo
</button>
</header>
{/* Main Content */}
<div className="page-content">
<div className="frame frame-wide">
<h1 className="briefing-title">What's happening in this assessment</h1>
{/* Two Agent Cards */}
<div className="agents-grid">
{/* EWAAST Agent Card */}
<div className="agent-card">
<h2 className="agent-title">EWAAST Assessment Agent</h2>
<p className="agent-subtitle">
Built with: <span className="medgemma-inline">MedGemma</span> 1.5 4B
</p>
<div className="agent-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none">
<circle cx="32" cy="32" r="28" fill="#E8F0FE" />
<path d="M24 28L32 20L40 28" stroke="#4285F4" strokeWidth="3" strokeLinecap="round" />
<path d="M24 36L32 44L40 36" stroke="#4285F4" strokeWidth="3" strokeLinecap="round" />
<circle cx="32" cy="32" r="6" fill="#4285F4" />
</svg>
</div>
<p className="agent-description">
In this demo, EWAAST functions as an AI agent designed to assess wounds
using <strong>equitable visual criteria</strong>. It applies the{' '}
<strong>Monk Skin Tone (MST) Scale</strong> to adapt its assessment
based on the patient's skin tone.
</p>
<p className="agent-description">
For <strong>MST {selectedPatient?.mst_value}</strong> ({selectedPatient?.mst_category} skin),
EWAAST will:
</p>
<ul className="agent-criteria">
{selectedPatient?.mst_value >= 7 ? (
<>
<li>❌ <strong>NOT</strong> rely on "redness" or "erythema"</li>
<li>✓ Look for purple/blue discoloration</li>
<li>✓ Assess warmth and induration</li>
<li>✓ Check for texture changes</li>
</>
) : selectedPatient?.mst_value >= 4 ? (
<>
<li>⚠️ Use redness as secondary indicator only</li>
<li>✓ Look for color changes (darkening)</li>
<li>✓ Assess warmth and shiny skin</li>
</>
) : (
<>
<li>✓ Look for non-blanchable erythema</li>
<li>✓ Traditional redness criteria apply</li>
<li>✓ Assess warmth and pallor</li>
</>
)}
</ul>
</div>
{/* Patient Scenario Card */}
<div className="agent-card">
<h2 className="agent-title">Patient Scenario: {selectedPatient?.name}</h2>
<p className="agent-subtitle">
Simulated by: Synthetic Clinical Vignette
</p>
<div className="patient-photo-container">
<img
src={selectedPatient?.image}
alt={selectedPatient?.name}
className="patient-photo"
/>
</div>
<p className="agent-description">
EWAAST is provided the context that the patient is a{' '}
<strong>{selectedPatient?.age}-year-old {selectedPatient?.gender?.toLowerCase()}</strong> with{' '}
<strong>MST {selectedPatient?.mst_value}</strong> ({selectedPatient?.mst_category}) skin tone.
</p>
<p className="agent-description">
The simulated scenario involves a <strong>{selectedWound?.name}</strong> wound:
</p>
<div className="wound-info">
<strong>{selectedWound?.name}</strong>: {selectedWound?.description}
</div>
<p className="agent-description patient-context">
<strong>Medical History:</strong> {selectedPatient?.existing_condition}
</p>
</div>
</div>
{/* Explanation Text */}
<div className="explanation-section">
<p className="explanation-text">
As the assessment develops, EWAAST{' '}
<span className="highlight">
generates a real-time clinical report
</span>{' '}
using MST-adaptive visual criteria. For MST {selectedPatient?.mst_value}, this means:
</p>
<div className="visual-guidance-box">
<strong>Visual Guidance:</strong> {selectedPatient?.visual_guidance}
</div>
<p className="explanation-text">
Following the assessment, a{' '}
<span className="highlight">
self-evaluation highlighting equity considerations
</span>{' '}
will be available to demonstrate how EWAAST ensures fair treatment across all skin tones.
</p>
</div>
{/* Start Button */}
<button className="primary-button start-button" onClick={onStart}>
🔬 Start Assessment
</button>
</div>
</div>
{/* Footer */}
<footer className="footer">
<span className="footer-text">
All patients are synthetic. No real patient data is used.
</span>
</footer>
</div>
);
};
export default SimulationBriefing;
|