mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-18 06:10:43 -07:00
Enhance release workflow and update provider settings
- Added macOS support for PyTorch CPU providers in the release workflow. - Updated the ProviderSettings component to handle macOS-specific conditions and improve UI interactions. - Refactored the radio group component styles for better accessibility and visual consistency. - Improved provider management logic to ensure proper handling of available providers across different platforms.
This commit is contained in:
@@ -28,13 +28,21 @@ jobs:
|
||||
provider: "pytorch-cuda"
|
||||
python-version: "3.12"
|
||||
# PyTorch CPU provider (Linux)
|
||||
# - platform: "ubuntu-22.04"
|
||||
# provider: "pytorch-cpu"
|
||||
# python-version: "3.12"
|
||||
- platform: "ubuntu-22.04"
|
||||
provider: "pytorch-cpu"
|
||||
python-version: "3.12"
|
||||
# PyTorch CUDA provider (Linux) - large binary, uploaded to R2
|
||||
- platform: "ubuntu-22.04"
|
||||
provider: "pytorch-cuda"
|
||||
python-version: "3.12"
|
||||
# PyTorch CPU provider (macOS Apple Silicon)
|
||||
- platform: "macos-latest"
|
||||
provider: "pytorch-cpu"
|
||||
python-version: "3.12"
|
||||
# PyTorch CPU provider (macOS Intel)
|
||||
- platform: "macos-15-intel"
|
||||
provider: "pytorch-cpu"
|
||||
python-version: "3.12"
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
@@ -101,6 +109,10 @@ jobs:
|
||||
# Add platform suffix for clarity
|
||||
if [ "${{ matrix.platform }}" == "windows-latest" ]; then
|
||||
UPLOAD_NAME="tts-provider-${{ matrix.provider }}-windows.exe"
|
||||
elif [ "${{ matrix.platform }}" == "macos-latest" ]; then
|
||||
UPLOAD_NAME="tts-provider-${{ matrix.provider }}-macos-arm64"
|
||||
elif [ "${{ matrix.platform }}" == "macos-15-intel" ]; then
|
||||
UPLOAD_NAME="tts-provider-${{ matrix.provider }}-macos-x64"
|
||||
else
|
||||
UPLOAD_NAME="tts-provider-${{ matrix.provider }}-linux"
|
||||
fi
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Delete01Icon, Download01Icon, Loading01Icon } from '@hugeicons/core-free-icons';
|
||||
import { HugeiconsIcon } from '@hugeicons/react';
|
||||
import { Download01Icon, Loading01Icon, Delete01Icon } from '@hugeicons/core-free-icons';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback, useState } from 'react';
|
||||
import {
|
||||
AlertDialog,
|
||||
@@ -23,12 +23,18 @@ import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
|
||||
|
||||
const isMacOS = () => navigator.platform.toLowerCase().includes('mac');
|
||||
|
||||
type ProviderType = 'auto' | 'bundled-mlx' | 'bundled-pytorch' | 'pytorch-cpu' | 'pytorch-cuda' | 'remote' | 'openai';
|
||||
type ProviderType =
|
||||
| 'auto'
|
||||
| 'bundled-mlx'
|
||||
| 'bundled-pytorch'
|
||||
| 'pytorch-cpu'
|
||||
| 'pytorch-cuda'
|
||||
| 'remote'
|
||||
| 'openai';
|
||||
|
||||
export function ProviderSettings() {
|
||||
const { toast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedProvider, setSelectedProvider] = useState<ProviderType>('auto');
|
||||
const [downloadingProvider, setDownloadingProvider] = useState<string | null>(null);
|
||||
|
||||
const { data: providersData, isLoading } = useQuery({
|
||||
@@ -167,6 +173,7 @@ export function ProviderSettings() {
|
||||
|
||||
// Determine current active provider
|
||||
const currentProvider = activeProvider?.provider || 'auto';
|
||||
const selectedProvider = currentProvider as ProviderType;
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -176,41 +183,25 @@ export function ProviderSettings() {
|
||||
<CardDescription>Choose how Voicebox generates speech</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<RadioGroup
|
||||
value={selectedProvider}
|
||||
onValueChange={(value) => setSelectedProvider(value as ProviderType)}
|
||||
>
|
||||
{/* Auto-detect */}
|
||||
<div className="flex items-center space-x-2 py-2">
|
||||
<RadioGroupItem value="auto" id="auto" />
|
||||
<Label htmlFor="auto" className="flex-1 cursor-pointer">
|
||||
<div className="font-medium">Auto-detect (Recommended)</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Automatically choose the best available provider
|
||||
</div>
|
||||
</Label>
|
||||
{currentProvider === 'auto' && (
|
||||
<Badge variant="outline" className="ml-2">
|
||||
Active
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<RadioGroup value={selectedProvider} onValueChange={(value) => handleStart(value)}>
|
||||
{/* PyTorch CUDA */}
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex items-center space-x-2 flex-1">
|
||||
<RadioGroupItem value="pytorch-cuda" id="cuda" />
|
||||
<Label htmlFor="cuda" className="flex-1 cursor-pointer">
|
||||
<div
|
||||
className={`flex items-center justify-between py-2 ${isMacOS() ? 'opacity-50' : ''}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3 flex-1">
|
||||
<RadioGroupItem value="pytorch-cuda" id="cuda" disabled={isMacOS()} />
|
||||
<Label
|
||||
htmlFor="cuda"
|
||||
className={`flex-1 ${isMacOS() ? 'cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
>
|
||||
<div className="font-medium">PyTorch CUDA (NVIDIA GPU)</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
4-5x faster inference on NVIDIA GPUs
|
||||
{isMacOS() ? 'Not available on macOS' : '4-5x faster inference on NVIDIA GPUs'}
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{currentProvider === 'pytorch-cuda' && (
|
||||
<Badge variant="outline">Active</Badge>
|
||||
)}
|
||||
{currentProvider === 'pytorch-cuda' && <Badge variant="outline">Active</Badge>}
|
||||
{!installedProviders.includes('pytorch-cuda') && (
|
||||
<Button
|
||||
onClick={() => handleDownload('pytorch-cuda')}
|
||||
@@ -218,7 +209,11 @@ export function ProviderSettings() {
|
||||
disabled={downloadingProvider === 'pytorch-cuda'}
|
||||
>
|
||||
{downloadingProvider === 'pytorch-cuda' ? (
|
||||
<HugeiconsIcon icon={Loading01Icon} size={16} className="h-4 w-4 animate-spin" />
|
||||
<HugeiconsIcon
|
||||
icon={Loading01Icon}
|
||||
size={16}
|
||||
className="h-4 w-4 animate-spin"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<HugeiconsIcon icon={Download01Icon} size={16} className="h-4 w-4 mr-1" />
|
||||
@@ -227,148 +222,109 @@ export function ProviderSettings() {
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{installedProviders.includes('pytorch-cuda') && selectedProvider !== 'pytorch-cuda' && (
|
||||
<Button
|
||||
onClick={() => handleStart('pytorch-cuda')}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
Start
|
||||
</Button>
|
||||
)}
|
||||
{installedProviders.includes('pytorch-cuda') &&
|
||||
selectedProvider !== 'pytorch-cuda' && (
|
||||
<Button onClick={() => handleStart('pytorch-cuda')} size="sm" variant="outline">
|
||||
Start
|
||||
</Button>
|
||||
)}
|
||||
{installedProviders.includes('pytorch-cuda') && (
|
||||
<Button
|
||||
onClick={() => handleDelete('pytorch-cuda')}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
>
|
||||
<Button onClick={() => handleDelete('pytorch-cuda')} size="sm" variant="ghost">
|
||||
<HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PyTorch CPU (Windows/Linux only) */}
|
||||
{!isMacOS() && (
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex items-center space-x-2 flex-1">
|
||||
<RadioGroupItem value="pytorch-cpu" id="cpu" />
|
||||
<Label htmlFor="cpu" className="flex-1 cursor-pointer">
|
||||
<div className="font-medium">PyTorch CPU</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Works on any system, slower inference
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{currentProvider === 'pytorch-cpu' && (
|
||||
<Badge variant="outline">Active</Badge>
|
||||
)}
|
||||
{!installedProviders.includes('pytorch-cpu') && (
|
||||
<Button
|
||||
onClick={() => handleDownload('pytorch-cpu')}
|
||||
size="sm"
|
||||
disabled={downloadingProvider === 'pytorch-cpu'}
|
||||
>
|
||||
{downloadingProvider === 'pytorch-cpu' ? (
|
||||
<HugeiconsIcon icon={Loading01Icon} size={16} className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<HugeiconsIcon icon={Download01Icon} size={16} className="h-4 w-4 mr-1" />
|
||||
Download (300MB)
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{installedProviders.includes('pytorch-cpu') && selectedProvider !== 'pytorch-cpu' && (
|
||||
<Button
|
||||
onClick={() => handleStart('pytorch-cpu')}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
{/* PyTorch CPU */}
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div className="flex items-center space-x-3 flex-1">
|
||||
<RadioGroupItem value="pytorch-cpu" id="cpu" />
|
||||
<Label htmlFor="cpu" className="flex-1 cursor-pointer">
|
||||
<div className="font-medium">PyTorch CPU</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Works on any system, slower inference
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{currentProvider === 'pytorch-cpu' && <Badge variant="outline">Active</Badge>}
|
||||
{!installedProviders.includes('pytorch-cpu') && (
|
||||
<Button
|
||||
onClick={() => handleDownload('pytorch-cpu')}
|
||||
size="sm"
|
||||
disabled={downloadingProvider === 'pytorch-cpu'}
|
||||
>
|
||||
{downloadingProvider === 'pytorch-cpu' ? (
|
||||
<HugeiconsIcon
|
||||
icon={Loading01Icon}
|
||||
size={16}
|
||||
className="h-4 w-4 animate-spin"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<HugeiconsIcon icon={Download01Icon} size={16} className="h-4 w-4 mr-1" />
|
||||
Download (300MB)
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{installedProviders.includes('pytorch-cpu') &&
|
||||
selectedProvider !== 'pytorch-cpu' && (
|
||||
<Button onClick={() => handleStart('pytorch-cpu')} size="sm" variant="outline">
|
||||
Start
|
||||
</Button>
|
||||
)}
|
||||
{installedProviders.includes('pytorch-cpu') && (
|
||||
<Button
|
||||
onClick={() => handleDelete('pytorch-cpu')}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
>
|
||||
<HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{installedProviders.includes('pytorch-cpu') && (
|
||||
<Button onClick={() => handleDelete('pytorch-cpu')} size="sm" variant="ghost">
|
||||
<HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MLX bundled (macOS only) */}
|
||||
{/* MLX bundled (macOS Apple Silicon only) */}
|
||||
{isMacOS() && (
|
||||
<div className="p-3 bg-muted rounded-md">
|
||||
<div className="text-sm">
|
||||
<div className="font-medium flex items-center gap-2">
|
||||
MLX (Apple Silicon)
|
||||
{currentProvider === 'bundled-mlx' && (
|
||||
<Badge variant="outline">Active</Badge>
|
||||
)}
|
||||
<div className="flex items-center space-x-3 py-2">
|
||||
<RadioGroupItem value="bundled-mlx" id="mlx" />
|
||||
<Label htmlFor="mlx" className="flex-1 cursor-pointer">
|
||||
<div className="font-medium">MLX (Apple Silicon)</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Bundled with the app - optimized for M-series chips
|
||||
</div>
|
||||
<div className="text-muted-foreground mt-1">
|
||||
Bundled with the app - optimized for M1/M2/M3 chips
|
||||
</div>
|
||||
</div>
|
||||
</Label>
|
||||
{currentProvider === 'bundled-mlx' && (
|
||||
<Badge variant="outline" className="ml-2">
|
||||
Active
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Remote */}
|
||||
<div className="space-y-2 py-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="remote" id="remote" />
|
||||
<Label htmlFor="remote" className="flex-1 cursor-pointer">
|
||||
<div className="space-y-2 py-2 opacity-50">
|
||||
<div className="flex items-center space-x-3">
|
||||
<RadioGroupItem value="remote" id="remote" disabled />
|
||||
<Label htmlFor="remote" className="flex-1 cursor-not-allowed">
|
||||
<div className="font-medium">Remote Server</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Connect to your own TTS server
|
||||
Connect to your own TTS server (coming soon)
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
{selectedProvider === 'remote' && (
|
||||
<div className="ml-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="http://your-server:8000"
|
||||
className="w-full px-3 py-2 border rounded-md"
|
||||
disabled
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
Remote provider support coming soon
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* OpenAI */}
|
||||
<div className="space-y-2 py-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="openai" id="openai" />
|
||||
<Label htmlFor="openai" className="flex-1 cursor-pointer">
|
||||
<div className="space-y-2 py-2 opacity-50">
|
||||
<div className="flex items-center space-x-3">
|
||||
<RadioGroupItem value="openai" id="openai" disabled />
|
||||
<Label htmlFor="openai" className="flex-1 cursor-not-allowed">
|
||||
<div className="font-medium">OpenAI API</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Use OpenAI's TTS API (requires API key)
|
||||
Use OpenAI's TTS API (coming soon)
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
{selectedProvider === 'openai' && (
|
||||
<div className="ml-6">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
className="w-full px-3 py-2 border rounded-md"
|
||||
disabled
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
OpenAI provider support coming soon
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</CardContent>
|
||||
@@ -385,7 +341,10 @@ export function ProviderSettings() {
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={confirmDelete} className="bg-destructive text-destructive-foreground">
|
||||
<AlertDialogAction
|
||||
onClick={confirmDelete}
|
||||
className="bg-destructive text-destructive-foreground"
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
@@ -29,7 +29,7 @@ const RadioGroupItem = React.forwardRef<
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"aspect-square h-4 w-4 rounded-full border border-accent text-accent ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -10,7 +10,7 @@ from .base import TTSProvider
|
||||
from .types import ProviderType
|
||||
from .bundled import BundledProvider
|
||||
from .local import LocalProvider
|
||||
from .installer import get_provider_binary_path
|
||||
from .installer import get_provider_binary_path, _get_providers_dir
|
||||
from ..config import get_data_dir
|
||||
import subprocess
|
||||
import socket
|
||||
@@ -50,38 +50,44 @@ class ProviderManager:
|
||||
Args:
|
||||
provider_type: Type of provider to start
|
||||
"""
|
||||
if provider_type in ["bundled-mlx", "bundled-pytorch"]:
|
||||
# Use bundled provider
|
||||
if provider_type == "bundled-mlx":
|
||||
# Use bundled MLX provider
|
||||
self.active_provider = self._get_default_provider()
|
||||
elif provider_type in ["pytorch-cpu", "pytorch-cuda"]:
|
||||
# Start local provider subprocess
|
||||
# Try to start external provider subprocess if binary exists
|
||||
provider_path = get_provider_binary_path(provider_type)
|
||||
if not provider_path or not provider_path.exists():
|
||||
raise ValueError(f"Provider {provider_type} is not installed. Please download it first.")
|
||||
|
||||
# Find a free port
|
||||
port = self._get_free_port()
|
||||
|
||||
# Start provider subprocess
|
||||
from ..config import get_data_dir
|
||||
process = subprocess.Popen(
|
||||
[
|
||||
str(provider_path),
|
||||
"--port", str(port),
|
||||
"--data-dir", str(get_data_dir()),
|
||||
],
|
||||
stdout=subprocess.PIPE,
|
||||
stderr=subprocess.PIPE,
|
||||
)
|
||||
|
||||
# Wait for provider to be ready
|
||||
base_url = f"http://127.0.0.1:{port}"
|
||||
await self._wait_for_provider_health(base_url, timeout=30)
|
||||
|
||||
# Create LocalProvider instance
|
||||
self.active_provider = LocalProvider(base_url)
|
||||
self._provider_process = process
|
||||
self._provider_port = port
|
||||
if provider_path and provider_path.exists():
|
||||
# External downloaded provider exists, start it
|
||||
# Find a free port
|
||||
port = self._get_free_port()
|
||||
|
||||
# Start provider subprocess
|
||||
from ..config import get_data_dir
|
||||
process = subprocess.Popen(
|
||||
[
|
||||
str(provider_path),
|
||||
"--port", str(port),
|
||||
"--data-dir", str(get_data_dir()),
|
||||
],
|
||||
stdout=subprocess.PIPE,
|
||||
stderr=subprocess.PIPE,
|
||||
)
|
||||
|
||||
# Wait for provider to be ready
|
||||
base_url = f"http://127.0.0.1:{port}"
|
||||
await self._wait_for_provider_health(base_url, timeout=30)
|
||||
|
||||
# Create LocalProvider instance
|
||||
self.active_provider = LocalProvider(base_url)
|
||||
self._provider_process = process
|
||||
self._provider_port = port
|
||||
else:
|
||||
# No external binary, use bundled provider (if available)
|
||||
if provider_type == "pytorch-cpu":
|
||||
# PyTorch CPU can use bundled backend
|
||||
self.active_provider = self._get_default_provider()
|
||||
else:
|
||||
raise ValueError(f"Provider {provider_type} is not installed. Please download it first.")
|
||||
elif provider_type == "remote":
|
||||
# Remote provider - will be implemented in Phase 5
|
||||
raise NotImplementedError("Remote provider not yet implemented")
|
||||
@@ -122,11 +128,17 @@ class ProviderManager:
|
||||
# Bundled providers are always available
|
||||
system = platform.system()
|
||||
machine = platform.machine()
|
||||
|
||||
|
||||
if system == "Darwin" and machine == "arm64":
|
||||
# Apple Silicon gets MLX
|
||||
installed.append("bundled-mlx")
|
||||
else:
|
||||
installed.append("bundled-pytorch")
|
||||
|
||||
# PyTorch CPU is available on all platforms (check if bundled or downloaded)
|
||||
# For now, assume it's bundled on macOS Intel, Windows, Linux
|
||||
# Downloaded binaries will be detected below
|
||||
if not (system == "Darwin" and machine == "arm64"):
|
||||
# Non-Apple Silicon systems have PyTorch CPU bundled
|
||||
installed.append("pytorch-cpu")
|
||||
|
||||
# Check for downloaded providers (Phase 2)
|
||||
providers_dir = _get_providers_dir()
|
||||
|
||||
@@ -62,6 +62,14 @@ def _get_provider_download_name(provider_type: str) -> str:
|
||||
elif system == "Linux":
|
||||
platform_suffix = "linux"
|
||||
ext = ""
|
||||
elif system == "Darwin":
|
||||
# Detect macOS architecture
|
||||
machine = platform.machine()
|
||||
if machine == "arm64":
|
||||
platform_suffix = "macos-arm64"
|
||||
else:
|
||||
platform_suffix = "macos-x64"
|
||||
ext = ""
|
||||
else:
|
||||
raise ValueError(f"Provider downloads not supported on {system}")
|
||||
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user