Basic Transcription

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import { initWhisper } from 'whisper.rn';
import type { WhisperContext } from 'whisper.rn';

const sampleFile = require('../assets/jfk.wav');

export default function BasicTranscription() {
  const contextRef = useRef<WhisperContext | null>(null);
  const [logs, setLogs] = useState<string[]>([]);
  const [result, setResult] = useState<string | null>(null);
  const [stopTranscribe, setStopTranscribe] = useState<{ stop: () => void } | null>(null);

  const log = useCallback((...messages: any[]) => {
    setLogs((prev) => [...prev, messages.join(' ')]);
  }, []);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      contextRef.current?.release();
    };
  }, []);

  const initialize = async () => {
    if (contextRef.current) {
      await contextRef.current.release();
      log('Released previous context');
    }

    log('Initializing context...');
    const startTime = Date.now();
    const ctx = await initWhisper({
      filePath: require('../assets/ggml-base.bin'),
    });
    const endTime = Date.now();
    
    log(`Loaded model in ${endTime - startTime}ms`);
    contextRef.current = ctx;
  };

  const transcribe = async () => {
    if (!contextRef.current) {
      log('Context not initialized');
      return;
    }

    log('Starting transcription...');
    const startTime = Date.now();
    
    const { stop, promise } = contextRef.current.transcribe(sampleFile, {
      language: 'en',
      maxLen: 1,
      tokenTimestamps: true,
      onProgress: (progress) => {
        log(`Progress: ${progress}%`);
      },
    });

    setStopTranscribe({ stop });
    const { result, segments } = await promise;
    const endTime = Date.now();
    
    setStopTranscribe(null);
    setResult(
      `Result: ${result}\n` +
      `Time: ${endTime - startTime}ms\n\n` +
      `Segments:\n${segments.map((s) => 
        `[${s.t0} --> ${s.t1}] ${s.text}`
      ).join('\n')}`
    );
    log('Transcription complete');
  };

  return (
    <ScrollView style={{ padding: 20 }}>
      <Button title="Initialize" onPress={initialize} />
      <Button 
        title="Transcribe" 
        onPress={transcribe}
        disabled={!contextRef.current || !!stopTranscribe}
      />
      {stopTranscribe && (
        <Button title="Stop" onPress={() => stopTranscribe.stop()} />
      )}
      
      <View style={{ marginTop: 20 }}>
        <Text>Logs:</Text>
        {logs.map((log, i) => (
          <Text key={i}>{log}</Text>
        ))}
      </View>

      {result && (
        <View style={{ marginTop: 20 }}>
          <Text>Result:</Text>
          <Text>{result}</Text>
        </View>
      )}
    </ScrollView>
  );
}