mic recorder: Add transcription demo

src/components/MicRecorder.stories.svelte

···
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import MicRecorderDemo from "./MicRecorderDemo.svelte";
+  import MicRecorderWhisperDemo from "./MicRecorderWhisperDemo.svelte";
+  import StorySlot from "./StorySlot.svelte";
 
   const { Story } = defineMeta({
     title: "Components/MicRecorder",
-    component: MicRecorderDemo,
+    component: StorySlot,
   });
 </script>
 
 <Story name="MicRecorder">
   <MicRecorderDemo />
 </Story>
+
+<Story name="MicRecorder Whisper">
+  <MicRecorderWhisperDemo />
+</Story>

src/components/MicRecorderWhisperDemo.svelte

···
+<script lang="ts">
+  import Input from "./Input.svelte";
+  import MicRecorder from "./MicRecorder.svelte";
+  import Textarea from "./Textarea.svelte";
+
+  type RecordingCompletePayload = {
+    blob: Blob;
+  };
+
+  let apiKey = $state("");
+  let transcript = $state("");
+  let isTranscribing = $state(false);
+  let errorMessage = $state("");
+  let statusMessage = $state("Record audio to create a transcript.");
+  let activeRequestId = 0;
+
+  function extensionFromMimeType(mimeType: string) {
+    const match = mimeType.match(/audio\/([^;]+)/);
+    return match?.[1] || "webm";
+  }
+
+  async function transcribeAudio(blob: Blob) {
+    const trimmedApiKey = apiKey.trim();
+    if (!trimmedApiKey) {
+      errorMessage = "Enter an API key before recording.";
+      statusMessage = "Missing API key.";
+      return;
+    }
+
+    const requestId = ++activeRequestId;
+    isTranscribing = true;
+    errorMessage = "";
+    statusMessage = "Transcribing with Whisper...";
+
+    try {
+      const extension = extensionFromMimeType(blob.type || "audio/webm");
+      const file = new File([blob], `recording.${extension}`, {
+        type: blob.type || "audio/webm",
+      });
+
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("model", "whisper-1");
+
+      const response = await fetch(
+        "https://api.openai.com/v1/audio/transcriptions",
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${trimmedApiKey}`,
+          },
+          body: formData,
+        },
+      );
+
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        const message =
+          payload && typeof payload === "object" && "error" in payload
+            ? String(
+                (payload as { error?: { message?: string } }).error?.message ||
+                  "",
+              )
+            : "";
+        throw new Error(
+          message || `Transcription request failed (${response.status}).`,
+        );
+      }
+
+      const payload = (await response.json()) as { text?: string };
+      if (requestId !== activeRequestId) return;
+
+      transcript = payload.text?.trim() || "";
+      statusMessage = transcript
+        ? "Transcription complete."
+        : "No text detected.";
+    } catch (error) {
+      if (requestId !== activeRequestId) return;
+      errorMessage =
+        error instanceof Error
+          ? error.message
+          : "Unable to transcribe recording.";
+      statusMessage = "Transcription failed.";
+    } finally {
+      if (requestId === activeRequestId) {
+        isTranscribing = false;
+      }
+    }
+  }
+
+  async function handleRecordingComplete({ blob }: RecordingCompletePayload) {
+    await transcribeAudio(blob);
+  }
+</script>
+
+<div class="w-full max-w-3xl space-y-3">
+  <label class="block text-sm font-base text-slate-900">
+    Whisper API key
+    <Input
+      type="password"
+      autocomplete="off"
+      spellcheck={false}
+      value={apiKey}
+      oninput={(event) => {
+        apiKey = (event.currentTarget as HTMLInputElement).value;
+      }}
+      placeholder="sk-..."
+      class="mt-1 w-full"
+    />
+  </label>
+
+  <Textarea
+    rows={6}
+    value={transcript}
+    oninput={(event) => {
+      transcript = (event.currentTarget as HTMLTextAreaElement).value;
+    }}
+    placeholder="Transcription appears here after recording."
+    class="w-full"
+  />
+
+  <MicRecorder barCount={48} onrecordingcomplete={handleRecordingComplete} />
+
+  <p class="text-sm font-base text-slate-700">
+    {isTranscribing ? "Transcribing..." : statusMessage}
+  </p>
+
+  {#if errorMessage}
+    <p class="text-sm font-base text-red-700">{errorMessage}</p>
+  {/if}
+</div>

src/components/StorySlot.svelte

···
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+{@render children?.()}