danvics/Handy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better disabled states for parakeet

Browse source
This commit is contained in:
CJ Pais 2025-10-08 16:52:50 -07:00
parent 83970b0f44
commit 1f0332941b
3 changed files with 103 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/components/settings/LanguageSelector.tsx
View file

@ -61,15 +61,17 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
}, [isOpen]); }, [isOpen]);
const filteredLanguages = useMemo( const filteredLanguages = useMemo(
() => LANGUAGES.filter((language) => () =>
language.label.toLowerCase().includes(searchQuery.toLowerCase()), LANGUAGES.filter((language) =>
), language.label.toLowerCase().includes(searchQuery.toLowerCase()),
[searchQuery] ),
[searchQuery],
); );
const selectedLanguageName = isParakeetModel const selectedLanguageName = isParakeetModel
? "Auto" ? "Auto"
: LANGUAGES.find((lang) => lang.value === selectedLanguage)?.label || "Auto"; : LANGUAGES.find((lang) => lang.value === selectedLanguage)?.label ||
"Auto";
const handleLanguageSelect = async (languageCode: string) => { const handleLanguageSelect = async (languageCode: string) => {
await updateSetting("selected_language", languageCode); await updateSetting("selected_language", languageCode);
@ -103,12 +105,14 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
return ( return (
<SettingContainer <SettingContainer
title="Language" title="Language"
description={isParakeetModel description={
? "Parakeet model automatically detects the language. No manual selection is needed." isParakeetModel
: "Select the language for speech recognition. Auto will automatically determine the language, while selecting a specific language can improve accuracy for that language." ? "Parakeet model automatically detects the language. No manual selection is needed."
: "Select the language for speech recognition. Auto will automatically determine the language, while selecting a specific language can improve accuracy for that language."
} }
descriptionMode={descriptionMode} descriptionMode={descriptionMode}
grouped={grouped} grouped={grouped}
disabled={isLanguageSelectionDisabled}
> >
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
@ -120,7 +124,9 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
: "hover:bg-logo-primary/10 cursor-pointer hover:border-logo-primary" : "hover:bg-logo-primary/10 cursor-pointer hover:border-logo-primary"
}`} }`}
onClick={handleToggle} onClick={handleToggle}
disabled={isUpdating("selected_language") || isLanguageSelectionDisabled} disabled={
isUpdating("selected_language") || isLanguageSelectionDisabled
}
> >
<span className="truncate">{selectedLanguageName}</span> <span className="truncate">{selectedLanguageName}</span>
<svg <svg
@ -140,51 +146,55 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
</svg> </svg>
</button> </button>
{isOpen && !isUpdating("selected_language") && !isLanguageSelectionDisabled && ( {isOpen &&
<div className="absolute top-full left-0 right-0 mt-1 bg-background border border-mid-gray/80 rounded shadow-lg z-50 max-h-60 overflow-hidden"> !isUpdating("selected_language") &&
{/* Search input */} !isLanguageSelectionDisabled && (
<div className="p-2 border-b border-mid-gray/80"> <div className="absolute top-full left-0 right-0 mt-1 bg-background border border-mid-gray/80 rounded shadow-lg z-50 max-h-60 overflow-hidden">
<input {/* Search input */}
ref={searchInputRef} <div className="p-2 border-b border-mid-gray/80">
type="text" <input
value={searchQuery} ref={searchInputRef}
onChange={handleSearchChange} type="text"
onKeyDown={handleKeyDown} value={searchQuery}
placeholder="Search languages..." onChange={handleSearchChange}
className="w-full px-2 py-1 text-sm bg-mid-gray/10 border border-mid-gray/40 rounded focus:outline-none focus:ring-1 focus:ring-logo-primary focus:border-logo-primary" onKeyDown={handleKeyDown}
/> placeholder="Search languages..."
</div> className="w-full px-2 py-1 text-sm bg-mid-gray/10 border border-mid-gray/40 rounded focus:outline-none focus:ring-1 focus:ring-logo-primary focus:border-logo-primary"
/>
</div>
<div className="max-h-48 overflow-y-auto"> <div className="max-h-48 overflow-y-auto">
{filteredLanguages.length === 0 ? ( {filteredLanguages.length === 0 ? (
<div className="px-2 py-2 text-sm text-mid-gray text-center"> <div className="px-2 py-2 text-sm text-mid-gray text-center">
No languages found No languages found
</div> </div>
) : ( ) : (
filteredLanguages.map((language) => ( filteredLanguages.map((language) => (
<button <button
key={language.value} key={language.value}
type="button" type="button"
className={`w-full px-2 py-1 text-sm text-left hover:bg-logo-primary/10 transition-colors duration-150 ${ className={`w-full px-2 py-1 text-sm text-left hover:bg-logo-primary/10 transition-colors duration-150 ${
selectedLanguage === language.value selectedLanguage === language.value
? "bg-logo-primary/20 text-logo-primary font-semibold" ? "bg-logo-primary/20 text-logo-primary font-semibold"
: "" : ""
}`} }`}
onClick={() => handleLanguageSelect(language.value)} onClick={() => handleLanguageSelect(language.value)}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="truncate">{language.label}</span> <span className="truncate">{language.label}</span>
</div> </div>
</button> </button>
)) ))
)} )}
</div>
</div> </div>
</div> )}
)}
</div> </div>
<ResetButton <ResetButton
onClick={handleReset} onClick={handleReset}
disabled={isUpdating("selected_language") || isLanguageSelectionDisabled} disabled={
isUpdating("selected_language") || isLanguageSelectionDisabled
}
/> />
</div> </div>
{isUpdating("selected_language") && ( {isUpdating("selected_language") && (

57
src/components/settings/TranslateToEnglish.tsx
View file

@ -1,29 +1,48 @@
import React from "react"; import React, { useEffect } from "react";
import { listen } from "@tauri-apps/api/event";
import { ToggleSwitch } from "../ui/ToggleSwitch"; import { ToggleSwitch } from "../ui/ToggleSwitch";
import { useSettings } from "../../hooks/useSettings"; import { useSettings } from "../../hooks/useSettings";
import { useModels } from "../../hooks/useModels";
interface TranslateToEnglishProps { interface TranslateToEnglishProps {
descriptionMode?: "inline" | "tooltip"; descriptionMode?: "inline" | "tooltip";
grouped?: boolean; grouped?: boolean;
} }
export const TranslateToEnglish: React.FC<TranslateToEnglishProps> = React.memo(({ export const TranslateToEnglish: React.FC<TranslateToEnglishProps> = React.memo(
descriptionMode = "tooltip", ({ descriptionMode = "tooltip", grouped = false }) => {
grouped = false, const { getSetting, updateSetting, isUpdating } = useSettings();
}) => { const { currentModel, loadCurrentModel } = useModels();
const { getSetting, updateSetting, isUpdating } = useSettings();
const translateToEnglish = getSetting("translate_to_english") || false; const translateToEnglish = getSetting("translate_to_english") || false;
const isParakeetModel = currentModel === "parakeet-tdt-0.6b-v3";
return ( // Listen for model state changes to update UI reactively
<ToggleSwitch useEffect(() => {
checked={translateToEnglish} const modelStateUnlisten = listen("model-state-changed", () => {
onChange={(enabled) => updateSetting("translate_to_english", enabled)} loadCurrentModel();
isUpdating={isUpdating("translate_to_english")} });
label="Translate to English"
description="Automatically translate speech from other languages to English during transcription." return () => {
descriptionMode={descriptionMode} modelStateUnlisten.then((fn) => fn());
grouped={grouped} };
/> }, [loadCurrentModel]);
);
}); return (
<ToggleSwitch
checked={translateToEnglish}
onChange={(enabled) => updateSetting("translate_to_english", enabled)}
isUpdating={isUpdating("translate_to_english")}
disabled={isParakeetModel}
label="Translate to English"
description={
isParakeetModel
? "Translation is not supported by the Parakeet model."
: "Automatically translate speech from other languages to English during transcription."
}
descriptionMode={descriptionMode}
grouped={grouped}
/>
);
},
);

5
src/components/ui/ToggleSwitch.tsx
View file

@ -28,8 +28,11 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
description={description} description={description}
descriptionMode={descriptionMode} descriptionMode={descriptionMode}
grouped={grouped} grouped={grouped}
disabled={disabled}
> >
<label className="inline-flex items-center cursor-pointer"> <label
className={`inline-flex items-center ${disabled || isUpdating ? "cursor-not-allowed" : "cursor-pointer"}`}
>
<input <input
type="checkbox" type="checkbox"
value="" value=""