diff --git a/ui/src/contexts/APIProvider.tsx b/ui/src/contexts/APIProvider.tsx index 7aad409..a6cc689 100644 --- a/ui/src/contexts/APIProvider.tsx +++ b/ui/src/contexts/APIProvider.tsx @@ -12,6 +12,7 @@ interface APIProviderType { models: Model[]; listModels: () => Promise; unloadAllModels: () => Promise; + loadModel: (model: string) => Promise; enableProxyLogs: (enabled: boolean) => void; enableUpstreamLogs: (enabled: boolean) => void; enableModelUpdates: (enabled: boolean) => void; @@ -139,11 +140,26 @@ export function APIProvider({ children }: APIProviderProps) { } }, []); + const loadModel = useCallback(async (model: string) => { + try { + const response = await fetch(`/upstream/${model}/`, { + method: "GET", + }); + if (!response.ok) { + throw new Error(`Failed to load model: ${response.status}`); + } + } catch (error) { + console.error("Failed to load model:", error); + throw error; // Re-throw to let calling code handle it + } + }, []); + const value = useMemo( () => ({ models, listModels, unloadAllModels, + loadModel, enableProxyLogs, enableUpstreamLogs, enableModelUpdates, @@ -154,6 +170,7 @@ export function APIProvider({ children }: APIProviderProps) { models, listModels, unloadAllModels, + loadModel, enableProxyLogs, enableUpstreamLogs, enableModelUpdates, diff --git a/ui/src/index.css b/ui/src/index.css index c3f3ac3..dd75759 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -143,6 +143,10 @@ @apply bg-surface p-2 px-4 text-sm rounded-full border border-2 transition-colors duration-200 border-btn-border; } + .btn:hover { + cursor: pointer; + } + .btn--sm { @apply px-2 py-0.5 text-xs; } diff --git a/ui/src/pages/Models.tsx b/ui/src/pages/Models.tsx index c1a371a..f324934 100644 --- a/ui/src/pages/Models.tsx +++ b/ui/src/pages/Models.tsx @@ -3,7 +3,7 @@ import { useAPI } from "../contexts/APIProvider"; import { LogPanel } from "./LogViewer"; export default function ModelsPage() { - const { models, enableModelUpdates, unloadAllModels, upstreamLogs, enableUpstreamLogs } = useAPI(); + const { models, enableModelUpdates, unloadAllModels, loadModel, upstreamLogs, enableUpstreamLogs } = useAPI(); const [isUnloading, setIsUnloading] = useState(false); useEffect(() => { @@ -43,6 +43,7 @@ export default function ModelsPage() { Name + State @@ -50,10 +51,13 @@ export default function ModelsPage() { {models.map((model) => ( - + {model.id} + + + {model.state}