/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { DragEvent, useRef, useState } from "https://esm.sh/react@18.2.0"; function App() { const [transcription, setTranscription] = useState(""); const [isDragOver, setIsDragOver] = useState(false); const [uploadedFile, setUploadedFile] = useState(null); const [isTranscribing, setIsTranscribing] = useState(false); const [buttonColor, setButtonColor] = useState("#3498db"); const fileInputRef = useRef(null); const handleDragOver = (e: DragEvent) => { e.preventDefault(); setIsDragOver(true); }; const handleDragLeave = () => { setIsDragOver(false); }; const handleDrop = async (e: DragEvent) => { e.preventDefault(); setIsDragOver(false); const files = e.dataTransfer?.files; if (files && files.length > 0) { handleFileUpload(files[0]); } }; const handleFileSelect = async (e: React.ChangeEvent) => { const files = e.target.files; if (files && files.length > 0) { handleFileUpload(files[0]); } }; const handleFileUpload = (file: File) => { if (!file.name.toLowerCase().endsWith(".ogg")) { alert("Please upload an .ogg audio file"); return; } setUploadedFile(file); setTranscription(""); // Reset transcription when new file is uploaded // Animate button color setButtonColor("#2ecc71"); setTimeout(() => { setButtonColor("#3498db"); }, 500); }; const removeFile = () => { setUploadedFile(null); setTranscription(""); // Reset file input if (fileInputRef.current) { fileInputRef.current.value = ""; } }; const processFile = async () => { if (!uploadedFile) return; setIsTranscribing(true); const formData = new FormData(); formData.append("audio", uploadedFile); try { const response = await fetch("/transcribe", { method: "POST", body: formData, }); if (!response.ok) { throw new Error("Transcription failed"); } const result = await response.text(); setTranscription(result); } catch (error) { console.error("Error:", error); alert("Transcription failed"); } finally { setIsTranscribing(false); } }; return (

Audio Transcription

{/* Instructions Section */}

✍️ How to Use

To use this Val, first fork this Val , then go to your account settings and add an OPENAI_API_KEY environment variable.
To save an audio message from Telegram desktop:
1. Right-click on the audio message
2. Select "Save As..."
3. It will be saved in .ogg format

or drag and drop an .ogg file here

{uploadedFile && (

✅ {uploadedFile.name} ✕

)}

{uploadedFile && ( )} {transcription && (

Transcription:

            {transcription}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/transcribe") { try { const formData = await request.formData(); const audioFile = formData.get("audio") as File; if (!audioFile) { return new Response("No file uploaded", { status: 400 }); } const { OpenAI } = await import("npm:openai"); const openai = new OpenAI({ apiKey: Deno.env.get("OPENAI_API_KEY") }); const arrayBuffer = await audioFile.arrayBuffer(); const transcription = await openai.audio.transcriptions.create({ file: new File([arrayBuffer], audioFile.name, { type: audioFile.type }), model: "whisper-1", }); return new Response(transcription.text, { headers: { "Content-Type": "text/plain" }, }); } catch (error) { console.error("Transcription error:", error); return new Response(`Transcription failed: ${error.message}`, { status: 500 }); } } return new Response( ` Audio Transcription

`, { headers: { "Content-Type": "text/html" }, }, ); }

artem