Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-09-29 07:05:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Update ProviderSettings component for improved clarity and user guidance

Browse Source 
- Enhanced text descriptions for TTS providers, clarifying the functionality of PyTorch CUDA and Apple MLX.
- Removed outdated references to availability and added notes regarding model version differences.
- Improved UI structure by ensuring consistent labeling and disabling options based on system compatibility.
This commit is contained in:
Jamie Pine
2026-02-03 05:40:37 -08:00
parent 43241b85cf
commit 3f633f4a02
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/ServerSettings/ProviderSettings.tsx
+23 -21
View File
@@ -183,7 +183,7 @@ export function ProviderSettings() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>TTS Provider</CardTitle> <CardTitle>TTS Provider</CardTitle>
<CardDescription>Choose how Voicebox generates speech</CardDescription> <CardDescription>Choose how Voicebox generates speech.</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="relative"> <CardContent className="relative">
{isStarting && ( {isStarting && (
@@ -209,9 +209,9 @@ export function ProviderSettings() {
htmlFor="cuda" htmlFor="cuda"
className={`flex-1 ${isMacOS() || isStarting ? 'cursor-not-allowed' : 'cursor-pointer'}`} className={`flex-1 ${isMacOS() || isStarting ? 'cursor-not-allowed' : 'cursor-pointer'}`}
> >
<div className="font-medium">PyTorch CUDA (NVIDIA GPU)</div> <div className="font-medium">PyTorch CUDA</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
{isMacOS() ? 'Not available on macOS' : '4-5x faster inference on NVIDIA GPUs'} NVIDIA GPU-accelerated provider
</div> </div>
</Label> </Label>
</div> </div>
@@ -312,20 +312,20 @@ export function ProviderSettings() {
</div> </div>
{/* MLX bundled (macOS Apple Silicon only) */} {/* MLX bundled (macOS Apple Silicon only) */}
{isMacOS() && ( <div className="flex items-center space-x-3 py-2">
<div className="flex items-center space-x-3 py-2"> <RadioGroupItem value="apple-mlx" id="mlx" disabled={isStarting || !isMacOS()} />
<RadioGroupItem value="apple-mlx" id="mlx" disabled={isStarting} /> <Label
<Label htmlFor="mlx"
htmlFor="mlx" className={`flex-1 ${isStarting ? 'cursor-not-allowed' : 'cursor-pointer'}`}
className={`flex-1 ${isStarting ? 'cursor-not-allowed' : 'cursor-pointer'}`} >
> <div className="font-medium">Apple MLX</div>
<div className="font-medium">MLX (Apple Silicon)</div> <div className="text-sm text-muted-foreground">
<div className="text-sm text-muted-foreground"> {isMacOS()
Bundled with the app - optimized for M-series chips ? 'Bundled with this version, optimized for Apple Silicon'
</div> : 'Only available on Apple Silicon'}
</Label> </div>
</div> </Label>
)} </div>
{/* Remote */} {/* Remote */}
<div className="space-y-2 py-2 opacity-50"> <div className="space-y-2 py-2 opacity-50">
@@ -334,7 +334,7 @@ export function ProviderSettings() {
<Label htmlFor="remote" className="flex-1 cursor-not-allowed"> <Label htmlFor="remote" className="flex-1 cursor-not-allowed">
<div className="font-medium">Remote Server</div> <div className="font-medium">Remote Server</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Connect to your own TTS server (coming soon) Connect to your own TTS server
</div> </div>
</Label> </Label>
</div> </div>
@@ -346,13 +346,15 @@ export function ProviderSettings() {
<RadioGroupItem value="openai" id="openai" disabled /> <RadioGroupItem value="openai" id="openai" disabled />
<Label htmlFor="openai" className="flex-1 cursor-not-allowed"> <Label htmlFor="openai" className="flex-1 cursor-not-allowed">
<div className="font-medium">OpenAI API</div> <div className="font-medium">OpenAI API</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">Use OpenAI's TTS API</div>
Use OpenAI's TTS API (coming soon)
</div>
</Label> </Label>
</div> </div>
</div> </div>
</RadioGroup> </RadioGroup>
<p className="text-xs text-muted-foreground mt-5">
Note: PyTorch and MLX use different versions of the same model. When switching between
them, you will need to redownload the model.
</p>
</CardContent> </CardContent>
</Card> </Card>