Spaces:

alexdatamed
/

Lecture6_AI_in_Medicine

Running

App Files Files Community

Lecture6_AI_in_Medicine / index.html

alexdatamed

Upload 11 files

f166430 verified 9 months ago

raw

history blame contribute delete

12.2 kB

	<!DOCTYPE html>
	<html lang="uk">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Вступ до AI в медицині</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	</head>
	<body>
	<div class="theme-toggle">
	<button id="themeToggle" class="btn btn--secondary">🌙 Темна тема</button>
	</div>

	<header class="hero">
	<div class="container">
	<h1>Вступ до AI в медицині</h1>
	<p class="hero-subtitle">Інтерактивний дашборд для розуміння штучного інтелекту в охороні здоров'я</p>
	<div class="hero-description">
	<p>Цей дашборд створено для студентів, лікарів та інженерів, щоб швидко зрозуміти принципи роботи AI в медицині та побачити реальні приклади застосування.</p>
	</div>
	</div>
	</header>

	<nav class="dashboard-nav">
	<div class="container">
	<ul class="nav-list">
	<li><a href="#what-is-ai">Що таке AI</a></li>
	<li><a href="#applications">Застосування</a></li>
	<li><a href="#ai-types">Типи AI</a></li>
	<li><a href="#examples">Приклади</a></li>
	<li><a href="#problems">Проблеми</a></li>
	<li><a href="#trends">Тренди</a></li>
	<li><a href="#demo">Демо</a></li>
	<li><a href="#stats">Статистика</a></li>
	</ul>
	</div>
	</nav>

	<main class="dashboard-main">
	<!-- Block 1: What is AI in Medicine -->
	<section id="what-is-ai" class="dashboard-section">
	<div class="container">
	<h2>🔍 Що таке AI в медицині</h2>
	<div class="ai-explanation">
	<div class="ai-text">
	<h3>Основні принципи</h3>
	<ul>
	<li><strong>AI = алгоритми</strong>, що аналізують медичні дані</li>
	<li><strong>Не замінює лікаря</strong>, а допомагає в рутинних задачах</li>
	<li><strong>Підвищує точність</strong> діагностики та прогнозування</li>
	<li><strong>Прискорює обробку</strong> великих обсягів інформації</li>
	</ul>
	</div>
	<div class="ai-visual">
	<div class="cooperation-diagram">
	<div class="doctor-side">
	<div class="icon">👨‍⚕️</div>
	<h4>Лікар</h4>
	<p>Приймає рішення</p>
	<p>Спілкується з пацієнтом</p>
	<p>Встановлює діагноз</p>
	</div>
	<div class="plus-sign">+</div>
	<div class="ai-side">
	<div class="icon">🤖</div>
	<h4>AI-помічник</h4>
	<p>Аналізує дані</p>
	<p>Виявляє патерни</p>
	<p>Надає рекомендації</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Block 2: Main Applications -->
	<section id="applications" class="dashboard-section">
	<div class="container">
	<h2>🏥 Основні напрями використання</h2>
	<div class="applications-grid">
	<div class="card application-card">
	<div class="card__body">
	<h3>Класифікація та діагностика</h3>
	<p>Рентген, КТ, МРТ — автоматичний аналіз зображень; Лабораторні аналізи</p>
	<div class="accuracy-badge">Точність: 95-99%</div>
	</div>
	</div>
	<div class="card application-card">
	<div class="card__body">
	<h3>Прогнозування та профілактика</h3>
	<p>Ризик захворювань, прогноз виживаності, раннє виявлення хвороб</p>
	<div class="accuracy-badge">Точність: 90-95%</div>
	</div>
	</div>
	<div class="card application-card">
	<div class="card__body">
	<h3>Персоналізація лікування</h3>
	<p>Рекомендації по лікам, індивідуальні плани лікування</p>
	<div class="accuracy-badge">Точність: 85-95%</div>
	</div>
	</div>
	<div class="card application-card">
	<div class="card__body">
	<h3>Адміністративні завдання</h3>
	<p>Обробка медичних записів, планування ресурсів</p>
	<div class="accuracy-badge">Точність: 80-90%</div>
	</div>
	</div>
	<div class="card application-card">
	<div class="card__body">
	<h3>Дослідження та розробка ліків</h3>
	<p>Відкриття нових ліків, клінічні дослідження</p>
	<div class="accuracy-badge">Точність: 70-85%</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Block 3: AI Types -->
	<section id="ai-types" class="dashboard-section">
	<div class="container">
	<h2>📊 Типи AI алгоритмів</h2>
	<div class="ai-types-table">
	<div class="table-responsive">
	<table class="ai-table">
	<thead>
	<tr>
	<th>Тип алгоритму</th>
	<th>Що робить</th>
	<th>Медичний приклад</th>
	</tr>
	</thead>
	<tbody id="aiTypesTable">
	<!-- Data will be populated by JavaScript -->
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</section>

	<!-- Block 4: Examples -->
	<section id="examples" class="dashboard-section">
	<div class="container">
	<h2>📂 Приклади застосування в Україні та світі</h2>
	<div class="examples-container">
	<div class="examples-section">
	<h3>🌍 Світові лідери</h3>
	<div class="examples-grid" id="worldExamples">
	<!-- Data will be populated by JavaScript -->
	</div>
	</div>
	<div class="examples-section">
	<h3>🇺🇦 Українські розробки</h3>
	<div class="examples-grid" id="ukraineExamples">
	<!-- Data will be populated by JavaScript -->
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Block 5: Problems -->
	<section id="problems" class="dashboard-section">
	<div class="container">
	<h2>⚙️ Типові проблеми AI в медицині</h2>
	<div class="problems-grid" id="problemsGrid">
	<!-- Data will be populated by JavaScript -->
	</div>
	</div>
	</section>

	<!-- Block 6: Trends -->
	<section id="trends" class="dashboard-section">
	<div class="container">
	<h2>🔮 Тренди майбутнього</h2>
	<div class="trends-grid" id="trendsGrid">
	<!-- Data will be populated by JavaScript -->
	</div>
	</div>
	</section>

	<!-- Block 7: Interactive Demo -->
	<section id="demo" class="dashboard-section">
	<div class="container">
	<h2>▶️ Інтерактивний демо: AI помічник</h2>
	<div class="demo-container">
	<div class="demo-form">
	<h3>Оберіть симптоми для аналізу</h3>
	<form id="symptomsForm">
	<div class="form-group">
	<label class="form-label">Основні симптоми:</label>
	<select id="symptomsSelect" class="form-control">
	<option value="">Оберіть симптом...</option>
	<!-- Options will be populated by JavaScript -->
	</select>
	</div>
	<button type="submit" class="btn btn--primary">Отримати AI-оцінку</button>
	</form>
	</div>
	<div class="demo-results" id="demoResults">
	<!-- Results will be displayed here -->
	</div>
	</div>
	</div>
	</section>

	<!-- Block 8: Statistics -->
	<section id="stats" class="dashboard-section">
	<div class="container">
	<h2>📊 Статистика adoption</h2>
	<div class="stats-container">
	<div class="stats-charts">
	<div class="chart-container">
	<h3>Розмір ринку AI в медицині (млрд USD)</h3>
	<canvas id="marketChart"></canvas>
	</div>
	<div class="chart-container">
	<h3>Кількість AI проектів у медицині</h3>
	<canvas id="projectsChart"></canvas>
	</div>
	<div class="chart-container">
	<h3>FDA схвалення AI медичних пристроїв</h3>
	<canvas id="approvalsChart"></canvas>
	</div>
	</div>
	</div>
	</div>
	</section>
	</main>

	<footer class="dashboard-footer">
	<div class="container">
	<p>© 2025 AI в медицині. Дашборд для освітніх цілей.</p>
	</div>
	</footer>

	<script src="app.js"></script>
	</body>
	</html>