Skip to content

Load models in the UI without navigating the page #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 19, 2025
Merged

Load models in the UI without navigating the page #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f38eab
Load models in the UI without navigating the page
acon96 Jun 19, 2025
5946820
fix table layout for mobile
acon96 Jun 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions ui/src/contexts/APIProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface APIProviderType {
models: Model[];
listModels: () => Promise<Model[]>;
unloadAllModels: () => Promise<void>;
loadModel: (model: string) => Promise<void>;
enableProxyLogs: (enabled: boolean) => void;
enableUpstreamLogs: (enabled: boolean) => void;
enableModelUpdates: (enabled: boolean) => void;
Expand Down Expand Up @@ -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,
Expand All @@ -154,6 +170,7 @@ export function APIProvider({ children }: APIProviderProps) {
models,
listModels,
unloadAllModels,
loadModel,
enableProxyLogs,
enableUpstreamLogs,
enableModelUpdates,
Expand Down
4 changes: 4 additions & 0 deletions ui/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
8 changes: 6 additions & 2 deletions ui/src/pages/Models.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -43,17 +43,21 @@ export default function ModelsPage() {
<thead>
<tr className="border-b border-primary">
<th className="text-left p-2">Name</th>
<th className="text-left p-2"></th>
<th className="text-left p-2">State</th>
</tr>
</thead>
<tbody>
{models.map((model) => (
<tr key={model.id} className="border-b hover:bg-secondary-hover border-border">
<td className="p-2">
<a href={`/upstream/${model.id}/`} className="underline" target="top">
<a href={`/upstream/${model.id}/`} className="underline" target="_blank">
{model.id}
</a>
</td>
<td className="p-2">
<button className="btn btn--sm" disabled={model.state !== "stopped"} onClick={() => loadModel(model.id)}>Load</button>
Copy link

@coderabbitai coderabbitai bot Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling for model loading.

The Load button calls loadModel without error handling, which could result in unhandled promise rejections if the API call fails. Consider adding try-catch with user feedback.

-                      <button className="btn btn--sm" disabled={model.state !== "stopped"} onClick={() => loadModel(model.id)}>Load</button>
+                      <button className="btn btn--sm" disabled={model.state !== "stopped"} onClick={async () => {
+                        try {
+                          await loadModel(model.id);
+                          // Optional: Add success feedback
+                        } catch (error) {
+                          console.error('Failed to load model:', error);
+                          // Optional: Add user-visible error feedback
+                        }
+                      }}>Load</button>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button className="btn btn--sm" disabled={model.state !== "stopped"} onClick={() => loadModel(model.id)}>Load</button>
<button
className="btn btn--sm"
disabled={model.state !== "stopped"}
onClick={async () => {
try {
await loadModel(model.id);
// Optional: Add success feedback
} catch (error) {
console.error('Failed to load model:', error);
// Optional: Add user-visible error feedback
}
}}
>
Load
</button>
🤖 Prompt for AI Agents 
In ui/src/pages/Models.tsx at line 63, the Load button's onClick handler calls
loadModel without error handling, risking unhandled promise rejections. Wrap the
loadModel call in an async function with a try-catch block, and in the catch
block provide user feedback such as an alert or notification indicating the
loading failure.

</td>
<td className="p-2">
<span className={`status status--${model.state}`}>{model.state}</span>
</td>
Expand Down