Initial commit with Git LFS

.dockerignore

@@ -0,0 +1,12 @@
+.git
+node_modules
+__pycache__
+*.pyc
+.env
+appoint-ready/
+rad_explain/
+frontend/node_modules/
+frontend/build/
+cache/
+*.zip
+.DS_Store

.gitattributes

@@ -0,0 +1,4 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.avif filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,10 @@
+__pycache__/
+*.pyc
+.env
+env.list
+node_modules/
+frontend/build/
+*.zip
+.DS_Store
+cache/
+/tmp/sushruta*

Dockerfile

@@ -0,0 +1,84 @@
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# ==========================================
+# Stage 1: Build the React Frontend
+# ==========================================
+FROM node:24-slim AS frontend-build
+WORKDIR /app/frontend
+
+# Copy frontend codebase
+COPY frontend/package*.json ./
+RUN npm install
+
+COPY frontend/ ./
+RUN npm run build
+
+# ==========================================
+# Stage 2: Build the Unified Python Backend
+# ==========================================
+FROM python:3.12-slim
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    wget \
+    tar \
+    ffmpeg \
+    unzip \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1 \
+    PORT=7860 \
+    FRONTEND_BUILD=/app/frontend/build \
+    CACHE_DIR=/cache
+
+# Create user with UID 1000 for Hugging Face Spaces security compliance
+RUN useradd -m -u 1000 user
+WORKDIR /app
+
+# Copy requirements and install python packages
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all python source modules and package files
+COPY config.py cache_manager.py llm_client.py tts_client.py app.py LICENSE ./
+COPY intake/ ./intake/
+COPY radiology/ ./radiology/
+COPY static/ ./static/
+
+# Copy built React frontend assets from Stage 1
+COPY --from=frontend-build /app/frontend/build ./frontend/build
+
+# Set up caching directory with unpacked archives
+RUN mkdir -p /cache/intake /cache/radiology
+
+# Copy cache archives
+COPY cache_archives/intake_cache.zip /tmp/intake_cache.zip
+COPY cache_archives/radiology_default_cache/ /tmp/radiology_default_cache/
+
+# Extract intake cache
+RUN unzip -q -o /tmp/intake_cache.zip -d /cache/intake && rm /tmp/intake_cache.zip
+
+# Copy radiology cache
+RUN cp -r /tmp/radiology_default_cache/* /cache/radiology/ && rm -rf /tmp/radiology_default_cache
+
+# Set permissions for user 1000
+RUN chown -R 1000:1000 /app /cache && chmod -R 777 /cache
+
+# Switch to the non-root user
+USER user
+
+EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app", "--threads", "4", "--timeout", "600"]

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,79 @@
+---
+title: Sushruta - Patient 360
+emoji: 🏥
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: true
+license: apache-2.0
+short_description: 'Patient 360 Demo — Pre-Visit Intake & Radiology Explainer'
+models:
+  - google/medgemma-27b-text-it
+  - google/medgemma-4b-it
+secrets:
+  - HF_TOKEN
+  - MEDGEMMA_27B_ENDPOINT
+  - MEDGEMMA_4B_ENDPOINT
+---
+
+# Sushruta — Patient 360 🏥
+
+Sushruta is a unified Patient 360 application that merges two prominent Google Health AI research demonstrations into a single, high-fidelity experience:
+1. **Pre-Visit Intake Simulator**: Watch MedGemma conduct a pre-visit clinical interview and draft a primary care intake report.
+2. **Radiology Report Explainer**: Explore radiology reports and images, and click any medical sentence to receive a simplified, clinical-grade plain-language explanation from MedGemma.
+
+Both features have been optimized to run completely on **Hugging Face Inference APIs and Endpoints**, utilizing the MedGemma family of models:
+- **Clinical Assistant (Intake)**: `google/medgemma-27b-text-it`
+- **Patient Roleplay**: `google/gemma-3-27b-it`
+- **Radiology Explainer**: `google/medgemma-4b-it`
+- **Text-to-Speech (TTS)**: `hexgrad/Kokoro-82M`
+
+---
+
+## 🛠️ Stack & Architecture
+
+- **Backend**: Python, Flask, and Flask-CORS serving high-performance API endpoints and SSE streams.
+- **Frontend**: A gorgeous React 18 SPA styled with a modern, glassmorphic dark medical theme, responsive navigation, and custom visualizations.
+- **Caching**: Shared diskcache memoization allowing seamless demonstrations, instant responses, and zero API costs for pre-simulated scenarios.
+- **Speech**: High-fidelity real-time voice synthesis powered by serverless TTS.
+
+---
+
+## 🚀 Running Locally
+
+### With Docker (Recommended)
+You can run the entire space locally using Docker:
+```bash
+./run_local.sh
+```
+The application will be accessible at http://localhost:7860.
+
+### Without Docker
+1. **Backend**:
+   ```bash
+   pip install -r requirements.txt
+   export HF_TOKEN="your_huggingface_token"
+   python app.py
+   ```
+2. **Frontend**:
+   ```bash
+   cd frontend
+   npm install
+   npm run start
+   ```
+
+---
+
+## 🔒 Configuration & Secrets
+
+When deploying to Hugging Face Spaces, ensure the following secrets are set:
+- `HF_TOKEN`: Hugging Face API access token (required for serverless router and speech endpoints).
+- `MEDGEMMA_27B_ENDPOINT` (Optional): Custom inference endpoint URL for MedGemma 27B. If left blank, falls back to the serverless API.
+- `MEDGEMMA_4B_ENDPOINT` (Optional): Custom inference endpoint URL for MedGemma 4B. If left blank, falls back to the serverless API.
+- `GENERATE_SPEECH`: Set to `true` to enable real-time TTS (default: `false` to use cached recordings).
+
+---
+
+## 📜 License
+Licensed under the Apache License, Version 2.0.

app.py

@@ -0,0 +1,94 @@
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Unified Flask application for Sushruta Patient 360."""
+
+import logging
+import os
+from flask import Flask, send_from_directory, jsonify
+from flask_cors import CORS
+
+import config
+from intake.routes import intake_bp
+from radiology.routes import radiology_bp
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
+    handlers=[logging.StreamHandler()],
+)
+logger = logging.getLogger(__name__)
+
+# Initialize Flask app
+# Point static_folder to the React build output directory
+app = Flask(
+    __name__,
+    static_folder=str(config.FRONTEND_BUILD),
+    static_url_path="",
+)
+
+# Enable CORS for all API endpoints
+CORS(app, resources={r"/api/*": {"origins": "*"}})
+
+# Register blueprints
+app.register_blueprint(intake_bp, url_prefix="/api/intake")
+app.register_blueprint(radiology_bp, url_prefix="/api/radiology")
+
+
+# ── Serve Radiology static assets ───────────────────────────────────────────
+@app.route("/static/images/<path:filename>")
+def serve_radiology_images(filename):
+    """Serve radiology images from base static directory."""
+    static_images_dir = config.BASE_DIR / "static" / "images"
+    return send_from_directory(str(static_images_dir), filename)
+
+
+@app.route("/static/reports/<path:filename>")
+def serve_radiology_reports(filename):
+    """Serve raw radiology reports from base static directory."""
+    static_reports_dir = config.BASE_DIR / "static" / "reports"
+    return send_from_directory(str(static_reports_dir), filename)
+
+
+# ── Health Check ────────────────────────────────────────────────────────────
+@app.route("/api/health", methods=["GET"])
+def health_check():
+    """Health check endpoint."""
+    return jsonify({
+        "status": "healthy",
+        "app": "Sushruta Patient 360",
+        "medgemma_27b_initialized": bool(config.MEDGEMMA_27B_ENDPOINT or config.HF_TOKEN),
+        "medgemma_4b_initialized": bool(config.MEDGEMMA_4B_ENDPOINT or config.HF_TOKEN),
+    })
+
+
+# ── Serve React Frontend ────────────────────────────────────────────────────
+@app.route("/", defaults={"path": ""})
+@app.route("/<path:path>")
+def serve_react(path):
+    """Serve the index.html or assets from the React build folder."""
+    static_folder = str(config.FRONTEND_BUILD)
+
+    # If file exists in React build folder, serve it
+    if path and os.path.exists(os.path.join(static_folder, path)):
+        return send_from_directory(static_folder, path)
+
+    # Fallback to serving index.html for React SPA routing
+    return send_from_directory(static_folder, "index.html")
+
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    logger.info("Starting Sushruta Patient 360 server on port %d...", port)
+    app.run(host="0.0.0.0", port=port, debug=False)

appoint-ready

@@ -0,0 +1 @@
+Subproject commit 88024fb7791429f7a5acf5668b904d23d6fcc89d

cache_manager.py

@@ -0,0 +1,46 @@
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Cache manager for Sushruta Patient 360 using diskcache."""
+
+import logging
+import shutil
+from pathlib import Path
+from diskcache import Cache
+from config import CACHE_DIR
+
+logger = logging.getLogger(__name__)
+
+# Ensure CACHE_DIR exists
+try:
+    CACHE_DIR.mkdir(parents=True, exist_ok=True)
+except Exception as e:
+    logger.warning("Could not create CACHE_DIR %s: %s. Using local ./cache instead.", CACHE_DIR, e)
+    CACHE_DIR = Path(__file__).resolve().parent / "cache"
+    CACHE_DIR.mkdir(parents=True, exist_ok=True)
+
+# Define Cache instances
+intake_cache = Cache(str(CACHE_DIR / "intake"))
+radiology_cache = Cache(str(CACHE_DIR / "radiology"))
+
+logger.info("Initialized diskcache at: %s", CACHE_DIR)
+
+
+def create_cache_zip(archive_path_prefix: str) -> str:
+    """Create a zip archive of the CACHE_DIR and return the path to the zip file.
+
+    Saves it as `archive_path_prefix.zip`.
+    """
+    zip_path = shutil.make_archive(archive_path_prefix, "zip", str(CACHE_DIR))
+    logger.info("Created cache archive zip at: %s", zip_path)
+    return zip_path

config.py

@@ -0,0 +1,97 @@
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Unified configuration for Sushruta Patient 360."""
+
+import csv
+import logging
+import os
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+# ── Base paths ──────────────────────────────────────────────────────────────
+BASE_DIR = Path(__file__).resolve().parent
+
+# ── Environment variables ───────────────────────────────────────────────────
+HF_TOKEN = os.environ.get("HF_TOKEN", "")
+MEDGEMMA_27B_ENDPOINT = os.environ.get("MEDGEMMA_27B_ENDPOINT", "")
+MEDGEMMA_4B_ENDPOINT = os.environ.get("MEDGEMMA_4B_ENDPOINT", "")
+GENERATE_SPEECH = os.environ.get("GENERATE_SPEECH", "false").lower() in (
+    "true",
+    "1",
+    "yes",
+)
+CACHE_DIR = Path(os.environ.get("CACHE_DIR", "/cache"))
+FRONTEND_BUILD = Path(
+    os.environ.get("FRONTEND_BUILD", str(BASE_DIR / "frontend" / "build"))
+)
+
+# ── Radiology report manifest ──────────────────────────────────────────────
+AVAILABLE_REPORTS: dict[str, dict] = {}
+
+
+def load_reports_manifest() -> dict[str, dict]:
+    """Load the radiology reports manifest from static/reports_manifest.csv.
+
+    CSV columns: image_type, case_display_name, image_path, report_path
+    Returns a dict keyed by case_display_name.
+    """
+    manifest_path = BASE_DIR / "static" / "reports_manifest.csv"
+    reports: dict[str, dict] = {}
+
+    if not manifest_path.exists():
+        logger.warning("Reports manifest not found at %s", manifest_path)
+        return reports
+
+    with open(manifest_path, newline="", encoding="utf-8") as f:
+        reader = csv.DictReader(f)
+        for row in reader:
+            image_type = row.get("image_type", "").strip()
+            case_name = row.get("case_display_name", "").strip()
+            image_path = row.get("image_path", "").strip()
+            report_path = row.get("report_path", "").strip()
+
+            if not case_name:
+                continue
+
+            # Validate file paths exist (relative to BASE_DIR)
+            abs_image = BASE_DIR / image_path
+            abs_report = BASE_DIR / report_path
+
+            if not abs_image.exists():
+                logger.warning(
+                    "Image file not found for report '%s': %s",
+                    case_name,
+                    abs_image,
+                )
+            if not abs_report.exists():
+                logger.warning(
+                    "Report file not found for report '%s': %s",
+                    case_name,
+                    abs_report,
+                )
+
+            reports[case_name] = {
+                "image_type": image_type,
+                "case_display_name": case_name,
+                "image_path": image_path,
+                "report_path": report_path,
+            }
+
+    logger.info("Loaded %d radiology reports from manifest", len(reports))
+    return reports
+
+
+# Load manifest at import time
+AVAILABLE_REPORTS = load_reports_manifest()

frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "diff": "^8.0.2",
+    "html-react-parser": "^5.2.5",
+    "marked": "^15.0.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",    
+    "@textea/json-viewer": "^3.2.1",
+    "@mui/material": "^5.15.20"
+  },
+  "scripts": {
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
+    "build": "react-scripts build"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/assets/alex.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ae46c52980e7d7a176245a8f42e90c7386af502e2efed87721937a0e3c9e53ae
+size 1122871

frontend/public/assets/alex_fhir.json

@@ -0,0 +1,246 @@
+[
+  {
+    "resourceType": "Patient",
+    "id": "alex-sharma-63-female",
+    "meta": {
+      "profile": [
+        "http://hl7.org/fhir/R4/StructureDefinition/Patient"
+      ]
+    },
+    "text": {
+      "status": "generated",
+      "div": "<div xmlns=\"http://www.w3.org/1999/xhtml\"><p><b>Alex Sharma</b> (Female, 63)</p><p>Known Conditions: Diabetes</p></div>"
+    },
+    "identifier": [
+      {
+        "use": "usual",
+        "type": {
+          "coding": [
+            {
+              "system": "http://terminology.hl7.org/CodeSystem/v2-0203",
+              "code": "MR",
+              "display": "Medical record number"
+            }
+          ]
+        },
+        "system": "http://example.org/patients",
+        "value": "PAT-2023-001"
+      }
+    ],
+    "name": [
+      {
+        "use": "official",
+        "family": "Sharma",
+        "given": [
+          "Alex"
+        ]
+      }
+    ],
+    "gender": "female",
+    "birthDate": "1962-01-15",
+    "deceasedBoolean": false
+  },
+  {
+    "resourceType": "Encounter",
+    "id": "encounter-diabetes-followup",
+    "meta": {
+      "profile": [
+        "http://hl7.org/fhir/R4/StructureDefinition/Encounter"
+      ]
+    },
+    "text": {
+      "status": "generated",
+      "div": "<div xmlns=\"http://www.w3.org/1999/xhtml\"><p><b>Diabetes Follow-up Visit</b> for Alex Sharma on 2024-03-10</p></div>"
+    },
+    "status": "finished",
+    "class": {
+      "system": "http://terminology.hl7.org/CodeSystem/v3-ActCode",
+      "code": "AMB",
+      "display": "Ambulatory"
+    },
+    "type": [
+      {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/v3-ActCode",
+            "code": "FLD",
+            "display": "Field"
+          }
+        ],
+        "text": "Follow-up visit for Diabetes"
+      }
+    ],
+    "subject": {
+      "reference": "Patient/alex-sharma-63-female",
+      "display": "Alex Sharma"
+    },
+    "period": {
+      "start": "2024-03-10T10:00:00Z",
+      "end": "2024-03-10T10:45:00Z"
+    },
+    "serviceProvider": {
+      "reference": "Organization/example-org",
+      "display": "Example Medical Center"
+    }
+  },
+  {
+    "resourceType": "Condition",
+    "id": "condition-diabetes-mellitus",
+    "meta": {
+      "profile": [
+        "http://hl7.org/fhir/R4/StructureDefinition/Condition"
+      ]
+    },
+    "text": {
+      "status": "generated",
+      "div": "<div xmlns=\"http://www.w3.org/1999/xhtml\"><p><b>Diabetes Mellitus, Type 2</b> for Alex Sharma, diagnosed 2020-05-20</p></div>"
+    },
+    "clinicalStatus": {
+      "coding": [
+        {
+          "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+          "code": "active",
+          "display": "Active"
+        }
+      ]
+    },
+    "verificationStatus": {
+      "coding": [
+        {
+          "system": "http://terminology.hl7.org/CodeSystem/condition-ver-status",
+          "code": "confirmed",
+          "display": "Confirmed"
+        }
+      ]
+    },
+    "category": [
+      {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-category",
+            "code": "problem-list-item",
+            "display": "Problem List Item"
+          }
+        ]
+      }
+    ],
+    "severity": {
+      "coding": [
+        {
+          "system": "http://terminology.hl7.org/CodeSystem/condition-severity",
+          "code": "24484000",
+          "display": "Moderate"
+        }
+      ]
+    },
+    "code": {
+      "coding": [
+        {
+          "system": "http://snomed.info/sct",
+          "code": "44054006",
+          "display": "Diabetes mellitus"
+        }
+      ],
+      "text": "Diabetes Mellitus, Type 2"
+    },
+    "subject": {
+      "reference": "Patient/alex-sharma-63-female",
+      "display": "Alex Sharma"
+    },
+    "onsetDateTime": "2020-05-20"
+  },
+  {
+    "resourceType": "MedicationRequest",
+    "id": "medicationrequest-metformin",
+    "meta": {
+      "profile": [
+        "http://hl7.org/fhir/R4/StructureDefinition/MedicationRequest"
+      ]
+    },
+    "text": {
+      "status": "generated",
+      "div": "<div xmlns=\"http://www.w3.org/1999/xhtml\"><p><b>Metformin 500mg</b> for Alex Sharma, 1 tablet by mouth twice daily, ongoing</p></div>"
+    },
+    "status": "active",
+    "intent": "order",
+    "medicationCodeableConcept": {
+      "coding": [
+        {
+          "system": "http://www.nlm.nih.gov/research/umls/rxnorm",
+          "code": "6809",
+          "display": "Metformin"
+        }
+      ],
+      "text": "Metformin 500mg Tablet"
+    },
+    "subject": {
+      "reference": "Patient/alex-sharma-63-female",
+      "display": "Alex Sharma"
+    },
+    "encounter": {
+      "reference": "Encounter/encounter-diabetes-followup",
+      "display": "Diabetes Follow-up Visit"
+    },
+    "authoredOn": "2024-03-10T10:30:00Z",
+    "requester": {
+      "reference": "Practitioner/dr-smith",
+      "display": "Dr. Jane Smith"
+    },
+    "dosageInstruction": [
+      {
+        "sequence": 1,
+        "text": "One tablet by mouth twice daily",
+        "timing": {
+          "repeat": {
+            "frequency": 2,
+            "period": 1,
+            "periodUnit": "d"
+          }
+        },
+        "route": {
+          "coding": [
+            {
+              "system": "http://terminology.hl7.org/CodeSystem/v3-RouteOfAdministration",
+              "code": "PO",
+              "display": "Oral"
+            }
+          ]
+        },
+        "doseAndRate": [
+          {
+            "type": {
+              "coding": [
+                {
+                  "system": "http://terminology.hl7.org/CodeSystem/dose-rate-type",
+                  "code": "ordered",
+                  "display": "Ordered"
+                }
+              ]
+            },
+            "doseQuantity": {
+              "value": 1,
+              "unit": "tablet",
+              "system": "http://unitsofmeasure.org",
+              "code": "{tablet}"
+            }
+          }
+        ]
+      }
+    ],
+    "dispenseRequest": {
+      "numberOfRepeatsAllowed": 3,
+      "quantity": {
+        "value": 60,
+        "unit": "tablet",
+        "system": "http://unitsofmeasure.org",
+        "code": "{tablet}"
+      },
+      "expectedSupplyDuration": {
+        "value": 30,
+        "unit": "days",
+        "system": "http://unitsofmeasure.org",
+        "code": "d"
+      }
+    }
+  }
+]

frontend/public/assets/jason_fhir.json

@@ -0,0 +1,167 @@
+{
+  "resourceType": "Bundle",
+  "id": "Jordon-Dubois-Depression-Prozac-Encounter",
+  "type": "collection",
+  "entry": [
+    {
+      "fullUrl": "urn:uuid:patient-jordon-dubois",
+      "resource": {
+        "resourceType": "Patient",
+        "id": "jordon-dubois",
+        "name": [
+          {
+            "given": ["Jordon"],
+            "family": "Dubois"
+          }
+        ],
+        "gender": "male",
+        "birthDate": "1990-06-11"
+      }
+    },
+    {
+      "fullUrl": "urn:uuid:condition-depression",
+      "resource": {
+        "resourceType": "Condition",
+        "id": "depression-jordon-dubois",
+        "subject": {
+          "reference": "urn:uuid:patient-jordon-dubois"
+        },
+        "code": {
+          "coding": [
+            {
+              "system": "http://snomed.info/sct",
+              "code": "366053000",
+              "display": "Depressive disorder"
+            }
+          ],
+          "text": "Depression"
+        },
+        "clinicalStatus": {
+          "coding": [
+            {
+              "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+              "code": "active",
+              "display": "Active"
+            }
+          ]
+        },
+        "verificationStatus": {
+          "coding": [
+            {
+              "system": "http://terminology.hl7.org/CodeSystem/condition-ver-status",
+              "code": "confirmed",
+              "display": "Confirmed"
+            }
+          ]
+        },
+        "recordedDate": "2024-01-15T10:00:00Z"
+      }
+    },
+    {
+      "fullUrl": "urn:uuid:medication-prozac",
+      "resource": {
+        "resourceType": "Medication",
+        "id": "prozac",
+        "code": {
+          "coding": [
+            {
+              "system": "http://www.nlm.nih.gov/research/umls/rxnorm",
+              "code": "100371",
+              "display": "Fluoxetine"
+            }
+          ],
+          "text": "Prozac"
+        }
+      }
+    },
+    {
+      "fullUrl": "urn:uuid:medicationrequest-prozac",
+      "resource": {
+        "resourceType": "MedicationRequest",
+        "id": "prozac-request-jordon-dubois",
+        "subject": {
+          "reference": "urn:uuid:patient-jordon-dubois"
+        },
+        "medicationReference": {
+          "reference": "urn:uuid:medication-prozac"
+        },
+        "requester": {
+          "display": "Dr. Smith"
+        },
+        "authoredOn": "2024-01-15T11:00:00Z",
+        "status": "active",
+        "intent": "order",
+        "dosageInstruction": [
+          {
+            "text": "20mg daily",
+            "timing": {
+              "repeat": {
+                "frequency": 1,
+                "period": 1,
+                "periodUnit": "d"
+              }
+            },
+            "route": {
+              "coding": [
+                {
+                  "system": "http://terminology.hl7.org/CodeSystem/v3-RouteOfAdministration",
+                  "code": "PO",
+                  "display": "Oral"
+                }
+              ]
+            },
+            "doseAndRate": [
+              {
+                "type": {
+                  "coding": [
+                    {
+                      "system": "http://terminology.hl7.org/CodeSystem/dose-rate-type",
+                      "code": "ordered",
+                      "display": "Ordered"
+                    }
+                  ]
+                },
+                "doseQuantity": {
+                  "value": 20,
+                  "unit": "mg",
+                  "system": "http://unitsofmeasure.org",
+                  "code": "mg"
+                }
+              }
+            ]
+          }
+        ],
+        "reasonReference": [
+          {
+            "reference": "urn:uuid:condition-depression"
+          }
+        ]
+      }
+    },
+    {
+      "fullUrl": "urn:uuid:encounter-depression",
+      "resource": {
+        "resourceType": "Encounter",
+        "id": "encounter-jordon-dubois-depression",
+        "status": "finished",
+        "class": {
+          "system": "http://terminology.hl7.org/CodeSystem/v3-ActCode",
+          "code": "AMB",
+          "display": "Ambulatory"
+        },
+        "subject": {
+          "reference": "urn:uuid:patient-jordon-dubois"
+        },
+        "period": {
+          "start": "2024-01-15T09:30:00Z",
+          "end": "2024-01-15T10:30:00Z"
+        },
+        "reasonReference": [
+          {
+            "reference": "urn:uuid:condition-depression"
+          }
+        ]
+      }
+    }
+  ]
+}

frontend/public/assets/jordan.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a9774a57078508dbcd1626463b1deb84bd468d7b81111b568a966ef3baa56051
+size 1248841

frontend/public/assets/patients_and_conditions.json

@@ -0,0 +1,46 @@
+{
+    "patients": [
+        {
+            "id": 1,
+            "name": "Jordon Dubois",
+            "gender": "Male",
+            "age": 35,
+            "existing_condition": "Depression",
+            "img": "/assets/jordan.avif",
+            "video": "/assets/jordan.mp4",
+            "headshot": "/assets/jordan_300.avif",
+            "fhirFile": "/assets/jason_fhir.json",
+            "voice": "Algenib"
+        },
+        {
+            "id": 2,
+            "name": "Alex Sharma",
+            "gender": "Female",
+            "age": 63,
+            "existing_condition": "Diabetes",
+            "img": "/assets/alex.avif",
+            "video": "/assets/alex.mp4",
+            "headshot": "/assets/alex_300.avif",
+            "fhirFile": "/assets/alex_fhir.json",
+            "voice": "Gacrux"
+        },
+        {
+            "id": 3,
+            "name": "Sacha Silva",
+            "gender": "Female",
+            "age": 24,
+            "existing_condition": "Asthma",
+            "img": "/assets/sacha.avif",
+            "video": "/assets/sacha.mp4",
+            "headshot": "/assets/sacha_150.avif",
+            "fhirFile": "/assets/sacha_fhir.json",
+            "voice": "Callirrhoe"
+        }
+    ],
+    "conditions": [
+        { "name": "Flu", "description": "A common and contagious respiratory illness caused by a virus that can lead to fever, body aches, and fatigue." },
+        { "name": "Malaria", "description": "A serious disease spread by mosquitoes that causes recurring fevers and chills due to a parasite infecting red blood cells." },
+        { "name": "Migraine", "description": "A type of severe headache often accompanied by throbbing pain, sensitivity to light and sound, and sometimes nausea." },
+        { "name": "Serotonin Syndrome", "description": "A potentially dangerous reaction caused by too much serotonin in the brain, often due to certain medications, leading to symptoms like agitation, rapid heart rate, and confusion." }
+    ]
+}

frontend/public/assets/sacha.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c722df889fafc7646d27e8fc9d15c279df43a0be68991f122ed17e096745a867
+size 751974

frontend/public/assets/sacha_fhir.json

@@ -0,0 +1,266 @@
+{
+  "resourceType": "Bundle",
+  "type": "collection",
+  "entry": [
+    {
+      "resource": {
+        "resourceType": "Patient",
+        "id": "sacha-silva-patient",
+        "identifier": [
+          {
+            "system": "http://example.org/mrn",
+            "value": "1234567"
+          },
+          {
+            "system": "http://hl7.org/fhir/sid/us-ssn",
+            "value": "999-88-7777"
+          }
+        ],
+        "name": [
+          {
+            "family": "Silva",
+            "given": [
+              "Sacha"
+            ]
+          }
+        ],
+        "gender": "female",
+        "birthDate": "1993-10-27",
+        "address": [
+          {
+            "line": [
+              "123 Main Street"
+            ],
+            "city": "Anytown",
+            "state": "CA",
+            "postalCode": "91234",
+            "country": "US"
+          }
+        ],
+        "telecom": [
+          {
+            "system": "phone",
+            "value": "555-123-4567",
+            "use": "home"
+          },
+          {
+            "system": "email",
+            "value": "sacha.silva@example.com",
+            "use": "home"
+          }
+        ]
+      },
+      "request": {
+        "method": "PUT",
+        "url": "Patient/sacha-silva-patient"
+      }
+    },
+    {
+      "resource": {
+        "resourceType": "Condition",
+        "id": "asthma-condition",
+        "clinicalStatus": {
+          "coding": [
+            {
+              "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+              "code": "active",
+              "display": "Active"
+            }
+          ]
+        },
+        "verificationStatus": {
+          "coding": [
+            {
+              "system": "http://terminology.hl7.org/CodeSystem/condition-ver-status",
+              "code": "confirmed",
+              "display": "Confirmed"
+            }
+          ]
+        },
+        "category": [
+          {
+            "coding": [
+              {
+                "system": "http://terminology.hl7.org/CodeSystem/condition-category",
+                "code": "problem-list-item",
+                "display": "Problem List Item"
+              }
+            ]
+          }
+        ],
+        "code": {
+          "coding": [
+            {
+              "system": "http://snomed.info/sct",
+              "code": "195967001",
+              "display": "Asthma"
+            }
+          ],
+          "text": "Asthma"
+        },
+        "subject": {
+          "reference": "Patient/sacha-silva-patient",
+          "display": "Sacha Silva"
+        },
+        "onsetDateTime": "2010-05-15"
+      },
+      "request": {
+        "method": "PUT",
+        "url": "Condition/asthma-condition"
+      }
+    },
+    {
+      "resource": {
+        "resourceType": "Encounter",
+        "id": "asthma-encounter-1",
+        "status": "finished",
+        "class": {
+          "system": "http://terminology.hl7.org/CodeSystem/v3-ActCode",
+          "code": "AMB",
+          "display": "Ambulatory"
+        },
+        "type": [
+          {
+            "coding": [
+              {
+                "system": "http://snomed.info/sct",
+                "code": "308335008",
+                "display": "Patient encounter procedure"
+              }
+            ],
+            "text": "Asthma Follow-up"
+          }
+        ],
+        "subject": {
+          "reference": "Patient/sacha-silva-patient",
+          "display": "Sacha Silva"
+        },
+        "period": {
+          "start": "2023-08-10T10:00:00-07:00",
+          "end": "2023-08-10T10:30:00-07:00"
+        },
+        "reasonCode": [
+          {
+            "coding": [
+              {
+                "system": "http://snomed.info/sct",
+                "code": "266253002",
+                "display": "Asthma exacerbation"
+              }
+            ],
+            "text": "Asthma Exacerbation"
+          }
+        ]
+      },
+      "request": {
+        "method": "PUT",
+        "url": "Encounter/asthma-encounter-1"
+      }
+    },
+    {
+      "resource": {
+        "resourceType": "MedicationRequest",
+        "id": "albuterol-mr",
+        "status": "active",
+        "intent": "order",
+        "medicationCodeableConcept": {
+          "coding": [
+            {
+              "system": "http://www.nlm.nih.gov/research/umls/rxnorm",
+              "code": "207182",
+              "display": "Albuterol 90 mcg/actuation Metered Dose Inhaler"
+            }
+          ],
+          "text": "Albuterol Inhaler"
+        },
+        "subject": {
+          "reference": "Patient/sacha-silva-patient",
+          "display": "Sacha Silva"
+        },
+        "encounter": {
+          "reference": "Encounter/asthma-encounter-1",
+          "display": "Asthma Follow-up"
+        },
+        "authoredOn": "2023-08-10T10:30:00-07:00",
+        "requester": {
+          "reference": "Practitioner/dr-jane-doe",
+          "display": "Jane Doe, MD"
+        },
+        "dosageInstruction": [
+          {
+            "sequence": 1,
+            "text": "2 puffs every 4-6 hours as needed for wheezing",
+            "timing": {
+              "repeat": {
+                "frequency": 4,
+                "period": 1,
+                "periodUnit": "h"
+              }
+            },
+            "doseQuantity": {
+              "value": 2,
+              "unit": "puff",
+              "system": "http://unitsofmeasure.org",
+              "code": "{puff}"
+            },
+            "asNeededCodeableConcept": {
+              "coding": [
+                {
+                  "system": "http://snomed.info/sct",
+                  "code": "267036007",
+                  "display": "Wheezing"
+                }
+              ],
+              "text": "Wheezing"
+            }
+          }
+        ],
+        "dispenseRequest": {
+          "quantity": {
+            "value": 1,
+            "unit": "inhaler",
+            "system": "http://terminology.hl7.org/CodeSystem/v3-orderableDrugForm",
+            "code": "INH"
+          },
+          "expectedSupplyDuration": {
+            "value": 30,
+            "unit": "days",
+            "system": "http://unitsofmeasure.org",
+            "code": "d"
+          }
+        }
+      },
+      "request": {
+        "method": "PUT",
+        "url": "MedicationRequest/albuterol-mr"
+      }
+    },
+    {
+      "resource": {
+        "resourceType": "Practitioner",
+        "id": "dr-jane-doe",
+        "name": [
+          {
+            "family": "Doe",
+            "given": [
+              "Jane"
+            ],
+            "prefix": [
+              "Dr."
+            ]
+          }
+        ],
+        "identifier": [
+          {
+            "system": "http://example.org/npi",
+            "value": "1234567890"
+          }
+        ]
+      },
+      "request": {
+        "method": "PUT",
+        "url": "Practitioner/dr-jane-doe"
+      }
+    }
+  ]
+}

frontend/public/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!--
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Sushruta — Patient 360</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Sushruta Patient 360 Demo - Powered by MedGemma. Simulated pre-visit intake clinical dialogues and radiology report plain-language explanations." />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

frontend/src/App.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import Landing from './components/Landing/Landing';
+import WelcomePage from './components/WelcomePage/WelcomePage';
+import PatientBuilder from './components/PatientBuilder/PatientBuilder';
+import RolePlayDialogs from './components/RolePlayDialogs/RolePlayDialogs';
+import Interview from './components/Interview/Interview';
+import RadiologyExplainer from './components/RadiologyExplainer/RadiologyExplainer';
+import PreloadImages from './components/PreloadImages';
+
+const App = () => {
+  const [currentPage, setCurrentPage] = useState('landing');
+  const [selectedPatient, setSelectedPatient] = useState(null);
+  const [selectedCondition, setSelectedCondition] = useState(null);
+
+  const handleNavigate = (page) => {
+    if (page === 'previsit') {
+      setCurrentPage('welcome');
+    } else if (page === 'radiology') {
+      setCurrentPage('radiology');
+    }
+  };
+
+  const handleSwitchPage = () => {
+    setCurrentPage('patientBuilder');
+  };
+
+  const handleSwitchToRolePlayDialogs = () => {
+    setCurrentPage('rolePlayDialogs');
+  };
+
+  const handleSwitchToInterview = () => {
+    setCurrentPage('interview');
+  };
+
+  const imageList = [
+    '/assets/gemini.avif',
+    '/assets/medgemma.avif',
+    '/assets/ai_headshot.svg',
+    '/assets/jordan_300.avif',
+    '/assets/alex_300.avif',
+    '/assets/sacha_150.avif',
+    '/assets/jordan.avif',
+    '/assets/alex.avif',
+    '/assets/sacha.avif'
+  ];
+
+  return (
+    <PreloadImages imageSources={imageList}>
+      {currentPage === 'landing' ? (
+        <Landing onNavigate={handleNavigate} />
+      ) : currentPage === 'radiology' ? (
+        <RadiologyExplainer onBack={() => setCurrentPage('landing')} />
+      ) : currentPage === 'welcome' ? (
+        <WelcomePage
+          onSwitchPage={handleSwitchPage}
+          setSelectedPatient={setSelectedPatient}
+          setSelectedCondition={setSelectedCondition}
+          onBack={() => setCurrentPage('landing')}
+        />
+      ) : currentPage === 'patientBuilder' ? (
+        <PatientBuilder
+          selectedPatient={selectedPatient}
+          selectedCondition={selectedCondition}
+          setSelectedPatient={setSelectedPatient}
+          setSelectedCondition={setSelectedCondition}
+          onNext={handleSwitchToRolePlayDialogs}
+          onBack={() => setCurrentPage('welcome')}
+        />
+      ) : currentPage === 'rolePlayDialogs' ? (
+        <RolePlayDialogs
+          selectedPatient={selectedPatient}
+          selectedCondition={selectedCondition}
+          onStart={handleSwitchToInterview}
+          onBack={() => setCurrentPage('patientBuilder')}
+        />
+      ) : currentPage === 'interview' ? (
+        <Interview
+          selectedPatient={selectedPatient}
+          selectedCondition={selectedCondition}
+          onBack={() => setCurrentPage('rolePlayDialogs')}
+        />
+      ) : null}
+    </PreloadImages>
+  );
+};
+
+export default App;

frontend/src/components/DetailsPopup/DetailsPopup.css

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.popup-close-button {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    background: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #888;
+}
+
+.popup-close-button:hover {
+    color: #000;
+}
+
+.details-popup-content h4 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.details-popup-content ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.details-popup-content li {
+    margin-bottom: 8px;
+    color: #555;
+}

frontend/src/components/DetailsPopup/DetailsPopup.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import './DetailsPopup.css';
+
+const DetailsPopup = ({ isOpen, onClose }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="popup-overlay" onClick={onClose}>
+      <div className="popup-content" onClick={(e) => e.stopPropagation()}>
+        <button className="popup-close-button" onClick={onClose}>&times;</button>
+        <h2 id="dialog-title" className="dialog-title-text">Details About This Demo</h2>
+                <p><b>The Model:</b> This demo features Google's MedGemma-27B, a Gemma 3-based model
+                    fine-tuned for comprehending medical text. It demonstrates MedGemma's ability to
+                    accelerate the development of AI-powered healthcare applications by offering advanced
+                    interpretation of medical data.</p>
+                <p><b>Accessing and Using the Model:</b> Google's MedGemma-27B is available on <a
+                        href="https://huggingface.co/google/medgemma-27b-text-it" target="_blank" rel="noopener noreferrer">HuggingFace<img
+                            className="hf-logo"
+                            src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg" />
+                    </a> and is easily deployable via&nbsp;
+                    <a href="https://console.cloud.google.com/vertex-ai/publishers/google/model-garden/medgemma" target="_blank" rel="noopener noreferrer">Model
+                        Garden <img className="hf-logo"
+                            src="https://www.gstatic.com/cloud/images/icons/apple-icon.png" /></a>.
+                    Learn more about using the model and its limitations on the <a
+                        href="https://developers.google.com/health-ai-developer-foundations?referral=appoint-ready"
+                        target="_blank" rel="noopener noreferrer">HAI-DEF
+                        developer site</a>.
+                </p>
+                <p><b>Health AI Developer Foundations (HAI-DEF)</b> provides a collection of open-weight models and
+                    companion resources to empower developers in building AI models for healthcare.</p>
+                <p><b>Share this Demo:</b> If you find this demonstration valuable, we encourage you to share it on
+                    social media.
+                    <small>
+                    &nbsp;<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://huggingface.co/spaces/google/appoint-ready&text=%23MedGemma%20%23MedGemmaDemo" target="_blank" rel="noopener noreferrer">LinkedIn</a>
+                    &nbsp;<a href="http://www.twitter.com/share?url=https://huggingface.co/spaces/google/appoint-ready&hashtags=MedGemma,MedGemmaDemo" target="_blank" rel="noopener noreferrer">X/Tweet</a>
+                    </small>
+                </p>
+                <p><b>Explore More Demos:</b> Discover additional demonstrations on HuggingFace Spaces or via Colabs:
+                </p>
+                <ul>
+                    <li><a href="https://huggingface.co/collections/google/hai-def-concept-apps-6837acfccce400abe6ec26c1"
+                            target="_blank" rel="noopener noreferrer">
+                            Collection of concept apps <img className="hf-logo" src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg" />
+                        </a> built around HAI-DEF open models to inspire the community.</li>
+                    <li><a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/fine_tune_with_hugging_face.ipynb" target="_blank" rel="noopener noreferrer">
+                            Finetune MedGemma Colab <img className="hf-logo"
+                                src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Colaboratory_SVG_Logo.svg" /></a>
+                        -
+                        See an example of how to fine-tune this model.</li> 
+                </ul>
+                For more technical details about this demo, please refer to the <a href="https://huggingface.co/spaces/google/appoint-ready/blob/main/README.md#table-of-contents" target="_blank" rel="noopener noreferrer">README</a> file in the repository.
+        <button className="popup-button" onClick={onClose}>Close</button>
+      </div>
+    </div>
+  );
+};
+
+export default DetailsPopup;

frontend/src/components/Interview/Interview.css

@@ -0,0 +1,325 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+
+.page.interview-page {
+  height: 100%;
+  max-height: 100%;
+}
+
+.interview-container {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+}
+
+.interview-split-container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.interview-left-section {
+  border-right: 2px solid #e0e0e0;
+  display: flex;
+  flex-direction: row;
+  min-width: 550px;
+  max-width: 600px;
+}
+
+.toggle-icon {
+  vertical-align: text-top;
+}
+
+.interview-page .header2 span {
+  font-size: 14px;
+  font-weight: 100;
+  vertical-align: text-top;
+  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.interview-right-section {
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  min-width: 550px;
+  flex-grow: 2;
+  padding-left: 20px;
+  justify-content: space-between;
+  height: 100%;
+  gap: 5px;
+}
+
+.interview-header-panel {
+  flex: 0 0 320px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 32px 24px 0 0;
+  box-sizing: border-box;
+  background: #f5f5f5;
+}
+
+.interview-chat-panel {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-width: 0;
+  min-height: 0;
+}
+
+.chat-container {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  padding-right: 20px;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 20px;
+  margin: 20px 30px 0 30px;
+  width: -webkit-fill-available;
+}
+
+.chat-message-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Fade-in animation for new chat messages */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.chat-message-wrapper.fade-in {
+  animation: fadeIn 0.5s ease;
+}
+
+.chat-message-wrapper.patient {
+  align-self: end;
+}
+
+.chat-bubble {
+  padding: 10px 15px;
+  font-size: 16px;
+  line-height: 1.4;
+  flex: 1;
+
+}
+
+.patient .chat-bubble {
+  background-color: #eaeaea;
+  margin-right: 5px;
+  border-radius: 8px;
+  background: #F5F5F5;
+}
+
+.chat-avatar {
+  width: 30px;
+  height: 30px;
+  object-fit: cover;
+  border-radius: 50%;
+  background-color: #E8DEF8;
+}
+
+.interviewer .chat-avatar {
+  padding: 5px;
+}
+
+.patient .chat-avatar {
+  width: 40px;
+  height: 40px;
+  border-color: rgb(47, 95, 207);  
+}
+
+.report-content {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1 1 0;
+  min-height: 0;
+  border-radius: 28px;
+  border: 2px solid #E9E9E9;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.report-content pre {
+  white-space: pre-wrap;       /* CSS3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+.thinking .chat-bubble {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: #E8DEF8;
+  padding: 20px;
+  border-radius: 8px;
+  min-width: 40px;
+  min-height: 40px;
+  position: relative;
+  color: #555;
+  border: none;
+  font-weight: 100;
+}
+
+.thinking-header {
+  font-weight: 500;
+}
+
+.chat-waiting-indicator {
+  color: #888;
+  font-size: 20px;
+  text-align: center;
+  margin: 60px 0;
+  font-style: italic;
+  opacity: 0.8;
+}
+
+.evaluate-button {
+  background-color: #C8B3FD;
+  color: #4E3B7B;
+  border-radius: 8px;
+  border-style: none;
+  padding: 6px;
+  font-size: 16px;
+}
+
+@keyframes fadeInOpacity {
+  0% { opacity: 0; font-size: 0; }
+  20% { opacity: 0; font-size: 1em; }
+  100% { opacity: 1; font-size: 1em; }
+}
+
+/* New keyframes to unset text color after a delay */
+@keyframes unsetColor {
+  to { color: unset; }
+}
+
+.add {
+  color: green;
+  animation: fadeInOpacity 1s forwards, unsetColor 0s forwards 5s;
+}
+
+@keyframes removeAnim {
+  0% { opacity: 1; font-size: 1em; }
+  80% { opacity: 0; font-size: 1em; }
+  99% { font-size: 0.2em; }
+  100% { opacity: 0; font-size: 0; display: none; }
+}
+
+.remove {
+  color: red;
+  text-decoration: line-through;
+  animation: removeAnim 1s forwards 5s;
+}
+
+.warning-icon {
+  color: #444746;
+}
+
+.disclaimer-container {
+  border-radius: 8px;
+  background: #FEF7E0;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 13px;
+  font-size: 12px;
+  width: 100%;
+}
+
+.helpful {
+  border-radius: 14.272px;
+  background: #C4EED0;
+  mix-blend-mode: multiply;
+  display: inline-block;
+  padding: 0 5px;
+}
+
+.missing {
+  border-radius: 14.272px;
+  background: #FFE07C;
+  mix-blend-mode: multiply;
+  display: inline-block;
+  padding: 0 5px;
+}
+
+.evaluation-text {
+  font-style: italic;
+  padding-bottom: 30px;
+}
+
+.evaluation-text::after {
+  content: "***";
+}
+
+.volume-tooltip {
+  position: absolute;
+  bottom: 100%; /* Position above the icon */
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 0.8em;
+  white-space: nowrap;
+  z-index: 10;
+  margin-bottom: 5px; /* Space between icon and tooltip */
+  opacity: 0;
+  animation: fadeInOutTooltip 7s ease-in-out 15s forwards;
+}
+
+.volume-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #333 transparent transparent transparent;
+}
+
+@keyframes fadeInOutTooltip {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+

frontend/src/components/Interview/Interview.js

@@ -0,0 +1,499 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect, useRef } from "react";
+import { marked } from "marked";
+import parse from "html-react-parser";
+import { diffArrays, diffWords } from "diff";
+import "./Interview.css";
+import DetailsPopup from "../DetailsPopup/DetailsPopup";
+
+const Interview = ({ selectedPatient, selectedCondition, onBack }) => {
+  const [messages, setMessages] = useState([]);
+  const [isInterviewComplete, setIsInterviewComplete] = useState(false);
+  const [showEvaluation, setShowEvaluation] = useState(false);
+  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
+  const [evaluation, setEvaluation] = useState('');
+  const [isFetchingEvaluation, setIsFetchingEvaluation] = useState(false);
+  const [currentReport, setCurrentReport] = useState("");
+  const [prevReport, setPrevReport] = useState("");
+  const [waitTime, setWaitTime] = useState(3000);
+  const [showEvaluationInfoPopup, setShowEvaluationInfoPopup] = useState(false);
+  const [isDetailsPopupOpen, setIsDetailsPopupOpen] = useState(false);
+  const chatContainerRef = useRef(null);
+  const reportContentRef = useRef(null);
+  const lastMessageRef = useRef(null);
+  const messageQueue = useRef([]);
+  const eventSourceRef = useRef(null);
+  const timeoutIdRef = useRef(null);
+
+  const currentPlayingAudio = useRef(null); // To keep track of the currently playing audio instance
+  const isAudioEnabledRef = useRef(isAudioEnabled);
+  useEffect(() => {
+    isAudioEnabledRef.current = isAudioEnabled;
+  }, [isAudioEnabled]);
+  const waitTimeRef = useRef(waitTime);
+  useEffect(() => {
+    waitTimeRef.current = waitTime;
+  }, [waitTime]);
+
+  const processQueue = React.useCallback(() => {
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
+    }
+
+    if (messageQueue.current.length === 0) {
+      // The queue is empty, so the processing chain for this batch is done.
+      // Clear the timeout ref so a new message can start a new chain.
+      timeoutIdRef.current = null;
+      setIsInterviewComplete(
+        eventSourceRef.current && eventSourceRef.current.readyState === EventSource.CLOSED
+      );
+      return;
+    }
+
+    const nextMessage = messageQueue.current.shift();
+
+    setMessages((prev) => [...prev, nextMessage]);
+
+    if (nextMessage.audio && isAudioEnabledRef.current) {
+      if (currentPlayingAudio.current) {
+        currentPlayingAudio.current.pause();
+        currentPlayingAudio.current.src = '';
+      }
+      const audio = new Audio(nextMessage.audio);
+      currentPlayingAudio.current = audio;
+
+      audio.onended = () => {
+        currentPlayingAudio.current = null;
+        processQueue();
+      };
+      audio.onerror = (e) => {
+        console.error("Audio playback error:", e);
+        currentPlayingAudio.current = null;
+        processQueue();
+      };
+      audio.play().catch(e => {
+        console.error("Error playing audio automatically:", e);
+        currentPlayingAudio.current = null;
+        processQueue();
+      });
+    } else {
+      // For non-audio, schedule the next processing call with a fixed delay
+      // to simulate reading time. This will call processQueue again, which will
+      // handle an empty queue and stop the chain if needed.
+      timeoutIdRef.current = setTimeout(processQueue, waitTimeRef.current);
+    }
+  }, [setMessages, setIsInterviewComplete]);
+
+  useEffect(() => {
+    if (!selectedPatient || !selectedCondition) return;
+
+    setMessages([]);
+    setIsInterviewComplete(false);
+    messageQueue.current = [];
+    if (currentPlayingAudio.current) {
+      currentPlayingAudio.current.pause();
+      currentPlayingAudio.current = null;
+    }
+    // Prepend base URL if running on localhost:3000
+    const baseURL =
+      window.location.origin === "http://localhost:3000"
+        ? "http://localhost:7860"
+        : "";
+    const url = `${baseURL}/api/stream_conversation?patient=${encodeURIComponent(
+      selectedPatient.name
+    )}&condition=${encodeURIComponent(selectedCondition)}`;
+    const eventSource = new EventSource(url);
+    eventSourceRef.current = eventSource;
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+
+        // Check if the parsed object is our special 'end' signal
+        if (data && data.event === 'end') {
+          console.log("Server signaled end of stream. Closing connection.");
+          eventSource.close();
+          processQueue();
+          return; 
+        }        
+        messageQueue.current.push(data);
+        // Always call processQueue after pushing a message, unless audio or timeout is active
+        if (!currentPlayingAudio.current && !timeoutIdRef.current) {
+          processQueue();
+        }
+      } catch (error) {
+        console.warn("Could not parse message data. Data received:", event.data, "Error:", error);
+      }
+    };
+
+    eventSource.onerror = (err) => {
+      console.error("EventSource failed:", err);
+      eventSource.close();
+    };
+
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+        timeoutIdRef.current = null;
+      }
+      // Ensure any playing audio is stopped when component unmounts or dependencies change
+      if (currentPlayingAudio.current) {
+        currentPlayingAudio.current.pause();
+        currentPlayingAudio.current = null;
+      }
+    };
+  }, [selectedPatient, selectedCondition, processQueue]);
+
+  useEffect(() => {
+    processQueue();
+  }, [waitTime, processQueue]);
+  
+  useEffect(() => {
+    // Prevent body scroll when Interview is shown
+    document.body.style.overflowY = "clip";
+    return () => {
+      document.body.style.overflowY = "unset";
+    };
+  }, []);
+
+  useEffect(() => {
+    if (chatContainerRef.current) {
+      const container = chatContainerRef.current;
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage && lastMessage.speaker === "report") { 
+        return;
+      }
+
+      const isNearBottom =
+        container.scrollHeight - container.scrollTop - container.clientHeight <
+        container.clientHeight;
+      if (isNearBottom && messages.length > 0) {
+        lastMessageRef.current.scrollIntoView({
+          behavior: "smooth",
+          block: "end",
+        });
+      }
+    }
+  }, [messages]);
+
+  // Update report on new messages
+  useEffect(() => {
+    const reportMessages = messages.filter((msg) => msg.speaker === "report");
+    if (reportMessages.length > 0) {
+      const latestReportMessageText =
+        reportMessages[reportMessages.length - 1].text;
+      const newReport = marked(latestReportMessageText.trim());
+      if (newReport !== currentReport) {
+        setPrevReport(currentReport);
+        setCurrentReport(newReport);
+      }
+    }
+  }, [messages, currentReport]);
+
+  // Updated diff function to tokenize HTML and use nested diffWords for text changes
+  const getDiffReport = () => {
+    // Tokenize HTML into tags and text parts
+    const tokenizeHTML = (html) => html.match(/(<[^>]+>|[^<]+)/g) || [];
+    const tokensPrev = tokenizeHTML(prevReport);
+    const tokensCurrent = tokenizeHTML(currentReport);
+    const diffParts = diffArrays(tokensPrev, tokensCurrent);
+
+    let result = "";
+    for (let i = 0; i < diffParts.length; i++) {
+      // If a removed part is immediately followed by an added part,
+      // and both are plain text (not an HTML tag), apply inner diffWords.
+      if (
+        diffParts[i].removed &&
+        i + 1 < diffParts.length &&
+        diffParts[i + 1].added
+      ) {
+        const removedText = diffParts[i].value.join("");
+        const addedText = diffParts[i + 1].value.join("");
+        // Check if both parts are not HTML tags
+        if (
+          (!/^<[^>]+>$/.test(removedText) && !/^<[^>]+>$/.test(addedText))
+        ) {
+          const innerDiff = diffWords(removedText, addedText);
+          const innerResult = innerDiff
+            .map((part) => {
+              if (part.added) {
+                return `<span class="add">${part.value}</span>`;
+              } else if (part.removed) {
+                return `<span class="remove">${part.value}</span>`;
+              }
+              return part.value;
+            })
+            .join("");
+          result += innerResult;
+          i++;
+          continue;
+        }
+      }
+      if (diffParts[i].added) {
+        result += `<span class="add">${diffParts[i].value.join("")}</span>`;
+      } else if (diffParts[i].removed) {
+        result += `<span class="remove">${diffParts[i].value.join("")}</span>`;
+      } else {
+        result += diffParts[i].value.join("");
+      }
+    }
+    return result;
+  };
+
+  // Fetch evaluation when showEvaluation is triggered
+  useEffect(() => {
+    if (!showEvaluation) return;
+    setIsFetchingEvaluation(true);
+    setEvaluation('');
+    // Get latest report
+    const reportMessages = messages.filter((msg) => msg.speaker === "report");
+    const report =
+      reportMessages.length > 0
+        ? marked(reportMessages[reportMessages.length - 1].text.trim())
+        : "<p>No report available.</p>";
+    // Prepend base URL if running on localhost:3000
+    const baseURL = window.location.origin === "http://localhost:3000" ? "http://localhost:7860" : "";
+    fetch(`${baseURL}/api/evaluate_report`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        report,
+        condition: selectedCondition
+      })
+    })
+      .then(response => response.json())
+      .then(data => {
+        setEvaluation(data.evaluation.replace('```html\n','').replace('\n```',''));
+        setIsFetchingEvaluation(false);
+      })
+      .catch(error => {
+        setEvaluation('Error fetching evaluation.');
+        setIsFetchingEvaluation(false);
+      });
+  }, [showEvaluation, messages, selectedCondition]);
+
+  // Scroll report-content to bottom when evaluate button appears
+  useEffect(() => {
+    if (isInterviewComplete && reportContentRef.current) {
+      reportContentRef.current.scrollTop = reportContentRef.current.scrollHeight;
+    }
+  }, [isInterviewComplete]);
+
+  const handleToggleWaitTime = () => {
+    setWaitTime((prev) => (prev === 1000 ? 3000 : 1000));
+  };
+
+  const handleToggleAudio = () => {
+    setIsAudioEnabled(prev => {
+      const isNowEnabled = !prev;
+      // If we are disabling audio and something is playing, stop it and continue the queue.
+      if (!isNowEnabled && currentPlayingAudio.current) {
+        currentPlayingAudio.current.pause();
+        currentPlayingAudio.current.src = '';
+        currentPlayingAudio.current = null;
+      }
+      if (!isNowEnabled) {
+        setWaitTime(1000);
+      }
+      return isNowEnabled;
+    });
+  };
+
+  const playAudio = (audioDataUrl) => {
+    if (audioDataUrl) {
+      const audio = new Audio(audioDataUrl);
+      audio.play().catch(e => {
+        console.error("Error playing audio:", e);
+      });
+    }
+  };
+
+  return (
+    <div className="page interview-page">
+      <div className="headerButtonsContainer">
+        <button className="back-button" onClick={onBack}>
+          <i className="material-icons back-button-icon">keyboard_arrow_left</i>
+          Back
+        </button>
+        <button className="details-button" onClick={() => setIsDetailsPopupOpen(true)}>
+          <i className="material-icons code-block-icon">code</i>&nbsp; Details
+          about this Demo
+        </button>
+      </div>
+      <div className="frame">
+        <div className="interview-split-container">
+          {/* Top: Interview Chat */}
+          <div className="interview-left-section">
+            {/* Right: Chat */}
+            <div className="interview-chat-panel">
+              <div className="header2">
+                Simulated Interview
+                &nbsp;
+                <div style={{ position: "relative", display: "inline-block" }}>
+                  <div className="volume-tooltip">
+                    {isAudioEnabled ? "Disable audio and speed up" : "Enable audio"}
+                  </div>
+                  <i
+                    className="material-icons toggle-icon"
+                    style={{
+                      cursor: "pointer",
+                      color: isAudioEnabled ? "#1976d2" : "#888",
+                    }}
+                    title={`Click to ${
+                      isAudioEnabled ? "disable" : "enable"
+                    } audio`}
+                    onClick={handleToggleAudio}
+                  >
+                    {isAudioEnabled ? "volume_up" : "volume_off"}
+                  </i>
+                </div>
+                {isAudioEnabled && (<span>audio by Gemini TTS</span>)}
+                {!isAudioEnabled && (
+                <i
+                  className="material-icons toggle-icon"
+                  style={{
+                    cursor: "pointer",
+                    color: waitTime === 1000 ? "#1976d2" : "#888",
+                  }}
+                  title={`Click to ${
+                    waitTime === 1000 ? "slow down" : "speed up"
+                  } the interview`}
+                  onClick={handleToggleWaitTime}
+                >
+                  speed
+                </i>)}
+                
+              </div>
+              <div className="chat-container" ref={chatContainerRef}>
+                {messages.length === 0 ? (
+                  <div className="chat-waiting-indicator">
+                    Waiting for the interview to start...
+                  </div>
+                ) : (
+                  messages
+                    .filter((msg) => msg.speaker !== "report")
+                    .map((msg, idx, filteredMessages) => (
+                      <div
+                        ref={idx === filteredMessages.length - 1 ? lastMessageRef : null}
+                        className={`chat-message-wrapper ${msg.speaker}${idx === filteredMessages.length - 1 ? " fade-in" : ""}${msg.audio ? " has-audio" : ""}`}
+                      key={idx}
+                    >
+                      {msg.speaker.includes("interviewer") && (
+                        <img
+                          className="chat-avatar"
+                          src="assets/ai_headshot.svg"
+                          alt="Interviewer"
+                        />
+                      )}
+                      <div className={`chat-bubble ${msg.audio ? "with-audio" : ""}`}>
+                        {msg.speaker.includes("thinking") && (
+                          <div className="thinking-header">Thinking...</div>
+                        )}
+                        {msg.text}
+                      </div>
+                      {msg.speaker === "patient" && (
+                        <img
+                          className="chat-avatar"
+                          src={selectedPatient.headshot}
+                          alt={selectedPatient.name}
+                        />
+                      )}
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </div>
+          {/* Right: Report Section */}
+          <div className="interview-right-section">
+            <div className="header2">Generated Report</div>
+            <div className="report-content" ref={reportContentRef}>
+              {/* Updated report rendering to show diff if available */}
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: prevReport ? getDiffReport() : currentReport,
+                }}
+              />
+              {isInterviewComplete && (
+                <button
+                  className="evaluate-button"
+                  onClick={() => setShowEvaluationInfoPopup(true)}
+                  disabled={showEvaluation || showEvaluationInfoPopup}
+                ><i className="material-icons back-button-icon">keyboard_arrow_down</i>
+                  View Report Evaluation
+                </button>
+              )}
+              <div className="evaluation-text">
+                {showEvaluation && (
+                  isFetchingEvaluation
+                    ? <div>Please wait...</div>
+                    : parse(evaluation)
+                )}
+              </div>
+            </div>
+            <div className="disclaimer-container">
+              <i className="material-icons warning-icon">warning</i>
+              <div className="disclaimer-text">
+                This demonstration is for illustrative purposes of MedGemma’s baseline capabilities only. It does not represent a finished or approved product, is not intended to diagnose or suggest treatment of any disease or condition, and should not be used for medical advice.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {showEvaluationInfoPopup && (
+        <div className="popup-overlay">
+          <div className="popup-content">
+            <h2>About the Evaluation</h2>
+            <p>
+              Now we will ask MedGemma to evaluate its own performance at
+              generating this report. We will provide it with all the
+              information about {selectedPatient.name}, including their actual
+              diagnosis and aspects of condition history not included previously. 
+              Using this new information, MedGemma will
+              highlight key facts it correctly included and identify other
+              information that would have been beneficial to add.
+            </p>
+            <p>
+              The purpose of this step is to provide non-medical users with a
+              sense of how well MedGemma did at this task. While the evaluation
+              is completed by MedGemma, the examples in this demo have also been
+              reviewed by clinicians for accuracy. Although MedGemma's evaluation
+              does not represent a consensus based standard,
+              this illustration simply shows an example of one approach developers could adopt 
+              to evaluate quality and completeness.
+            </p>
+            <button className="popup-button" onClick={() => {
+              setShowEvaluationInfoPopup(false);
+              setShowEvaluation(true);
+            }}>Continue</button>
+          </div>
+        </div>)}
+      <DetailsPopup
+        isOpen={isDetailsPopupOpen}
+        onClose={() => setIsDetailsPopupOpen(false)}
+      />
+    </div>
+  );
+};
+
+export default Interview;

frontend/src/components/Landing/Landing.css

@@ -0,0 +1,296 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.sushruta-landing {
+  min-height: 100vh;
+  background: linear-gradient(135deg, var(--sushruta-bg-primary) 0%, var(--sushruta-bg-secondary) 100%);
+  color: var(--sushruta-text-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 40px 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Background Glowing Orbs */
+.orb {
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.15;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.orb-blue {
+  top: 10%;
+  left: 10%;
+  background: var(--sushruta-accent-blue);
+  animation: floatOrb 12s infinite alternate ease-in-out;
+}
+
+.orb-purple {
+  bottom: 15%;
+  right: 10%;
+  background: var(--sushruta-accent-purple);
+  animation: floatOrb 16s infinite alternate-reverse ease-in-out;
+}
+
+@keyframes floatOrb {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  100% {
+    transform: translate(50px, 30px) scale(1.1);
+  }
+}
+
+/* Header */
+.sushruta-header {
+  text-align: center;
+  margin-top: 40px;
+  margin-bottom: 20px;
+  z-index: 1;
+  animation: fadeInDown 0.8s ease-out;
+}
+
+.sushruta-title {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 54px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -1.5px;
+  background: linear-gradient(90deg, #ffffff 30%, var(--sushruta-accent-teal) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  position: relative;
+}
+
+.sushruta-tagline {
+  font-size: 18px;
+  color: var(--sushruta-text-secondary);
+  margin-top: 10px;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+}
+
+/* Main Layout */
+.sushruta-main {
+  width: 100%;
+  max-width: 1100px;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  margin: 40px 0;
+}
+
+.module-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 40px;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .module-grid {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+  .sushruta-title {
+    font-size: 40px;
+  }
+}
+
+/* Module Cards with Glassmorphism */
+.module-card {
+  position: relative;
+  background: var(--sushruta-bg-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 24px;
+  padding: 3px; /* For the gradient border */
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  animation: fadeInUp 0.8s ease-out;
+}
+
+.card-inner {
+  background: #111124;
+  border-radius: 21px;
+  padding: 40px 30px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  transition: background 0.3s ease;
+}
+
+.card-icon {
+  font-size: 48px;
+  margin-bottom: 24px;
+}
+
+.card-title {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 26px;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0 0 16px 0;
+}
+
+.card-description {
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--sushruta-text-secondary);
+  margin: 0 0 32px 0;
+  flex-grow: 1;
+}
+
+.card-action {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: gap 0.3s ease;
+}
+
+.card-action .arrow {
+  transition: transform 0.3s ease;
+}
+
+/* Card hover glow & gradient borders */
+.card-previsit .card-border-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, var(--sushruta-accent-blue) 0%, var(--sushruta-accent-purple) 100%);
+  z-index: -1;
+  opacity: 0.3;
+  transition: opacity 0.4s ease;
+}
+
+.card-radiology .card-border-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, var(--sushruta-accent-teal) 0%, var(--sushruta-accent-blue) 100%);
+  z-index: -1;
+  opacity: 0.3;
+  transition: opacity 0.4s ease;
+}
+
+/* Hover effects */
+.module-card:hover {
+  transform: translateY(-8px) scale(1.01);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+}
+
+.card-previsit:hover {
+  box-shadow: 0 0 30px rgba(79, 143, 255, 0.2);
+}
+
+.card-radiology:hover {
+  box-shadow: 0 0 30px rgba(0, 212, 170, 0.2);
+}
+
+.module-card:hover .card-border-gradient {
+  opacity: 1;
+}
+
+.module-card:hover .card-inner {
+  background: #14142b;
+}
+
+.module-card:hover .card-action {
+  gap: 12px;
+}
+
+.module-card:hover .card-action .arrow {
+  transform: translateX(4px);
+}
+
+.card-previsit .card-action {
+  color: var(--sushruta-accent-blue);
+}
+
+.card-radiology .card-action {
+  color: var(--sushruta-accent-teal);
+}
+
+/* Footer & Disclaimer */
+.sushruta-footer {
+  width: 100%;
+  max-width: 900px;
+  text-align: center;
+  z-index: 1;
+  margin-top: 40px;
+  animation: fadeInUp 1s ease-out;
+}
+
+.disclaimer-box {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 16px 24px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #8a8a9a;
+  text-align: justify;
+  margin-bottom: 24px;
+}
+
+.footer-credits {
+  font-size: 13px;
+  color: #6a6a7a;
+}
+
+/* Entrance Animations */
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

frontend/src/components/Landing/Landing.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import './Landing.css';
+
+const Landing = ({ onNavigate }) => {
+  return (
+    <div className="sushruta-landing">
+      {/* Background glowing orbs */}
+      <div className="orb orb-blue"></div>
+      <div className="orb orb-purple"></div>
+
+      <header className="sushruta-header">
+        <h1 className="sushruta-title">
+          Sushruta
+          <span className="title-glow"></span>
+        </h1>
+        <p className="sushruta-tagline">Patient 360 — Powered by MedGemma</p>
+      </header>
+
+      <main className="sushruta-main">
+        <div className="module-grid">
+          {/* Card 1: Pre-Visit Intake */}
+          <div 
+            className="module-card card-previsit"
+            onClick={() => onNavigate('previsit')}
+            id="card-previsit-intake"
+          >
+            <div className="card-border-gradient"></div>
+            <div className="card-inner">
+              <div className="card-icon">📋</div>
+              <h2 className="card-title">Pre-Visit Intake</h2>
+              <p className="card-description">
+                AI-powered patient interview simulation. Watch MedGemma conduct a pre-visit intake, gather clinical history, and automatically generate an intake report.
+              </p>
+              <div className="card-action">
+                <span>Launch Intake</span>
+                <span className="arrow">→</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Card 2: Radiology Explainer */}
+          <div 
+            className="module-card card-radiology"
+            onClick={() => onNavigate('radiology')}
+            id="card-radiology-explainer"
+          >
+            <div className="card-border-gradient"></div>
+            <div className="card-inner">
+              <div className="card-icon">🩺</div>
+              <h2 className="card-title">Radiology Explainer</h2>
+              <p className="card-description">
+                Explore radiology images and clinical reports. Select any sentence to receive an AI-powered plain-language explanation with localized image-pointing guidance.
+              </p>
+              <div className="card-action">
+                <span>Launch Explainer</span>
+                <span className="arrow">→</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer className="sushruta-footer">
+        <div className="disclaimer-box">
+          <strong>Disclaimer:</strong> This demonstration is for illustrative and developer exploration purposes only. It does not represent a finished, certified, or approved medical product. It is not intended to be used for diagnostic purposes or real clinical decision-making.
+        </div>
+        <p className="footer-credits">
+          Built on Hugging Face Spaces using MedGemma and Gemma-3.
+        </p>
+      </footer>
+    </div>
+  );
+};
+
+export default Landing;

