rad_explain2

Running

App Files Files Community

rad_explain2 / templates /index.html

seawolf2357

Update templates/index.html

fc74d98 verified 3 months ago

raw

history blame

24.4 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>
	<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>
	</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 -->
	<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>