Базовый коммит
This commit is contained in:
Aleksandr Mochalov
@@ -0,0 +1,233 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Вход в сервис</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 0 auto 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lf--label {
|
||||
height: 48px;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f6f8;
|
||||
border: 2px solid #ddd;
|
||||
border-right: none;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lf--input {
|
||||
flex: 1;
|
||||
padding: 12px 15px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 0 8px 8px 0;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.lf--input:focus {
|
||||
border-color: #3498db;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lf--submit {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #c182b9 0%, #5ac6c8 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.lf--submit:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d9534f;
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.forgot-password:hover {
|
||||
color: #2980b9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.login-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lf--label {
|
||||
width: 100%;
|
||||
border: 2px solid #ddd;
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.lf--input {
|
||||
border: 2px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<div class="logo-container">
|
||||
<img src="static/logo.png" alt="Логотип" class="logo">
|
||||
</div>
|
||||
<h1>Вход в сервис</h1>
|
||||
<p>Введите ваши учетные данные</p>
|
||||
</div>
|
||||
|
||||
<div class="login-content">
|
||||
<!-- Сообщение об ошибке -->
|
||||
<div class="error" style="display: none;">
|
||||
Неправильный логин или пароль
|
||||
</div>
|
||||
|
||||
<form class='login-form' method="post" action="/login">
|
||||
<div class="flex-row">
|
||||
<label class="lf--label" for="username">
|
||||
<svg x="0px" y="0px" width="12px" height="13px">
|
||||
<path fill="#7f8c8d" d="M8.9,7.2C9,6.9,9,6.7,9,6.5v-4C9,1.1,7.9,0,6.5,0h-1C4.1,0,3,1.1,3,2.5v4c0,0.2,0,0.4,0.1,0.7 C1.3,7.8,0,9.5,0,11.5V13h12v-1.5C12,9.5,10.7,7.8,8.9,7.2z M4,2.5C4,1.7,4.7,1,5.5,1h1C7.3,1,8,1.7,8,2.5v4c0,0.2,0,0.4-0.1,0.6 l0.1,0L7.9,7.3C7.6,7.8,7.1,8.2,6.5,8.2h-1c-0.6,0-1.1-0.4-1.4-0.9L4.1,7.1l0.1,0C4,6.9,4,6.7,4,6.5V2.5z M11,12H1v-0.5 c0-1.6,1-2.9,2.4-3.4c0.5,0.7,1.2,1.1,2.1,1.1h1c0.8,0,1.6-0.4,2.1-1.1C10,8.5,11,9.9,11,11.5V12z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<input id="username" name="username" class='lf--input' placeholder='Логин' type='text' required>
|
||||
</div>
|
||||
<div class="flex-row">
|
||||
<label class="lf--label" for="password">
|
||||
<svg x="0px" y="0px" width="15px" height="5px">
|
||||
<g>
|
||||
<path fill="#7f8c8d" d="M6,2L6,2c0-1.1-1-2-2.1-2H2.1C1,0,0,0.9,0,2.1v0.8C0,4.1,1,5,2.1,5h1.7C5,5,6,4.1,6,2.9V3h5v1h1V3h1v2h1V3h1 V2H6z M5.1,2.9c0,0.7-0.6,1.2-1.3,1.2H2.1c-0.7,0-1.3-0.6-1.3-1.2V2.1c0-0.7,0.6-1.2,1.3-1.2h1.7c0.7,0,1.3,0.6,1.3,1.2V2.9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</label>
|
||||
<input id="password" name="password" class='lf--input' placeholder='Пароль' type='password' required>
|
||||
</div>
|
||||
<input class='lf--submit' type='submit' value='ВОЙТИ'>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Результаты анализа DICOM</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 0 auto 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 25px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.result-card h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #5ac6c8;
|
||||
}
|
||||
|
||||
.probability-display {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.probability-value {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.probability-label {
|
||||
font-size: 18px;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.pathology-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pathology-yes {
|
||||
background: linear-gradient(135deg, #c182b9 0%, #e74c3c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pathology-no {
|
||||
background: linear-gradient(135deg, #5ac6c8 0%, #2ecc71 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.report-section {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.report-section h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.report-content {
|
||||
line-height: 1.6;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.conclusion {
|
||||
background: #e8fcfb;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid #5ac6c8;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dicom-image {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.properties-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.properties-table th, .properties-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.properties-table th {
|
||||
background-color: #f2f2f2;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 25px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #c182b9 0%, #5ac6c8 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #f8f9fa;
|
||||
color: #2c3e50;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="static/logo.png" alt="Логотип" class="logo">
|
||||
</div>
|
||||
<h1>Результаты анализа DICOM файла</h1>
|
||||
<p>Анализ завершен. Ниже представлены результаты.</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="probability-display">
|
||||
<div class="probability-label">Вероятность патологии</div>
|
||||
<div class="probability-value">{{ prediction.overall_probability }}%</div>
|
||||
<div class="pathology-badge {{ 'pathology-yes' if prediction.is_pathology else 'pathology-no' }}">
|
||||
{{ 'Обнаружена патология' if prediction.is_pathology else 'Патология не обнаружена' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
<img src="static/{{ prediction.image }}" alt="Результат" class="dicom-image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="report-section">
|
||||
<h3>Отчет анализа</h3>
|
||||
<div class="report-content">
|
||||
{{ prediction.report }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="conclusion">
|
||||
<h3>Заключение</h3>
|
||||
<p>{{ prediction.conclusion }}</p>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<h3>Доп. информация</h3>
|
||||
<table class="properties-table">
|
||||
{% for key, value in prediction.properties.items() %}
|
||||
<tr>
|
||||
<th>{{ key }}</th>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a href="/upload-study" class="btn btn-primary">Новый анализ</a>
|
||||
<a href="/download/{{prediction.image.replace('.png', '.zip')}}" class="btn btn-secondary">Сохранить DCM отчеты</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>Результаты анализа сгенерированы автоматически. В исследовательских целях.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,615 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Анализ DICOM файлов</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 0 auto 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-color: #5ac6c8;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.demo-files {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.demo-files h3 {
|
||||
margin-bottom: 12px;
|
||||
color: #2c3e50;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.demo-file {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-file:hover {
|
||||
border-color: #5ac6c8;
|
||||
box-shadow: 0 5px 15px rgba(90, 198, 200, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.demo-file.selected {
|
||||
border-color: #5ac6c8;
|
||||
background-color: #e8fcfb;
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed #5ac6c8;
|
||||
border-radius: 8px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.drop-zone.highlight {
|
||||
background-color: #e8fcfb;
|
||||
border-color: #c182b9;
|
||||
}
|
||||
|
||||
.drop-zone p {
|
||||
margin-bottom: 15px;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.drop-zone .icon {
|
||||
font-size: 48px;
|
||||
color: #5ac6c8;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #c182b9 0%, #5ac6c8 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background: #bdc3c7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #5ac6c8;
|
||||
}
|
||||
|
||||
.file-info h3 {
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "•";
|
||||
margin-right: 10px;
|
||||
color: #5ac6c8;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255,255,255,.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: #fff;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.file-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="static/logo.png" alt="Логотип" class="logo">
|
||||
</div>
|
||||
<h1>Выявление патологий в лучевых исследованиях</h1>
|
||||
<p>Загрузите DICOM файл или выберите демонстрационный пример</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{% if error %}
|
||||
<div class="notification error">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form id="upload-form" action="/upload-study" method="post" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="pathology">Выберите искомую патологию:</label>
|
||||
<select id="pathology" name="pathology">
|
||||
<option value="sinus">Синусит</option>
|
||||
<option value="wrist">Перелом костей лучезапястного сустава</option>
|
||||
<option value="shoulder">Перелом костей плечевого сустава</option>
|
||||
</select>
|
||||
|
||||
<div class="demo-files">
|
||||
<h3>Демонстрационные файлы:</h3>
|
||||
<div class="file-list" id="demo-files-list">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-section">
|
||||
<div class="section-title">Или загрузите свой файл</div>
|
||||
|
||||
<div class="drop-zone" id="drop-zone">
|
||||
<div class="icon">📁</div>
|
||||
<p>Перетащите DICOM файл сюда или нажмите для выбора</p>
|
||||
<small>Поддерживаются только файлы в формате .dcm</small>
|
||||
</div>
|
||||
|
||||
<input type="file" id="file-input" name="file" accept=".dcm" style="display: none;">
|
||||
|
||||
<input type="hidden" id="demo-filename" name="demo_filename" value="">
|
||||
|
||||
<div id="notification" class="notification"></div>
|
||||
|
||||
<button type="submit" id="analyze-btn" class="btn" disabled>
|
||||
<span id="btn-text">Запустить анализ</span>
|
||||
<span id="btn-loading" class="loading" style="display: none;"></span>
|
||||
</button>
|
||||
|
||||
<div id="file-info" class="file-info" style="display: none;">
|
||||
<h3>Информация о файле</h3>
|
||||
<div id="file-details" class="file-details">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('upload-form');
|
||||
const pathologySelect = document.getElementById('pathology');
|
||||
const demoFilesList = document.getElementById('demo-files-list');
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const demoFilenameInput = document.getElementById('demo-filename');
|
||||
const analyzeBtn = document.getElementById('analyze-btn');
|
||||
const btnText = document.getElementById('btn-text');
|
||||
const btnLoading = document.getElementById('btn-loading');
|
||||
const fileInfo = document.getElementById('file-info');
|
||||
const fileDetails = document.getElementById('file-details');
|
||||
const notification = document.getElementById('notification');
|
||||
|
||||
let selectedFile = null;
|
||||
let selectedDemoFile = null;
|
||||
|
||||
const demoFiles = {
|
||||
sinus: [
|
||||
{ name: "Рентген пазух носа (норма)", filename: "sinus_normal.dcm" },
|
||||
{ name: "Рентген пазух носа (синусит)", filename: "sinusitis.dcm" }
|
||||
],
|
||||
wrist: [
|
||||
{ name: "Рентген запястья (норма)", filename: "wrist_normal.dcm" },
|
||||
{ name: "Рентген запястья (перелом)", filename: "wrist_fracture.dcm" }
|
||||
],
|
||||
shoulder: [
|
||||
{ name: "Рентген плеча (норма)", filename: "shoulder_normal.dcm" },
|
||||
{ name: "Рентген плеча (перелом)", filename: "shoulder_fracture.dcm" }
|
||||
]
|
||||
};
|
||||
|
||||
function showDemoFiles() {
|
||||
const pathology = pathologySelect.value;
|
||||
const files = demoFiles[pathology];
|
||||
|
||||
demoFilesList.innerHTML = '';
|
||||
|
||||
files.forEach(file => {
|
||||
const fileElement = document.createElement('div');
|
||||
fileElement.className = 'demo-file';
|
||||
fileElement.textContent = file.name;
|
||||
fileElement.dataset.filename = file.filename;
|
||||
|
||||
fileElement.addEventListener('click', function() {
|
||||
document.querySelectorAll('.demo-file').forEach(f => {
|
||||
f.classList.remove('selected');
|
||||
});
|
||||
|
||||
this.classList.add('selected');
|
||||
|
||||
fileInput.value = '';
|
||||
selectedFile = null;
|
||||
|
||||
selectedDemoFile = {
|
||||
name: file.name,
|
||||
filename: file.filename,
|
||||
pathology: pathology
|
||||
};
|
||||
|
||||
demoFilenameInput.value = file.filename;
|
||||
|
||||
showFileInfo(file.name, 'Демонстрационный файл');
|
||||
|
||||
analyzeBtn.disabled = false;
|
||||
|
||||
showNotification('Демонстрационный файл выбран. Нажмите "Запустить анализ" для обработки.', 'success');
|
||||
});
|
||||
|
||||
demoFilesList.appendChild(fileElement);
|
||||
});
|
||||
}
|
||||
|
||||
function showFileInfo(name, info) {
|
||||
fileInfo.style.display = 'block';
|
||||
fileDetails.innerHTML = `
|
||||
<div>
|
||||
<strong>Имя файла:</strong> ${name}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Тип:</strong> ${info}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function showNotification(message, type) {
|
||||
notification.textContent = message;
|
||||
notification.className = `notification ${type}`;
|
||||
notification.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideNotification() {
|
||||
notification.style.display = 'none';
|
||||
notification.className = 'notification';
|
||||
notification.textContent = '';
|
||||
}
|
||||
|
||||
function restoreDemoFileState() {
|
||||
const demoFilename = demoFilenameInput.value;
|
||||
if (demoFilename) {
|
||||
const pathology = pathologySelect.value;
|
||||
const files = demoFiles[pathology];
|
||||
const file = files.find(f => f.filename === demoFilename);
|
||||
|
||||
if (file) {
|
||||
selectedDemoFile = {
|
||||
name: file.name,
|
||||
filename: file.filename,
|
||||
pathology: pathology
|
||||
};
|
||||
|
||||
document.querySelectorAll('.demo-file').forEach(f => {
|
||||
f.classList.remove('selected');
|
||||
if (f.dataset.filename === demoFilename) {
|
||||
f.classList.add('selected');
|
||||
}
|
||||
});
|
||||
|
||||
showFileInfo(file.name, 'Демонстрационный файл');
|
||||
|
||||
analyzeBtn.disabled = false;
|
||||
|
||||
showNotification('Демонстрационный файл выбран. Нажмите "Запустить анализ" для обработки.', 'success');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (!bytes || bytes === 0) return 'Неизвестно';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
pathologySelect.addEventListener('change', function() {
|
||||
showDemoFiles();
|
||||
|
||||
selectedFile = null;
|
||||
selectedDemoFile = null;
|
||||
demoFilenameInput.value = '';
|
||||
fileInfo.style.display = 'none';
|
||||
analyzeBtn.disabled = true;
|
||||
|
||||
fileInput.value = '';
|
||||
|
||||
document.querySelectorAll('.demo-file').forEach(f => {
|
||||
f.classList.remove('selected');
|
||||
});
|
||||
|
||||
hideNotification();
|
||||
});
|
||||
|
||||
dropZone.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('highlight');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragleave', () => {
|
||||
dropZone.classList.remove('highlight');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('highlight');
|
||||
|
||||
if (e.dataTransfer.files.length) {
|
||||
handleFileSelect(e.dataTransfer.files[0]);
|
||||
|
||||
document.querySelectorAll('.demo-file').forEach(f => {
|
||||
f.classList.remove('selected');
|
||||
});
|
||||
selectedDemoFile = null;
|
||||
demoFilenameInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', () => {
|
||||
if (fileInput.files.length) {
|
||||
handleFileSelect(fileInput.files[0]);
|
||||
|
||||
document.querySelectorAll('.demo-file').forEach(f => {
|
||||
f.classList.remove('selected');
|
||||
});
|
||||
selectedDemoFile = null;
|
||||
demoFilenameInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
function handleFileSelect(file) {
|
||||
if (file.name.endsWith('.dcm')) {
|
||||
selectedFile = file;
|
||||
selectedDemoFile = null;
|
||||
demoFilenameInput.value = '';
|
||||
showFileInfo(file.name, formatFileSize(file.size));
|
||||
analyzeBtn.disabled = false;
|
||||
showNotification('Файл успешно загружен. Нажмите "Запустить анализ" для обработки.', 'success');
|
||||
} else {
|
||||
showNotification('Пожалуйста, выберите файл в формате DICOM (.dcm).', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
btnText.style.display = 'none';
|
||||
btnLoading.style.display = 'inline-block';
|
||||
analyzeBtn.disabled = true;
|
||||
hideNotification();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('pathology', pathologySelect.value);
|
||||
|
||||
if (selectedDemoFile) {
|
||||
formData.append('demo_filename', selectedDemoFile.filename);
|
||||
} else if (selectedFile) {
|
||||
formData.append('file', selectedFile);
|
||||
} else {
|
||||
showNotification('Пожалуйста, выберите файл или демонстрационный пример.', 'error');
|
||||
btnText.style.display = 'inline';
|
||||
btnLoading.style.display = 'none';
|
||||
analyzeBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/upload-study', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
return response.json().then(err => { throw err; });
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
if (data.redirect) {
|
||||
window.location.href = data.redirect;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
const message = error.error || 'Произошла неизвестная ошибка.';
|
||||
showNotification(message, 'error');
|
||||
btnText.style.display = 'inline';
|
||||
btnLoading.style.display = 'none';
|
||||
analyzeBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('pageshow', function(event) {
|
||||
btnText.style.display = 'inline';
|
||||
btnLoading.style.display = 'none';
|
||||
analyzeBtn.disabled = false;
|
||||
|
||||
if (notification.textContent === 'Файл отправляется на анализ...') {
|
||||
hideNotification();
|
||||
}
|
||||
|
||||
restoreDemoFileState();
|
||||
});
|
||||
|
||||
showDemoFiles();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user