[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_164":165,"_166":167},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":49,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","624143da-2793-11f0-9d52-569c3dd06744","name","fileType","http","content","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\n\nconst app = new Hono();\n\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\n\n// Function to handle audio transcription using Groq's Whisper API\nexport const audioTranscriptionHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const audioFile = formData.get(\"audio\");\n const audioUrl = formData.get(\"audioUrl\");\n \n if (!audioFile && !audioUrl) {\n return c.json({ error: \"No audio file or URL provided\" }, 400);\n }\n\n // Get API key from environment variable\n const apiKey = Deno.env.get(\"GROQ_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"API key not configured\" }, 500);\n }\n\n // Prepare the form data for Groq API\n const groqFormData = new FormData();\n \n if (audioFile) {\n groqFormData.append(\"file\", audioFile);\n } else {\n groqFormData.append(\"url\", audioUrl);\n }\n \n groqFormData.append(\"model\", \"whisper-large-v3\");\n groqFormData.append(\"response_format\", \"verbose_json\");\n groqFormData.append(\"timestamp_granularities[]\", \"word\");\n\n // Call Groq API\n const response = await fetch(\"https://api.groq.com/openai/v1/audio/transcriptions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`\n },\n body: groqFormData\n });\n\n // Get response content type\n const contentType = response.headers.get(\"content-type\");\n \n if (!response.ok) {\n let errorMessage = \"\";\n \n try {\n if (contentType && contentType.includes(\"application/json\")) {\n const errorData = await response.json();\n errorMessage = errorData.error?.message || JSON.stringify(errorData);\n } else {\n // Handle HTML or text responses\n const textContent = await response.text();\n if (textContent.includes(\"413\") || textContent.includes(\"too large\")) {\n errorMessage = \"File size too large. Please upload a smaller audio file.\";\n } else if (textContent.includes(\"415\")) {\n errorMessage = \"Unsupported media type. Please upload a valid audio file.\";\n } else {\n errorMessage = `Server error: ${response.status} ${response.statusText}`;\n // Log the full response for debugging\n console.error(\"Groq API error response:\", {\n status: response.status,\n statusText: response.statusText,\n contentType,\n body: textContent\n });\n }\n }\n } catch (parseError) {\n console.error(\"Error parsing Groq API response:\", parseError);\n errorMessage = \"Failed to parse error response from server\";\n }\n\n return c.json({ \n error: `Groq API error: ${errorMessage}`,\n status: response.status\n }, response.status);\n }\n\n // Handle successful response\n try {\n const result = await response.json();\n return c.json(result);\n } catch (parseError) {\n console.error(\"Error parsing successful response:\", parseError);\n return c.json({\n error: \"Failed to parse transcription response\",\n details: parseError.message\n }, 500);\n }\n } catch (error) {\n console.error(\"Transcription error:\", error);\n return c.json({\n error: error.message || \"Error processing audio\",\n details: error.stack\n }, 500);\n }\n};\n\nexport const getTailwindConfig = () => ({\n theme: {\n extend: {\n colors: {\n 'background': '#F5F4F4',\n 'page-bg': '#F5F4F4',\n 'app-bg': '#FDFBF7',\n 'app-bg-alt': '#FFFFFF',\n 'app-accent': '#E2DFDF',\n 'primary': '#0E141B',\n 'accent': '#FDFAF4',\n 'secondary': '#D9D5D4',\n 'text': '#100C04',\n 'button': '#39516A',\n 'button-hover': '#0063CC',\n }\n }\n }\n});\n\nexport const getStyles = () => `\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n html {\n @apply bg-background;\n }\n .AppBody {\n @apply bg-page-bg text-text py-4;\n }\n .AppContainer {\n @apply container mx-auto;\n }\n .App {\n @apply max-w-4xl mx-2 md:mx-auto p-4 bg-app-bg border border-app-accent rounded-md shadow-sm;\n }\n .AppFooter {\n @apply mt-4 text-center text-sm;\n }\n .AppFooter a {\n @apply text-primary hover:text-button-hover underline;\n }\n h1 {\n @apply text-3xl font-semibold mb-4 text-primary;\n }\n textarea {\n @apply w-full mb-2 py-2 px-4 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n summary {\n @apply cursor-pointer hover:text-button-hover;\n }\n button {\n @apply bg-button text-white px-4 py-2 rounded hover:bg-button-hover transition-colors;\n }\n button.accordion {\n @apply bg-app-bg text-primary px-0 py-2 rounded-md transition-colors hover:text-button-hover;\n }\n .JsonOutput {\n @apply mt-4 relative;\n }\n .JsonOutput pre {\n @apply p-4 bg-app-bg-alt border border-app-accent rounded-md text-sm overflow-x-auto whitespace-pre-wrap;\n }\n .JsonOutput button {\n @apply absolute top-2 right-2 text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .TextOutput {\n @apply mt-4;\n }\n .TextOutput-content {\n @apply p-4 bg-app-bg-alt border border-primary rounded-md;\n }\n .TextOutput-header {\n @apply mb-2 text-xs text-gray-600 flex justify-between items-center;\n }\n .TextOutput button {\n @apply text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .transcript-word {\n @apply inline-block px-1 py-0.5 rounded cursor-pointer transition-colors hover:bg-secondary hover:text-white;\n }\n .transcript-word.active {\n @apply bg-blue-500 text-white;\n }\n \n\n .transcript-container-paragraphs {\n .transcript-word:first-child, .transcript-word:first-of-type {\n @apply pl-16 text-blue-500;\n }\n .transcript-word {\n @apply pl-0;\n }\n }\n .audio-controls {\n @apply flex items-center justify-between mb-4 p-2 bg-app-bg-alt rounded-md border border-app-accent;\n }\n .transcript-container {\n @apply mt-4 p-4 bg-app-bg-alt border border-app-accent rounded-md leading-relaxed;\n height: 300px;\n overflow-y: auto;\n }\n .transcript-paragraph {\n @apply mb-4 relative;\n }\n .transcript-timestamp {\n @apply left-0 top-0 bg-secondary text-xs px-2 py-1 rounded-md text-white font-mono;\n min-width: 60px;\n }\n .transcript-view-toggle {\n @apply flex;\n }\n .transcript-view-toggle button {\n @apply px-3 py-1 text-sm;\n }\n .transcript-view-toggle button.active {\n @apply bg-primary;\n }\n .copy-buttons {\n @apply flex justify-end space-x-2;\n }\n .copy-button {\n @apply text-sm px-3 py-1 flex items-center;\n }\n .copy-button svg {\n @apply w-4 h-4 mr-1;\n }\n .scroll-controls {\n @apply mt-2 flex justify-between items-center px-2;\n }\n .scroll-controls button {\n @apply text-sm;\n }\n .auto-scroll-toggle {\n @apply flex items-center space-x-2;\n }\n .auto-scroll-toggle input[type=\"checkbox\"] {\n @apply h-4 w-4 text-button border-secondary rounded focus:ring-button;\n }\n \n /* Saved transcripts styles */\n .saved-transcript-item {\n @apply p-2 border-b border-app-accent last:border-b-0 flex justify-between items-center;\n }\n \n .saved-transcript-item:hover {\n @apply bg-blue-50 cursor-pointer;\n }\n \n .saved-transcript-title {\n @apply truncate flex-1;\n }\n \n .saved-transcript-date {\n @apply text-xs text-gray-500 ml-2;\n }\n`;\n\n// Alpine data and methods\nconst getAlpineModule = () => `\n // Initialize Dexie database\n let dbInstance = null;\n\n async function initializeDB() {\n if (!dbInstance) {\n dbInstance = new Dexie('AudioTranscriptDB');\n dbInstance.version(3).stores({\n transcripts: '++id, title, audioUrl, fileName, timestamp',\n audioBlobs: '++id, transcriptId, blob, fileName, timestamp'\n });\n await dbInstance.open();\n }\n return dbInstance;\n }\n\n document.addEventListener('alpine:init', () => {\n Alpine.data('audioTranscriptApp', () => ({\n selectedAudio: null,\n audioUrl: null,\n // audioUrlInput: 'https://content.libsyn.com/p/c/5/9/c59f5483d00b8772/20VC-_Jonathan_Ross_Founder__CEO__Groq.mp3?c_id=184646440&cs_id=184646440&destination_id=240976&response-content-type=audio%2Fmpeg&Expires=1742344397&Signature=LmHx-~~Y-0jLAbHY3rDFJHyJvinNP0pTmflgOY2i8k~7r2fKR9U-rf4kVnvJT~ygbF8qnvOeQDPdaCWqAbdT2chAFnR9-WlpcBifsm23YJST8JkDgIuVdhBv6gkOVGv7~ow2E8Ckq7s1uMBMOfiRsa~vzpMlq3UL8fxUbxp5IcqodEFGCx0gKvvDQ8ZCzyDm1wFq3FiiIH-LUAD9WSxqdDH3mHl8c~dtCC~-K4fn4Xg3gcYlrss6-5wGWvWFFvLlahPPeRaYG9MuvWvE8A3hWtdVbCkcGbV74iS9P1MLnx47wpSmwmHcIxnv-KRLAQs5RBKotDY1Dk8VPLAtj7Rorg__&Key-Pair-Id=K1YS7LZGUP96OI', \n audioUrlInput: 'https://f2.phage.directory/capsid/XHwUB2AF/test_E81UXRJk_test.mp3',\n currentFileName: '',\n isProcessing: false,\n isFetchingAudio: false,\n errorMessage: '',\n transcriptData: null,\n words: [],\n paragraphs: [],\n activeWordIndex: -1,\n viewMode: 'words', // 'words' or 'paragraphs'\n autoScroll: true,\n db: null,\n savedTranscripts: [],\n \n async init() {\n // Initialize database\n this.db = await initializeDB();\n \n // Load saved transcripts\n await this.loadSavedTranscripts();\n \n this.$nextTick(() => {\n this.setupAudioPlayer();\n });\n },\n \n // Helper function to fetch and save audio from a URL\n async fetchAndSaveAudioFromUrl(url, fileName) {\n try {\n this.isFetchingAudio = true;\n console.log('Fetching audio from URL:', url);\n \n // Fetch the audio file\n const response = await fetch(url);\n \n if (!response.ok) {\n throw new Error('Failed to fetch audio: ' + response.status);\n }\n \n // Get content type for determining file extension\n const contentType = response.headers.get('content-type');\n let fileExt = 'mp3'; // Default extension\n \n // Try to determine file extension from content type\n if (contentType) {\n if (contentType.includes('mpeg')) fileExt = 'mp3';\n else if (contentType.includes('ogg')) fileExt = 'ogg';\n else if (contentType.includes('wav')) fileExt = 'wav';\n else if (contentType.includes('m4a')) fileExt = 'm4a';\n else if (contentType.includes('aac')) fileExt = 'aac';\n }\n \n // Get the blob from response\n const blob = await response.blob();\n \n // Create a File object with appropriate name\n const sanitizedFileName = fileName || 'audio-' + new Date().toISOString() + '.' + fileExt;\n const file = new File([blob], sanitizedFileName, { type: contentType || 'audio/mpeg' });\n \n console.log('Successfully fetched audio, size:', file.size, 'bytes');\n return file;\n } catch (error) {\n console.error('Error fetching audio:', error);\n return null;\n } finally {\n this.isFetchingAudio = false;\n }\n },\n \n async autoSaveTranscript() {\n if (!this.transcriptData) return false;\n \n try {\n // Generate a title automatically\n const generatedTitle = this.generateTitle();\n \n // Ensure we have serializable data\n const safeData = JSON.parse(JSON.stringify(this.transcriptData));\n \n // Save transcript data with filename\n const transcriptId = await this.db.transcripts.add({\n title: generatedTitle,\n audioUrl: this.audioUrl,\n fileName: this.currentFileName,\n transcriptData: safeData,\n timestamp: new Date()\n });\n \n // Save the audio data\n if (this.selectedAudio) {\n // If we already have the audio file (from local upload), save it\n try {\n await this.db.audioBlobs.add({\n transcriptId: transcriptId,\n blob: this.selectedAudio,\n fileName: this.selectedAudio.name,\n fileType: this.selectedAudio.type,\n timestamp: new Date()\n });\n console.log('Local audio file saved to database');\n } catch (blobError) {\n console.error('Error saving audio blob:', blobError);\n }\n } else if (this.audioUrl) {\n // If it's a URL, try to fetch and save the audio\n try {\n const audioFile = await this.fetchAndSaveAudioFromUrl(this.audioUrl, this.currentFileName);\n \n if (audioFile) {\n await this.db.audioBlobs.add({\n transcriptId: transcriptId,\n blob: audioFile,\n fileName: audioFile.name,\n fileType: audioFile.type,\n timestamp: new Date()\n });\n console.log('Remote audio file fetched and saved to database');\n } else {\n console.warn('Could not fetch audio from URL, only saving transcript data');\n }\n } catch (fetchError) {\n console.error('Error fetching and saving audio from URL:', fetchError);\n // We still continue since we've saved the transcript\n }\n }\n \n // Refresh the list of saved transcripts\n await this.loadSavedTranscripts();\n \n return transcriptId;\n } catch (error) {\n console.error('Error auto-saving transcript:', error);\n return false;\n }\n },\n \n async loadSavedTranscripts() {\n try {\n this.savedTranscripts = await this.db.transcripts\n .orderBy('timestamp')\n .reverse()\n .toArray();\n } catch (error) {\n console.error('Error loading saved transcripts:', error);\n this.savedTranscripts = [];\n }\n },\n \n async deleteTranscript(id, event) {\n if (event) {\n event.stopPropagation(); // Prevent clicking the parent element\n }\n \n try {\n // First, find if there are any related audio blobs\n const audioBlobs = await this.db.audioBlobs\n .where('transcriptId')\n .equals(id)\n .toArray();\n \n // Delete each audio blob separately first\n if (audioBlobs.length > 0) {\n // Delete all related audio blobs one by one\n for (const blob of audioBlobs) {\n await this.db.audioBlobs.delete(blob.id);\n }\n }\n \n // Then delete the transcript\n await this.db.transcripts.delete(id);\n \n // Reload the list after successful deletion\n await this.loadSavedTranscripts();\n return true;\n } catch (error) {\n console.error('Error deleting transcript:', error);\n return false;\n }\n },\n \n async loadTranscript(id) {\n try {\n const transcript = await this.db.transcripts.get(id);\n if (!transcript) return false;\n \n // Reset current audio if it's a blob URL\n if (this.audioUrl && this.audioUrl.startsWith('blob:')) {\n URL.revokeObjectURL(this.audioUrl);\n }\n \n // Load transcript data\n this.transcriptData = transcript.transcriptData;\n this.currentFileName = transcript.fileName || this.extractFileNameFromUrl(transcript.audioUrl);\n \n // Try to get the saved audio blob first\n const audioBlob = await this.db.audioBlobs\n .where('transcriptId')\n .equals(id)\n .first();\n \n if (audioBlob && audioBlob.blob) {\n // If we have the blob stored, create a URL for it\n this.selectedAudio = audioBlob.blob;\n this.audioUrl = URL.createObjectURL(audioBlob.blob);\n console.log('Loaded audio from stored blob');\n } else {\n // Otherwise use the saved URL\n this.audioUrl = transcript.audioUrl;\n this.selectedAudio = null;\n }\n \n this.processTranscript(transcript.transcriptData);\n \n // Update audio player\n const player = document.getElementById('audioPlayer');\n if (player) {\n player.src = this.audioUrl;\n player.load();\n }\n \n return true;\n } catch (error) {\n console.error('Error loading transcript:', error);\n return false;\n }\n },\n \n extractFileNameFromUrl(url) {\n if (!url) return '';\n \n try {\n // Remove query string if present\n const urlWithoutQuery = url.split('?')[0];\n // Get the last part of the path\n const parts = urlWithoutQuery.split('/');\n const fileName = parts[parts.length - 1];\n \n // Remove any URL encoding\n return decodeURIComponent(fileName);\n } catch (e) {\n console.error('Error extracting filename from URL:', e);\n return 'Unknown File';\n }\n },\n \n generateTitle() {\n // Generate a title based on date/time and first few words of transcript\n const date = new Date().toLocaleDateString();\n const time = new Date().toLocaleTimeString();\n let firstWords = '';\n \n if (this.words.length > 0) {\n // Take first 5 words or fewer if transcript is shorter\n const wordCount = Math.min(5, this.words.length);\n firstWords = this.words.slice(0, wordCount)\n .map(w => w.word)\n .join(' ');\n }\n \n return \\`\\${date} \\${time} - \\${firstWords}...\\`;\n },\n \n formatTimestamp(timestamp) {\n if (!timestamp) return '';\n const date = new Date(timestamp);\n return date.toLocaleString();\n },\n\n setupAudioPlayer() {\n this.player = document.getElementById('audioPlayer');\n if (this.player) {\n this.player.addEventListener('timeupdate', () => {\n this.updateActiveWord();\n });\n }\n },\n\n updateActiveWord() {\n if (!this.words.length || !this.player) return;\n \n const currentTime = this.player.currentTime;\n let newActiveIndex = -1;\n \n // Find which word corresponds to current playback time\n for (let i = 0; i < this.words.length; i++) {\n if (currentTime >= this.words[i].start && currentTime <= this.words[i].end) {\n newActiveIndex = i;\n break;\n }\n \n // If we're between words, highlight the previous word\n if (i < this.words.length - 1 && \n currentTime > this.words[i].end && \n currentTime < this.words[i + 1].start) {\n newActiveIndex = i;\n break;\n }\n }\n \n // If we're past all words but still playing, highlight the last word\n if (newActiveIndex === -1 && currentTime > 0 && currentTime > this.words[this.words.length - 1].end) {\n newActiveIndex = this.words.length - 1;\n }\n \n if (newActiveIndex !== this.activeWordIndex) {\n this.activeWordIndex = newActiveIndex;\n \n // Scroll the active word into view if it's not visible\n if (newActiveIndex >= 0) {\n if (this.viewMode === 'words') {\n const wordElement = document.getElementById(\\`word-\\${newActiveIndex}\\`);\n if (wordElement) {\n this.scrollElementIntoView(wordElement);\n }\n } else {\n // For paragraph view, find the paragraph containing this word\n const paragraphIndex = this.findParagraphIndexForWord(newActiveIndex);\n if (paragraphIndex >= 0) {\n const paragraphElement = document.getElementById(\\`paragraph-\\${paragraphIndex}\\`);\n if (paragraphElement) {\n this.scrollElementIntoView(paragraphElement);\n }\n }\n }\n }\n }\n },\n \n scrollElementIntoView(element) {\n const container = document.querySelector('.transcript-container');\n if (!container || !this.autoScroll) return;\n \n const containerRect = container.getBoundingClientRect();\n const elementRect = element.getBoundingClientRect();\n \n if (elementRect.bottom > containerRect.bottom || elementRect.top < containerRect.top) {\n element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n },\n \n findParagraphIndexForWord(wordIndex) {\n for (let i = 0; i < this.paragraphs.length; i++) {\n if (this.paragraphs[i].startWordIndex <= wordIndex && \n (i === this.paragraphs.length - 1 || this.paragraphs[i+1].startWordIndex > wordIndex)) {\n return i;\n }\n }\n return -1;\n },\n\n jumpToWord(index) {\n if (!this.player || index < 0 || index >= this.words.length) return;\n \n this.player.currentTime = this.words[index].start;\n this.activeWordIndex = index;\n \n // Start playing from this position\n this.player.play();\n },\n \n jumpToParagraph(paragraphIndex) {\n if (!this.player || paragraphIndex < 0 || paragraphIndex >= this.paragraphs.length) return;\n \n this.player.currentTime = this.paragraphs[paragraphIndex].startTime;\n // Find the first word in this paragraph\n this.activeWordIndex = this.paragraphs[paragraphIndex].startWordIndex;\n \n // Start playing from this position\n this.player.play();\n },\n\n handleAudioSelect(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n this.selectedAudio = file;\n this.currentFileName = file.name;\n this.transcriptData = null;\n this.words = [];\n this.paragraphs = [];\n this.errorMessage = '';\n \n // Create audio URL for playback\n if (this.audioUrl) {\n URL.revokeObjectURL(this.audioUrl);\n }\n this.audioUrl = URL.createObjectURL(file);\n \n // Reset player and update src\n const player = document.getElementById('audioPlayer');\n if (player) {\n player.src = this.audioUrl;\n player.load();\n }\n \n // Clear URL input if there is one to avoid confusion\n this.audioUrlInput = '';\n },\n \n // This method is now called as part of transcribeAudio\n async prepareAudioFromUrl() {\n if (!this.audioUrlInput) {\n return false;\n }\n \n this.selectedAudio = null;\n this.errorMessage = '';\n \n // Extract filename from URL for display\n this.currentFileName = this.extractFileNameFromUrl(this.audioUrlInput);\n \n // Update audio player with the URL\n if (this.audioUrl && this.audioUrl.startsWith('blob:')) {\n URL.revokeObjectURL(this.audioUrl);\n }\n this.audioUrl = this.audioUrlInput;\n \n try {\n // Try to pre-fetch and cache the audio file\n const statusEl = document.getElementById('fetchStatus');\n if (statusEl) statusEl.textContent = 'Fetching audio...';\n \n const audioFile = await this.fetchAndSaveAudioFromUrl(this.audioUrl, this.currentFileName);\n \n if (audioFile) {\n // If fetch was successful, use the local blob instead\n this.selectedAudio = audioFile;\n if (this.audioUrl && this.audioUrl.startsWith('blob:')) {\n URL.revokeObjectURL(this.audioUrl);\n }\n this.audioUrl = URL.createObjectURL(audioFile);\n this.currentFileName = audioFile.name;\n \n if (statusEl) statusEl.textContent = 'Audio fetched and cached locally';\n setTimeout(() => {\n if (statusEl) statusEl.textContent = '';\n }, 3000);\n } else {\n if (statusEl) statusEl.textContent = 'Using direct URL (audio could not be cached)';\n setTimeout(() => {\n if (statusEl) statusEl.textContent = '';\n }, 3000);\n }\n } catch (e) {\n console.warn('Could not pre-fetch audio:', e);\n // Continue with direct URL\n }\n \n // Reset player and update src\n const player = document.getElementById('audioPlayer');\n if (player) {\n player.src = this.audioUrl;\n player.load();\n }\n \n return true;\n },\n \n async transcribeAudio() {\n // First, check if we have a file or URL\n if (!this.selectedAudio && !this.audioUrlInput) {\n this.errorMessage = 'Please select an audio file or enter an audio URL';\n return;\n }\n \n // If we have a URL but no selected audio, prepare the audio from URL first\n if (!this.selectedAudio && this.audioUrlInput) {\n this.isFetchingAudio = true;\n const success = await this.prepareAudioFromUrl();\n this.isFetchingAudio = false;\n \n if (!success) {\n this.errorMessage = 'Failed to load audio from URL';\n return;\n }\n }\n \n // Now proceed with transcription\n this.isProcessing = true;\n this.errorMessage = '';\n this.transcriptData = null;\n this.words = [];\n this.paragraphs = [];\n \n try {\n const formData = new FormData();\n if (this.selectedAudio) {\n formData.append('audio', this.selectedAudio);\n } else {\n formData.append('audioUrl', this.audioUrl);\n }\n \n const response = await fetch('/transcribe-audio', {\n method: 'POST',\n body: formData\n });\n \n const result = await response.json();\n \n if (result.error) {\n this.errorMessage = result.error;\n } else {\n this.transcriptData = result;\n this.processTranscript(result);\n \n // Auto-save the transcript to database\n await this.autoSaveTranscript();\n }\n } catch (error) {\n this.errorMessage = 'Error: ' + error.message;\n } finally {\n this.isProcessing = false;\n }\n },\n \n processTranscript(data) {\n if (!data || !data.words) return;\n \n // Process words\n this.words = data.words.map((word, index) => ({\n ...word,\n index: index\n }));\n \n // Create paragraphs based on pauses or segments\n this.createParagraphs();\n },\n \n createParagraphs() {\n if (!this.words.length) return;\n \n const paragraphs = [];\n let currentParagraph = {\n startWordIndex: 0,\n startTime: this.words[0].start,\n words: [],\n text: ''\n };\n \n // Parameters to define paragraph breaks\n const MIN_PAUSE_BETWEEN_PARAGRAPHS = 1.0; // seconds\n \n for (let i = 0; i < this.words.length; i++) {\n const word = this.words[i];\n \n // Check if we should start a new paragraph\n if (i > 0) {\n const previousWord = this.words[i-1];\n const timeBetweenWords = word.start - previousWord.end;\n \n // Start a new paragraph if there's a significant pause\n if (timeBetweenWords > MIN_PAUSE_BETWEEN_PARAGRAPHS) {\n // Finish current paragraph\n paragraphs.push(currentParagraph);\n \n // Start a new paragraph\n currentParagraph = {\n startWordIndex: i,\n startTime: word.start,\n words: [],\n text: ''\n };\n }\n }\n \n // Add word to current paragraph\n currentParagraph.words.push(word);\n currentParagraph.text += (currentParagraph.text.length > 0 ? ' ' : '') + word.word;\n }\n \n // Add the final paragraph\n if (currentParagraph.words.length > 0) {\n paragraphs.push(currentParagraph);\n }\n \n this.paragraphs = paragraphs;\n },\n \n isWordActive(wordIndex) {\n return wordIndex === this.activeWordIndex;\n },\n \n isParagraphActive(paragraphIndex) {\n if (paragraphIndex < 0 || paragraphIndex >= this.paragraphs.length) return false;\n \n const paragraph = this.paragraphs[paragraphIndex];\n const nextParagraphStartIndex = paragraphIndex < this.paragraphs.length - 1 \n ? this.paragraphs[paragraphIndex + 1].startWordIndex \n : this.words.length;\n \n // Check if active word is within this paragraph's range\n return this.activeWordIndex >= paragraph.startWordIndex && \n this.activeWordIndex < nextParagraphStartIndex;\n },\n \n formatTime(seconds) {\n if (isNaN(seconds)) return '00:00';\n \n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return \\`\\${mins.toString().padStart(2, '0')}:\\${secs.toString().padStart(2, '0')}\\`;\n },\n\n togglePlayPause() {\n const player = document.getElementById('audioPlayer');\n if (!player) return;\n \n if (player.paused) {\n player.play();\n } else {\n player.pause();\n }\n },\n\n isPlaying() {\n const player = document.getElementById('audioPlayer');\n return player && !player.paused;\n },\n \n switchView(mode) {\n this.viewMode = mode;\n },\n \n // Get plain text transcript without timestamps\n getPlainTranscript() {\n if (!this.words.length) return '';\n \n return this.words.map(word => word.word).join(' ');\n },\n \n // Get transcript with word-level timestamps\n getTimestampedTranscript() {\n if (!this.words.length) return '';\n \n let result = '';\n \n // Group words by paragraphs for better readability\n this.paragraphs.forEach((paragraph, index) => {\n result += \\`[Paragraph \\${index + 1} - \\${this.formatTime(paragraph.startTime)}]\\\\n\\`;\n \n paragraph.words.forEach(word => {\n result += \\`[\\${this.formatTime(word.start)}] \\${word.word} \\`;\n });\n \n result += \\`\\\\n\\\\n\\`;\n });\n \n return result;\n },\n \n // Copy text to clipboard\n async copyToClipboard(text, buttonEl) {\n try {\n await navigator.clipboard.writeText(text);\n \n // Change button text temporarily to give feedback\n const originalText = buttonEl.innerText;\n buttonEl.innerText = 'Copied!';\n \n setTimeout(() => {\n buttonEl.innerText = originalText;\n }, 2000);\n } catch (err) {\n console.error('Failed to copy text: ', err);\n \n // Show error feedback\n const originalText = buttonEl.innerText;\n buttonEl.innerText = 'Error!';\n \n setTimeout(() => {\n buttonEl.innerText = originalText;\n }, 2000);\n }\n },\n \n scrollToActive() {\n if (this.activeWordIndex >= 0) {\n if (this.viewMode === 'words') {\n const wordElement = document.getElementById('word-' + this.activeWordIndex);\n if (wordElement) {\n wordElement.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n } else {\n const paragraphIndex = this.findParagraphIndexForWord(this.activeWordIndex);\n if (paragraphIndex >= 0) {\n const paragraphElement = document.getElementById('paragraph-' + paragraphIndex);\n if (paragraphElement) {\n paragraphElement.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }\n }\n }\n }\n }));\n });\n`;\n\nconst getHtml = (moduleScript) => `\n\n\n\n \n \n Audio Transcription with Word Timestamps\n \n \n \n \n \n \n \n \n \n \n\n\n

Groq Audio Transcription

Upload an audio file to get a transcription with word-level timestamps

\n\n

\n \n

\n \n \n Click to browse or drop audio file here\n \n

\n \n \n

\n \n

\n \n \n

\n File: \n \n (Cached locally)\n

\n \n \n

\n \n

\n Either upload a file or enter a URL, then click to transcribe\n

\n \n \n

Transcript

Click on any word or paragraph timestamp to jump to that point in the audio.

\n \n

\n \n \n

\n\n \n

\n \n \n

\n\n \n

\n \n

\n\n \n

\n \n

\n \n Auto-scroll to active word\n

\n \n

Show Raw Transcript Data

\n                  \n

\n \n \n

Saved Transcripts

\n \n

\n No saved transcripts yet. \n Upload an audio file and transcribe it to get started.\n

\n \n

0\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3\">\n \n

\n Uses Groq Whisper API for fast and accurate speech-to-text transcription with word-level timestamps. Documentation here.\n

\n \n $\"Powered$ \n \n

\n\n \n\n\n\n`;\n\napp.get(\"/\", (c) => c.html(getHtml()));\napp.post(\"/transcribe-audio\", audioTranscriptionHandler);\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;\n\n\n\n\n\n\n","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\n\nconst app = new Hono();\n\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\n\n// Function to handle audio transcription using Groq's Whisper API\nexport const audioTranscriptionHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const audioFile = formData.get(\"audio\");\n const audioUrl = formData.get(\"audioUrl\");\n \n if (!audioFile && !audioUrl) {\n return c.json({ error: \"No audio file or URL provided\" }, 400);\n }\n\n // Get API key from environment variable\n const apiKey = Deno.env.get(\"GROQ_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"API key not configured\" }, 500);\n }\n\n // Prepare the form data for Groq API\n const groqFormData = new FormData();\n \n if (audioFile) {\n groqFormData.append(\"file\", audioFile);\n } else {\n groqFormData.append(\"url\", audioUrl);\n }\n \n groqFormData.append(\"model\", \"whisper-large-v3\");\n groqFormData.append(\"response_format\", \"verbose_json\");\n groqFormData.append(\"timestamp_granularities[]\", \"word\");\n\n // Call Groq API\n const response = await fetch(\"https://api.groq.com/openai/v1/audio/transcriptions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`\n },\n body: groqFormData\n });\n\n // Get response content type\n const contentType = response.headers.get(\"content-type\");\n \n if (!response.ok) {\n let errorMessage = \"\";\n \n try {\n if (contentType && contentType.includes(\"application/json\")) {\n const errorData = await response.json();\n errorMessage = errorData.error?.message || JSON.stringify(errorData);\n } else {\n // Handle HTML or text responses\n const textContent = await response.text();\n if (textContent.includes(\"413\") || textContent.includes(\"too large\")) {\n errorMessage = \"File size too large. Please upload a smaller audio file.\";\n } else if (textContent.includes(\"415\")) {\n errorMessage = \"Unsupported media type. Please upload a valid audio file.\";\n } else {\n errorMessage = `Server error: ${response.status} ${response.statusText}`;\n // Log the full response for debugging\n console.error(\"Groq API error response:\", {\n status: response.status,\n statusText: response.statusText,\n contentType,\n body: textContent\n });\n }\n }\n } catch (parseError) {\n console.error(\"Error parsing Groq API response:\", parseError);\n errorMessage = \"Failed to parse error response from server\";\n }\n\n return c.json({ \n error: `Groq API error: ${errorMessage}`,\n status: response.status\n }, response.status);\n }\n\n // Handle successful response\n try {\n const result = await response.json();\n return c.json(result);\n } catch (parseError) {\n console.error(\"Error parsing successful response:\", parseError);\n return c.json({\n error: \"Failed to parse transcription response\",\n details: parseError.message\n }, 500);\n }\n } catch (error) {\n console.error(\"Transcription error:\", error);\n return c.json({\n error: error.message || \"Error processing audio\",\n details: error.stack\n }, 500);\n }\n};\n\nexport const getTailwindConfig = () => ({\n theme: {\n extend: {\n colors: {\n 'background': '#F5F4F4',\n 'page-bg': '#F5F4F4',\n 'app-bg': '#FDFBF7',\n 'app-bg-alt': '#FFFFFF',\n 'app-accent': '#E2DFDF',\n 'primary': '#0E141B',\n 'accent': '#FDFAF4',\n 'secondary': '#D9D5D4',\n 'text': '#100C04',\n 'button': '#39516A',\n 'button-hover': '#0063CC',\n }\n }\n }\n});\n\nexport const getStyles = () => `\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n html {\n @apply bg-background;\n }\n .AppBody {\n @apply bg-page-bg text-text py-4;\n }\n .AppContainer {\n @apply container mx-auto;\n }\n .App {\n @apply max-w-4xl mx-2 md:mx-auto p-4 bg-app-bg border border-app-accent rounded-md shadow-sm;\n }\n .AppFooter {\n @apply mt-4 text-center text-sm;\n }\n .AppFooter a {\n @apply text-primary hover:text-button-hover underline;\n }\n h1 {\n @apply text-3xl font-semibold mb-4 text-primary;\n }\n textarea {\n @apply w-full mb-2 py-2 px-4 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n summary {\n @apply cursor-pointer hover:text-button-hover;\n }\n button {\n @apply bg-button text-white px-4 py-2 rounded hover:bg-button-hover transition-colors;\n }\n button.accordion {\n @apply bg-app-bg text-primary px-0 py-2 rounded-md transition-colors hover:text-button-hover;\n }\n .JsonOutput {\n @apply mt-4 relative;\n }\n .JsonOutput pre {\n @apply p-4 bg-app-bg-alt border border-app-accent rounded-md text-sm overflow-x-auto whitespace-pre-wrap;\n }\n .JsonOutput button {\n @apply absolute top-2 right-2 text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .TextOutput {\n @apply mt-4;\n }\n .TextOutput-content {\n @apply p-4 bg-app-bg-alt border border-primary rounded-md;\n }\n .TextOutput-header {\n @apply mb-2 text-xs text-gray-600 flex justify-between items-center;\n }\n .TextOutput button {\n @apply text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .transcript-word {\n @apply inline-block px-1 py-0.5 rounded cursor-pointer transition-colors hover:bg-secondary hover:text-white;\n }\n .transcript-word.active {\n @apply bg-blue-500 text-white;\n }\n \n\n .transcript-container-paragraphs {\n .transcript-word:first-child, .transcript-word:first-of-type {\n @apply pl-16 text-blue-500;\n }\n .transcript-word {\n @apply pl-0;\n }\n }\n .audio-controls {\n @apply flex items-center justify-between mb-4 p-2 bg-app-bg-alt rounded-md border border-app-accent;\n }\n .transcript-container {\n @apply mt-4 p-4 bg-app-bg-alt border border-app-accent rounded-md leading-relaxed;\n height: 300px;\n overflow-y: auto;\n }\n .transcript-paragraph {\n @apply mb-4 relative;\n }\n .transcript-timestamp {\n @apply left-0 top-0 bg-secondary text-xs px-2 py-1 rounded-md text-white font-mono;\n min-width: 60px;\n }\n .transcript-view-toggle {\n @apply flex;\n }\n .transcript-view-toggle button {\n @apply px-3 py-1 text-sm;\n }\n .transcript-view-toggle button.active {\n @apply bg-primary;\n }\n .copy-buttons {\n @apply flex justify-end space-x-2;\n }\n .copy-button {\n @apply text-sm px-3 py-1 flex items-center;\n }\n .copy-button svg {\n @apply w-4 h-4 mr-1;\n }\n .scroll-controls {\n @apply mt-2 flex justify-between items-center px-2;\n }\n .scroll-controls button {\n @apply text-sm;\n }\n .auto-scroll-toggle {\n @apply flex items-center space-x-2;\n }\n .auto-scroll-toggle input[type=\"checkbox\"] {\n @apply h-4 w-4 text-button border-secondary rounded focus:ring-button;\n }\n \n /* Saved transcripts styles */\n .saved-transcript-item {\n @apply p-2 border-b border-app-accent last:border-b-0 flex justify-between items-center;\n }\n \n .saved-transcript-item:hover {\n @apply bg-blue-50 cursor-pointer;\n }\n \n .saved-transcript-title {\n @apply truncate flex-1;\n }\n \n .saved-transcript-date {\n @apply text-xs text-gray-500 ml-2;\n }\n`;\n\n// Alpine data and methods\nconst getAlpineModule = () => `\n // Initialize Dexie database\n let dbInstance = null;\n\n async function initializeDB() {\n if (!dbInstance) {\n dbInstance = new Dexie('AudioTranscriptDB');\n dbInstance.version(3).stores({\n transcripts: '++id, title, audioUrl, fileName, timestamp',\n audioBlobs: '++id, transcriptId, blob, fileName, timestamp'\n });\n await dbInstance.open();\n }\n return dbInstance;\n }\n\n document.addEventListener('alpine:init', () => {\n Alpine.data('audioTranscriptApp', () => ({\n selectedAudio: null,\n audioUrl: null,\n // audioUrlInput: 'https://content.libsyn.com/p/c/5/9/c59f5483d00b8772/20VC-_Jonathan_Ross_Founder__CEO__Groq.mp3?c_id=184646440&cs_id=184646440&destination_id=240976&response-content-type=audio%2Fmpeg&Expires=1742344397&Signature=LmHx-~~Y-0jLAbHY3rDFJHyJvinNP0pTmflgOY2i8k~7r2fKR9U-rf4kVnvJT~ygbF8qnvOeQDPdaCWqAbdT2chAFnR9-WlpcBifsm23YJST8JkDgIuVdhBv6gkOVGv7~ow2E8Ckq7s1uMBMOfiRsa~vzpMlq3UL8fxUbxp5IcqodEFGCx0gKvvDQ8ZCzyDm1wFq3FiiIH-LUAD9WSxqdDH3mHl8c~dtCC~-K4fn4Xg3gcYlrss6-5wGWvWFFvLlahPPeRaYG9MuvWvE8A3hWtdVbCkcGbV74iS9P1MLnx47wpSmwmHcIxnv-KRLAQs5RBKotDY1Dk8VPLAtj7Rorg__&Key-Pair-Id=K1YS7LZGUP96OI', \n audioUrlInput: 'https://f2.phage.directory/capsid/XHwUB2AF/test_E81UXRJk_test.mp3',\n currentFileName: '',\n isProcessing: false,\n isFetchingAudio: false,\n errorMessage: '',\n transcriptData: null,\n words: [],\n paragraphs: [],\n activeWordIndex: -1,\n viewMode: 'words', // 'words' or 'paragraphs'\n autoScroll: true,\n db: null,\n savedTranscripts: [],\n \n async init() {\n // Initialize database\n this.db = await initializeDB();\n \n // Load saved transcripts\n await this.loadSavedTranscripts();\n \n this.$nextTick(() => {\n this.setupAudioPlayer();\n });\n },\n \n // Helper function to fetch and save audio from a URL\n async fetchAndSaveAudioFromUrl(url, fileName) {\n try {\n this.isFetchingAudio = true;\n console.log('Fetching audio from URL:', url);\n \n // Fetch the audio file\n const response = await fetch(url);\n \n if (!response.ok) {\n throw new Error('Failed to fetch audio: ' + response.status);\n }\n \n // Get content type for determining file extension\n const contentType = response.headers.get('content-type');\n let fileExt = 'mp3'; // Default extension\n \n // Try to determine file extension from content type\n if (contentType) {\n if (contentType.includes('mpeg')) fileExt = 'mp3';\n else if (contentType.includes('ogg')) fileExt = 'ogg';\n else if (contentType.includes('wav')) fileExt = 'wav';\n else if (contentType.includes('m4a')) fileExt = 'm4a';\n else if (contentType.includes('aac')) fileExt = 'aac';\n }\n \n // Get the blob from response\n const blob = await response.blob();\n \n // Create a File object with appropriate name\n const sanitizedFileName = fileName || 'audio-' + new Date().toISOString() + '.' + fileExt;\n const file = new File([blob], sanitizedFileName, { type: contentType || 'audio/mpeg' });\n \n console.log('Successfully fetched audio, size:', file.size, 'bytes');\n return file;\n } catch (error) {\n console.error('Error fetching audio:', error);\n return null;\n } finally {\n this.isFetchingAudio = false;\n }\n },\n \n async autoSaveTranscript() {\n if (!this.transcriptData) return false;\n \n try {\n // Generate a title automatically\n const generatedTitle = this.generateTitle();\n \n // Ensure we have serializable data\n const safeData = JSON.parse(JSON.stringify(this.transcriptData));\n \n // Save transcript data with filename\n const transcriptId = await this.db.transcripts.add({\n title: generatedTitle,\n audioUrl: this.audioUrl,\n fileName: this.currentFileName,\n transcriptData: safeData,\n timestamp: new Date()\n });\n \n // Save the audio data\n if (this.selectedAudio) {\n // If we already have the audio file (from local upload), save it\n try {\n await this.db.audioBlobs.add({\n transcriptId: transcriptId,\n blob: this.selectedAudio,\n fileName: this.selectedAudio.name,\n fileType: this.selectedAudio.type,\n timestamp: new Date()\n });\n console.log('Local audio file saved to database');\n } catch (blobError) {\n console.error('Error saving audio blob:', blobError);\n }\n } else if (this.audioUrl) {\n // If it's a URL, try to fetch and save the audio\n try {\n const audioFile = await this.fetchAndSaveAudioFromUrl(this.audioUrl, this.currentFileName);\n \n if (audioFile) {\n await this.db.audioBlobs.add({\n transcriptId: transcriptId,\n blob: audioFile,\n fileName: audioFile.name,\n fileType: audioFile.type,\n timestamp: new Date()\n });\n console.log('Remote audio file fetched and saved to database');\n } else {\n console.warn('Could not fetch audio from URL, only saving transcript data');\n }\n } catch (fetchError) {\n console.error('Error fetching and saving audio from URL:', fetchError);\n // We still continue since we've saved the transcript\n }\n }\n \n // Refresh the list of saved transcripts\n await this.loadSavedTranscripts();\n \n return transcriptId;\n } catch (error) {\n console.error('Error auto-saving transcript:', error);\n return false;\n }\n },\n \n async loadSavedTranscripts() {\n try {\n this.savedTranscripts = await this.db.transcripts\n .orderBy('timestamp')\n .reverse()\n .toArray();\n } catch (error) {\n console.error('Error loading saved transcripts:', error);\n this.savedTranscripts = [];\n }\n },\n \n async deleteTranscript(id, event) {\n if (event) {\n event.stopPropagation(); // Prevent clicking the parent element\n }\n \n try {\n // First, find if there are any related audio blobs\n const audioBlobs = await this.db.audioBlobs\n .where('transcriptId')\n .equals(id)\n .toArray();\n \n // Delete each audio blob separately first\n if (audioBlobs.length > 0) {\n // Delete all related audio blobs one by one\n for (const blob of audioBlobs) {\n await this.db.audioBlobs.delete(blob.id);\n }\n }\n \n // Then delete the transcript\n await this.db.transcripts.delete(id);\n \n // Reload the list after successful deletion\n await this.loadSavedTranscripts();\n return true;\n } catch (error) {\n console.error('Error deleting transcript:', error);\n return false;\n }\n },\n \n async loadTranscript(id) {\n try {\n const transcript = await this.db.transcripts.get(id);\n if (!transcript) return false;\n \n // Reset current audio if it's a blob URL\n if (this.audioUrl && this.audioUrl.startsWith('blob:')) {\n URL.revokeObjectURL(this.audioUrl);\n }\n \n // Load transcript data\n this.transcriptData = transcript.transcriptData;\n this.currentFileName = transcript.fileName || this.extractFileNameFromUrl(transcript.audioUrl);\n \n // Try to get the saved audio blob first\n const audioBlob = await this.db.audioBlobs\n .where('transcriptId')\n .equals(id)\n .first();\n \n if (audioBlob && audioBlob.blob) {\n // If we have the blob stored, create a URL for it\n this.selectedAudio = audioBlob.blob;\n this.audioUrl = URL.createObjectURL(audioBlob.blob);\n console.log('Loaded audio from stored blob');\n } else {\n // Otherwise use the saved URL\n this.audioUrl = transcript.audioUrl;\n this.selectedAudio = null;\n }\n \n this.processTranscript(transcript.transcriptData);\n \n // Update audio player\n const player = document.getElementById('audioPlayer');\n if (player) {\n player.src = this.audioUrl;\n player.load();\n }\n \n return true;\n } catch (error) {\n console.error('Error loading transcript:', error);\n return false;\n }\n },\n \n extractFileNameFromUrl(url) {\n if (!url) return '';\n \n try {\n // Remove query string if present\n const urlWithoutQuery = url.split('?')[0];\n // Get the last part of the path\n const parts = urlWithoutQuery.split('/');\n const fileName = parts[parts.length - 1];\n \n // Remove any URL encoding\n return decodeURIComponent(fileName);\n } catch (e) {\n console.error('Error extracting filename from URL:', e);\n return 'Unknown File';\n }\n },\n \n generateTitle() {\n // Generate a title based on date/time and first few words of transcript\n const date = new Date().toLocaleDateString();\n const time = new Date().toLocaleTimeString();\n let firstWords = '';\n \n if (this.words.length > 0) {\n // Take first 5 words or fewer if transcript is shorter\n const wordCount = Math.min(5, this.words.length);\n firstWords = this.words.slice(0, wordCount)\n .map(w => w.word)\n .join(' ');\n }\n \n return \\`\\${date} \\${time} - \\${firstWords}...\\`;\n },\n \n formatTimestamp(timestamp) {\n if (!timestamp) return '';\n const date = new Date(timestamp);\n return date.toLocaleString();\n },\n\n setupAudioPlayer() {\n this.player = document.getElementById('audioPlayer');\n if (this.player) {\n this.player.addEventListener('timeupdate', () => {\n this.updateActiveWord();\n });\n }\n },\n\n updateActiveWord() {\n if (!this.words.length || !this.player) return;\n \n const currentTime = this.player.currentTime;\n let newActiveIndex = -1;\n \n // Find which word corresponds to current playback time\n for (let i = 0; i < this.words.length; i++) {\n if (currentTime >= this.words[i].start && currentTime <= this.words[i].end) {\n newActiveIndex = i;\n break;\n }\n \n // If we're between words, highlight the previous word\n if (i < this.words.length - 1 && \n currentTime > this.words[i].end && \n currentTime < this.words[i + 1].start) {\n newActiveIndex = i;\n break;\n }\n }\n \n // If we're past all words but still playing, highlight the last word\n if (newActiveIndex === -1 && currentTime > 0 && currentTime > this.words[this.words.length - 1].end) {\n newActiveIndex = this.words.length - 1;\n }\n \n if (newActiveIndex !== this.activeWordIndex) {\n this.activeWordIndex = newActiveIndex;\n \n // Scroll the active word into view if it's not visible\n if (newActiveIndex >= 0) {\n if (this.viewMode === 'words') {\n const wordElement = document.getElementById(\\`word-\\${newActiveIndex}\\`);\n if (wordElement) {\n this.scrollElementIntoView(wordElement);\n }\n } else {\n // For paragraph view, find the paragraph containing this word\n const paragraphIndex = this.findParagraphIndexForWord(newActiveIndex);\n if (paragraphIndex >= 0) {\n const paragraphElement = document.getElementById(\\`paragraph-\\${paragraphIndex}\\`);\n if (paragraphElement) {\n this.scrollElementIntoView(paragraphElement);\n }\n }\n }\n }\n }\n },\n \n scrollElementIntoView(element) {\n const container = document.querySelector('.transcript-container');\n if (!container || !this.autoScroll) return;\n \n const containerRect = container.getBoundingClientRect();\n const elementRect = element.getBoundingClientRect();\n \n if (elementRect.bottom > containerRect.bottom || elementRect.top < containerRect.top) {\n element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n },\n \n findParagraphIndexForWord(wordIndex) {\n for (let i = 0; i < this.paragraphs.length; i++) {\n if (this.paragraphs[i].startWordIndex <= wordIndex && \n (i === this.paragraphs.length - 1 || this.paragraphs[i+1].startWordIndex > wordIndex)) {\n return i;\n }\n }\n return -1;\n },\n\n jumpToWord(index) {\n if (!this.player || index < 0 || index >= this.words.length) return;\n \n this.player.currentTime = this.words[index].start;\n this.activeWordIndex = index;\n \n // Start playing from this position\n this.player.play();\n },\n \n jumpToParagraph(paragraphIndex) {\n if (!this.player || paragraphIndex < 0 || paragraphIndex >= this.paragraphs.length) return;\n \n this.player.currentTime = this.paragraphs[paragraphIndex].startTime;\n // Find the first word in this paragraph\n this.activeWordIndex = this.paragraphs[paragraphIndex].startWordIndex;\n \n // Start playing from this position\n this.player.play();\n },\n\n handleAudioSelect(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n this.selectedAudio = file;\n this.currentFileName = file.name;\n this.transcriptData = null;\n this.words = [];\n this.paragraphs = [];\n this.errorMessage = '';\n \n // Create audio URL for playback\n if (this.audioUrl) {\n URL.revokeObjectURL(this.audioUrl);\n }\n this.audioUrl = URL.createObjectURL(file);\n \n // Reset player and update src\n const player = document.getElementById('audioPlayer');\n if (player) {\n player.src = this.audioUrl;\n player.load();\n }\n \n // Clear URL input if there is one to avoid confusion\n this.audioUrlInput = '';\n },\n \n // This method is now called as part of transcribeAudio\n async prepareAudioFromUrl() {\n if (!this.audioUrlInput) {\n return false;\n }\n \n this.selectedAudio = null;\n this.errorMessage = '';\n \n // Extract filename from URL for display\n this.currentFileName = this.extractFileNameFromUrl(this.audioUrlInput);\n \n // Update audio player with the URL\n if (this.audioUrl && this.audioUrl.startsWith('blob:')) {\n URL.revokeObjectURL(this.audioUrl);\n }\n this.audioUrl = this.audioUrlInput;\n \n try {\n // Try to pre-fetch and cache the audio file\n const statusEl = document.getElementById('fetchStatus');\n if (statusEl) statusEl.textContent = 'Fetching audio...';\n \n const audioFile = await this.fetchAndSaveAudioFromUrl(this.audioUrl, this.currentFileName);\n \n if (audioFile) {\n // If fetch was successful, use the local blob instead\n this.selectedAudio = audioFile;\n if (this.audioUrl && this.audioUrl.startsWith('blob:')) {\n URL.revokeObjectURL(this.audioUrl);\n }\n this.audioUrl = URL.createObjectURL(audioFile);\n this.currentFileName = audioFile.name;\n \n if (statusEl) statusEl.textContent = 'Audio fetched and cached locally';\n setTimeout(() => {\n if (statusEl) statusEl.textContent = '';\n }, 3000);\n } else {\n if (statusEl) statusEl.textContent = 'Using direct URL (audio could not be cached)';\n setTimeout(() => {\n if (statusEl) statusEl.textContent = '';\n }, 3000);\n }\n } catch (e) {\n console.warn('Could not pre-fetch audio:', e);\n // Continue with direct URL\n }\n \n // Reset player and update src\n const player = document.getElementById('audioPlayer');\n if (player) {\n player.src = this.audioUrl;\n player.load();\n }\n \n return true;\n },\n \n async transcribeAudio() {\n // First, check if we have a file or URL\n if (!this.selectedAudio && !this.audioUrlInput) {\n this.errorMessage = 'Please select an audio file or enter an audio URL';\n return;\n }\n \n // If we have a URL but no selected audio, prepare the audio from URL first\n if (!this.selectedAudio && this.audioUrlInput) {\n this.isFetchingAudio = true;\n const success = await this.prepareAudioFromUrl();\n this.isFetchingAudio = false;\n \n if (!success) {\n this.errorMessage = 'Failed to load audio from URL';\n return;\n }\n }\n \n // Now proceed with transcription\n this.isProcessing = true;\n this.errorMessage = '';\n this.transcriptData = null;\n this.words = [];\n this.paragraphs = [];\n \n try {\n const formData = new FormData();\n if (this.selectedAudio) {\n formData.append('audio', this.selectedAudio);\n } else {\n formData.append('audioUrl', this.audioUrl);\n }\n \n const response = await fetch('/transcribe-audio', {\n method: 'POST',\n body: formData\n });\n \n const result = await response.json();\n \n if (result.error) {\n this.errorMessage = result.error;\n } else {\n this.transcriptData = result;\n this.processTranscript(result);\n \n // Auto-save the transcript to database\n await this.autoSaveTranscript();\n }\n } catch (error) {\n this.errorMessage = 'Error: ' + error.message;\n } finally {\n this.isProcessing = false;\n }\n },\n \n processTranscript(data) {\n if (!data || !data.words) return;\n \n // Process words\n this.words = data.words.map((word, index) => ({\n ...word,\n index: index\n }));\n \n // Create paragraphs based on pauses or segments\n this.createParagraphs();\n },\n \n createParagraphs() {\n if (!this.words.length) return;\n \n const paragraphs = [];\n let currentParagraph = {\n startWordIndex: 0,\n startTime: this.words[0].start,\n words: [],\n text: ''\n };\n \n // Parameters to define paragraph breaks\n const MIN_PAUSE_BETWEEN_PARAGRAPHS = 1.0; // seconds\n \n for (let i = 0; i < this.words.length; i++) {\n const word = this.words[i];\n \n // Check if we should start a new paragraph\n if (i > 0) {\n const previousWord = this.words[i-1];\n const timeBetweenWords = word.start - previousWord.end;\n \n // Start a new paragraph if there's a significant pause\n if (timeBetweenWords > MIN_PAUSE_BETWEEN_PARAGRAPHS) {\n // Finish current paragraph\n paragraphs.push(currentParagraph);\n \n // Start a new paragraph\n currentParagraph = {\n startWordIndex: i,\n startTime: word.start,\n words: [],\n text: ''\n };\n }\n }\n \n // Add word to current paragraph\n currentParagraph.words.push(word);\n currentParagraph.text += (currentParagraph.text.length > 0 ? ' ' : '') + word.word;\n }\n \n // Add the final paragraph\n if (currentParagraph.words.length > 0) {\n paragraphs.push(currentParagraph);\n }\n \n this.paragraphs = paragraphs;\n },\n \n isWordActive(wordIndex) {\n return wordIndex === this.activeWordIndex;\n },\n \n isParagraphActive(paragraphIndex) {\n if (paragraphIndex < 0 || paragraphIndex >= this.paragraphs.length) return false;\n \n const paragraph = this.paragraphs[paragraphIndex];\n const nextParagraphStartIndex = paragraphIndex < this.paragraphs.length - 1 \n ? this.paragraphs[paragraphIndex + 1].startWordIndex \n : this.words.length;\n \n // Check if active word is within this paragraph's range\n return this.activeWordIndex >= paragraph.startWordIndex && \n this.activeWordIndex < nextParagraphStartIndex;\n },\n \n formatTime(seconds) {\n if (isNaN(seconds)) return '00:00';\n \n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return \\`\\${mins.toString().padStart(2, '0')}:\\${secs.toString().padStart(2, '0')}\\`;\n },\n\n togglePlayPause() {\n const player = document.getElementById('audioPlayer');\n if (!player) return;\n \n if (player.paused) {\n player.play();\n } else {\n player.pause();\n }\n },\n\n isPlaying() {\n const player = document.getElementById('audioPlayer');\n return player && !player.paused;\n },\n \n switchView(mode) {\n this.viewMode = mode;\n },\n \n // Get plain text transcript without timestamps\n getPlainTranscript() {\n if (!this.words.length) return '';\n \n return this.words.map(word => word.word).join(' ');\n },\n \n // Get transcript with word-level timestamps\n getTimestampedTranscript() {\n if (!this.words.length) return '';\n \n let result = '';\n \n // Group words by paragraphs for better readability\n this.paragraphs.forEach((paragraph, index) => {\n result += \\`[Paragraph \\${index + 1} - \\${this.formatTime(paragraph.startTime)}]\\\\n\\`;\n \n paragraph.words.forEach(word => {\n result += \\`[\\${this.formatTime(word.start)}] \\${word.word} \\`;\n });\n \n result += \\`\\\\n\\\\n\\`;\n });\n \n return result;\n },\n \n // Copy text to clipboard\n async copyToClipboard(text, buttonEl) {\n try {\n await navigator.clipboard.writeText(text);\n \n // Change button text temporarily to give feedback\n const originalText = buttonEl.innerText;\n buttonEl.innerText = 'Copied!';\n \n setTimeout(() => {\n buttonEl.innerText = originalText;\n }, 2000);\n } catch (err) {\n console.error('Failed to copy text: ', err);\n \n // Show error feedback\n const originalText = buttonEl.innerText;\n buttonEl.innerText = 'Error!';\n \n setTimeout(() => {\n buttonEl.innerText = originalText;\n }, 2000);\n }\n },\n \n scrollToActive() {\n if (this.activeWordIndex >= 0) {\n if (this.viewMode === 'words') {\n const wordElement = document.getElementById('word-' + this.activeWordIndex);\n if (wordElement) {\n wordElement.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n } else {\n const paragraphIndex = this.findParagraphIndexForWord(this.activeWordIndex);\n if (paragraphIndex >= 0) {\n const paragraphElement = document.getElementById('paragraph-' + paragraphIndex);\n if (paragraphElement) {\n paragraphElement.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }\n }\n }\n }\n }));\n });\n`;\n\nconst getHtml = (moduleScript) => `\n\n\n\n \n \n Audio Transcription with Word Timestamps\n \n \n \n \n \n \n \n \n \n \n\n\n

