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],{"_107":223,"_99":185,"_150":224,"_152":203,"_153":136,"_154":155,"_156":157,"_109":225,"_104":33,"_159":171,"_161":226,"_162":27,"_163":-5,"_164":227,"_102":228},"4cc5717c-0c52-11f0-92f9-569c3dd06744","24935aee-17f1-4d16-a394-f5d8ad2b1f85",["D",1743220806274],"export { getStyles } from './styles.ts';\nexport { getTailwindConfig } from './tailwind.ts';\nexport { getAlpineModule } from './alpine.ts';\nexport { getHtml } from './html.ts';",[],[202,185],{"_107":230,"_99":231,"_150":232,"_152":203,"_153":136,"_154":155,"_156":157,"_109":233,"_104":33,"_159":171,"_161":234,"_162":27,"_163":-5,"_164":235,"_102":236},"4cc57352-0c52-11f0-92f9-569c3dd06744","styles.ts","6e3a8838-e8a7-4978-a541-ba545bea8833",["D",1743220806274],"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],{"_107":238,"_99":239,"_150":240,"_152":203,"_153":136,"_154":155,"_156":157,"_109":241,"_104":33,"_159":171,"_161":242,"_162":27,"_163":-5,"_164":243,"_102":244},"4cc57b54-0c52-11f0-92f9-569c3dd06744","tailwind.ts","d72136a8-cd89-4af4-9690-b2491f7fe516",["D",1743220806274],"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],{"_107":247,"_99":248,"_150":249,"_152":-5,"_153":136,"_154":155,"_156":157,"_109":250,"_104":33,"_159":171,"_161":251,"_162":27,"_163":-5,"_164":252,"_102":253},"4cc57eba-0c52-11f0-92f9-569c3dd06744","README.md","3bb47153-dc03-4bb0-9bde-982735fe9a51",["D",1743220806274],"# 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],{"_107":255,"_99":185,"_150":256,"_152":-5,"_153":136,"_154":155,"_156":157,"_109":257,"_104":33,"_159":258,"_161":259,"_162":27,"_163":-5,"_164":260,"_102":261},"4cc60f10-0c52-11f0-92f9-569c3dd06744","904211e2-4c53-4ba4-93e5-8ff0ffef4121",["D",1743220806274],"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\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",[147,166,175,183,191,200,206,214,222,229,237,246,254],"counts",{"_266":33,"_267":155,"_268":33,"_269":155},"pulls","branches","forks","envVars","contents",[],{"_107":167,"_99":168,"_150":169,"_152":151,"_153":136,"_154":155,"_156":157,"_109":273,"_104":33,"_159":171,"_161":172,"_162":27,"_163":-5,"_102":274},["D",1743220806274],[149,168],"upstream",{"_107":277,"_99":100,"_115":278,"_116":-5,"_113":114,"_21":279},"6703155c-0a8c-11f0-812e-569c3dd06744","Project created from val URLs",{"_97":280,"_132":281},"dcm31","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":286,"_145":290,"_262":330,"_171":331,"_270":333,"_275":334,"_343":27,"_344":-5},{"_107":108,"_99":100,"_109":287,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":94,"_121":33,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":288,"_134":289},["D",1743220806274],{"_97":98,"_132":133},{"_104":94,"_99":43,"_107":136,"_137":108,"_138":139,"_140":141,"_142":114,"_143":144},[291,306,324,327],{"_107":148,"_99":149,"_150":151,"_152":-5,"_153":136,"_154":155,"_156":157,"_109":158,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":292,"_102":305},[293,296,299,302],{"_107":167,"_99":168,"_150":169,"_152":151,"_153":136,"_154":155,"_156":157,"_109":170,"_104":33,"_159":171,"_161":172,"_162":27,"_163":-5,"_164":294,"_102":295},[],[149,168],{"_107":176,"_99":177,"_150":178,"_152":151,"_153":136,"_154":155,"_156":157,"_109":179,"_104":33,"_159":171,"_161":180,"_162":27,"_163":-5,"_164":297,"_102":298},[],[149,177],{"_107":184,"_99":185,"_150":186,"_152":151,"_153":136,"_154":155,"_156":157,"_109":187,"_104":33,"_159":171,"_161":188,"_162":27,"_163":-5,"_164":300,"_102":301},[],[149,185],{"_107":192,"_99":193,"_150":194,"_152":151,"_153":136,"_154":155,"_156":157,"_109":195,"_104":33,"_159":171,"_161":196,"_162":27,"_163":-5,"_164":303,"_102":304},[],[149,193],[149],{"_107":201,"_99":202,"_150":203,"_152":-5,"_153":136,"_154":155,"_156":157,"_109":204,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":307,"_102":323},[308,311,314,317,320],{"_107":207,"_99":208,"_150":209,"_152":203,"_153":136,"_154":155,"_156":157,"_109":210,"_104":33,"_159":171,"_161":211,"_162":27,"_163":-5,"_164":309,"_102":310},[],[202,208],{"_107":215,"_99":216,"_150":217,"_152":203,"_153":136,"_154":155,"_156":157,"_109":218,"_104":33,"_159":171,"_161":219,"_162":27,"_163":-5,"_164":312,"_102":313},[],[202,216],{"_107":223,"_99":185,"_150":224,"_152":203,"_153":136,"_154":155,"_156":157,"_109":225,"_104":33,"_159":171,"_161":226,"_162":27,"_163":-5,"_164":315,"_102":316},[],[202,185],{"_107":230,"_99":231,"_150":232,"_152":203,"_153":136,"_154":155,"_156":157,"_109":233,"_104":33,"_159":171,"_161":234,"_162":27,"_163":-5,"_164":318,"_102":319},[],[202,231],{"_107":238,"_99":239,"_150":240,"_152":203,"_153":136,"_154":155,"_156":157,"_109":241,"_104":33,"_159":171,"_161":242,"_162":27,"_163":-5,"_164":321,"_102":322},[],[202,239],[202],{"_107":247,"_99":248,"_150":249,"_152":-5,"_153":136,"_154":155,"_156":157,"_109":250,"_104":33,"_159":171,"_161":251,"_162":27,"_163":-5,"_164":325,"_102":326},[],[248],{"_107":255,"_99":185,"_150":256,"_152":-5,"_153":136,"_154":155,"_156":157,"_109":257,"_104":33,"_159":258,"_161":259,"_162":27,"_163":-5,"_164":328,"_102":329},[],[185],[291,293,296,299,302,306,308,311,314,317,320,324,327],{"_107":167,"_99":168,"_150":169,"_152":151,"_153":136,"_154":155,"_156":157,"_109":273,"_104":33,"_159":171,"_161":172,"_162":27,"_163":-5,"_102":332},[149,168],[],{"_107":139,"_109":335,"_336":337,"_99":43,"_137":277,"_104":338,"_138":-5,"_140":-5,"_339":340,"_130":27,"_113":114,"_341":280,"_342":100},["D",1743025858842],"updatedAt",["D",1743349806192],5,"lockfileKey","1744488815108-esm.town_v_dcm31_groqAudioChat@5-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]