import { useTranscribe } from '@localmode/react';
import { transformers } from '@localmode/transformers';

const model = transformers.speechToText('onnx-community/whisper-tiny.en');

function Demo() {
  const { data, isLoading, execute } = useTranscribe({ model, returnTimestamps: true });

  const handleFile = (file: File) => execute(file);

  return (
    <div>
      <input type="file" accept="audio/*" onChange={(e) => {
        if (e.target.files?.[0]) handleFile(e.target.files[0]);
      }} />
      {isLoading && <p>Transcribing...</p>}
      {data && <p>{data.text}</p>}
      {data?.segments?.map((seg, i) => (
        <p key={i}>[{seg.start}s] {seg.text}</p>
      ))}
    </div>
  );
}

const whisper = transformers.speechToText('Xenova/whisper-tiny'); // multilingual
const { execute } = useTranscribe({ model: whisper });

await execute(audioBlob, { language: 'fr', task: 'translate' });

import { useSynthesizeSpeech } from '@localmode/react';

const { data, isLoading, execute } = useSynthesizeSpeech({ model, voice: 'af_heart' });

await execute('Hello world');                                 // uses af_heart
await execute('Bonjour', { voice: 'bf_emma', speed: 1.2 });   // per-call override
// data.audio = Float32Array, data.sampleRate = 16000

import { useStreamSpeech } from '@localmode/react';

function Speaker({ reply }: { reply: string }) {
  const { speak, pause, resume, stop, reset, isSynthesizing, isPlaying, currentClause, clauses, error } =
    useStreamSpeech({ model, voice: 'af_heart' });

  return (
    <div>
      <button onClick={() => speak(reply)}>Speak</button>
      <button onClick={isPlaying ? pause : resume}>{isPlaying ? 'Pause' : 'Resume'}</button>
      <button onClick={stop}>Stop</button>
      {currentClause && <p>Now playing: {currentClause.text}</p>}
    </div>
  );
}

import { useLiveTranscribe } from '@localmode/react';
import { transformers } from '@localmode/transformers';

function PushToTalk() {
  const { state, currentUtterance, utterances, lastBargeIn, start, stop, clearUtterances } =
    useLiveTranscribe({
      model: transformers.speechToText('onnx-community/moonshine-tiny-ONNX'),
      mode: 'push-to-talk',
      onBargeIn: () => stopPlayback(), // user spoke over external playback
    });

  return (
    <>
      <button onMouseDown={start} onMouseUp={stop}>Hold to talk</button>
      {state === 'listening' && <p>{currentUtterance}</p>}
      <ul>{utterances.map((u) => <li key={u.utteranceId}>{u.text}</li>)}</ul>
      <button onClick={clearUtterances}>Clear transcript</button>
    </>
  );
}

import { useTurnTaker } from '@localmode/react';

function VoiceAssistant() {
  const turn = useTurnTaker({ transcriber, planner, voice, systemPrompt: 'Be concise.' });

  return (
    <>
      <button onClick={turn.start}>
        {turn.isListening ? 'Listening…' : turn.isSpeaking ? 'Speaking…' : 'Start'}
      </button>
      <button onClick={turn.interrupt}>Interrupt</button>
      <ul>{turn.turns.map((t, i) => <li key={i}>{t.role}: {t.text}</li>)}</ul>
    </>
  );
}