.
This commit is contained in:
Serge Zaigraeff
@@ -2,3 +2,4 @@
|
|||||||
__pycache__
|
__pycache__
|
||||||
models
|
models
|
||||||
logs
|
logs
|
||||||
|
client.html
|
||||||
-612
@@ -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>
|
|
||||||
Reference in New Issue
Block a user