613 lines
20 KiB
HTML
613 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Whisper Speech Recognition</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #3b82f6;
|
|
--primary-hover: #2563eb;
|
|
--background: #f3f4f6;
|
|
--card-bg: #ffffff;
|
|
--text-color: #1f2937;
|
|
--text-secondary: #6b7280;
|
|
--border-color: #e5e7eb;
|
|
--success-color: #10b981;
|
|
--error-color: #ef4444;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
line-height: 1.6;
|
|
background-color: var(--background);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
header {
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(to right, #3b82f6, #4f46e5);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
background-color: var(--card-bg);
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dropzone {
|
|
border: 2px dashed var(--border-color);
|
|
border-radius: 1rem;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dropzone:hover, .dropzone.dragover {
|
|
border-color: var(--primary-color);
|
|
background-color: rgba(59, 130, 246, 0.05);
|
|
}
|
|
|
|
.dropzone-icon {
|
|
font-size: 2.5rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dropzone-text {
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dropzone-text strong {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.file-info {
|
|
display: none;
|
|
background-color: rgba(59, 130, 246, 0.1);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.file-size {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.btn {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: var(--primary-hover);
|
|
}
|
|
|
|
.btn:disabled {
|
|
background-color: var(--text-secondary);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.loading {
|
|
display: none;
|
|
text-align: center;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.spinner {
|
|
border: 4px solid rgba(59, 130, 246, 0.1);
|
|
border-radius: 50%;
|
|
border-top: 4px solid var(--primary-color);
|
|
width: 2rem;
|
|
height: 2rem;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 0.5rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.result {
|
|
display: none;
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.result-stats {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.result-content {
|
|
background-color: var(--background);
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
white-space: pre-wrap;
|
|
line-height: 1.7;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.download-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background-color: var(--success-color);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.log-container {
|
|
display: none;
|
|
background-color: var(--card-bg);
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
padding: 2rem;
|
|
}
|
|
|
|
.log-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.log-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.log-content {
|
|
background-color: #1e293b;
|
|
color: #e2e8f0;
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
height: 250px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.log-entry {
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.log-time {
|
|
color: #94a3b8;
|
|
margin-right: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.log-message {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.error-message {
|
|
color: var(--error-color);
|
|
margin-top: 1rem;
|
|
display: none;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.container, .log-container {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.stat {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.dropzone {
|
|
padding: 2rem 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Whisper Speech Recognition</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container">
|
|
<div id="dropzone" class="dropzone">
|
|
<div class="dropzone-icon">🎤</div>
|
|
<div class="dropzone-text">
|
|
<strong>Перетащите аудиофайл</strong> или <strong>выберите файл</strong> для транскрибации
|
|
</div>
|
|
<div class="dropzone-text" style="font-size: 0.9rem;">
|
|
Поддерживаемые форматы: MP3, WAV, M4A, FLAC, OGG
|
|
</div>
|
|
<input type="file" id="file-input" accept="audio/*" style="display: none;">
|
|
</div>
|
|
|
|
<div id="file-info" class="file-info">
|
|
<div class="file-name" id="file-name"></div>
|
|
<div class="file-size" id="file-size"></div>
|
|
</div>
|
|
|
|
<button id="transcribe-btn" class="btn" disabled>Транскрибировать</button>
|
|
|
|
<div class="error-message" id="error-message"></div>
|
|
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p>Обрабатываем ваш аудиофайл...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container result" id="result">
|
|
<div class="result-header">
|
|
<div class="result-title">Результаты транскрибации</div>
|
|
<button id="download-btn" class="btn download-btn">
|
|
<span>⬇️</span>
|
|
<span>Скачать результат</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="result-stats">
|
|
<div class="stat">
|
|
<div class="stat-label">Длительность аудио</div>
|
|
<div class="stat-value" id="duration"></div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">Время обработки</div>
|
|
<div class="stat-value" id="processing-time"></div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">Модель</div>
|
|
<div class="stat-value" id="model-name"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-content" id="transcription-text"></div>
|
|
</div>
|
|
|
|
<div class="log-container" id="log-container">
|
|
<div class="log-header">
|
|
<div class="log-title">Журнал операций</div>
|
|
</div>
|
|
<div class="log-content" id="log-content"></div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// DOM Elements
|
|
const dropzone = document.getElementById('dropzone');
|
|
const fileInput = document.getElementById('file-input');
|
|
const fileInfo = document.getElementById('file-info');
|
|
const fileName = document.getElementById('file-name');
|
|
const fileSize = document.getElementById('file-size');
|
|
const transcribeBtn = document.getElementById('transcribe-btn');
|
|
const loading = document.getElementById('loading');
|
|
const result = document.getElementById('result');
|
|
const duration = document.getElementById('duration');
|
|
const processingTime = document.getElementById('processing-time');
|
|
const modelName = document.getElementById('model-name');
|
|
const transcriptionText = document.getElementById('transcription-text');
|
|
const downloadBtn = document.getElementById('download-btn');
|
|
const logContainer = document.getElementById('log-container');
|
|
const logContent = document.getElementById('log-content');
|
|
const errorMessage = document.getElementById('error-message');
|
|
|
|
// Server API URL
|
|
const API_URL = 'http://192.168.1.176:5042';
|
|
|
|
// State variables
|
|
let audioFile = null;
|
|
let transcriptionResult = null;
|
|
|
|
// Event listeners
|
|
dropzone.addEventListener('click', () => fileInput.click());
|
|
|
|
fileInput.addEventListener('change', handleFileSelect);
|
|
|
|
dropzone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropzone.classList.add('dragover');
|
|
});
|
|
|
|
dropzone.addEventListener('dragleave', () => {
|
|
dropzone.classList.remove('dragover');
|
|
});
|
|
|
|
dropzone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropzone.classList.remove('dragover');
|
|
|
|
if (e.dataTransfer.files.length) {
|
|
handleFile(e.dataTransfer.files[0]);
|
|
}
|
|
});
|
|
|
|
transcribeBtn.addEventListener('click', transcribeAudio);
|
|
|
|
downloadBtn.addEventListener('click', downloadTranscription);
|
|
|
|
// Functions
|
|
function handleFileSelect(e) {
|
|
if (e.target.files.length) {
|
|
handleFile(e.target.files[0]);
|
|
}
|
|
}
|
|
|
|
function handleFile(file) {
|
|
// Check if it's an audio file
|
|
if (!file.type.startsWith('audio/')) {
|
|
showError('Пожалуйста, загрузите аудиофайл');
|
|
return;
|
|
}
|
|
|
|
audioFile = file;
|
|
|
|
// Update file info
|
|
fileName.textContent = file.name;
|
|
fileSize.textContent = formatFileSize(file.size);
|
|
fileInfo.style.display = 'block';
|
|
|
|
// Enable transcribe button
|
|
transcribeBtn.disabled = false;
|
|
|
|
// Reset previous results
|
|
result.style.display = 'none';
|
|
|
|
// Add log entry
|
|
addLogEntry(`Файл "${file.name}" выбран (${formatFileSize(file.size)})`);
|
|
|
|
// Show logs
|
|
logContainer.style.display = 'block';
|
|
}
|
|
|
|
async function transcribeAudio() {
|
|
if (!audioFile) return;
|
|
|
|
// Hide error and previous results
|
|
hideError();
|
|
result.style.display = 'none';
|
|
|
|
// Show loading
|
|
loading.style.display = 'block';
|
|
transcribeBtn.disabled = true;
|
|
|
|
// Create form data
|
|
const formData = new FormData();
|
|
formData.append('file', audioFile);
|
|
|
|
addLogEntry(`Началась загрузка файла "${audioFile.name}" на сервер`);
|
|
|
|
try {
|
|
const uploadStart = Date.now();
|
|
const response = await fetch(`${API_URL}/v1/audio/transcriptions`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const uploadTime = ((Date.now() - uploadStart) / 1000).toFixed(1);
|
|
|
|
addLogEntry(`Файл успешно загружен и отправлен на обработку за ${uploadTime} сек.`);
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || `Сервер ответил с кодом ${response.status}`);
|
|
}
|
|
|
|
addLogEntry('Транскрибация успешно завершена');
|
|
transcriptionResult = await response.json();
|
|
|
|
// Log transcription details
|
|
addLogEntry(`Длительность аудио: ${formatDuration(transcriptionResult.duration_seconds)}`);
|
|
addLogEntry(`Время обработки: ${formatDuration(transcriptionResult.processing_time)}`);
|
|
addLogEntry(`Использованная модель: ${transcriptionResult.model}`);
|
|
|
|
// Display results
|
|
displayTranscriptionResults(transcriptionResult);
|
|
|
|
} catch (error) {
|
|
addLogEntry(`Ошибка: ${error.message}`, true);
|
|
showError(`Ошибка при транскрибации: ${error.message}`);
|
|
} finally {
|
|
loading.style.display = 'none';
|
|
transcribeBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
function displayTranscriptionResults(data) {
|
|
// Fill in the stats
|
|
duration.textContent = formatDuration(data.duration_seconds);
|
|
processingTime.textContent = `${data.processing_time.toFixed(1)} сек.`;
|
|
modelName.textContent = data.model;
|
|
|
|
// Display text
|
|
transcriptionText.textContent = data.text;
|
|
|
|
// Show result container
|
|
result.style.display = 'block';
|
|
}
|
|
|
|
function downloadTranscription() {
|
|
if (!transcriptionResult) return;
|
|
|
|
// Create JSON file
|
|
const jsonStr = JSON.stringify(transcriptionResult, null, 2);
|
|
const blob = new Blob([jsonStr], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
// Create text file with just the transcribed text
|
|
const textBlob = new Blob([transcriptionResult.text], { type: 'text/plain' });
|
|
const textUrl = URL.createObjectURL(textBlob);
|
|
|
|
// Create links and trigger downloads
|
|
const jsonLink = document.createElement('a');
|
|
jsonLink.href = url;
|
|
jsonLink.download = `transcription_${Date.now()}.json`;
|
|
document.body.appendChild(jsonLink);
|
|
jsonLink.click();
|
|
|
|
const textLink = document.createElement('a');
|
|
textLink.href = textUrl;
|
|
textLink.download = `transcription_${Date.now()}.txt`;
|
|
document.body.appendChild(textLink);
|
|
textLink.click();
|
|
|
|
// Clean up
|
|
setTimeout(() => {
|
|
document.body.removeChild(jsonLink);
|
|
document.body.removeChild(textLink);
|
|
URL.revokeObjectURL(url);
|
|
URL.revokeObjectURL(textUrl);
|
|
}, 100);
|
|
|
|
addLogEntry('Результаты транскрибации скачаны как JSON и TXT файлы');
|
|
}
|
|
|
|
function addLogEntry(message, isError = false) {
|
|
const entry = document.createElement('div');
|
|
entry.className = 'log-entry';
|
|
|
|
const time = document.createElement('span');
|
|
time.className = 'log-time';
|
|
time.textContent = new Date().toLocaleTimeString();
|
|
|
|
const text = document.createElement('span');
|
|
text.className = 'log-message';
|
|
if (isError) {
|
|
text.style.color = '#ef4444';
|
|
}
|
|
text.textContent = message;
|
|
|
|
entry.appendChild(time);
|
|
entry.appendChild(text);
|
|
|
|
logContent.appendChild(entry);
|
|
logContent.scrollTop = logContent.scrollHeight;
|
|
}
|
|
|
|
function showError(message) {
|
|
errorMessage.textContent = message;
|
|
errorMessage.style.display = 'block';
|
|
}
|
|
|
|
function hideError() {
|
|
errorMessage.style.display = 'none';
|
|
}
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
|
|
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];
|
|
}
|
|
|
|
function formatDuration(seconds) {
|
|
if (!seconds && seconds !== 0) return 'Неизвестно';
|
|
|
|
seconds = Math.round(seconds);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainingSeconds = seconds % 60;
|
|
|
|
if (minutes < 60) {
|
|
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
const hours = Math.floor(minutes / 60);
|
|
const remainingMinutes = minutes % 60;
|
|
|
|
return `${hours}:${remainingMinutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
// Initialize with a log entry
|
|
addLogEntry('Приложение готово к работе. Перетащите или выберите аудиофайл.');
|
|
logContainer.style.display = 'block';
|
|
</script>
|
|
</body>
|
|
</html>
|