Groq Word-level Audio Transcription

Upload an audio file to get a transcription with word-level timestamps

\n\n

\n \n

\n \n \n Click to browse or drop audio file here\n \n

\n \n \n

\n \n

\n \n \n

\n File: \n \n (Cached locally)\n

\n \n \n

\n \n

\n Either upload a file or enter a URL, then click to transcribe\n

\n \n \n

Transcript

Click on any word or paragraph timestamp to jump to that point in the audio.

\n \n

\n \n \n

\n\n \n

\n \n \n

\n\n \n

\n \n

\n\n \n

\n \n

\n \n Auto-scroll to active word\n

\n \n

Show Raw Transcript Data

\n                  \n

\n \n \n

Saved Transcripts

\n \n

\n No saved transcripts yet. \n Upload an audio file and transcribe it to get started.\n

\n \n

0\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3\">\n \n

\n Uses Groq Whisper API for fast and accurate speech-to-text transcription with word-level timestamps. Documentation here. Code here\n

\n \n $\"Powered$ \n \n

\n\n \n\n\n\n`;\n\napp.get(\"/\", (c) => c.html(getHtml()));\napp.post(\"/transcribe-audio\", audioTranscriptionHandler);\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;\n\n\n\n\n\n\n","createdAt",["D",1743022398983],"branchVersion","branchId","623f53c2-2793-11f0-9d52-569c3dd06744","id","623f0d54-2793-11f0-9d52-569c3dd06744","groqAudioWordLevel",["D",1746217441043],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",5,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","yawnxyz","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":160,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":161,"_79":162,"_81":163,"_83":25},"tree",[151,152],"files",[151,152],"counts",{"_141":61,"_142":137,"_143":61,"_144":145,"_146":147},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":134,"_32":135,"_30":136,"_128":-5,"_41":42,"_40":137,"_129":49,"_38":138,"_13":61,"_33":20,"_35":139,"_24":25,"_132":-5,"_27":140},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":130,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_27":133},"6251ce80-2793-11f0-9d52-569c3dd06744","parentId","latest",["D",1743022398983],3,"label",[28],"624149b6-2793-11f0-9d52-569c3dd06744","README.md","62414a2e-2793-11f0-9d52-569c3dd06744",1,["D",1742341995767],"This is a demo of using Groq's new word-level audio transcription system. Upload a sound file (or your favorite podcast, which you can find on http://listennotes.com/ for free), and you can read along the transcription, or even click on a part of the transcript to jump to that location. ",[135],"pulls","branches","forks","envVars",{"_148":61,"_150":61},"connections",{"_148":61,"_149":61},"count","unfilledCount","emptyCount",{"_43":134,"_32":135,"_30":136,"_128":-5,"_41":42,"_40":137,"_129":49,"_38":157,"_13":61,"_33":20,"_35":139,"_24":25,"_132":-5,"_154":158,"_27":159},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":153,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_154":155,"_27":156},["D",1743022398983],"children",[],[28],["D",1742341995767],[],[135],["D",1746217441043],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":197,"_198":199,"_200":201,"_202":25,"_203":25,"_204":25,"_205":49,"_206":-5,"_207":-7,"_208":-7,"_209":61,"_210":25,"_211":25,"_212":-5,"_213":25,"_214":25,"_215":25,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":85,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v4