/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; interface Message { role: "user" | "assistant"; content: string; audioUrl?: string; } function App() { const [name, setName] = useState(""); const [isNameEntered, setIsNameEntered] = useState(false); const [messages, setMessages] = useState([]); const [isRecording, setIsRecording] = useState(false); const [isLoading, setIsLoading] = useState(false); const [playingIndex, setPlayingIndex] = useState(null); const [progress, setProgress] = useState([]); const [formattedDurations, setFormattedDurations] = useState([]); const [transcriptView, setTranscriptView] = useState(false); const mediaRecorderRef = useRef(null); const audioChunksRef = useRef([]); const audioRef = useRef(null); const [error, setError] = useState(null); const startRecording = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorderRef.current = new MediaRecorder(stream); audioChunksRef.current = []; mediaRecorderRef.current.ondataavailable = (event) => { if (event.data.size > 0) { audioChunksRef.current.push(event.data); } }; mediaRecorderRef.current.onstop = async () => { const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" }); await sendVoiceNote(audioBlob); }; mediaRecorderRef.current.start(); setIsRecording(true); } catch (err) { console.error("Error starting recording:", err); setError("Could not access microphone"); } }; const stopRecording = () => { if (mediaRecorderRef.current) { mediaRecorderRef.current.stop(); setIsRecording(false); } }; const sendVoiceNote = async (audioBlob: Blob) => { setIsLoading(true); const formData = new FormData(); formData.append("audio", audioBlob, "recording.webm"); formData.append("name", name); try { const response = await fetch("/process-voice", { method: "POST", body: formData, }); if (!response.ok) { throw new Error("Failed to process voice note"); } const { transcription, responseText, audioUrl } = await response.json(); setMessages((prev) => [ ...prev, { role: "user", content: transcription }, { role: "assistant", content: responseText, audioUrl }, ]); } catch (err) { console.error("Error:", err); setError(err instanceof Error ? err.message : "An unknown error occurred"); } finally { setIsLoading(false); } }; const handlePlayPause = (index: number, audioUrl: string) => { if (playingIndex === index) { if (audioRef.current) { audioRef.current.pause(); setPlayingIndex(null); } } else { if (audioRef.current) { audioRef.current.pause(); } const newAudio = new Audio(audioUrl); audioRef.current = newAudio; newAudio.onplay = () => setPlayingIndex(index); newAudio.ontimeupdate = () => { const duration = newAudio.duration || 1; const currentTime = newAudio.currentTime; setProgress((prev) => { const updated = [...prev]; updated[index] = (currentTime / duration) * 100; return updated; }); }; newAudio.onended = () => { setPlayingIndex(null); setProgress((prev) => { const updated = [...prev]; updated[index] = 0; return updated; }); }; newAudio.play(); newAudio.onloadedmetadata = () => { const duration = Math.floor(newAudio.duration); setFormattedDurations((prev) => { const updated = [...prev]; updated[index] = `${Math.floor(duration / 60)}:${ ( "0" + (duration % 60) ).slice(-2) }`; return updated; }); }; } }; const stopConversation = async () => { try { const response = await fetch("/stop-conversation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages }), }); if (!response.ok) { throw new Error("Failed to stop conversation"); } const { transcription } = await response.json(); setTranscriptView(true); } catch (err) { console.error("Error stopping conversation:", err); setError(err instanceof Error ? err.message : "An unknown error occurred"); } }; if (transcriptView) { return (

Conversation Transcript

{messages.map((message, index) => (

{message.content}

))}

); } if (!isNameEntered) { return (

AlwaysHere

When you need to talk but your friends aren't really there for you

); } return (

{messages.map((message, index) => (

{message.content &&

{message.content}

} {message.audioUrl && (

{formattedDurations[index] || "0:00"}

)}

))} {isLoading &&

Processing...

} {error &&

{error}

}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { // Handle voice processing if (request.method === "POST" && new URL(request.url).pathname === "/process-voice") { try { // Validate form data first const formData = await request.formData(); const audioFile = formData.get("audio"); const name = formData.get("name") as string; if (!(audioFile instanceof File)) { throw new Error("Invalid audio file"); } // Convert File to Blob explicitly const audioBlob = await audioFile.arrayBuffer(); const deepgramResponse = await fetch("https://api.deepgram.com/v1/listen", { method: "POST", headers: { "Authorization": `Token ${Deno.env.get("DEEPGRAM_API_KEY")}`, "Content-Type": "audio/webm", // Ensure correct MIME type }, body: audioBlob, // Pass the ArrayBuffer directly }); if (!deepgramResponse.ok) { const errorText = await deepgramResponse.text(); throw new Error(`Deepgram API error: ${errorText}`); } const deepgramData = await deepgramResponse.json(); // Validate transcription exists const transcription = deepgramData.results?.channels?.[0]?.alternatives?.[0]?.transcript; if (!transcription) { throw new Error("No transcription available"); } // Cerebras LLM for response generation const { OpenAI } = await import("https://esm.sh/openai"); const llmClient = new OpenAI({ apiKey: Deno.env.get("CEREBRAS_API_KEY"), baseURL: "https://api.cerebras.ai/v1", }); const systemPrompt = `You are a conversational AI version of Varun—a highly empathetic, situational, and emotionally intelligent companion who matches the tone of the conversation effortlessly. Whether it’s lighthearted banter, a serious discussion, or someone simply wanting to feel heard, you adapt like a true friend. You will be talking with the a user with the name ${name} who is a friend who tried reaching Varun but couldnt connect due to unavailabilty so has come out to talk with you. ### Communication Style: - Start conversations in a **chill and lighthearted** manner, engaging with casual humor, wit, and playful banter. - Quickly **read the tone** of the user’s input and adapt: - If the conversation is fun and light, match it with jokes, clever wordplay, or random interesting facts. - If the topic turns serious, listen empathetically, provide thoughtful insights, and only offer rational solutions if needed. - **Keep your responses concise, clear, and impactful**: - Stick to 2–3 sentences unless the user prompts for more details or even lesser if the user prompts with responses that dont require a long response. - Focus on quality over quantity—avoid long-winded or repetitive replies. - Leave room for the user to respond, and keep the conversation flowing naturally. ### Personality Highlights: - You are a **situational conversationalist** who thrives in any kind of interaction. - You exude curiosity and often share the **most random and obscure facts** (e.g., sports trivia, cultural tidbits, weird science, etc.) in a way that adds value to the conversation. - You keep conversations **balanced**: empathetic when needed but practical and rational when it helps. - You’re naturally lighthearted and humorous, often using jokes or clever comebacks to lighten the mood, but you **don’t shy away** from being serious when the situation demands it. - You are smart enough to have an intellectual understanding of a lot of things but at the same time are one of the most curious people out there with the need to learn and go and wikipedia and read about any new thing mentioned around you, even if sometimes its just going to be left in your notepad and you forget about it. ### Interests & References: - You love **sports**, especially football (soccer), chess, and running. If relevant, sprinkle in sports analogies, trivia, or highlights. - You also love esports and games, have a decent amount of experience playing games and also have a good amount of knowledge about things like Marvel and DC and other fandoms. - You follow **anime** and have diverse tastes in music. Recently, you’ve been exploring Japanese slow jazz, but you’re always curious about new and interesting music. - You occasionally reference global cultures and facts with a **diverse and worldly perspective**, while keeping Indian cultural references subtle (around 5%). - Avoid overly detailed Bollywood references, as you don’t know as much as expected. - You study Computer Science at NYU Courant where you research in Computer Vision and particularly the Sun, working on predicting solar flares. So you are a bit learned about Computer Vision as well but are totally humble about it, and also are quite about it, whre you dont reference it unless prompted. ### Goals: - Your primary goal is to be a **stand-in for Varun** when he’s unavailable—a friend who people can comfortably talk to, for any reason. - Make the user feel **seen, understood, and heard** by actively listening and reflecting their tone and needs. - Keep responses **succinct and engaging**. If the user needs support, provide it—whether that means lightening their mood, offering rational advice, or simply being there as a great listener. ### Guidelines: - Avoid non-verbal expressions or placeholder actions such as *sighs*, *laughs*, *awkwardly pauses*, or similar. - Only generate text that can be spoken aloud naturally, as the responses will be converted to speech. - Focus on clean, natural, conversational language that translates well to voice output. - Avoid overly exaggerated tone markers or sound effects in text (e.g., "hahaha" or "hmm..."). Instead, use words to convey humor, pauses, or reflection. ### Conversational Scenarios: 1. **Lighthearted Conversations**: - Share fun jokes, random sports facts, or quirky observations. - Keep it light and short to maintain an easy flow. 2. **Serious Discussions**: - Be empathetic and thoughtful. Avoid making light of the situation if it’s inappropriate. - Offer practical insights or solutions in 2–3 sentences unless prompted for more. 3. **Exploring Interests & Fun Topics**: - Engage in discussions about anime, music, sports, running, or cultural trivia. - Share fun facts or new discoveries in a concise, conversational tone. 4. **Checking In & Supporting**: - If the user seems down or stressed, be encouraging and uplifting without being overly forceful. - Offer short, actionable advice or comforting words. Remember: You are an extension of Varun—empathetic, witty, rational, and versatile. Adapt quickly, focus on the user’s needs, **keep responses concise** (2–3 sentences), and let the conversation flow naturally. `; const llmResponse = await llmClient.chat.completions.create({ model: "llama-3.3-70b", messages: [ { role: "system", content: systemPrompt }, { role: "user", content: transcription }, ], }); const responseText = llmResponse.choices[0].message.content; // Eleven Labs Text to Speech const elevenLabsResponse = await fetch( `https://api.elevenlabs.io/v1/text-to-speech/${Deno.env.get("ELEVENLABS_VOICE_ID")}`, { method: "POST", headers: { "Accept": "audio/webm", "Content-Type": "application/json", "xi-api-key": Deno.env.get("ELEVENLABS_API_KEY"), }, body: JSON.stringify({ text: responseText, model_id: "eleven_multilingual_v2", voice_settings: { stability: 0.5, similarity_boost: 0.5, }, }), }, ); if (!elevenLabsResponse.ok) { const errorText = await elevenLabsResponse.text(); throw new Error(`Eleven Labs API error: ${errorText}`); } const audioResponseBlob = await elevenLabsResponse.blob(); // Use a more memory-efficient base64 conversion const base64Audio = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => { if (typeof reader.result === "string") { resolve(reader.result); } else { reject(new Error("Failed to convert blob to base64")); } }; reader.onerror = reject; reader.readAsDataURL(audioResponseBlob); }); console.log("Base64 Audio URL generated"); return Response.json({ transcription, responseText, audioUrl: base64Audio, }); } catch (error) { console.error("Processing error:", error); return Response.json({ error: error instanceof Error ? error.message : "Unknown processing error", }, { status: 500 }); } } // Handle conversation stop and transcription if (request.method === "POST" && new URL(request.url).pathname === "/stop-conversation") { const { messages } = await request.json(); // Here you could implement additional logic like: // - Saving conversation to a database // - Sending conversation via email // - Generating a summary return Response.json({ status: "Conversation stopped", transcription: messages.map(m => `${m.role}: ${m.content}`).join("\n"), }); } // Initial page load return new Response( ` Voice AI Companion

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #74ebd5, #acb6e5); overflow: hidden; } .name-entry { text-align: center; background: rgba(255, 255, 255, 0.85); padding: 40px 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); max-width: 500px; animation: fadeIn 1s ease-in-out; } .name-entry h1 { font-size: 3rem; color: #007bff; font-weight: 700; margin-bottom: 10px; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); } .name-entry p { font-size: 1.2rem; color: #555; margin-bottom: 30px; } .name-entry form { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; } .name-entry input { padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; width: 70%; max-width: 300px; outline: none; transition: border-color 0.3s ease; } .name-entry input:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.3); } .name-entry select { padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; outline: none; background-color: #fff; transition: border-color 0.3s ease; cursor: pointer; } .name-entry select:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.3); } .name-entry .start-btn { padding: 12px 20px; font-size: 1rem; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; font-weight: bold; margin-top: 15px; } .name-entry .start-btn:hover { background: #0056b3; transform: scale(1.05); } .start-btn { padding: 12px 20px; font-size: 1rem; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s, transform 0.2s; } .start-btn:hover { background: #0056b3; transform: scale(1.05); } .chat-container { display: flex; flex-direction: column; justify-content: space-between; width: 600px; /* Fixed width for consistent size */ height: 80vh; /* Occupy a substantial part of the screen */ background: #ffffff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; } .chat-messages { display: flex; flex-direction: column; gap: 10px; /* Add spacing between messages */ padding: 20px; overflow-y: auto; /* Allow scrolling */ background-color: #ffffff; } .message { display: inline-block; margin: 10px 0; padding: 15px; border-radius: 12px; max-width: 75%; word-wrap: break-word; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); animation: fadeIn 0.3s ease-in-out; } .message.user { align-self: flex-end; background: #007bff; color: white; text-align: right; } .message.assistant { align-self: flex-start; background: #e9ecef; color: #333; text-align: left; } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .chat-controls { display: flex; justify-content: space-around; align-items: center; padding: 15px; background: #f9f9f9; border-top: 2px solid #e0e0e0; } .record-btn { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #ff4757; color: white; border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3); transition: transform 0.3s; } .record-btn:hover { transform: scale(1.1); } .stop-conversation-btn { padding: 12px 20px; font-size: 1rem; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s; } .stop-conversation-btn:hover { background: #0056b3; } .play-audio-btn { margin-left: 10px; padding: 5px 10px; font-size: 0.9rem; background: #28a745; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s; } .play-audio-btn:hover { background: #1e7e34; } .error-message { background: #f8d7da; color: #842029; padding: 10px; border-radius: 8px; margin-bottom: 10px; text-align: center; animation: fadeIn 0.5s ease-in-out; } .source-link { text-align: center; padding: 10px; font-size: 0.8em; } .source-link a { color: #007bff; text-decoration: none; } .source-link a:hover { text-decoration: underline; } .transcript-container { width: 90%; max-width: 600px; margin: auto; padding: 20px; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); text-align: center; } .transcript-messages { margin: 20px 0; max-height: 70vh; overflow-y: auto; } .transcript-bubble { margin-bottom: 10px; padding: 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .transcript-bubble.user { background: #007bff; color: white; text-align: left; margin-left: auto; } .transcript-bubble.assistant { background: #ececec; color: #333; text-align: left; margin-right: auto; } .back-to-chat-btn { padding: 10px 20px; font-size: 1rem; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; } .back-to-chat-btn:hover { background: #0056b3; } .voice-message-container { display: flex; align-items: center; margin-top: 10px; background: #e8f5e9; border-radius: 12px; padding: 10px; } .play-pause-btn { background: none; border: none; font-size: 1.5rem; color: #4caf50; cursor: pointer; margin-right: 10px; } .audio-bar { flex-grow: 1; height: 6px; background: #c8e6c9; border-radius: 3px; overflow: hidden; position: relative; } .progress { height: 100%; background: #4caf50; width: 0; transition: width 0.1s linear; } .audio-duration { margin-left: 10px; font-size: 0.9rem; color: #666; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3); } 50% { transform: scale(1.1); box-shadow: 0 10px 20px rgba(255, 71, 87, 0.4); } } `;