transcriber-01

1"use client"
2 
3import { Fragment, useCallback, useEffect, useRef, useState } from "react"
4import { Copy } from "lucide-react"
5import { Streamdown } from "streamdown"
6 
7import { cn } from "@/lib/utils"
8import {
9  transcribeAudio,
10  type TranscriptionResult,
11} from "@/app/transcriber-01/actions/transcribe"
12import { Button } from "@/components/ui/button"
13import { Card } from "@/components/ui/card"
14import { LiveWaveform } from "@/components/ui/live-waveform"
15import { ScrollArea } from "@/components/ui/scroll-area"
16import { Separator } from "@/components/ui/separator"
17 
18interface RecordingState {
19  isRecording: boolean
20  isProcessing: boolean
21  transcript: string
22  error: string
23  transcriptionTime?: number
24}
25 
26export default function Transcriber01() {
27  const [recording, setRecording] = useState<RecordingState>({
28    isRecording: false,
29    isProcessing: false,
30    transcript: "",
31    error: "",
32  })
33 
34  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
35  const audioChunksRef = useRef<Blob[]>([])
36  const streamRef = useRef<MediaStream | null>(null)
37 
38  const updateRecording = useCallback((updates: Partial<RecordingState>) => {
39    setRecording((prev) => ({ ...prev, ...updates }))
40  }, [])
41 
42  const cleanupStream = useCallback(() => {
43    if (streamRef.current) {
44      streamRef.current.getTracks().forEach((track) => track.stop())
45      streamRef.current = null
46    }
47  }, [])
48 
49  const stopRecording = useCallback(() => {
50    if (mediaRecorderRef.current?.state !== "inactive") {
51      mediaRecorderRef.current?.stop()
52    }
53    cleanupStream()
54    updateRecording({ isRecording: false })
55  }, [cleanupStream, updateRecording])
56 
57  const processAudio = useCallback(
58    async (audioBlob: Blob) => {
59      updateRecording({ isProcessing: true, error: "" })
60 
61      try {
62        const result: TranscriptionResult = await transcribeAudio({
63          audio: new File([audioBlob], "recording.webm", {
64            type: "audio/webm",
65          }),
66        })
67 
68        if (result.error) {
69          throw new Error(result.error)
70        }
71 
72        updateRecording({
73          transcript: result.text || "",
74          transcriptionTime: result.transcriptionTime,
75          isProcessing: false,
76        })
77      } catch (err) {
78        console.error("Transcription error:", err)
79        updateRecording({
80          error:
81            err instanceof Error ? err.message : "Failed to transcribe audio",
82          isProcessing: false,
83        })
84      }
85    },
86    [updateRecording]
87  )
88 
89// … truncated