Update templates/index.html

templates/index.html

@@ -88,191 +88,6 @@
  
 
 
-        <div class="image-section">
-            <div id="image-modality-header" class="image-header">{{ image_type | default('의료 영상', 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="의료 영상" style="display: none;">
-                <div id="image-loading" class="loading" style="display: none;">이미지 로딩 중...</div>
-                <div id="image-error" class="error-message" style="display: none;"></div>
-            </div>
-            <div id="ct-image-note" class="image-note">
-                이것은 CT의 단일 슬라이스를 보여줍니다. 보고서의 모든 요소를 시각화할 수는 없습니다.
-            </div>
-        </div>
-
-        <div class="report-section">
-            <div id="app-loading" class="loading" style="display: none;">보고서 상세 정보 로딩 중...</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">설명을 생성하고 있습니다... 잠시만 기다려주세요.</div>
-                    <div class="explanation-header">이것이 의미하는 바
-                    </div>
-                    <div id="explanation-content">
-                        문장을 클릭하면 여기에 설명이 표시됩니다.
-                    </div>
-                </div>
-            </div>
-            <div class="report-text-area">
-            <div id="report-text-display" >
-                <!-- Report text will be loaded here -->
-                보고서를 선택하면 텍스트가 표시됩니다.
-            </div>
-            <div class="floating-disclaimer">
-                <span class="material-symbols-outlined disclaimer-icon">warning</span>
-                <span class="disclaimer-text">이 데모는 MedGemma의 기본 기능을 설명하기 위한 목적으로만 제공됩니다. 완성되거나 승인된 제품을 나타내지 않으며, 질병이나 상태를 진단하거나 치료를 제안하기 위한 것이 아니며, 의학적 조언에 사용해서는 안 됩니다.</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="대화상자 닫기">
-                <span class="material-symbols-outlined">close</span>
-            </button>
-            <h2 id="dialog-title" class="dialog-title-text">이 데모에 대한 상세 정보</h2>
-            <div class="dialog-body-scrollable">
-                <p><b>모델:</b> 이 데모는 구글의 MedGemma-4B를 독점적으로 사용합니다. 이는 Gemma 3 기반 모델로, 흉부 X-레이와 같은 의료 텍스트 및 이미지를 이해하도록 미세 조정되었습니다. 의료 데이터의 고급 해석을 제공하여 AI 기반 의료 애플리케이션 개발을 가속화하는 MedGemma의 능력을 보여줍니다.</p>
-                <p><b>모델 접근 및 사용:</b> 구글의 MedGemma-4B는 <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>와
-                    <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>에서 사용할 수 있습니다.
-                    모델 사용 및 제한 사항에 대한 자세한 내용은 <a
-                        href="https://developers.google.com/health-ai-developer-foundations?referral=rad_explain"
-                        target="_blank">HAI-DEF
-                        개발자 사이트</a>에서 확인하세요.
-                </p>
-                <p><b>Health AI Developer Foundations (HAI-DEF)</b>는 개발자가 의료 분야용 AI 모델을 구축할 수 있도록 하는 오픈 웨이트 모델 및 관련 리소스 모음을 제공합니다.</p>
-                <p><b>데모가 마음에 드셨나요?</b> 여러분의 피드백을 기��립니다! 이 데모가 도움이 되었다면, 상단에 링크된 HuggingFace 페이지에서 ♡ 버튼을 클릭하여 감사의 마음을 표현해주세요.</p>
-                <p><b>더 많은 데모 탐색:</b> HuggingFace Spaces 또는 Colab을 통해 추가 데모를 확인하세요:
-                </p>
-                <ul>
-                    <li><a href="https://huggingface.co/spaces/google/cxr-foundation-demo?referral=rad_explain"
-                            target="_blank">
-                            CXR Foundations 데모 <img class="hf-logo"
-                                src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
-                        -
-                        브라우저에서 실행되는 데이터 효율적이고 제로샷 CXR 이미지 분류를 보여줍니다.</li>
-                    <li><a href="https://huggingface.co/spaces/google/path-foundation-demo?referral=rad_explain"
-                            target="_blank">
-                            Path Foundations 데모 <img class="hf-logo"
-                                src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"></a>
-                        -
-                        브라우저에서 실행되는 데이터 효율적인 분류 및 병리 슬라이드 내 이상치 탐지를 강조합니다.</li>
-                    <li><a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/fine_tune_with_hugging_face.ipynb" target="_blank">
-                            MedGemma 미세 조정 Colab <img class="hf-logo"
-                                src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Colaboratory_SVG_Logo.svg"></a>
-                        -
-                        이 모델을 미세 조정하는 방법의 예제를 확인하세요.</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</body>
-
-</html><!DOCTYPE html>
-
-<html lang="ko">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>방사선 보고서 설명 도구</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">방사선 설명 도구 데모</span><br>
-                    <span class="info-title-demo info-subtitle-demo">기반 기술:</span>
-                    <span class="info-title-med info-subtitle-demo">MedGemma</span>
-                </div>
-                <div class="info-text">방사선 영상과의 상호작용이 학습을 크게 향상시킬 수 있는 교육 시나리오를 생각해보세요. 이 데모는 MedGemma를 기반으로 방사선 영상과 관련 보고서를 쉬운 언어로 번역하고, 영상의 관련 영역을 시각적으로 강조하여 탐색할 수 있는 유용한 도구를 제공하는 방법을 보여줍니다.</div>
-                <div class="info-disclaimer-text"><span class="info-disclaimer-title">면책 조항</span> 이 데모는 설명 목적으로만 제공되며 완성되거나 승인된 제품을 나타내지 않습니다. 품질, 안전성 또는 효능에 대한 규정이나 표준 준수를 나타내지 않습니다. 실제 응용 프로그램에는 추가 개발, 교육 및 적응이 필요합니다. 이 데모에서 강조된 경험은 표시된 작업에 대한 MedGemma의 기본 기능을 보여주며, 개발자와 사용자가 가능한 응용 프로그램을 탐색하고 추가 개발에 영감을 주도록 돕기 위한 것입니다.</div>
-                <button class="info-button" id="view-demo-button">데모 보기</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">뒤로</span>
-                </div>
-            </div>
-            <div class="case-selector-tabs-container" id="case-selector-tabs-container">
-                    <div>X-레이</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">사용 가능한 케이스가 없습니다</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">사용 가능한 케이스가 없습니다</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">이 데모에 대한 상세 정보</span>
-                </div>
-            </div>
- 
-
-
         <div class="image-section">
             <div id="image-modality-header" class="image-header">{{ image_type | default('의료 영상', true) }}
             </div> <!-- Updated: ID added, initial text changed -->