rad_explain2

Sleeping

File size: 20,209 Bytes

<!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 style="margin-top: 20px; border-top: 1px solid #ddd; padding-top: 20px;">이미지 업로드</div>
                    <div class="upload-section" style="padding: 20px; background-color: #f5f5f5; border-radius: 8px; margin-top: 10px;">
                        <form id="upload-form" enctype="multipart/form-data">
                            <div style="margin-bottom: 15px;">
                                <label for="image-upload" style="display: block; margin-bottom: 5px; font-weight: 500;">의료 영상 선택:</label>
                                <input type="file" id="image-upload" name="image" accept=".png,.jpg,.jpeg,.gif,.bmp,.dcm,.dicom" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <label for="image-type-select" style="display: block; margin-bottom: 5px; font-weight: 500;">영상 유형:</label>
                                <select id="image-type-select" name="image_type" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    <option value="CXR">흉부 X-레이</option>
                                    <option value="CT">CT</option>
                                    <option value="OTHER">기타 의료 영상</option>
                                </select>
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <label for="context-input" style="display: block; margin-bottom: 5px; font-weight: 500;">추가 정보 (선택사항):</label>
                                <textarea id="context-input" name="context" rows="3" placeholder="환자 증상이나 검사 목적 등을 입력하세요" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"></textarea>
                            </div>
                            
                            <button type="submit" class="nav-button" style="width: 100%; padding: 12px; background-color: #4285f4; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
                                <span class="material-symbols-outlined" style="vertical-align: middle; margin-right: 5px;">upload</span>
                                판독 가이드 받기
                            </button>
                        </form>
                    </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 -->
            <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>
    
    <script>
    // 이미지 업로드 폼 처리
    document.addEventListener('DOMContentLoaded', function() {
        const uploadForm = document.getElementById('upload-form');
        if (uploadForm) {
            uploadForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const submitButton = this.querySelector('button[type="submit"]');
                const originalButtonText = submitButton.innerHTML;
                
                // 로딩 상태 표시
                submitButton.disabled = true;
                submitButton.innerHTML = '<span class="material-symbols-outlined" style="vertical-align: middle; margin-right: 5px;">hourglass_empty</span>가이드 생성 중...';
                
                // 기존 에러 메시지 제거
                const errorDiv = document.getElementById('explanation-error');
                if (errorDiv) {
                    errorDiv.style.display = 'none';
                    errorDiv.textContent = '';
                }
                
                try {
                    const response = await fetch('/upload_and_analyze', {
                        method: 'POST',
                        body: formData
                    });
                    
                    const result = await response.json();
                    
                    if (response.ok) {
                        // 업로드된 이미지 표시
                        const fileInput = document.getElementById('image-upload');
                        const file = fileInput.files[0];
                        if (file) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const reportImage = document.getElementById('report-image');
                                if (reportImage) {
                                    reportImage.src = e.target.result;
                                    reportImage.style.display = 'block';
                                }
                            };
                            reader.readAsDataURL(file);
                        }
                        
                        // 분석 결과 표시
                        const explanationContent = document.getElementById('explanation-content');
                        if (explanationContent) {
                            explanationContent.innerHTML = result.analysis.replace(/\n/g, '<br>');
                        }
                        
                        // 보고서 텍스트 영역에 업로드 정보 표시
                        const reportTextDisplay = document.getElementById('report-text-display');
                        if (reportTextDisplay) {
                            reportTextDisplay.innerHTML = '<div style="padding: 20px; background-color: #e8f4f8; border-radius: 8px;">' +
                                '<h3 style="margin-top: 0;">영상 판독 가이드</h3>' +
                                '<p>파일명: ' + file.name + '</p>' +
                                '<p>영상 유형: ' + document.getElementById('image-type-select').selectedOptions[0].text + '</p>' +
                                (document.getElementById('context-input').value ? '<p>추가 정보: ' + document.getElementById('context-input').value + '</p>' : '') +
                                '<p style="margin-top: 10px; padding: 10px; background-color: #fff3cd; border-radius: 4px;">⚠️ 업로드하신 영상에 대한 일반적인 판독 가이드를 제공합니다.</p>' +
                                '</div>';
                        }
                        
                        // 설명 로딩 메시지 숨기기
                        const explanationLoading = document.getElementById('explanation-loading');
                        if (explanationLoading) {
                            explanationLoading.style.display = 'none';
                        }
                        
                        // 이미지 헤더 업데이트
                        const imageHeader = document.getElementById('image-modality-header');
                        if (imageHeader) {
                            imageHeader.textContent = document.getElementById('image-type-select').selectedOptions[0].text;
                        }
                        
                    } else {
                        // 에러 표시
                        if (errorDiv) {
                            errorDiv.textContent = result.error || '가이드 생성 중 오류가 발생했습니다.';
                            errorDiv.style.display = 'block';
                        }
                    }
                } catch (error) {
                    console.error('업로드 오류:', error);
                    if (errorDiv) {
                        errorDiv.textContent = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
                        errorDiv.style.display = 'block';
                    }
                } finally {
                    // 버튼 원래 상태로 복원
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalButtonText;
                }
            });
        }
    });
    </script>
</body>

</html>