add sample for checking whisper & ffmpeg

This commit is contained in:
an-lee
2024-01-19 13:43:59 +08:00
parent d854ea0a02
commit 98d8061600
9 changed files with 128 additions and 30 deletions

View File

@@ -307,10 +307,18 @@ const FfmpegSettings = () => {
};
const WhisperSettings = () => {
const { whisperModel, whisperModelsPath } = useContext(
const { whisperModel, whisperModelsPath, EnjoyApp } = useContext(
AppSettingsProviderContext
);
const handleCheck = async () => {
toast.promise(EnjoyApp.whisper.check(), {
loading: t("checkingWhisper"),
success: t("whisperIsWorkingGood"),
error: t("whisperIsNotWorking"),
});
};
return (
<div className="flex items-start justify-between py-4">
<div className="">
@@ -318,32 +326,37 @@ const WhisperSettings = () => {
<div className="text-sm text-muted-foreground">{whisperModel}</div>
</div>
<Dialog>
<DialogTrigger asChild>
<Button variant="secondary" size="sm">
{t("edit")}
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>{t("sttAiModel")}</DialogHeader>
<DialogDescription>
{t("chooseAIModelDependingOnYourHardware")}
</DialogDescription>
<div className="flex items-center space-x-2">
<Button onClick={handleCheck} variant="secondary" size="sm">
{t("check")}
</Button>
<Dialog>
<DialogTrigger asChild>
<Button variant="secondary" size="sm">
{t("edit")}
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>{t("sttAiModel")}</DialogHeader>
<DialogDescription>
{t("chooseAIModelDependingOnYourHardware")}
</DialogDescription>
<WhisperModelOptions />
<WhisperModelOptions />
<DialogFooter>
<div className="text-xs opacity-70 flex items-start">
<InfoIcon className="mr-1.5 w-4 h-4" />
<span className="flex-1">
{t("yourModelsWillBeDownloadedTo", {
path: whisperModelsPath,
})}
</span>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
<DialogFooter>
<div className="text-xs opacity-70 flex items-start">
<InfoIcon className="mr-1.5 w-4 h-4" />
<span className="flex-1">
{t("yourModelsWillBeDownloadedTo", {
path: whisperModelsPath,
})}
</span>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</div>
);
};