| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>OllamaStream - Local AI Media Tools</title> |
| | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | :root { |
| | --bg-dark: #0f0f13; |
| | --bg-panel: #18181f; |
| | --bg-panel-hover: #22222b; |
| | --primary: #6366f1; |
| | --primary-glow: rgba(99, 102, 241, 0.4); |
| | --accent: #10b981; |
| | --text-main: #ffffff; |
| | --text-muted: #9ca3af; |
| | --border: #2d2d3a; |
| | --glass: rgba(24, 24, 31, 0.7); |
| | --glass-border: rgba(255, 255, 255, 0.08); |
| | --danger: #ef4444; |
| | } |
| | |
| | * { |
| | box-sizing: border-box; |
| | margin: 0; |
| | padding: 0; |
| | outline: none; |
| | } |
| | |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | background-color: var(--bg-dark); |
| | color: var(--text-main); |
| | min-height: 100vh; |
| | display: flex; |
| | flex-direction: column; |
| | overflow-x: hidden; |
| | } |
| | |
| | |
| | header { |
| | height: 70px; |
| | border-bottom: 1px solid var(--border); |
| | display: flex; |
| | align-items: center; |
| | justify-content: space-between; |
| | padding: 0 2rem; |
| | background: var(--glass); |
| | backdrop-filter: blur(12px); |
| | position: sticky; |
| | top: 0; |
| | z-index: 100; |
| | } |
| | |
| | .logo { |
| | display: flex; |
| | align-items: center; |
| | gap: 12px; |
| | font-weight: 700; |
| | font-size: 1.2rem; |
| | background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | } |
| | |
| | .logo i { |
| | background: var(--primary); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | font-size: 1.5rem; |
| | } |
| | |
| | .status-indicator { |
| | display: flex; |
| | align-items: center; |
| | gap: 8px; |
| | font-size: 0.85rem; |
| | color: var(--text-muted); |
| | background: rgba(255,255,255,0.05); |
| | padding: 6px 12px; |
| | border-radius: 20px; |
| | } |
| | |
| | .status-dot { |
| | width: 8px; |
| | height: 8px; |
| | border-radius: 50%; |
| | background-color: var(--accent); |
| | box-shadow: 0 0 8px var(--accent); |
| | animation: pulse 2s infinite; |
| | } |
| | |
| | .built-with { |
| | font-size: 0.85rem; |
| | color: var(--text-muted); |
| | text-decoration: none; |
| | border: 1px solid var(--border); |
| | padding: 6px 12px; |
| | border-radius: 6px; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .built-with:hover { |
| | border-color: var(--primary); |
| | color: var(--primary); |
| | } |
| | |
| | |
| | .app-container { |
| | display: flex; |
| | flex: 1; |
| | height: calc(100vh - 70px); |
| | } |
| | |
| | |
| | aside { |
| | width: 260px; |
| | background: var(--bg-panel); |
| | border-right: 1px solid var(--border); |
| | padding: 2rem 1rem; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 0.5rem; |
| | } |
| | |
| | .nav-item { |
| | display: flex; |
| | align-items: center; |
| | gap: 12px; |
| | padding: 12px 16px; |
| | border-radius: 10px; |
| | color: var(--text-muted); |
| | cursor: pointer; |
| | transition: all 0.2s ease; |
| | font-weight: 500; |
| | } |
| | |
| | .nav-item:hover { |
| | background: var(--bg-panel-hover); |
| | color: var(--text-main); |
| | } |
| | |
| | .nav-item.active { |
| | background: rgba(99, 102, 241, 0.1); |
| | color: var(--primary); |
| | border: 1px solid rgba(99, 102, 241, 0.2); |
| | } |
| | |
| | .nav-item i { |
| | width: 20px; |
| | text-align: center; |
| | } |
| | |
| | |
| | main { |
| | flex: 1; |
| | padding: 2rem; |
| | overflow-y: auto; |
| | position: relative; |
| | } |
| | |
| | .panel-header { |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .panel-header h1 { |
| | font-size: 2rem; |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | .panel-header p { |
| | color: var(--text-muted); |
| | } |
| | |
| | |
| | .upload-zone { |
| | border: 2px dashed var(--border); |
| | border-radius: 16px; |
| | padding: 4rem 2rem; |
| | text-align: center; |
| | background: rgba(255,255,255,0.02); |
| | transition: all 0.3s ease; |
| | cursor: pointer; |
| | position: relative; |
| | overflow: hidden; |
| | } |
| | |
| | .upload-zone:hover, .upload-zone.drag-over { |
| | border-color: var(--primary); |
| | background: rgba(99, 102, 241, 0.05); |
| | } |
| | |
| | .upload-zone i { |
| | font-size: 3rem; |
| | color: var(--primary); |
| | margin-bottom: 1rem; |
| | } |
| | |
| | .upload-zone h3 { |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | .upload-zone p { |
| | color: var(--text-muted); |
| | font-size: 0.9rem; |
| | } |
| | |
| | .file-info { |
| | margin-top: 1rem; |
| | display: none; |
| | background: var(--bg-panel); |
| | padding: 1rem; |
| | border-radius: 8px; |
| | border: 1px solid var(--border); |
| | align-items: center; |
| | justify-content: space-between; |
| | } |
| | |
| | .file-details { |
| | display: flex; |
| | align-items: center; |
| | gap: 10px; |
| | } |
| | |
| | |
| | .controls-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| | gap: 1.5rem; |
| | margin-top: 2rem; |
| | } |
| | |
| | .input-group label { |
| | display: block; |
| | margin-bottom: 0.5rem; |
| | font-size: 0.9rem; |
| | color: var(--text-muted); |
| | } |
| | |
| | .form-select, .form-input { |
| | width: 100%; |
| | background: var(--bg-panel); |
| | border: 1px solid var(--border); |
| | color: var(--text-main); |
| | padding: 12px; |
| | border-radius: 8px; |
| | font-family: inherit; |
| | transition: border-color 0.2s; |
| | } |
| | |
| | .form-select:focus, .form-input:focus { |
| | border-color: var(--primary); |
| | } |
| | |
| | |
| | .action-btn { |
| | margin-top: 2rem; |
| | width: 100%; |
| | padding: 16px; |
| | background: linear-gradient(90deg, var(--primary) 0%, #4f46e5 100%); |
| | color: white; |
| | border: none; |
| | border-radius: 12px; |
| | font-size: 1rem; |
| | font-weight: 600; |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: 10px; |
| | box-shadow: 0 4px 20px var(--primary-glow); |
| | } |
| | |
| | .action-btn:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 8px 30px var(--primary-glow); |
| | } |
| | |
| | .action-btn:disabled { |
| | opacity: 0.5; |
| | cursor: not-allowed; |
| | transform: none; |
| | } |
| | |
| | |
| | .results-area { |
| | margin-top: 3rem; |
| | display: none; |
| | animation: fadeIn 0.5s ease; |
| | } |
| | |
| | .result-card { |
| | background: var(--bg-panel); |
| | border: 1px solid var(--border); |
| | border-radius: 12px; |
| | overflow: hidden; |
| | } |
| | |
| | .result-header { |
| | padding: 1rem 1.5rem; |
| | border-bottom: 1px solid var(--border); |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | } |
| | |
| | .result-content { |
| | padding: 1.5rem; |
| | min-height: 200px; |
| | max-height: 400px; |
| | overflow-y: auto; |
| | font-family: 'JetBrains Mono', monospace; |
| | font-size: 0.9rem; |
| | line-height: 1.6; |
| | color: var(--text-muted); |
| | } |
| | |
| | |
| | .audio-player-wrapper { |
| | padding: 2rem; |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | gap: 1rem; |
| | } |
| | |
| | .waveform { |
| | width: 100%; |
| | height: 60px; |
| | background: rgba(255,255,255,0.03); |
| | border-radius: 8px; |
| | position: relative; |
| | overflow: hidden; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: 3px; |
| | } |
| | |
| | .bar { |
| | width: 4px; |
| | background: var(--primary); |
| | border-radius: 2px; |
| | animation: wave 1s ease-in-out infinite; |
| | } |
| | |
| | |
| | .progress-container { |
| | width: 100%; |
| | background-color: rgba(255,255,255,0.1); |
| | border-radius: 10px; |
| | margin-top: 1rem; |
| | height: 6px; |
| | overflow: hidden; |
| | display: none; |
| | } |
| | |
| | .progress-bar { |
| | width: 0%; |
| | height: 100%; |
| | background: var(--primary); |
| | border-radius: 10px; |
| | transition: width 0.3s linear; |
| | } |
| | |
| | .status-text { |
| | margin-top: 10px; |
| | font-size: 0.9rem; |
| | color: var(--text-muted); |
| | text-align: center; |
| | min-height: 1.5em; |
| | } |
| | |
| | |
| | @keyframes pulse { |
| | 0% { opacity: 1; } |
| | 50% { opacity: 0.5; } |
| | 100% { opacity: 1; } |
| | } |
| | |
| | @keyframes wave { |
| | 0%, 100% { height: 10%; } |
| | 50% { height: 100%; } |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(10px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | |
| | |
| | @media (max-width: 768px) { |
| | .app-container { |
| | flex-direction: column; |
| | height: auto; |
| | } |
| | |
| | aside { |
| | width: 100%; |
| | flex-direction: row; |
| | overflow-x: auto; |
| | padding: 1rem; |
| | border-bottom: 1px solid var(--border); |
| | border-right: none; |
| | } |
| | |
| | .nav-item { |
| | white-space: nowrap; |
| | } |
| | |
| | header { |
| | padding: 0 1rem; |
| | } |
| | |
| | .built-with { |
| | display: none; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <header> |
| | <div class="logo"> |
| | <i class="fa-solid fa-microphone-lines"></i> |
| | OllamaStream |
| | </div> |
| | <div class="status-indicator"> |
| | <div class="status-dot"></div> |
| | <span>Ollama Server Connected (Local)</span> |
| | </div> |
| | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> |
| | </header> |
| |
|
| | <div class="app-container"> |
| | <aside> |
| | <div class="nav-item active" onclick="switchTab('transcribe')"> |
| | <i class="fa-solid fa-file-audio"></i> |
| | Transcribe |
| | </div> |
| | <div class="nav-item" onclick="switchTab('translate')"> |
| | <i class="fa-solid fa-language"></i> |
| | Translate |
| | </div> |
| | <div class="nav-item" onclick="switchTab('dub')"> |
| | <i class="fa-solid fa-wand-magic-sparkles"></i> |
| | Dub Video |
| | </div> |
| | </aside> |
| |
|
| | <main id="main-content"> |
| | |
| | </main> |
| | </div> |
| |
|
| | <script> |
| | // Application State |
| | const state = { |
| | activeTab: 'transcribe', |
| | uploadedFile: null, |
| | isProcessing: false, |
| | progress: 0 |
| | }; |
| | |
| | // Available Models (Simulated) |
| | const models = { |
| | transcribe: ['whisper', 'whisper-large', 'faster-whisper'], |
| | llm: ['llama3', 'mistral', 'gemma'] |
| | }; |
| | |
| | // DOM Elements |
| | const mainContent = document.getElementById('main-content'); |
| | |
| | // Initial Render |
| | renderInterface(); |
| | |
| | // --- Functions --- |
| | |
| | function switchTab(tabName) { |
| | state.activeTab = tabName; |
| | state.uploadedFile = null; // Reset file on tab switch for simplicity |
| | state.progress = 0; |
| | |
| | // Update UI tabs |
| | document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active')); |
| | event.currentTarget.classList.add('active'); |
| | |
| | renderInterface(); |
| | } |
| | |
| | function renderInterface() { |
| | let html = ''; |
| | |
| | if (state.activeTab === 'transcribe') { |
| | html = getTranscribeTemplate(); |
| | } else if (state.activeTab === 'translate') { |
| | html = getTranslateTemplate(); |
| | } else if (state.activeTab === 'dub') { |
| | html = getDubTemplate(); |
| | } |
| | |
| | mainContent.innerHTML = html; |
| | |
| | // Re-attach listeners after render |
| | attachListeners(); |
| | } |
| | |
| | // --- Templates --- |
| | |
| | function getTranscribeTemplate() { |
| | return ` |
| | <div class="panel-header"> |
| | <h1>Audio Transcription</h1> |
| | <p>Convert audio to text using local Whisper models via Ollama.</p> |
| | </div> |
| | |
| | <div class="upload-zone" id="drop-zone"> |
| | <i class="fa-solid fa-cloud-arrow-up"></i> |
| | <h3>Drag & Drop Audio File</h3> |
| | <p>MP3, WAV, M4A, FLAC supported</p> |
| | <input type="file" id="file-input" hidden accept="audio/*"> |
| | </div> |
| | |
| | <div class="file-info" id="file-info"> |
| | <div class="file-details"> |
| | <i class="fa-solid fa-file-audio" style="color: var(--primary)"></i> |
| | <div> |
| | <div id="filename" style="font-weight:500">filename.mp3</div> |
| | <div id="filesize" style="font-size:0.8rem; color:var(--text-muted)">2.4 MB</div> |
| | </div> |
| | </div> |
| | <i class="fa-solid fa-xmark" style="cursor:pointer; color:var(--text-muted)" onclick="removeFile()"></i> |
| | </div> |
| | |
| | <div class="controls-grid"> |
| | <div class="input-group"> |
| | <label>Model</label> |
| | <select class="form-select" id="model-select"> |
| | ${models.transcribe.map(m => `<option value="${m}">${m}</option>`).join('')} |
| | </select> |
| | </div> |
| | <div class="input-group"> |
| | <label>Language (Optional)</label> |
| | <select class="form-select"> |
| | <option value="">Auto Detect</option> |
| | <option value="en">English</option> |
| | <option value="es">Spanish</option> |
| | <option value="fr">French</option> |
| | <option value="de">German</option> |
| | </select> |
| | </div> |
| | </div> |
| | |
| | <button class="action-btn" id="process-btn" onclick="processTask('transcribe')"> |
| | <i class="fa-solid fa-play"></i> Start Transcription |
| | </button> |
| | |
| | ${getProgressTemplate()} |
| | ${getResultsTemplate('transcription')} |
| | `; |
| | } |
| | |
| | function getTranslateTemplate() { |
| | return ` |
| | <div class="panel-header"> |
| | <h1>Smart Translate</h1> |
| | <p>Translate content using Llama 3 for context-aware accuracy.</p> |
| | </div> |
| | |
| | <div class="upload-zone" id="drop-zone"> |
| | <i class="fa-solid fa-file-import"></i> |
| | <h3>Drag Audio or Text File</h3> |
| | <p>Supports SRT, VTT, TXT, and Audio files</p> |
| | <input type="file" id="file-input" hidden> |
| | </div> |
| | |
| | <div class="file-info" id="file-info"> |
| | <div class="file-details"> |
| | <i class="fa-solid fa-file" style="color: var(--accent)"></i> |
| | <div> |
| | <div id="filename" style="font-weight:500">interview.srt</div> |
| | </div> |
| | </div> |
| | <i class="fa-solid fa-xmark" style="cursor:pointer; color:var(--text-muted)" onclick="removeFile()"></i> |
| | </div> |
| | |
| | <div class="controls-grid"> |
| | <div class="input-group"> |
| | <label>Source Language</label> |
| | <select class="form-select"> |
| | <option value="auto">Auto Detect</option> |
| | <option value="en">English</option> |
| | <option value="es">Spanish</option> |
| | </select> |
| | </div> |
| | <div class="input-group"> |
| | <label>Target Language</label> |
| | <select class="form-select"> |
| | <option value="es">Spanish</option> |
| | <option value="fr">French</option> |
| | <option value="de">German</option> |
| | <option value="jp">Japanese</option> |
| | </select> |
| | </div> |
| | <div class="input-group"> |
| | <label>AI Model</label> |
| | <select class="form-select"> |
| | ${models.llm.map(m => `<option value="${m}">${m}</option>`).join('')} |
| | </select> |
| | </div> |
| | </div> |
| | |
| | <button class="action-btn" id="process-btn" onclick="processTask('translate')"> |
| | <i class="fa-solid fa-language"></i> Translate Content |
| | </button> |
| | |
| | ${getProgressTemplate()} |
| | ${getResultsTemplate('translation')} |
| | `; |
| | } |
| | |
| | function getDubTemplate() { |
| | return ` |
| | <div class="panel-header"> |
| | <h1>AI Dubbing</h1> |
| | <p>Replace original voice track with a generated AI voice clone.</p> |
| | </div> |
| | |
| | <div class="upload-zone" id="drop-zone"> |
| | <i class="fa-solid fa-video"></i> |
| | <h3>Drag Video File</h3> |
| | <p>MP4, MOV, WEBM supported</p> |
| | <input type="file" id="file-input" hidden accept="video/*"> |
| | </div> |
| | |
| | <div class="file-info" id="file-info"> |
| | <div class="file-details"> |
| | <i class="fa-solid fa-film" style="color: var(--danger)"></i> |
| | <div> |
| | <div id="filename" style="font-weight:500">presentation.mp4</div> |
| | <div id="filesize" style="font-size:0.8rem; color:var(--text-muted)">15 MB</div> |
| | </div> |
| | </div> |
| | <i class="fa-solid fa-xmark" style="cursor:pointer; color:var(--text-muted)" onclick="removeFile()"></i> |
| | </div> |
| | |
| | <div class="controls-grid"> |
| | <div class="input-group"> |
| | <label>Target Language</label> |
| | <select class="form-select"> |
| | <option value="en-US">English (US)</option> |
| | <option value="en-UK">English (UK)</option> |
| | <option value="es-ES">Spanish (Spain)</option> |
| | <option value="jp-JP">Japanese</option> |
| | </select> |
| | </div> |
| | <div class="input-group"> |
| | <label>Voice Model</label> |
| | <select class="form-select"> |
| | <option value="alloy">Alloy (Neutral)</option> |
| | <option value="echo">Echo (British)</option> |
| | <option value="shimmer">Shimmer (Female)</option> |
| | </select> |
| | </div> |
| | </div> |
| | |
| | <button class="action-btn" id="process-btn" onclick="processTask('dub')"> |
| | <i class="fa-solid fa-wand-magic-sparkles"></i> Generate Dub |
| | </button> |
| | |
| | ${getProgressTemplate()} |
| | ${getResultsTemplate('dub')} |
| | `; |
| | } |
| | |
| | function getProgressTemplate() { |
| | return ` |
| | <div class="progress-container" id="progress-container"> |
| | <div class="progress-bar" id="progress-bar"></div> |
| | </div> |
| | <div class="status-text" id="status-text"></div> |
| | `; |
| | } |
| | |
| | function getResultsTemplate(type) { |
| | let content = ''; |
| | if (type === 'transcription') { |
| | content = `<p style="color:var(--text-muted); text-align:center; padding:2rem;">No transcription generated yet.</p>`; |
| | } else if (type === 'translation') { |
| | content = `<p style="color:var(--text-muted); text-align:center; padding:2rem;">No translation generated yet.</p>`; |
| | } else if (type === 'dub') { |
| | content = ` |
| | <div class="audio-player-wrapper"> |
| | <div class="waveform" id="waveform"> |
| | |
| | </div> |
| | <audio controls style="width: 100%; margin-top:1rem;"> |
| | <source src="" type="audio/mpeg"> |
| | Your browser does not support the audio element. |
| | </audio> |
| | <div style="display:flex; gap:10px; margin-top:10px;"> |
| | <button class="form-select" style="width:auto; cursor:pointer;">Download MP3</button> |
| | <button class="form-select" style="width:auto; cursor:pointer;">Download Video</button> |
| | </div> |
| | </div> |
| | `; |
| | } |
| | |
| | return ` |
| | <div class="results-area" id="results-area"> |
| | <div class="result-card"> |
| | <div class="result-header"> |
| | <span style="font-weight:600">Output Result</span> |
| | <button class="form-select" style="width:auto; padding:4px 8px; cursor:pointer; font-size:0.8rem;">Copy / Save</button> |
| | </div> |
| | <div class="result-content" id="result-content"> |
| | ${content} |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | } |
| | |
| | // --- Logic --- |
| | |
| | function attachListeners() { |
| | const dropZone = document.getElementById('drop-zone'); |
| | const fileInput = document.getElementById('file-input'); |
| | |
| | if(dropZone) { |
| | dropZone.addEventListener('click', () => fileInput.click()); |
| | |
| | dropZone.addEventListener('dragover', (e) => { |
| | e.preventDefault(); |
| | dropZone.classList.add('drag-over'); |
| | }); |
| | |
| | dropZone.addEventListener('dragleave', () => { |
| | dropZone.classList.remove('drag-over'); |
| | }); |
| | |
| | dropZone.addEventListener('drop', (e) => { |
| | e.preventDefault(); |
| | dropZone.classList.remove('drag-over'); |
| | if (e.dataTransfer.files.length) { |
| | handleFile(e.dataTransfer.files[0]); |
| | } |
| | }); |
| | } |
| | |
| | if(fileInput) { |
| | fileInput.addEventListener('change', (e) => { |
| | if (e.target.files.length) { |
| | handleFile(e.target.files[0]); |
| | } |
| | }); |
| | } |
| | } |
| | |
| | function handleFile(file) { |
| | state.uploadedFile = file; |
| | |
| | // Update UI |
| | document.getElementById('filename').innerText = file.name; |
| | document.getElementById('filesize') ? document.getElementById('filesize').innerText = (file.size / 1024 / 1024).toFixed(2) + ' MB' : null; |
| | |
| | document.querySelector('.upload-zone').style.display = 'none'; |
| | document.getElementById('file-info').style.display = 'flex'; |
| | } |
| | |
| | function removeFile() { |
| | state.uploadedFile = null; |
| | document.querySelector('.upload-zone').style.display = 'block'; |
| | document.getElementById('file-info').style.display = 'none'; |
| | document.getElementById('file-input').value = ''; |
| | } |
| | |
| | function processTask(task) { |
| | if (!state.uploadedFile) { |
| | alert('Please upload a file first.'); |
| | return; |
| | } |
| | |
| | const btn = document.getElementById('process-btn'); |
| | const progressContainer = document.getElementById('progress-container'); |
| | const progressBar = document.getElementById('progress-bar'); |
| | const statusText = document.getElementById('status-text'); |
| | const resultsArea = document.getElementById('results-area'); |
| | |
| | // Reset UI |
| | btn.disabled = true; |
| | btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...'; |
| | progressContainer.style.display = 'block'; |
| | resultsArea.style.display = 'none'; |
| | state.progress = 0; |
| | |
| | // Simulation Loop |
| | const interval = setInterval(() => { |
| | state.progress += Math.random() * 10; |
| | |
| | if (state.progress > 100) state.progress = 100; |
| | |
| | progressBar.style.width = state.progress + '%'; |
| | |
| | if (state.progress < 30) { |
| | statusText.innerText = `Loading model context...`; |
| | } else if (state.progress < 70) { |
| | statusText.innerText = `Analyzing ${state.uploadedFile.name}...`; |
| | } else if (state.progress < 95) { |
| | statusText.innerText = task === 'dub' ? 'Synthesizing audio track...' : 'Generating text...'; |
| | } else { |
| | statusText.innerText = 'Finalizing...'; |
| | } |
| | |
| | if (state.progress >= 100) { |
| | clearInterval(interval); |
| | finishTask(task); |
| | } |
| | }, 300); |
| | } |
| | |
| | function finishTask(task) { |
| | const btn = document.getElementById('process-btn'); |
| | const statusText = document.getElementById('status-text'); |
| | const resultsArea = document.getElementById('results-area'); |
| | const resultContent = document.getElementById('result-content'); |
| | |
| | btn.disabled = false; |
| | btn.innerHTML = `<i class="fa-solid fa-check"></i> Done`; |
| | statusText.innerText = 'Processing Complete'; |
| | |
| | resultsArea.style.display = 'block'; |
| | |
| | // Simulate results based on task |
| | if (task === 'transcribe') { |
| | resultContent.innerHTML = ` |
| | <div style="margin-bottom:10px; border-bottom:1px solid #333; padding-bottom:10px;"> |
| | <span style="color:var(--primary); font-size:0.8rem;">00:00:05</span> |
| | <p>Welcome to the demonstration of the new AI system.</p> |
| | </div> |
| | <div style="margin-bottom:10px; border-bottom:1px solid #333; padding-bottom:10px;"> |
| | <span style="color:var(--primary); font-size:0.8rem;">00:00:12</span> |
| | <p>Today we are going to explore how local models can process media.</p> |
| | </div> |
| | <div> |
| | <span style="color:var(--primary); font-size:0.8rem;">00:00:20</span> |
| | <p>This is a simulated transcription for the UI demo.</p> |
| | </div> |
| | `; |
| | } else if (task === 'translate') { |
| | resultContent.innerHTML = ` |
| | <p><strong>Original:</strong> This is a simulated transcript.</p> |
| | <br> |
| | <p><strong>Translated (Spanish):</strong> Esta es una transcripción simulada.</p> |
| | `; |
| | } else if (task === 'dub') { |
| | // Generate fake waveform bars |
| | const waveform = document.getElementById('waveform'); |
| | if(waveform) { |
| | for(let i=0; i<30; i++) { |
| | let h = Math.floor(Math.random() * 40) + 10; |
| | let bar = document.createElement('div'); |
| | bar.className = 'bar'; |
| | bar.style.height = h + '%'; |
| | bar.style.animationDelay = (i * 0.1) + 's'; |
| | waveform.appendChild(bar); |
| | } |
| | } |
| | // Result content is already in template, just make sure it shows |
| | } |
| | } |
| | </script> |
| | </body> |
| | </html> |
