OpenAI Realtime Transcription

Transcription

\n Start speaking to see transcription here...\n

Event Logs

\n\n

\n\n \n \n",[],[254,261],[254],{"_104":271,"_95":272,"_156":273,"_158":-5,"_159":138,"_160":256,"_162":163,"_106":274,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":275,"_98":306},"50a3e18a-882f-11f0-9954-0224a6c84d84","routes","01990bce-c638-714e-97a4-1048c460355e",["D",1756839724543],[276,286,296],{"_104":277,"_95":278,"_156":279,"_158":273,"_159":138,"_160":280,"_162":22,"_106":281,"_100":256,"_165":282,"_167":283,"_168":22,"_169":-5,"_170":284,"_98":285},"1a514ed2-8830-11f0-8241-0224a6c84d84","observer.ts","01990bce-c638-714e-97a4-029a75bebd75",6,["D",1756840062935],"script","import { Hono } from \"npm:hono\";\nimport { makeHeaders } from \"./utils.ts\";\n\nconst observer = new Hono();\n\n// POST /observer/:callId : establish websocket to observe transcription events\nobserver.post(\"/:callId\", async (c) => {\n const callId = c.req.param(\"callId\");\n console.log(`📡 Starting observer for transcription call: ${callId}`);\n \n // Connect to OpenAI WebSocket for this call\n const wsUrl = `wss://api.openai.com/v1/realtime?call_id=${callId}`;\n const ws = new WebSocket(wsUrl, {\n headers: makeHeaders(),\n });\n\n ws.onopen = () => {\n console.log(`✅ Observer connected for call: ${callId}`);\n };\n\n ws.onmessage = (event) => {\n try {\n const data = JSON.parse(event.data);\n \n // Log transcription-specific events\n if (data.type === \"conversation.item.input_audio_transcription.delta\") {\n console.log(`📝 Transcription delta [${data.item_id}]: \"${data.delta}\"`);\n } else if (data.type === \"conversation.item.input_audio_transcription.completed\") {\n console.log(`✅ Transcription completed [${data.item_id}]: \"${data.transcript}\"`);\n } else if (data.type === \"input_audio_buffer.committed\") {\n console.log(`🎤 Audio buffer committed [${data.item_id}]`);\n } else if (data.type === \"error\") {\n console.error(`❌ Error: ${data.error?.message || JSON.stringify(data.error)}`);\n }\n \n // Log other important events at debug level\n if (data.type?.startsWith(\"transcription_session\")) {\n console.log(`🔧 Session event: ${data.type}`);\n }\n } catch (e) {\n console.error(\"Failed to parse WebSocket message:\", e);\n }\n };\n\n ws.onerror = (error) => {\n console.error(`❌ WebSocket error for call ${callId}:`, error);\n };\n\n ws.onclose = () => {\n console.log(`👋 Observer disconnected for call: ${callId}`);\n };\n\n // Return immediately (observer runs in background)\n return c.text(\"Observer started\", 200);\n});\n\nexport default observer;",[],[272,278],{"_104":287,"_95":288,"_156":289,"_158":273,"_159":138,"_160":290,"_162":22,"_106":291,"_100":292,"_165":282,"_167":293,"_168":22,"_169":-5,"_170":294,"_98":295},"3ada2d26-8935-11f0-b646-0224a6c84d84","rtc.ts","01990bce-c638-714e-97a4-07196c7003e4",31,["D",1756952216191],2,"import { Hono } from \"npm:hono\";\nimport { makeHeaders, makeTranscriptionSession } from \"./utils.ts\";\n\nconst rtc = new Hono();\n\n// POST /rtc : create a new transcription call\nrtc.post(\"/\", async (c) => {\n // Get transcription configuration from query params\n const model = c.req.query(\"model\") as any || \"gpt-4o-transcribe\";\n const language = c.req.query(\"language\") || \"en\";\n const vad = c.req.query(\"vad\") !== \"false\"; // default true\n const logprobs = c.req.query(\"logprobs\") === \"true\"; // default false\n \n // Create the transcription session config\n const sessionConfig = makeTranscriptionSession({\n model,\n language,\n enableVAD: vad,\n includeLogprobs: logprobs\n });\n\n // Create the transcription session (using Justin's endpoint)\n const url = \"https://api.openai.com/v1/realtime/transcription_sessions\";\n const headers = makeHeaders();\n const fd = new FormData();\n fd.set(\"sdp\", await c.req.text());\n fd.set(\"session\", JSON.stringify(sessionConfig));\n \n const opts = { method: \"POST\", headers, body: fd };\n const resp = await fetch(url, opts);\n \n if (!resp.ok) {\n const errText = await resp.text().catch(() => \"\");\n console.error(`🔴 start transcription call failed: ${resp.status} ${errText}`);\n return c.text(\"Internal error\", 500);\n }\n\n const contentType = resp.headers.get(\"Content-Type\");\n const location = resp.headers.get(\"Location\");\n const callId = location?.split(\"/\").pop();\n console.log(\"✅ transcription call created:\", callId);\n\n // Kick off observer in the background to monitor transcription events\n const selfUrl = new URL(c.req.url);\n fetch(`${selfUrl.origin}/observer/${callId}`, { method: \"POST\" })\n .catch(() => {}); // catch to not crash the process\n\n return c.newResponse(resp.body, {\n headers: { \"Content-Type\": contentType },\n });\n});\n\nexport default rtc;",[],[272,288],{"_104":297,"_95":298,"_156":299,"_158":273,"_159":138,"_160":300,"_162":22,"_106":301,"_100":302,"_165":282,"_167":303,"_168":22,"_169":-5,"_170":304,"_98":305},"3ae73d5e-8935-11f0-a20a-0224a6c84d84","utils.ts","01990bce-c638-714e-97a4-0caf2e9a1c1c",32,["D",1756952216289],9,"const OPENAI_API_KEY = Deno.env.get(\"OPENAI_API_KEY\");\nif (!OPENAI_API_KEY) {\n throw new Error(\"🔴 OpenAI API key not configured\");\n}\n\nexport function makeHeaders(contentType?: string) {\n const obj: Record = {\n Authorization: `Bearer ${OPENAI_API_KEY}`,\n \"openai-beta\": \"realtime-v1\",\n };\n if (contentType) obj[\"Content-Type\"] = contentType;\n return obj;\n}\n\nexport interface TranscriptionConfig {\n model?: \"gpt-4o-transcribe\" | \"gpt-4o-mini-transcribe\" | \"whisper-1\";\n language?: string;\n prompt?: string;\n enableVAD?: boolean;\n noiseReduction?: \"near_field\" | \"far_field\" | null;\n includeLogprobs?: boolean;\n}\n\nexport function makeTranscriptionSession(config: TranscriptionConfig = {}) {\n const {\n model = \"gpt-4o-transcribe\",\n language = \"en\",\n prompt = \"\",\n enableVAD = true,\n noiseReduction = \"near_field\",\n includeLogprobs = false\n } = config;\n\n // Create transcription session config (based on Justin Uberti's working implementation)\n const session: any = {\n input_audio_transcription: {\n model,\n language\n }\n };\n\n // Add prompt if provided\n if (prompt) {\n session.input_audio_transcription.prompt = prompt;\n }\n\n // Configure VAD\n if (enableVAD) {\n session.turn_detection = {\n type: \"server_vad\"\n };\n } else {\n session.turn_detection = null;\n }\n\n return session;\n}\n\nexport function makeSessionUpdateMessage(config: TranscriptionConfig = {}) {\n const {\n model = \"gpt-4o-transcribe\",\n language = \"en\",\n prompt = \"\",\n enableVAD = true,\n noiseReduction = \"near_field\",\n includeLogprobs = false\n } = config;\n\n // Create session update message to enable transcription\n const update: any = {\n type: \"session.update\",\n input_audio_transcription: {\n model,\n prompt,\n language\n }\n };\n\n // Add include for logprobs if requested\n if (includeLogprobs) {\n update.include = [\"item.input_audio_transcription.logprobs\"];\n }\n\n return update;\n}",[],[272,298],[272],{"_104":308,"_95":309,"_156":310,"_158":-5,"_159":138,"_160":256,"_162":163,"_106":311,"_100":32,"_165":178,"_167":312,"_168":22,"_169":-5,"_170":313,"_98":314},"50a3e2c0-882f-11f0-9954-0224a6c84d84",".vtignore","01990bce-c638-714e-97a4-157f5fb8f430",["D",1756839724543],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[309],{"_104":316,"_95":317,"_156":318,"_158":-5,"_159":138,"_160":292,"_162":163,"_106":319,"_100":32,"_165":178,"_167":320,"_168":22,"_169":-5,"_170":321,"_98":322},"1a3463bc-8830-11f0-a44c-0224a6c84d84","CLAUDE.md","1a34648e-8830-11f0-a44c-0224a6c84d84",["D",1756840062786],"# Hello-Transcription - OpenAI Realtime API Transcription Demo\n\n## 🎯 Project Overview\n\nHello-Transcription demonstrates the transcription-only mode of OpenAI's Realtime API. Unlike the conversational mode, this implementation focuses purely on speech-to-text conversion without generating AI responses, making it ideal for subtitles, live captions, meeting transcriptions, and other transcription-focused use cases.\n\n**Created:** September 2, 2025 \n**Platform:** Val Town \n**API:** OpenAI Realtime API (Transcription Mode) \n**Key Feature:** Real-time streaming transcription with multiple model support\n\n## 🏗️ Technical Stack\n\n- **Runtime:** Deno (Val Town platform)\n- **Framework:** Hono (lightweight web framework)\n- **Transcription:** OpenAI Realtime API in transcription mode\n- **Connection:** WebRTC with data channel for events\n- **Frontend:** Vanilla JavaScript with split-view interface\n- **Models:** GPT-4o Transcribe, GPT-4o Mini Transcribe, Whisper-1\n\n## 📁 Project Structure\n\n```\nhello-transcription/\n├── frontend/\n│ └── index.html # Split-view transcription interface\n├── routes/\n│ ├── rtc.ts # WebRTC session setup for transcription\n│ ├── observer.ts # WebSocket observer for transcription events\n│ └── utils.ts # Transcription session configuration\n├── main.tsx # Main entry point\n├── deno.json # Deno configuration\n├── README.md # User documentation\n└── CLAUDE.md # This file - technical documentation\n```\n\n## 🔑 Core Concepts\n\n### Transcription vs Conversation Mode\n\nThe Realtime API supports two distinct modes:\n\n1. **Conversation Mode** (`type: \"realtime\"`):\n - Two-way interaction with AI\n - User speaks → AI responds\n - Used in hello-realtime and hello-mcp\n\n2. **Transcription Mode** (`type: \"transcription\"`):\n - One-way speech-to-text only\n - User speaks → Text output\n - No AI responses generated\n - Lower latency, lower cost\n - This demo uses transcription mode\n\n### Transcription Session Object\n\n```typescript\n{\n type: \"transcription\",\n input_audio_format: \"pcm16\",\n input_audio_transcription: {\n model: \"gpt-4o-transcribe\", // or \"gpt-4o-mini-transcribe\", \"whisper-1\"\n prompt: \"\", // Optional context hint\n language: \"en\" // ISO-639-1 language code\n },\n turn_detection: {\n type: \"server_vad\",\n threshold: 0.5,\n prefix_padding_ms: 300,\n silence_duration_ms: 500\n },\n input_audio_noise_reduction: {\n type: \"near_field\" // or \"far_field\", null\n },\n include: [\"item.input_audio_transcription.logprobs\"] // Optional\n}\n```\n\n## 🛠️ Key Components\n\n### 1. Utils Configuration (`/routes/utils.ts`)\n\nHandles transcription session configuration with sensible defaults:\n\n```typescript\nexport function makeTranscriptionSession(config: TranscriptionConfig = {}) {\n const {\n model = \"gpt-4o-transcribe\",\n language = \"en\",\n prompt = \"\",\n enableVAD = true,\n noiseReduction = \"near_field\",\n includeLogprobs = false\n } = config;\n \n // Build session object...\n}\n```\n\n**Key Configuration Options:**\n- **model**: Transcription model selection\n- **language**: Primary language for better accuracy\n- **prompt**: Context hints (e.g., \"Expect medical terminology\")\n- **enableVAD**: Automatic voice activity detection\n- **noiseReduction**: Audio preprocessing type\n- **includeLogprobs**: Confidence scores for words\n\n### 2. RTC Route Handler (`/routes/rtc.ts`)\n\nCreates WebRTC sessions specifically for transcription:\n\n```typescript\n// Get config from query params\nconst model = c.req.query(\"model\") || \"gpt-4o-transcribe\";\nconst language = c.req.query(\"language\") || \"en\";\nconst vad = c.req.query(\"vad\") !== \"false\";\nconst logprobs = c.req.query(\"logprobs\") === \"true\";\n\n// Create transcription session\nconst sessionConfig = makeTranscriptionSession({\n model,\n language,\n enableVAD: vad,\n includeLogprobs: logprobs\n});\n```\n\n**Important:** Uses `type: \"transcription\"` not `type: \"realtime\"`\n\n### 3. Observer WebSocket (`/routes/observer.ts`)\n\nMonitors transcription events via server-side WebSocket:\n\n```typescript\nws.onmessage = (event) => {\n const data = JSON.parse(event.data);\n \n if (data.type === \"conversation.item.input_audio_transcription.delta\") {\n // Streaming partial transcription\n console.log(`📝 Transcription delta: \"${data.delta}\"`);\n } else if (data.type === \"conversation.item.input_audio_transcription.completed\") {\n // Final transcription for segment\n console.log(`✅ Transcription completed: \"${data.transcript}\"`);\n }\n};\n```\n\n### 4. Frontend Interface (`/frontend/index.html`)\n\nSplit-view interface with real-time transcription display:\n\n#### Left Panel - Transcriptions\n- Shows live transcription stream\n- Partial transcriptions update in real-time\n- Final transcriptions marked with green border\n- Each segment timestamped\n\n#### Right Panel - Event Logs\n- Technical event stream\n- Debug information\n- Connection status\n\n#### Data Channel Handling\n```javascript\ndataChannel.onmessage = (event) => {\n const data = JSON.parse(event.data);\n \n if (data.type === \"conversation.item.input_audio_transcription.delta\") {\n // Update partial transcription\n addTranscript(data.item_id, data.delta, false);\n } else if (data.type === \"conversation.item.input_audio_transcription.completed\") {\n // Mark transcription as final\n addTranscript(data.item_id, data.transcript, true);\n }\n};\n```\n\n## 📊 Model Comparison\n\n### GPT-4o Transcribe\n- **Streaming:** Yes - incremental updates via delta events\n- **Latency:** Low\n- **Accuracy:** High\n- **Use Case:** Live subtitles, real-time captions\n\n### GPT-4o Mini Transcribe\n- **Streaming:** Yes - incremental updates\n- **Latency:** Very low\n- **Accuracy:** Good\n- **Use Case:** Quick transcriptions, lower cost\n\n### Whisper-1\n- **Streaming:** No - complete segments only\n- **Latency:** Higher (waits for complete utterance)\n- **Accuracy:** Very high\n- **Use Case:** High-accuracy transcriptions, post-processing\n\n## 🔄 Event Flow\n\n### Transcription Event Sequence\n\n1. **Audio Input**\n ```\n User speaks → Microphone → WebRTC → OpenAI\n ```\n\n2. **VAD Processing** (if enabled)\n ```\n Voice detected → Buffer audio → Silence detected → Commit buffer\n ```\n\n3. **Transcription Events**\n ```\n input_audio_buffer.committed\n ↓\n conversation.item.input_audio_transcription.delta (streaming models)\n ↓\n conversation.item.input_audio_transcription.completed\n ```\n\n### Event Types\n\n#### Delta Event (Streaming)\n```json\n{\n \"type\": \"conversation.item.input_audio_transcription.delta\",\n \"item_id\": \"item_003\",\n \"content_index\": 0,\n \"delta\": \"Hello, how\"\n}\n```\n\n#### Completed Event\n```json\n{\n \"type\": \"conversation.item.input_audio_transcription.completed\",\n \"item_id\": \"item_003\",\n \"content_index\": 0,\n \"transcript\": \"Hello, how are you today?\"\n}\n```\n\n## ⚙️ Configuration Details\n\n### Voice Activity Detection (VAD)\n\nVAD automatically detects speech segments:\n\n```typescript\nturn_detection: {\n type: \"server_vad\",\n threshold: 0.5, // Sensitivity (0-1)\n prefix_padding_ms: 300, // Audio before speech\n silence_duration_ms: 500 // Silence to end segment\n}\n```\n\n**VAD Disabled:**\n```typescript\nturn_detection: null // Manual control required\n```\n\n### Noise Reduction\n\nThree noise reduction modes:\n\n1. **near_field**: Optimized for close microphones (default)\n2. **far_field**: For distant microphones/speakers\n3. **null**: No noise reduction\n\n### Language Configuration\n\nISO-639-1 language codes improve accuracy:\n- \"en\" - English\n- \"es\" - Spanish \n- \"fr\" - French\n- \"de\" - German\n- \"zh\" - Chinese\n- \"ja\" - Japanese\n\n### Logprobs (Confidence Scores)\n\nWhen enabled, provides word-level confidence:\n\n```typescript\ninclude: [\"item.input_audio_transcription.logprobs\"]\n```\n\nReturns probability scores for each transcribed word, useful for:\n- Highlighting uncertain words\n- Quality assessment\n- Post-processing decisions\n\n## 🧪 Testing Guide\n\n### Local Development\n\n1. **Setup Environment**\n ```bash\n # Create .env file\n echo \"OPENAI_API_KEY=sk-...\" > .env\n \n # Install Deno\n curl -fsSL https://deno.land/install.sh | sh\n ```\n\n2. **Run Development Server**\n ```bash\n # With auto-reload\n deno run --watch --allow-all main.tsx\n \n # Or standard\n deno run --allow-all main.tsx\n ```\n\n3. **Test Transcription**\n - Open http://localhost:8000\n - Select model and language\n - Click \"Start\"\n - Speak clearly\n - Watch transcriptions appear\n\n### Testing Different Models\n\n1. **Test Streaming (GPT-4o)**\n - Select \"GPT-4o Transcribe\"\n - Speak continuously\n - Notice incremental updates\n\n2. **Test Non-Streaming (Whisper-1)**\n - Select \"Whisper-1\"\n - Speak, then pause\n - Notice complete segments only\n\n3. **Test VAD**\n - Enable VAD\n - Speak with pauses\n - Notice automatic segmentation\n\n4. **Test Without VAD**\n - Disable VAD\n - Requires manual commit (not implemented in this demo)\n\n## 🐛 Common Issues & Solutions\n\n### Issue: No transcriptions appearing\n**Solutions:**\n- Check microphone permissions\n- Verify OPENAI_API_KEY is set\n- Check browser console for errors\n- Ensure WebRTC connection established\n\n### Issue: Transcriptions cut off mid-sentence\n**Solutions:**\n- Adjust VAD silence_duration_ms (longer = fewer cuts)\n- Try different VAD threshold\n- Consider using different model\n\n### Issue: Poor transcription accuracy\n**Solutions:**\n- Set correct language parameter\n- Use appropriate noise reduction setting\n- Provide context via prompt parameter\n- Try higher accuracy model (Whisper-1)\n\n### Issue: High latency\n**Solutions:**\n- Use GPT-4o Mini for lower latency\n- Check network connection\n- Consider disabling logprobs\n\n## 📈 Performance Characteristics\n\n### Latency Comparison\n- **GPT-4o Mini**: ~100-200ms first token\n- **GPT-4o**: ~150-250ms first token \n- **Whisper-1**: ~500-1000ms (full segment)\n\n### Throughput\n- Handles real-time audio (16kHz PCM16)\n- Multiple concurrent sessions supported\n- No buffering required for streaming models\n\n### Cost Optimization\n- Transcription-only mode is cheaper than conversation mode\n- No AI inference costs\n- GPT-4o Mini most cost-effective\n- Whisper-1 for batch/accuracy needs\n\n## 🔒 Security Considerations\n\n### Current Implementation\n- API key stored in environment variable\n- No authentication on endpoints\n- No rate limiting\n- Single-tenant design\n\n### Production Recommendations\n1. **Authentication**: Add user authentication\n2. **Rate Limiting**: Implement per-user limits\n3. **CORS**: Configure appropriate origins\n4. **Monitoring**: Track usage and errors\n5. **Encryption**: Ensure HTTPS only\n6. **Token Security**: Use short-lived tokens\n\n## 🚀 Deployment\n\n### Val Town Deployment\n\n1. **Create/Remix Val**\n ```bash\n vt remix emcho/hello-transcription my-transcription\n ```\n\n2. **Set Environment**\n - Add `OPENAI_API_KEY` in Val Town secrets\n\n3. **Deploy**\n ```bash\n vt push\n ```\n\n4. **Access**\n - URL: `https://[your-val-name].val.run`\n\n### Environment Variables\n- `OPENAI_API_KEY` - Required for OpenAI API access\n\n## 📝 Future Enhancements\n\n### Potential Features\n\n1. **Recording & Export**\n - Save transcriptions to file\n - Export as SRT/VTT subtitles\n - Download audio recordings\n\n2. **Advanced Controls**\n - Manual VAD control\n - Custom VAD parameters UI\n - Prompt templates\n\n3. **Multi-Stream**\n - Multiple speaker support\n - Speaker diarization\n - Parallel transcriptions\n\n4. **Post-Processing**\n - Punctuation enhancement\n - Grammar correction\n - Translation\n\n5. **Visualization**\n - Audio waveform display\n - VAD activity indicator\n - Confidence heat map\n\n6. **Integration**\n - Webhook support\n - Real-time API streaming\n - Database storage\n\n## 🔗 References\n\n### Documentation\n- [OpenAI Realtime Transcription Guide](https://platform.openai.com/docs/guides/realtime-transcription)\n- [Realtime API Reference](https://platform.openai.com/docs/api-reference/realtime)\n- [Voice Activity Detection Guide](https://platform.openai.com/docs/guides/realtime-vad)\n- [Val Town Documentation](https://docs.val.town)\n\n### Related Projects\n- [hello-realtime](https://hello-realtime.val.run) - Conversation mode demo\n- [hello-mcp](https://github.com/hello-mcp) - MCP tool execution demo\n\n### Key Differences from Conversation Mode\n1. Session type: `transcription` vs `realtime`\n2. No AI responses generated\n3. Different event types\n4. Lower latency and cost\n5. Focused on speech-to-text only\n\n## 💡 Implementation Notes\n\n### Critical Discoveries\n1. **Session Type**: Must use `type: \"transcription\"` not `type: \"realtime\"`\n2. **Event Names**: Different from conversation mode events\n3. **Model Behavior**: Whisper doesn't stream, GPT-4o models do\n4. **VAD Impact**: Significantly affects transcription segmentation\n5. **Language Setting**: Dramatically improves accuracy for non-English\n\n### Best Practices\n1. Always specify language for non-English content\n2. Use near_field noise reduction for headset mics\n3. Enable VAD for natural speech segmentation\n4. Choose model based on latency vs accuracy needs\n5. Monitor item_id for proper segment ordering\n\n## 🎯 Summary\n\nHello-Transcription successfully demonstrates the transcription-only capabilities of OpenAI's Realtime API. Key achievements:\n\n1. **Pure Transcription**: No AI responses, focused solely on speech-to-text\n2. **Model Flexibility**: Support for three different transcription models\n3. **Real-time Streaming**: Live transcription updates for supported models\n4. **Configuration Options**: VAD, noise reduction, language, logprobs\n5. **Clean Interface**: Split-view design for transcriptions and logs\n\nThis implementation serves as a foundation for building transcription-focused applications like live captioning, meeting transcription, subtitle generation, and accessibility tools.",[],[317],{"_104":324,"_95":325,"_156":326,"_158":-5,"_159":138,"_160":327,"_162":163,"_106":328,"_100":256,"_165":178,"_167":329,"_168":22,"_169":-5,"_170":330,"_98":331},"1a739988-8830-11f0-a821-0224a6c84d84","README.md","01990bce-c638-714e-97a4-1a67f3821e53",10,["D",1756840062842],"# hello-transcription\n\nReal-time speech transcription using OpenAI's Realtime API - a demonstration of transcription-only mode without AI responses.\n\n## Features\n\n- **Real-time Transcription**: Live speech-to-text conversion as you speak\n- **Multiple Models**: Choose between GPT-4o Transcribe, GPT-4o Mini Transcribe, or Whisper-1\n- **Language Support**: Transcribe in multiple languages (English, Spanish, French, German, Italian, Portuguese, Chinese, Japanese, Korean)\n- **Voice Activity Detection (VAD)**: Automatic detection of speech segments\n- **Logprobs Support**: Optional confidence scores for transcriptions\n- **Split View**: See transcriptions and event logs side-by-side\n\n## How It Works\n\nThis app uses OpenAI's Realtime API in transcription-only mode:\n1. Your voice is captured via WebRTC\n2. Audio is streamed to OpenAI's transcription service\n3. Transcriptions are returned in real-time\n4. No AI responses are generated (transcription only)\n\n## Model Differences\n\n- **GPT-4o Transcribe**: Streaming transcription with incremental updates\n- **GPT-4o Mini Transcribe**: Smaller model, streaming transcription \n- **Whisper-1**: Complete transcription after each speech segment (no streaming)\n\n## Configuration Options\n\n- **Model**: Select the transcription model\n- **Language**: Choose the primary language for better accuracy\n- **VAD**: Enable/disable automatic voice activity detection\n- **Logprobs**: Include confidence scores (for advanced use)\n\n## Usage\n\n1. Click \"Start\" to begin transcription\n2. Allow microphone access when prompted\n3. Start speaking - transcriptions appear in real-time\n4. Partial transcriptions update as you speak\n5. Final transcriptions are marked in green\n6. Click \"Stop\" to end the session\n\n## API Endpoints\n\n- `GET /` - Serves the transcription interface\n- `POST /rtc` - Creates a WebRTC transcription session\n- `POST /observer/:callId` - WebSocket observer for transcription events\n\n## Environment Variables\n\nSet in your Val Town environment:\n- `OPENAI_API_KEY` - Your OpenAI API key (required)\n\n## Local Development\n\n```bash\n# Install Deno\ncurl -fsSL https://deno.land/install.sh | sh\n\n# Run locally\ndeno run --allow-all main.tsx\n```\n\n## Val Town Deployment\n\n1. Fork/remix this val on Val Town\n2. Add your `OPENAI_API_KEY` to Val Town secrets\n3. Your app will be available at `https://[your-val-name].val.run`\n\n## Technical Details\n\nThe app uses OpenAI's Realtime API in transcription mode:\n- Session type: `transcription` (not `realtime`)\n- Audio format: PCM16\n- Noise reduction: Near-field (optimized for close microphones)\n- WebRTC data channel for receiving transcription events\n\n## Event Flow\n\n1. `input_audio_buffer.committed` - Audio chunk received\n2. `conversation.item.input_audio_transcription.delta` - Partial transcription\n3. `conversation.item.input_audio_transcription.completed` - Final transcription\n\n## Credits\n\nBuilt with OpenAI's Realtime API for transcription-only use cases.",[],[325],{"_104":333,"_95":334,"_156":335,"_158":-5,"_159":138,"_160":256,"_162":163,"_106":336,"_100":32,"_165":178,"_167":337,"_168":22,"_169":-5,"_170":338,"_98":339},"50a3ea9a-882f-11f0-9954-0224a6c84d84","deno.json","01990bce-c638-714e-97a4-1fa9e6167c76",["D",1756839724543],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[334],{"_104":341,"_95":342,"_156":343,"_158":-5,"_159":138,"_160":344,"_162":22,"_106":345,"_100":256,"_165":346,"_167":347,"_168":22,"_169":-5,"_170":348,"_98":349},"1a3cd812-8830-11f0-8b63-0224a6c84d84","main.tsx","01990bce-c638-714e-97a4-20de8c449fb9",3,["D",1756840062830],"http","import { Hono } from \"npm:hono\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport rtc from \"./routes/rtc.ts\";\nimport observer from \"./routes/observer.ts\";\n\nconst SOURCE_URL = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\"))?.links?.self?.val || \"#\";\n\nconst app = new Hono();\napp.route(\"/rtc\", rtc);\napp.route(\"/observer\", observer);\napp.get(\"/source\", (c) => c.redirect(SOURCE_URL));\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;",[],[342],"files",[153,172,183,190,197,206,215,224,233,242,252,259,270,276,286,296,307,315,323,332,340],"counts",{"_354":32,"_355":256,"_356":256,"_357":256},"pulls","branches","forks","envVars","contents",[360,363,366,369,372,375],{"_104":198,"_95":199,"_156":200,"_158":193,"_159":138,"_160":201,"_162":163,"_106":361,"_100":32,"_165":178,"_167":203,"_168":22,"_169":-5,"_98":362},["D",1756952215183],[185,192,199],{"_104":207,"_95":208,"_156":209,"_158":193,"_159":138,"_160":210,"_162":163,"_106":364,"_100":32,"_165":178,"_167":212,"_168":22,"_169":-5,"_98":365},["D",1756952213233],[185,192,208],{"_104":216,"_95":217,"_156":218,"_158":193,"_159":138,"_160":219,"_162":163,"_106":367,"_100":32,"_165":178,"_167":221,"_168":22,"_169":-5,"_98":368},["D",1756952213152],[185,192,217],{"_104":225,"_95":226,"_156":227,"_158":193,"_159":138,"_160":228,"_162":163,"_106":370,"_100":32,"_165":178,"_167":230,"_168":22,"_169":-5,"_98":371},["D",1756952213879],[185,192,226],{"_104":234,"_95":235,"_156":236,"_158":193,"_159":138,"_160":237,"_162":163,"_106":373,"_100":32,"_165":178,"_167":239,"_168":22,"_169":-5,"_98":374},["D",1756952214731],[185,192,235],{"_104":243,"_95":244,"_156":245,"_158":193,"_159":138,"_160":101,"_162":163,"_106":376,"_100":32,"_165":178,"_167":247,"_168":22,"_169":-5,"_98":377},["D",1756952213122],[185,192,244],{"_104":191,"_159":138,"_156":193,"_95":192,"_167":-5,"_165":166,"_100":32,"_158":186,"_106":379,"_160":194,"_169":-5,"_98":380},["D",1756952212978],[185,192],"upstreamProject",{"_104":146,"_95":383,"_112":-5,"_113":-5,"_110":111,"_23":384},"hello-mcp",{"_93":94,"_130":131},"upstreamBranch",{"_104":141,"_106":387,"_388":389,"_95":43,"_139":146,"_100":194,"_140":390,"_142":391,"_392":393,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":383},["D",1756812644593],"updatedAt",["D",1757114821629],"be33420e-792a-11f0-bfa3-0224a6c84d84",197,"lockfileKey","1757114823817-esm.town_v_emcho_hello-mcp@23-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":400,"_151":405,"_350":469,"_178":470,"_358":473,"_486":487,"_490":163,"_491":-5,"_492":493,"_494":495,"_496":497},{"_104":105,"_95":96,"_106":401,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":402,"_132":403,"_135":404,"_150":22},["D",1756839724543],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":141,"_142":143,"_144":111,"_145":146,"_147":119,"_148":96,"_149":94},[406,412,436,442,454,457,460,463,466],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":138,"_160":161,"_162":163,"_106":164,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":407,"_98":411},[408],{"_104":173,"_95":174,"_156":175,"_158":157,"_159":138,"_160":176,"_162":163,"_106":177,"_100":32,"_165":178,"_167":179,"_168":22,"_169":-5,"_170":409,"_98":410},[],[155,174],[155],{"_104":184,"_95":185,"_156":186,"_158":-5,"_159":138,"_160":187,"_162":163,"_106":188,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":413,"_98":435},[414],{"_104":191,"_95":192,"_156":193,"_158":186,"_159":138,"_160":194,"_162":163,"_106":195,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":415,"_98":434},[416,419,422,425,428,431],{"_104":198,"_95":199,"_156":200,"_158":193,"_159":138,"_160":201,"_162":163,"_106":202,"_100":32,"_165":178,"_167":203,"_168":22,"_169":-5,"_170":417,"_98":418},[],[185,192,199],{"_104":207,"_95":208,"_156":209,"_158":193,"_159":138,"_160":210,"_162":163,"_106":211,"_100":32,"_165":178,"_167":212,"_168":22,"_169":-5,"_170":420,"_98":421},[],[185,192,208],{"_104":216,"_95":217,"_156":218,"_158":193,"_159":138,"_160":219,"_162":163,"_106":220,"_100":32,"_165":178,"_167":221,"_168":22,"_169":-5,"_170":423,"_98":424},[],[185,192,217],{"_104":225,"_95":226,"_156":227,"_158":193,"_159":138,"_160":228,"_162":163,"_106":229,"_100":32,"_165":178,"_167":230,"_168":22,"_169":-5,"_170":426,"_98":427},[],[185,192,226],{"_104":234,"_95":235,"_156":236,"_158":193,"_159":138,"_160":237,"_162":163,"_106":238,"_100":32,"_165":178,"_167":239,"_168":22,"_169":-5,"_170":429,"_98":430},[],[185,192,235],{"_104":243,"_95":244,"_156":245,"_158":193,"_159":138,"_160":101,"_162":163,"_106":246,"_100":32,"_165":178,"_167":247,"_168":22,"_169":-5,"_170":432,"_98":433},[],[185,192,244],[185,192],[185],{"_104":253,"_95":254,"_156":255,"_158":-5,"_159":138,"_160":256,"_162":163,"_106":257,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":437,"_98":441},[438],{"_104":260,"_95":261,"_156":262,"_158":255,"_159":138,"_160":263,"_162":22,"_106":264,"_100":265,"_165":178,"_167":266,"_168":22,"_169":-5,"_170":439,"_98":440},[],[254,261],[254],{"_104":271,"_95":272,"_156":273,"_158":-5,"_159":138,"_160":256,"_162":163,"_106":274,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":443,"_98":453},[444,447,450],{"_104":277,"_95":278,"_156":279,"_158":273,"_159":138,"_160":280,"_162":22,"_106":281,"_100":256,"_165":282,"_167":283,"_168":22,"_169":-5,"_170":445,"_98":446},[],[272,278],{"_104":287,"_95":288,"_156":289,"_158":273,"_159":138,"_160":290,"_162":22,"_106":291,"_100":292,"_165":282,"_167":293,"_168":22,"_169":-5,"_170":448,"_98":449},[],[272,288],{"_104":297,"_95":298,"_156":299,"_158":273,"_159":138,"_160":300,"_162":22,"_106":301,"_100":302,"_165":282,"_167":303,"_168":22,"_169":-5,"_170":451,"_98":452},[],[272,298],[272],{"_104":308,"_95":309,"_156":310,"_158":-5,"_159":138,"_160":256,"_162":163,"_106":311,"_100":32,"_165":178,"_167":312,"_168":22,"_169":-5,"_170":455,"_98":456},[],[309],{"_104":316,"_95":317,"_156":318,"_158":-5,"_159":138,"_160":292,"_162":163,"_106":319,"_100":32,"_165":178,"_167":320,"_168":22,"_169":-5,"_170":458,"_98":459},[],[317],{"_104":324,"_95":325,"_156":326,"_158":-5,"_159":138,"_160":327,"_162":163,"_106":328,"_100":256,"_165":178,"_167":329,"_168":22,"_169":-5,"_170":461,"_98":462},[],[325],{"_104":333,"_95":334,"_156":335,"_158":-5,"_159":138,"_160":256,"_162":163,"_106":336,"_100":32,"_165":178,"_167":337,"_168":22,"_169":-5,"_170":464,"_98":465},[],[334],{"_104":341,"_95":342,"_156":343,"_158":-5,"_159":138,"_160":344,"_162":22,"_106":345,"_100":256,"_165":346,"_167":347,"_168":22,"_169":-5,"_170":467,"_98":468},[],[342],[406,408,412,414,416,419,422,425,428,431,436,438,442,444,447,450,454,457,460,463,466],{"_104":191,"_159":138,"_156":193,"_95":192,"_167":-5,"_165":166,"_100":32,"_158":186,"_106":471,"_160":194,"_169":-5,"_98":472},["D",1756952212978],[185,192],[474,476,478,480,482,484],{"_104":198,"_95":199,"_156":200,"_158":193,"_159":138,"_160":201,"_162":163,"_106":361,"_100":32,"_165":178,"_167":203,"_168":22,"_169":-5,"_98":475},[185,192,199],{"_104":207,"_95":208,"_156":209,"_158":193,"_159":138,"_160":210,"_162":163,"_106":364,"_100":32,"_165":178,"_167":212,"_168":22,"_169":-5,"_98":477},[185,192,208],{"_104":216,"_95":217,"_156":218,"_158":193,"_159":138,"_160":219,"_162":163,"_106":367,"_100":32,"_165":178,"_167":221,"_168":22,"_169":-5,"_98":479},[185,192,217],{"_104":225,"_95":226,"_156":227,"_158":193,"_159":138,"_160":228,"_162":163,"_106":370,"_100":32,"_165":178,"_167":230,"_168":22,"_169":-5,"_98":481},[185,192,226],{"_104":234,"_95":235,"_156":236,"_158":193,"_159":138,"_160":237,"_162":163,"_106":373,"_100":32,"_165":178,"_167":239,"_168":22,"_169":-5,"_98":483},[185,192,235],{"_104":243,"_95":244,"_156":245,"_158":193,"_159":138,"_160":101,"_162":163,"_106":376,"_100":32,"_165":178,"_167":247,"_168":22,"_169":-5,"_98":485},[185,192,244],"upstream",{"_104":141,"_106":488,"_388":489,"_95":43,"_139":146,"_100":194,"_140":390,"_142":391,"_392":393,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":383},["D",1756812644593],["D",1757114821629],"showCompareCallout","pull","ahead",44,"behind",8,"templates",[],"actionData","errors"]