File size: 2,485 Bytes
59dcfdf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 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>
)
}
|