Add initial app code

.dockerignore

@@ -0,0 +1,9 @@
+frontend/build
+frontend/node_modules
+env.list
+__pycache__
+.env*
+
+# Git files
+.git
+.gitignore

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/public/assets/jordan.mp4 filter=lfs diff=lfs merge=lfs -text
+frontend/public/assets/sacha.mp4 filter=lfs diff=lfs merge=lfs -text
+frontend/public/assets/alex.mp4 filter=lfs diff=lfs merge=lfs -text

.github/workflows/ci.yml

@@ -0,0 +1,42 @@
+name: Python Application CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  lint-and-format:
+    name: Lint & Format Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.9'
+
+      - name: Install pre-commit
+        run: pip install pre-commit
+
+      - name: Run linters and formatters
+        run: pre-commit run --all-files
+
+  test:
+    name: Run Backend Tests
+    runs-on: ubuntu-latest
+    needs: lint-and-format
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Python and install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt -r requirements-dev.txt
+
+      - name: Run tests with pytest
+        run: pytest

.gitignore

@@ -0,0 +1,24 @@
+# Environments
+.env
+.env.*
+!/.env.example
+env.list
+
+# Python dependencies and artifacts
+.venv/
+venv/
+env/
+__pycache__/
+*.pyc
+
+# Frontend dependencies and artifacts
+frontend/node_modules/
+frontend/build/
+frontend/dist/
+frontend/.pnp
+frontend/.pnp.js
+frontend/coverage/
+
+# IDE / Editor specific
+.vscode/
+.idea/

.pre-commit-config.yaml

@@ -0,0 +1,24 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+-   repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.6.0
+    hooks:
+    -   id: trailing-whitespace
+    -   id: end-of-file-fixer
+    -   id: check-yaml
+    -   id: check-added-large-files
+
+-   repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.4.4
+    hooks:
+    -   id: ruff
+        args: [--fix, --exit-non-zero-on-fix]
+    -   id: ruff-format
+
+-   repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8
+    hooks:
+    -   id: prettier
+        # Run prettier on frontend file types
+        types_or: [javascript, jsx, ts, tsx, css, scss, html, json, markdown]

Dockerfile

@@ -0,0 +1,34 @@
+# Stage 1: Build the frontend
+FROM node:18-alpine AS builder
+
+# Set the working directory
+WORKDIR /app/frontend
+
+# Copy package files and install dependencies
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm install
+
+# Copy the rest of the frontend code and build it
+COPY frontend/ ./
+RUN npm run build
+
+# ---
+
+# Stage 2: Build the final Python image
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Copy Python dependency file and install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the built frontend assets from the 'builder' stage
+COPY --from=builder /app/frontend/build ./static
+
+# Copy your backend application code
+COPY . .
+
+# Expose the port your app will run on and define the startup command
+EXPOSE 8000
+CMD ["gunicorn", "-w", "4", "-k", "uvicorn.workers.UvicornWorker", "app.main:app", "--bind", "0.0.0.0:8000"]

README.md

@@ -1,10 +1,11 @@
 ---
-title: Docappointemet
-emoji: 🐠
-colorFrom: gray
-colorTo: green
+title: Appoint-Ready
+emoji: 🗓️
+colorFrom: green
+colorTo: blue
 sdk: docker
-pinned: false
+app_port: 8000
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Appoint-Ready
+This is a web application for scheduling appointments.

__init__.py

@@ -0,0 +1,14 @@
+# 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.
+

app.py

