📝 OpenAI Realtime Transcription

\n Transcribe audio in real-time using OpenAI's Realtime API. \n View source\n

\n\n

\n Model\n \n

\n \n

\n Language\n \n

\n \n

\n VAD\n \n

\n \n

\n \n \n \n

\n\n \n\n \n\n",[18,68],"pulls","branches","forks","envVars",{"_178":40,"_180":26},"connections",{"_178":26,"_179":26},"count","unfilledCount","emptyCount",{"_33":159,"_13":18,"_66":74,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":251,"_39":26,"_69":75,"_163":-5,"_70":30,"_164":-5,"_196":252,"_17":253},{"_33":167,"_13":68,"_66":67,"_43":74,"_35":36,"_160":40,"_161":24,"_37":248,"_39":26,"_69":21,"_163":169,"_70":30,"_164":-5,"_196":249,"_17":250},{"_33":244,"_13":236,"_66":230,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":245,"_39":26,"_69":75,"_163":-5,"_70":30,"_164":-5,"_196":246,"_17":247},{"_33":237,"_13":238,"_66":239,"_43":230,"_35":36,"_160":40,"_161":24,"_37":240,"_39":26,"_69":232,"_163":241,"_70":30,"_164":-5,"_196":242,"_17":243},{"_33":227,"_13":228,"_66":229,"_43":230,"_35":36,"_160":40,"_161":24,"_37":231,"_39":26,"_69":232,"_163":233,"_70":30,"_164":-5,"_196":234,"_17":235},{"_33":220,"_13":221,"_66":222,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":223,"_39":26,"_69":21,"_163":224,"_70":30,"_164":-5,"_196":225,"_17":226},{"_33":213,"_13":214,"_66":215,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":216,"_39":26,"_69":21,"_163":217,"_70":30,"_164":-5,"_196":218,"_17":219},{"_33":206,"_13":207,"_66":208,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":209,"_39":26,"_69":21,"_163":210,"_70":30,"_164":-5,"_196":211,"_17":212},{"_33":199,"_13":200,"_66":201,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":202,"_39":26,"_69":21,"_163":203,"_70":30,"_164":-5,"_196":204,"_17":205},{"_33":191,"_13":192,"_66":86,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":193,"_39":26,"_69":194,"_163":195,"_70":30,"_164":-5,"_196":197,"_17":198},"5118745e-9fcd-11f0-8809-0224a6c84d84","main.tsx",["D",1759436462524],"http","import { Hono } from \"npm:hono\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport rtc from \"./routes/rtc.ts\";\n\nconst SOURCE_URL = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\"))?.links?.self?.val || \"#\";\n\nconst app = new Hono();\napp.route(\"/rtc\", rtc);\napp.get(\"/source\", (c) => c.redirect(SOURCE_URL));\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;","children",[],[192],"511872a6-9fcd-11f0-8809-0224a6c84d84","deno.json","0199a695-da0e-72eb-9acc-fb6ea54e3ef6",["D",1759436462524],"{\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}",[],[200],"51186f5e-9fcd-11f0-8809-0224a6c84d84","README.md","0199a695-da0e-72eb-9acc-f486031259ff",["D",1759436462524],"# 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.",[],[207],"51186888-9fcd-11f0-8809-0224a6c84d84",".vtignore","0199a695-da0e-72eb-9acc-f2ed9456d97f",["D",1759436462524],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[214],"51186784-9fcd-11f0-8809-0224a6c84d84",".gitattributes","0199a695-da0e-72eb-9acc-ee091535a4f6",["D",1759436462524],"# Auto detect text files and perform LF normalization\n* text=auto\n",[],[221],"51186450-9fcd-11f0-8809-0224a6c84d84","utils.ts","0199a695-da0e-72eb-9acc-e62e54bd5e9d","0199a695-da0e-72eb-9acc-ebfb2b332449",["D",1759436462524],"script","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 };\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 enableVAD?: boolean;\n}\n\nexport function makeTranscriptionSession(config: TranscriptionConfig = {}) {\n const {\n model = \"gpt-4o-transcribe\",\n language = \"en\",\n enableVAD = true,\n } = config;\n\n // Create transcription session config (based on Justin Uberti's working implementation)\n return {\n type: \"transcription\",\n audio: {\n input: {\n transcription: { model, language },\n turn_detection: enableVAD ? { type: \"server_vad\" } : null,\n },\n },\n };\n}",[],[236,228],"routes","51186252-9fcd-11f0-8809-0224a6c84d84","rtc.ts","0199a695-da0e-72eb-9acc-e02bb7da6565",["D",1759436462524],"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 sessionConfig = makeTranscriptionSession({\n model: c.req.query(\"model\") as any || \"gpt-4o-transcribe\",\n language: c.req.query(\"language\") || \"en\",\n enableVAD: c.req.query(\"vad\") !== \"false\",\n });\n\n const realtimeUrl = \"https://api.openai.com/v1/realtime/calls\";\n const formData = new FormData();\n formData.set(\"sdp\", await c.req.text());\n formData.set(\"session\", JSON.stringify(sessionConfig));\n const sdpResp = await fetch(realtimeUrl, {\n method: \"POST\",\n headers: makeHeaders(),\n body: formData,\n });\n\n if (!sdpResp.ok) {\n const errText = await sdpResp.text().catch(() => \"\");\n console.error(\n `🔴 Failed to establish WebRTC connection: ${sdpResp.status} ${errText}`,\n );\n return c.text(\"Internal error\", 500);\n }\n\n return c.newResponse(sdpResp.body, {\n headers: { \"Content-Type\": sdpResp.headers.get(\"Content-Type\") },\n });\n});\n\nexport default rtc;",[],[236,238],"51186644-9fcd-11f0-8809-0224a6c84d84",["D",1759436462524],[184,185],[236],["D",1759436462524],[],[18,68],["D",1759436462524],[182],[18],["D",1759436462524],{"_11":12,"_125":73},{"_11":12,"_121":-5,"_72":73,"_31":71,"_122":123,"_124":30},{"_39":40,"_13":16,"_33":36,"_110":77,"_111":63,"_112":113,"_114":81,"_115":116,"_117":118,"_119":14,"_120":12},"ctx",{"_52":-5,"_146":291,"_292":293,"_294":295,"_296":30,"_297":30,"_298":30,"_299":24,"_300":-5,"_301":-7,"_302":-7,"_303":26,"_304":30,"_305":30,"_306":-5,"_307":30,"_308":30,"_309":30,"_310":-5},"ENV",{"_262":263,"_264":265,"_266":16,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend