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`;",[],[207,221],{"_102":228,"_95":190,"_155":229,"_157":208,"_158":136,"_159":160,"_161":162,"_104":230,"_99":32,"_164":176,"_166":231,"_167":22,"_168":-5,"_169":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';",[],[207,190],{"_102":235,"_95":236,"_155":237,"_157":208,"_158":136,"_159":160,"_161":162,"_104":238,"_99":32,"_164":176,"_166":239,"_167":22,"_168":-5,"_169":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`;",[],[207,236],{"_102":243,"_95":244,"_155":245,"_157":208,"_158":136,"_159":160,"_161":162,"_104":246,"_99":32,"_164":176,"_166":247,"_167":22,"_168":-5,"_169":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});",[],[207,244],[207],{"_102":252,"_95":253,"_155":254,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":255,"_99":32,"_164":176,"_166":256,"_167":22,"_168":-5,"_169":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],{"_102":260,"_95":190,"_155":261,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":262,"_99":32,"_164":263,"_166":264,"_167":22,"_168":-5,"_169":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;",[],[190],"files",[152,171,180,188,196,205,211,219,227,234,242,251,259],"counts",{"_271":32,"_272":160,"_273":32,"_274":160},"pulls","branches","forks","envVars","contents",[277,280,283,286],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":278,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":279},["D",1743220806274],[154],{"_102":206,"_95":207,"_155":208,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":281,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":282},["D",1743220806274],[207],{"_102":252,"_95":253,"_155":254,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":284,"_99":32,"_164":176,"_166":256,"_167":22,"_168":-5,"_98":285},["D",1743220806274],[253],{"_102":260,"_95":190,"_155":261,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":287,"_99":32,"_164":263,"_166":264,"_167":22,"_168":-5,"_98":288},["D",1743220806274],[190],"upstreamProject",{"_102":144,"_95":96,"_110":291,"_111":-5,"_108":109,"_23":292},"Project created from val URLs",{"_93":293,"_129":294},"dcm31","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","upstreamBranch",{"_102":139,"_104":297,"_298":299,"_95":43,"_137":144,"_99":300,"_138":-5,"_140":-5,"_301":302,"_106":-5,"_149":22,"_108":109,"_148":293,"_16":146,"_147":96},["D",1743025858842],"updatedAt",["D",1743349806192],5,"lockfileKey","1744488815108-esm.town_v_dcm31_groqAudioChat@5-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":309,"_273":314,"_315":316},{"_102":103,"_95":96,"_104":310,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":116,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":311,"_131":312,"_134":313,"_149":22},["D",1743220806274],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":116,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},[],"upstream",{"_102":144,"_95":96,"_110":291,"_111":-5,"_108":109,"_23":317},{"_93":293,"_129":294},"actionData","errors"]

arfan

groqAudioChat