Initial commit

.dockerignore

@@ -0,0 +1,2 @@
+__pycache__/
+env.list

.gitattributes

@@ -0,0 +1,37 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz 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
+static/images/*.jpg filter=lfs diff=lfs merge=lfs -text
+static/images/*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,5 @@
+env.list
+__pycache__
+**/__pycache__
+langextract/__pycache__
+.git

Dockerfile

@@ -0,0 +1,56 @@
+# 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 python:3.10-slim
+
+# Set an environment variable for unbuffered python output (good for logging)
+# and define the cache directory path
+ENV PYTHONUNBUFFERED=1
+ENV CACHE_DIR=/data/cache
+
+# Install system dependencies first, as they change less frequently
+RUN apt-get update && \
+    apt-get install -y fonts-ocr-a fonts-ocr-b unzip --no-install-recommends && \
+    rm -rf /var/lib/apt/lists/*
+
+# Set up a new user named "user" with user ID 1000
+# -m creates the home directory /home/user
+# -s /bin/bash sets a default shell (good practice for debugging or execing into the container)
+RUN useradd -m -s /bin/bash -u 1000 user
+
+WORKDIR /app
+
+COPY --chown=user:user . .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Run tests after installing dependencies
+RUN python -m unittest discover tests
+
+RUN mkdir -p $CACHE_DIR
+RUN chmod -R 777 $CACHE_DIR
+RUN unzip -o ./default_cache/radexplain-cache.zip -d $CACHE_DIR
+
+USER user
+
+EXPOSE 7860
+
+CMD ["gunicorn", \
+     "--bind", "0.0.0.0:7860", \
+     "--timeout", "600", \
+     "--worker-class", "gthread", \
+     "--workers", "1", \
+     "--threads", "4", \
+     "--preload", \
+     "app:app"]

README.md

@@ -0,0 +1,32 @@
+---
+title: MedGemma - Radiology Explainer Demo
+emoji: 🩺
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+license: apache-2.0
+short_description: Radiology Image & Report Explainer Demo - Buit with MedGemma
+models:
+  - google/medgemma-4b-it
+secrets:
+  - HF_TOKEN
+---
+
+# Radiology Image & Report Explainer Demo - Buit with MedGemma
+
+Consider an educational scenario where interacting with a radiology image can
+substantially improve learning. This demonstration shows how MedGemma might be built upon to provide a useful tool for exploring radiology images and associated reports by translating them into simple language, with visual cues to highlight the relevant areas of the image.
+
+Powered by AI (MedGemma-4B Multimodel), this space analyzes both a sample radiology report and its corresponding Chest X-Ray/CT image. Click on any sentence in the report, and you'll receive an AI-generated explanation tailored to that specific text and visual context. When relevant, the explanation will also pinpoint the corresponding area on the X-ray/CT image.
+
+This demonstration is for illustrative purposes only and does not represent a finished or approved product. It is not representative of compliance to any harmonized 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.
+
+**Note:** This space uses a HuggingFace endpoint that may scale down to zero due to inactivity. If this occurs, please allow approximately 10 minutes for the endpoint to restart. As an alternative, the model can be deployed on ModelGarden (see the link below). 
+
+# Links
+* MedGemma HuggingFace - https://huggingface.co/collections/google/medgemma-release-680aade845f90bec6a3f60c4
+* MedGemma DevSite - https://developers.google.com/health-ai-developer-foundations/medgemma
+* MedGemma ModelGarden - https://console.cloud.google.com/vertex-ai/publishers/google/model-garden/medgemma
+* HAI-DEF models - https://developers.google.com/health-ai-developer-foundations

app.py

@@ -0,0 +1,66 @@
+# 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 logging
+import sys
+from flask import Flask
+
+# Import configurations and initializers first
+import config # Use relative import assuming app.py is in the rad_explain package
+import llm_client
+from routes import main_bp
+from cache_store import cache
+
+def create_app():
+    """Creates and configures the Flask application."""
+    app = Flask(__name__, static_folder=config.STATIC_DIR)
+
+    # --- Configure Logging ---
+    # Basic config should be done before creating the app or registering blueprints
+    # if those modules rely on logging during import time.
+    logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - [%(name)s] - %(message)s')
+    logger = logging.getLogger(__name__)
+
+    # --- Check Configuration and Initialize Services ---
+    if not config.HF_TOKEN:
+        logger.error("HF_TOKEN environment variable not set.")
+        sys.exit("Exiting: HF_TOKEN not set.")
+    if not config.MEDGEMMA_ENDPOINT_URL:
+        logger.error("MEDGEMMA_ENDPOINT_URL environment variable not set.")
+        sys.exit("Exiting: MEDGEMMA_ENDPOINT_URL not set.")
+    else:
+        logger.info(f"Using LLM API Base URL: {config.MEDGEMMA_ENDPOINT_URL}")
+
+    # Initialize LLM Client
+    llm_client.init_llm_client()
+    if not llm_client.is_initialized():
+         logger.warning("LLM client failed to initialize. API calls will fail.")
+         sys.exit("Exiting: LLM client initialization failed.")
+
+    # Register Blueprints
+    app.register_blueprint(main_bp)
+
+    return app
+
+# Create the application instance using the factory function
+# This makes the 'app' instance available at the module level for WSGI servers
+app = create_app()
+
+if __name__ == '__main__':
+    # This block now primarily focuses on running the app and pre-run checks/setup
+    logger = logging.getLogger(__name__)
+
+    # Run the Flask development server
+    app.run(host='0.0.0.0', port=7860, debug=True)

cache_store.py

@@ -0,0 +1,20 @@
+# 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 diskcache
+import os
+
+# Use the CACHE_DIR environment variable, defaulting to /app/cache_dir if not set.
+cache_directory = os.getenv('CACHE_DIR', '/app/cache_dir')
+cache = diskcache.Cache(cache_directory)

config.py

@@ -0,0 +1,107 @@
+# 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
+from pathlib import Path
+import csv # Import the csv module
+import logging
+
+# --- Configuration ---
+# Configure basic logging (optional, adjust as needed)
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+# API Configuration
+HF_TOKEN = os.environ.get("HF_TOKEN", None)
+MEDGEMMA_ENDPOINT_URL = os.environ.get("MEDGEMMA_ENDPOINT_URL", None)
+
+# --- Paths using pathlib ---
+# Determine the base directory of the application
+BASE_DIR = Path(__file__).parent.resolve() # Use resolve() for absolute path
+STATIC_DIR = BASE_DIR / 'static'
+
+# --- Load available report/image pairs from CSV ---
+AVAILABLE_REPORTS = []
+MANIFEST_CSV_PATH = STATIC_DIR / 'reports_manifest.csv'
+
+if MANIFEST_CSV_PATH.is_file():
+    try:
+        with open(MANIFEST_CSV_PATH, mode='r', encoding='utf-8') as csvfile:
+            reader = csv.DictReader(csvfile)
+            # Expected CSV headers: 'image_type', 'case_display_name', 'image_path', 'report_path'
+            required_headers = {'case_display_name', 'image_path', 'report_path'}
+            if not required_headers.issubset(reader.fieldnames):
+                logger.error(
+                    f"CSV file {MANIFEST_CSV_PATH} is missing one or more required headers: {required_headers - set(reader.fieldnames)}"
+                )
+            else:
+                for row in reader:
+                    case_name = row['case_display_name']
+                    image_path_from_csv = row['image_path'] # e.g., static/images/report1.jpg
+                    report_path_from_csv = row['report_path'] # e.g., static/reports/report1.txt or empty
+
+                    # Validate image_path_from_csv (must not be empty)
+                    if not image_path_from_csv:
+                        logger.warning(f"Empty image_path in CSV for case '{case_name}'. Skipping this entry.")
+                        continue
+
+                    # Construct absolute path for image file validation (paths from CSV are relative to BASE_DIR)
+                    abs_image_path_to_check = BASE_DIR / image_path_from_csv
+                    if not abs_image_path_to_check.is_file():
+                        logger.warning(f"Image file not found for case '{case_name}' at '{abs_image_path_to_check}'. Skipping this entry.")
+                        continue
+
+
+                    image_file_for_config = image_path_from_csv
+
+                    report_file_for_config = "" # Default to empty if no report or error
+                    if report_path_from_csv: # Report path is optional
+                        # Construct absolute path for report file validation (paths from CSV are relative to BASE_DIR)
+                        abs_report_path_to_check = BASE_DIR / report_path_from_csv
+                        if not abs_report_path_to_check.is_file():
+                            logger.warning(
+                                f"Report file specified for case '{case_name}' at '{abs_report_path_to_check}' not found. "
+                                f"Proceeding without report file for this entry."
+                            )
+                            # report_file_for_config remains ""
+                        else:
+                            # The file (BASE_DIR / report_path_from_csv) exists.
+                            # Now, ensure report_path_from_csv string itself starts with "static/"
+                            # as per the assumption about CSV content.
+                            if report_path_from_csv.startswith('static/') or report_path_from_csv.startswith('static\\'):
+                                # Path is well-formed (starts with static/) and file exists.
+                                # Store the path as is (e.g., "static/reports/report1.txt").
+                                report_file_for_config = report_path_from_csv
+                            else:
+                                logger.warning(
+                                    f"Report path '{report_path_from_csv}' for case '{case_name}' in CSV "
+                                    f"is malformed (does not start with 'static/'). Treating as if no report path was specified."
+                                )
+                                # report_file_for_config remains ""
+                    AVAILABLE_REPORTS.append({
+                        "name": case_name,
+                        "image_file": image_file_for_config, # static/images/report1.jpg
+                        "report_file": report_file_for_config, # static/reports/report1.txt or ""
+                        "image_type": row['image_type']
+                    })
+        AVAILABLE_REPORTS.sort(key=lambda x: x['name'])
+        logger.info(f"Loaded {len(AVAILABLE_REPORTS)} report/image pairs from CSV.")
+
+    except Exception as e:
+        logger.error(f"Error reading or processing CSV file {MANIFEST_CSV_PATH}: {e}", exc_info=True)
+else:
+    logger.warning(f"Manifest CSV file not found at {MANIFEST_CSV_PATH}. AVAILABLE_REPORTS will be empty.")
+
+# --- Optional: Define a default report if needed ---
+DEFAULT_REPORT_INFO = AVAILABLE_REPORTS[0] if AVAILABLE_REPORTS else None

default_cache/radexplain-cache.zip

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

llm_client.py

@@ -0,0 +1,87 @@
+# 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 logging
+import requests
+import config
+
+logger = logging.getLogger(__name__)
+
+_api_key = None
+_endpoint_url = None
+_initialized = False
+
+def init_llm_client():
+    """Initializes LLM client configuration by loading from config."""
+    global _api_key, _endpoint_url, _initialized
+    if config.HF_TOKEN and config.MEDGEMMA_ENDPOINT_URL:
+        _api_key = config.HF_TOKEN
+        _endpoint_url = config.MEDGEMMA_ENDPOINT_URL
+        _initialized = True
+        logger.info("LLM client configured successfully.")
+    else:
+        _api_key = None
+        _endpoint_url = None
+        logger.error("LLM client could not be configured due to missing API key or endpoint URL.")
+
+def is_initialized():
+    return _initialized
+
+def make_chat_completion_request(
+    model: str,
+    messages: list,
+    temperature: float,
+    max_tokens: int,
+    stream: bool,
+    top_p: float | None = None,
+    seed: int | None = None,
+    stop: list[str] | str | None = None,
+    frequency_penalty: float | None = None,
+    presence_penalty: float | None = None
+):
+    """
+    Makes a chat completion request to the configured LLM API.
+    """
+    if not _initialized:
+        logger.error("LLM client not initialized.")
+        raise RuntimeError("LLM client not initialized.")
+
+    headers = {
+        "Authorization": f"Bearer {_api_key}",
+        "Content-Type": "application/json",
+    }
+    payload = {
+        "model": model,
+        "messages": messages,
+        "temperature": temperature,
+        "max_tokens": max_tokens,
+        "stream": stream,
+    }
+    if top_p is not None: payload["top_p"] = top_p
+    if seed is not None: payload["seed"] = seed
+    if stop is not None: payload["stop"] = stop
+    if frequency_penalty is not None: payload["frequency_penalty"] = frequency_penalty
+    if presence_penalty is not None: payload["presence_penalty"] = presence_penalty
+
+    temp_url = _endpoint_url.rstrip('/')
+    if temp_url.endswith("/v1/chat/completions"):
+        full_url = temp_url
+    elif temp_url.endswith("/v1"):
+        full_url = temp_url + "/chat/completions"
+    else:
+        full_url = temp_url + "/v1/chat/completions"
+
+    response = requests.post(full_url, headers=headers, json=payload, stream=stream, timeout=60)
+    response.raise_for_status()
+    return response

requirements.txt

@@ -0,0 +1,5 @@
+flask
+gunicorn
+Pillow
+diskcache
+requests

routes.py

@@ -0,0 +1,242 @@
+# 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 logging
+from flask import Blueprint, render_template, request, jsonify, send_from_directory
+from pathlib import Path
+import shutil # For zipping the cache directory
+import json # For parsing streamed JSON data
+
+import os
+import config
+import utils
+from llm_client import make_chat_completion_request, is_initialized as llm_is_initialized
+from cache_store import cache
+from cache_store import cache_directory
+import requests
+
+logger = logging.getLogger(__name__)
+
+main_bp = Blueprint('main', __name__)
+
+# LLM client is initialized in app.py create_app()
+
+# --- Serve the cache directory as a zip file ---
+@main_bp.route('/download_cache')
+def download_cache_zip():
+    """Zips the cache directory and serves it for download."""
+    zip_filename = "radexplain-cache.zip"
+    # Create the zip file in a temporary directory
+    # Using /tmp is common in containerized environments
+    temp_dir = "/tmp"
+    zip_base_path = os.path.join(temp_dir, "radexplain-cache") # shutil adds .zip
+    zip_filepath = zip_base_path + ".zip"
+
+    # Ensure the cache directory exists before trying to zip it
+    if not os.path.isdir(cache_directory):
+        logger.error(f"Cache directory not found at {cache_directory}")
+        return jsonify({"error": f"Cache directory not found on server: {cache_directory}"}), 500
+
+    try:
+        logger.info(f"Creating zip archive of cache directory: {cache_directory} to {zip_filepath}")
+        shutil.make_archive(
+            zip_base_path, # This is the base name, shutil adds the .zip extension
+            "zip",
+            cache_directory, # This is the root directory to archive
+        )
+        logger.info("Zip archive created successfully.")
+        # Send the file and then clean it up
+        return send_from_directory(temp_dir, zip_filename, as_attachment=True)
+    except Exception as e:
+        logger.error(f"Error creating or sending zip archive of cache directory: {e}", exc_info=True)
+        return jsonify({"error": f"Error creating or sending zip archive: {e}"}), 500
+@main_bp.route('/')
+def index():
+    """Serves the main HTML page."""
+    # The backend now only provides the list of available reports.
+    # The frontend will be responsible for selecting a report,
+    # fetching its details (text, image path), and managing the current state.
+    if not config.AVAILABLE_REPORTS:
+        logger.warning("No reports found in config. AVAILABLE_REPORTS is empty.")
+
+    return render_template(
+        'index.html',
+        available_reports=config.AVAILABLE_REPORTS
+    )
+
+@main_bp.route('/get_report_details/<report_name>')
+def get_report_details(report_name):
+    """Fetches the text content and image path for a given report name."""
+    selected_report_info = next((item for item in config.AVAILABLE_REPORTS if item['name'] == report_name), None)
+
+    if not selected_report_info:
+        logger.error(f"Report '{report_name}' not found when fetching details.")
+        return jsonify({"error": f"Report '{report_name}' not found."}), 404
+
+    report_file = selected_report_info.get('report_file')
+    image_file = selected_report_info.get('image_file') 
+
+    report_text_content = "" # Default to empty if no report file is configured.
+
+    if report_file:
+        actual_server_report_path = config.BASE_DIR / report_file
+
+        try:
+            report_text_content = actual_server_report_path.read_text(encoding='utf-8').strip()
+        except Exception as e:
+            logger.error(f"Error reading report file {actual_server_report_path} for report '{report_name}': {e}", exc_info=True)
+            return jsonify({"error": "Error reading report file."}), 500
+    # If report_file was empty, report_text_content remains "".
+
+    image_type_from_config = selected_report_info.get('image_type')
+    display_image_type = 'Chest X-Ray' if image_type_from_config == 'CXR' else ('CT' if image_type_from_config == 'CT' else 'Medical Image')
+
+    return jsonify({"text": report_text_content, "image_file": image_file, "image_type": display_image_type})
+
+
+
+@main_bp.route('/explain', methods=['POST'])
+def explain_sentence():
+    """Handles the explanation request using LLM API with base64 encoded image."""
+    if not llm_is_initialized():
+         logger.error("LLM client (REST API) not initialized. Cannot process request.")
+         return jsonify({"error": "LLM client (REST API) not initialized. Check API key and base URL."}), 500
+
+    data = request.get_json()
+    if not data or 'sentence' not in data or 'report_name' not in data:
+        logger.warning("Missing 'sentence' or 'report_name' in request payload.")
+        return jsonify({"error": "Missing 'sentence' or 'report_name' in request"}), 400
+
+    selected_sentence = data['sentence']
+    report_name = data['report_name']
+    logger.info(f"Received request to explain: '{selected_sentence}' for report: '{report_name}'")
+
+    # --- Find the selected report info ---
+    selected_report_info = next((item for item in config.AVAILABLE_REPORTS if item['name'] == report_name), None)
+
+    if not selected_report_info:
+        logger.error(f"Report '{report_name}' not found in available reports.")
+        return jsonify({"error": f"Report '{report_name}' not found."}), 404
+
+    image_file = selected_report_info.get('image_file')
+    report_file = selected_report_info.get('report_file')
+    image_type = selected_report_info.get('image_type')
+
+    if not image_file:
+        logger.error(f"Image or report file path (relative to static) missing in config for report '{report_name}'.")
+        return jsonify({"error": f"File configuration missing for report '{report_name}'."}), 500
+
+    # Construct absolute server paths using BASE_DIR as image_file and report_file include "static/"
+    server_image_path = config.BASE_DIR / image_file
+
+    
+    # --- Prepare Base64 Image for API ---
+    if not server_image_path.is_file():
+        logger.error(f"Image file not found at {server_image_path}")
+        return jsonify({"error": f"Image file for report '{report_name}' not found on server."}), 500
+
+    base64_image_data_url = utils.image_to_base64_data_url(str(server_image_path))
+    if not base64_image_data_url:
+        logger.error("Failed to encode image to base64.")
+        return jsonify({"error": "Could not encode image for API request"}), 500
+
+    logger.info("Image successfully encoded to base64 data URL for API.")
+
+    full_report_text = ""
+    if report_file: # Only attempt to read if a report file is configured
+        server_report_path = config.BASE_DIR / report_file
+        try:
+            full_report_text = server_report_path.read_text(encoding='utf-8')
+        except FileNotFoundError:
+            logger.error(f"Report file not found at {server_report_path}")
+            return jsonify({"error": f"Report file for '{report_name}' not found on server."}), 500
+        except Exception as e:
+            logger.error(f"Error reading report file {server_report_path}: {e}", exc_info=True)
+            return jsonify({"error": "Error reading report file."}), 500
+    else: # If report_file is not configured (e.g. empty string from selected_report_info)
+        logger.info(f"No report file configured for report '{report_name}'. Proceeding without full report text for system prompt.")
+
+    system_prompt = (
+        "You are a public-facing clinician. "
+        f"A learning user has provided a sentence from a radiology report and is viewing the accompanying {image_type} image. "
+        "Your task is to explain the meaning of ONLY the provided sentence in simple, clear terms. Explain terminology and abbriviations. Keep it concise. "
+        "Directly address the meaning of the sentence. Do not use introductory phrases like 'Okay' or refer to the sentence itself or the report itself (e.g., 'This sentence means...'). " # noqa: E501
+        f"{f'Crucially, since the user is looking at their {image_type} image, provide guidance on where to look on the image to understand your explanation, if applicable. ' if image_type != 'CT' else ''}"
+        "Do not discuss any other part of the report or any sentences not explicitly provided by the user. Stick to facts in the text. Do not infer anything. \n"
+        "===\n"
+        f"For context, the full REPORT is:\n{full_report_text}"
+    )
+    user_prompt_text = f"Explain this sentence from the radiology report: '{selected_sentence}'"
+
+    messages_for_api = [
+        {"role": "system", "content": system_prompt},
+        {
+            "role": "user",
+            "content": [
+                {"type": "text", "text": user_prompt_text}
+            ]
+        }
+    ]
+
+    cache_key = f"explain::{report_name}::{selected_sentence}"
+    cached_result = cache.get(cache_key)
+    if cached_result:
+        logger.info("Returning cached explanation.")
+        return jsonify({"explanation": cached_result})
+
+    try:
+        logger.info("Sending request to LLM API (REST) with base64 image...")
+        response = make_chat_completion_request(
+            model="tgi",
+            messages=messages_for_api,
+            top_p=None,
+            temperature=0,
+            max_tokens=250,
+            stream=True,
+            seed=None,
+            stop=None,
+            frequency_penalty=None,
+            presence_penalty=None
+        )
+        logger.info("Received response stream from LLM API (REST).")
+
+        explanation_parts = []
+        for line in response.iter_lines():
+            if line:
+                decoded_line = line.decode('utf-8')
+                if decoded_line.startswith('data: '):
+                    json_data_str = decoded_line[len('data: '):].strip()
+                    if json_data_str == "[DONE]":
+                        break
+                    try:
+                        chunk = json.loads(json_data_str)
+                        if chunk.get("choices") and chunk["choices"][0].get("delta") and chunk["choices"][0]["delta"].get("content"):
+                            explanation_parts.append(chunk["choices"][0]["delta"]["content"])
+                    except json.JSONDecodeError:
+                        logger.warning(f"Could not decode JSON from stream chunk: {json_data_str}")
+                        # Depending on API, might need to handle partial JSON or other errors
+                elif decoded_line.strip() == "[DONE]": # Some APIs might send [DONE] without "data: "
+                    break
+
+        explanation = "".join(explanation_parts).strip()
+        if explanation:
+            cache.set(cache_key, explanation, expire=None)
+
+        logger.info("Explanation generated successfully." if explanation else "Empty explanation from API.")
+        return jsonify({"explanation": explanation or "No explanation content received from the API."})
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error during LLM API (REST) call: {e}", exc_info=True)
+        user_error_message = ("Failed to generate explanation. The service might be temporarily unavailable "
+                              "and is now likely starting up. Please try again in a few moments.")
+        return jsonify({"error": user_error_message}), 500

run_local.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+# 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.
+
+set -e
+APP_NAME="radiology-report-explain"
+HOST_APP_DIR="$(pwd)"
+CONTAINER_APP_DIR="/app"
+
+docker rm $APP_NAME || true
+
+# Build the Docker image
+echo "Building Docker image..."
+docker build -t radiology-report-explain .
+
+# Check if the build was successful
+if [ $? -ne 0 ]; then
+  echo "Docker build failed!"
+  exit 1
+fi
+
+# Run the Docker container with a volume
+echo "Running Docker container with volume (attached)..."
+docker run \
+  -p 7860:7860 \
+  --env-file env.list \
+  --name "$APP_NAME" \
+  -v "$HOST_APP_DIR:$CONTAINER_APP_DIR" \
+  -u $(id -u):$(id -g) \
+  radiology-report-explain
+
+# The script will block here, showing the container's output.
+# To stop the container, press Ctrl+C in this terminal.
+
+# The following code will only run after the container exits (e.g., Ctrl+C)
+echo "Docker container has exited."
+echo "To remove the container, run: docker rm $APP_NAME"

static/css/style.css

@@ -0,0 +1,595 @@
+/**
+ * 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.
+ */
+
+/* Basic Reset & Body Style */
+html {
+    height: 100%;
+    --image-fixed-width: 280px;
+}
+
+body {
+    font-family: sans-serif;
+    line-height: 1.6;
+    background-color: #f4f4f4;
+    color: #333;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+}
+
+.main {
+    display: none;  /*display: grid;*/
+    grid-template-columns: 1fr minmax(500px, 800px) minmax(300px, 1fr);
+    grid-template-rows: auto;
+    column-gap: 20px;
+    row-gap: 10px;
+    padding: 30px;
+}
+
+h1,
+h2 {
+    color: #333;
+}
+
+.page-header h1 {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 25px;
+    padding: 20px;
+    flex-grow: 1;
+    justify-content: center;
+}
+
+/* Top Navigation Styles */
+.top-navigation {
+    display: flex;
+    align-items: center;
+    padding-top: 30px;
+    gap: 15px; /* Space between back button and case tabs */
+    border-bottom: 1px solid #E0E0E0; /* Optional: a subtle separator */
+    margin-bottom: 10px;
+    align-items: flex-start;
+    justify-content: center;
+}
+
+.nav-button {
+    display: inline-flex; /* Changed from inline-flex on parent to allow direct styling */
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.nav-button-inner {
+    overflow: hidden;
+    border-radius: 100px; /* Very rounded corners */
+    outline: 1px solid #C4C7C5; /* Outline color */
+    outline-offset: -1px; /* Outline inside */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6px 12px;
+    gap: 8px; /* Increased gap slightly for better visual separation */
+    transition: background-color 0.2s ease;
+}
+
+.nav-button-icon {
+    font-size: 20px; /* Icon size */
+    color: #444746; /* Icon color */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav-button-text {
+    color: #444746; /* Text color */
+    font-size: 14px;
+    font-family: 'Google Sans Text', sans-serif;
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+}
+
+.nav-button-case.active .nav-button-inner,
+.nav-button:hover .nav-button-inner {
+    background-color: rgba(68, 71, 70, 0.10); /* Focused/hover background */
+}
+
+.nav-button-info {
+    color: #004A77;
+    margin: 0 20px;
+}
+
+
+/* Column Styles */
+.report-section,
+.image-section,
+.explanation-section {
+    position: relative;
+    float: right;
+}
+
+.image-section {
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    justify-self: end;
+}
+
+.report-section {
+    flex: 1;
+    max-width: 800px;
+}
+
+.image-header {
+    text-align: center;
+    color: black;
+    font-size: 22px;
+    font-family: Google Sans;
+    font-weight: 400;
+    line-height: 28px;
+    word-wrap: break-word;
+    margin: 5px;
+}
+
+.case-selector-tabs-container {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    grid-template-columns: min-content auto;
+    column-gap: 20px;
+    row-gap: 10px;
+    padding-left: 20px;
+    white-space: nowrap;
+}
+
+.case-selector-tabs-modality-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: flex-start;
+}
+
+.case-selector-tabs {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* Report Text & Sentences */
+.report-text-area {
+    padding: 30px;
+    overflow-y: auto;
+    background-color: #fdfdfd;
+    border-radius: 28px;
+    border: 2px solid #E9E9E9;
+}
+
+/* Styles for clickable sentences within the report text area */
+.report-sentence {
+    cursor: pointer;
+    padding: 2px 0;
+    transition: background-color 0.2s ease;
+    border-radius: 14.272px;
+    border: 1.359px solid #F1E161;
+}
+
+.report-sentence:hover {
+    background: #F1E161;
+    mix-blend-mode: multiply;
+}
+
+.report-sentence.selected-sentence {
+    background: #F1E161;
+    mix-blend-mode: multiply;
+}
+
+/* Image Section */
+.image-container {
+    position: relative;
+    border: 1px solid #ccc;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    background-color: #f0f0f0;
+    margin: 0 auto; /* Keep auto margin for centering if desired */
+    width: var(--image-fixed-width);
+}
+
+.image-container img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+#report-image {
+    width: var(--image-fixed-width);
+    min-width: var(--image-fixed-width); /* Ensure min-width also uses the variable if it's meant to be the same */
+}
+
+#image-loading {
+    width: var(--image-fixed-width);
+}
+
+/* Note specific to CT images, displayed under the image */
+#ct-image-note {
+    display: none; /* Initially hidden, controlled by JavaScript */
+    text-align: center;
+    margin-top: 10px;
+    font-size: 0.9em;
+    color: #555;
+    padding: 0 10px; /* Add some padding so text doesn't touch edges if it wraps */
+    word-wrap: break-word; /* Ensures text wraps to prevent overflow */
+    width: var(--image-fixed-width); /* Same width as the image */
+}
+
+.marker {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    display: none;
+    transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
+    width: max-content;
+}
+
+/* Explanation Section */
+.explanation-box {
+    border: 1px solid #eee;
+    min-height: 50px;
+    background-color: #F1E161;
+    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
+    position: absolute;
+    left: -20px;
+    top: 0px;
+    width: 300px;
+    transition: top 0.3s ease-in-out, background-color 0.3s ease, height 0.3s ease;
+}
+
+.explanation-header {
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 400;
+    padding: 10px 10px 0;
+}
+
+.loading .explanation-header {
+    display: none;
+}
+
+/* New style for the content wrapper inside explanation-box */
+#explanation-content {
+    padding: 10px;
+    overflow-y: auto;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+/* Style for when the box is loading */
+.explanation-box.loading {
+    background-color: #cfcfcf;
+}
+
+/* Adjust #explanation-loading (the div element) to be an overlay */
+#explanation-loading {
+    display: none;
+    font-style: italic;
+    color: #777;
+    text-align: center;
+    padding: 10px;
+}
+
+/* Show #explanation-loading when its parent #explanation-output (which is .explanation-box) has class 'loading' */
+#explanation-output.loading > #explanation-loading {
+    display: flex;
+}
+
+/* Utility Classes */
+.error-message {
+    color: #d9534f;
+    background-color: #f2dede;
+    border: 1px solid #ebccd1;
+    padding: 10px;
+    border-radius: 4px;
+    margin-top: 10px;
+    text-align: center;
+}
+
+/* Responsive Adjustments (Optional) */
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+    }
+}
+
+/* Info Page Styles */
+.info {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.info-page-container {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    padding: 40px;
+    background-color: #fff;
+    max-width: 1200px;
+    margin: 20px auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+}
+
+.info-content {
+    flex: 1;
+    min-width: 350px;
+    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    font-size: 18px;
+}
+
+.info-header {
+    margin-bottom: 10px;
+}
+
+.info-title-med,
+.info-title-demo {
+    font-family: 'Google Sans', sans-serif;
+    font-size: 48px;
+    font-weight: 400;
+}
+
+#info-button .nav-button-inner{
+    background-color: #C2E7FF;
+}
+
+.info-title-demo {
+    color: #969696;
+    margin-left: 10px;
+}
+
+.info-subtitle-demo {
+    color: #969696;
+    font-size: 28px;
+}
+
+.info-text {
+    font-family: 'Google Sans', sans-serif;
+    line-height: 1.6;
+    color: #333;
+}
+
+.info-button {
+    font-family: 'Google Sans Text', sans-serif;
+    background-color: #0B57D0;
+    color: white;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 100px;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.3s ease;
+    align-self: flex-start;
+}
+
+/* Hover state for the button */
+.info-button:hover {
+    background-color: #0a4db8;
+    /* Darker blue on hover */
+}
+
+.info-disclaimer-box {
+    border: 1px solid #CDCDCD;
+    border-radius: 15px;
+    padding: 15px 20px;
+    margin-top: 20px;
+}
+
+.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;
+}
+
+.info-disclaimer-link {
+    color: #0B57D0;
+    font-weight: 500;
+    text-decoration: none;
+}
+
+.info-disclaimer-link:hover {
+    text-decoration: underline;
+}
+
+.info-image-container {
+    flex: 1;
+    min-width: 300px;
+    max-width: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.info-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
+
+/* Responsive adjustments for info page */
+@media (max-width: 768px) {
+    .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;
+    }
+
+    .info-title-med,
+    .info-title-demo {
+        font-size: 36px;
+    }
+
+    .info-text {
+        font-size: 16px;
+    }
+}
+
+
+/* --- Immersive Info Dialog Styles --- */
+.dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent backdrop */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000; /* Ensure it's on top */
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.dialog-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.dialog-box {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+    width: 85%;
+    max-width: 800px; /* Adjust for desired largeness */
+    max-height: 85vh; /* Ensure it fits vertically and allows scrolling */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; /* Important for border-radius with scrollable content */
+    transform: scale(0.95);
+    transition: transform 0.3s ease;
+}
+
+.dialog-overlay.active .dialog-box {
+    transform: scale(1);
+}
+
+.dialog-title-text {
+    padding: 24px 24px 16px 24px;
+    margin: 0;
+    font-size: 1.6rem; /* Adjust as needed */
+    font-weight: 500; /* Using Google Sans weight */
+    color: #202124; /* Dark grey text color */
+    border-bottom: 1px solid #e0e0e0; /* Subtle separator */
+    flex-shrink: 0; /* Prevent title from shrinking */
+}
+
+.dialog-body-scrollable {
+    padding: 16px 24px 24px 24px;
+    overflow-y: auto; /* Enable scrolling for TBD content */
+    flex-grow: 1; /* Allow body to take available space */
+    color: #3c4043; /* Standard body text color */
+    line-height: 1.6;
+}
+
+.dialog-close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 10px; /* Increase clickable area */
+    line-height: 0; /* Helps align icon if it's just an icon */
+    border-radius: 50%;
+    transition: background-color 0.2s ease-in-out;
+    z-index: 10; /* Ensure close button is above title/body */
+}
+
+.dialog-close-btn:hover {
+    background-color: rgba(0,0,0,0.08);
+}
+
+.dialog-close-btn .material-symbols-outlined {
+    font-size: 24px; /* Standard Material Icon size */
+    color: #5f6368; /* Standard icon color */
+    display: block; /* Better for layout */
+}
+
+.hf-logo {
+    vertical-align: middle;
+    width: 30px;
+}
+
+.floating-disclaimer {
+    padding: 5px 10px;
+    margin-top: 10px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    background-color: lightcyan;
+    text-align: justify;
+}
+
+.disclaimer-icon {
+    vertical-align: middle;
+    margin-right: 10px;
+    font-weight: 300 !important;
+}
+
+.nav-button-back {
+    /*justify-self: start;
+    margin-left: 30px;*/
+}

