+ {data.kv_cache_advisory && (
+
+ {copy.kvCacheAdvisory(
+ data.kv_cache_advisory.model,
+ formatContext(data.kv_cache_advisory.loaded_context),
+ formatContext(data.kv_cache_advisory.trained_context)
+ )}
+
+ )}
+
+
+ {data.installed.map(model => {
+ const live = running.get(model.name)
+ const busy = busyModel === model.name
+
+ const meta = [model.parameter_size, model.quantization, formatBytes(model.size_bytes)]
+ .filter(Boolean)
+ .join(' · ')
+
+ return (
+
+
+
+
{model.name}
+ {live && (
+
+ {copy.loaded}
+ {live.context_length ? ` · ${formatContext(live.context_length)}` : ''}
+ {live.size_vram_bytes ? ` · ${formatBytes(live.size_vram_bytes)} VRAM` : ''}
+
+ )}
+
+ {meta &&
{meta}
}
+
+
+ {!live && (
+
+ )}
+
+
+
+ )
+ })}
+
+
+
+
{copy.getModels}
+ {pull ? (
+
+
+
+ {pull.model}
+
+ {pullPercent !== null ? `${pullPercent}%` : pull.detail || ''}
+
+
+ {pullPercent !== null && (
+
+ )}
+
+ ) : (
+ <>
+
+ {data.recommended.map(rec => (
+
+
+
{rec.model}
+
{rec.description}
+
+
+
+ ))}
+
+
+ setPullModel(event.target.value)}
+ onKeyDown={event => {
+ if (event.key === 'Enter') {
+ void beginPull(pullModel)
+ }
+ }}
+ placeholder={copy.pullPlaceholder}
+ value={pullModel}
+ />
+
+
+ >
+ )}
+
+