|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Whisper AI Transcription</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #6e48aa; |
|
|
--primary-dark: #4a2d8a; |
|
|
--secondary: #9d50bb; |
|
|
--gradient-start: #4776e6; |
|
|
--gradient-end: #8e54e9; |
|
|
--light: #f8f9fa; |
|
|
--dark: #2d3748; |
|
|
--gray: #edf2f7; |
|
|
--success: #48bb78; |
|
|
--danger: #e53e3e; |
|
|
--warning: #ed8936; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #f0f4f8; |
|
|
color: var(--dark); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1000px; |
|
|
margin: 2rem auto; |
|
|
padding: 0 1rem; |
|
|
} |
|
|
|
|
|
header { |
|
|
text-align: center; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.5rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
font-size: 2.5rem; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2.5rem; |
|
|
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
font-weight: 700; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
color: #718096; |
|
|
font-size: 1.1rem; |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
|
padding: 2rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.card-title { |
|
|
font-size: 1.4rem; |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--primary-dark); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.8rem; |
|
|
} |
|
|
|
|
|
.card-title i { |
|
|
font-size: 1.8rem; |
|
|
color: var(--secondary); |
|
|
} |
|
|
|
|
|
.controls { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.input-group { |
|
|
flex-direction: column; |
|
|
} |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 0.8rem 1.5rem; |
|
|
border-radius: 8px; |
|
|
border: none; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.5rem; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background-color: var(--primary-dark); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 12px rgba(110, 72, 170, 0.3); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background-color: transparent; |
|
|
border: 2px solid var(--primary); |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background-color: var(--danger); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-danger:hover { |
|
|
background-color: #c53030; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3); |
|
|
} |
|
|
|
|
|
.btn:disabled { |
|
|
opacity: 0.7; |
|
|
cursor: not-allowed; |
|
|
transform: none !important; |
|
|
box-shadow: none !important; |
|
|
} |
|
|
|
|
|
.file-upload { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.audio-visualizer { |
|
|
width: 100%; |
|
|
height: 100px; |
|
|
background-color: #f5f3ff; |
|
|
border-radius: 8px; |
|
|
margin: 1rem 0; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.visualizer-bars { |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
justify-content: space-around; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
padding: 0.5rem; |
|
|
} |
|
|
|
|
|
.bar { |
|
|
background-color: var(--primary); |
|
|
width: 6px; |
|
|
border-radius: 3px; |
|
|
transition: height 0.1s ease; |
|
|
} |
|
|
|
|
|
.recording-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
color: var(--danger); |
|
|
font-weight: 600; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--danger); |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: scale(0.95); |
|
|
box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7); |
|
|
} |
|
|
70% { |
|
|
transform: scale(1); |
|
|
box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); |
|
|
} |
|
|
100% { |
|
|
transform: scale(0.95); |
|
|
box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.timer { |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.transcription-card { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.transcription-content { |
|
|
min-height: 200px; |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
padding: 1rem; |
|
|
background-color: var(--gray); |
|
|
border-radius: 8px; |
|
|
white-space: pre-wrap; |
|
|
line-height: 1.8; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.copy-btn { |
|
|
position: absolute; |
|
|
top: 1rem; |
|
|
right: 1rem; |
|
|
background-color: rgba(255, 255, 255, 0.8); |
|
|
border-radius: 6px; |
|
|
padding: 0.5rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.copy-btn:hover { |
|
|
background-color: white; |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.copy-btn i { |
|
|
color: var(--primary); |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.language-selector { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
select { |
|
|
padding: 0.8rem; |
|
|
border-radius: 8px; |
|
|
border: 1px solid #cbd5e0; |
|
|
background-color: white; |
|
|
font-size: 1rem; |
|
|
color: var(--dark); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
select:focus { |
|
|
outline: none; |
|
|
border-color: var(--primary); |
|
|
box-shadow: 0 0 0 3px rgba(110, 72, 170, 0.2); |
|
|
} |
|
|
|
|
|
.file-info { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
margin-top: 0.5rem; |
|
|
color: #4a5568; |
|
|
} |
|
|
|
|
|
.file-info i { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.status-message { |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 1rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.8rem; |
|
|
} |
|
|
|
|
|
.status-processing { |
|
|
background-color: #feebc8; |
|
|
color: #b7791f; |
|
|
} |
|
|
|
|
|
.status-success { |
|
|
background-color: #c6f6d5; |
|
|
color: #25855a; |
|
|
} |
|
|
|
|
|
.status-error { |
|
|
background-color: #fed7d7; |
|
|
color: #c53030; |
|
|
} |
|
|
|
|
|
.progress-container { |
|
|
width: 100%; |
|
|
height: 8px; |
|
|
background-color: #e2e8f0; |
|
|
border-radius: 4px; |
|
|
margin-top: 1rem; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 100%; |
|
|
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); |
|
|
border-radius: 4px; |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.settings-toggle { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
color: #4a5568; |
|
|
cursor: pointer; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.settings-toggle i { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.settings-container { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
background-color: #f8f9fa; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.settings-container.open { |
|
|
max-height: 300px; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.setting-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.checkbox-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
input[type="checkbox"] { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 2px solid #cbd5e0; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
input[type="checkbox"]:checked { |
|
|
background-color: var(--primary); |
|
|
border-color: var(--primary); |
|
|
} |
|
|
|
|
|
input[type="checkbox"]:checked::after { |
|
|
content: '\f00c'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
color: white; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.history-item { |
|
|
padding: 1rem; |
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s ease; |
|
|
} |
|
|
|
|
|
.history-item:hover { |
|
|
background-color: #f7fafc; |
|
|
} |
|
|
|
|
|
.history-item-time { |
|
|
font-size: 0.9rem; |
|
|
color: #718096; |
|
|
} |
|
|
|
|
|
.history-item-preview { |
|
|
display: -webkit-box; |
|
|
-webkit-line-clamp: 2; |
|
|
-webkit-box-orient: vertical; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
margin-top: 0.3rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-comment-dots"></i> |
|
|
<h1>Whisper AI</h1> |
|
|
</div> |
|
|
<p class="subtitle">Advanced speech recognition powered by OpenAI's Whisper model. Convert speech to text with remarkable accuracy.</p> |
|
|
</header> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="card-title"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
Audio Input |
|
|
</h2> |
|
|
|
|
|
<div class="controls"> |
|
|
<div class="input-group"> |
|
|
<button id="recordBtn" class="btn btn-primary"> |
|
|
<i class="fas fa-microphone"></i> Start Recording |
|
|
</button> |
|
|
<button id="uploadBtn" class="btn btn-outline"> |
|
|
<i class="fas fa-upload"></i> Upload Audio |
|
|
</button> |
|
|
<input type="file" id="fileInput" class="file-upload" accept="audio/*,video/*,.wav,.mp3,.ogg,.m4a,.mp4,.webm"> |
|
|
</div> |
|
|
|
|
|
<div class="language-selector"> |
|
|
<label for="language">Select Language</label> |
|
|
<select id="language"> |
|
|
<option value="auto">Auto-detect</option> |
|
|
<option value="en">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="ru">Russian</option> |
|
|
<option value="ja">Japanese</option> |
|
|
<option value="zh">Chinese</option> |
|
|
<option value="hi">Hindi</option> |
|
|
<option value="ar">Arabic</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="audio-visualizer" id="visualizer"> |
|
|
<div class="visualizer-bars" id="visualizerBars"></div> |
|
|
</div> |
|
|
|
|
|
<div id="recordingUI" style="display: none;"> |
|
|
<div class="recording-indicator"> |
|
|
<div class="pulse"></div> |
|
|
<span>Recording</span> |
|
|
<span class="timer" id="timer">00:00</span> |
|
|
</div> |
|
|
<button id="stopBtn" class="btn btn-danger"> |
|
|
<i class="fas fa-stop"></i> Stop & Process |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="fileInfo" style="display: none;"> |
|
|
<div class="file-info"> |
|
|
<i class="fas fa-file-audio"></i> |
|
|
<span id="fileName"></span> |
|
|
</div> |
|
|
<button id="processFileBtn" class="btn btn-primary"> |
|
|
<i class="fas fa-cog"></i> Process File |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-toggle" id="settingsToggle"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>Advanced Settings</span> |
|
|
</div> |
|
|
|
|
|
<div class="settings-container" id="settingsContainer"> |
|
|
<div class="setting-item"> |
|
|
<span>Transcription Task</span> |
|
|
<select id="taskType"> |
|
|
<option value="transcribe">Transcribe (default)</option> |
|
|
<option value="translate">Translate to English</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="setting-item"> |
|
|
<span>Temperature</span> |
|
|
<input type="range" id="temperature" min="0" max="1" step="0.1" value="0"> |
|
|
<span id="temperatureValue">0</span> |
|
|
</div> |
|
|
<div class="checkbox-container"> |
|
|
<input type="checkbox" id="timestamps" checked> |
|
|
<label for="timestamps">Include timestamps</label> |
|
|
</div> |
|
|
<div class="checkbox-container"> |
|
|
<input type="checkbox" id="diarization"> |
|
|
<label for="diarization">Speaker diarization (beta)</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card transcription-card"> |
|
|
<h2 class="card-title"> |
|
|
<i class="fas fa-keyboard"></i> |
|
|
Transcription |
|
|
</h2> |
|
|
|
|
|
<div id="statusMessage" style="display: none;"></div> |
|
|
|
|
|
<div class="progress-container" id="progressContainer" style="display: none;"> |
|
|
<div class="progress-bar" id="progressBar"></div> |
|
|
</div> |
|
|
|
|
|
<div class="transcription-content" id="transcriptionResult"> |
|
|
<div style="text-align: center; padding: 4rem 0; color: #a0aec0;"> |
|
|
<i class="fas fa-comment-slash" style="font-size: 3rem; margin-bottom: 1rem;"></i> |
|
|
<h3>No transcription yet</h3> |
|
|
<p>Record audio or upload a file to get started</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="copy-btn" id="copyBtn" title="Copy to clipboard" style="display: none;"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="card-title"> |
|
|
<i class="fas fa-history"></i> |
|
|
Recent Transcripts |
|
|
</h2> |
|
|
|
|
|
<div id="historyList"> |
|
|
<div class="history-item"> |
|
|
<div class="history-item-time">5 minutes ago</div> |
|
|
<div class="history-item-preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div> |
|
|
</div> |
|
|
<div class="history-item"> |
|
|
<div class="history-item-time">2 hours ago</div> |
|
|
<div class="history-item-preview">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const recordBtn = document.getElementById('recordBtn'); |
|
|
const stopBtn = document.getElementById('stopBtn'); |
|
|
const uploadBtn = document.getElementById('uploadBtn'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const processFileBtn = document.getElementById('processFileBtn'); |
|
|
const fileName = document.getElementById('fileName'); |
|
|
const fileInfo = document.getElementById('fileInfo'); |
|
|
const recordingUI = document.getElementById('recordingUI'); |
|
|
const timer = document.getElementById('timer'); |
|
|
const visualizer = document.getElementById('visualizer'); |
|
|
const visualizerBars = document.getElementById('visualizerBars'); |
|
|
const transcriptionResult = document.getElementById('transcriptionResult'); |
|
|
const statusMessage = document.getElementById('statusMessage'); |
|
|
const progressContainer = document.getElementById('progressContainer'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
const copyBtn = document.getElementById('copyBtn'); |
|
|
const settingsToggle = document.getElementById('settingsToggle'); |
|
|
const settingsContainer = document.getElementById('settingsContainer'); |
|
|
const temperature = document.getElementById('temperature'); |
|
|
const temperatureValue = document.getElementById('temperatureValue'); |
|
|
|
|
|
|
|
|
let mediaRecorder; |
|
|
let audioChunks = []; |
|
|
let audioContext; |
|
|
let analyser; |
|
|
let timerInterval; |
|
|
let seconds = 0; |
|
|
let isRecording = false; |
|
|
|
|
|
|
|
|
for (let i = 0; i < 40; i++) { |
|
|
const bar = document.createElement('div'); |
|
|
bar.className = 'bar'; |
|
|
bar.style.height = '0%'; |
|
|
visualizerBars.appendChild(bar); |
|
|
} |
|
|
const bars = document.querySelectorAll('.bar'); |
|
|
|
|
|
|
|
|
recordBtn.addEventListener('click', startRecording); |
|
|
stopBtn.addEventListener('click', stopRecording); |
|
|
uploadBtn.addEventListener('click', () => fileInput.click()); |
|
|
fileInput.addEventListener('change', handleFileUpload); |
|
|
processFileBtn.addEventListener('click', processUploadedFile); |
|
|
copyBtn.addEventListener('click', copyTranscription); |
|
|
settingsToggle.addEventListener('click', toggleSettings); |
|
|
temperature.addEventListener('input', updateTemperatureValue); |
|
|
|
|
|
|
|
|
updateTemperatureValue(); |
|
|
|
|
|
async function startRecording() { |
|
|
try { |
|
|
|
|
|
recordBtn.style.display = 'none'; |
|
|
recordingUI.style.display = 'block'; |
|
|
|
|
|
|
|
|
seconds = 0; |
|
|
updateTimer(); |
|
|
timerInterval = setInterval(updateTimer, 1000); |
|
|
|
|
|
|
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); |
|
|
mediaRecorder = new MediaRecorder(stream); |
|
|
isRecording = true; |
|
|
|
|
|
|
|
|
audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
|
|
const source = audioContext.createMediaStreamSource(stream); |
|
|
analyser = audioContext.createAnalyser(); |
|
|
analyser.fftSize = 64; |
|
|
source.connect(analyser); |
|
|
|
|
|
|
|
|
visualize(); |
|
|
|
|
|
|
|
|
mediaRecorder.ondataavailable = event => { |
|
|
audioChunks.push(event.data); |
|
|
}; |
|
|
|
|
|
mediaRecorder.onstop = async () => { |
|
|
clearInterval(timerInterval); |
|
|
|
|
|
|
|
|
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); |
|
|
audioChunks = []; |
|
|
|
|
|
|
|
|
await processAudio(audioBlob, 'recording.wav'); |
|
|
}; |
|
|
|
|
|
mediaRecorder.start(100); |
|
|
|
|
|
|
|
|
showStatus('Processing your recording...', 'processing'); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error accessing microphone:', error); |
|
|
stopRecording(); |
|
|
showStatus('Error accessing microphone. Please check permissions.', 'error'); |
|
|
recordBtn.style.display = 'block'; |
|
|
recordingUI.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
function stopRecording() { |
|
|
if (mediaRecorder && isRecording) { |
|
|
mediaRecorder.stop(); |
|
|
isRecording = false; |
|
|
|
|
|
|
|
|
mediaRecorder.stream.getTracks().forEach(track => track.stop()); |
|
|
|
|
|
|
|
|
cancelAnimationFrame(visualize); |
|
|
|
|
|
clearInterval(timerInterval); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateTimer() { |
|
|
seconds++; |
|
|
const minutes = Math.floor(seconds / 60); |
|
|
const remainingSeconds = seconds % 60; |
|
|
timer.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`; |
|
|
} |
|
|
|
|
|
function visualize() { |
|
|
if (!isRecording) return; |
|
|
|
|
|
const bufferLength = analyser.frequencyBinCount; |
|
|
const dataArray = new Uint8Array(bufferLength); |
|
|
analyser.getByteFrequencyData(dataArray); |
|
|
|
|
|
for (let i = 0; i < bars.length; i++) { |
|
|
const barHeight = (dataArray[i % bufferLength] / 255) * 100; |
|
|
bars[i].style.height = `${barHeight}%`; |
|
|
} |
|
|
|
|
|
requestAnimationFrame(visualize); |
|
|
} |
|
|
|
|
|
function handleFileUpload(event) { |
|
|
const file = event.target.files[0]; |
|
|
if (file) { |
|
|
fileName.textContent = file.name; |
|
|
fileInfo.style.display = 'block'; |
|
|
|
|
|
|
|
|
fileInput.value = ''; |
|
|
} else { |
|
|
fileInfo.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
async function processUploadedFile() { |
|
|
const file = fileInput.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
showStatus('Processing uploaded file...', 'processing'); |
|
|
progressContainer.style.display = 'block'; |
|
|
|
|
|
|
|
|
simulateProcessing(() => { |
|
|
processAudio(file, file.name); |
|
|
}); |
|
|
} |
|
|
|
|
|
async function processAudio(audioBlob, fileName) { |
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
progressBar.style.width = '40%'; |
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500)); |
|
|
|
|
|
progressBar.style.width = '70%'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const mockResults = getMockTranscription(fileName); |
|
|
displayResults(mockResults); |
|
|
showStatus('Transcription completed successfully!', 'success'); |
|
|
}, 1000); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error processing audio:', error); |
|
|
showStatus('Error processing audio. Please try again.', 'error'); |
|
|
} finally { |
|
|
|
|
|
recordBtn.style.display = 'block'; |
|
|
recordingUI.style.display = 'none'; |
|
|
fileInfo.style.display = 'none'; |
|
|
progressBar.style.width = '100%'; |
|
|
} |
|
|
} |
|
|
|
|
|
function displayResults(results) { |
|
|
transcriptionResult.innerHTML = results; |
|
|
|
|
|
|
|
|
const isEmpty = results.includes('No transcription yet'); |
|
|
copyBtn.style.display = isEmpty ? 'none' : 'block'; |
|
|
} |
|
|
|
|
|
function showStatus(message, type) { |
|
|
statusMessage.style.display = 'block'; |
|
|
statusMessage.textContent = message; |
|
|
statusMessage.className = 'status-message'; |
|
|
|
|
|
switch (type) { |
|
|
case 'processing': |
|
|
statusMessage.classList.add('status-processing'); |
|
|
progressContainer.style.display = 'block'; |
|
|
progressBar.style.width = '10%'; |
|
|
break; |
|
|
case 'success': |
|
|
statusMessage.classList.add('status-success'); |
|
|
progressContainer.style.display = 'none'; |
|
|
break; |
|
|
case 'error': |
|
|
statusMessage.classList.add('status-error'); |
|
|
progressContainer.style.display = 'none'; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
function copyTranscription() { |
|
|
const text = transcriptionResult.innerText; |
|
|
navigator.clipboard.writeText(text).then(() => { |
|
|
|
|
|
const originalIcon = copyBtn.innerHTML; |
|
|
copyBtn.innerHTML = '<i class="fas fa-check"></i>'; |
|
|
|
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = originalIcon; |
|
|
}, 2000); |
|
|
}).catch(err => { |
|
|
console.error('Failed to copy text: ', err); |
|
|
}); |
|
|
} |
|
|
|
|
|
function toggleSettings() { |
|
|
settingsContainer.classList.toggle('open'); |
|
|
const icon = settingsToggle.querySelector('i'); |
|
|
icon.style.transform = settingsContainer.classList.contains('open') ? 'rotate(90deg)' : 'rotate(0)'; |
|
|
} |
|
|
|
|
|
function updateTemperatureValue() { |
|
|
temperatureValue.textContent = temperature.value; |
|
|
} |
|
|
|
|
|
function simulateProcessing(callback) { |
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if (progress >= 90) { |
|
|
progress = 90; |
|
|
clearInterval(interval); |
|
|
callback(); |
|
|
} |
|
|
progressBar.style.width = `${progress}%`; |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
function getMockTranscription(filename) { |
|
|
const now = new Date(); |
|
|
const languages = ['English', 'Spanish', 'French', 'German']; |
|
|
const randomLanguage = languages[Math.floor(Math.random() * languages.length)]; |
|
|
|
|
|
return `Filename: ${filename}\n` + |
|
|
`Detected language: ${randomLanguage}\n` + |
|
|
`Transcribed at: ${now.toLocaleString()}\n\n` + |
|
|
`[00:00:00 --> 00:00:03] Hello there! This is a mock transcription from the Whisper speech recognition model.\n` + |
|
|
`[00:00:03 --> 00:00:07] It demonstrates what the real output would look like when using the actual Whisper API.\n` + |
|
|
`[00:00:07 --> 00:00:12] In a real implementation, this text would come from OpenAI's Whisper model processing your audio.\n` + |
|
|
`[00:00:12 --> 00:00:15] Whisper is great for transcribing meetings, lectures, interviews, and more.\n` + |
|
|
`[00:00:15 --> 00:00:18] Thank you for trying out this demo interface!\n`; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
