Dymas/whisper-api-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Serge Zaigraeff
2025-03-04 09:57:49 +03:00
parent 8dab730d4a
commit 08d0e514d1
2 changed files with 2 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -1,4 +1,5 @@
.DS_Store
__pycache__
models
logs
logs
client.html
client.html
-612
View File
@@ -1,612 +0,0 @@
<!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>