@@ -1,5 +1,5 @@ -import { createSignal, For, Signal } from "solid-js"; +import { Component, createSignal, For, JSXElement, Signal } from "solid-js"; import { CheckIcon, ChevronsUpDownIcon, @@ -33,17 +33,21 @@ showVisualizer as showVisualizerSetting, backgroundColor as backgroundColorSetting, frameRate as frameRateSetting, useDominantColorAsBg as useDominantColorAsBgSetting, + autoTranscribe as autoTranscribeSetting, + whisperModel as whisperModelSetting, Setting, + defaultWhisperModel, } from "~/lib/settings"; import { handleResolver } from "~/lib/at"; import { toaster } from "~/components/Toaster"; import { createListCollection, Select } from "~/components/ui/select"; import { type Color, type ListCollection, parseColor } from "@ark-ui/solid"; import { ColorPicker } from "~/components/ui/color-picker"; import { Input } from "~/components/ui/input"; +import { preloadModel } from "~/lib/transcribe"; const SettingCheckbox = (props: { setting: Setting; signal: Signal; @@ -190,8 +194,28 @@ ); }; +const Category = ({ + title, + children, +}: { + title: string; + children: JSXElement; +}) => ( + + {title} + + {children} + + +); + const Settings = () => { const [handle, setHandle] = createSignal(""); const isHandleValid = () => isHandle(handle()); @@ -258,36 +282,30 @@ {(acc, idx) => item(acc, idx() === accounts.length - 1)} ); return ( - - accounts + - - - setHandle(e.currentTarget.value)} - /> - - - - + + setHandle(e.currentTarget.value)} + /> + + + + - - {items(accounts())} - + {items(accounts())} + ); }; const [showProfilePicture, setShowProfilePicture] = createSignal( @@ -321,8 +339,30 @@ const newColor = _setBackgroundColor(value); backgroundColorSetting.set(newColor.toString("rgb")); }; + const whisperModelCollection = createListCollection({ + items: [ + { tag: "tiny", size: "40MB" }, + { tag: "base", size: "80MB" }, + { tag: "small", size: "250MB" }, + ].map((model) => ({ + label: `${model.tag} (${model.size})`, + value: `onnx-community/whisper-${model.tag}`, + })), + }); + const [whisperModel, _setWhisperModel] = createSignal( + (whisperModelSetting.get() ?? defaultWhisperModel).toString(), + ); + const setWhisperModel = (value: string | ((prev: string) => string)) => { + const newModel = _setWhisperModel(value); + whisperModelSetting.set(newModel); + if (autoTranscribe()) setTimeout(() => preloadModel(), 200); + }; + const [autoTranscribe, setAutoTranscribe] = createSignal( + autoTranscribeSetting.get() ?? false, + ); + return ( ( @@ -350,47 +390,65 @@ - - processing - - - - + + - - - - - + + + + - + + + + + { + const newVal = setAutoTranscribe(val); + if (newVal) preloadModel(); + return val; + }, + ]} + /> + + + + + + note: the model will only be downloaded once. + +