Spaces:
Running
Running
File size: 12,558 Bytes
352a4b6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 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,GRAD@20..48,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">
</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> |