Val Town Code SearchReturn to Val Town

1# Groq Audio Chat
2
3A web-based chat application powered by Groq's LLM API with audio transcription and text-to-speech capabilities.
4
5## Features
6
7- Chat with the Llama-3.3-70b-versatile model through Groq API
8- Multiple ways to record audio input:
9  - Hold spacebar to record audio (keyboard shortcut)
22/
23├── index.ts                 # Main entry point
24├── handlers/                # API endpoint handlers
25│   ├── index.ts             # Exports all handlers
26│   ├── audio.ts             # Audio transcription handler
35```
36
37## API Endpoints
38
39- `GET /` - Main web interface
44## Voice Options
45
46The application features 19 different PlayHT voices through Groq's API:
47- Arista-PlayAI
48- Atlas-PlayAI
67## Environment Variables
68
69- `GROQ_API_KEY` - Your Groq API key
70
71## Technologies Used
74- Alpine.js - Front-end JavaScript framework
75- Tailwind CSS - Utility-first CSS framework
76- Groq API - LLM provider with Llama-3.3-70b-versatile model
77- Groq Whisper API - Audio transcription
78- PlayHT (via Groq) - Text-to-speech synthesis
79

16    }
17
18    // Get API key from environment variable
19    const apiKey = Deno.env.get("GROQ_API_KEY");
20    if (!apiKey) {
21      console.error("❌ TTS error: Missing API key");
22      return c.json({ error: "API key not configured" }, 500);
23    }
24
25    // Call Groq Speech API
26    console.log("🔊 Sending request to Groq Speech API");
27    const start = Date.now();
28    const response = await fetch("https://api.groq.com/openai/v1/audio/speech", {
29      method: "POST",
30      headers: {
31        "Content-Type": "application/json",
32        "Authorization": `Bearer ${apiKey}`
33      },
34      body: JSON.stringify({
40    });
41    const elapsed = Date.now() - start;
42    console.log(`🔊 Groq Speech API response received in ${elapsed}ms, status: ${response.status}`);
43
44    if (!response.ok) {
47        const errorData = await response.json();
48        errorMessage = errorData.error?.message || JSON.stringify(errorData);
49        console.error("❌ TTS API error:", errorData);
50      } catch (e) {
51        // If response is not JSON
52        errorMessage = `Server error: ${response.status} ${response.statusText}`;
53        console.error("❌ TTS API non-JSON error:", errorMessage);
54      }
55      

12    console.log(`🔵 Last user message: "${messages.find(m => m.role === 'user')?.content?.substring(0, 50)}..."`);
13    
14    const GROQ_API_KEY = Deno.env.get("GROQ_API_KEY");
15    if (!GROQ_API_KEY) {
16      console.error("❌ Missing GROQ_API_KEY environment variable");
17      return c.json({ error: "GROQ_API_KEY environment variable is not set" }, 500);
18    }
19
20    console.log("🔵 Sending request to Groq API");
21    const start = Date.now();
22    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
23      method: "POST",
24      headers: {
25        "Content-Type": "application/json",
26        "Authorization": `Bearer ${GROQ_API_KEY}`
27      },
28      body: JSON.stringify({
33    });
34    const elapsed = Date.now() - start;
35    console.log(`🔵 Groq API response received in ${elapsed}ms, status: ${response.status}`);
36
37    if (!response.ok) {
38      const errorData = await response.json();
39      console.error("❌ Chat API error:", errorData);
40      return c.json({ error: "Failed to get chat completion", details: errorData }, response.status);
41    }

1import { Context } from "https://deno.land/x/hono@v3.11.7/mod.ts";
2
3// Function to handle audio transcription using Groq's Whisper API
4export const audioTranscriptionHandler = async (c: Context) => {
5  console.log("🎤 Audio transcription request received");
15    }
16
17    // Get API key from environment variable
18    const apiKey = Deno.env.get("GROQ_API_KEY");
19    if (!apiKey) {
20      console.error("❌ Transcription error: Missing API key");
21      return c.json({ error: "API key not configured" }, 500);
22    }
23
33      
34      // If the file doesn't have a proper name or type, add one
35      // This ensures the file has the right extension for the API
36      if (!audioFile.name || !audioFile.type.startsWith('audio/')) {
37        const newFile = new File(
45    }
46
47    // Prepare the form data for Groq API
48    const groqFormData = new FormData();
49    
60    groqFormData.append("timestamp_granularities[]", "word");
61
62    // Call Groq API
63    console.log("🎤 Sending request to Groq Whisper API");
64    const start = Date.now();
65    const response = await fetch("https://api.groq.com/openai/v1/audio/transcriptions", {
66      method: "POST",
67      headers: {
68        "Authorization": `Bearer ${apiKey}`
69      },
70      body: groqFormData
71    });
72    const elapsed = Date.now() - start;
73    console.log(`🎤 Groq Whisper API response received in ${elapsed}ms, status: ${response.status}`);
74
75    // Get response content type
94            errorMessage = `Server error: ${response.status} ${response.statusText}`;
95            // Log the full response for debugging
96            console.error("❌ Transcription API error response:", {
97              status: response.status,
98              statusText: response.statusText,
103        }
104      } catch (parseError) {
105        console.error("❌ Error parsing Groq API response:", parseError);
106        errorMessage = "Failed to parse error response from server";
107      }
108
109      return c.json({ 
110        error: `Groq API error: ${errorMessage}`,
111        status: response.status
112      }, response.status);

11  },
12  {
13    "prompt": "weather dashboard for nyc using open-meteo API for NYC with icons",
14    "title": "Weather App",
15    "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>NYC Weather</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n    <style>\n        .weather-icon {\n            font-size: 48px;\n            margin-bottom: 16px;\n        }\n    </style>\n</head>\n<body class=\"h-screen bg-blue-100 flex justify-center items-center p-4\">\n    <div class=\"bg-white p-8 rounded-md shadow-md w-full max-w-sm md:p-12 lg:p-16 xl:p-20\">\n        <h1 class=\"text-2xl font-bold mb-4 text-center text-blue-500\">NYC Weather</h1>\n        <div id=\"weather\" class=\"mb-4 p-4 text-center\">\n            <div id=\"temperature\" class=\"text-4xl font-bold mb-4\"></div>\n            <div id=\"condition\" class=\"text-xl font-medium mb-4\"></div>\n            <div id=\"humidity\" class=\"text-lg font-light mb-2\">Humidity: <span id=\"humidity-value\"></span>%</div>\n            <div id=\"wind\" class=\"text-lg font-light mb-2\">Wind: <span id=\"wind-value\"></span> mph</div>\n            <i id=\"weather-icon\" class=\"weather-icon text-blue-500\"></i>\n        </div>\n    </div>\n    <p class=\"fixed bottom-0 left-0 right-0 text-center p-4 text-gray-600 md:p-6 lg:p-8 xl:p-10\">\n        Built on <a class=\"text-blue-600\" href=\"https://cerebrascoder.com\">Cerebras Coder</a>\n    </p>\n\n    <script>\n        // Sample weather data\n        const weatherData = {\n            temperature: 75,\n            condition: 'Sunny',\n            humidity: 60,\n            wind: 10,\n            icon: 'sun'\n        };\n\n        document.getElementById('temperature').innerText = `${weatherData.temperature}°F`;\n        document.getElementById('condition').innerText = weatherData.condition;\n        document.getElementById('humidity-value').innerText = weatherData.humidity;\n        document.getElementById('wind-value').innerText = weatherData.wind;\n\n        // Map weather icon\n        const weatherIcons = {\n            'sun': '&#9728;',\n            'cloud': '&#9728;',\n            'rain': '&#9731;',\n            'snow': '&#9732;'\n        };\n\n        document.getElementById('weather-icon').innerHTML = weatherIcons[weatherData.icon] || '';\n    </script>\n</body>\n</html>",

8
91. Sign up for [Cerebras](https://cloud.cerebras.ai/)
102. Get a Cerebras API Key
113. Save it in your project env variable called `CEREBRAS_API_KEY`

5      <meta name="viewport" content="width=device-width, initial-scale=1.0">
6      <title>CerebrasCoder</title>
7      <link rel="preconnect" href="https://fonts.googleapis.com" />
8      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9      <link
10        href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
11        rel="stylesheet"
12      />
21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25          

211    } catch (error) {
212      Toastify({
213        text: "We may have hit our Cerebras Usage limits. Try again later or fork this and use your own API key.",
214        position: "center",
215        duration: 3000,

16    };
17  } else {
18    const client = new Cerebras({ apiKey: Deno.env.get("CEREBRAS_API_KEY") });
19    const completion = await client.chat.completions.create({
20      messages: [

6import "jsr:@std/dotenv/load"; // needed for deno run; not req for smallweb or valtown
7
8// Function to handle audio transcription using Groq's Whisper API
9export const audioTranscriptionHandler = async (c) => {
10  console.log("🎤 Audio transcription request received");
20    }
21
22    // Get API key from environment variable
23    const apiKey = Deno.env.get("GROQ_API_KEY");
24    if (!apiKey) {
25      console.error("❌ Transcription error: Missing API key");
26      return c.json({ error: "API key not configured" }, 500);
27    }
28
38      
39      // If the file doesn't have a proper name or type, add one
40      // This ensures the file has the right extension for the API
41      if (!audioFile.name || !audioFile.type.startsWith('audio/')) {
42        const newFile = new File(
50    }
51
52    // Prepare the form data for Groq API
53    const groqFormData = new FormData();
54    
65    groqFormData.append("timestamp_granularities[]", "word");
66
67    // Call Groq API
68    console.log("🎤 Sending request to Groq Whisper API");
69    const start = Date.now();
70    const response = await fetch("https://api.groq.com/openai/v1/audio/transcriptions", {
71      method: "POST",
72      headers: {
73        "Authorization": `Bearer ${apiKey}`
74      },
75      body: groqFormData
76    });
77    const elapsed = Date.now() - start;
78    console.log(`🎤 Groq Whisper API response received in ${elapsed}ms, status: ${response.status}`);
79
80    // Get response content type
99            errorMessage = `Server error: ${response.status} ${response.statusText}`;
100            // Log the full response for debugging
101            console.error("❌ Transcription API error response:", {
102              status: response.status,
103              statusText: response.statusText,
108        }
109      } catch (parseError) {
110        console.error("❌ Error parsing Groq API response:", parseError);
111        errorMessage = "Failed to parse error response from server";
112      }
113
114      return c.json({ 
115        error: `Groq API error: ${errorMessage}`,
116        status: response.status
117      }, response.status);
150    console.log(`🔵 Last user message: "${messages.find(m => m.role === 'user')?.content?.substring(0, 50)}..."`);
151    
152    const GROQ_API_KEY = Deno.env.get("GROQ_API_KEY");
153    if (!GROQ_API_KEY) {
154      console.error("❌ Missing GROQ_API_KEY environment variable");
155      return c.json({ error: "GROQ_API_KEY environment variable is not set" }, 500);
156    }
157
158    console.log("🔵 Sending request to Groq API");
159    const start = Date.now();
160    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
161      method: "POST",
162      headers: {
163        "Content-Type": "application/json",
164        "Authorization": `Bearer ${GROQ_API_KEY}`
165      },
166      body: JSON.stringify({
171    });
172    const elapsed = Date.now() - start;
173    console.log(`🔵 Groq API response received in ${elapsed}ms, status: ${response.status}`);
174
175    if (!response.ok) {
176      const errorData = await response.json();
177      console.error("❌ Chat API error:", errorData);
178      return c.json({ error: "Failed to get chat completion", details: errorData }, response.status);
179    }
204    }
205
206    // Get API key from environment variable
207    const apiKey = Deno.env.get("GROQ_API_KEY");
208    if (!apiKey) {
209      console.error("❌ TTS error: Missing API key");
210      return c.json({ error: "API key not configured" }, 500);
211    }
212
213    // Call Groq Speech API
214    console.log("🔊 Sending request to Groq Speech API");
215    const start = Date.now();
216    const response = await fetch("https://api.groq.com/openai/v1/audio/speech", {
217      method: "POST",
218      headers: {
219        "Content-Type": "application/json",
220        "Authorization": `Bearer ${apiKey}`
221      },
222      body: JSON.stringify({
228    });
229    const elapsed = Date.now() - start;
230    console.log(`🔊 Groq Speech API response received in ${elapsed}ms, status: ${response.status}`);
231
232    if (!response.ok) {
235        const errorData = await response.json();
236        errorMessage = errorData.error?.message || JSON.stringify(errorData);
237        console.error("❌ TTS API error:", errorData);
238      } catch (e) {
239        // If response is not JSON
240        errorMessage = `Server error: ${response.status} ${response.statusText}`;
241        console.error("❌ TTS API non-JSON error:", errorMessage);
242      }
243      
601            // Now immediately send this message to get AI response
602            try {
603              // Prepare messages for the API
604              const apiMessages = this.messages.map(({ role, content }) => ({ role, content }));
605              
606              // Ensure first message is always the correct system message for current mode
607              if (apiMessages.length > 0 && apiMessages[0].role === 'system') {
608                const systemMessage = this.chatMode === 'concise' 
609                  ? '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.'
610                  : 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Respond conversationally and accurately to the user.';
611                
612                apiMessages[0].content = systemMessage;
613              }
614              
616                method: 'POST',
617                headers: { 'Content-Type': 'application/json' },
618                body: JSON.stringify({ messages: apiMessages })
619              });
620              
679        this.statusMessage = 'Thinking...';
680        
681        // Prepare messages for the API (excluding UI-only properties)
682        const apiMessages = this.messages.map(({ role, content }) => ({ role, content }));
683        
684        // Ensure first message is always the correct system message for current mode
685        if (apiMessages.length > 0 && apiMessages[0].role === 'system') {
686          const systemMessage = this.chatMode === 'concise' 
687            ? '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.'
688            : 'You are a helpful assistant powered by the Llama-3.3-70b-versatile model. Respond conversationally and accurately to the user.';
689          
690          apiMessages[0].content = systemMessage;
691        }
692        
695          method: 'POST',
696          headers: { 'Content-Type': 'application/json' },
697          body: JSON.stringify({ messages: apiMessages })
698        });
699        
967
968    <p class="text-center text-sm text-gray-600 mt-4">
969      Powered by Llama-3.3-70b-versatile through Groq API. Audio transcription and speech synthesis provided by Groq. Text-to-speech provided through PlayHT. <a class="underline" href="https://console.groq.com/docs/speech-to-text" target="_blank" rel="noopener noreferrer">Documentation here</a>. <a class="underline" href="https://www.val.town/v/yawnxyz/groqAudioChat" target="_blank" rel="noopener noreferrer">Code here</a>
970    </p>
971    <div class="text-center text-sm text-gray-600 mt-4 w-full mx-auto">