diff --git a/core/http/views/index.html b/core/http/views/index.html
index 92f71d706123..def505b95569 100644
--- a/core/http/views/index.html
+++ b/core/http/views/index.html
@@ -220,7 +220,7 @@
- Manage Models
+ System
@@ -237,6 +237,43 @@
Documentation
+
+
+ {{ $loadedModels := .LoadedModels }}
+
+
+
+
+
+ •
+ {{ range .ModelsConfig }}
+ {{ if index $loadedModels .Name }}
+
+ {{.Name}}
+
+
+ {{ end }}
+ {{ end }}
+ •
+
+
{{ end }}
@@ -334,6 +371,84 @@
// Make startChat available globally
window.startChat = startChat;
+
+// Stop individual model
+async function stopModel(modelName) {
+ if (!confirm(`Are you sure you want to stop "${modelName}"?`)) {
+ return;
+ }
+
+ try {
+ const response = await fetch('/backend/shutdown', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ model: modelName })
+ });
+
+ if (response.ok) {
+ // Reload page after short delay to reflect changes
+ setTimeout(() => {
+ window.location.reload();
+ }, 500);
+ } else {
+ alert('Failed to stop model');
+ }
+ } catch (error) {
+ console.error('Error stopping model:', error);
+ alert('Failed to stop model');
+ }
+}
+
+// Stop all loaded models
+async function stopAllModels(component) {
+ const loadedModelNamesStr = '{{ $loadedModels := .LoadedModels }}{{ range .ModelsConfig }}{{ if index $loadedModels .Name }}{{.Name}},{{ end }}{{ end }}';
+ const loadedModelNames = loadedModelNamesStr.split(',').filter(name => name.length > 0);
+
+ if (loadedModelNames.length === 0) {
+ return;
+ }
+
+ if (!confirm(`Are you sure you want to stop all ${loadedModelNames.length} loaded model(s)?`)) {
+ return;
+ }
+
+ // Set loading state
+ if (component) {
+ component.stoppingAll = true;
+ }
+
+ try {
+ // Stop all models in parallel
+ const stopPromises = loadedModelNames.map(modelName =>
+ fetch('/backend/shutdown', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ model: modelName })
+ })
+ );
+
+ await Promise.all(stopPromises);
+
+ // Reload page after short delay to reflect changes
+ setTimeout(() => {
+ window.location.reload();
+ }, 1000);
+ } catch (error) {
+ console.error('Error stopping models:', error);
+ alert('Failed to stop some models');
+ if (component) {
+ component.stoppingAll = false;
+ }
+ }
+}
+
+// Make functions available globally for Alpine.js
+window.stopModel = stopModel;
+window.stopAllModels = stopAllModels;