feat(frontend): add SaluteSpeech engine option to TranscriptionSettingsStep
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniil
@@ -0,0 +1,329 @@
|
||||
"use client"
|
||||
|
||||
import type { ITranscriptionSettingsStepProps } from "./TranscriptionSettingsStep.d"
|
||||
import type { JSX } from "react"
|
||||
|
||||
import { Info } from "lucide-react"
|
||||
import { FunctionComponent, useEffect, useState } from "react"
|
||||
import { Controller, useForm } from "react-hook-form"
|
||||
|
||||
import cs from "classnames"
|
||||
|
||||
import api from "@shared/api"
|
||||
import { useWizard } from "@shared/context/WizardContext"
|
||||
import { useAppSelector } from "@shared/hooks/useAppSelector"
|
||||
import { Button, CircularProgress, Form, Select, SelectItem } from "@shared/ui"
|
||||
|
||||
import { useSubmitTranscription } from "../TranscriptionModal/useSubmitTranscription"
|
||||
import { buildCancelJobPayload, useCancelJob } from "../useCancelJob"
|
||||
import styles from "./TranscriptionSettingsStep.module.scss"
|
||||
|
||||
interface ITranscriptionFormData {
|
||||
engine: "whisper" | "google" | "salutespeech"
|
||||
language: string
|
||||
model: string
|
||||
}
|
||||
|
||||
const ENGINE_OPTIONS = [
|
||||
{ value: "whisper", label: "Whisper (локальный)" },
|
||||
{ value: "google", label: "Google Speech" },
|
||||
{ value: "salutespeech", label: "SaluteSpeech" },
|
||||
]
|
||||
|
||||
const LANGUAGE_OPTIONS = [
|
||||
{ value: "auto", label: "Авто" },
|
||||
{ value: "ru", label: "Русский" },
|
||||
{ value: "en", label: "Английский" },
|
||||
]
|
||||
|
||||
const WHISPER_MODEL_OPTIONS = [
|
||||
{ value: "base", label: "Базовая" },
|
||||
{ value: "small", label: "Малая" },
|
||||
{ value: "medium", label: "Средняя" },
|
||||
{ value: "large", label: "Большая" },
|
||||
]
|
||||
|
||||
const SALUTE_MODEL_OPTIONS = [
|
||||
{ value: "general", label: "Общая" },
|
||||
{ value: "finance", label: "Финансы" },
|
||||
{ value: "medicine", label: "Медицина" },
|
||||
]
|
||||
|
||||
export const TranscriptionSettingsStep: FunctionComponent<
|
||||
ITranscriptionSettingsStepProps
|
||||
> = ({ className }): JSX.Element => {
|
||||
const {
|
||||
projectId,
|
||||
primaryFileKey,
|
||||
activeJobId,
|
||||
activeJobType,
|
||||
setActiveJob,
|
||||
startProcessingJob,
|
||||
goBack,
|
||||
} = useWizard()
|
||||
|
||||
const isProcessing =
|
||||
!!activeJobId && activeJobType === "TRANSCRIPTION_GENERATE"
|
||||
|
||||
const [submitError, setSubmitError] = useState<string | null>(null)
|
||||
const { mutate: cancelJob, isPending: isCancelling } = useCancelJob()
|
||||
|
||||
const { control, handleSubmit, watch, setValue } =
|
||||
useForm<ITranscriptionFormData>({
|
||||
defaultValues: {
|
||||
engine: "whisper",
|
||||
language: "auto",
|
||||
model: "base",
|
||||
},
|
||||
})
|
||||
|
||||
const engine = watch("engine")
|
||||
|
||||
useEffect(() => {
|
||||
if (engine === "salutespeech") {
|
||||
setValue("model", "general")
|
||||
} else if (engine === "whisper") {
|
||||
setValue("model", "base")
|
||||
}
|
||||
}, [engine, setValue])
|
||||
|
||||
const { mutate, isPending } = useSubmitTranscription({
|
||||
onSuccess: (data) => {
|
||||
if (data?.job_id) {
|
||||
startProcessingJob(
|
||||
data.job_id,
|
||||
"TRANSCRIPTION_GENERATE",
|
||||
"transcription-processing",
|
||||
"transcription-settings",
|
||||
)
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Transcription submit failed:", error)
|
||||
setSubmitError("Не удалось запустить транскрипцию")
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: ITranscriptionFormData): void => {
|
||||
if (!primaryFileKey) return
|
||||
setSubmitError(null)
|
||||
|
||||
mutate({
|
||||
body: {
|
||||
file_key: primaryFileKey,
|
||||
project_id: projectId,
|
||||
engine: data.engine,
|
||||
language: data.language === "auto" ? undefined : data.language,
|
||||
model: data.model,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/* ---- Processing state (inline) ---- */
|
||||
|
||||
const notification = useAppSelector((state) =>
|
||||
activeJobId
|
||||
? state.notifications.items.find((n) => n.job_id === activeJobId)
|
||||
: null,
|
||||
)
|
||||
|
||||
const { data: taskStatus } = api.useQuery(
|
||||
"get",
|
||||
"/api/tasks/status/{job_id}/",
|
||||
{ params: { path: { job_id: activeJobId ?? "" } } },
|
||||
{ enabled: isProcessing, refetchInterval: 2000 },
|
||||
)
|
||||
|
||||
const progressPct = notification?.progress_pct ?? 0
|
||||
const statusMessage =
|
||||
notification?.message ?? "Подождите, идёт транскрипция..."
|
||||
const isFailed =
|
||||
notification?.status === "FAILED" || taskStatus?.status === "FAILED"
|
||||
|
||||
const handleCancel = () => {
|
||||
if (isFailed) {
|
||||
setActiveJob(null)
|
||||
return
|
||||
}
|
||||
|
||||
if (!activeJobId || isCancelling) return
|
||||
|
||||
cancelJob(buildCancelJobPayload(activeJobId), {
|
||||
onSuccess: () => {
|
||||
setActiveJob(null)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (isProcessing) {
|
||||
return (
|
||||
<div
|
||||
className={cs(styles.root, className)}
|
||||
data-testid="TranscriptionSettingsStep"
|
||||
>
|
||||
<div className={styles.processingContent}>
|
||||
<div className={styles.progressWrapper}>
|
||||
<CircularProgress
|
||||
percentage={progressPct}
|
||||
size={200}
|
||||
strokeWidth={8}
|
||||
color={isFailed ? "var(--color-danger)" : "var(--color-success)"}
|
||||
className={styles.circle}
|
||||
bgClassName={styles.circleBg}
|
||||
valueClassName={styles.circleValue}
|
||||
/>
|
||||
<div className={styles.progressInner}>
|
||||
<span className={styles.percentage}>
|
||||
{Math.round(progressPct)}%
|
||||
</span>
|
||||
<span className={styles.statusLabel}>
|
||||
{isFailed ? "ОШИБКА" : "ТРАНСКРИБАЦИЯ"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
className={cs(styles.processingDescription, {
|
||||
[styles.descriptionError]: isFailed,
|
||||
})}
|
||||
>
|
||||
{isFailed
|
||||
? (notification?.message ?? "Произошла ошибка при транскрипции")
|
||||
: statusMessage}
|
||||
</p>
|
||||
|
||||
<div className={styles.infoCard}>
|
||||
<Info size={16} className={styles.infoIcon} />
|
||||
<span>
|
||||
Обработка выполняется на сервере. Вы можете покинуть страницу —
|
||||
прогресс сохранится.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant={isFailed ? "outline" : "danger"}
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
disabled={isCancelling}
|
||||
>
|
||||
{isFailed
|
||||
? "Назад"
|
||||
: isCancelling
|
||||
? "Отмена..."
|
||||
: "Отменить обработку"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- Settings form ---- */
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cs(styles.root, className)}
|
||||
data-testid="TranscriptionSettingsStep"
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.header}>
|
||||
<h2 className={styles.title}>Параметры транскрипции</h2>
|
||||
<p className={styles.description}>
|
||||
Настройте параметры для генерации субтитров
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className={styles.fields}>
|
||||
<div className={styles.selectField}>
|
||||
<div className={styles.selectLabel}>Движок</div>
|
||||
<Controller
|
||||
name="engine"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
placeholder="Выберите движок"
|
||||
>
|
||||
{ENGINE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.selectField}>
|
||||
<div className={styles.selectLabel}>Язык</div>
|
||||
<Controller
|
||||
name="language"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
placeholder="Выберите язык"
|
||||
>
|
||||
{LANGUAGE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(engine === "whisper" || engine === "salutespeech") && (
|
||||
<div className={styles.selectField}>
|
||||
<div className={styles.selectLabel}>Модель</div>
|
||||
<Controller
|
||||
name="model"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
placeholder="Выберите модель"
|
||||
>
|
||||
{(engine === "whisper"
|
||||
? WHISPER_MODEL_OPTIONS
|
||||
: SALUTE_MODEL_OPTIONS
|
||||
).map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{submitError && <p className={styles.error}>{submitError}</p>}
|
||||
|
||||
<div className={styles.formFooter}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isPending}
|
||||
onClick={goBack}
|
||||
>
|
||||
Назад
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={isPending || !primaryFileKey}
|
||||
>
|
||||
{isPending ? "Запуск..." : "Сгенерировать субтитры"}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user