rad_explain2

Sleeping

App Files Files Community

rad_explain2 / templates /index.html

seawolf2357

Update templates/index.html

79b7afb verified 2 months ago

raw

history blame contribute delete

20.2 kB

	<!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>