Spaces:
Sleeping
Sleeping
| import React from 'react' | |
| const MODELS = [ | |
| { | |
| id: 'musicgen', | |
| name: 'MusicGen', | |
| provider: 'META', | |
| location: 'LOCAL', | |
| subtitle: 'Melody-conditioned continuation', | |
| }, | |
| { | |
| id: 'ace-step', | |
| name: 'ACE-Step v1.5', | |
| provider: 'ACE STUDIO', | |
| location: 'LOCAL', | |
| subtitle: 'Seed continuation & style transfer', | |
| }, | |
| ] | |
| function getTooltip(model, availability) { | |
| if (!availability) return null | |
| const info = availability[model.id] | |
| if (!info) return null | |
| if (info.status === 'offline') { | |
| return model.id === 'ace-step' | |
| ? 'Start ACE-Step: ./start_api_server_macos.sh' | |
| : 'Model offline' | |
| } | |
| return null | |
| } | |
| export default function ModelSelector({ selectedModel, onModelChange, availability }) { | |
| return ( | |
| <div className="flex gap-2"> | |
| {MODELS.map(model => { | |
| const tooltip = getTooltip(model, availability) | |
| const isAvailable = !tooltip | |
| const isActive = selectedModel === model.id | |
| return ( | |
| <button | |
| key={model.id} | |
| onClick={() => isAvailable && onModelChange(model.id)} | |
| disabled={!isAvailable} | |
| title={tooltip || model.subtitle} | |
| className={`flex-1 px-3 py-2.5 rounded-lg border text-left transition-all ${ | |
| isActive | |
| ? 'bg-accent-500/20 border-accent-500/40' | |
| : isAvailable | |
| ? 'bg-white/[0.03] border-white/[0.06] hover:bg-white/[0.06] hover:border-white/[0.12]' | |
| : 'bg-white/[0.02] border-white/[0.04] opacity-40 cursor-not-allowed' | |
| }`} | |
| > | |
| <div className="flex items-center gap-2 mb-0.5"> | |
| <span className={`text-sm font-medium ${isActive ? 'text-accent-400' : 'text-gray-300'}`}> | |
| {model.name} | |
| </span> | |
| </div> | |
| <div className="flex items-center gap-1.5"> | |
| <span className="text-[9px] uppercase tracking-wider font-medium px-1.5 py-0.5 rounded bg-white/[0.06] text-gray-500"> | |
| {model.provider} | |
| </span> | |
| <span className={`text-[9px] uppercase tracking-wider font-medium px-1.5 py-0.5 rounded ${ | |
| model.location === 'LOCAL' | |
| ? 'bg-emerald-500/10 text-emerald-500' | |
| : 'bg-blue-500/10 text-blue-400' | |
| }`}> | |
| {model.location} | |
| </span> | |
| </div> | |
| </button> | |
| ) | |
| })} | |
| </div> | |
| ) | |
| } | |