AI Chat Assistant

\n \n \n

Chat with Llama-3.3-70b-versatile model or use voice input

\n Concise responses\n Text-to-speech enabled\n

\n \n \n

\n Voice:\n

\n \n

\n \n \n

\n \n \n \n \n

\n \n \n

\n \n

Thinking...

\n \n \n

\n \n

\n \n \n

\n \n

Space

\n \n \n

\n \n

⌘/Ctrl+Space

\n \n \n\n

\n\n \n\n\n`;",[],[202,216],{"_106":223,"_99":185,"_151":224,"_153":203,"_154":137,"_155":156,"_157":120,"_108":225,"_103":33,"_159":171,"_161":226,"_162":27,"_163":-5,"_164":227,"_102":228},"9ee44b14-1cf0-11f0-ab16-569c3dd06744","045e1b1c-a853-40f1-827d-687b88fe4153",["D",1745048023143],"export { getStyles } from './styles.ts';\nexport { getTailwindConfig } from './tailwind.ts';\nexport { getAlpineModule } from './alpine.ts';\nexport { getHtml } from './html.ts';",[],[202,185],{"_106":230,"_99":231,"_151":232,"_153":203,"_154":137,"_155":156,"_157":120,"_108":233,"_103":33,"_159":171,"_161":234,"_162":27,"_163":-5,"_164":235,"_102":236},"9ee44d4e-1cf0-11f0-ab16-569c3dd06744","styles.ts","9c57cab2-7056-4d7c-afa1-4e5fbd151bc1",["D",1745048023143],"export 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 /* Recording related styles */\n @keyframes pulse-recording {\n 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }\n 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }\n }\n \n @keyframes pulse-locked {\n 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }\n 70% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }\n }\n \n .recording-pulse {\n animation: pulse-recording 2s infinite;\n }\n \n .recording-locked-pulse {\n animation: pulse-locked 2s infinite;\n }\n \n /* Voice selector styles - fixed dropdown */\n .voice-select {\n @apply appearance-none border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n \n /* Prevent default browser arrow from appearing */\n select::-ms-expand {\n display: none;\n }\n \n /* Keyboard shortcut style */\n kbd {\n @apply inline-flex items-center justify-center text-sm font-medium px-2 py-1 bg-gray-100 border border-gray-300 rounded shadow-sm;\n }\n \n /* Button with keyboard shortcut */\n .btn-shortcut {\n @apply relative;\n }\n \n .shortcut-badge {\n @apply absolute bottom-0 right-0 transform translate-y-1/3 translate-x-1/3 px-1.5 py-0.5 text-xs rounded-md bg-gray-700 text-gray-100;\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`;",[],[202,231],{"_106":238,"_99":239,"_151":240,"_153":203,"_154":137,"_155":156,"_157":120,"_108":241,"_103":33,"_159":171,"_161":242,"_162":27,"_163":-5,"_164":243,"_102":244},"9ee453ca-1cf0-11f0-ab16-569c3dd06744","tailwind.ts","2fa58e8d-dc3e-4492-93fd-942708a5c065",["D",1745048023143],"export 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});",[],[202,239],[202],{"_106":247,"_99":248,"_151":249,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":250,"_103":33,"_159":171,"_161":251,"_162":27,"_163":-5,"_164":252,"_102":253},"9ee45762-1cf0-11f0-ab16-569c3dd06744","README.md","738d5144-201c-4b51-b0c5-e3688faeb789",["D",1745048023143],"# Groq Audio Chat\n\nA web-based chat application powered by Groq's LLM API with audio transcription and text-to-speech capabilities.\n\n## Features\n\n- Chat with the Llama-3.3-70b-versatile model through Groq API\n- Multiple ways to record audio input:\n - Hold spacebar to record audio (keyboard shortcut)\n - Press Cmd+Space (Mac) or Ctrl+Space (Windows/Linux) to toggle locked recording\n - Hold the \"Hold to Record\" button\n - Click the \"Lock Recording\" button for hands-free recording\n- Text-to-speech output for AI responses with multiple voice options:\n - Choose from 19 different voices via dropdown\n - Random voice selection option\n- Concise mode for shorter responses\n- Toggle TTS on/off\n\n## Project Structure\n\n```\n/\n├── index.ts # Main entry point\n├── handlers/ # API endpoint handlers\n│ ├── index.ts # Exports all handlers\n│ ├── audio.ts # Audio transcription handler\n│ ├── chat.ts # Chat completion handler\n│ └── tts.ts # Text-to-speech handler\n└── ui/ # UI components\n ├── index.ts # Exports all UI components\n ├── html.ts # HTML template\n ├── styles.ts # CSS styles\n ├── tailwind.ts # Tailwind configuration\n └── alpine.ts # Alpine.js code\n```\n\n## API Endpoints\n\n- `GET /` - Main web interface\n- `POST /transcribe-audio` - Transcribe audio recordings\n- `POST /chat` - Send chat messages to Groq LLM\n- `POST /text-to-speech` - Convert text to speech\n\n## Voice Options\n\nThe application features 19 different PlayHT voices through Groq's API:\n- Arista-PlayAI\n- Atlas-PlayAI\n- Basil-PlayAI\n- Briggs-PlayAI\n- Calum-PlayAI\n- Celeste-PlayAI\n- Cheyenne-PlayAI\n- Chip-PlayAI\n- Cillian-PlayAI\n- Deedee-PlayAI\n- Fritz-PlayAI\n- Gail-PlayAI\n- Indigo-PlayAI\n- Mamaw-PlayAI\n- Mason-PlayAI\n- Mikail-PlayAI\n- Mitch-PlayAI\n- Quinn-PlayAI\n- Thunder-PlayAI\n\n## Environment Variables\n\n- `GROQ_API_KEY` - Your Groq API key\n\n## Technologies Used\n\n- Hono - Lightweight web framework\n- Alpine.js - Front-end JavaScript framework\n- Tailwind CSS - Utility-first CSS framework\n- Groq API - LLM provider with Llama-3.3-70b-versatile model\n- Groq Whisper API - Audio transcription\n- PlayHT (via Groq) - Text-to-speech synthesis\n\n## Credits\n\nThis project is based on the original Val Town project by [yawnxyz/groqAudioChat](https://www.val.town/v/yawnxyz/groqAudioChat), with additional features and improvements including:\n- Refactored code structure\n- Enhanced recording options with keyboard shortcuts \n- Multiple voice selection options\n- Improved UI and visual feedback",[],[248],{"_106":255,"_99":100,"_151":118,"_153":-5,"_154":137,"_155":94,"_157":120,"_108":256,"_103":156,"_159":257,"_161":258,"_162":27,"_163":-5,"_164":259,"_102":260},"4b0e8742-1cf1-11f0-8dfa-569c3dd06744",["D",1745048312033],"http","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 console.log(\"🎤 Audio transcription request received\");\n\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 console.error(\"❌ Transcription error: No audio file or URL provided\");\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 console.error(\"❌ Transcription error: Missing API key\");\n return c.json({ error: \"API key not configured\" }, 500);\n }\n\n // Debug information about the audio file\n let fileInfo = \"No file info available\";\n if (audioFile) {\n fileInfo = {\n name: audioFile.name,\n type: audioFile.type,\n size: audioFile.size,\n };\n console.log(\"🎤 Audio file info:\", fileInfo);\n\n // If the file doesn't have a proper name or type, add one\n // This ensures the file has the right extension for the API\n if (!audioFile.name || !audioFile.type.startsWith(\"audio/\")) {\n const newFile = new File(\n [await audioFile.arrayBuffer()],\n \"recording.webm\",\n { type: \"audio/webm\" },\n );\n audioFile = newFile;\n console.log(\"🎤 Created new file with proper name and type\");\n }\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 console.log(\"🎤 Using audio file for transcription\");\n } else {\n groqFormData.append(\"url\", audioUrl);\n console.log(`🎤 Using audio URL for transcription: ${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 console.log(\"🎤 Sending request to Groq Whisper API\");\n const start = Date.now();\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 const elapsed = Date.now() - start;\n console.log(`🎤 Groq Whisper API response received in ${elapsed}ms, status: ${response.status}`);\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 console.error(\"❌ Transcription JSON error:\", 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(\"❌ Transcription 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 console.log(`✅ Transcription successful. Text: \"${result.text?.substring(0, 50)}...\"`);\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\n// Updated handler to perform chat completions with improved logging\nexport const chatCompletionHandler = async (c) => {\n console.log(\"🔵 Chat completion request received\");\n\n try {\n const body = await c.req.json();\n const messages = body.messages || [];\n\n console.log(`🔵 Processing chat with ${messages.length} messages`);\n console.log(`🔵 Last user message: \"${messages.find(m => m.role === \"user\")?.content?.substring(0, 50)}...\"`);\n\n const GROQ_API_KEY = Deno.env.get(\"GROQ_API_KEY\");\n if (!GROQ_API_KEY) {\n console.error(\"❌ Missing GROQ_API_KEY environment variable\");\n return c.json({ error: \"GROQ_API_KEY environment variable is not set\" }, 500);\n }\n\n console.log(\"🔵 Sending request to Groq API\");\n const start = Date.now();\n const response = await fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${GROQ_API_KEY}`,\n },\n body: JSON.stringify({\n model: \"llama-3.3-70b-versatile\",\n messages,\n temperature: 0.7,\n }),\n });\n const elapsed = Date.now() - start;\n console.log(`🔵 Groq API response received in ${elapsed}ms, status: ${response.status}`);\n\n if (!response.ok) {\n const errorData = await response.json();\n console.error(\"❌ Chat API error:\", errorData);\n return c.json({ error: \"Failed to get chat completion\", details: errorData }, response.status);\n }\n\n const chatCompletion = await response.json();\n console.log(\n `✅ Chat completion successful. Response length: ${chatCompletion.choices[0].message.content.length} chars`,\n );\n\n return c.json(chatCompletion);\n } catch (error) {\n console.error(\"❌ Error in chat completion handler:\", error);\n return c.json({ error: \"Failed to process chat completion request\", details: error.message }, 500);\n }\n};\n\n// Update the text-to-speech handler to fix the stack overflow issue\nexport const textToSpeechHandler = async (c) => {\n console.log(\"🔊 Text-to-speech request received\");\n\n try {\n const body = await c.req.json();\n const { text, voice = \"Furio-PlayAI\" } = body;\n\n console.log(`🔊 Processing TTS request: \"${text?.substring(0, 50)}...\" with voice: ${voice}`);\n\n if (!text) {\n console.error(\"❌ TTS error: No text provided\");\n return c.json({ error: \"No text provided\" }, 400);\n }\n\n // Get API key from environment variable\n const apiKey = Deno.env.get(\"GROQ_API_KEY\");\n if (!apiKey) {\n console.error(\"❌ TTS error: Missing API key\");\n return c.json({ error: \"API key not configured\" }, 500);\n }\n\n // Call Groq Speech API\n console.log(\"🔊 Sending request to Groq Speech API\");\n const start = Date.now();\n const response = await fetch(\"https://api.groq.com/openai/v1/audio/speech\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`,\n },\n body: JSON.stringify({\n model: \"playai-tts\",\n voice: voice,\n input: text,\n response_format: \"wav\",\n }),\n });\n const elapsed = Date.now() - start;\n console.log(`🔊 Groq Speech API response received in ${elapsed}ms, status: ${response.status}`);\n\n if (!response.ok) {\n let errorMessage = \"Failed to generate speech\";\n try {\n const errorData = await response.json();\n errorMessage = errorData.error?.message || JSON.stringify(errorData);\n console.error(\"❌ TTS API error:\", errorData);\n } catch (e) {\n // If response is not JSON\n errorMessage = `Server error: ${response.status} ${response.statusText}`;\n console.error(\"❌ TTS API non-JSON error:\", errorMessage);\n }\n\n return c.json({ error: errorMessage }, response.status);\n }\n\n // Get the audio data\n const audioBuffer = await response.arrayBuffer();\n console.log(`✅ TTS successful. Audio size: ${audioBuffer.byteLength} bytes`);\n\n // Return the audio data as a response with proper headers\n return new Response(audioBuffer, {\n headers: {\n \"Content-Type\": \"audio/wav\",\n \"Content-Length\": audioBuffer.byteLength.toString(),\n },\n });\n } catch (error) {\n console.error(\"❌ Text-to-speech error:\", error);\n return c.json({\n error: error.message || \"Error generating speech\",\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// Updated Alpine module for immediate audio sending on release\nconst getAlpineModule = () => `\ndocument.addEventListener('alpine:init', () => {\n Alpine.data('chatApp', () => ({\n messages: [],\n userInput: '',\n isRecording: false,\n mediaRecorder: null,\n audioChunks: [],\n isProcessing: false,\n errorMessage: '',\n statusMessage: '',\n chatMode: 'concise',\n ttsEnabled: true,\n isPlayingAudio: false,\n currentAudio: null,\n \n init() {\n this.setupAudioRecording();\n this.setInitialSystemMessage();\n },\n \n setInitialSystemMessage() {\n const systemMessage = this.chatMode === 'concise' \n ? 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Keep your responses short, concise and conversational. Aim for 1-3 sentences when possible.'\n : 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Respond conversationally and accurately to the user.';\n \n this.messages = [{\n role: 'system',\n content: systemMessage\n }];\n },\n \n toggleChatMode() {\n this.chatMode = this.chatMode === 'normal' ? 'concise' : 'normal';\n \n if (this.messages.length > 0 && this.messages[0].role === 'system') {\n const systemMessage = this.chatMode === 'concise' \n ? 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Keep your responses short, concise and conversational. Aim for 1-3 sentences when possible.'\n : 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Respond conversationally and accurately to the user.';\n \n this.messages[0].content = systemMessage;\n }\n },\n \n toggleTTS() {\n this.ttsEnabled = !this.ttsEnabled;\n },\n \n setupAudioRecording() {\n if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n navigator.mediaDevices.getUserMedia({ audio: true })\n .then(stream => {\n // Try to use a supported format from Groq's accepted list\n const mimeTypes = [\n 'audio/mp3',\n 'audio/mpeg',\n 'audio/mp4',\n 'audio/wav',\n 'audio/webm;codecs=opus',\n 'audio/ogg;codecs=opus',\n 'audio/webm'\n ];\n \n // Find a supported mime type\n let options = {};\n for (const mimeType of mimeTypes) {\n if (MediaRecorder.isTypeSupported(mimeType)) {\n options = { mimeType };\n console.log('Using MIME type:', mimeType);\n break;\n }\n }\n \n try {\n this.mediaRecorder = new MediaRecorder(stream, options);\n } catch (e) {\n console.warn(\"Specified format not supported, falling back to default format\");\n this.mediaRecorder = new MediaRecorder(stream);\n }\n \n this.mediaRecorder.ondataavailable = (e) => {\n if (e.data.size > 0) {\n this.audioChunks.push(e.data);\n }\n };\n \n // Set up automatic send on recording stop\n this.mediaRecorder.onstop = async () => {\n // Set state first so UI updates immediately\n this.isRecording = false;\n // Process the audio recording right away\n await this.processAudioRecording();\n };\n })\n .catch(err => {\n console.error('Error accessing microphone:', err);\n this.errorMessage = 'Could not access your microphone. Please check permissions.';\n });\n } else {\n this.errorMessage = 'Audio recording is not supported in your browser.';\n }\n },\n \n startRecording() {\n if (this.mediaRecorder && !this.isRecording && !this.isProcessing) {\n this.audioChunks = [];\n this.mediaRecorder.start();\n this.isRecording = true;\n \n // Clear any previous error message when starting a new recording\n this.errorMessage = '';\n }\n },\n \n stopRecording() {\n if (this.mediaRecorder && this.isRecording) {\n this.mediaRecorder.stop();\n // Note: We don't need to set isRecording to false here because it's done in the onstop handler\n }\n },\n \n async processAudioRecording() {\n if (this.audioChunks.length === 0) return;\n \n this.isProcessing = true;\n \n try {\n // Get the MIME type used for recording\n let audioType = 'audio/webm';\n if (this.mediaRecorder && this.mediaRecorder.mimeType) {\n audioType = this.mediaRecorder.mimeType;\n }\n \n // Extract file extension from MIME type\n const extensionMap = {\n 'audio/mp3': 'mp3',\n 'audio/mpeg': 'mp3',\n 'audio/mp4': 'mp4',\n 'audio/wav': 'wav',\n 'audio/webm': 'webm',\n 'audio/ogg': 'ogg'\n };\n \n // Get the base MIME type without codecs\n const baseMimeType = audioType.split(';')[0];\n const extension = extensionMap[baseMimeType] || 'webm';\n \n const audioBlob = new Blob(this.audioChunks, { type: audioType });\n const formData = new FormData();\n formData.append('audio', audioBlob, 'recording.' + extension);\n \n // Visual feedback that we're processing - using the status message now\n this.statusMessage = 'Transcribing audio...';\n \n const response = await fetch('/transcribe-audio', {\n method: 'POST',\n body: formData\n });\n \n // Clear the status message\n this.statusMessage = '';\n \n if (response.ok) {\n const result = await response.json();\n if (result.text && result.text.trim()) {\n // Add the transcribed text directly as a user message\n const userMessage = {\n role: 'user',\n content: result.text.trim()\n };\n \n // Add user message to the UI\n this.messages.push(userMessage);\n \n // Now immediately send this message to get AI response\n try {\n // Prepare messages for the API\n const apiMessages = this.messages.map(({ role, content }) => ({ role, content }));\n \n // Ensure first message is always the correct system message for current mode\n if (apiMessages.length > 0 && apiMessages[0].role === 'system') {\n const systemMessage = this.chatMode === 'concise' \n ? 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Keep your responses short, concise and conversational. Aim for 1-3 sentences when possible.'\n : 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Respond conversationally and accurately to the user.';\n \n apiMessages[0].content = systemMessage;\n }\n \n const chatResponse = await fetch('/chat', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ messages: apiMessages })\n });\n \n if (chatResponse.ok) {\n const chatResult = await chatResponse.json();\n const assistantMessage = chatResult.choices[0].message;\n \n // Add assistant response to the UI\n this.messages.push(assistantMessage);\n \n // Auto-play the response if TTS is enabled\n if (this.ttsEnabled) {\n await this.playTextAsSpeech(assistantMessage.content);\n }\n \n // Scroll to the bottom of the chat\n this.$nextTick(() => {\n const chatContainer = document.querySelector('.chat-messages');\n if (chatContainer) {\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }\n });\n } else {\n const error = await chatResponse.json();\n this.errorMessage = error.error || 'Failed to get response';\n }\n } catch (chatErr) {\n console.error('Error sending transcribed message:', chatErr);\n this.errorMessage = 'Error sending transcribed message.';\n }\n } else {\n this.errorMessage = 'No speech detected. Please try again.';\n }\n } else {\n const error = await response.json();\n this.errorMessage = error.error || 'Failed to transcribe audio';\n console.error('Transcription error details:', error);\n }\n } catch (err) {\n console.error('Error processing audio:', err);\n this.errorMessage = 'Error processing audio recording.';\n } finally {\n this.isProcessing = false;\n }\n },\n \n async sendMessage() {\n if (!this.userInput.trim() || this.isProcessing) return;\n \n const userMessage = {\n role: 'user',\n content: this.userInput.trim()\n };\n \n // Add user message to the UI\n this.messages.push(userMessage);\n this.userInput = '';\n this.isProcessing = true;\n \n try {\n // Use status message for \"Thinking\" state\n this.statusMessage = 'Thinking...';\n \n // Prepare messages for the API (excluding UI-only properties)\n const apiMessages = this.messages.map(({ role, content }) => ({ role, content }));\n \n // Ensure first message is always the correct system message for current mode\n if (apiMessages.length > 0 && apiMessages[0].role === 'system') {\n const systemMessage = this.chatMode === 'concise' \n ? 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Keep your responses short, concise and conversational. Aim for 1-3 sentences when possible.'\n : 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Respond conversationally and accurately to the user.';\n \n apiMessages[0].content = systemMessage;\n }\n \n console.log('Sending chat request to server');\n const response = await fetch('/chat', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ messages: apiMessages })\n });\n \n // Clear status message\n this.statusMessage = '';\n console.log('Chat response received from server:', response.status);\n \n if (response.ok) {\n const result = await response.json();\n console.log('Chat result processed successfully');\n const assistantMessage = result.choices[0].message;\n \n // Add assistant response to the UI\n this.messages.push(assistantMessage);\n \n // Auto-play the response ONLY if TTS is enabled\n if (this.ttsEnabled) {\n console.log('TTS is enabled, playing response audio');\n await this.playTextAsSpeech(assistantMessage.content);\n } else {\n console.log('TTS is disabled, skipping audio playback');\n }\n \n // Scroll to the bottom of the chat\n this.$nextTick(() => {\n const chatContainer = document.querySelector('.chat-messages');\n if (chatContainer) {\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }\n });\n } else {\n console.error('Chat response error:', response.status);\n const error = await response.json();\n this.errorMessage = error.error || 'Failed to get response';\n }\n } catch (err) {\n console.error('Error sending message:', err);\n this.errorMessage = 'Error sending message.';\n } finally {\n this.isProcessing = false;\n }\n },\n \n clearError() {\n this.errorMessage = '';\n },\n \n clearStatus() {\n this.statusMessage = '';\n },\n \n async playTextAsSpeech(text) {\n // Check if text is provided, but don't check ttsEnabled here\n // Let the caller decide whether to call this method based on the ttsEnabled state\n if (!text || this.isPlayingAudio) return;\n \n try {\n this.isPlayingAudio = true;\n \n // Stop any currently playing audio\n if (this.currentAudio) {\n this.currentAudio.pause();\n this.currentAudio = null;\n }\n \n this.statusMessage = 'Generating speech...';\n \n const response = await fetch('/text-to-speech', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ text: text })\n });\n \n this.statusMessage = '';\n \n if (response.ok) {\n // Check the content type to ensure we're getting audio\n const contentType = response.headers.get('Content-Type');\n \n if (contentType && contentType.includes('audio/')) {\n // Get the audio as a blob and create an object URL\n const audioBlob = await response.blob();\n const audioUrl = URL.createObjectURL(audioBlob);\n \n // Create and play audio\n const audio = new Audio(audioUrl);\n this.currentAudio = audio;\n \n audio.onended = () => {\n this.isPlayingAudio = false;\n this.currentAudio = null;\n URL.revokeObjectURL(audioUrl); // Clean up the object URL\n };\n \n audio.onerror = (e) => {\n console.error('Audio playback error:', e);\n this.isPlayingAudio = false;\n this.currentAudio = null;\n URL.revokeObjectURL(audioUrl); // Clean up on error too\n this.errorMessage = \"Error playing audio\";\n };\n \n await audio.play();\n } else {\n // If not audio, try to parse as JSON for error\n try {\n const result = await response.json();\n this.isPlayingAudio = false;\n this.errorMessage = result.error || \"Invalid response format\";\n } catch (e) {\n this.isPlayingAudio = false;\n this.errorMessage = \"Failed to process response\";\n }\n }\n } else {\n this.isPlayingAudio = false;\n // Try to get error details\n try {\n const error = await response.json();\n this.errorMessage = error.error || 'Failed to generate speech: ' + response.status;\n } catch (e) {\n this.errorMessage = 'Failed to generate speech: ' + response.status;\n }\n }\n } catch (err) {\n console.error('Error playing TTS:', err);\n this.errorMessage = 'Error playing speech.';\n this.isPlayingAudio = false;\n }\n }\n }));\n});\n`;\n\n// Updated HTML for the chat interface\nconst getHtml = (moduleScript) => `\n\n\n\n \n \n AI Chat with Audio Input\n \n \n \n \n\n\n