static/images/.gitattributes

@@ -0,0 +1 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text

static/js/demo.js

@@ -0,0 +1,538 @@
+/**
+ * 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.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    const infoDiv = document.querySelector('.info');
+    const mainDiv = document.querySelector('.main');
+    const reportSectionDiv = document.querySelector('.report-section');
+    const viewDemoButton = document.getElementById('view-demo-button');
+    const backToInfoButton = document.getElementById('back-to-info-button');
+    const caseSelectorTabsContainer = document.getElementById('case-selector-tabs-container');
+    const reportTextDisplay = document.getElementById('report-text-display');
+    const explanationOutput = document.getElementById('explanation-output');
+    const explanationContent = document.getElementById('explanation-content');
+    const explanationError = document.getElementById('explanation-error');
+    const imageContainer = document.getElementById('image-container');
+    const reportImage = document.getElementById('report-image');
+    const imageLoading = document.getElementById('image-loading');
+    const imageError = document.getElementById('image-error');
+    const imageModalityHeader = document.getElementById('image-modality-header'); // Get reference to the header
+    const ctImageNote = document.getElementById('ct-image-note');
+    const appLoading = document.getElementById('app-loading');
+    const appError = document.getElementById('app-error');
+
+    let availableReports = [];
+    let currentReportName = null;
+    let currentReportDetails = null;
+
+    let explainAbortController = null;
+    let reportLoadAbortController = null;
+    let appLoadingTimeout = null;
+    let explanationLoadingTimer = null;
+
+    function initialize() {
+        try {
+            const reportsDataElement = document.getElementById('reports-data');
+            if (reportsDataElement) {
+                availableReports = JSON.parse(reportsDataElement.textContent);
+            } else {
+                displayAppError("Failed to load report list.");
+                return;
+            }
+        } catch (e) {
+            displayAppError("Failed to parse report list.");
+            return;
+        }
+
+        if (availableReports.length === 0) {
+            displayAppError("No reports available.");
+            return;
+        }
+
+        if (viewDemoButton && infoDiv && mainDiv) {
+            viewDemoButton.addEventListener('click', () => {
+                infoDiv.style.display = 'none';
+                mainDiv.style.display = 'grid';
+                if (currentReportName) {
+                    loadReportDetails(currentReportName);
+                }
+            });
+        }
+
+        if (backToInfoButton && infoDiv && mainDiv) {
+            backToInfoButton.addEventListener('click', () => {
+                abortOngoingRequests();
+                mainDiv.style.display = 'none';
+                infoDiv.style.display = 'flex';
+                clearAllOutputs();
+                currentReportDetails = null;
+                reportImage.src = '';
+                document.title = "Radiology Report Explainer";
+            });
+        }
+
+        if (caseSelectorTabsContainer) {
+            caseSelectorTabsContainer.addEventListener('click', handleCaseSelectionClick);
+        }
+
+        reportTextDisplay.addEventListener('click', handleSentenceClick);
+
+        const firstCaseButton = caseSelectorTabsContainer?.querySelector('.nav-button-case');
+        if (firstCaseButton) {
+            currentReportName = firstCaseButton.dataset.reportName;
+            setActiveCaseButton(firstCaseButton);
+            loadReportDetails(currentReportName);
+        } else {
+            displayAppError("No cases found to load initially.");
+        }
+    }
+
+    function handleCaseSelectionClick(event) {
+        const clickedButton = event.target.closest('.nav-button-case');
+        if (!clickedButton) return;
+
+        const selectedName = clickedButton.dataset.reportName;
+        if (selectedName && selectedName !== currentReportName) {
+            abortOngoingRequests();
+            currentReportName = selectedName;
+            setActiveCaseButton(clickedButton);
+            loadReportDetails(currentReportName);
+        }
+    }
+
+    async function handleSentenceClick(event) {
+        const clickedElement = event.target;
+        if (!clickedElement.classList.contains('report-sentence') || clickedElement.tagName !== 'SPAN') return;
+
+        const sentenceText = clickedElement.dataset.sentence;
+        if (!sentenceText || !currentReportName) return;
+
+        abortOngoingRequests(['report']);
+        explainAbortController = new AbortController();
+        
+        document.querySelectorAll('#report-text-display .selected-sentence').forEach(el => el.classList.remove('selected-sentence'));
+        clickedElement.classList.add('selected-sentence');
+
+        adjustExplanationPosition(clickedElement);
+
+        try {
+            await Promise.all([
+                fetchExplanation(sentenceText, explainAbortController.signal),
+            ]);
+        } catch (error) {
+            if (error.name !== 'AbortError') {
+                console.error("Error during sentence processing:", error);
+            }
+        }
+    }
+
+    async function loadReportDetails(reportName) {
+        abortOngoingRequests();
+        reportLoadAbortController = new AbortController();
+        const signal = reportLoadAbortController.signal;
+
+        setLoadingState(true, 'report');
+        clearAllOutputs(true);
+
+        try {
+            const response = await fetch(`/get_report_details/${encodeURIComponent(reportName)}`, { signal });
+            if (signal.aborted) return;
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({ error: `HTTP error ${response.status}` }));
+                throw new Error(errorData.error || `HTTP error ${response.status}`);
+            }
+
+            currentReportDetails = await response.json();
+            if (signal.aborted) return;
+
+            document.title = `${reportName} - Radiology Explainer`;
+
+            // Update the image modality header
+            if (imageModalityHeader && currentReportDetails.image_type) {
+                imageModalityHeader.textContent = currentReportDetails.image_type;
+            }
+
+            // Show/hide CT note based on image_type and image_file presence
+            if (ctImageNote) {
+                if (currentReportDetails.image_type === 'CT' && currentReportDetails.image_file) {
+                    ctImageNote.style.display = 'block';
+                } else {
+                    ctImageNote.style.display = 'none';
+                }
+            }
+
+
+            if (currentReportDetails.image_file) {
+                const imageUrl = `${currentReportDetails.image_file}`;
+
+                reportImage.onload = null;
+                reportImage.onerror = null;
+
+                reportImage.onload = () => {
+                    imageLoading.style.display = 'none';
+                    reportImage.style.display = 'block';
+                    imageError.style.display = 'none';
+                };
+                reportImage.onerror = () => {
+                    imageLoading.style.display = 'none';
+                    reportImage.style.display = 'none';
+                    displayImageError("Failed to load image file.");
+                };
+
+                reportImage.src = imageUrl;
+                reportImage.alt = `Radiology Image for ${reportName}`;
+            } else {
+                displayImageError("Image path not configured for this report.");
+                if (ctImageNote) ctImageNote.style.display = 'none'; // Ensure note is hidden if no image path
+            }
+
+            renderReportTextWithLineBreaks(currentReportDetails.text || '');
+        } catch (error) {
+            if (error.name !== 'AbortError') {
+                displayReportTextError(`Failed to load report: ${error.message}`);
+                // Clean up UI elements on report load error.
+                if (reportImage) {
+                    reportImage.style.display = 'none';
+                    reportImage.src = '';
+                    reportImage.onload = null;
+                    reportImage.onerror = null;
+                }
+                if (imageLoading) imageLoading.style.display = 'none';
+                if (imageError) imageError.style.display = 'none';
+                if (ctImageNote) ctImageNote.style.display = 'none';
+                clearExplanationAndLocationUI();
+            }
+        } finally {
+            if (reportLoadAbortController?.signal === signal) {
+                reportLoadAbortController = null;
+            }
+            if (!signal.aborted) {
+                setLoadingState(false, 'report');
+            }
+        }
+    }
+
+    function renderReportTextWithLineBreaks(text) {
+        reportTextDisplay.innerHTML = '';
+        reportTextDisplay.classList.remove('loading', 'error');
+
+        const lines = text.split('\n');
+        if (lines.length === 0 || (lines.length === 1 && !lines[0].trim())) {
+            reportTextDisplay.textContent = 'Report text is empty or could not be processed.';
+            return;
+        }
+
+        lines.forEach((line, index) => {
+            const trimmedLine = line.trim();
+            if (trimmedLine !== '') {
+                const sentences = splitSentences(trimmedLine);
+                sentences.forEach(sentence => {
+                    if (sentence) {
+                        const span = document.createElement('span');
+                        span.textContent = sentence + ' ';
+                        if (!sentence.includes('Image source: ') && sentence.includes(' ') || !sentence.includes(':')) {
+                            span.classList.add('report-sentence');
+                        }
+                        span.dataset.sentence = sentence;
+                        reportTextDisplay.appendChild(span);
+                    }
+                });
+            }
+            if (index < lines.length - 1) {
+                reportTextDisplay.appendChild(document.createElement('br'));
+            }
+        });
+    }
+
+    async function fetchExplanation(sentence, signal) {
+        explanationError.style.display = 'none';
+        if (!currentReportName) {
+            displayExplanationError("No report selected.");
+            return;
+        }
+
+    if (explanationLoadingTimer) {
+        clearTimeout(explanationLoadingTimer);
+    }
+
+    explanationLoadingTimer = setTimeout(() => {
+        if (!signal.aborted) { // Only add if not already aborted
+            explanationOutput.classList.add('loading');
+            explanationContent.textContent = '';
+        }
+        explanationLoadingTimer = null; // Timer has done its job or been cleared
+    }, 150); // 150ms delay, adjust as needed
+
+        try {
+            const response = await fetch('/explain', {
+                method: 'POST',
+            headers: { 'Content-Type': 'application/json' }, // prettier-ignore
+                body: JSON.stringify({ sentence, report_name: currentReportName }),
+                signal
+            });
+
+            if (signal.aborted) return;
+
+            if (!response.ok) {
+            if (explanationLoadingTimer) clearTimeout(explanationLoadingTimer);
+            explanationLoadingTimer = null;
+            explanationOutput.classList.remove('loading');
+                const errorData = await response.json().catch(() => ({ error: `HTTP error ${response.status}` }));
+                throw new Error(errorData.error || `HTTP error ${response.status}`);
+            }
+
+            const data = await response.json();
+            if (signal.aborted) return;
+
+        if (explanationLoadingTimer) clearTimeout(explanationLoadingTimer);
+        explanationLoadingTimer = null;
+            explanationOutput.classList.remove('loading');
+            requestAnimationFrame(() => {
+                explanationContent.textContent = data.explanation || "No explanation content received.";
+                adjustExplanationPosition();
+            });
+        } catch (error) {
+        if (explanationLoadingTimer) clearTimeout(explanationLoadingTimer);
+        explanationLoadingTimer = null;
+            explanationOutput.classList.remove('loading');
+            if (error.name !== 'AbortError') {
+                displayExplanationError(`Explanation Error: ${error.message}`);
+            }
+        }
+    }
+
+    function setLoadingState(isLoading, type = 'all') {
+        if (type === 'all' || type === 'report') {
+            if (isLoading) {
+                if (appLoadingTimeout) {
+                    clearTimeout(appLoadingTimeout);
+                    appLoadingTimeout = null;
+                }
+                // Cleanup immediate error/content states
+                if (appError) appError.style.display = 'none';
+                if (reportImage) reportImage.style.display = 'none';
+                if (imageError) imageError.style.display = 'none';
+                if (ctImageNote) ctImageNote.style.display = 'none';
+                clearExplanationAndLocationUI();
+
+                appLoadingTimeout = setTimeout(() => {
+                    if (appLoading) appLoading.style.display = 'block';
+
+                    // Show content-specific loaders only if timeout fires
+                    if (reportTextDisplay) {
+                        reportTextDisplay.innerHTML = 'Loading...';
+                        reportTextDisplay.classList.add('loading');
+                        reportTextDisplay.classList.remove('error');
+                    }
+                    if (imageLoading) imageLoading.style.display = 'block';
+                }, 200); // Delay for app and content loading indicators (e.g., 200ms)
+
+            } else {
+                if (appLoadingTimeout) {
+                    clearTimeout(appLoadingTimeout);
+                    appLoadingTimeout = null;
+                }
+                if (appLoading) appLoading.style.display = 'none';
+            }
+        }
+    }
+    function clearAllOutputs(keepReportTextLoading = false) {
+        if (!keepReportTextLoading && reportTextDisplay) {
+            reportTextDisplay.innerHTML = 'Select a report to view its text.';
+            reportTextDisplay.classList.remove('loading', 'error');
+        }
+        if (reportImage) {
+            reportImage.style.display = 'none';
+            reportImage.onload = null;
+            reportImage.onerror = null;
+            reportImage.src = '';
+        }
+        if (imageError) imageError.style.display = 'none';
+        if (ctImageNote) ctImageNote.style.display = 'none';
+        clearExplanationAndLocationUI();
+        if (appError) appError.style.display = 'none';
+        // Reset image modality header on clear
+        if (imageModalityHeader) {
+             imageModalityHeader.textContent = 'Medical Image'; // Reset to default
+        }
+    }
+
+    function clearExplanationAndLocationUI() {
+        if (explanationContent) {
+            explanationContent.textContent = 'Click a sentence to see the explanation here.';
+        }
+        if (explanationLoadingTimer) { // Clear any pending explanation loading timer
+            clearTimeout(explanationLoadingTimer);
+            explanationLoadingTimer = null;
+        }
+        explanationOutput.classList.remove('loading');
+        explanationError.style.display = 'none';
+        document.querySelectorAll('#report-text-display .selected-sentence').forEach(el => el.classList.remove('selected-sentence'));
+    }
+
+    function displayReportTextError(message) {
+        reportTextDisplay.innerHTML = `<span class="error-message">${message}</span>`;
+        reportTextDisplay.classList.add('error');
+        reportTextDisplay.classList.remove('loading');
+    }
+
+    function displayAppError(message) {
+        appError.textContent = `Error: ${message}`;
+        appError.style.display = 'block';
+        appLoading.style.display = 'none';
+    }
+
+    function displayImageError(message) {
+        imageError.textContent = message;
+        imageError.style.display = 'block';
+        imageLoading.style.display = 'none';
+        reportImage.style.display = 'none';
+        if (ctImageNote) ctImageNote.style.display = 'none';
+    }
+
+    function displayExplanationError(message) {
+        explanationError.textContent = message;
+        explanationError.style.display = 'block';
+        explanationOutput.classList.remove('loading');
+        if (explanationContent) explanationContent.textContent = '';
+    }
+
+    function setActiveCaseButton(activeButton) {
+        if (!caseSelectorTabsContainer) return;
+        caseSelectorTabsContainer.querySelectorAll('.nav-button-case').forEach(btn => btn.classList.remove('active'));
+        if (activeButton) activeButton.classList.add('active');
+    }
+
+    function splitSentences(text) {
+        if (!text) return [];
+        try {
+            if (typeof nlp !== 'function') {
+                const basicSentences = text.match(/[^.?!]+[.?!]['"]?(\s+|$)/g);
+                return basicSentences ? basicSentences.map(s => s.trim()).filter(s => s.length > 0) : [];
+            }
+            const doc = nlp(text);
+            return doc.sentences().out('array').map(s => s.trim()).filter(s => s.length > 0);
+        } catch (e) {
+            const basicSentences = text.match(/[^.?!]+[.?!]['"]?(\s+|$)/g);
+            return basicSentences ? basicSentences.map(s => s.trim()).filter(s => s.length > 0) : [];
+        }
+    }
+
+    function adjustExplanationPosition(clickedSentenceElement) {
+        const targetSentenceElement = clickedSentenceElement || document.querySelector('#report-text-display .selected-sentence');
+        if (!targetSentenceElement) return;
+
+        const explanationSection = explanationOutput.closest('.explanation-section');
+
+        if (explanationOutput && explanationSection && reportSectionDiv) {
+            const sentenceRect = targetSentenceElement.getBoundingClientRect();
+            const explanationSectionRect = explanationSection.getBoundingClientRect();
+            
+            // Use actual offsetHeight, fallback if not rendered. Accurate after rAF.
+            const explanationHeight = explanationOutput.offsetHeight || 200; 
+            
+            // Initial top: align with sentence, relative to explanationSection.
+            let newTop = sentenceRect.top - explanationSectionRect.top;
+            
+            // Absolute bottom of explanation box if placed at newTop.
+            const explanationBoxAbsoluteBottom = explanationSectionRect.top + newTop + explanationHeight + 15; // 15px margin
+            
+            const viewportHeight = window.innerHeight;
+            const pageBottomOverflow = explanationBoxAbsoluteBottom - viewportHeight;
+            
+            if (pageBottomOverflow > 0) {
+                // Adjust newTop upwards if overflowing viewport bottom.
+                newTop -= pageBottomOverflow;
+            }
+            
+            // Prevent top from being negative (relative to its container).
+            newTop = Math.max(0, newTop);
+            
+            explanationOutput.style.top = `${newTop}px`;
+        }
+    }
+
+    function abortOngoingRequests(excludeTypes = []) {
+        if (!excludeTypes.includes('report') && reportLoadAbortController) {
+            reportLoadAbortController.abort();
+            reportLoadAbortController = null;
+        }
+        if (!excludeTypes.includes('explain') && explainAbortController) {
+            explainAbortController.abort();
+            explainAbortController = null;
+        }
+    }
+
+    initialize();
+});
+
+
+// Make sure this is within your existing DOMContentLoaded listener,
+// or wrap it in one if demo.js doesn't have a global one.
+document.addEventListener('DOMContentLoaded', () => {
+
+    // ... (any existing JavaScript code in demo.js)
+
+    // --- BEGIN: Immersive Info Dialog Logic ---
+    const infoButton = document.getElementById('info-button');
+    const immersiveDialogOverlay = document.getElementById('immersive-info-dialog');
+    const dialogCloseButton = document.getElementById('dialog-close-button');
+
+    if (infoButton && immersiveDialogOverlay && dialogCloseButton) {
+        const openDialog = () => {
+            immersiveDialogOverlay.style.display = 'flex'; // Use flex as per CSS
+            // Timeout to allow display:flex to apply before triggering transition
+            setTimeout(() => {
+                immersiveDialogOverlay.classList.add('active');
+            }, 10); // Small delay
+            document.body.style.overflow = 'hidden'; // Prevent background scroll
+        };
+
+        const closeDialog = () => {
+            immersiveDialogOverlay.classList.remove('active');
+            // Wait for opacity transition to finish before setting display to none
+            setTimeout(() => {
+                immersiveDialogOverlay.style.display = 'none';
+            }, 300); // Must match CSS transition duration
+            document.body.style.overflow = ''; // Restore background scroll
+        };
+
+        infoButton.addEventListener('click', openDialog);
+        dialogCloseButton.addEventListener('click', closeDialog);
+
+        // Dismissible: Close when clicking on the overlay (backdrop)
+        immersiveDialogOverlay.addEventListener('click', (event) => {
+            if (event.target === immersiveDialogOverlay) {
+                closeDialog();
+            }
+        });
+
+        // Dismissible: Close with Escape key
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape' && immersiveDialogOverlay.classList.contains('active')) {
+                closeDialog();
+            }
+        });
+    } else {
+        // Log errors if elements are not found, helps in debugging
+        if (!infoButton) console.error('Dialog trigger button (#info-button) not found.');
+        if (!immersiveDialogOverlay) console.error('Immersive dialog (#immersive-info-dialog) not found.');
+        if (!dialogCloseButton) console.error('Dialog close button (#dialog-close-button) not found.');
+    }
+    // --- END: Immersive Info Dialog Logic ---
+
+});

static/reports/CT-Tumor.txt

@@ -0,0 +1,17 @@
+FINDINGS:
+Mass effect and endobronchial tumor invasion result in severe focal stenosis of right middle lobar bronchus. Subsegmental mucus plugging in lateral segment right middle lobe, peripheral to central right middle lobe lung mass (described below).
+No pneumothorax. No pleural effusion.
+Right middle lobe hyperlucency, compatible with lobar air trapping. Solid, well-circumscribed, enhancing 33 x 25 mm central right middle lobe lung mass. No consolidation elsewhere. Very mild dependent atelectasis in lower lobes. Subsolid 3 mm nodule in posteromedial right upper lobe.
+Enlargement of right heart chambers. No pericardial effusion. No thoracic aortic aneurysm. Mild thymic hyperplasia.
+No bulky thoracic lymphadenopathy.
+Cholelithiasis.
+No aggressive destructive skeletal focus. Mild thoracic spine degenerative disk disease.
+
+
+IMPRESSION:
+1.  Solid, enhancing 33 x 25 mm central right middle lobe lung mass with apparent endobronchial invasion and associated right middle lobe air trapping; imaging features favor carcinoid tumor.
+2.  No bulky thoracic lymphadenopathy.
+3.  Nonspecific 3 mm right upper lobe lung nodule.
+
+RECOMMENDATION:
+>> Pulmonary consultation.

static/reports/Effusion2.txt

@@ -0,0 +1,11 @@
+FINDINGS: 
+No pneumothorax. Small to medium right pleural effusion with adjacent right basilar atelectasis. No substantial left pleural effusion.
+
+Normal heart size. Mediastinal shadow within normal limits.
+
+No acute skeletal abnormality is apparent.
+
+IMPRESSION:
+Small to medium right pleural effusion.
+
+Image source: LIDC-IDRI

static/reports/Infection.txt

@@ -0,0 +1,11 @@
+FINDINGS:
+No pneumothorax. Small right pleural effusion. No substantial left pleural effusion. Heterogeneous opacities with mixed interstitial opacities are present in mid and lower lungs bilateral, most pronounced in lower right lung.
+
+Normal heart size. Mediastinal shadow within normal limits.
+
+No acute skeletal abnormality is apparent.
+
+IMPRESSION:
+Bilateral heterogeneous lung opacities, most likely lung infection, most pronounced in lower right lung. Small right pleural effusion.
+
+Image source: NIH Chest X-ray14 database

static/reports/Lymphadenopathy2.txt

@@ -0,0 +1,11 @@
+FINDINGS:
+No pneumothorax. No substantial pleural effusion. No consolidation.
+
+Normal heart size. Soft tissue bulge near aortopulmonary window. Multiple calcified, enlarged mediastinal lymph nodes.
+
+No acute skeletal abnormality is apparent.
+
+IMPRESSION:
+Soft tissue bulge near aortopulmonary window; bulky lymphadenopathy suspected. Multiple calcified, enlarged mediastinal lymph nodes may correspond to either treated malignancy or sequelae of remote endemic fungal infection.
+
+Image source: NIH Chest X-ray14 database

static/reports/Nodule3.txt

@@ -0,0 +1,14 @@
+FINDINGS:
+No pneumothorax. No substantial pleural effusion. No consolidation. Approximately 1.5 cm nodule in lateral upper/mid left lung.
+
+Normal heart size. Slightly unfolded thoracic aorta. Mediastinal shadow otherwise within normal limits.
+
+No acute skeletal abnormality is apparent.
+
+IMPRESSION:
+Approximately 1.5 cm lateral upper/mid left lung nodule; malignancy needs to be excluded.
+
+RECOMMENDATION:
+Chest CT without contrast.
+
+Image source: LIDC-IDRI

static/reports/Nodule5.txt

@@ -0,0 +1,14 @@
+FINDINGS:
+No pneumothorax. No substantial pleural effusion. Well-circumscribed, approximately 2 cm round nodule in medial mid right lung. No consolidation otherwise.
+
+Normal heart size. Mediastinal shadow within normal limits.
+
+Skeletal structures unremarkable.
+
+IMPRESSION:
+Well circumscribed, approximately 2 cm medial mid right lung nodule; malignancy needs to be excluded.
+
+RECOMMENDATION:
+Chest CT without contrast.
+
+Image source: LIDC-IDRI

static/reports_manifest.csv

@@ -0,0 +1,7 @@
+image_type,case_display_name,image_path,report_path
+CT,Tumor,static/images/CT-Tumor.jpg,static/reports/CT-Tumor.txt
+CXR,Effusion,static/images/Effusion2.jpg,static/reports/Effusion2.txt
+CXR,Infection,static/images/Infection.jpg,static/reports/Infection.txt
+CXR,Lymphadenopathy,static/images/Lymphadenopathy2.jpg,static/reports/Lymphadenopathy2.txt
+CXR,Nodule A,static/images/Nodule3.jpg,static/reports/Nodule3.txt
+CXR,Nodule B,static/images/Nodule5.jpg,static/reports/Nodule5.txt

templates/index.html

@@ -0,0 +1,220 @@
+<!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">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Radiology Report Explainer</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Google+Sans+Text:wght@500&display=swap"
+        rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
+        rel="stylesheet">
+    <!-- Link to the correct JS file -->
+    <script src="https://unpkg.com/compromise" defer></script>
+    <script src="{{ url_for('static', filename='js/demo.js') }}" defer></script>
+</head>
+
+<body>
+    <div class="info">
+        <!-- New Info Page Content -->
+        <div class="info-page-container">
+            <div class="info-content">
+                <div class="info-header">
+                    <span class="info-title-demo">Radiology Explainer Demo</span><br>
+                    <span class="info-title-demo info-subtitle-demo">Built with</span>
+                    <span class="info-title-med info-subtitle-demo">MedGemma</span>
+                </div>
+                <div class="info-text">Consider an educational scenario where interacting with a radiology image can
+                    substantially improve learning. This demonstration shows how MedGemma might be built upon to provide
+                    a useful tool for exploring radiology images and associated reports by translating them into
+                    simple language, with visual cues to highlight the relevant areas of the image.</div>
+                <div class="info-disclaimer-text"><span class="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 class="info-button" id="view-demo-button">View Demo</button>
+            </div>
+        </div>
+    </div>
+    <div class="main">
+            <div class="nav-button nav-button-back" id="back-to-info-button">
+                <div class="nav-button-inner">
+                    <span class="material-symbols-outlined nav-button-icon">keyboard_arrow_left</span>
+                    <span class="nav-button-text">Back</span>
+                </div>
+            </div>
+            <div class="case-selector-tabs-container" id="case-selector-tabs-container">
+                    <div>X-Ray</div>
+                    <div class="case-selector-tabs" id="case-selector-tabs">
+                        {% if available_reports %}
+                        {% for report in available_reports %}
+                        {% if report.image_type == 'CXR' %}
+                        <div class="nav-button nav-button-case" data-report-name="{{ report.name }}">
+                            <div class="nav-button-inner">
+                                <span class="nav-button-text">{{ report.name }}</span>
+                            </div>
+                        </div>
+                        {% endif %}
+                        {% endfor %}
+                        {% else %}
+                        <span class="no-cases-available">No cases available</span>
+                        {% endif %}
+                    </div>
+
+                    <div>CT</div>
+                    <div class="case-selector-tabs" id="case-selector-tabs2">
+                        {% if available_reports %}
+                        {% for report in available_reports %}
+                        {% if report.image_type == 'CT' %}
+                        <div class="nav-button nav-button-case" data-report-name="{{ report.name }}">
+                            <div class="nav-button-inner">
+                                <span class="nav-button-text">{{ report.name }}</span>
+                            </div>
+                        </div>
+                        {% endif %}
+                        {% endfor %}
+                        {% else %}
+                        <span class="no-cases-available">No cases available</span>
+                        {% endif %}
+                    </div>
+
+            </div>
+            <div class="nav-button nav-button-info" id="info-button">
+                <div class="nav-button-inner">
+                    <span class="material-symbols-outlined nav-button-icon">code_blocks</span>
+                    <span class="nav-button-text">Details about this Demo</span>
+                </div>
+            </div>
+ 
+
+
+        <div class="image-section">
+            <div id="image-modality-header" class="image-header">{{ image_type | default('Medical Image', true) }}
+            </div> <!-- Updated: ID added, initial text changed -->
+            <div id="image-container" class="image-container"> <!-- Container for relative positioning -->
+                <img id="report-image" src="" alt="Medical Image" style="display: none;">
+                <div id="image-loading" class="loading" style="display: none;">Loading image...</div>
+                <div id="image-error" class="error-message" style="display: none;"></div>
+            </div>
+            <div id="ct-image-note" class="image-note">
+                This shows a single slice of the CT. Not all elements in the report can be visualized.
+            </div>
+        </div>
+
+        <div class="report-section">
+            <div id="app-loading" class="loading" style="display: none;">Loading report details...</div>
+            <div id="app-error" class="error-message" style="display: none;"></div>
+            <div class="explanation-section">
+                <div id="explanation-output" class="explanation-box">
+                    <div id="explanation-loading" class="loading">Generating explanation... Please wait.</div>
+                    <div class="explanation-header">What this means
+                    </div>
+                    <div id="explanation-content">
+                        Click a sentence to see the explanation here.
+                    </div>
+                </div>
+            </div>
+            <div class="report-text-area">
+            <div id="report-text-display" >
+                <!-- Report text will be loaded here -->
+                Select a report to view its text.
+            </div>
+            <div class="floating-disclaimer">
+                <span class="material-symbols-outlined disclaimer-icon">warning</span>
+                <span class="disclaimer-text">This demonstration is for illustrative purposes of MedGemma's baseline
+                    capability 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.</span>
+            </div>
+            </div>
+        </div>
+    <!-- Embed available reports data for JavaScript -->
+    <script id="reports-data" type="application/json">
+            {{ available_reports | tojson | safe }}
+        </script>
+    <div id="explanation-error" class="error-message" style="display: none;"></div>
+    </div>
+
+    <!-- Immersive Info Dialog -->
+    <div id="immersive-info-dialog" class="dialog-overlay" style="display: none;" role="dialog" aria-modal="true"
+        aria-labelledby="dialog-title">
+        <div class="dialog-box">
+            <button id="dialog-close-button" class="dialog-close-btn" aria-label="Close dialog">
+                <span class="material-symbols-outlined">close</span>
+            </button>
+            <h2 id="dialog-title" class="dialog-title-text">Details About This Demo</h2>
+            <div class="dialog-body-scrollable">
+                <p><b>The Model:</b> This demo exclusively features Google's MedGemma-4B, a Gemma 3-based model
+                    fine-tuned for
+                    comprehending medical text and images, such as chest X-rays. 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-4B is available on <a
+                        href="https://huggingface.co/google/medgemma-4b-it" target="_blank">HuggingFace<img
+                            class="hf-logo"
+                            src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg">
+                    </a> and
+                    <a href="https://console.cloud.google.com/vertex-ai/publishers/google/model-garden/medgemma" target="_blank">Model
+                        Garden <img class="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=rad_explain"
+                        target="_blank">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>Enjoying the Demo?</b> We'd love your feedback! If you found this demo helpful, please show
+                    your appreciation by clicking the ♡ button on the HuggingFace page, linked at the top.</p>
+                <p><b>Explore More Demos:</b> Discover additional demonstrations on HuggingFace Spaces or via Colabs:
+                </p>
+                <ul>
+                    <li><a href="https://huggingface.co/spaces/google/cxr-foundation-demo?referral=rad_explain"
+                            target="_blank">
+                            CXR Foundations Demo <img class="hf-logo"
+                                src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
+                        -
+                        Showcases on-browser, data-efficient, and zero-shot classification of CXR images.</li>
+                    <li><a href="https://huggingface.co/spaces/google/path-foundation-demo?referral=rad_explain"
+                            target="_blank">
+                            Path Foundations Demo <img class="hf-logo"
+                                src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
+                        -
+                        Highlights on-browser, data-efficient classification and outlier detection within pathology
+                        slides.</li>
+                    <li><a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/fine_tune_with_hugging_face.ipynb" target="_blank">
+                            Finetune MedGemma Colab <img class="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>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

tests/test_cache_store.py

@@ -0,0 +1,64 @@
+# 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 unittest
+from unittest.mock import patch
+import importlib
+import os
+# Import module under test. Initial load uses actual or globally patched dependencies.
+import cache_store
+
+class TestCacheStore(unittest.TestCase):
+
+    @patch('diskcache.Cache')
+    @patch('os.getenv')
+    def test_cache_directory_env_var_set(self, mock_os_getenv, mock_DiskCache_class):
+        expected_dir = '/custom/cache/path'
+
+        # Mock os.getenv for this test.
+        def getenv_side_effect_set(key, default=None):
+            if key == 'CACHE_DIR':
+                return expected_dir
+            return os.environ.get(key, default) # Fallback for other env var calls.
+        mock_os_getenv.side_effect = getenv_side_effect_set
+
+        # Reload cache_store to apply method-specific mocks.
+        importlib.reload(cache_store)
+
+        # Check os.getenv call by cache_store.py.
+        mock_os_getenv.assert_any_call('CACHE_DIR', '/app/cache_dir')
+        # Check diskcache.Cache initialization with the expected directory.
+        mock_DiskCache_class.assert_called_once_with(expected_dir)
+
+    @patch('diskcache.Cache')
+    @patch('os.getenv')
+    def test_cache_directory_env_var_not_set(self, mock_os_getenv, mock_DiskCache_class):
+        # Mock os.getenv: simulate 'CACHE_DIR' not set, so it returns the default.
+        def getenv_side_effect_not_set(key, default=None):
+            if key == 'CACHE_DIR':
+                # 'default' will be '/app/cache_dir' from cache_store.py's call
+                return default
+            return os.environ.get(key, default) # Fallback for other env vars
+        mock_os_getenv.side_effect = getenv_side_effect_not_set
+
+        # Reload cache_store to apply method-specific mocks.
+        importlib.reload(cache_store)
+
+        # Check os.getenv call by cache_store.py.
+        mock_os_getenv.assert_any_call('CACHE_DIR', '/app/cache_dir')
+        # Check diskcache.Cache initialization with the default directory.
+        mock_DiskCache_class.assert_called_once_with('/app/cache_dir')
+
+if __name__ == '__main__':
+    unittest.main()

utils.py

@@ -0,0 +1,39 @@
+# 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 base64
+import mimetypes
+import logging # Used for logging
+
+logger = logging.getLogger(__name__)
+
+# --- Helper Function for Base64 Encoding ---
+def image_to_base64_data_url(image_path):
+    """Reads an image file, encodes it to base64, and returns a data URL."""
+    try:
+        mime_type, _ = mimetypes.guess_type(image_path)
+        if not mime_type:
+            # Fallback or raise error if MIME type can't be guessed
+            mime_type = "image/jpeg" # Defaulting to image/jpeg if MIME type detection fails
+            logger.warning(f"Could not determine MIME type for {image_path}, defaulting to {mime_type}")
+
+        with open(image_path, "rb") as image_file:
+            encoded_string = base64.b64encode(image_file.read()).decode('utf-8')
+        return f"data:{mime_type};base64,{encoded_string}"
+    except FileNotFoundError:
+        logger.error(f"Image file not found at {image_path} for base64 encoding.")
+        return None
+    except Exception as e:
+        logger.error(f"Error encoding image to base64: {e}", exc_info=True)
+        return None