Log inSign up
arfan
arfangroqAudioChat
Remix of dcm31/groqAudioChat
Public
Like
groqAudioChat
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Search
index.ts
https://arfan--904211e24c534ba493e58ff0ffef4121.web.val.run
README.md

Groq Audio Chat

A web-based chat application powered by Groq's LLM API with audio transcription and text-to-speech capabilities.

Features

  • Chat with the Llama-3.3-70b-versatile model through Groq API
  • Multiple ways to record audio input:
    • Hold spacebar to record audio (keyboard shortcut)
    • Press Cmd+Space (Mac) or Ctrl+Space (Windows/Linux) to toggle locked recording
    • Hold the "Hold to Record" button
    • Click the "Lock Recording" button for hands-free recording
  • Text-to-speech output for AI responses with multiple voice options:
    • Choose from 19 different voices via dropdown
    • Random voice selection option
  • Concise mode for shorter responses
  • Toggle TTS on/off

Project Structure

/
├── index.ts                 # Main entry point
├── handlers/                # API endpoint handlers
│   ├── index.ts             # Exports all handlers
│   ├── audio.ts             # Audio transcription handler
│   ├── chat.ts              # Chat completion handler
│   └── tts.ts               # Text-to-speech handler
└── ui/                      # UI components
    ├── index.ts             # Exports all UI components
    ├── html.ts              # HTML template
    ├── styles.ts            # CSS styles
    ├── tailwind.ts          # Tailwind configuration
    └── alpine.ts            # Alpine.js code

API Endpoints

  • GET / - Main web interface
  • POST /transcribe-audio - Transcribe audio recordings
  • POST /chat - Send chat messages to Groq LLM
  • POST /text-to-speech - Convert text to speech

Voice Options

The application features 19 different PlayHT voices through Groq's API:

  • Arista-PlayAI
  • Atlas-PlayAI
  • Basil-PlayAI
  • Briggs-PlayAI
  • Calum-PlayAI
  • Celeste-PlayAI
  • Cheyenne-PlayAI
  • Chip-PlayAI
  • Cillian-PlayAI
  • Deedee-PlayAI
  • Fritz-PlayAI
  • Gail-PlayAI
  • Indigo-PlayAI
  • Mamaw-PlayAI
  • Mason-PlayAI
  • Mikail-PlayAI
  • Mitch-PlayAI
  • Quinn-PlayAI
  • Thunder-PlayAI

Environment Variables

  • GROQ_API_KEY - Your Groq API key

Technologies Used

  • Hono - Lightweight web framework
  • Alpine.js - Front-end JavaScript framework
  • Tailwind CSS - Utility-first CSS framework
  • Groq API - LLM provider with Llama-3.3-70b-versatile model
  • Groq Whisper API - Audio transcription
  • PlayHT (via Groq) - Text-to-speech synthesis

Credits

This project is based on the original Val Town project by yawnxyz/groqAudioChat, with additional features and improvements including:

  • Refactored code structure
  • Enhanced recording options with keyboard shortcuts
  • Multiple voice selection options
  • Improved UI and visual feedback
HTTP
Code