@@ -0,0 +1,86 @@
+# 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.
+
+from evaluation import evaluate_report, evaluation_prompt
+from flask import Flask, send_from_directory, request, jsonify, Response, stream_with_context, send_file
+from flask_cors import CORS
+import os, time, json, re
+from gemini import gemini_get_text_response
+from interview_simulator import stream_interview
+from cache import create_cache_zip
+from medgemma import medgemma_get_text_response
+
+app = Flask(__name__, static_folder=os.environ.get("FRONTEND_BUILD", "frontend/build"), static_url_path="/")
+CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})
+
+@app.route("/")
+def serve():
+    """Serves the main index.html file."""
+    return send_from_directory(app.static_folder, "index.html")
+
+
+@app.route("/api/stream_conversation", methods=["GET"])
+def stream_conversation():
+    """Streams the conversation with the interview simulator."""
+    patient = request.args.get("patient", "Patient")
+    condition = request.args.get("condition", "unknown condition")
+    
+    def generate():
+        try:
+            for message in stream_interview(patient, condition):
+                yield f"data: {message}\n\n"
+        except Exception as e:
+            yield f"data: Error: {str(e)}\n\n"
+            raise e
+            
+    return Response(stream_with_context(generate()), mimetype="text/event-stream")
+
+@app.route("/api/evaluate_report", methods=["POST"])
+def evaluate_report_call():
+    """Evaluates the provided medical report."""
+    data = request.get_json()
+    report = data.get("report", "")
+    if not report:
+        return jsonify({"error": "Report is required"}), 400
+    condition = data.get("condition", "")
+    if not condition:
+        return jsonify({"error": "Condition is required"}), 400    
+    
+    evaluation_text = evaluate_report(report, condition)
+    
+    return jsonify({"evaluation": evaluation_text})
+
+
+@app.route("/api/download_cache")
+def download_cache_zip():
+    """Creates a zip file of the cache and returns it for download."""
+    zip_filepath, error = create_cache_zip()
+    if error:
+        return jsonify({"error": error}), 500
+    if not os.path.isfile(zip_filepath):
+        return jsonify({"error": f"File not found: {zip_filepath}"}), 404
+    return send_file(zip_filepath, as_attachment=True)
+
+
+@app.route("/<path:path>")
+def static_proxy(path):
+    """Serves static files and defaults to index.html for unknown paths."""
+    file_path = os.path.join(app.static_folder, path)
+    if os.path.isfile(file_path):
+        return send_from_directory(app.static_folder, path)
+    else:
+        return send_from_directory(app.static_folder, "index.html")
+        
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860, threaded=True)

auth.py

@@ -0,0 +1,77 @@
+# 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 json
+import datetime
+from google.oauth2 import service_account
+import google.auth.transport.requests
+
+def create_credentials(secret_key_json) -> service_account.Credentials:
+  """Creates Google Cloud credentials from the provided service account key.
+
+  Returns:
+      service_account.Credentials: The created credentials object.
+
+  Raises:
+      ValueError: If the environment variable is not set or is empty, or if the
+          JSON format is invalid.
+  """
+
+  if not secret_key_json:
+    raise ValueError("Userdata variable 'GCP_MEDGEMMA_SERVICE_ACCOUNT_KEY' is not set or is empty.")
+  try:
+    service_account_info = json.loads(secret_key_json)
+  except (SyntaxError, ValueError) as e:
+    raise ValueError("Invalid service account key JSON format.") from e
+  return service_account.Credentials.from_service_account_info(
+    service_account_info,
+    scopes=['https://www.googleapis.com/auth/cloud-platform']
+  )
+
+def refresh_credentials(credentials: service_account.Credentials) -> service_account.Credentials:
+  """Refreshes the provided Google Cloud credentials if they are about to expire
+    (within 5 minutes) or if they don't have an expiry time set.
+
+  Args:
+      credentials: The credentials object to refresh.
+
+  Returns:
+      service_account.Credentials: The refreshed credentials object.
+  """
+  if credentials.expiry:
+    expiry_time = credentials.expiry.replace(tzinfo=datetime.timezone.utc)
+    # Calculate the time remaining until expiration
+    time_remaining = expiry_time - datetime.datetime.now(datetime.timezone.utc)
+    # Check if the token is about to expire (e.g., within 5 minutes)
+    if time_remaining < datetime.timedelta(minutes=5):
+        request = google.auth.transport.requests.Request()
+        credentials.refresh(request)
+  else:
+    # If no expiry is set, always attempt to refresh (e.g., for certain credential types)
+    request = google.auth.transport.requests.Request()
+    credentials.refresh(request)
+  return credentials
+
+def get_access_token_refresh_if_needed(credentials: service_account.Credentials) -> str:
+  """Gets the access token from the credentials, refreshing them if needed.
+
+  Args:
+      credentials: The credentials object.
+
+  Returns:
+      str: The access token.
+  """
+  credentials = refresh_credentials(credentials)
+  return credentials.token
+