frontend/src/components/PatientBuilder/PatientBuilder.css

@@ -0,0 +1,205 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#root {
+	display: flex;
+	justify-content: center;
+}
+
+.header2 {
+	font-size: 24px;
+	font-weight: bold;
+	margin-bottom: 10px;
+}
+
+.lighttext {
+	font-size: 15px;
+}
+
+
+
+.patient-builder-container {
+	font-family: Arial, sans-serif;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	gap: 20px;
+	width: min-content;
+	height: min-content;
+}
+
+.patient-list {
+	display: flex;
+	gap: 20px;
+}
+
+.patient-list {
+	justify-content: space-between;
+}
+
+.selection-section {
+	margin-bottom: 30px;
+    flex-direction: column;
+	width: 958px;
+}
+
+.condition-list {
+	align-items: stretch;
+	flex-direction: column;
+	gap: 10px;
+	margin-top: 10px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
+.condition-card {
+	display: grid;
+	grid-template-columns: 100px 1fr;
+	align-items: center;
+	padding: 0 30px;
+}
+
+.condition-card {
+	background: #fff;
+	border: 2px solid #ddd;
+	border-radius: 10px;
+	padding: 10px;
+	cursor: pointer;
+	transition: transform 0.2s ease, border-color 0.2s ease;
+	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.patient-video-container {
+	position: relative;
+	cursor: pointer;
+	width: 300px;
+	height: 300px;
+	overflow: hidden;
+	border: 4px solid transparent;
+	border-radius: 12px;
+	transition: border-color 0.2s ease;
+	box-sizing: border-box;
+}
+
+.patient-video, .patient-img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	object-fit: cover;
+	border-radius: 8px;
+	transition: opacity 0.4s ease-in-out;
+}
+
+.ehr-label {
+	position: absolute;
+	bottom: 15px;
+	right: 10px;
+	border-radius: 4px;
+	border: 1px solid #C8B3FD;
+	background: #E8DEF8;
+	padding: 0 5px;
+}
+
+.patient-video-container:hover {
+	border-color: #aaa;
+}
+
+.condition-card:hover, .ehr-label:hover {
+	transform: scale(1.05);
+	border-color: #aaa;
+}
+.patient-video-container.selected {
+	border-color: #D0BCFF;
+	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.condition-card.selected {
+	border: 4px solid #D0BCFF;
+	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.go-button {
+	background: #0078D7;
+	color: #fff;
+	border: none;
+	padding: 10px 20px;
+	border-radius: 5px;
+	cursor: pointer;
+	font-size: 16px;
+	transition: background 0.3s ease;
+}
+.go-button:disabled {
+	background: #aaa;
+	cursor: not-allowed;
+}
+.go-button:hover:not(:disabled) {
+	background: #005fa3;
+}
+.patient-info .category-label {
+    font-size: 12px;
+    font-weight: bold;
+}
+.patient-info .category-value {
+    font-size: 16px;
+    font-weight: normal;
+}
+
+.patient-info {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.condition-card.disabled {
+    pointer-events: none;
+    opacity: 0.3;
+	transition: opacity 0.2s ease-in-out 0.1s;
+}
+
+.patient-info-right {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 10px;
+	width: min-content;
+}
+
+.patient-details {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin-top: 20px;
+	align-items: center;
+	text-align: center;
+}
+
+.json-popup-content {
+  max-width: 80vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  width: 800px;
+}
+
+.json-viewer-container {
+  flex-grow: 1;
+  overflow: auto;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  font-family: monospace;
+}

frontend/src/components/PatientBuilder/PatientBuilder.js

@@ -0,0 +1,243 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from "react";
+import "./PatientBuilder.css";
+import { JsonViewer } from "@textea/json-viewer"; // updated import
+import DetailsPopup from "../DetailsPopup/DetailsPopup";
+
+// Global caching function to load patients & conditions once
+let cachedPatientsAndConditions = null;
+function getPatientsAndConditions() {
+  if (cachedPatientsAndConditions)
+    return Promise.resolve(cachedPatientsAndConditions);
+  return fetch("/assets/patients_and_conditions.json")
+    .then((response) => response.json())
+    .then((data) => {
+      cachedPatientsAndConditions = data;
+      return data;
+    });
+}
+
+const PatientBuilder = ({
+  selectedPatient,
+  selectedCondition,
+  setSelectedPatient,
+  setSelectedCondition,
+  onNext,
+  onBack,
+}) => {
+  const [patients, setPatients] = useState([]);
+  const [conditions, setConditions] = useState([]);
+  const [hoveredPatient, setHoveredPatient] = useState(null);
+  const [isVideoLoading, setIsVideoLoading] = useState(false);
+
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [popupJson, setPopupJson] = useState(null);
+  const [isDetailsPopupOpen, setIsDetailsPopupOpen] = useState(false);
+
+
+  useEffect(() => {
+    getPatientsAndConditions()
+      .then((data) => {
+        setPatients(data.patients);
+        setConditions(data.conditions);
+      })
+      .catch((error) =>
+        console.error("Error fetching patients and conditions:", error)
+      );
+  }, []);
+
+  useEffect(() => {
+    if (
+      (selectedPatient &&
+      selectedPatient.existing_condition !== "depression" &&
+      selectedCondition === "Serotonin Syndrome")
+      || (
+        selectedCondition === "Migraine" &&
+        selectedPatient &&
+        selectedPatient.existing_condition === "Diabetes"
+      )
+    ) {
+      setSelectedCondition(null);
+    }
+  }, [selectedPatient]);
+
+  // When a new patient is selected, set the video to a loading state
+  // to ensure the placeholder image is shown.
+  useEffect(() => {
+    if (selectedPatient) {
+      setIsVideoLoading(true);
+    }
+  }, [selectedPatient]);
+
+  const handleGo = () => {
+    if (selectedPatient && selectedCondition) {
+      onNext();
+    }
+  };
+
+  const openPopup = (patient) => {
+    if (patient && patient.fhirFile) {
+      fetch(patient.fhirFile)
+        .then((response) => response.json())
+        .then((json) => {
+          setPopupJson(json);
+          setIsPopupOpen(true);
+        })
+        .catch((error) => console.error("Error fetching FHIR JSON:", error));
+    }
+  };
+
+  const closePopup = () => {
+    setIsPopupOpen(false);
+    setPopupJson(null);
+  };
+
+  return (
+    <div className="patient-builder-container">
+      <div className="headerButtonsContainer">
+      <button className="back-button" onClick={onBack}>
+          <i className="material-icons back-button-icon">keyboard_arrow_left</i>
+          Back
+      </button>
+      <button className="details-button" onClick={() => setIsDetailsPopupOpen(true)}>
+          <i className="material-icons code-block-icon">code</i>&nbsp;
+          Details about this Demo
+      </button>
+      </div>
+      <div className="frame">
+        <div className="selection-section">
+          <div className="header2">Select a Patient</div>
+          <div className="patient-list">
+            {patients.map((patient) => {
+              const isSelected = selectedPatient && selectedPatient.id === patient.id;
+              return (
+                <div
+                  key={patient.id}
+                  className="patient-card"
+                >
+                  <div
+                    className={`patient-video-container ${isSelected ? "selected" : ""}`}
+                    onClick={() => setSelectedPatient(patient)}
+                  >
+                    <img
+                      src={patient.img}
+                      className="patient-img"
+                      alt={patient.name}
+                      draggable="false"
+                      onDragStart={(e) => e.preventDefault()}
+                      style={{ opacity: isSelected && !isVideoLoading ? 0 : 1 }}
+                    />
+                    {isSelected && (
+                      <video
+                        key={patient.id}
+                        src={patient.video}
+                        className="patient-video"
+                        autoPlay
+                        muted
+                        loop
+                        onCanPlay={() => setIsVideoLoading(false)}
+                        style={{ opacity: isVideoLoading ? 0 : 1 }}
+                      />
+                    )}
+                    <div className="ehr-label" onClick={(e) => { e.stopPropagation(); openPopup(patient); }}>
+                      Synthetic Health Record (FHIR)
+                    </div>
+                  </div>
+                  <div className="patient-info">
+                    <div className="category-value">
+                      {patient.name}, {patient.age} years old, {patient.gender}
+                    </div>
+                    <div className="category-value">
+                      Existing condition: {patient.existing_condition}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div className="selection-section">
+          <div className="header2">Explore a Condition</div>
+          <div className="lighttext">
+          In this demonstration, a persona, simulated using Gemini 2.5 Flash, will interact with an AI agent, built with MedGemma. 
+          Neither the simulated persona nor the AI agent have been provided the diagnosis for the current condition (selected below). 
+          The AI agent facilitates structured information-gathering, designed to usefully collect and summarize the patient's symptoms. 
+          For the purposes of this demonstration, the AI agent also has access to elements of the patient's health record (provided as FHIR resources).
+          </div>
+          <div className="condition-list">
+            {conditions.map((cond) => {
+              const isDisabled =
+                (cond.name === "Serotonin Syndrome" &&
+                selectedPatient &&
+                selectedPatient.existing_condition !== "Depression") || (
+                  cond.name === "Migraine" &&
+                selectedPatient &&
+                selectedPatient.existing_condition === "Diabetes");
+              return (
+                <div
+                  key={cond.name}
+                  className={`condition-card lighttext ${
+                    selectedCondition === cond.name ? "selected" : ""
+                  } ${isDisabled ? "disabled" : ""}`}
+                  onClick={
+                    !isDisabled
+                      ? () => setSelectedCondition(cond.name)
+                      : undefined
+                  }
+                >
+                  <div><strong>{cond.name}</strong></div>
+                  <div>{cond.description}</div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <button
+          className="info-button"
+          onClick={handleGo}
+          disabled={!(selectedPatient && selectedCondition)}
+        >
+          Launch simulation
+        </button>
+      </div>
+      {isPopupOpen && (
+        <div className="popup-overlay" onClick={closePopup}>
+          <div
+            className="popup-content json-popup-content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2>Synthetic Electronic Health Record</h2>
+            <span>This is a sample of the patient’s electronic health record, shown in a standard (FHIR) format. This FHIR record, like the patient, was generated solely for the purposes of this demo.</span>
+            <div className="json-viewer-container">
+              <JsonViewer value={popupJson} theme="monokai" />
+            </div>
+            <button className="popup-button" onClick={closePopup}>
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+       <DetailsPopup
+        isOpen={isDetailsPopupOpen}
+        onClose={() => setIsDetailsPopupOpen(false)}
+      />
+    </div>
+  );
+};
+
+export default PatientBuilder;

frontend/src/components/PreloadImages.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+const PreloadImages = ({ imageSources, children }) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    let loadedCount = 0;
+    imageSources.forEach(src => {
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        loadedCount++;
+        if (loadedCount === imageSources.length) {
+          setLoaded(true);
+        }
+      };
+    });
+  }, [imageSources]);
+
+  if (!loaded) {
+    return <div>Loading images...</div>;
+  }
+  return <>{children}</>;
+};
+
+export default PreloadImages;

frontend/src/components/RadiologyExplainer/RadiologyExplainer.css

@@ -0,0 +1,424 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.radiology-explainer {
+  min-height: 100vh;
+  background: var(--sushruta-bg-primary);
+  color: var(--sushruta-text-primary);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Background glows */
+.radiology-orb-left {
+  position: absolute;
+  top: -10%;
+  left: -10%;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  background: var(--sushruta-accent-teal);
+  filter: blur(140px);
+  opacity: 0.08;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.radiology-orb-right {
+  position: absolute;
+  bottom: -10%;
+  right: -10%;
+  width: 450px;
+  height: 450px;
+  border-radius: 50%;
+  background: var(--sushruta-accent-blue);
+  filter: blur(140px);
+  opacity: 0.08;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Navigation */
+.radiology-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 32px;
+  background: rgba(10, 10, 26, 0.6);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  z-index: 10;
+}
+
+.radiology-logo {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 22px;
+  font-weight: 600;
+  margin: 0;
+  background: linear-gradient(90deg, #ffffff 40%, var(--sushruta-accent-teal) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Nav buttons customized for dark mode */
+.radiology-nav .back-button {
+  color: var(--sushruta-text-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: transparent;
+  transition: all 0.3s ease;
+}
+
+.radiology-nav .back-button:hover {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.radiology-nav .details-button {
+  background: rgba(0, 212, 170, 0.15);
+  color: var(--sushruta-accent-teal);
+  border: 1px solid rgba(0, 212, 170, 0.3);
+  transition: all 0.3s ease;
+}
+
+.radiology-nav .details-button:hover {
+  background: rgba(0, 212, 170, 0.25);
+  box-shadow: 0 0 12px rgba(0, 212, 170, 0.2);
+}
+
+/* Main Container Layout */
+.radiology-container {
+  display: grid;
+  grid-template-columns: 240px 1fr 400px;
+  gap: 24px;
+  padding: 24px 32px;
+  flex-grow: 1;
+  z-index: 1;
+  max-width: 1600px;
+  width: 100%;
+  margin: 0 auto;
+  min-height: 0; /* Important for grid item scrollability */
+}
+
+@media (max-width: 1200px) {
+  .radiology-container {
+    grid-template-columns: 200px 1fr;
+    grid-template-rows: auto;
+  }
+  .radiology-report-panel {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 768px) {
+  .radiology-container {
+    grid-template-columns: 1fr;
+  }
+  .radiology-sidebar,
+  .radiology-main,
+  .radiology-report-panel {
+    grid-column: 1 / -1;
+  }
+}
+
+/* Sidebar: Case Selection */
+.radiology-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.sidebar-group h3 {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--sushruta-text-secondary);
+  margin: 0 0 12px 0;
+  border-left: 3px solid var(--sushruta-accent-teal);
+  padding-left: 8px;
+}
+
+.case-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.case-btn {
+  font-family: 'Google Sans Text', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+  padding: 12px 16px;
+  background: var(--sushruta-bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  color: var(--sushruta-text-primary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.case-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.case-btn.active {
+  background: rgba(79, 143, 255, 0.12);
+  border-color: var(--sushruta-accent-blue);
+  color: #ffffff;
+  box-shadow: 0 0 12px rgba(79, 143, 255, 0.15);
+}
+
+.no-cases {
+  font-size: 13px;
+  color: #6a6a7a;
+  font-style: italic;
+}
+
+/* Center Panel: Image Viewer */
+.radiology-main {
+  min-width: 0;
+}
+
+.image-card {
+  background: var(--sushruta-bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.image-card-header {
+  background: rgba(255, 255, 255, 0.03);
+  padding: 14px 20px;
+  font-family: 'Google Sans', sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: center;
+  color: var(--sushruta-text-secondary);
+}
+
+.image-viewer-container {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #05050f;
+  padding: 20px;
+  min-height: 380px;
+}
+
+.radiology-image {
+  max-width: 100%;
+  max-height: 520px;
+  border-radius: 12px;
+  object-fit: contain;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.image-loading {
+  font-size: 15px;
+  color: var(--sushruta-text-secondary);
+  animation: pulse 1.5s infinite;
+}
+
+.image-placeholder {
+  font-size: 14px;
+  color: #555565;
+}
+
+.image-footer-note {
+  background: rgba(255, 255, 255, 0.02);
+  padding: 10px 16px;
+  font-size: 12px;
+  color: #6a6a7a;
+  text-align: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Right Panel: Report & Explanations */
+.radiology-report-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-height: 0;
+}
+
+/* Explanation Card */
+.explanation-card {
+  background: rgba(79, 143, 255, 0.04);
+  border: 1px solid rgba(79, 143, 255, 0.15);
+  border-radius: 16px;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.explanation-card-header {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--sushruta-accent-blue);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 12px;
+}
+
+.explanation-text {
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--sushruta-text-primary);
+  margin: 0;
+}
+
+.generating-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--sushruta-accent-blue);
+  font-size: 14px;
+}
+
+.pulse-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--sushruta-accent-blue);
+  animation: glowPulse 1.2s infinite alternate;
+}
+
+@keyframes glowPulse {
+  0% {
+    transform: scale(0.8);
+    box-shadow: 0 0 0 rgba(79, 143, 255, 0.5);
+  }
+  100% {
+    transform: scale(1.2);
+    box-shadow: 0 0 10px rgba(79, 143, 255, 0.8);
+  }
+}
+
+/* Report Text Card */
+.report-text-card {
+  background: var(--sushruta-bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 250px;
+}
+
+.report-card-header {
+  background: rgba(255, 255, 255, 0.02);
+  padding: 12px 20px;
+  font-family: 'Google Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--sushruta-text-secondary);
+}
+
+.report-body {
+  padding: 20px;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+.report-paragraph {
+  margin-bottom: 16px;
+  line-height: 1.7;
+}
+
+.report-sentence {
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.report-sentence:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #ffffff;
+}
+
+.report-sentence.selected {
+  background: rgba(0, 212, 170, 0.15);
+  border-left: 2px solid var(--sushruta-accent-teal);
+  color: #ffffff;
+  font-weight: 500;
+}
+
+.placeholder-text {
+  color: #555565;
+  font-style: italic;
+  font-size: 14px;
+}
+
+/* Footer & Disclaimer */
+.radiology-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px 32px;
+  background: rgba(255, 255, 255, 0.02);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  z-index: 1;
+}
+
+.warning-icon {
+  color: #d4a373;
+  font-size: 20px;
+}
+
+.radiology-footer .disclaimer-text {
+  font-size: 12px;
+  color: #8a8a9a;
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* Small Loaders */
+.small-loader {
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  border-top: 2px solid var(--sushruta-accent-teal);
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+  margin: 10px auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}

frontend/src/components/RadiologyExplainer/RadiologyExplainer.js

@@ -0,0 +1,286 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import './RadiologyExplainer.css';
+import DetailsPopup from '../DetailsPopup/DetailsPopup';
+
+const RadiologyExplainer = ({ onBack }) => {
+  const [reports, setReports] = useState([]);
+  const [selectedReportName, setSelectedReportName] = useState('');
+  const [reportDetails, setReportDetails] = useState(null);
+  const [selectedSentence, setSelectedSentence] = useState('');
+  const [explanation, setExplanation] = useState('Click a sentence in the report to see the MedGemma explanation here.');
+  const [loadingReports, setLoadingReports] = useState(true);
+  const [loadingDetails, setLoadingDetails] = useState(false);
+  const [loadingExplanation, setLoadingExplanation] = useState(false);
+  const [error, setError] = useState(null);
+  const [showInfoPopup, setShowInfoPopup] = useState(false);
+
+  // 1. Fetch available reports on mount
+  useEffect(() => {
+    fetch('/api/radiology/reports')
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to load radiology cases.');
+        return res.json();
+      })
+      .then((data) => {
+        setReports(data);
+        setLoadingReports(false);
+        // Automatically select the first case if available
+        if (data.length > 0) {
+          setSelectedReportName(data[0].name);
+        }
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoadingReports(false);
+      });
+  }, []);
+
+  // 2. Fetch specific report details when selection changes
+  useEffect(() => {
+    if (!selectedReportName) return;
+
+    setLoadingDetails(true);
+    setReportDetails(null);
+    setSelectedSentence('');
+    setExplanation('Click a sentence in the report to see the MedGemma explanation here.');
+    setError(null);
+
+    fetch(`/api/radiology/report/${encodeURIComponent(selectedReportName)}`)
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to load report details.');
+        return res.json();
+      })
+      .then((data) => {
+        setReportDetails(data);
+        setLoadingDetails(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoadingDetails(false);
+      });
+  }, [selectedReportName]);
+
+  // 3. Handle sentence click (explain)
+  const handleSentenceClick = (sentence) => {
+    if (!sentence || !sentence.trim()) return;
+    setSelectedSentence(sentence);
+    setLoadingExplanation(true);
+    setExplanation('');
+    setError(null);
+
+    fetch('/api/radiology/explain', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sentence: sentence.trim(),
+        report_name: selectedReportName,
+      }),
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to generate explanation.');
+        return res.json();
+      })
+      .then((data) => {
+        setExplanation(data.explanation);
+        setLoadingExplanation(false);
+      })
+      .catch((err) => {
+        setExplanation('Failed to generate explanation. Please try again.');
+        setLoadingExplanation(false);
+      });
+  };
+
+  // Helper to split paragraph into sentences
+  const splitSentences = (text) => {
+    if (!text) return [];
+    // Basic medical sentence splitting (handles dots after numbers/caps gracefully)
+    const sentences = text.match(/[^.!?]+[.!?]+(\s+|$)/g) || [text];
+    return sentences.map((s) => s.trim()).filter(Boolean);
+  };
+
+  const getModalityHeader = () => {
+    if (!reportDetails) return 'Medical Image';
+    return reportDetails.image_type || 'Medical Image';
+  };
+
+  const cxrCases = reports.filter((r) => r.image_type === 'CXR');
+  const ctCases = reports.filter((r) => r.image_type === 'CT');
+
+  return (
+    <div className="radiology-explainer">
+      {/* Background glow effects */}
+      <div className="radiology-orb-left"></div>
+      <div className="radiology-orb-right"></div>
+
+      {/* Top Navbar */}
+      <nav className="radiology-nav">
+        <button className="back-button" onClick={onBack} id="back-button-landing">
+          <span className="material-icons back-button-icon">keyboard_arrow_left</span>
+          <span>Back</span>
+        </button>
+
+        <h1 className="radiology-logo">Radiology Explainer</h1>
+
+        <button className="details-button" onClick={() => setShowInfoPopup(true)} id="info-button-details">
+          <span className="material-icons code-block-icon">code</span>
+          <span>Demo Details</span>
+        </button>
+      </nav>
+
+      {/* Main Content Area */}
+      <div className="radiology-container">
+        {/* Left Panel: Case Selection */}
+        <aside className="radiology-sidebar">
+          <div className="sidebar-group">
+            <h3>Chest X-Ray Cases</h3>
+            <div className="case-buttons">
+              {loadingReports ? (
+                <div className="small-loader"></div>
+              ) : cxrCases.length > 0 ? (
+                cxrCases.map((c) => (
+                  <button
+                    key={c.name}
+                    className={`case-btn ${selectedReportName === c.name ? 'active' : ''}`}
+                    onClick={() => setSelectedReportName(c.name)}
+                  >
+                    {c.name}
+                  </button>
+                ))
+              ) : (
+                <span className="no-cases">No X-Ray cases</span>
+              )}
+            </div>
+          </div>
+
+          <div className="sidebar-group">
+            <h3>CT scan Cases</h3>
+            <div className="case-buttons">
+              {loadingReports ? (
+                <div className="small-loader"></div>
+              ) : ctCases.length > 0 ? (
+                ctCases.map((c) => (
+                  <button
+                    key={c.name}
+                    className={`case-btn ${selectedReportName === c.name ? 'active' : ''}`}
+                    onClick={() => setSelectedReportName(c.name)}
+                  >
+                    {c.name}
+                  </button>
+                ))
+              ) : (
+                <span className="no-cases">No CT cases</span>
+              )}
+            </div>
+          </div>
+        </aside>
+
+        {/* Center Panel: Image Viewer */}
+        <main className="radiology-main">
+          <div className="image-card">
+            <div className="image-card-header">{getModalityHeader()}</div>
+            <div className="image-viewer-container">
+              {loadingDetails ? (
+                <div className="image-loading">Loading medical image...</div>
+              ) : reportDetails?.image_file ? (
+                <img
+                  src={`/${reportDetails.image_file}`}
+                  alt="Radiology Study"
+                  className="radiology-image"
+                />
+              ) : (
+                <div className="image-placeholder">No image selected</div>
+              )}
+            </div>
+            {reportDetails?.image_type === 'CT' && (
+              <div className="image-footer-note">
+                * Note: Displays a single high-yield slice of the complete CT scan.
+              </div>
+            )}
+          </div>
+        </main>
+
+        {/* Right Panel: Report & Explanations */}
+        <section className="radiology-report-panel">
+          {/* Explanation Panel */}
+          <div className="explanation-card">
+            <div className="explanation-card-header">Clinical Explanation</div>
+            <div className="explanation-body">
+              {loadingExplanation ? (
+                <div className="generating-indicator">
+                  <div className="pulse-dot"></div>
+                  <span>MedGemma translating sentence...</span>
+                </div>
+              ) : (
+                <p className="explanation-text">{explanation}</p>
+              )}
+            </div>
+          </div>
+
+          {/* Report Text Display */}
+          <div className="report-text-card">
+            <div className="report-card-header">Radiology Report</div>
+            <div className="report-body">
+              {loadingDetails ? (
+                <div className="small-loader"></div>
+              ) : error ? (
+                <div className="error-text">{error}</div>
+              ) : reportDetails?.text ? (
+                <div className="report-paragraphs">
+                  {reportDetails.text.split('\n\n').map((paragraph, pIdx) => (
+                    <p key={pIdx} className="report-paragraph">
+                      {splitSentences(paragraph).map((sentence, sIdx) => {
+                        const isSelected = selectedSentence === sentence;
+                        return (
+                          <span
+                            key={sIdx}
+                            className={`report-sentence ${isSelected ? 'selected' : ''}`}
+                            onClick={() => handleSentenceClick(sentence)}
+                          >
+                            {sentence}{' '}
+                          </span>
+                        );
+                      })}
+                    </p>
+                  ))}
+                </div>
+              ) : (
+                <div className="placeholder-text">Select a report to view text</div>
+              )}
+            </div>
+          </div>
+        </section>
+      </div>
+
+      {/* Floating Disclaimer */}
+      <footer className="radiology-footer">
+        <span className="material-icons warning-icon">warning</span>
+        <p className="disclaimer-text">
+          <strong>Demo Disclaimer:</strong> MedGemma explains medical concepts for informational purposes only. Do not use for clinical diagnostics or medical decisions.
+        </p>
+      </footer>
+
+      {/* Info Details Modal */}
+      {showInfoPopup && (
+        <DetailsPopup isOpen={true} onClose={() => setShowInfoPopup(false)} />
+      )}
+    </div>
+  );
+};
+
+export default RadiologyExplainer;

frontend/src/components/RolePlayDialogs/RolePlayDialogs.css

@@ -0,0 +1,101 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.frame.role-play-container {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  align-items: center;  
+  grid-gap: 30px;  
+  width: fit-content;
+  align-self: center;
+}
+
+.dialogs-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    margin-top: 50px;
+}
+
+
+.dialog-box {
+  border-radius: 5.667px;
+  border: 1.889px solid #E9E9E9;
+  background: #FFF;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 477px;
+}
+
+.dialog-title-text {
+  padding-top: 24px;
+  font-size: 1.6rem;
+  font-weight: 500;
+  color: #202124;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dialog-body-scrollable {
+  padding: 16px;
+  overflow-y: auto;
+  flex-grow: 1;
+  color: #3c4043;
+  line-height: 1.6;
+}
+
+.dialog-subtitle {
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.variable {
+  color: #e81ad7;
+  font-weight: bold;
+}
+
+.patient-avatar {
+  border-radius: 50%;
+  margin: 0 10px;
+  width: 90px;
+  height: 90px;  
+}
+
+.ai-avatar {
+  border-radius: 50%;
+  width: 90px;
+  height: 90px;
+  background: #E8DEF8;
+}
+
+.report-notice {
+  width: 974px;
+}
+
+.highlight {
+  background-color: #E8DEF8;
+  font-weight: 700;
+  padding: 0 4px;
+  border-radius: 8px;
+}
+
+.role-play-container .info-button {
+  justify-self: flex-start;
+}

frontend/src/components/RolePlayDialogs/RolePlayDialogs.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from "react";
+import "./RolePlayDialogs.css";
+import DetailsPopup from "../DetailsPopup/DetailsPopup";
+
+const RolePlayDialogs = ({
+  selectedPatient,
+  selectedCondition,
+  onStart,
+  onBack,
+}) => {
+  const [isDetailsPopupOpen, setIsDetailsPopupOpen] = useState(false);
+
+  return (
+    <div className="page">
+      <div className="headerButtonsContainer">
+        <button className="back-button" onClick={onBack}>
+          <i className="material-icons back-button-icon">keyboard_arrow_left</i>
+          Back
+        </button>
+        <button className="details-button" onClick={() => setIsDetailsPopupOpen(true)}>
+          <i className="material-icons code-block-icon">code</i>&nbsp; Details
+          about this Demo
+        </button>
+      </div>
+      <div className="frame role-play-container">
+        <div className="title-header">What’s happening in this simulation</div>
+        <div className="dialogs-container">
+          <div className="dialog-box">
+            <div className="dialog-title-text">Pre-visit AI agent</div>
+            <div className="dialog-subtitle">
+              Built with: <img src="assets/medgemma.avif" height="16px" />{" "}
+              27b
+            </div>
+            <img
+              src="assets/ai_headshot.svg"
+              alt="AI Avatar"
+              className="ai-avatar"
+            />
+            <div className="dialog-body-scrollable">
+              In this demo, MedGemma functions as an AI agent designed to assist in pre-visit information
+              collection. It will interact with the patient agent to gather relevant data.
+              To provide additional context, MedGemma also has access to information from the patient's EHR (in FHIR format).
+              However, MedGemma is not provided the specific diagnois ({selectedCondition}).
+              MedGemma's goal is to gather details about symptoms, relevant history,
+              and current concerns to generate a comprehensive pre-visit report. 
+            </div>
+          </div>
+          <div className="dialog-box">
+            <div className="dialog-title-text">
+              Patient persona: {selectedPatient.name}
+            </div>
+            <div className="dialog-subtitle">
+              Simulated by:{" "}Gemini 2.5 Flash
+            </div>
+            <img
+              src={selectedPatient.headshot}
+              alt="Patient Avatar"
+              className="patient-avatar"
+            />
+            <div className="dialog-body-scrollable">
+              Gemini is provided a persona and information to play the role of the patient, {selectedPatient.name}.
+              In this simulation, the patient agent does not know their diagnosis,
+              but is experiencing related symptoms and concerns that can be shared during the interview. 
+              To simulate a real-world situation with confounding information, additional information unrelated to the presenting condition has also been provided. 
+            </div>
+          </div>
+        </div>
+        <div className="report-notice">
+          As the conversation develops, MedGemma <span className="highlight">creates and continually updates
+          a real-time pre-visit report</span> capturing relevant
+          information. Following pre-visit report generation, an evaluation is available. The purpose of this evaluation is to provide the viewer insights into quality of the output.
+          For this evaluation, MedGemma is provided the previously unknown reference diagnosis, and is prompted to generate a 
+          <span className="highlight">self evaluation that highlights strengths as well opportunities where the conversation and report could have been improved.</span>
+        </div>
+        <button className="info-button" onClick={onStart}>
+          Start conversation
+        </button>
+      </div>
+      <DetailsPopup
+        isOpen={isDetailsPopupOpen}
+        onClose={() => setIsDetailsPopupOpen(false)}
+      />
+    </div>
+  );
+};
+
+export default RolePlayDialogs;

frontend/src/components/WelcomePage/WelcomePage.css

@@ -0,0 +1,144 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+body:has(.welcome) {
+    background-color: white;
+}
+
+.info-page-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    padding: 40px;
+    max-width: 1300px;
+    margin: auto;
+}
+
+.info-content {
+    flex: 1;
+    min-width: 500px;
+    max-width: 1000px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    font-size: 18px;
+}
+
+.info-header {
+    margin-bottom: 10px;
+}
+
+.title-header {
+    font-family: 'Google Sans', sans-serif;
+    font-size: 32px;
+    font-weight: 500;
+    font-style: normal;
+}
+
+.welcome .medgemma-logo {
+    width: 130px;
+    align-self: flex-end;
+    margin-top: 10px;
+    margin-right: 10px;
+}
+
+.info-button {
+    background-color: #C2E7FF;
+}
+
+.info-disclaimer-text {
+    font-family: 'Google Sans', sans-serif;
+    color: #333;
+    line-height: 1.5;
+    margin: 0;
+    font-size: 14px;
+}
+
+.info-disclaimer-title {
+    border-radius: 14.272px;
+    border: 1.359px solid #F1E161;
+    background: #F1E161;
+    mix-blend-mode: multiply;
+    padding: 0 5px;
+}
+
+.graphics {
+    position: relative;
+    min-width: 250px;
+    max-width: 450px;
+    flex: 0.5;
+    aspect-ratio: 1.2 / 1;
+}
+
+@media (max-width: 900px) {
+    .info-page-container {
+        flex-direction: column;
+        padding: 20px;
+        margin: 10px;
+    }
+
+    .info-content {
+        max-width: 100%;
+        align-items: center;
+        text-align: center;
+    }
+
+    .info-button {
+        align-self: center;
+    }
+
+    .info-header {
+        text-align: center;
+    }
+
+    .title-header {
+        font-size: 36px;
+    }
+
+    .info-text {
+        font-size: 16px;
+    }
+    .graphics {
+        min-width: 200px;
+    }    
+}
+
+
+
+.graphics-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 80%;
+}
+
+.graphics-bottom {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    opacity: 0;
+    animation: fadeIn 1s ease forwards;
+    width: 62%;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}

frontend/src/components/WelcomePage/WelcomePage.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import './WelcomePage.css';
+
+const WelcomePage = ({ onSwitchPage, onBack }) => {
+  return (
+    <div className="welcome page">
+      {onBack && (
+        <div className="headerButtonsContainer" style={{ padding: '20px 40px 0 40px' }}>
+          <button className="back-button" onClick={onBack} id="back-button-dashboard">
+            <span className="material-icons back-button-icon">keyboard_arrow_left</span>
+            <span>Back to Dashboard</span>
+          </button>
+        </div>
+      )}
+      
+      <img src="/assets/medgemma.avif" alt="MedGemma Logo" className="medgemma-logo" />
+      
+      <div className="info-page-container">
+        <div className="graphics">
+          <img className="graphics-top" src="/assets/welcome_top_graphics.svg" alt="Welcome top graphics" />
+          <img className="graphics-bottom" src="/assets/welcome_bottom_graphics.svg" alt="Welcome bottom graphics" />
+        </div>
+        <div className="info-content">
+          <div className="info-header">
+            <span className="title-header">Simulated Pre-visit Intake Demo</span>
+          </div>
+          <div className="info-text">
+            Healthcare providers often need to gather patient information before a visit. 
+            This demo illustrates how MedGemma could be used in an application to streamline pre-visit information collection and utilization. 
+            <br /><br/>
+            First, a pre-visit AI agent built with MedGemma asks questions to gather information.
+            After it has identified and collected relevant information, the demo application generates a pre-visit report. 
+            <br /><br/>
+            This type of intelligent pre-visit report can help providers be more efficient and effective while also providing an improved experience 
+            for patients relative to traditional intake forms.
+            <br /><br/>
+            Lastly, you can view an evaluation of the pre-visit report which provides insights into the quality of the output. 
+            For this evaluation, MedGemma is provided the reference diagnosis, allowing "self-evaluation" that highlights both strengths and what it could have done better.
+          </div>
+          <div className="info-disclaimer-text">
+            <span className="info-disclaimer-title">Disclaimer</span> This
+            demonstration is for illustrative purposes only and does not represent a finished or approved
+            product. It is not representative of compliance to any regulations or standards for
+            quality, safety or efficacy. Any real-world application would require additional development,
+            training, and adaptation. The experience highlighted in this demo shows MedGemma's baseline
+            capability for the displayed task and is intended to help developers and users explore possible
+            applications and inspire further development.
+          </div>
+          <button className="info-button" onClick={onSwitchPage}>Select Patient</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomePage;

frontend/src/index.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './shared/Style.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);

frontend/src/shared/Style.css

@@ -0,0 +1,217 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:root {
+  --sushruta-bg-primary: #0a0a1a;
+  --sushruta-bg-secondary: #1a1a2e;
+  --sushruta-bg-card: rgba(255, 255, 255, 0.05);
+  --sushruta-text-primary: #e0e0e0;
+  --sushruta-text-secondary: #a0a0b0;
+  --sushruta-accent-blue: #4f8fff;
+  --sushruta-accent-teal: #00d4aa;
+  --sushruta-accent-purple: #8b5cf6;
+  --sushruta-border-glow: rgba(79, 143, 255, 0.3);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+    --image-fixed-width: 280px;
+    height: 100%;
+}
+
+#root {
+  height: 100%;
+  margin: auto;
+  width: 100%;
+}
+
+body {
+  font-family: "Google Sans Text", sans-serif;
+  line-height: 1.6;
+  background-color: #f4f4f4;
+  color: #333;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  height: 100%;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+}
+
+.headerButtonsContainer {
+	 display: flex;
+	justify-content: space-between;
+	width: -webkit-fill-available;
+  padding: 20px;
+}
+
+.info-button, .back-button, .details-button {
+    font-family: 'Google Sans Text', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 6px 12px;
+    border-radius: 100px;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.3s ease;
+    align-self: flex-start;
+    border-width: 1px;
+}
+
+.back-button, .details-button  {
+  padding: 8px 12px;
+  z-index: 10;
+  color: black;
+  background-color: transparent;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 100px;
+  border: 1px solid rgba(196, 199, 197);
+}
+
+.back-button-icon {
+  margin-right: 4px;
+}
+
+.back-button-icon {
+  font-size: 14px;
+}
+
+.code-block-icon {
+  background-color: rgba(0, 74, 119);
+  color: rgba(194, 231, 255);
+  font-size: 14px;
+}
+
+.details-button {
+	background-color: rgba(194, 231, 255);
+  color: rgba(0, 74, 119);
+  border: none;
+}
+
+.info-button {
+    background-color: #0B57D0;
+    color: white;
+    padding: 12px;
+}
+
+.info-button:disabled {
+  background: #aaa;
+  cursor: not-allowed;
+}
+
+.info-button:hover:not(:disabled) {
+  background: #005fa3;
+}
+
+.frame {
+	border-radius: 28px;
+	border: 2px solid #E9E9E9;
+	background: #FFF;
+	padding: 20px 50px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-around;
+  margin: 0 10px;
+  min-height: 0;
+  width: fit-content;
+}
+
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+}
+
+.popup-content {
+  background: #ffffff;
+  padding: 2rem;
+  border-radius: 12px;
+  max-width: 800px;
+  width: 90%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e0e0e0;
+  animation: popup-fade-in 0.3s ease-out;
+}
+
+@keyframes popup-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.popup-content h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #333;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.popup-content p {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #555;
+  text-align: left;
+  margin-bottom: 1.5rem;
+}
+
+.popup-button {
+  display: block;
+  padding: 12px 20px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  background-color: #1a73e8;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.popup-button:hover {
+  background-color: #185abc;
+}
+
+.hf-logo {
+    vertical-align: middle;
+    width: 30px;
+}