Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +221 -70
templates/index.html
CHANGED
|
@@ -1,26 +1,196 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<!--
|
| 3 |
-
Copyright 2025 Google LLC
|
| 4 |
|
| 5 |
-
|
| 6 |
-
you may not use this file except in compliance with the License.
|
| 7 |
-
You may obtain a copy of the License at
|
| 8 |
|
| 9 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 10 |
|
| 11 |
-
|
| 12 |
-
distributed under the License is distributed on an "AS IS" BASIS,
|
| 13 |
-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
| 14 |
-
See the License for the specific language governing permissions and
|
| 15 |
-
limitations under the License.
|
| 16 |
-
-->
|
| 17 |
|
| 18 |
-
<html lang="
|
| 19 |
|
| 20 |
<head>
|
| 21 |
<meta charset="UTF-8">
|
| 22 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 23 |
-
<title
|
| 24 |
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| 25 |
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 26 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
@@ -41,22 +211,13 @@
|
|
| 41 |
<div class="info-page-container">
|
| 42 |
<div class="info-content">
|
| 43 |
<div class="info-header">
|
| 44 |
-
<span class="info-title-demo"
|
| 45 |
-
<span class="info-title-demo info-subtitle-demo"
|
| 46 |
<span class="info-title-med info-subtitle-demo">MedGemma</span>
|
| 47 |
</div>
|
| 48 |
-
<div class="info-text"
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
simple language, with visual cues to highlight the relevant areas of the image.</div>
|
| 52 |
-
<div class="info-disclaimer-text"><span class="info-disclaimer-title">Disclaimer</span> This
|
| 53 |
-
demonstration is for illustrative purposes only and does not represent a finished or approved
|
| 54 |
-
product. It is not representative of compliance to any regulations or standards for
|
| 55 |
-
quality, safety or efficacy. Any real-world application would require additional development,
|
| 56 |
-
training, and adaptation. The experience highlighted in this demo shows MedGemma's baseline
|
| 57 |
-
capability for the displayed task and is intended to help developers and users explore possible
|
| 58 |
-
applications and inspire further development.</div>
|
| 59 |
-
<button class="info-button" id="view-demo-button">View Demo</button>
|
| 60 |
</div>
|
| 61 |
</div>
|
| 62 |
</div>
|
|
@@ -64,11 +225,11 @@
|
|
| 64 |
<div class="nav-button nav-button-back" id="back-to-info-button">
|
| 65 |
<div class="nav-button-inner">
|
| 66 |
<span class="material-symbols-outlined nav-button-icon">keyboard_arrow_left</span>
|
| 67 |
-
<span class="nav-button-text"
|
| 68 |
</div>
|
| 69 |
</div>
|
| 70 |
<div class="case-selector-tabs-container" id="case-selector-tabs-container">
|
| 71 |
-
<div>X
|
| 72 |
<div class="case-selector-tabs" id="case-selector-tabs">
|
| 73 |
{% if available_reports %}
|
| 74 |
{% for report in available_reports %}
|
|
@@ -81,7 +242,7 @@
|
|
| 81 |
{% endif %}
|
| 82 |
{% endfor %}
|
| 83 |
{% else %}
|
| 84 |
-
<span class="no-cases-available"
|
| 85 |
{% endif %}
|
| 86 |
</div>
|
| 87 |
|
|
@@ -98,7 +259,7 @@
|
|
| 98 |
{% endif %}
|
| 99 |
{% endfor %}
|
| 100 |
{% else %}
|
| 101 |
-
<span class="no-cases-available"
|
| 102 |
{% endif %}
|
| 103 |
</div>
|
| 104 |
|
|
@@ -106,49 +267,46 @@
|
|
| 106 |
<div class="nav-button nav-button-info" id="info-button">
|
| 107 |
<div class="nav-button-inner">
|
| 108 |
<span class="material-symbols-outlined nav-button-icon">code_blocks</span>
|
| 109 |
-
<span class="nav-button-text"
|
| 110 |
</div>
|
| 111 |
</div>
|
| 112 |
|
| 113 |
|
| 114 |
|
| 115 |
<div class="image-section">
|
| 116 |
-
<div id="image-modality-header" class="image-header">{{ image_type | default('
|
| 117 |
</div> <!-- Updated: ID added, initial text changed -->
|
| 118 |
<div id="image-container" class="image-container"> <!-- Container for relative positioning -->
|
| 119 |
-
<img id="report-image" src="" alt="
|
| 120 |
-
<div id="image-loading" class="loading" style="display: none;"
|
| 121 |
<div id="image-error" class="error-message" style="display: none;"></div>
|
| 122 |
</div>
|
| 123 |
<div id="ct-image-note" class="image-note">
|
| 124 |
-
|
| 125 |
</div>
|
| 126 |
</div>
|
| 127 |
|
| 128 |
<div class="report-section">
|
| 129 |
-
<div id="app-loading" class="loading" style="display: none;"
|
| 130 |
<div id="app-error" class="error-message" style="display: none;"></div>
|
| 131 |
<div class="explanation-section">
|
| 132 |
<div id="explanation-output" class="explanation-box">
|
| 133 |
-
<div id="explanation-loading" class="loading"
|
| 134 |
-
<div class="explanation-header"
|
| 135 |
</div>
|
| 136 |
<div id="explanation-content">
|
| 137 |
-
|
| 138 |
</div>
|
| 139 |
</div>
|
| 140 |
</div>
|
| 141 |
<div class="report-text-area">
|
| 142 |
<div id="report-text-display" >
|
| 143 |
<!-- Report text will be loaded here -->
|
| 144 |
-
|
| 145 |
</div>
|
| 146 |
<div class="floating-disclaimer">
|
| 147 |
<span class="material-symbols-outlined disclaimer-icon">warning</span>
|
| 148 |
-
<span class="disclaimer-text"
|
| 149 |
-
capability only. It does not represent a finished or approved product, is not intended to
|
| 150 |
-
diagnose or suggest treatment of any disease or condition, and should not be used for medical
|
| 151 |
-
advice.</span>
|
| 152 |
</div>
|
| 153 |
</div>
|
| 154 |
</div>
|
|
@@ -163,54 +321,47 @@
|
|
| 163 |
<div id="immersive-info-dialog" class="dialog-overlay" style="display: none;" role="dialog" aria-modal="true"
|
| 164 |
aria-labelledby="dialog-title">
|
| 165 |
<div class="dialog-box">
|
| 166 |
-
<button id="dialog-close-button" class="dialog-close-btn" aria-label="
|
| 167 |
<span class="material-symbols-outlined">close</span>
|
| 168 |
</button>
|
| 169 |
-
<h2 id="dialog-title" class="dialog-title-text"
|
| 170 |
<div class="dialog-body-scrollable">
|
| 171 |
-
<p><b
|
| 172 |
-
|
| 173 |
-
comprehending medical text and images, such as chest X-rays. It demonstrates MedGemma's ability to
|
| 174 |
-
accelerate the development of AI-powered healthcare applications by offering advanced
|
| 175 |
-
interpretation of medical data.</p>
|
| 176 |
-
<p><b>Accessing and Using the Model:</b> Google's MedGemma-4B is available on <a
|
| 177 |
href="https://huggingface.co/google/medgemma-4b-it" target="_blank">HuggingFace<img
|
| 178 |
class="hf-logo"
|
| 179 |
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg">
|
| 180 |
-
</a
|
| 181 |
<a href="https://console.cloud.google.com/vertex-ai/publishers/google/model-garden/medgemma" target="_blank">Model
|
| 182 |
Garden <img class="hf-logo"
|
| 183 |
-
src="https://www.gstatic.com/cloud/images/icons/apple-icon.png"></a
|
| 184 |
-
|
| 185 |
href="https://developers.google.com/health-ai-developer-foundations?referral=rad_explain"
|
| 186 |
target="_blank">HAI-DEF
|
| 187 |
-
|
| 188 |
</p>
|
| 189 |
-
<p><b>Health AI Developer Foundations (HAI-DEF)</b
|
| 190 |
-
|
| 191 |
-
<p><b
|
| 192 |
-
your appreciation by clicking the β‘ button on the HuggingFace page, linked at the top.</p>
|
| 193 |
-
<p><b>Explore More Demos:</b> Discover additional demonstrations on HuggingFace Spaces or via Colabs:
|
| 194 |
</p>
|
| 195 |
<ul>
|
| 196 |
<li><a href="https://huggingface.co/spaces/google/cxr-foundation-demo?referral=rad_explain"
|
| 197 |
target="_blank">
|
| 198 |
-
CXR Foundations
|
| 199 |
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
|
| 200 |
-
|
| 201 |
-
|
| 202 |
<li><a href="https://huggingface.co/spaces/google/path-foundation-demo?referral=rad_explain"
|
| 203 |
target="_blank">
|
| 204 |
-
Path Foundations
|
| 205 |
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
|
| 206 |
-
|
| 207 |
-
|
| 208 |
-
slides.</li>
|
| 209 |
<li><a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/fine_tune_with_hugging_face.ipynb" target="_blank">
|
| 210 |
-
|
| 211 |
src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Colaboratory_SVG_Logo.svg"></a>
|
| 212 |
-
|
| 213 |
-
|
| 214 |
</ul>
|
| 215 |
</div>
|
| 216 |
</div>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
|
|
|
|
|
|
| 2 |
|
| 3 |
+
<html lang="ko">
|
|
|
|
|
|
|
| 4 |
|
| 5 |
+
<head>
|
| 6 |
+
<meta charset="UTF-8">
|
| 7 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 8 |
+
<title>λ°©μ¬μ λ³΄κ³ μ μ€λͺ
λꡬ</title>
|
| 9 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| 10 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 11 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 12 |
+
<link
|
| 13 |
+
href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Google+Sans+Text:wght@500&display=swap"
|
| 14 |
+
rel="stylesheet">
|
| 15 |
+
<link
|
| 16 |
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
|
| 17 |
+
rel="stylesheet">
|
| 18 |
+
<!-- Link to the correct JS file -->
|
| 19 |
+
<script src="https://unpkg.com/compromise" defer></script>
|
| 20 |
+
<script src="{{ url_for('static', filename='js/demo.js') }}" defer></script>
|
| 21 |
+
</head>
|
| 22 |
+
|
| 23 |
+
<body>
|
| 24 |
+
<div class="info">
|
| 25 |
+
<!-- New Info Page Content -->
|
| 26 |
+
<div class="info-page-container">
|
| 27 |
+
<div class="info-content">
|
| 28 |
+
<div class="info-header">
|
| 29 |
+
<span class="info-title-demo">λ°©μ¬μ μ€λͺ
λꡬ λ°λͺ¨</span><br>
|
| 30 |
+
<span class="info-title-demo info-subtitle-demo">κΈ°λ° κΈ°μ :</span>
|
| 31 |
+
<span class="info-title-med info-subtitle-demo">MedGemma</span>
|
| 32 |
+
</div>
|
| 33 |
+
<div class="info-text">λ°©μ¬μ μμκ³Όμ μνΈμμ©μ΄ νμ΅μ ν¬κ² ν₯μμν¬ μ μλ κ΅μ‘ μλ리μ€λ₯Ό μκ°ν΄λ³΄μΈμ. μ΄ λ°λͺ¨λ MedGemmaλ₯Ό κΈ°λ°μΌλ‘ λ°©μ¬μ μμκ³Ό κ΄λ ¨ λ³΄κ³ μλ₯Ό μ¬μ΄ μΈμ΄λ‘ λ²μνκ³ , μμμ κ΄λ ¨ μμμ μκ°μ μΌλ‘ κ°μ‘°νμ¬ νμν μ μλ μ μ©ν λꡬλ₯Ό μ 곡νλ λ°©λ²μ 보μ¬μ€λλ€.</div>
|
| 34 |
+
<div class="info-disclaimer-text"><span class="info-disclaimer-title">λ©΄μ±
μ‘°ν</span> μ΄ λ°λͺ¨λ μ€λͺ
λͺ©μ μΌλ‘λ§ μ 곡λλ©° μμ±λκ±°λ μΉμΈλ μ νμ λνλ΄μ§ μμ΅λλ€. νμ§, μμ μ± λλ ν¨λ₯μ λν κ·μ μ΄λ νμ€ μ€μλ₯Ό λνλ΄μ§ μμ΅λλ€. μ€μ μμ© νλ‘κ·Έλ¨μλ μΆκ° κ°λ°, κ΅μ‘ λ° μ μμ΄ νμν©λλ€. μ΄ λ°λͺ¨μμ κ°μ‘°λ κ²½νμ νμλ μμ
μ λν MedGemmaμ κΈ°λ³Έ κΈ°λ₯μ 보μ¬μ£Όλ©°, κ°λ°μμ μ¬μ©μκ° κ°λ₯ν μμ© νλ‘κ·Έλ¨μ νμνκ³ μΆκ° κ°λ°μ μκ°μ μ£Όλλ‘ λκΈ° μν κ²μ
λλ€.</div>
|
| 35 |
+
<button class="info-button" id="view-demo-button">λ°λͺ¨ 보기</button>
|
| 36 |
+
</div>
|
| 37 |
+
</div>
|
| 38 |
+
</div>
|
| 39 |
+
<div class="main">
|
| 40 |
+
<div class="nav-button nav-button-back" id="back-to-info-button">
|
| 41 |
+
<div class="nav-button-inner">
|
| 42 |
+
<span class="material-symbols-outlined nav-button-icon">keyboard_arrow_left</span>
|
| 43 |
+
<span class="nav-button-text">λ€λ‘</span>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="case-selector-tabs-container" id="case-selector-tabs-container">
|
| 47 |
+
<div>X-λ μ΄</div>
|
| 48 |
+
<div class="case-selector-tabs" id="case-selector-tabs">
|
| 49 |
+
{% if available_reports %}
|
| 50 |
+
{% for report in available_reports %}
|
| 51 |
+
{% if report.image_type == 'CXR' %}
|
| 52 |
+
<div class="nav-button nav-button-case" data-report-name="{{ report.name }}">
|
| 53 |
+
<div class="nav-button-inner">
|
| 54 |
+
<span class="nav-button-text">{{ report.name }}</span>
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
{% endif %}
|
| 58 |
+
{% endfor %}
|
| 59 |
+
{% else %}
|
| 60 |
+
<span class="no-cases-available">μ¬μ© κ°λ₯ν μΌμ΄μ€κ° μμ΅λλ€</span>
|
| 61 |
+
{% endif %}
|
| 62 |
+
</div>
|
| 63 |
+
|
| 64 |
+
<div>CT</div>
|
| 65 |
+
<div class="case-selector-tabs" id="case-selector-tabs2">
|
| 66 |
+
{% if available_reports %}
|
| 67 |
+
{% for report in available_reports %}
|
| 68 |
+
{% if report.image_type == 'CT' %}
|
| 69 |
+
<div class="nav-button nav-button-case" data-report-name="{{ report.name }}">
|
| 70 |
+
<div class="nav-button-inner">
|
| 71 |
+
<span class="nav-button-text">{{ report.name }}</span>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
{% endif %}
|
| 75 |
+
{% endfor %}
|
| 76 |
+
{% else %}
|
| 77 |
+
<span class="no-cases-available">μ¬μ© κ°λ₯ν μΌμ΄μ€κ° μμ΅λλ€</span>
|
| 78 |
+
{% endif %}
|
| 79 |
+
</div>
|
| 80 |
+
|
| 81 |
+
</div>
|
| 82 |
+
<div class="nav-button nav-button-info" id="info-button">
|
| 83 |
+
<div class="nav-button-inner">
|
| 84 |
+
<span class="material-symbols-outlined nav-button-icon">code_blocks</span>
|
| 85 |
+
<span class="nav-button-text">μ΄ λ°λͺ¨μ λν μμΈ μ 보</span>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
|
| 90 |
+
|
| 91 |
+
<div class="image-section">
|
| 92 |
+
<div id="image-modality-header" class="image-header">{{ image_type | default('μλ£ μμ', true) }}
|
| 93 |
+
</div> <!-- Updated: ID added, initial text changed -->
|
| 94 |
+
<div id="image-container" class="image-container"> <!-- Container for relative positioning -->
|
| 95 |
+
<img id="report-image" src="" alt="μλ£ μμ" style="display: none;">
|
| 96 |
+
<div id="image-loading" class="loading" style="display: none;">μ΄λ―Έμ§ λ‘λ© μ€...</div>
|
| 97 |
+
<div id="image-error" class="error-message" style="display: none;"></div>
|
| 98 |
+
</div>
|
| 99 |
+
<div id="ct-image-note" class="image-note">
|
| 100 |
+
μ΄κ²μ CTμ λ¨μΌ μ¬λΌμ΄μ€λ₯Ό 보μ¬μ€λλ€. λ³΄κ³ μμ λͺ¨λ μμλ₯Ό μκ°νν μλ μμ΅λλ€.
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
|
| 104 |
+
<div class="report-section">
|
| 105 |
+
<div id="app-loading" class="loading" style="display: none;">λ³΄κ³ μ μμΈ μ 보 λ‘λ© μ€...</div>
|
| 106 |
+
<div id="app-error" class="error-message" style="display: none;"></div>
|
| 107 |
+
<div class="explanation-section">
|
| 108 |
+
<div id="explanation-output" class="explanation-box">
|
| 109 |
+
<div id="explanation-loading" class="loading">μ€λͺ
μ μμ±νκ³ μμ΅λλ€... μ μλ§ κΈ°λ€λ €μ£ΌμΈμ.</div>
|
| 110 |
+
<div class="explanation-header">μ΄κ²μ΄ μλ―Ένλ λ°
|
| 111 |
+
</div>
|
| 112 |
+
<div id="explanation-content">
|
| 113 |
+
λ¬Έμ₯μ ν΄λ¦νλ©΄ μ¬κΈ°μ μ€λͺ
μ΄ νμλ©λλ€.
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
<div class="report-text-area">
|
| 118 |
+
<div id="report-text-display" >
|
| 119 |
+
<!-- Report text will be loaded here -->
|
| 120 |
+
λ³΄κ³ μλ₯Ό μ ννλ©΄ ν
μ€νΈκ° νμλ©λλ€.
|
| 121 |
+
</div>
|
| 122 |
+
<div class="floating-disclaimer">
|
| 123 |
+
<span class="material-symbols-outlined disclaimer-icon">warning</span>
|
| 124 |
+
<span class="disclaimer-text">μ΄ λ°λͺ¨λ MedGemmaμ κΈ°λ³Έ κΈ°λ₯μ μ€λͺ
νκΈ° μν λͺ©μ μΌλ‘λ§ μ 곡λ©λλ€. μμ±λκ±°λ μΉμΈλ μ νμ λνλ΄μ§ μμΌλ©°, μ§λ³μ΄λ μνλ₯Ό μ§λ¨νκ±°λ μΉλ£λ₯Ό μ μνκΈ° μν κ²μ΄ μλλ©°, μνμ μ‘°μΈμ μ¬μ©ν΄μλ μ λ©λλ€.</span>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
<!-- Embed available reports data for JavaScript -->
|
| 129 |
+
<script id="reports-data" type="application/json">
|
| 130 |
+
{{ available_reports | tojson | safe }}
|
| 131 |
+
</script>
|
| 132 |
+
<div id="explanation-error" class="error-message" style="display: none;"></div>
|
| 133 |
+
</div>
|
| 134 |
+
|
| 135 |
+
<!-- Immersive Info Dialog -->
|
| 136 |
+
<div id="immersive-info-dialog" class="dialog-overlay" style="display: none;" role="dialog" aria-modal="true"
|
| 137 |
+
aria-labelledby="dialog-title">
|
| 138 |
+
<div class="dialog-box">
|
| 139 |
+
<button id="dialog-close-button" class="dialog-close-btn" aria-label="λνμμ λ«κΈ°">
|
| 140 |
+
<span class="material-symbols-outlined">close</span>
|
| 141 |
+
</button>
|
| 142 |
+
<h2 id="dialog-title" class="dialog-title-text">μ΄ λ°λͺ¨μ λν μμΈ μ 보</h2>
|
| 143 |
+
<div class="dialog-body-scrollable">
|
| 144 |
+
<p><b>λͺ¨λΈ:</b> μ΄ λ°λͺ¨λ ꡬκΈμ MedGemma-4Bλ₯Ό λ
μ μ μΌλ‘ μ¬μ©ν©λλ€. μ΄λ Gemma 3 κΈ°λ° λͺ¨λΈλ‘, νλΆ X-λ μ΄μ κ°μ μλ£ ν
μ€νΈ λ° μ΄λ―Έμ§λ₯Ό μ΄ν΄νλλ‘ λ―ΈμΈ μ‘°μ λμμ΅λλ€. μλ£ λ°μ΄ν°μ κ³ κΈ ν΄μμ μ 곡νμ¬ AI κΈ°λ° μλ£ μ ν리μΌμ΄μ
κ°λ°μ κ°μννλ MedGemmaμ λ₯λ ₯μ 보μ¬μ€λλ€.</p>
|
| 145 |
+
<p><b>λͺ¨λΈ μ κ·Ό λ° μ¬μ©:</b> ꡬκΈμ MedGemma-4Bλ <a
|
| 146 |
+
href="https://huggingface.co/google/medgemma-4b-it" target="_blank">HuggingFace<img
|
| 147 |
+
class="hf-logo"
|
| 148 |
+
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg">
|
| 149 |
+
</a>μ
|
| 150 |
+
<a href="https://console.cloud.google.com/vertex-ai/publishers/google/model-garden/medgemma" target="_blank">Model
|
| 151 |
+
Garden <img class="hf-logo"
|
| 152 |
+
src="https://www.gstatic.com/cloud/images/icons/apple-icon.png"></a>μμ μ¬μ©ν μ μμ΅λλ€.
|
| 153 |
+
λͺ¨λΈ μ¬μ© λ° μ ν μ¬νμ λν μμΈν λ΄μ©μ <a
|
| 154 |
+
href="https://developers.google.com/health-ai-developer-foundations?referral=rad_explain"
|
| 155 |
+
target="_blank">HAI-DEF
|
| 156 |
+
κ°λ°μ μ¬μ΄νΈ</a>μμ νμΈνμΈμ.
|
| 157 |
+
</p>
|
| 158 |
+
<p><b>Health AI Developer Foundations (HAI-DEF)</b>λ κ°λ°μκ° μλ£ λΆμΌμ© AI λͺ¨λΈμ ꡬμΆν μ μλλ‘ νλ μ€ν μ¨μ΄νΈ λͺ¨λΈ λ° κ΄λ ¨ 리μμ€ λͺ¨μμ μ 곡ν©λλ€.</p>
|
| 159 |
+
<p><b>λ°λͺ¨κ° λ§μμ λμ
¨λμ?</b> μ¬λ¬λΆμ νΌλλ°±μ κΈ°λ€λ¦½λλ€! μ΄ λ°λͺ¨κ° λμμ΄ λμλ€λ©΄, μλ¨μ λ§ν¬λ HuggingFace νμ΄μ§μμ β‘ λ²νΌμ ν΄λ¦νμ¬ κ°μ¬μ λ§μμ ννν΄μ£ΌμΈμ.</p>
|
| 160 |
+
<p><b>λ λ§μ λ°λͺ¨ νμ:</b> HuggingFace Spaces λλ Colabμ ν΅ν΄ μΆκ° λ°λͺ¨λ₯Ό νμΈνμΈμ:
|
| 161 |
+
</p>
|
| 162 |
+
<ul>
|
| 163 |
+
<li><a href="https://huggingface.co/spaces/google/cxr-foundation-demo?referral=rad_explain"
|
| 164 |
+
target="_blank">
|
| 165 |
+
CXR Foundations λ°λͺ¨ <img class="hf-logo"
|
| 166 |
+
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
|
| 167 |
+
-
|
| 168 |
+
λΈλΌμ°μ μμ μ€νλλ λ°μ΄ν° ν¨μ¨μ μ΄κ³ μ λ‘μ· CXR μ΄λ―Έμ§ λΆλ₯λ₯Ό 보μ¬μ€λλ€.</li>
|
| 169 |
+
<li><a href="https://huggingface.co/spaces/google/path-foundation-demo?referral=rad_explain"
|
| 170 |
+
target="_blank">
|
| 171 |
+
Path Foundations λ°λͺ¨ <img class="hf-logo"
|
| 172 |
+
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
|
| 173 |
+
-
|
| 174 |
+
λΈλΌμ°μ μμ μ€νλλ λ°μ΄ν° ν¨μ¨μ μΈ λΆλ₯ λ° λ³λ¦¬ μ¬λΌμ΄λ λ΄ μ΄μμΉ νμ§λ₯Ό κ°μ‘°ν©λλ€.</li>
|
| 175 |
+
<li><a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/fine_tune_with_hugging_face.ipynb" target="_blank">
|
| 176 |
+
MedGemma λ―ΈμΈ μ‘°μ Colab <img class="hf-logo"
|
| 177 |
+
src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Colaboratory_SVG_Logo.svg"></a>
|
| 178 |
+
-
|
| 179 |
+
μ΄ λͺ¨λΈμ λ―ΈμΈ μ‘°μ νλ λ°©λ²μ μμ λ₯Ό νμΈνμΈμ.</li>
|
| 180 |
+
</ul>
|
| 181 |
+
</div>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
</body>
|
| 185 |
|
| 186 |
+
</html><!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 187 |
|
| 188 |
+
<html lang="ko">
|
| 189 |
|
| 190 |
<head>
|
| 191 |
<meta charset="UTF-8">
|
| 192 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 193 |
+
<title>λ°©μ¬μ λ³΄κ³ μ μ€λͺ
λꡬ</title>
|
| 194 |
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| 195 |
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 196 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
| 211 |
<div class="info-page-container">
|
| 212 |
<div class="info-content">
|
| 213 |
<div class="info-header">
|
| 214 |
+
<span class="info-title-demo">λ°©μ¬μ μ€λͺ
λꡬ λ°λͺ¨</span><br>
|
| 215 |
+
<span class="info-title-demo info-subtitle-demo">κΈ°λ° κΈ°μ :</span>
|
| 216 |
<span class="info-title-med info-subtitle-demo">MedGemma</span>
|
| 217 |
</div>
|
| 218 |
+
<div class="info-text">λ°©μ¬μ μμκ³Όμ μνΈμμ©μ΄ νμ΅μ ν¬κ² ν₯μμν¬ μ μλ κ΅μ‘ μλ리μ€λ₯Ό μκ°ν΄λ³΄μΈμ. μ΄ λ°λͺ¨λ MedGemmaλ₯Ό κΈ°λ°μΌλ‘ λ°©μ¬μ μμκ³Ό κ΄λ ¨ λ³΄κ³ μλ₯Ό μ¬μ΄ μΈμ΄λ‘ λ²μνκ³ , μμμ κ΄λ ¨ μμμ μκ°μ μΌλ‘ κ°μ‘°νμ¬ νμν μ μλ μ μ©ν λꡬλ₯Ό μ 곡νλ λ°©λ²μ 보μ¬μ€λλ€.</div>
|
| 219 |
+
<div class="info-disclaimer-text"><span class="info-disclaimer-title">λ©΄μ±
μ‘°ν</span> μ΄ λ°λͺ¨λ μ€λͺ
λͺ©μ μΌλ‘λ§ μ 곡λλ©° μμ±λκ±°λ μΉμΈλ μ νμ λνλ΄μ§ μμ΅λλ€. νμ§, μμ μ± λλ ν¨λ₯μ λν κ·μ μ΄λ νμ€ μ€μλ₯Ό λνλ΄μ§ μμ΅λλ€. μ€μ μμ© νλ‘κ·Έλ¨μλ μΆκ° κ°λ°, κ΅μ‘ λ° μ μμ΄ νμν©λλ€. μ΄ λ°λͺ¨μμ κ°μ‘°λ κ²½νμ νμλ μμ
μ λν MedGemmaμ κΈ°λ³Έ κΈ°λ₯μ 보μ¬μ£Όλ©°, κ°λ°μμ μ¬μ©μκ° κ°λ₯ν μμ© νλ‘κ·Έλ¨μ νμνκ³ μΆκ° κ°λ°μ μκ°μ μ£Όλλ‘ λκΈ° μν κ²μ
λλ€.</div>
|
| 220 |
+
<button class="info-button" id="view-demo-button">λ°λͺ¨ 보기</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 221 |
</div>
|
| 222 |
</div>
|
| 223 |
</div>
|
|
|
|
| 225 |
<div class="nav-button nav-button-back" id="back-to-info-button">
|
| 226 |
<div class="nav-button-inner">
|
| 227 |
<span class="material-symbols-outlined nav-button-icon">keyboard_arrow_left</span>
|
| 228 |
+
<span class="nav-button-text">λ€λ‘</span>
|
| 229 |
</div>
|
| 230 |
</div>
|
| 231 |
<div class="case-selector-tabs-container" id="case-selector-tabs-container">
|
| 232 |
+
<div>X-λ μ΄</div>
|
| 233 |
<div class="case-selector-tabs" id="case-selector-tabs">
|
| 234 |
{% if available_reports %}
|
| 235 |
{% for report in available_reports %}
|
|
|
|
| 242 |
{% endif %}
|
| 243 |
{% endfor %}
|
| 244 |
{% else %}
|
| 245 |
+
<span class="no-cases-available">μ¬μ© κ°λ₯ν μΌμ΄μ€κ° μμ΅λλ€</span>
|
| 246 |
{% endif %}
|
| 247 |
</div>
|
| 248 |
|
|
|
|
| 259 |
{% endif %}
|
| 260 |
{% endfor %}
|
| 261 |
{% else %}
|
| 262 |
+
<span class="no-cases-available">μ¬μ© κ°λ₯ν μΌμ΄μ€κ° μμ΅λλ€</span>
|
| 263 |
{% endif %}
|
| 264 |
</div>
|
| 265 |
|
|
|
|
| 267 |
<div class="nav-button nav-button-info" id="info-button">
|
| 268 |
<div class="nav-button-inner">
|
| 269 |
<span class="material-symbols-outlined nav-button-icon">code_blocks</span>
|
| 270 |
+
<span class="nav-button-text">μ΄ λ°λͺ¨μ λν μμΈ μ 보</span>
|
| 271 |
</div>
|
| 272 |
</div>
|
| 273 |
|
| 274 |
|
| 275 |
|
| 276 |
<div class="image-section">
|
| 277 |
+
<div id="image-modality-header" class="image-header">{{ image_type | default('μλ£ μμ', true) }}
|
| 278 |
</div> <!-- Updated: ID added, initial text changed -->
|
| 279 |
<div id="image-container" class="image-container"> <!-- Container for relative positioning -->
|
| 280 |
+
<img id="report-image" src="" alt="μλ£ μμ" style="display: none;">
|
| 281 |
+
<div id="image-loading" class="loading" style="display: none;">μ΄λ―Έμ§ λ‘λ© μ€...</div>
|
| 282 |
<div id="image-error" class="error-message" style="display: none;"></div>
|
| 283 |
</div>
|
| 284 |
<div id="ct-image-note" class="image-note">
|
| 285 |
+
μ΄κ²μ CTμ λ¨μΌ μ¬λΌμ΄μ€λ₯Ό 보μ¬μ€λλ€. λ³΄κ³ μμ λͺ¨λ μμλ₯Ό μκ°νν μλ μμ΅λλ€.
|
| 286 |
</div>
|
| 287 |
</div>
|
| 288 |
|
| 289 |
<div class="report-section">
|
| 290 |
+
<div id="app-loading" class="loading" style="display: none;">λ³΄κ³ μ μμΈ μ 보 λ‘λ© μ€...</div>
|
| 291 |
<div id="app-error" class="error-message" style="display: none;"></div>
|
| 292 |
<div class="explanation-section">
|
| 293 |
<div id="explanation-output" class="explanation-box">
|
| 294 |
+
<div id="explanation-loading" class="loading">μ€λͺ
μ μμ±νκ³ μμ΅λλ€... μ μλ§ κΈ°λ€λ €μ£ΌμΈμ.</div>
|
| 295 |
+
<div class="explanation-header">μ΄κ²μ΄ μλ―Ένλ λ°
|
| 296 |
</div>
|
| 297 |
<div id="explanation-content">
|
| 298 |
+
λ¬Έμ₯μ ν΄λ¦νλ©΄ μ¬κΈ°μ μ€λͺ
μ΄ νμλ©λλ€.
|
| 299 |
</div>
|
| 300 |
</div>
|
| 301 |
</div>
|
| 302 |
<div class="report-text-area">
|
| 303 |
<div id="report-text-display" >
|
| 304 |
<!-- Report text will be loaded here -->
|
| 305 |
+
λ³΄κ³ μλ₯Ό μ ννλ©΄ ν
μ€νΈκ° νμλ©λλ€.
|
| 306 |
</div>
|
| 307 |
<div class="floating-disclaimer">
|
| 308 |
<span class="material-symbols-outlined disclaimer-icon">warning</span>
|
| 309 |
+
<span class="disclaimer-text">μ΄ λ°λͺ¨λ MedGemmaμ κΈ°λ³Έ κΈ°λ₯μ μ€λͺ
νκΈ° μν λͺ©μ μΌλ‘λ§ μ 곡λ©λλ€. μμ±λκ±°λ μΉμΈλ μ νμ λνλ΄μ§ μμΌλ©°, μ§λ³μ΄λ μνλ₯Ό μ§λ¨νκ±°λ μΉλ£λ₯Ό μ μνκΈ° μν κ²μ΄ μλλ©°, μνμ μ‘°μΈμ μ¬μ©ν΄μλ μ λ©λλ€.</span>
|
|
|
|
|
|
|
|
|
|
| 310 |
</div>
|
| 311 |
</div>
|
| 312 |
</div>
|
|
|
|
| 321 |
<div id="immersive-info-dialog" class="dialog-overlay" style="display: none;" role="dialog" aria-modal="true"
|
| 322 |
aria-labelledby="dialog-title">
|
| 323 |
<div class="dialog-box">
|
| 324 |
+
<button id="dialog-close-button" class="dialog-close-btn" aria-label="λνμμ λ«κΈ°">
|
| 325 |
<span class="material-symbols-outlined">close</span>
|
| 326 |
</button>
|
| 327 |
+
<h2 id="dialog-title" class="dialog-title-text">μ΄ λ°λͺ¨μ λν μμΈ μ 보</h2>
|
| 328 |
<div class="dialog-body-scrollable">
|
| 329 |
+
<p><b>λͺ¨λΈ:</b> μ΄ λ°λͺ¨λ ꡬκΈμ MedGemma-4Bλ₯Ό λ
μ μ μΌλ‘ μ¬μ©ν©λλ€. μ΄λ Gemma 3 κΈ°λ° λͺ¨λΈλ‘, νλΆ X-λ μ΄μ κ°μ μλ£ ν
μ€νΈ λ° μ΄λ―Έμ§λ₯Ό μ΄ν΄νλλ‘ λ―ΈμΈ μ‘°μ λμμ΅λλ€. μλ£ λ°μ΄ν°μ κ³ κΈ ν΄μμ μ 곡νμ¬ AI κΈ°λ° μλ£ μ ν리μΌμ΄μ
κ°λ°μ κ°μννλ MedGemmaμ λ₯λ ₯μ 보μ¬μ€λλ€.</p>
|
| 330 |
+
<p><b>λͺ¨λΈ μ κ·Ό λ° μ¬μ©:</b> ꡬκΈμ MedGemma-4Bλ <a
|
|
|
|
|
|
|
|
|
|
|
|
|
| 331 |
href="https://huggingface.co/google/medgemma-4b-it" target="_blank">HuggingFace<img
|
| 332 |
class="hf-logo"
|
| 333 |
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg">
|
| 334 |
+
</a>μ
|
| 335 |
<a href="https://console.cloud.google.com/vertex-ai/publishers/google/model-garden/medgemma" target="_blank">Model
|
| 336 |
Garden <img class="hf-logo"
|
| 337 |
+
src="https://www.gstatic.com/cloud/images/icons/apple-icon.png"></a>μμ μ¬μ©ν μ μμ΅λλ€.
|
| 338 |
+
λͺ¨λΈ μ¬μ© λ° μ ν μ¬νμ λν μμΈν λ΄μ©μ <a
|
| 339 |
href="https://developers.google.com/health-ai-developer-foundations?referral=rad_explain"
|
| 340 |
target="_blank">HAI-DEF
|
| 341 |
+
κ°λ°μ μ¬μ΄νΈ</a>μμ νμΈνμΈμ.
|
| 342 |
</p>
|
| 343 |
+
<p><b>Health AI Developer Foundations (HAI-DEF)</b>λ κ°λ°μκ° μλ£ λΆμΌμ© AI λͺ¨λΈμ ꡬμΆν μ μλλ‘ νλ μ€ν μ¨μ΄νΈ λͺ¨λΈ λ° κ΄λ ¨ 리μμ€ λͺ¨μμ μ 곡ν©λλ€.</p>
|
| 344 |
+
<p><b>λ°λͺ¨κ° λ§μμ λμ
¨λμ?</b> μ¬λ¬λΆμ νΌλλ°±μ κΈ°λ€λ¦½λλ€! μ΄ λ°λͺ¨κ° λμμ΄ λμλ€λ©΄, μλ¨μ λ§ν¬λ HuggingFace νμ΄μ§μμ β‘ λ²νΌμ ν΄λ¦νμ¬ κ°μ¬μ λ§μμ ννν΄μ£ΌμΈμ.</p>
|
| 345 |
+
<p><b>λ λ§μ λ°λͺ¨ νμ:</b> HuggingFace Spaces λλ Colabμ ν΅ν΄ μΆκ° λ°λͺ¨λ₯Ό νμΈνμΈμ:
|
|
|
|
|
|
|
| 346 |
</p>
|
| 347 |
<ul>
|
| 348 |
<li><a href="https://huggingface.co/spaces/google/cxr-foundation-demo?referral=rad_explain"
|
| 349 |
target="_blank">
|
| 350 |
+
CXR Foundations λ°λͺ¨ <img class="hf-logo"
|
| 351 |
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
|
| 352 |
-
|
| 353 |
+
λΈλΌμ°μ μμ μ€νλλ λ°μ΄ν° ν¨μ¨μ μ΄κ³ μ λ‘μ· CXR μ΄λ―Έμ§ λΆλ₯λ₯Ό 보μ¬μ€λλ€.</li>
|
| 354 |
<li><a href="https://huggingface.co/spaces/google/path-foundation-demo?referral=rad_explain"
|
| 355 |
target="_blank">
|
| 356 |
+
Path Foundations λ°λͺ¨ <img class="hf-logo"
|
| 357 |
src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
|
| 358 |
-
|
| 359 |
+
λΈλΌμ°μ μμ μ€νλλ λ°μ΄ν° ν¨μ¨μ μΈ λΆλ₯ λ° λ³λ¦¬ μ¬λΌμ΄λ λ΄ μ΄μμΉ νμ§λ₯Ό κ°μ‘°ν©λλ€.</li>
|
|
|
|
| 360 |
<li><a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/fine_tune_with_hugging_face.ipynb" target="_blank">
|
| 361 |
+
MedGemma λ―ΈμΈ μ‘°μ Colab <img class="hf-logo"
|
| 362 |
src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Colaboratory_SVG_Logo.svg"></a>
|
| 363 |
-
|
| 364 |
+
μ΄ λͺ¨λΈμ λ―ΈμΈ μ‘°μ νλ λ°©λ²μ μμ λ₯Ό νμΈνμΈμ.</li>
|
| 365 |
</ul>
|
| 366 |
</div>
|
| 367 |
</div>
|