98 lines
4.7 KiB
HTML
98 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Транскрибация совещаний</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎙️</text></svg>">
|
||
<link rel="stylesheet" href="/static/styles.css">
|
||
<!-- Markdown renderer -->
|
||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🎙️ Транскрибация совещаний</h1>
|
||
<p class="subtitle">Загрузите аудио или видео файл для получения протокола</p>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Upload Section -->
|
||
<section class="upload-section" id="uploadSection">
|
||
<div class="drop-zone" id="dropZone">
|
||
<div class="drop-zone-content">
|
||
<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="17 8 12 3 7 8"/>
|
||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||
</svg>
|
||
<p>Перетащите файлы сюда или <span class="browse-link">выберите</span></p>
|
||
<p class="hint">Поддерживаются: MP4, WEBM, AVI, MKV, MOV, WAV, MP3, M4A, OGG, FLAC</p>
|
||
</div>
|
||
<input type="file" id="fileInput" multiple accept=".mp4,.webm,.avi,.mkv,.mov,.wav,.mp3,.m4a,.ogg,.flac" hidden>
|
||
</div>
|
||
|
||
<!-- Queue Status -->
|
||
<div class="queue-status" id="queueStatus">
|
||
<div class="queue-status-header">
|
||
<h3>Очередь обработки</h3>
|
||
<span class="queue-summary" id="queueSummary">очередь пуста</span>
|
||
</div>
|
||
<div class="tasks-list" id="tasksList">
|
||
<p class="empty-state">Нет активных задач</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Results Section -->
|
||
<section class="results-section">
|
||
<div class="panel-left">
|
||
<h2>📁 Файлы</h2>
|
||
<div class="file-tree" id="fileTree">
|
||
<p class="empty-state">Нет обработанных файлов</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-right">
|
||
<h2>📝 Просмотр</h2>
|
||
<div class="viewer" id="viewer">
|
||
<div class="empty-viewer">
|
||
<p>Выберите файл для просмотра</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Chat Section -->
|
||
<section class="chat-section" id="chatSection">
|
||
<div class="chat-header">
|
||
<h2>🤖 Чат с базой знаний</h2>
|
||
<div class="chat-controls">
|
||
<select id="chatProjectSelect">
|
||
<option value="">Все проекты</option>
|
||
</select>
|
||
<button id="chatClearBtn" title="Очистить историю">🗑️</button>
|
||
</div>
|
||
</div>
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="chat-welcome">
|
||
<p>Здравствуйте! Я помогу найти информацию в протоколах совещаний.</p>
|
||
<p class="chat-hint">Выберите проект или оставьте «Все проекты» для глобального поиска.</p>
|
||
</div>
|
||
</div>
|
||
<div class="chat-input-row">
|
||
<input type="text" id="chatInput" placeholder="Задайте вопрос по протоколам совещаний..." autocomplete="off">
|
||
<button id="chatSendBtn">Отправить</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Toast notifications -->
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|