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`;",[],[99,221],{"_103":228,"_95":191,"_156":229,"_158":208,"_159":137,"_160":161,"_162":163,"_105":230,"_100":32,"_165":177,"_167":231,"_168":22,"_169":-5,"_170":232,"_98":233},"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';",[],[99,191],{"_103":235,"_95":236,"_156":237,"_158":208,"_159":137,"_160":161,"_162":163,"_105":238,"_100":32,"_165":177,"_167":239,"_168":22,"_169":-5,"_170":240,"_98":241},"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`;",[],[99,236],{"_103":243,"_95":244,"_156":245,"_158":208,"_159":137,"_160":161,"_162":163,"_105":246,"_100":32,"_165":177,"_167":247,"_168":22,"_169":-5,"_170":248,"_98":249},"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});",[],[99,244],[99],{"_103":252,"_95":253,"_156":254,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":255,"_100":32,"_165":177,"_167":256,"_168":22,"_169":-5,"_170":257,"_98":258},"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",[],[253],{"_103":260,"_95":191,"_156":261,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":262,"_100":32,"_165":263,"_167":264,"_168":22,"_169":-5,"_170":265,"_98":266},"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;",[],[191],"files",[153,172,181,189,197,206,211,219,227,234,242,251,259],"counts",{"_271":32,"_272":161,"_273":32,"_274":161},"pulls","branches","forks","envVars","contents",[277,280,283,286,289],{"_103":212,"_95":213,"_156":214,"_158":208,"_159":137,"_160":161,"_162":163,"_105":278,"_100":32,"_165":177,"_167":216,"_168":22,"_169":-5,"_98":279},["D",1743220806274],[99,213],{"_103":220,"_95":221,"_156":222,"_158":208,"_159":137,"_160":161,"_162":163,"_105":281,"_100":32,"_165":177,"_167":224,"_168":22,"_169":-5,"_98":282},["D",1743220806274],[99,221],{"_103":228,"_95":191,"_156":229,"_158":208,"_159":137,"_160":161,"_162":163,"_105":284,"_100":32,"_165":177,"_167":231,"_168":22,"_169":-5,"_98":285},["D",1743220806274],[99,191],{"_103":235,"_95":236,"_156":237,"_158":208,"_159":137,"_160":161,"_162":163,"_105":287,"_100":32,"_165":177,"_167":239,"_168":22,"_169":-5,"_98":288},["D",1743220806274],[99,236],{"_103":243,"_95":244,"_156":245,"_158":208,"_159":137,"_160":161,"_162":163,"_105":290,"_100":32,"_165":177,"_167":247,"_168":22,"_169":-5,"_98":291},["D",1743220806274],[99,244],{"_103":207,"_95":99,"_156":208,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":293,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":294},["D",1743220806274],[99],"upstreamProject",{"_103":145,"_95":96,"_111":297,"_112":-5,"_109":110,"_23":298},"Project created from val URLs",{"_93":299,"_130":300},"dcm31","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","upstreamBranch",{"_103":140,"_105":303,"_304":305,"_95":43,"_138":145,"_100":306,"_139":-5,"_141":-5,"_307":308,"_107":-5,"_150":22,"_109":110,"_149":299,"_16":147,"_148":96},["D",1743025858842],"updatedAt",["D",1743349806192],5,"lockfileKey","1744488815108-esm.town_v_dcm31_groqAudioChat@5-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":315,"_151":320,"_267":360,"_177":361,"_275":363,"_374":375,"_378":22,"_379":-5,"_380":117,"_381":117,"_382":383},{"_103":104,"_95":96,"_105":316,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":117,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":317,"_132":318,"_135":319,"_150":22},["D",1743220806274],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":117,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},[321,336,354,357],{"_103":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":164,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":322,"_98":335},[323,326,329,332],{"_103":173,"_95":174,"_156":175,"_158":157,"_159":137,"_160":161,"_162":163,"_105":176,"_100":32,"_165":177,"_167":178,"_168":22,"_169":-5,"_170":324,"_98":325},[],[155,174],{"_103":182,"_95":183,"_156":184,"_158":157,"_159":137,"_160":161,"_162":163,"_105":185,"_100":32,"_165":177,"_167":186,"_168":22,"_169":-5,"_170":327,"_98":328},[],[155,183],{"_103":190,"_95":191,"_156":192,"_158":157,"_159":137,"_160":161,"_162":163,"_105":193,"_100":32,"_165":177,"_167":194,"_168":22,"_169":-5,"_170":330,"_98":331},[],[155,191],{"_103":198,"_95":199,"_156":200,"_158":157,"_159":137,"_160":161,"_162":163,"_105":201,"_100":32,"_165":177,"_167":202,"_168":22,"_169":-5,"_170":333,"_98":334},[],[155,199],[155],{"_103":207,"_95":99,"_156":208,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":209,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":337,"_98":353},[338,341,344,347,350],{"_103":212,"_95":213,"_156":214,"_158":208,"_159":137,"_160":161,"_162":163,"_105":215,"_100":32,"_165":177,"_167":216,"_168":22,"_169":-5,"_170":339,"_98":340},[],[99,213],{"_103":220,"_95":221,"_156":222,"_158":208,"_159":137,"_160":161,"_162":163,"_105":223,"_100":32,"_165":177,"_167":224,"_168":22,"_169":-5,"_170":342,"_98":343},[],[99,221],{"_103":228,"_95":191,"_156":229,"_158":208,"_159":137,"_160":161,"_162":163,"_105":230,"_100":32,"_165":177,"_167":231,"_168":22,"_169":-5,"_170":345,"_98":346},[],[99,191],{"_103":235,"_95":236,"_156":237,"_158":208,"_159":137,"_160":161,"_162":163,"_105":238,"_100":32,"_165":177,"_167":239,"_168":22,"_169":-5,"_170":348,"_98":349},[],[99,236],{"_103":243,"_95":244,"_156":245,"_158":208,"_159":137,"_160":161,"_162":163,"_105":246,"_100":32,"_165":177,"_167":247,"_168":22,"_169":-5,"_170":351,"_98":352},[],[99,244],[99],{"_103":252,"_95":253,"_156":254,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":255,"_100":32,"_165":177,"_167":256,"_168":22,"_169":-5,"_170":355,"_98":356},[],[253],{"_103":260,"_95":191,"_156":261,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":262,"_100":32,"_165":263,"_167":264,"_168":22,"_169":-5,"_170":358,"_98":359},[],[191],[321,323,326,329,332,336,338,341,344,347,350,354,357],{"_103":207,"_95":99,"_156":208,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":293,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":362},[99],[364,366,368,370,372],{"_103":212,"_95":213,"_156":214,"_158":208,"_159":137,"_160":161,"_162":163,"_105":278,"_100":32,"_165":177,"_167":216,"_168":22,"_169":-5,"_98":365},[99,213],{"_103":220,"_95":221,"_156":222,"_158":208,"_159":137,"_160":161,"_162":163,"_105":281,"_100":32,"_165":177,"_167":224,"_168":22,"_169":-5,"_98":367},[99,221],{"_103":228,"_95":191,"_156":229,"_158":208,"_159":137,"_160":161,"_162":163,"_105":284,"_100":32,"_165":177,"_167":231,"_168":22,"_169":-5,"_98":369},[99,191],{"_103":235,"_95":236,"_156":237,"_158":208,"_159":137,"_160":161,"_162":163,"_105":287,"_100":32,"_165":177,"_167":239,"_168":22,"_169":-5,"_98":371},[99,236],{"_103":243,"_95":244,"_156":245,"_158":208,"_159":137,"_160":161,"_162":163,"_105":290,"_100":32,"_165":177,"_167":247,"_168":22,"_169":-5,"_98":373},[99,244],"upstream",{"_103":140,"_105":376,"_304":377,"_95":43,"_138":145,"_100":306,"_139":-5,"_141":-5,"_307":308,"_107":-5,"_150":22,"_109":110,"_149":299,"_16":147,"_148":96},["D",1743025858842],["D",1743349806192],"showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

arfan

groqAudioChat