Chat Transcription

STT-вывод с сегментами по timestamp и click-to-seek подсветкой текущего слова.

Воспроизведение: 0.0 с

"use client";

import { useEffect, useState } from "react";
import {
  ChatTranscription,
  type ChatTranscriptionSegment,
} from "@/components/ui/chat-transcription";

const segments: ChatTranscriptionSegment[] = [
  { text: "Привет!", startSecond: 0, endSecond: 0.6 },
  { text: "Я", startSecond: 0.7, endSecond: 0.9 },
  { text: "помогу", startSecond: 1.0, endSecond: 1.4 },
  { text: "тебе", startSecond: 1.5, endSecond: 1.8 },
  { text: "разобраться", startSecond: 1.9, endSecond: 2.6 },
  { text: "с", startSecond: 2.7, endSecond: 2.9 },
  { text: "Cache", startSecond: 3.0, endSecond: 3.4 },
  { text: "Components", startSecond: 3.5, endSecond: 4.2 },
  { text: "в", startSecond: 4.3, endSecond: 4.5 },
  { text: "Next.js", startSecond: 4.6, endSecond: 5.2 },
  { text: "16.", startSecond: 5.3, endSecond: 5.7 },
];

export default function Particle() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setTime((t) => (t > 6 ? 0 : t + 0.1));
    }, 100);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3 p-4">
      <p className="text-muted-foreground text-xs uppercase tracking-wide">
        Воспроизведение: {time.toFixed(1)} с
      </p>
      <ChatTranscription
        currentTime={time}
        onSeek={setTime}
        segments={segments}
      />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-transcription

Использование

import {
  ChatTranscription,
  type ChatTranscriptionSegment,
} from "@/components/ui/chat-transcription";
 
const segments: ChatTranscriptionSegment[] = [
  { text: "Hello,", startSecond: 0,   endSecond: 0.5 },
  { text: "this",   startSecond: 0.6, endSecond: 0.9 },
  { text: "is",     startSecond: 1.0, endSecond: 1.2 },
  { text: "Oracul.", startSecond: 1.3, endSecond: 1.9 },
];
 
<ChatTranscription
  currentTime={currentTime}
  segments={segments}
  onSeek={(t) => audioRef.current?.fastSeek(t)}
/>

Поведение

Активный сегмент (startSecond <= currentTime < endSecond) подсвечивается жирным text-foreground.
Прошедшие — text-muted-foreground.
Будущие — text-muted-foreground/60.
Клик по сегменту вызывает onSeek(startSecond) — удобно подключить к audio player.

Кастомный renderer

<ChatTranscription segments={segments} onSeek={onSeek}>
  {(segment, i) => (
    <span key={i}>
      [{chatTranscriptionFormatTime(segment.startSecond)}] {segment.text}
    </span>
  )}
</ChatTranscription>

Тип

type ChatTranscriptionSegment = {
  text: string;
  startSecond: number;
  endSecond: number;
};

Совместим с Experimental_TranscriptionResult["segments"][number] из AI SDK — можно мапить 1:1.

На этой странице

Установка Использование Поведение Кастомный renderer Тип