Hugging Face's logo

Spaces:
prathameshv07
/
Multilingual-Audio-Intelligence-System
Sleeping

App Files Community
1
Multilingual-Audio-Intelligence-System / templates /index.html
Prathamesh Sarjerao Vaidya
fixed upload_to_drive & live visuals& results in full mode
7d36e8b
raw
history blame contribute delete
113 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multilingual Audio Intelligence System</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
<style>
.upload-area {
border: 2px dashed #cbd5e1;
transition: all 0.3s ease;
}
.upload-area:hover {
border-color: #3b82f6;
background-color: #f8fafc;
}
.upload-area.dragover {
border-color: #2563eb;
background-color: #eff6ff;
}
.progress-bar {
background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.page-section {
display: none;
}
.page-section.active {
display: block;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-pattern {
background-image: radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.15) 1px, transparent 0);
background-size: 20px 20px;
}
/* Scrollable demo tabs styles */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.demo-file-option {
transition: all 0.2s ease;
}
.demo-file-option:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.demo-file-option.selected {
border-color: #3b82f6;
background-color: #eff6ff;
}
.scroll-indicator {
transition: all 0.2s ease;
}
.scroll-indicator.active {
background-color: #3b82f6;
transform: scale(1.2);
}
/* Smooth scrolling for demo files */
#demo-files-container {
scroll-snap-type: x mandatory;
}
.demo-file-option {
scroll-snap-align: start;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header -->
<header class="bg-white shadow-sm border-b">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<h1 class="text-2xl font-bold text-gray-900 cursor-pointer" id="home-link">Audio Intelligence System</h1>
</div>
</div>
<div class="flex items-center space-x-4">
<button id="demo-mode-btn" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-play-circle mr-2"></i>
Demo Mode
</button>
<button id="processing-mode-btn" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-cog mr-2"></i>
Full Processing
</button>
<!-- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
<!-- <i class="fas fa-circle w-2 h-2 mr-2"></i> -->
<!-- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> -->
<!-- <i class="fas fa-circle w-2 h-2 mr-1"></i> -->
<!--⬤ Operational
</span> -->
<span id="server-status" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">
⬤ Checking...
</span>
<button id="system-info-btn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-info-circle"></i>
</button>
</div>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Home Page Section -->
<div id="home-section" class="page-section active">
<!-- Hero Section -->
<div class="relative bg-white overflow-hidden rounded-lg shadow-lg mb-8">
<div class="hero-pattern absolute inset-0"></div>
<div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
<div class="text-center">
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
Multilingual Audio Intelligence
</h1>
<p class="mt-6 max-w-3xl mx-auto text-xl text-gray-500 leading-relaxed">
Advanced AI-powered speaker diarization, transcription, and translation system.
Transform any audio into structured, actionable insights with speaker attribution and cross-lingual understanding.
</p>
<div class="mt-10 flex justify-center space-x-4">
<button id="get-started-btn" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
<i class="fas fa-rocket mr-2"></i>
Get Started
</button>
<button id="try-demo-btn" class="inline-flex items-center px-8 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
<i class="fas fa-play mr-2"></i>
Try Demo
</button>
</div>
</div>
</div>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 mb-12">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-users text-2xl text-blue-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Speaker Diarization</h3>
<p class="text-sm text-gray-500 mt-1">Identify who spoke when with 95%+ accuracy</p>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-language text-2xl text-green-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Multilingual Recognition</h3>
<p class="text-sm text-gray-500 mt-1">Support for 99+ languages with auto-detection</p>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-exchange-alt text-2xl text-purple-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Neural Translation</h3>
<p class="text-sm text-gray-500 mt-1">High-quality translation to multiple languages</p>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-chart-line text-2xl text-red-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Interactive Visualization</h3>
<p class="text-sm text-gray-500 mt-1">Real-time waveform analysis and insights</p>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-download text-2xl text-yellow-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Multiple Formats</h3>
<p class="text-sm text-gray-500 mt-1">Export as JSON, SRT, TXT, or CSV</p>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-bolt text-2xl text-orange-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Fast Processing</h3>
<p class="text-sm text-gray-500 mt-1">14x real-time processing speed</p>
</div>
</div>
</div>
</div>
</div>
<!-- Technical Details -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Technical Specifications</h3>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Supported Audio Formats</h4>
<div class="flex flex-wrap gap-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">WAV</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">MP3</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">OGG</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">FLAC</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">M4A</span>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Performance</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• Processing: 2-14x real-time</li>
<li>• Maximum file size: 100MB</li>
<li>• Recommended duration: Under 30 minutes</li>
<li>• CPU optimized (no GPU required)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Processing Section -->
<div id="processing-section" class="page-section">
<div class="px-4 py-6 sm:px-0">
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Process Audio File
</h2>
<p class="mt-4 max-w-2xl mx-auto text-xl text-gray-500">
Upload your audio file and select processing options to get comprehensive analysis.
</p>
<div class="mt-4">
<span id="processing-mode-indicator" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
<i class="fas fa-cog mr-2"></i>
Full Processing Mode
</span>
</div>
</div>
</div>
<!-- Upload Section -->
<div class="px-4 sm:px-0">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Select Audio File</h3>
<form id="upload-form" enctype="multipart/form-data">
<!-- Demo Mode Section -->
<div id="demo-mode-section" class="mb-6 hidden">
<!-- Scrollable demo files container -->
<div class="relative">
<!-- Scroll buttons for mobile -->
<div class="flex justify-between items-center mb-2 sm:hidden">
<button type="button" id="scroll-left" class="p-2 text-gray-500 hover:text-gray-700 disabled:opacity-50" disabled>
<i class="fas fa-chevron-left"></i>
</button>
<button type="button" id="scroll-right" class="p-2 text-gray-500 hover:text-gray-700">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<!-- Scrollable demo files grid -->
<div id="demo-files-container" class="flex gap-4 overflow-x-auto pb-4 scrollbar-hide" style="scroll-behavior: smooth;">
<!-- Demo files will be populated dynamically -->
</div>
<!-- Scroll indicators -->
<!-- <div class="flex justify-center mt-2 space-x-1">
<div class="w-2 h-2 bg-gray-300 rounded-full scroll-indicator active"></div>
<div class="w-2 h-2 bg-gray-300 rounded-full scroll-indicator"></div>
<div class="w-2 h-2 bg-gray-300 rounded-full scroll-indicator"></div>
<div class="w-2 h-2 bg-gray-300 rounded-full scroll-indicator"></div>
</div> -->
</div>
<input type="hidden" id="selected-demo-file" name="demo_file_id" value="">
</div>
<!-- File Upload Area (Full Processing Mode) -->
<div id="file-upload-section" class="mb-6">
<div class="upload-area rounded-lg p-6 text-center mb-6" id="upload-area">
<input type="file" id="file-input" name="file" class="hidden" accept=".wav,.mp3,.ogg,.flac,.m4a">
<div id="upload-prompt">
<i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
<p class="text-lg text-gray-600 mb-2">Click to upload or drag and drop</p>
<p class="text-sm text-gray-500">WAV, MP3, OGG, FLAC, or M4A files up to 100MB</p>
</div>
<div id="file-info" class="hidden">
<i class="fas fa-file-audio text-4xl text-blue-500 mb-4"></i>
<p id="file-name" class="text-lg text-gray-800 mb-2"></p>
<p id="file-size" class="text-sm text-gray-500"></p>
</div>
</div>
</div>
<!-- Audio Preview Section -->
<div id="audio-preview" class="mb-6 hidden">
<label class="block text-sm font-medium text-gray-700 mb-2">Audio Preview</label>
<div class="bg-gray-50 p-4 rounded-lg border">
<audio id="audio-player" controls class="w-full mb-4">
Your browser does not support the audio element.
</audio>
<!-- Waveform Visualization -->
<div id="waveform-container" class="mt-4">
<canvas id="waveform-canvas" class="w-full h-20 bg-gray-100 rounded"></canvas>
</div>
</div>
</div>
<!-- Configuration Options -->
<div id="config-options" class="grid grid-cols-1 gap-6 sm:grid-cols-2 mb-6">
<div>
<label for="whisper-model" class="block text-sm font-medium text-gray-700">Model Size</label>
<select id="whisper-model" name="whisper_model" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
<option value="tiny">Tiny (Fast, Lower Accuracy)</option>
<option value="small" selected>Small (Balanced)</option>
<option value="medium">Medium (Better Accuracy)</option>
<option value="large">Large (Best Accuracy, Slower)</option>
</select>
</div>
<div>
<label for="target-language" class="block text-sm font-medium text-gray-700">Target Language</label>
<select id="target-language" name="target_language" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
<option value="en" selected>English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="zh">Chinese</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ar">Arabic</option>
</select>
</div>
</div>
<!-- Submit Button (hidden in demo mode) -->
<div id="process-btn-container" class="flex justify-center">
<button type="submit" id="process-btn" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
<i class="fas fa-play mr-2"></i>
Process Audio
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Progress Section -->
<div id="progress-section" class="px-4 sm:px-0 mt-6 hidden">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Processing Status</h3>
<div class="mb-4">
<div class="flex justify-between text-sm text-gray-600 mb-1">
<span id="progress-text">Initializing...</span>
<span id="progress-percent">0%</span>
</div>
<div class="bg-gray-200 rounded-full h-2">
<div id="progress-bar" class="progress-bar h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
<p id="progress-detail" class="text-sm text-gray-500">Please wait while we process your audio file...</p>
</div>
</div>
</div>
<!-- Results Section -->
<div id="results-section" class="px-4 sm:px-0 mt-6 hidden">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-medium text-gray-900">Analysis Results</h3>
<div class="flex space-x-2">
<button id="download-json" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-download mr-2"></i>JSON
</button>
<button id="download-srt" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-download mr-2"></i>SRT
</button>
<button id="download-txt" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-download mr-2"></i>Text
</button>
</div>
</div>
<!-- Tabs -->
<div class="border-b border-gray-200 mb-6">
<nav class="-mb-px flex space-x-8">
<button class="tab-btn whitespace-nowrap py-2 px-1 border-b-2 border-blue-500 font-medium text-sm text-blue-600" data-tab="transcript">
Transcript & Translation
</button>
<button class="tab-btn whitespace-nowrap py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="visualization">
Analytics & Insights
</button>
<button class="tab-btn whitespace-nowrap py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="summary">
Summary
</button>
</nav>
</div>
<!-- Tab Content -->
<div id="transcript-tab" class="tab-content active">
<div id="transcript-content">
<!-- Transcript and translation will be populated here -->
</div>
</div>
<div id="visualization-tab" class="tab-content">
<div class="grid grid-cols-1 gap-6">
<div id="language-chart" style="width:100%;height:300px;"></div>
<div id="speaker-timeline" style="width:100%;height:300px;"></div>
</div>
</div>
<div id="summary-tab" class="tab-content">
<div id="summary-content">
<!-- Summary will be populated here -->
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- System Info Modal -->
<div id="system-info-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-900">System Information</h3>
<button id="close-modal" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<div id="system-info-content">
<div class="loading text-center py-4">
<div class="inline-block">
<i class="fas fa-spinner fa-spin text-2xl text-blue-500"></i>
</div>
<p class="mt-2 text-gray-600">Loading system information...</p>
</div>
</div>
</div>
</div>
</div>
<script>
// Global variables
let currentTaskId = null;
let progressInterval = null;
let isDemoMode = false;
// DOM elements
const homeSection = document.getElementById('home-section');
const processingSection = document.getElementById('processing-section');
const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('file-input');
const uploadForm = document.getElementById('upload-form');
const processBtn = document.getElementById('process-btn');
const progressSection = document.getElementById('progress-section');
const resultsSection = document.getElementById('results-section');
const systemInfoBtn = document.getElementById('system-info-btn');
const systemInfoModal = document.getElementById('system-info-modal');
const closeModal = document.getElementById('close-modal');
// Navigation elements
const homeLink = document.getElementById('home-link');
const getStartedBtn = document.getElementById('get-started-btn');
const tryDemoBtn = document.getElementById('try-demo-btn');
const demoModeBtn = document.getElementById('demo-mode-btn');
const processingModeBtn = document.getElementById('processing-mode-btn');
const processingModeIndicator = document.getElementById('processing-mode-indicator');
async function updateServerStatus() {
const el = document.getElementById("server-status");
try {
const res = await fetch("/health"); // or your FastAPI health endpoint
if (!res.ok) throw new Error("Bad response");
el.textContent = "⬤ Live";
el.className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800";
} catch (err) {
// Could be error or down
fetch("/").catch(() => {
el.textContent = "⬤ Server Down";
el.className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800";
});
el.textContent = "⬤ Error";
el.className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800";
}
}
// setInterval(updateServerStatus, 5000);
// updateServerStatus();
document.addEventListener("DOMContentLoaded", updateServerStatus);
// Navigation handling
function showHome() {
homeSection.classList.add('active');
processingSection.classList.remove('active');
resetProcessing();
}
function showProcessing(demoMode = false) {
homeSection.classList.remove('active');
processingSection.classList.add('active');
isDemoMode = demoMode;
updateProcessingMode();
resetProcessing();
}
function updateProcessingMode() {
if (isDemoMode) {
processingModeIndicator.innerHTML = '<i class="fas fa-play-circle mr-2"></i>Demo Mode';
processingModeIndicator.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
demoModeBtn.className = 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500';
processingModeBtn.className = 'inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500';
// Show demo section, hide file upload and config options
document.getElementById('demo-mode-section').classList.remove('hidden');
document.getElementById('file-upload-section').classList.add('hidden');
document.getElementById('config-options').classList.add('hidden');
// Hide Process Audio button in demo mode
document.getElementById('process-btn-container').classList.add('hidden');
// Load demo files when switching to demo mode
loadDemoFiles();
} else {
processingModeIndicator.innerHTML = '<i class="fas fa-cog mr-2"></i>Full Processing Mode';
processingModeIndicator.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800';
demoModeBtn.className = 'inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500';
processingModeBtn.className = 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500';
// Hide demo section, show file upload and config options
document.getElementById('demo-mode-section').classList.add('hidden');
document.getElementById('file-upload-section').classList.remove('hidden');
document.getElementById('config-options').classList.remove('hidden');
// Show Process Audio button in full mode
document.getElementById('process-btn-container').classList.remove('hidden');
}
}
function resetProcessing() {
progressSection.classList.add('hidden');
resultsSection.classList.add('hidden');
if (progressInterval) {
clearInterval(progressInterval);
progressInterval = null;
}
currentTaskId = null;
// Reset form
document.getElementById('upload-prompt').classList.remove('hidden');
document.getElementById('file-info').classList.add('hidden');
document.getElementById('audio-preview').classList.add('hidden');
// Reset demo selection
document.querySelectorAll('.demo-file-option').forEach(opt => {
opt.classList.remove('border-blue-500', 'bg-blue-50');
opt.classList.add('border-gray-200');
});
document.getElementById('selected-demo-file').value = '';
uploadForm.reset();
}
// Demo file selection handling
document.addEventListener('DOMContentLoaded', () => {
const demoOptions = document.querySelectorAll('.demo-file-option');
demoOptions.forEach(option => {
option.addEventListener('click', () => {
// Remove selection from all options
document.querySelectorAll('.demo-file-option').forEach(opt => {
opt.classList.remove('border-blue-500', 'bg-blue-50');
opt.classList.add('border-gray-200');
});
// Select clicked option
option.classList.add('border-blue-500', 'bg-blue-50');
option.classList.remove('border-gray-200');
// Set selected demo file ID
const demoId = option.dataset.demoId;
const selectedDemoFile = document.getElementById('selected-demo-file');
if (selectedDemoFile) {
selectedDemoFile.value = demoId;
}
// Load demo audio preview
loadDemoAudioPreview(demoId);
});
});
});
async function loadDemoAudioPreview(demoId) {
try {
// For demo purposes, we'll show a placeholder waveform
const audioPreview = document.getElementById('audio-preview');
const audioPlayer = document.getElementById('audio-player');
// Set demo audio source (if files are available locally)
const demoConfig = {
'yuri_kizaki': {
name: 'Yuri Kizaki - Japanese Audio',
filename: 'Yuri_Kizaki.mp3',
duration: 23.0
},
'film_podcast': {
name: 'French Film Podcast',
filename: 'Film_Podcast.mp3',
duration: 25.0
}
};
if (demoConfig[demoId]) {
// Try to load demo file if available
try {
// audioPlayer.src = `/demo_audio/${demoConfig[demoId].name.replace(' - ', ' - ').replace('Japanese Audio', '03.mp3').replace('French Film Podcast', 'film-podcast.mp3')}`;
audioPlayer.src = `/demo_audio/${demoConfig[demoId].filename}`;
audioPlayer.load();
// 🔹 Enable live waveform updates
audioPlayer.addEventListener('loadedmetadata', () => {
generateWaveformFromAudio(audioPlayer);
});
} catch (e) {
console.log('Demo audio file not directly accessible, will be processed on server');
}
// Generate demo waveform
// generateDemoWaveform(demoConfig[demoId].duration);
audioPreview.classList.remove('hidden');
}
} catch (error) {
console.error('Error loading demo preview:', error);
}
}
function generateDemoWaveform(canvasElement, fileName = 'Audio Preview') {
// Support both old (duration) and new (canvas, fileName) calling patterns
let canvas;
if (typeof canvasElement === 'string' || typeof canvasElement === 'number') {
// Old calling pattern with duration
canvas = document.getElementById('waveform-canvas');
} else {
// New calling pattern with canvas element
canvas = canvasElement || document.getElementById('waveform-canvas');
}
const ctx = canvas.getContext('2d');
// Set canvas size
const canvasHeight = canvas.offsetHeight || 80;
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// Clear canvas
ctx.clearRect(0, 0, canvas.offsetWidth, canvasHeight);
// Generate sample waveform data
const samples = 100; // Reduced from 200 for cleaner look
const barWidth = canvas.offsetWidth / samples;
ctx.fillStyle = '#3B82F6';
for (let i = 0; i < samples; i++) {
// Generate realistic waveform pattern
const amplitude = Math.sin(i * 0.1) * Math.random() * 0.8 + 0.2;
const height = amplitude * (canvasHeight * 0.8);
const x = i * barWidth;
const y = (canvasHeight - height) / 2;
ctx.fillRect(x, y, barWidth - 1, height);
}
}
function handleFileSelect() {
const file = fileInput.files[0];
if (file) {
document.getElementById('upload-prompt').classList.add('hidden');
document.getElementById('file-info').classList.remove('hidden');
document.getElementById('file-name').textContent = file.name;
document.getElementById('file-size').textContent = formatFileSize(file.size);
// Show audio preview with waveform
const audioPreview = document.getElementById('audio-preview');
const audioPlayer = document.getElementById('audio-player');
if (file.type.startsWith('audio/')) {
const url = URL.createObjectURL(file);
audioPlayer.src = url;
audioPreview.classList.remove('hidden');
// Generate waveform when audio loads
audioPlayer.addEventListener('loadedmetadata', () => {
generateWaveformFromAudio(audioPlayer);
});
// Also generate static waveform immediately
const canvas = document.getElementById('waveform-canvas');
if (canvas) {
generateDemoWaveform(canvas, file.name);
}
}
}
}
function generateWaveformFromAudio(audioElement, targetCanvas = null, audioSource = null) {
console.log('🎨 Generating waveform visualization...');
// Find the right canvas element
const canvas = targetCanvas ||
document.getElementById('demo-waveform-canvas') ||
document.getElementById('waveform-canvas');
if (!canvas) {
console.warn('⚠️ No canvas element found for waveform');
return;
}
// Set canvas dimensions
canvas.width = canvas.offsetWidth * (window.devicePixelRatio || 1);
canvas.height = (canvas.offsetHeight || 80) * (window.devicePixelRatio || 1);
const ctx = canvas.getContext('2d');
ctx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
// Always generate static waveform first as fallback
generateDemoWaveform(canvas, 'Audio Preview');
// Try to generate actual waveform from audio data
if (audioElement && audioElement.src) {
console.log('📊 Attempting to generate real waveform from audio data...');
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// Fetch and decode audio data for static waveform
fetch(audioElement.src)
.then(response => response.arrayBuffer())
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
console.log('✅ Audio decoded successfully, drawing real waveform');
drawWaveformFromBuffer(audioBuffer, canvas);
// Setup live waveform when audio plays
setupLiveWaveform(audioElement, canvas);
})
.catch(err => {
console.warn("⚠️ Could not decode audio, using static fallback", err);
});
} catch (error) {
console.warn('⚠️ Web Audio API not available, using static fallback', error);
}
}
function drawWaveformFromBuffer(audioBuffer, canvas) {
const ctx = canvas.getContext('2d');
const rawData = audioBuffer.getChannelData(0); // mono
const samples = 100; // number of bars
const blockSize = Math.floor(rawData.length / samples);
const filteredData = [];
// Process audio data into sample points
for (let i = 0; i < samples; i++) {
let sum = 0;
for (let j = 0; j < blockSize; j++) {
const sample = rawData[i * blockSize + j];
sum += Math.abs(sample);
}
filteredData.push(sum / blockSize);
}
// Clear and draw waveform
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
ctx.fillStyle = '#3B82F6';
const barWidth = canvas.offsetWidth / samples;
const maxHeight = canvas.offsetHeight * 0.9;
filteredData.forEach((val, i) => {
const barHeight = val * maxHeight;
const x = i * barWidth;
const y = (canvas.offsetHeight - barHeight) / 2;
ctx.fillRect(x, y, barWidth - 1, barHeight);
});
}
function setupLiveWaveform(audioElement, canvas) {
// Setup live visualization when audio plays
audioElement.addEventListener('play', () => {
console.log('🎵 Starting live waveform visualization...');
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
if (audioContext.state === 'suspended') {
audioContext.resume();
}
const source = audioContext.createMediaElementSource(audioElement);
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const ctx = canvas.getContext('2d');
function drawLiveWaveform() {
if (audioElement.paused) return;
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
ctx.fillStyle = '#10B981'; // Green for live
const barWidth = canvas.offsetWidth / bufferLength;
const maxHeight = canvas.offsetHeight * 0.8;
for (let i = 0; i < bufferLength; i++) {
const barHeight = (dataArray[i] / 255) * maxHeight;
const x = i * barWidth;
const y = (canvas.offsetHeight - barHeight) / 2;
ctx.fillRect(x, y, barWidth - 1, barHeight);
}
requestAnimationFrame(drawLiveWaveform);
}
drawLiveWaveform();
} catch (error) {
console.warn('⚠️ Live waveform not available:', error);
}
});
// Restore static waveform when audio stops
audioElement.addEventListener('pause', () => {
setTimeout(() => {
if (audioElement.paused) {
generateWaveformFromAudio(audioElement, canvas);
}
}, 100);
});
}
}
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];
}
// Event listeners for navigation
homeLink.addEventListener('click', showHome);
getStartedBtn.addEventListener('click', () => showProcessing(false));
tryDemoBtn.addEventListener('click', () => showProcessing(true));
demoModeBtn.addEventListener('click', () => showProcessing(true));
processingModeBtn.addEventListener('click', () => showProcessing(false));
// File upload handling
uploadArea.addEventListener('click', () => fileInput.click());
uploadArea.addEventListener('dragover', handleDragOver);
uploadArea.addEventListener('dragleave', handleDragLeave);
uploadArea.addEventListener('drop', handleDrop);
fileInput.addEventListener('change', handleFileSelect);
function handleDragOver(e) {
e.preventDefault();
uploadArea.classList.add('dragover');
}
function handleDragLeave(e) {
e.preventDefault();
uploadArea.classList.remove('dragover');
}
function handleDrop(e) {
e.preventDefault();
uploadArea.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
fileInput.files = files;
handleFileSelect();
}
}
// Form submission
uploadForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Validate based on mode
if (isDemoMode) {
const selectedDemo = document.getElementById('demo-selector').value;
if (!selectedDemo) {
alert('Please select a demo audio file.');
return;
}
} else {
if (!fileInput.files[0]) {
alert('Please select a file to upload.');
return;
}
}
const formData = new FormData();
// Add form data based on mode
if (isDemoMode) {
formData.append('demo_file_id', document.getElementById('demo-selector').value);
formData.append('whisper_model', document.getElementById('whisper-model').value);
formData.append('target_language', document.getElementById('target-language').value);
} else {
formData.append('file', fileInput.files[0]);
formData.append('whisper_model', document.getElementById('whisper-model').value);
formData.append('target_language', document.getElementById('target-language').value);
}
try {
processBtn.disabled = true;
processBtn.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i>Starting...';
// Choose endpoint based on mode
let response;
if (isDemoMode) {
// In demo mode, use the same approach as "View Results" button
const selector = document.getElementById('demo-selector');
if (!selector || !selector.value) {
alert('Please select a demo audio file first.');
return;
}
const demoId = selector.value;
response = await fetch(`/api/process-demo/${demoId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
} else {
// Full processing mode
response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
}
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.status === 'complete') {
// Demo mode returns immediate results
showResults(result.results);
} else {
// Real processing mode - handle async processing
currentTaskId = result.task_id;
showProgress();
startProgressPolling();
}
} catch (error) {
console.error('Upload error:', error);
alert('Error processing request: ' + error.message);
} finally {
processBtn.disabled = false;
processBtn.innerHTML = '<i class="fas fa-play mr-2"></i>Process Audio';
}
});
function showProgress() {
progressSection.classList.remove('hidden');
resultsSection.classList.add('hidden');
}
function startProgressPolling() {
if (!currentTaskId) return;
progressInterval = setInterval(async () => {
try {
const response = await fetch(`/api/status/${currentTaskId}`);
if (!response.ok) {
throw new Error(`Status fetch failed: ${response.status}`);
}
const status = await response.json();
if (!status) {
console.warn('⚠️ Empty status response');
return;
}
updateProgress(status);
if (status.status === 'complete') {
clearInterval(progressInterval);
const resultsResponse = await fetch(`/api/results/${currentTaskId}`);
if (!resultsResponse.ok) {
throw new Error(`Results fetch failed: ${resultsResponse.status}`);
}
const results = await resultsResponse.json();
if (results && results.results) {
showResults(results.results);
} else if (results) {
// Handle direct results format (full processing mode)
showResults(results);
} else {
console.error('❌ Invalid results format:', results);
alert('Error: No results available');
progressSection.classList.add('hidden');
}
} else if (status.status === 'error') {
clearInterval(progressInterval);
alert('Processing error: ' + status.error);
progressSection.classList.add('hidden');
}
} catch (error) {
console.error('Status polling error:', error);
}
}, 1000);
}
function updateProgress(status) {
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const progressPercent = document.getElementById('progress-percent');
const progressDetail = document.getElementById('progress-detail');
const progress = status.progress || 0;
progressBar.style.width = `${progress}%`;
progressPercent.textContent = `${progress}%`;
const statusMessages = {
'initializing': 'Initializing processing pipeline...',
'processing': 'Analyzing audio and identifying speakers...',
'generating_outputs': 'Generating transcripts and translations...',
'complete': 'Processing complete!'
};
progressText.textContent = statusMessages[status.status] || 'Processing...';
progressDetail.textContent = isDemoMode ?
'Demo mode - results will be shown shortly.' :
'This may take a few minutes depending on audio length.';
}
function showResults(results) {
progressSection.classList.add('hidden');
resultsSection.classList.remove('hidden');
console.log('🎯 Processing results:', results);
// Handle different result formats (old vs new pipeline output)
let segments, summary;
if (results.segments && results.summary) {
// Old format: direct segments and summary
segments = results.segments;
summary = results.summary;
} else if (results.outputs && results.outputs.json) {
// New format: segments in outputs.json (JSON string)
try {
const jsonData = JSON.parse(results.outputs.json);
segments = jsonData.segments || [];
summary = jsonData.statistics || results.processing_stats || {};
} catch (e) {
console.error('❌ Failed to parse JSON output:', e);
segments = [];
summary = {};
}
} else if (results.processed_segments) {
// Alternative new format: processed_segments array (string representations need parsing)
segments = results.processed_segments.map(seg => {
// Handle string representation of ProcessedSegment
if (typeof seg === 'string' && seg.startsWith('ProcessedSegment(')) {
// Extract data from string representation
const match = seg.match(/ProcessedSegment\(start_time=([\d.]+), end_time=([\d.]+), speaker_id='([^']+)', original_text='([^']+)', original_language='([^']+)', translated_text='([^']+)'/);
if (match) {
return {
speaker: match[3],
start_time: parseFloat(match[1]),
end_time: parseFloat(match[2]),
text: match[4],
translated_text: match[6],
language: match[5]
};
}
}
// Handle object representation
return {
speaker: seg.speaker_id || 'Unknown',
start_time: seg.start_time,
end_time: seg.end_time,
text: seg.original_text || seg.text,
translated_text: seg.translated_text,
language: seg.original_language || seg.language
};
});
summary = results.processing_stats || {};
} else {
console.error('❌ Unknown results format:', results);
alert('Error: Unable to display results - unknown format');
return;
}
console.log('✅ Processed segments:', segments.length);
console.log('✅ Summary data:', summary);
// Populate transcript
populateTranscript(segments);
// Populate visualizations
populateVisualizations(segments);
// Populate summary
populateSummary(summary);
// Setup download buttons
setupDownloadButtons();
// Schedule delayed cleanup for non-demo processing
if (!isDemoMode) {
scheduleDelayedCleanup();
}
}
function populateVisualizations(segments) {
// Language Distribution Chart
createLanguageChart(segments);
// Speaker Timeline
createSpeakerTimeline(segments);
}
function createLanguageChart(segments) {
const languages = {};
const languageDurations = {};
segments.forEach(seg => {
const lang = (seg.language || seg.original_language || 'unknown').toUpperCase();
const duration = (seg.end_time || 0) - (seg.start_time || 0);
languages[lang] = (languages[lang] || 0) + 1;
languageDurations[lang] = (languageDurations[lang] || 0) + duration;
});
const data = [{
values: Object.values(languages),
labels: Object.keys(languages),
type: 'pie',
marker: {
colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6']
},
textinfo: 'label+percent',
textposition: 'auto'
}];
const layout = {
title: {
text: '🌍 Language Distribution',
font: { size: 18, family: 'Arial, sans-serif' }
},
showlegend: true,
height: 300,
margin: { t: 50, b: 20, l: 20, r: 20 }
};
Plotly.newPlot('language-chart', data, layout, {responsive: true});
}
function createSpeakerTimeline(segments) {
const speakers = [...new Set(segments.map(seg => seg.speaker || seg.speaker_id || 'Unknown'))];
const colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];
const data = speakers.map((speaker, index) => {
const speakerSegments = segments.filter(seg => (seg.speaker || seg.speaker_id || 'Unknown') === speaker);
return {
x: speakerSegments.map(seg => seg.start_time || 0),
y: speakerSegments.map(() => speaker),
mode: 'markers',
type: 'scatter',
marker: {
size: speakerSegments.map(seg => ((seg.end_time || 0) - (seg.start_time || 0)) * 5),
color: colors[index % colors.length],
opacity: 0.7
},
name: speaker,
text: speakerSegments.map(seg => `${(seg.text || seg.original_text || '').substring(0, 50)}...`),
hovertemplate: '%{text}<br>Time: %{x:.1f}s<extra></extra>'
};
});
const layout = {
title: {
text: '👥 Speaker Activity Timeline',
font: { size: 18, family: 'Arial, sans-serif' }
},
xaxis: { title: 'Time (seconds)' },
yaxis: { title: 'Speakers' },
height: 300,
margin: { t: 50, b: 50, l: 100, r: 20 }
};
Plotly.newPlot('speaker-timeline', data, layout, {responsive: true});
}
function populateTranscript(segments) {
const transcriptContent = document.getElementById('transcript-content');
transcriptContent.innerHTML = '';
segments.forEach((segment, index) => {
const segmentDiv = document.createElement('div');
segmentDiv.className = 'mb-6 p-4 border border-gray-200 rounded-lg bg-white shadow-sm';
segmentDiv.innerHTML = `
<div class="flex justify-between items-start mb-3">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
${segment.speaker}
</span>
<span class="text-sm text-gray-500">
${formatTime(segment.start_time)} - ${formatTime(segment.end_time)}
</span>
</div>
<div class="space-y-3">
<div class="bg-gray-50 p-3 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-microphone text-gray-600 mr-2"></i>
<span class="text-sm font-medium text-gray-700">Original (${(segment.language || segment.original_language || 'Unknown').toUpperCase()})</span>
</div>
<p class="text-gray-800 leading-relaxed">${segment.text}</p>
</div>
${segment.translated_text && segment.translated_text !== segment.text && (segment.language || segment.original_language) !== 'en' ? `
<div class="bg-blue-50 p-3 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-language text-blue-600 mr-2"></i>
<span class="text-sm font-medium text-blue-700">English Translation</span>
</div>
<p class="text-blue-800 leading-relaxed italic">${segment.translated_text}</p>
</div>
` : ''}
</div>
`;
transcriptContent.appendChild(segmentDiv);
});
}
function populateSummary(summary) {
const summaryContent = document.getElementById('summary-content');
summaryContent.innerHTML = `
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700">Total Duration</h4>
<p class="text-2xl font-bold text-gray-900">${formatTime(summary.total_duration || 0)}</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700">Speakers Detected</h4>
<p class="text-2xl font-bold text-gray-900">${summary.num_speakers || 0}</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700">Speech Segments</h4>
<p class="text-2xl font-bold text-gray-900">${summary.num_segments || 0}</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700">Processing Time</h4>
<p class="text-2xl font-bold text-gray-900">${Math.round(summary.processing_time || 0)}s</p>
</div>
</div>
<div class="mt-4">
<h4 class="text-sm font-medium text-gray-700 mb-2">Languages Detected</h4>
<div class="flex flex-wrap gap-2">
${(summary.languages || []).map(lang =>
`<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">${lang}</span>`
).join('')}
</div>
</div>
`;
}
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs.toString().padStart(2, '0')}`;
}
function setupDownloadButtons() {
document.getElementById('download-json').onclick = () => downloadFile('json');
document.getElementById('download-srt').onclick = () => downloadFile('srt');
document.getElementById('download-txt').onclick = () => downloadFile('txt');
}
function downloadFile(format) {
if (currentTaskId) {
window.open(`/api/download/${currentTaskId}/${format}`, '_blank');
}
}
// Tab handling
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const tabName = e.target.dataset.tab;
// Update tab buttons
document.querySelectorAll('.tab-btn').forEach(b => {
b.classList.remove('border-blue-500', 'text-blue-600');
b.classList.add('border-transparent', 'text-gray-500');
});
e.target.classList.add('border-blue-500', 'text-blue-600');
e.target.classList.remove('border-transparent', 'text-gray-500');
// Update tab content
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
document.getElementById(`${tabName}-tab`).classList.add('active');
});
});
// System info modal
systemInfoBtn.addEventListener('click', async () => {
systemInfoModal.classList.remove('hidden');
const content = document.getElementById('system-info-content');
content.innerHTML = `
<div class="loading text-center py-4 flex flex-col items-center">
<div class="mb-2">
<i class="fas fa-spinner text-2xl text-blue-500 animate-spin"></i>
</div>
<p class="text-gray-600">Loading system information...</p>
</div>
`;
// content.innerHTML = `
// <div class="loading text-center py-4">
// <i class="fas fa-spinner text-2xl text-blue-500 animate-spin"></i>
// <p class="mt-2 text-gray-600">Loading system information...</p>
// </div>
// `;
try {
const response = await fetch('/api/system-info');
const info = await response.json();
const statusColors = {
green: "bg-green-100 text-green-800",
yellow: "bg-yellow-100 text-yellow-800",
red: "bg-red-100 text-red-800",
gray: "bg-gray-100 text-gray-800"
};
const colorClass = statusColors[info.statusColor] || statusColors.gray;
content.innerHTML = `
<div class="space-y-3">
<div>
<span class="font-medium">Status:</span>
<span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colorClass}">
⬤ ${info.status}
</span>
</div>
<div>
<span class="font-medium">Version:</span>
<span class="ml-2 text-gray-600">${info.version}</span>
</div>
<div>
<span class="font-medium">Features:</span>
<div class="mt-2 flex flex-wrap gap-1">
${info.features.map(feature =>
`<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800">${feature}</span>`
).join('')}
</div>
</div>
</div>
`;
} catch (error) {
content.innerHTML = `<p class="text-red-600">Error loading system information</p>`;
}
});
closeModal.addEventListener('click', () => {
systemInfoModal.classList.add('hidden');
});
// Close modal when clicking outside
systemInfoModal.addEventListener('click', (e) => {
if (e.target === systemInfoModal) {
systemInfoModal.classList.add('hidden');
}
});
// Initialize page
updateProcessingMode();
// Load demo files if we start in demo mode
if (isDemoMode) {
loadDemoFiles();
}
// Demo files management
let demoFiles = [];
// Create fallback demo files if API fails
function createFallbackDemoFiles() {
demoFiles = [
{
id: "yuri_kizaki",
name: "Yuri Kizaki",
filename: "Yuri_Kizaki.mp3",
language: "ja",
description: "Japanese audio message about website communication",
duration: "00:01:45",
available: true,
download_status: "ready"
},
{
id: "film_podcast",
name: "Film Podcast",
filename: "Film_Podcast.mp3",
language: "fr",
description: "French podcast discussing various films and cinema",
duration: "00:03:32",
available: true,
download_status: "ready"
},
{
id: "tamil_interview",
name: "Tamil Wikipedia Interview",
filename: "Tamil_Wikipedia_Interview.ogg",
language: "ta",
description: "Discussion on Tamil Wikipedia and collaborative knowledge sharing",
duration: "00:36:17",
available: true,
download_status: "ready"
},
{
id: "car_trouble",
name: "Car Trouble",
filename: "Car_Trouble.mp3",
language: "hi",
description: "Conversation about waiting for a mechanic and basic assistance",
duration: "00:02:45",
available: true,
download_status: "ready"
}
];
populateDemoFiles();
// Auto-select the first demo file (Yuri Kizaki)
setTimeout(() => {
selectDemoFile(demoFiles[0].id);
const firstOption = document.querySelector(`[data-demo-id="${demoFiles[0].id}"]`);
if (firstOption) {
firstOption.classList.add('border-blue-500', 'bg-blue-50');
firstOption.classList.remove('border-gray-200');
}
}, 100);
}
// Get appropriate icon for language
function getIconForLanguage(language) {
const icons = {
'ja': 'fas fa-microphone',
'fr': 'fas fa-podcast',
'ta': 'fas fa-headphones',
'hi': 'fas fa-volume-up'
};
return icons[language] || 'fas fa-music';
}
// Get status class for download status
function getStatusClass(status) {
const classes = {
'pending': 'bg-gray-100 text-gray-800',
'downloading': 'bg-yellow-100 text-yellow-800',
'completed': 'bg-green-100 text-green-800',
'ready': 'bg-green-100 text-green-800',
'failed': 'bg-red-100 text-red-800'
};
return classes[status] || 'bg-gray-100 text-gray-800';
}
// Get status text for download status
function getStatusText(status) {
const texts = {
'pending': 'Pending',
'downloading': 'Downloading...',
'completed': 'Available',
'ready': 'Ready',
'failed': 'Failed'
};
return texts[status] || 'Unknown';
}
// Select demo file
function selectDemoFile(demoId) {
document.getElementById('selected-demo-file').value = demoId;
console.log('Selected demo file:', demoId);
}
// Scroll functionality for demo files
function updateScrollIndicators() {
const container = document.getElementById('demo-files-container');
const indicators = document.querySelectorAll('.scroll-indicator');
const scrollLeft = container.scrollLeft;
const maxScroll = container.scrollWidth - container.clientWidth;
// Update scroll buttons
const leftBtn = document.getElementById('scroll-left');
const rightBtn = document.getElementById('scroll-right');
if (leftBtn) leftBtn.disabled = scrollLeft <= 0;
if (rightBtn) rightBtn.disabled = scrollLeft >= maxScroll;
// Update indicators
const scrollPercentage = maxScroll > 0 ? scrollLeft / maxScroll : 0;
const activeIndex = Math.floor(scrollPercentage * (indicators.length - 1));
indicators.forEach((indicator, index) => {
indicator.classList.toggle('active', index === activeIndex);
});
}
// Scroll event handlers
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('demo-files-container');
if (container) {
container.addEventListener('scroll', updateScrollIndicators);
}
// Scroll button handlers
const leftBtn = document.getElementById('scroll-left');
const rightBtn = document.getElementById('scroll-right');
if (leftBtn) {
leftBtn.addEventListener('click', () => {
container.scrollBy({ left: -300, behavior: 'smooth' });
});
}
if (rightBtn) {
rightBtn.addEventListener('click', () => {
container.scrollBy({ left: 300, behavior: 'smooth' });
});
}
});
// Load demo files when switching to demo mode
const demoModeToggle = document.getElementById('demo-mode-toggle');
if (demoModeToggle) {
demoModeToggle.addEventListener('change', function() {
if (this.checked) {
loadDemoFiles();
}
});
// Load demo files on page load if demo mode is enabled
if (demoModeToggle.checked) {
loadDemoFiles();
}
}
// Load demo files from server or use fallback
async function loadDemoFiles() {
console.log('🔄 Loading demo files from API...');
try {
const response = await fetch('/api/demo-files');
console.log('📡 API Response status:', response.status);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('📋 API returned demo files:', data);
// Check if data has demo_files property or is direct array
if (data.demo_files && Array.isArray(data.demo_files)) {
demoFiles = data.demo_files;
console.log('✅ Demo files loaded from API:', demoFiles.length);
console.log('📋 Demo files details:', demoFiles);
populateDemoFiles();
} else if (Array.isArray(data)) {
demoFiles = data;
console.log('✅ Demo files loaded as direct array:', demoFiles.length);
populateDemoFiles();
} else {
console.warn('⚠️ Unexpected API response format, using fallback');
createFallbackDemoFiles();
}
} catch (error) {
console.error('❌ Failed to load demo files:', error);
console.error('Error details:', error.message);
createFallbackDemoFiles();
}
}
// Populate demo files in the UI - showing one at a time like uploaded files
function populateDemoFiles() {
console.log('🏗️ Starting populateDemoFiles...');
console.log('📋 Demo files to populate:', demoFiles);
const container = document.getElementById('demo-files-container');
console.log('🎯 Container element:', container);
if (!container) {
console.error('❌ Demo files container not found! Expected element with id="demo-files-container"');
return;
}
console.log('✅ Container found, clearing existing content...');
container.innerHTML = '';
if (demoFiles.length === 0) {
console.warn('⚠️ No demo files to display');
container.innerHTML = '<p class="text-gray-500 text-center py-8">No demo files available</p>';
return;
}
console.log(`🔧 Creating single demo file selector for ${demoFiles.length} files...`);
console.log('📋 Available demo files:', demoFiles.map(f => ({ id: f.id, name: f.name })));
// Create a single full-width demo file display (like uploaded file)
const demoContainer = document.createElement('div');
demoContainer.className = 'w-full';
// Create dropdown selector for demo files
const selectorHTML = `
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200 w-full">
<div class="flex items-center space-x-4 mb-4">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
<i class="fas fa-play text-white text-lg"></i>
</div>
</div>
<div class="flex-1">
<label for="demo-selector" class="block text-sm font-medium text-gray-700 mb-2">
Choose a sample:
</label>
<select id="demo-selector" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
${demoFiles.map(file =>
`<option value="${file.id}" data-name="${file.name}" data-filename="${file.filename || ''}" data-description="${file.description || ''}" data-language="${file.language || 'Unknown'}" data-duration="${file.duration || 'Unknown'}">
${file.name}
</option>`
).join('')}
</select>
</div>
</div>
<!-- Demo file details (will be updated when selection changes) -->
<div id="demo-details" class="bg-white rounded-lg p-4 border border-gray-200">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div>
<span class="font-medium text-gray-600">Language:</span>
<span id="demo-language" class="ml-2 text-gray-800">${demoFiles[0]?.language || 'Unknown'}</span>
</div>
<div>
<span class="font-medium text-gray-600">Duration:</span>
<span id="demo-duration" class="ml-2 text-gray-800">${demoFiles[0]?.duration || 'Unknown'}</span>
</div>
<div>
<span class="font-medium text-gray-600">Status:</span>
<span class="ml-2 px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Ready</span>
</div>
</div>
<div class="mt-3">
<span class="font-medium text-gray-600">Description:</span>
<p id="demo-description" class="mt-1 text-gray-700">${demoFiles[0]?.description || 'Demo audio file for testing'}</p>
</div>
</div>
<!-- Audio Preview and Processing -->
<div class="mt-4 space-y-4">
<!-- Audio Preview -->
<div class="bg-white rounded-lg p-4 border border-gray-200">
<h4 class="text-sm font-medium text-gray-700 mb-3">
<i class="fas fa-headphones mr-2"></i>Audio Preview
</h4>
<audio id="demo-audio-player" controls class="w-full mb-3">
<source id="demo-audio-source" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- Waveform Visualization -->
<div id="demo-waveform-container" class="mt-3">
<canvas id="demo-waveform-canvas" class="w-full h-16 bg-gray-50 rounded border"></canvas>
</div>
</div>
<!-- Demo Results Section -->
<div class="flex justify-center">
<button onclick="loadDemoResults()" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
<i class="fas fa-eye mr-2"></i>View Processing Results
</button>
</div>
</div>
</div>
`;
demoContainer.innerHTML = selectorHTML;
container.appendChild(demoContainer);
// Add event listener for dropdown changes
const selector = document.getElementById('demo-selector');
if (selector) {
selector.addEventListener('change', function() {
const selectedOption = this.options[this.selectedIndex];
updateDemoDetails(selectedOption);
loadDemoAudio(this.value, selectedOption.dataset.filename || selectedOption.dataset.name);
});
// Load initial demo audio
if (selector.options.length > 0) {
const firstOption = selector.options[0];
loadDemoAudio(selector.value, firstOption.dataset.name);
}
}
console.log('✅ Demo files populated successfully');
}
// Update demo file details when selection changes
function updateDemoDetails(selectedOption) {
const languageEl = document.getElementById('demo-language');
const durationEl = document.getElementById('demo-duration');
const descriptionEl = document.getElementById('demo-description');
if (languageEl) languageEl.textContent = selectedOption.dataset.language || 'Unknown';
if (durationEl) durationEl.textContent = selectedOption.dataset.duration || 'Unknown';
if (descriptionEl) descriptionEl.textContent = selectedOption.dataset.description || 'Demo audio file for testing';
console.log('✅ Updated demo details for:', selectedOption.dataset.name);
}
// Load demo audio for preview
function loadDemoAudio(demoId, fileName) {
console.log('🎵 Loading demo audio:', demoId, fileName);
const audioPlayer = document.getElementById('demo-audio-player');
const audioSource = document.getElementById('demo-audio-source');
const waveformCanvas = document.getElementById('demo-waveform-canvas');
if (!audioPlayer || !audioSource || !waveformCanvas) {
console.warn('⚠️ Demo audio elements not found');
return;
}
// Get actual filename from demo files data or use the provided fileName
let actualFileName = fileName;
// Get actual filename from demo files data or use mapping
if (demoFiles && demoFiles.length > 0) {
const demoFile = demoFiles.find(file => file.id === demoId);
if (demoFile && demoFile.filename) {
actualFileName = demoFile.filename;
}
} else {
// Fallback mapping
const filenameMap = {
'yuri_kizaki': 'Yuri_Kizaki.mp3',
'film_podcast': 'Film_Podcast.mp3',
'car_trouble': 'Car_Trouble.mp3',
'tamil_interview': 'Tamil_Wikipedia_Interview.ogg'
};
if (filenameMap[demoId]) {
actualFileName = filenameMap[demoId];
}
}
console.log(`🎵 Mapped ${demoId} -> ${actualFileName}`);
// Set audio source using the server route
const audioPath = `/demo_audio/${actualFileName}`;
console.log(`🔍 Loading audio from: ${audioPath}`);
// Set the audio source directly
audioSource.src = audioPath;
audioPlayer.load();
// Handle audio loading events
const onCanPlay = function() {
console.log('✅ Demo audio loaded successfully');
generateWaveformFromAudio(audioPlayer, waveformCanvas, audioSource);
audioPlayer.removeEventListener('canplaythrough', onCanPlay);
audioPlayer.removeEventListener('error', onError);
};
const onError = function() {
console.warn(`❌ Failed to load audio: ${audioPath}`);
console.log(`⚠️ Generating placeholder waveform for: ${actualFileName}`);
generateDemoWaveform(waveformCanvas, actualFileName);
audioPlayer.removeEventListener('canplaythrough', onCanPlay);
audioPlayer.removeEventListener('error', onError);
};
audioPlayer.addEventListener('canplaythrough', onCanPlay);
audioPlayer.addEventListener('error', onError);
}
// Generate demo waveform placeholder
// Load demo results - shows pre-processed results for selected demo file
async function loadDemoResults() {
const selector = document.getElementById('demo-selector');
if (!selector || !selector.value) {
alert('Please select a demo audio file first.');
return;
}
const demoId = selector.value;
console.log('🎯 Loading demo results for:', demoId);
try {
// Show loading state
showProgress();
const progressBar = document.querySelector('.progress-bar-fill');
if (progressBar) progressBar.style.width = '50%';
// Fetch demo results
const response = await fetch(`/api/process-demo/${demoId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const result = await response.json();
console.log('📋 Demo results received:', result);
// Complete progress
if (progressBar) progressBar.style.width = '100%';
setTimeout(() => {
if (result.status === 'complete') {
showResults(result.results);
} else {
throw new Error('Demo processing failed: ' + (result.error || 'Unknown error'));
}
}, 500); // Brief delay to show completion
} catch (error) {
console.error('❌ Demo results error:', error);
alert('Error loading demo results: ' + error.message);
// Hide progress on error
const progressSection = document.getElementById('progress-section');
if (progressSection) progressSection.classList.add('hidden');
}
}
// Process audio (unified function for both demo and full modes)
function processAudio() {
console.log('🎯 Processing audio...');
// Check if we're in demo mode and handle accordingly
if (isDemoMode) {
const selector = document.getElementById('demo-selector');
if (!selector) {
alert('Demo selector not found');
return;
}
const selectedId = selector.value;
const selectedOption = selector.options[selector.selectedIndex];
const fileName = selectedOption.dataset.name;
console.log('🎯 Processing demo file:', selectedId, fileName);
}
// Submit the form (this will trigger the existing form submission logic)
const uploadForm = document.getElementById('upload-form');
if (uploadForm) {
uploadForm.dispatchEvent(new Event('submit'));
} else {
alert('Upload form not found');
}
}
console.log('Demo files population completed');
// Utility functions for demo file status
function getStatusClass(status) {
switch(status) {
case 'ready': return 'bg-green-100 text-green-800';
case 'processing': return 'bg-yellow-100 text-yellow-800';
case 'downloading': return 'bg-blue-100 text-blue-800';
case 'error': return 'bg-red-100 text-red-800';
default: return 'bg-gray-100 text-gray-800';
}
}
function getStatusText(status) {
switch(status) {
case 'ready': return '✅ Ready';
case 'processing': return '⏳ Processing';
case 'downloading': return '⬇️ Downloading';
case 'error': return '❌ Error';
default: return '⚪ Unknown';
}
}
function getIconForLanguage(language) {
const lang = language.toLowerCase();
if (lang.includes('japanese') || lang.includes('ja')) return 'fas fa-flag';
if (lang.includes('french') || lang.includes('fr')) return 'fas fa-flag';
if (lang.includes('tamil') || lang.includes('ta')) return 'fas fa-flag';
if (lang.includes('hindi') || lang.includes('hi')) return 'fas fa-flag';
return 'fas fa-globe';
}
// Session management and cleanup
function triggerCleanup() {
// Send cleanup request (only for non-demo mode)
if (isDemoMode) {
console.log('🎯 Skipping cleanup in demo mode');
return;
}
console.log('🧹 Triggering session cleanup...');
fetch('/api/cleanup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
if (response.ok) {
console.log('✅ Session cleanup completed');
} else {
console.warn('⚠️ Session cleanup failed');
}
}).catch(error => {
console.warn('⚠️ Session cleanup error:', error);
});
}
// Auto-cleanup on page unload/refresh (only for non-demo mode)
window.addEventListener('beforeunload', function(event) {
// Only cleanup if we're not in demo mode and have actually uploaded files
if (!isDemoMode && currentTaskId) {
triggerCleanup();
}
});
// Cleanup when results are fully displayed and user has had time to view them
let cleanupScheduled = false;
function scheduleDelayedCleanup() {
if (cleanupScheduled) return;
cleanupScheduled = true;
// Wait 10 minutes after processing completes before cleanup
setTimeout(function() {
if (!isDemoMode) {
console.log('🕒 Scheduled cleanup after results display');
triggerCleanup();
}
cleanupScheduled = false;
}, 10 * 60 * 1000); // 10 minutes
}
// Periodic cleanup check (much less frequent)
setInterval(function() {
// Only check session info, don't auto-cleanup unless really necessary
fetch('/api/session-info')
.then(response => response.json())
.then(data => {
console.log('📊 Session info:', data);
// Only auto-cleanup if session has been inactive for over 2 hours
const now = Date.now() / 1000;
if (data.last_activity && (now - data.last_activity) > 7200) { // 2 hours
console.log('🕒 Auto-cleanup due to long inactivity');
triggerCleanup();
}
})
.catch(error => {
console.warn('⚠️ Failed to get session info:', error);
});
}, 60 * 60 * 1000); // Check every hour
// Manual cleanup button (could be added to UI if needed)
function manualCleanup() {
triggerCleanup();
alert('🧹 Session cleanup requested. Your uploaded files have been removed from the server.');
}
// Live waveform visualization setup
function setupLiveWaveformVisualization() {
console.log('🎯 Setting up live waveform visualization');
// Setup for demo mode
const demoAudioPlayer = document.getElementById('demo-audio-player');
const demoCanvas = document.getElementById('demo-waveform-canvas');
if (demoAudioPlayer && demoCanvas) {
console.log('🎵 Setting up demo audio visualization');
setupAudioVisualization(demoAudioPlayer, demoCanvas, 'demo');
} else {
console.log('⚠️ Demo audio elements not found');
}
// Setup for full processing mode (look for any audio elements)
const audioElements = document.querySelectorAll('audio');
const canvasElements = document.querySelectorAll('canvas[id*="waveform"]');
audioElements.forEach((audio, index) => {
if (audio.id !== 'demo-audio-player') {
const canvas = canvasElements[index] || document.getElementById('waveform-canvas');
if (canvas) {
console.log('🎵 Setting up full mode audio visualization');
setupAudioVisualization(audio, canvas, 'full');
}
}
});
}
function setupAudioVisualization(audioElement, canvas, mode) {
console.log(`🔧 Setting up audio visualization for ${mode} mode`);
let animationId = null;
let audioContext = null;
let analyser = null;
let dataArray = null;
let source = null;
// Clean up any existing listeners
const existingListeners = audioElement._visualizationListeners;
if (existingListeners) {
audioElement.removeEventListener('play', existingListeners.play);
audioElement.removeEventListener('pause', existingListeners.pause);
audioElement.removeEventListener('ended', existingListeners.ended);
}
// Create new listeners
const playListener = async () => {
try {
console.log(`🎵 ${mode} audio started playing`);
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
console.log('🎯 Created new AudioContext');
}
if (!source) {
source = audioContext.createMediaElementSource(audioElement);
analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
analyser.smoothingTimeConstant = 0.8;
source.connect(analyser);
analyser.connect(audioContext.destination);
const bufferLength = analyser.frequencyBinCount;
dataArray = new Uint8Array(bufferLength);
console.log('🔗 Connected audio source to analyser');
}
if (audioContext.state === 'suspended') {
await audioContext.resume();
console.log('▶️ Resumed AudioContext');
}
startLiveVisualization();
console.log(`✅ Live visualization started for ${mode} mode`);
} catch (error) {
console.warn('⚠️ Web Audio API not available for live visualization:', error);
// Fallback to static visualization
drawStaticWaveform();
}
};
const pauseListener = () => {
console.log(`⏸️ ${mode} audio paused`);
stopLiveVisualization();
};
const endedListener = () => {
console.log(`⏹️ ${mode} audio ended`);
stopLiveVisualization();
// Only draw static waveform for demo mode, not for full processing mode
// if (mode === 'demo') {
// drawStaticWaveform();
// }
};
// Add listeners
audioElement.addEventListener('play', playListener);
audioElement.addEventListener('pause', pauseListener);
audioElement.addEventListener('ended', endedListener);
// Store references for cleanup
audioElement._visualizationListeners = {
play: playListener,
pause: pauseListener,
ended: endedListener
};
// Draw initial static waveform
drawStaticWaveform();
function drawStaticWaveform() {
if (!canvas) return;
const ctx = canvas.getContext('2d');
const canvasWidth = canvas.offsetWidth || 800;
const canvasHeight = canvas.offsetHeight || 64;
// Set canvas resolution
canvas.width = canvasWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// Clear canvas
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// Draw static waveform (blue)
const barCount = 100;
const barWidth = canvasWidth / barCount;
ctx.fillStyle = '#3B82F6'; // Blue color for static waveform
for (let i = 0; i < barCount; i++) {
// Generate realistic static waveform pattern
const normalizedIndex = i / barCount;
const amplitude = Math.sin(normalizedIndex * Math.PI * 4) * 0.3 +
Math.sin(normalizedIndex * Math.PI * 8) * 0.2 +
Math.random() * 0.1;
const barHeight = Math.max(2, Math.abs(amplitude) * canvasHeight * 0.8);
const x = i * barWidth;
const y = (canvasHeight - barHeight) / 2;
ctx.fillRect(x, y, barWidth - 1, barHeight);
}
console.log(`📊 Drew static waveform on ${mode} canvas`);
}
function startLiveVisualization() {
if (!analyser || !dataArray) {
console.warn('⚠️ Analyser or dataArray not available for live visualization');
return;
}
const ctx = canvas.getContext('2d');
const canvasWidth = canvas.offsetWidth || 800;
const canvasHeight = canvas.offsetHeight || 64;
// Set canvas resolution
canvas.width = canvasWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
console.log(`🎬 Starting live animation for ${mode} canvas (${canvasWidth}x${canvasHeight})`);
function animate() {
if (!analyser || !dataArray) return;
analyser.getByteFrequencyData(dataArray);
// Clear canvas
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// Draw live waveform (green)
const barCount = 100;
const barWidth = canvasWidth / barCount;
ctx.fillStyle = '#10B981'; // Green color for live visualization
for (let i = 0; i < barCount; i++) {
const dataIndex = Math.floor((i / barCount) * dataArray.length);
const barHeight = Math.max(2, (dataArray[dataIndex] / 255) * canvasHeight * 0.8);
const x = i * barWidth;
const y = (canvasHeight - barHeight) / 2;
ctx.fillRect(x, y, barWidth - 1, barHeight);
}
animationId = requestAnimationFrame(animate);
}
animate();
}
function stopLiveVisualization() {
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
console.log(`⏹️ Stopped live visualization for ${mode} mode`);
}
}
}
// Initialize live visualization when page loads
document.addEventListener('DOMContentLoaded', () => {
console.log('🚀 DOM loaded, setting up waveform visualization');
setupLiveWaveformVisualization();
// Also setup when new audio elements are added dynamically
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1) { // Element node
const audioElements = node.querySelectorAll ? node.querySelectorAll('audio') : [];
const canvasElements = node.querySelectorAll ? node.querySelectorAll('canvas[id*="waveform"]') : [];
if (node.tagName === 'AUDIO' || audioElements.length > 0 || canvasElements.length > 0) {
console.log('🔄 New audio/canvas elements detected, reinitializing visualization');
setTimeout(setupLiveWaveformVisualization, 500);
}
}
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
</script>
</body>
</html>