cache.py

@@ -0,0 +1,67 @@
+# 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.
+
+from diskcache import Cache
+import os
+import shutil
+import tempfile
+import zipfile
+import logging
+
+cache = Cache(os.environ.get("CACHE_DIR", "/cache"))
+# Print cache statistics after loading
+try:
+    item_count = len(cache)
+    size_bytes = cache.volume()
+    print(f"Cache loaded: {item_count} items, approx {size_bytes} bytes")
+except Exception as e:
+    print(f"Could not retrieve cache statistics: {e}")
+
+def create_cache_zip():
+    temp_dir = tempfile.gettempdir()
+    base_name = os.path.join(temp_dir, "cache_archive") # A more descriptive name
+    archive_path = base_name + ".zip"
+    cache_directory = os.environ.get("CACHE_DIR", "/cache")
+    
+    if not os.path.isdir(cache_directory):
+        logging.error(f"Cache directory not found at {cache_directory}")
+        return None, f"Cache directory not found on server: {cache_directory}"
+    
+    logging.info("Forcing a cache checkpoint for safe backup...")
+    try:
+        # Open and immediately close a connection.
+        # This forces SQLite to perform a checkpoint, merging the .wal file
+        # into the main .db file, ensuring the on-disk files are consistent.
+        with Cache(cache_directory) as temp_cache:
+            temp_cache.close()
+        
+        # Clean up temporary files before archiving.
+        tmp_path = os.path.join(cache_directory, 'tmp')
+        if os.path.isdir(tmp_path):
+            logging.info(f"Removing temporary cache directory: {tmp_path}")
+            shutil.rmtree(tmp_path)
+
+        logging.info(f"Checkpoint complete. Creating zip archive of {cache_directory} to {archive_path}")
+        with zipfile.ZipFile(archive_path, 'w', zipfile.ZIP_DEFLATED, compresslevel=9) as zipf:
+            for root, _, files in os.walk(cache_directory):
+                for file in files:
+                    file_path = os.path.join(root, file)
+                    arcname = os.path.relpath(file_path, cache_directory)
+                    zipf.write(file_path, arcname)
+        logging.info("Zip archive created successfully.")
+        return archive_path, None
+        
+    except Exception as e:
+        logging.error(f"Error creating zip archive of cache directory: {e}", exc_info=True)
+        return None, f"Error creating zip archive: {e}"

cache_archive.zip

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

evaluation.py