AI Chat Assistant

\n \n \n

Chat with Llama-3.3-70b-versatile model or use voice input

\n Concise responses\n Text-to-speech enabled\n

\n \n \n

\n \n \n \n \n

\n \n \n

\n \n

Thinking...

\n \n \n

\n \n

\n \n \n

\n \n \n\n

\n Powered by Llama-3.3-70b-versatile through Groq API. Audio transcription and speech synthesis provided by Groq. Text-to-speech provided through PlayHT. Documentation here. Code here\n

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

\n\n \n\n\n`;\n\n// Update the routes\napp.get(\"/\", (c) => c.html(getHtml()));\napp.post(\"/transcribe-audio\", audioTranscriptionHandler);\napp.post(\"/chat\", chatCompletionHandler);\napp.post(\"/text-to-speech\", textToSpeechHandler);\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;",[],[100],{"_106":262,"_99":185,"_151":263,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":264,"_103":33,"_159":257,"_161":265,"_162":27,"_163":-5,"_164":266,"_102":267},"9ee47742-1cf0-11f0-ab16-569c3dd06744","95288678-3bb0-4bfc-8b05-f17bae69ed86",["D",1745048023143],"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\n// Import handlers\nimport { audioTranscriptionHandler, chatCompletionHandler, textToSpeechHandler } from './handlers/index.ts';\n\n// Import UI template\nimport { getHtml } from './ui/index.ts';\n\nconst app = new Hono();\n\n// Set up routes\napp.get(\"/\", (c) => c.html(getHtml()));\napp.post(\"/transcribe-audio\", audioTranscriptionHandler);\napp.post(\"/chat\", chatCompletionHandler);\napp.post(\"/text-to-speech\", textToSpeechHandler);\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;",[],[185],"files",[148,166,175,183,191,200,206,214,222,229,237,246,254,261],"counts",{"_272":33,"_273":156,"_274":33,"_275":156},"pulls","branches","forks","envVars","contents",[278,281,284,287,290],{"_106":149,"_99":150,"_151":152,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":279,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":280},["D",1745048023143],[150],{"_106":201,"_99":202,"_151":203,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":282,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":283},["D",1745048023143],[202],{"_106":247,"_99":248,"_151":249,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":285,"_103":33,"_159":171,"_161":251,"_162":27,"_163":-5,"_102":286},["D",1745048023143],[248],{"_106":255,"_99":100,"_151":118,"_153":-5,"_154":137,"_155":94,"_157":120,"_108":288,"_103":156,"_159":257,"_161":258,"_162":27,"_163":-5,"_102":289},["D",1745048312033],[100],{"_106":262,"_99":185,"_151":263,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":291,"_103":33,"_159":257,"_161":265,"_162":27,"_163":-5,"_102":292},["D",1745048023143],[185],"upstream",{"_106":295,"_99":100,"_114":296,"_115":-5,"_112":113,"_21":297},"6703155c-0a8c-11f0-812e-569c3dd06744","Project created from val URLs",{"_97":298,"_133":299},"dcm31","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","screenshots",{"_302":303,"_304":305},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=2&url=https%3A%2F%2Fpierremenard--2ae1e923deae43ddb6239277f5edc7af.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=2&url=https%3A%2F%2Fpierremenard--2ae1e923deae43ddb6239277f5edc7af.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_103":-7,"_102":70,"_104":309,"_146":313,"_268":356,"_171":-7,"_276":357,"_293":368,"_376":27,"_377":-5},{"_106":107,"_99":100,"_108":310,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":94,"_122":33,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":27,"_21":311,"_135":312},["D",1745048023143],{"_97":98,"_133":134},{"_103":94,"_99":43,"_106":137,"_138":107,"_139":140,"_141":142,"_143":113,"_144":145},[314,329,347,350,353],{"_106":149,"_99":150,"_151":152,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":158,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":315,"_102":328},[316,319,322,325],{"_106":167,"_99":168,"_151":169,"_153":152,"_154":137,"_155":156,"_157":120,"_108":170,"_103":33,"_159":171,"_161":172,"_162":27,"_163":-5,"_164":317,"_102":318},[],[150,168],{"_106":176,"_99":177,"_151":178,"_153":152,"_154":137,"_155":156,"_157":120,"_108":179,"_103":33,"_159":171,"_161":180,"_162":27,"_163":-5,"_164":320,"_102":321},[],[150,177],{"_106":184,"_99":185,"_151":186,"_153":152,"_154":137,"_155":156,"_157":120,"_108":187,"_103":33,"_159":171,"_161":188,"_162":27,"_163":-5,"_164":323,"_102":324},[],[150,185],{"_106":192,"_99":193,"_151":194,"_153":152,"_154":137,"_155":156,"_157":120,"_108":195,"_103":33,"_159":171,"_161":196,"_162":27,"_163":-5,"_164":326,"_102":327},[],[150,193],[150],{"_106":201,"_99":202,"_151":203,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":204,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":330,"_102":346},[331,334,337,340,343],{"_106":207,"_99":208,"_151":209,"_153":203,"_154":137,"_155":156,"_157":120,"_108":210,"_103":33,"_159":171,"_161":211,"_162":27,"_163":-5,"_164":332,"_102":333},[],[202,208],{"_106":215,"_99":216,"_151":217,"_153":203,"_154":137,"_155":156,"_157":120,"_108":218,"_103":33,"_159":171,"_161":219,"_162":27,"_163":-5,"_164":335,"_102":336},[],[202,216],{"_106":223,"_99":185,"_151":224,"_153":203,"_154":137,"_155":156,"_157":120,"_108":225,"_103":33,"_159":171,"_161":226,"_162":27,"_163":-5,"_164":338,"_102":339},[],[202,185],{"_106":230,"_99":231,"_151":232,"_153":203,"_154":137,"_155":156,"_157":120,"_108":233,"_103":33,"_159":171,"_161":234,"_162":27,"_163":-5,"_164":341,"_102":342},[],[202,231],{"_106":238,"_99":239,"_151":240,"_153":203,"_154":137,"_155":156,"_157":120,"_108":241,"_103":33,"_159":171,"_161":242,"_162":27,"_163":-5,"_164":344,"_102":345},[],[202,239],[202],{"_106":247,"_99":248,"_151":249,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":250,"_103":33,"_159":171,"_161":251,"_162":27,"_163":-5,"_164":348,"_102":349},[],[248],{"_106":255,"_99":100,"_151":118,"_153":-5,"_154":137,"_155":94,"_157":120,"_108":256,"_103":156,"_159":257,"_161":258,"_162":27,"_163":-5,"_164":351,"_102":352},[],[100],{"_106":262,"_99":185,"_151":263,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":264,"_103":33,"_159":257,"_161":265,"_162":27,"_163":-5,"_164":354,"_102":355},[],[185],[314,316,319,322,325,329,331,334,337,340,343,347,350,353],[358,360,362,364,366],{"_106":149,"_99":150,"_151":152,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":279,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":359},[150],{"_106":201,"_99":202,"_151":203,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":282,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":361},[202],{"_106":247,"_99":248,"_151":249,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":285,"_103":33,"_159":171,"_161":251,"_162":27,"_163":-5,"_102":363},[248],{"_106":255,"_99":100,"_151":118,"_153":-5,"_154":137,"_155":94,"_157":120,"_108":288,"_103":156,"_159":257,"_161":258,"_162":27,"_163":-5,"_102":365},[100],{"_106":262,"_99":185,"_151":263,"_153":-5,"_154":137,"_155":156,"_157":120,"_108":291,"_103":33,"_159":257,"_161":265,"_162":27,"_163":-5,"_102":367},[185],{"_106":140,"_108":369,"_370":371,"_99":43,"_138":295,"_103":142,"_139":-5,"_141":-5,"_372":373,"_131":27,"_112":113,"_374":298,"_375":100},["D",1743025858842],"updatedAt",["D",1743349806192],"lockfileKey","1744488815108-esm.town_v_dcm31_groqAudioChat@5-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]