add transcription history logging
This commit is contained in:
Serge Zaigraeff
+612
@@ -0,0 +1,612 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user