@@ -0,0 +1,69 @@
+# 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 re
+from medgemma import medgemma_get_text_response
+
+
+def evaluation_prompt(defacto_condition):
+    # Returns a detailed prompt for the LLM to evaluate a pre-visit report for a specific condition
+    return f"""
+Your role is to evaluate the helpfulness of a pre-visit report, which is based on a pre-visit patient interview and existing health records.
+The patient was de facto diagnosed condition: "{defacto_condition}" which was not known at the time of the interview.
+
+List the specific elements in the previsit report text that are helpful or necessary for the PCP to diagnose the de facto diagnosed condition: "{defacto_condition}". 
+
+This include pertinet positives or negatives. 
+List critical elements that are MISSING from the previsit report text that would have been helpful for the PCP to diagnose the de facto diagnosed condition. 
+This include pertinet positives or negatives that were missing from the report. 
+(keep in mind that the condition "{defacto_condition}" was not known at the time)
+
+The evaluation output should be in HTML format.
+
+REPORT TEMPLATE START
+
+<h3 class="helpful">Helpful Facts:</h3>
+
+<h3 class="missing">What wasn't covered but would be helpful:</h3>
+
+REPORT TEMPLATE END
+"""
+
+def evaluate_report(report, condition):
+    """Evaluate the pre-visit report based on the condition using MedGemma LLM."""
+    evaluation_text = medgemma_get_text_response([
+        {
+            "role": "system",
+            "content": [
+                {
+                    "type": "text",
+                    "text": f"{evaluation_prompt(condition)}"
+                }
+            ]
+        },
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": f"Here is the report text:\n{report}"
+                }
+            ]
+        },        
+    ])
+
+    # Remove any LLM "thinking" blocks (special tokens sometimes present in output)
+    evaluation_text = re.sub(r'<unused94>.*?<unused95>', '', evaluation_text, flags=re.DOTALL)
+
+    return evaluation_text

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": "[email protected]",
+            "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,29 @@
+<!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>AppointReady</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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,88 @@
+/**
+ * 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 WelcomePage from './components/WelcomePage/WelcomePage';
+import PatientBuilder from './components/PatientBuilder/PatientBuilder';
+import RolePlayDialogs from './components/RolePlayDialogs/RolePlayDialogs';
+import Interview from './components/Interview/Interview';
+import PreloadImages from './components/PreloadImages';
+
+const App = () => {
+  const [currentPage, setCurrentPage] = useState('welcome');
+  const [selectedPatient, setSelectedPatient] = useState(null);
+  const [selectedCondition, setSelectedCondition] = useState(null);
+
+  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 === 'welcome' ? (
+        <WelcomePage
+          onSwitchPage={handleSwitchPage}
+          setSelectedPatient={setSelectedPatient}
+          setSelectedCondition={setSelectedCondition}
+        />
+      ) : currentPage === 'patientBuilder' ? (
+        <PatientBuilder
+          selectedPatient={selectedPatient}
+          selectedCondition={selectedCondition}
+          setSelectedPatient={setSelectedPatient}
+          setSelectedCondition={setSelectedCondition}
+          onNext={handleSwitchToRolePlayDialogs}
+          onBack={() => setCurrentPage('welcome')} // Back to WelcomePage
+        />
+      ) : currentPage === 'rolePlayDialogs' ? (
+        <RolePlayDialogs
+          selectedPatient={selectedPatient}
+          selectedCondition={selectedCondition}
+          onStart={handleSwitchToInterview}
+          onBack={() => setCurrentPage('patientBuilder')} // Back to PatientBuilder
+        />
+      ) : currentPage === 'interview' ? (
+        <Interview
+          selectedPatient={selectedPatient}
+          selectedCondition={selectedCondition}
+          onBack={() => setCurrentPage('rolePlayDialogs')} // Back to 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,282 @@
+/**
+ * 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: "***";
+}
+
+

frontend/src/components/Interview/Interview.js

@@ -0,0 +1,491 @@
+/**
+ * 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;
+      }
+      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;
+                <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>
+                {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/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,235 @@
+/**
+ * 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"
+    ) {
+      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";
+              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/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 opporutunities 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,62 @@
+/**
+ * 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 }) => {
+  return (
+    <div className="welcome page">
+      <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 appointments. 
+            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,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.
+ */
+
+* {
+  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;
+}

gemini.py

@@ -0,0 +1,59 @@
+# 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 os
+import requests
+from cache import cache  # new import replacing duplicate cache initialization
+
+GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")
+
+# Decorate the function to cache its results indefinitely.
+@cache.memoize()
+def gemini_get_text_response(prompt: str,
+                                    stop_sequences: list = None,
+                                    temperature: float = 0.1,
+                                    max_output_tokens: int = 4000,
+                                    top_p: float = 0.8,
+                                    top_k: int = 10):
+    """
+    Makes a text generation request to the Gemini API.
+    """
+
+    api_url = f"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key={GEMINI_API_KEY}"
+    headers = {
+        'Content-Type': 'application/json'
+    }
+
+    data = {
+        "contents": [
+            {
+                "parts": [
+                    {
+                        "text": prompt
+                    }
+                ]
+            }
+        ],
+        "generationConfig": {
+            "stopSequences": stop_sequences or ["Title"],
+            "temperature": temperature,
+            "maxOutputTokens": max_output_tokens,
+            "topP": top_p,
+            "topK": top_k
+        }
+    }
+
+    response = requests.post(api_url, headers=headers, json=data)
+    response.raise_for_status()  # Raise an exception for bad status codes
+    return response.json()["candidates"][0]["content"]["parts"][0]["text"]