fix(workaround): install vulkan from repos for amd64

This is a temporary workaround to confirm that the vulkan binary
upstream are not built with the same glibc version of ubuntu 24.04,
which makes it incompatible.

See https://github.com/mudler/LocalAI/issues/7914

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

Dockerfile

@@ -16,7 +16,7 @@ RUN apt-get update && \
 
 # The requirements-drivers target is for BUILD_TYPE specific items.  If you need to install something specific to CUDA, or specific to ROCM, it goes here.
 FROM requirements AS requirements-drivers
-
+ARG VULKAN_FROM_SOURCE=false
 ARG BUILD_TYPE
 ARG CUDA_MAJOR_VERSION=12
 ARG CUDA_MINOR_VERSION=0
@@ -41,7 +41,7 @@ RUN <<EOT bash
             git python-is-python3 bison libx11-xcb-dev liblz4-dev libzstd-dev \
             ocaml-core ninja-build pkg-config libxml2-dev wayland-protocols python3-jsonschema \
             clang-format qtbase5-dev qt6-base-dev libxcb-glx0-dev sudo xz-utils mesa-vulkan-drivers
-        if [ "amd64" = "$TARGETARCH" ]; then
+        if [ "amd64" = "$TARGETARCH" ] && [ "${VULKAN_FROM_SOURCE}" = "true" ]; then
             wget "https://sdk.lunarg.com/sdk/download/1.4.328.1/linux/vulkansdk-linux-x86_64-1.4.328.1.tar.xz" && \
             tar -xf vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
             rm vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
@@ -59,6 +59,11 @@ RUN <<EOT bash
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/include/* /usr/include/ && \
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/share/* /usr/share/ && \
             rm -rf /opt/vulkan-sdk
+        elif [ "amd64" = "${TARGETARCH}}" ]; then
+            wget -qO- https://packages.lunarg.com/lunarg-signing-key-pub.asc | sudo tee /etc/apt/trusted.gpg.d/lunarg.asc && \
+            wget -qO /etc/apt/sources.list.d/lunarg-vulkan-noble.list http://packages.lunarg.com/vulkan/lunarg-vulkan-noble.list && \
+            apt-get update && \
+            apt-get install -y vulkan-sdk
         fi
         if [ "arm64" = "$TARGETARCH" ]; then
             mkdir vulkan && cd vulkan && \

backend/Dockerfile.golang

@@ -46,7 +46,7 @@ RUN <<EOT bash
             git python-is-python3 bison libx11-xcb-dev liblz4-dev libzstd-dev \
             ocaml-core ninja-build pkg-config libxml2-dev wayland-protocols python3-jsonschema \
             clang-format qtbase5-dev qt6-base-dev libxcb-glx0-dev sudo xz-utils
-        if [ "amd64" = "$TARGETARCH" ]; then
+        if [ "amd64" = "$TARGETARCH" ] && [ "${VULKAN_FROM_SOURCE}" = "true" ]; then
             wget "https://sdk.lunarg.com/sdk/download/1.4.328.1/linux/vulkansdk-linux-x86_64-1.4.328.1.tar.xz" && \
             tar -xf vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
             rm vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
@@ -64,6 +64,11 @@ RUN <<EOT bash
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/include/* /usr/include/ && \
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/share/* /usr/share/ && \
             rm -rf /opt/vulkan-sdk
+        elif [ "amd64" = "${TARGETARCH}}" ]; then
+            wget -qO- https://packages.lunarg.com/lunarg-signing-key-pub.asc | sudo tee /etc/apt/trusted.gpg.d/lunarg.asc && \
+            wget -qO /etc/apt/sources.list.d/lunarg-vulkan-noble.list http://packages.lunarg.com/vulkan/lunarg-vulkan-noble.list && \
+            apt-get update && \
+            apt-get install -y vulkan-sdk
         fi
         if [ "arm64" = "$TARGETARCH" ]; then
             mkdir vulkan && cd vulkan && \

backend/Dockerfile.llama-cpp

@@ -103,7 +103,7 @@ RUN <<EOT bash
             git python-is-python3 bison libx11-xcb-dev liblz4-dev libzstd-dev \
             ocaml-core ninja-build pkg-config libxml2-dev wayland-protocols python3-jsonschema \
             clang-format qtbase5-dev qt6-base-dev libxcb-glx0-dev sudo xz-utils
-        if [ "amd64" = "$TARGETARCH" ]; then
+        if [ "amd64" = "$TARGETARCH" ] && [ "${VULKAN_FROM_SOURCE}" = "true" ]; then
             wget "https://sdk.lunarg.com/sdk/download/1.4.328.1/linux/vulkansdk-linux-x86_64-1.4.328.1.tar.xz" && \
             tar -xf vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
             rm vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
@@ -121,6 +121,11 @@ RUN <<EOT bash
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/include/* /usr/include/ && \
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/share/* /usr/share/ && \
             rm -rf /opt/vulkan-sdk
+        elif [ "amd64" = "${TARGETARCH}}" ]; then
+            wget -qO- https://packages.lunarg.com/lunarg-signing-key-pub.asc | sudo tee /etc/apt/trusted.gpg.d/lunarg.asc && \
+            wget -qO /etc/apt/sources.list.d/lunarg-vulkan-noble.list http://packages.lunarg.com/vulkan/lunarg-vulkan-noble.list && \
+            apt-get update && \
+            apt-get install -y vulkan-sdk
         fi
         if [ "arm64" = "$TARGETARCH" ]; then
             mkdir vulkan && cd vulkan && \

backend/Dockerfile.python

@@ -60,7 +60,7 @@ RUN <<EOT bash
             git python-is-python3 bison libx11-xcb-dev liblz4-dev libzstd-dev \
             ocaml-core ninja-build pkg-config libxml2-dev wayland-protocols python3-jsonschema \
             clang-format qtbase5-dev qt6-base-dev libxcb-glx0-dev sudo xz-utils
-        if [ "amd64" = "$TARGETARCH" ]; then
+        if [ "amd64" = "$TARGETARCH" ] && [ "${VULKAN_FROM_SOURCE}" = "true" ]; then
             wget "https://sdk.lunarg.com/sdk/download/1.4.328.1/linux/vulkansdk-linux-x86_64-1.4.328.1.tar.xz" && \
             tar -xf vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
             rm vulkansdk-linux-x86_64-1.4.328.1.tar.xz && \
@@ -78,6 +78,11 @@ RUN <<EOT bash
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/include/* /usr/include/ && \
             cp -rfv /opt/vulkan-sdk/1.4.328.1/x86_64/share/* /usr/share/ && \
             rm -rf /opt/vulkan-sdk
+        elif [ "amd64" = "${TARGETARCH}}" ]; then
+            wget -qO- https://packages.lunarg.com/lunarg-signing-key-pub.asc | sudo tee /etc/apt/trusted.gpg.d/lunarg.asc && \
+            wget -qO /etc/apt/sources.list.d/lunarg-vulkan-noble.list http://packages.lunarg.com/vulkan/lunarg-vulkan-noble.list && \
+            apt-get update && \
+            apt-get install -y vulkan-sdk
         fi
         if [ "arm64" = "$TARGETARCH" ]; then
             mkdir vulkan && cd vulkan && \

core/http/endpoints/localai/welcome.go

@@ -65,9 +65,13 @@ func WelcomeEndpoint(appConfig *config.ApplicationConfig,
 			// The client expects a JSON response
 			return c.JSON(200, summary)
 		} else {
-			// Serve the SPA for both index and manage routes
-			// The SPA handles routing client-side via Alpine.js
-			return c.Render(200, "views/spa", summary)
+			// Check if this is the manage route
+			templateName := "views/index"
+			if strings.HasSuffix(c.Request().URL.Path, "/manage") || c.Request().URL.Path == "/manage" {
+				templateName = "views/manage"
+			}
+			// Render appropriate template
+			return c.Render(200, templateName, summary)
 		}
 	}
 }

core/http/routes/ui.go

@@ -3,6 +3,7 @@ package routes
 import (
 	"github.com/labstack/echo/v4"
 	"github.com/mudler/LocalAI/core/config"
+	"github.com/mudler/LocalAI/core/gallery"
 	"github.com/mudler/LocalAI/core/http/endpoints/localai"
 	"github.com/mudler/LocalAI/core/http/middleware"
 	"github.com/mudler/LocalAI/core/services"
@@ -114,24 +115,208 @@ func RegisterUIRoutes(app *echo.Echo,
 		registerBackendGalleryRoutes(app, appConfig, galleryService, processingOps)
 	}
 
-	// Talk route - now served by SPA
-	app.GET("/talk", localai.WelcomeEndpoint(appConfig, cl, ml, processingOps))
+	app.GET("/talk", func(c echo.Context) error {
+		modelConfigs, _ := services.ListModels(cl, ml, config.NoFilterFn, services.SKIP_IF_CONFIGURED)
 
-	// Chat routes - now served by SPA
-	app.GET("/chat", localai.WelcomeEndpoint(appConfig, cl, ml, processingOps))
+		if len(modelConfigs) == 0 {
+			// If no model is available redirect to the index which suggests how to install models
+			return c.Redirect(302, middleware.BaseURL(c))
+		}
 
-	// Show the Chat page with specific model
-	app.GET("/chat/:model", localai.WelcomeEndpoint(appConfig, cl, ml, processingOps))
+		summary := map[string]interface{}{
+			"Title":        "LocalAI - Talk",
+			"BaseURL":      middleware.BaseURL(c),
+			"ModelsConfig": modelConfigs,
+			"Model":        modelConfigs[0],
 
-	// Text2Image routes - now served by SPA
-	app.GET("/text2image/:model", localai.WelcomeEndpoint(appConfig, cl, ml, processingOps))
+			"Version": internal.PrintableVersion(),
+		}
 
-	app.GET("/text2image", localai.WelcomeEndpoint(appConfig, cl, ml, processingOps))
+		// Render index
+		return c.Render(200, "views/talk", summary)
+	})
 
-	// TTS routes - now served by SPA
-	app.GET("/tts/:model", localai.WelcomeEndpoint(appConfig, cl, ml, processingOps))
+	app.GET("/chat", func(c echo.Context) error {
+		modelConfigs := cl.GetAllModelsConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
-	app.GET("/tts", localai.WelcomeEndpoint(appConfig, cl, ml, processingOps))
+		if len(modelConfigs)+len(modelsWithoutConfig) == 0 {
+			// If no model is available redirect to the index which suggests how to install models
+			return c.Redirect(302, middleware.BaseURL(c))
+		}
+		modelThatCanBeUsed := ""
+		galleryConfigs := map[string]*gallery.ModelConfig{}
+
+		for _, m := range modelConfigs {
+			cfg, err := gallery.GetLocalModelConfiguration(ml.ModelPath, m.Name)
+			if err != nil {
+				continue
+			}
+			galleryConfigs[m.Name] = cfg
+		}
+
+		title := "LocalAI - Chat"
+		var modelContextSize *int
+
+		for _, b := range modelConfigs {
+			if b.HasUsecases(config.FLAG_CHAT) {
+				modelThatCanBeUsed = b.Name
+				title = "LocalAI - Chat with " + modelThatCanBeUsed
+				if b.LLMConfig.ContextSize != nil {
+					modelContextSize = b.LLMConfig.ContextSize
+				}
+				break
+			}
+		}
+
+		summary := map[string]interface{}{
+			"Title":               title,
+			"BaseURL":             middleware.BaseURL(c),
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"GalleryConfig":       galleryConfigs,
+			"ModelsConfig":        modelConfigs,
+			"Model":               modelThatCanBeUsed,
+			"ContextSize":         modelContextSize,
+			"Version":             internal.PrintableVersion(),
+		}
+
+		// Render index
+		return c.Render(200, "views/chat", summary)
+	})
+
+	// Show the Chat page
+	app.GET("/chat/:model", func(c echo.Context) error {
+		modelConfigs := cl.GetAllModelsConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
+
+		galleryConfigs := map[string]*gallery.ModelConfig{}
+		modelName := c.Param("model")
+		var modelContextSize *int
+
+		for _, m := range modelConfigs {
+			cfg, err := gallery.GetLocalModelConfiguration(ml.ModelPath, m.Name)
+			if err != nil {
+				continue
+			}
+			galleryConfigs[m.Name] = cfg
+			if m.Name == modelName && m.LLMConfig.ContextSize != nil {
+				modelContextSize = m.LLMConfig.ContextSize
+			}
+		}
+
+		summary := map[string]interface{}{
+			"Title":               "LocalAI - Chat with " + modelName,
+			"BaseURL":             middleware.BaseURL(c),
+			"ModelsConfig":        modelConfigs,
+			"GalleryConfig":       galleryConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               modelName,
+			"ContextSize":         modelContextSize,
+			"Version":             internal.PrintableVersion(),
+		}
+
+		// Render index
+		return c.Render(200, "views/chat", summary)
+	})
+
+	app.GET("/text2image/:model", func(c echo.Context) error {
+		modelConfigs := cl.GetAllModelsConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
+
+		summary := map[string]interface{}{
+			"Title":               "LocalAI - Generate images with " + c.Param("model"),
+			"BaseURL":             middleware.BaseURL(c),
+			"ModelsConfig":        modelConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               c.Param("model"),
+			"Version":             internal.PrintableVersion(),
+		}
+
+		// Render index
+		return c.Render(200, "views/text2image", summary)
+	})
+
+	app.GET("/text2image", func(c echo.Context) error {
+		modelConfigs := cl.GetAllModelsConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
+
+		if len(modelConfigs)+len(modelsWithoutConfig) == 0 {
+			// If no model is available redirect to the index which suggests how to install models
+			return c.Redirect(302, middleware.BaseURL(c))
+		}
+
+		modelThatCanBeUsed := ""
+		title := "LocalAI - Generate images"
+
+		for _, b := range modelConfigs {
+			if b.HasUsecases(config.FLAG_IMAGE) {
+				modelThatCanBeUsed = b.Name
+				title = "LocalAI - Generate images with " + modelThatCanBeUsed
+				break
+			}
+		}
+
+		summary := map[string]interface{}{
+			"Title":               title,
+			"BaseURL":             middleware.BaseURL(c),
+			"ModelsConfig":        modelConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               modelThatCanBeUsed,
+			"Version":             internal.PrintableVersion(),
+		}
+
+		// Render index
+		return c.Render(200, "views/text2image", summary)
+	})
+
+	app.GET("/tts/:model", func(c echo.Context) error {
+		modelConfigs := cl.GetAllModelsConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
+
+		summary := map[string]interface{}{
+			"Title":               "LocalAI - Generate images with " + c.Param("model"),
+			"BaseURL":             middleware.BaseURL(c),
+			"ModelsConfig":        modelConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               c.Param("model"),
+			"Version":             internal.PrintableVersion(),
+		}
+
+		// Render index
+		return c.Render(200, "views/tts", summary)
+	})
+
+	app.GET("/tts", func(c echo.Context) error {
+		modelConfigs := cl.GetAllModelsConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
+
+		if len(modelConfigs)+len(modelsWithoutConfig) == 0 {
+			// If no model is available redirect to the index which suggests how to install models
+			return c.Redirect(302, middleware.BaseURL(c))
+		}
+
+		modelThatCanBeUsed := ""
+		title := "LocalAI - Generate audio"
+
+		for _, b := range modelConfigs {
+			if b.HasUsecases(config.FLAG_TTS) {
+				modelThatCanBeUsed = b.Name
+				title = "LocalAI - Generate audio with " + modelThatCanBeUsed
+				break
+			}
+		}
+		summary := map[string]interface{}{
+			"Title":               title,
+			"BaseURL":             middleware.BaseURL(c),
+			"ModelsConfig":        modelConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               modelThatCanBeUsed,
+			"Version":             internal.PrintableVersion(),
+		}
+
+		// Render index
+		return c.Render(200, "views/tts", summary)
+	})
 
 	// Traces UI
 	app.GET("/traces", func(c echo.Context) error {

core/http/static/spa-home.js

@@ -1,411 +0,0 @@
-/**
- * SPA Home View JavaScript
- * Contains Alpine.js components and functions for the home view
- */
-
-// Home input form component
-function homeInputForm() {
-  return {
-    selectedModel: '',
-    inputValue: '',
-    shiftPressed: false,
-    fileName: '',
-    imageFiles: [],
-    audioFiles: [],
-    textFiles: [],
-    attachedFiles: [],
-    mcpMode: false,
-    mcpAvailable: false,
-    mcpModels: {},
-    currentPlaceholder: 'Send a message...',
-    placeholderIndex: 0,
-    charIndex: 0,
-    isTyping: false,
-    typingTimeout: null,
-    displayTimeout: null,
-    placeholderMessages: [
-      'What is Nuclear fusion?',
-      'How does a combustion engine work?',
-      'Explain quantum computing',
-      'What causes climate change?',
-      'How do neural networks learn?',
-      'What is the theory of relativity?',
-      'How does photosynthesis work?',
-      'Explain the water cycle',
-      'What is machine learning?',
-      'How do black holes form?',
-      'What is DNA and how does it work?',
-      'Explain the greenhouse effect',
-      'How does the immune system work?',
-      'What is artificial intelligence?',
-      'How do solar panels generate electricity?',
-      'Explain the process of evolution',
-      'What is the difference between weather and climate?',
-      'How does the human brain process information?',
-      'What is the structure of an atom?',
-      'How do vaccines work?',
-      'Explain the concept of entropy',
-      'What is the speed of light?',
-      'How does gravity work?',
-      'What is the difference between mass and weight?'
-    ],
-
-    init() {
-      window.currentPlaceholderText = this.currentPlaceholder;
-      this.startTypingAnimation();
-      // Build MCP models map from data attributes
-      this.buildMCPModelsMap();
-      // Select first model by default
-      this.$nextTick(() => {
-        const select = this.$el.querySelector('select');
-        if (select && select.options.length > 1) {
-          const firstModelOption = select.options[1];
-          if (firstModelOption && firstModelOption.value) {
-            this.selectedModel = firstModelOption.value;
-            this.checkMCPAvailability();
-          }
-        }
-      });
-      // Watch for changes to selectedModel to update MCP availability
-      this.$watch('selectedModel', () => {
-        this.checkMCPAvailability();
-      });
-    },
-
-    buildMCPModelsMap() {
-      const select = this.$el.querySelector('select');
-      if (!select) return;
-      this.mcpModels = {};
-      for (let i = 0; i < select.options.length; i++) {
-        const option = select.options[i];
-        if (option.value) {
-          const hasMcpAttr = option.getAttribute('data-has-mcp');
-          this.mcpModels[option.value] = hasMcpAttr === 'true';
-        }
-      }
-    },
-
-    checkMCPAvailability() {
-      if (!this.selectedModel) {
-        this.mcpAvailable = false;
-        this.mcpMode = false;
-        return;
-      }
-      const hasMCP = this.mcpModels[this.selectedModel] === true;
-      this.mcpAvailable = hasMCP;
-      if (!hasMCP) {
-        this.mcpMode = false;
-      }
-    },
-
-    startTypingAnimation() {
-      if (this.isTyping) return;
-      this.typeNextPlaceholder();
-    },
-
-    typeNextPlaceholder() {
-      if (this.isTyping) return;
-      this.isTyping = true;
-      this.charIndex = 0;
-      const message = this.placeholderMessages[this.placeholderIndex];
-      this.currentPlaceholder = '';
-      window.currentPlaceholderText = '';
-
-      const typeChar = () => {
-        if (this.charIndex < message.length) {
-          this.currentPlaceholder = message.substring(0, this.charIndex + 1);
-          window.currentPlaceholderText = this.currentPlaceholder;
-          this.charIndex++;
-          this.typingTimeout = setTimeout(typeChar, 30);
-        } else {
-          this.isTyping = false;
-          window.currentPlaceholderText = this.currentPlaceholder;
-          this.displayTimeout = setTimeout(() => {
-            this.placeholderIndex = (this.placeholderIndex + 1) % this.placeholderMessages.length;
-            this.typeNextPlaceholder();
-          }, 2000);
-        }
-      };
-
-      typeChar();
-    },
-
-    pauseTyping() {
-      if (this.typingTimeout) {
-        clearTimeout(this.typingTimeout);
-        this.typingTimeout = null;
-      }
-      if (this.displayTimeout) {
-        clearTimeout(this.displayTimeout);
-        this.displayTimeout = null;
-      }
-      this.isTyping = false;
-    },
-
-    resumeTyping() {
-      if (!this.inputValue.trim() && !this.isTyping) {
-        this.startTypingAnimation();
-      }
-    },
-
-    handleFocus() {
-      if (this.isTyping && this.placeholderIndex < this.placeholderMessages.length) {
-        const fullMessage = this.placeholderMessages[this.placeholderIndex];
-        this.currentPlaceholder = fullMessage;
-        window.currentPlaceholderText = fullMessage;
-      }
-      this.pauseTyping();
-    },
-
-    handleBlur() {
-      if (!this.inputValue.trim()) {
-        this.resumeTyping();
-      }
-    },
-
-    handleInput() {
-      if (this.inputValue.trim()) {
-        this.pauseTyping();
-      } else {
-        this.resumeTyping();
-      }
-    },
-
-    handleFileSelection(files, fileType) {
-      Array.from(files).forEach(file => {
-        const exists = this.attachedFiles.some(f => f.name === file.name && f.type === fileType);
-        if (!exists) {
-          this.attachedFiles.push({ name: file.name, type: fileType });
-        }
-      });
-    },
-
-    removeAttachedFile(fileType, fileName) {
-      const index = this.attachedFiles.findIndex(f => f.name === fileName && f.type === fileType);
-      if (index !== -1) {
-        this.attachedFiles.splice(index, 1);
-      }
-      if (fileType === 'image') {
-        this.imageFiles = this.imageFiles.filter(f => f.name !== fileName);
-      } else if (fileType === 'audio') {
-        this.audioFiles = this.audioFiles.filter(f => f.name !== fileName);
-      } else if (fileType === 'file') {
-        this.textFiles = this.textFiles.filter(f => f.name !== fileName);
-      }
-    }
-  };
-}
-
-// Start chat function for SPA - navigates to chat view instead of full page redirect
-function startChatSPA(event) {
-  if (event) {
-    event.preventDefault();
-  }
-
-  const form = event ? event.target.closest('form') : document.querySelector('form');
-  if (!form) return;
-
-  const alpineComponent = form.closest('[x-data]');
-  const select = alpineComponent ? alpineComponent.querySelector('select') : null;
-  const textarea = form.querySelector('textarea');
-
-  const selectedModel = select ? select.value : '';
-  let message = textarea ? textarea.value : '';
-
-  if (!message.trim() && window.currentPlaceholderText) {
-    message = window.currentPlaceholderText;
-  }
-
-  if (!selectedModel || !message.trim()) {
-    return;
-  }
-
-  // Get MCP mode from checkbox
-  let mcpMode = false;
-  const mcpToggle = document.getElementById('spa_home_mcp_toggle');
-  if (mcpToggle && mcpToggle.checked) {
-    mcpMode = true;
-  }
-
-  // Store message and files in localStorage for chat view to pick up
-  const chatData = {
-    message: message,
-    imageFiles: [],
-    audioFiles: [],
-    textFiles: [],
-    mcpMode: mcpMode
-  };
-
-  // Convert files to base64 for storage
-  const imageInput = document.getElementById('spa_home_input_image');
-  const audioInput = document.getElementById('spa_home_input_audio');
-  const fileInput = document.getElementById('spa_home_input_file');
-
-  const filePromises = [
-    ...Array.from(imageInput?.files || []).map(file =>
-      new Promise(resolve => {
-        const reader = new FileReader();
-        reader.onload = e => resolve({ name: file.name, data: e.target.result, type: file.type });
-        reader.readAsDataURL(file);
-      })
-    ),
-    ...Array.from(audioInput?.files || []).map(file =>
-      new Promise(resolve => {
-        const reader = new FileReader();
-        reader.onload = e => resolve({ name: file.name, data: e.target.result, type: file.type });
-        reader.readAsDataURL(file);
-      })
-    ),
-    ...Array.from(fileInput?.files || []).map(file =>
-      new Promise(resolve => {
-        const reader = new FileReader();
-        reader.onload = e => resolve({ name: file.name, data: e.target.result, type: file.type });
-        reader.readAsText(file);
-      })
-    )
-  ];
-
-  const navigateToChat = () => {
-    // Store in localStorage
-    localStorage.setItem('localai_index_chat_data', JSON.stringify(chatData));
-
-    // Use SPA router to navigate to chat
-    if (window.Alpine && Alpine.store('router')) {
-      Alpine.store('router').navigate('chat', { model: selectedModel });
-    } else {
-      // Fallback to full page redirect if router not available
-      window.location.href = `/chat/${selectedModel}`;
-    }
-  };
-
-  if (filePromises.length > 0) {
-    Promise.all(filePromises).then(files => {
-      files.forEach(file => {
-        if (file.type.startsWith('image/')) {
-          chatData.imageFiles.push(file);
-        } else if (file.type.startsWith('audio/')) {
-          chatData.audioFiles.push(file);
-        } else {
-          chatData.textFiles.push(file);
-        }
-      });
-      navigateToChat();
-    }).catch(err => {
-      console.error('Error processing files:', err);
-      navigateToChat();
-    });
-  } else {
-    navigateToChat();
-  }
-}
-
-// Resource Monitor component (GPU if available, otherwise RAM)
-function resourceMonitor() {
-  return {
-    resourceData: null,
-    pollInterval: null,
-
-    async fetchResourceData() {
-      try {
-        const response = await fetch('/api/resources');
-        if (response.ok) {
-          this.resourceData = await response.json();
-        }
-      } catch (error) {
-        console.error('Error fetching resource data:', error);
-      }
-    },
-
-    startPolling() {
-      this.fetchResourceData();
-      this.pollInterval = setInterval(() => this.fetchResourceData(), 5000);
-    },
-
-    stopPolling() {
-      if (this.pollInterval) {
-        clearInterval(this.pollInterval);
-      }
-    }
-  };
-}
-
-// 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) {
-      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) {
-  // Get loaded models from DOM
-  const loadedModelElements = document.querySelectorAll('[data-loaded-model]');
-  const loadedModelNames = Array.from(loadedModelElements).map(el => {
-    const span = el.querySelector('span.truncate');
-    return span ? span.textContent.trim() : '';
-  }).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;
-  }
-
-  if (component) {
-    component.stoppingAll = true;
-  }
-
-  try {
-    const stopPromises = loadedModelNames.map(modelName =>
-      fetch('/backend/shutdown', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ model: modelName })
-      })
-    );
-
-    await Promise.all(stopPromises);
-
-    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
-window.homeInputForm = homeInputForm;
-window.startChatSPA = startChatSPA;
-window.resourceMonitor = resourceMonitor;
-window.stopModel = stopModel;
-window.stopAllModels = stopAllModels;

core/http/static/spa-router.js

@@ -1,148 +0,0 @@
-/**
- * LocalAI SPA Router
- * Client-side routing for the single-page application
- */
-
-// Define routes and their corresponding view IDs
-const SPA_ROUTES = {
-  'home': { title: 'LocalAI', viewId: 'view-home', paths: ['/', ''] },
-  'chat': { title: 'LocalAI - Chat', viewId: 'view-chat', paths: ['/chat'] },
-  'text2image': { title: 'LocalAI - Images', viewId: 'view-text2image', paths: ['/text2image'] },
-  'tts': { title: 'LocalAI - TTS', viewId: 'view-tts', paths: ['/tts'] },
-  'talk': { title: 'LocalAI - Talk', viewId: 'view-talk', paths: ['/talk'] },
-  'manage': { title: 'LocalAI - System', viewId: 'view-manage', paths: ['/manage'] },
-  'browse': { title: 'LocalAI - Model Gallery', viewId: 'view-browse', paths: ['/browse'] }
-};
-
-// Parse URL path to determine route
-function parseUrlPath(pathname) {
-  // Remove trailing slash
-  pathname = pathname.replace(/\/$/, '') || '/';
-  
-  // Check for hash-based routes first (for SPA navigation)
-  const hash = window.location.hash.slice(1);
-  if (hash) {
-    const hashParts = hash.split('/');
-    const route = hashParts[0];
-    const model = hashParts[1] || null;
-    if (SPA_ROUTES[route]) {
-      return { route, params: model ? { model } : {} };
-    }
-  }
-  
-  // Check path-based routes
-  for (const [route, config] of Object.entries(SPA_ROUTES)) {
-    for (const path of config.paths) {
-      if (pathname === path) {
-        return { route, params: {} };
-      }
-      // Check for parameterized routes like /chat/:model
-      if (pathname.startsWith(path + '/')) {
-        const param = pathname.slice(path.length + 1);
-        if (param) {
-          return { route, params: { model: param } };
-        }
-      }
-    }
-  }
-  
-  // Default to home
-  return { route: 'home', params: {} };
-}
-
-// Initialize the router store for Alpine.js
-document.addEventListener('alpine:init', () => {
-  // Parse initial route from URL
-  const initialRoute = parseUrlPath(window.location.pathname);
-  
-  Alpine.store('router', {
-    currentRoute: initialRoute.route,
-    routeParams: initialRoute.params,
-    previousRoute: null,
-    
-    /**
-     * Navigate to a route
-     * @param {string} route - The route name to navigate to
-     * @param {Object} params - Optional parameters for the route
-     */
-    navigate(route, params = {}) {
-      if (!SPA_ROUTES[route]) {
-        console.warn(`Unknown route: ${route}`);
-        return;
-      }
-      
-      this.previousRoute = this.currentRoute;
-      this.currentRoute = route;
-      this.routeParams = params;
-      
-      // Update document title
-      document.title = SPA_ROUTES[route].title;
-      
-      // Update URL without page reload using history API
-      const url = route === 'home' ? '/' : `/#${route}`;
-      if (params.model) {
-        window.history.pushState({ route, params }, '', `/#${route}/${params.model}`);
-      } else {
-        window.history.pushState({ route, params }, '', url);
-      }
-      
-      // Scroll to top on navigation
-      window.scrollTo(0, 0);
-      
-      // Emit custom event for route change listeners
-      window.dispatchEvent(new CustomEvent('spa:navigate', { 
-        detail: { route, params, previousRoute: this.previousRoute } 
-      }));
-    },
-    
-    /**
-     * Check if the current route matches
-     * @param {string} route - The route to check
-     * @returns {boolean}
-     */
-    isRoute(route) {
-      return this.currentRoute === route;
-    },
-    
-    /**
-     * Navigate to chat with a specific model
-     * @param {string} model - The model name
-     */
-    navigateToChat(model) {
-      this.navigate('chat', { model });
-    },
-    
-    /**
-     * Navigate to text2image with a specific model
-     * @param {string} model - The model name
-     */
-    navigateToText2Image(model) {
-      this.navigate('text2image', { model });
-    },
-    
-    /**
-     * Navigate to TTS with a specific model
-     * @param {string} model - The model name
-     */
-    navigateToTTS(model) {
-      this.navigate('tts', { model });
-    }
-  });
-});
-
-// Handle browser back/forward buttons
-window.addEventListener('popstate', (event) => {
-  if (event.state && event.state.route) {
-    Alpine.store('router').currentRoute = event.state.route;
-    Alpine.store('router').routeParams = event.state.params || {};
-  } else {
-    // Parse URL for route
-    const parsed = parseUrlPath(window.location.pathname);
-    Alpine.store('router').currentRoute = parsed.route;
-    Alpine.store('router').routeParams = parsed.params;
-  }
-});
-
-// Export for use in other scripts
-window.SPA_ROUTES = SPA_ROUTES;
-window.parseUrlPath = parseUrlPath;

core/http/views/partials/spa_navbar.html

@@ -1,154 +0,0 @@
-<nav class="bg-[var(--color-bg-primary)] shadow-2xl border-b border-[var(--color-bg-secondary)]">
-    <div class="container mx-auto px-4 py-2">
-        <div class="flex items-center justify-between">
-            <div class="flex items-center">
-                <!-- Logo Image -->
-                <a href="#" @click.prevent="$store.router.navigate('home')" class="flex items-center group">
-                    <img src="static/logo_horizontal.png" 
-                         alt="LocalAI Logo" 
-                         class="h-10 mr-3 brightness-110 transition-all duration-300 group-hover:brightness-125 group-hover:drop-shadow-[0_0_8px_var(--color-primary-border)]">
-                </a>
-            </div>
-            
-            <!-- Menu button for small screens -->
-            <div class="lg:hidden">
-                <button @click="mobileMenuOpen = !mobileMenuOpen" class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] focus:outline-none p-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)]">
-                    <i class="fas fa-bars fa-lg"></i>
-                </button>
-            </div>
-            
-            <!-- Navigation links -->
-            <div class="hidden lg:flex lg:items-center lg:justify-end lg:space-x-1">
-                <a href="#" @click.prevent="$store.router.navigate('home')" 
-                   :class="$store.router.currentRoute === 'home' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fas fa-home text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Home
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('chat')"
-                   :class="$store.router.currentRoute === 'chat' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fa-solid fa-comments text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Chat
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('text2image')"
-                   :class="$store.router.currentRoute === 'text2image' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fas fa-image text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Images
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('tts')"
-                   :class="$store.router.currentRoute === 'tts' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fa-solid fa-music text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>TTS
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('talk')"
-                   :class="$store.router.currentRoute === 'talk' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fa-solid fa-phone text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Talk
-                </a>
-                <a href="agent-jobs" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fas fa-tasks text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Agent Jobs
-                </a>
-                <a href="traces/" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fas fa-chart-line text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Traces
-                </a>
-                <a href="swagger/index.html" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                    <i class="fas fa-code text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>API
-                </a>
-                
-                <!-- System Dropdown -->
-                <div class="relative" @click.away="settingsOpen = false">
-                    <button @click="settingsOpen = !settingsOpen" 
-                            class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
-                        <i class="fas fa-cog text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Settings
-                        <i class="fas fa-chevron-down ml-1 text-xs transition-transform" :class="settingsOpen ? 'rotate-180' : ''"></i>
-                    </button>
-                    <div x-show="settingsOpen" 
-                         x-transition:enter="transition ease-out duration-200"
-                         x-transition:enter-start="opacity-0 scale-95"
-                         x-transition:enter-end="opacity-100 scale-100"
-                         x-transition:leave="transition ease-in duration-150"
-                         x-transition:leave-start="opacity-100 scale-100"
-                         x-transition:leave-end="opacity-0 scale-95"
-                         class="absolute top-full right-0 mt-1 w-48 bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)]/20 rounded-lg shadow-lg z-50 py-1">
-                        <a href="#" @click.prevent="$store.router.navigate('browse'); settingsOpen = false" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 text-sm transition-colors flex items-center">
-                            <i class="fas fa-brain text-[var(--color-primary)] mr-2 text-xs"></i>Models
-                        </a>
-                        <a href="browse/backends" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 text-sm transition-colors flex items-center">
-                            <i class="fas fa-server text-[var(--color-primary)] mr-2 text-xs"></i>Backends
-                        </a>
-                        <a href="p2p/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 text-sm transition-colors flex items-center">
-                            <i class="fa-solid fa-circle-nodes text-[var(--color-primary)] mr-2 text-xs"></i>Swarm
-                        </a>
-                        <a href="#" @click.prevent="$store.router.navigate('manage'); settingsOpen = false" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 text-sm transition-colors flex items-center">
-                            <i class="fas fa-cog text-[var(--color-primary)] mr-2 text-xs"></i>System
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Collapsible menu for small screens -->
-        <div class="lg:hidden" x-show="mobileMenuOpen" x-transition>
-            <div class="pt-3 pb-2 space-y-1 border-t border-[var(--color-bg-secondary)] mt-2">
-                <a href="#" @click.prevent="$store.router.navigate('home'); mobileMenuOpen = false" 
-                   :class="$store.router.currentRoute === 'home' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="block hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fas fa-home text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Home
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('chat'); mobileMenuOpen = false"
-                   :class="$store.router.currentRoute === 'chat' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="block hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fa-solid fa-comments text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Chat
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('text2image'); mobileMenuOpen = false"
-                   :class="$store.router.currentRoute === 'text2image' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="block hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fas fa-image text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Images
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('tts'); mobileMenuOpen = false"
-                   :class="$store.router.currentRoute === 'tts' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="block hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fa-solid fa-music text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>TTS
-                </a>
-                <a href="#" @click.prevent="$store.router.navigate('talk'); mobileMenuOpen = false"
-                   :class="$store.router.currentRoute === 'talk' ? 'text-[var(--color-primary)] bg-[var(--color-bg-secondary)]' : 'text-[var(--color-text-secondary)]'"
-                   class="block hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fa-solid fa-phone text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Talk
-                </a>
-                <a href="agent-jobs" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fas fa-tasks text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Agent Jobs
-                </a>
-                <a href="traces/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fas fa-chart-line text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Traces
-                </a>
-                <a href="swagger/index.html" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                    <i class="fas fa-code text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>API
-                </a>
-                
-                <!-- System with submenu -->
-                <div>
-                    <button @click="mobileSettingsOpen = !mobileSettingsOpen" 
-                            class="w-full text-left text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center justify-between text-sm">
-                        <div class="flex items-center">
-                            <i class="fas fa-cog text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Settings
-                        </div>
-                        <i class="fas fa-chevron-down text-xs transition-transform" :class="mobileSettingsOpen ? 'rotate-180' : ''"></i>
-                    </button>
-                    <div x-show="mobileSettingsOpen" x-transition class="overflow-hidden">
-                        <a href="#" @click.prevent="$store.router.navigate('browse'); mobileMenuOpen = false" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] pl-8 pr-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                            <i class="fas fa-brain text-[var(--color-primary)] mr-3 w-5 text-center text-xs"></i>Models
-                        </a>
-                        <a href="browse/backends" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] pl-8 pr-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                            <i class="fas fa-server text-[var(--color-primary)] mr-3 w-5 text-center text-xs"></i>Backends
-                        </a>
-                        <a href="p2p/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] pl-8 pr-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                            <i class="fa-solid fa-circle-nodes text-[var(--color-primary)] mr-3 w-5 text-center text-xs"></i>Swarm
-                        </a>
-                        <a href="#" @click.prevent="$store.router.navigate('manage'); mobileMenuOpen = false" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] pl-8 pr-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
-                            <i class="fas fa-cog text-[var(--color-primary)] mr-3 w-5 text-center text-xs"></i>System
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</nav>

core/http/views/spa.html

@@ -1,565 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-{{template "views/partials/head" .}}
-
-<!-- Critical Alpine.js component functions must be defined before Alpine loads -->
-<script>
-  // Resource Monitor component (GPU if available, otherwise RAM)
-  function resourceMonitor() {
-    return {
-      resourceData: null,
-      pollInterval: null,
-
-      async fetchResourceData() {
-        try {
-          const response = await fetch('/api/resources');
-          if (response.ok) {
-            this.resourceData = await response.json();
-          }
-        } catch (error) {
-          console.error('Error fetching resource data:', error);
-        }
-      },
-
-      startPolling() {
-        this.fetchResourceData();
-        this.pollInterval = setInterval(() => this.fetchResourceData(), 5000);
-      },
-
-      stopPolling() {
-        if (this.pollInterval) {
-          clearInterval(this.pollInterval);
-        }
-      }
-    };
-  }
-  
-  // Format bytes helper
-  function formatBytes(bytes) {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  }
-  
-  // Home input form component
-  function homeInputForm() {
-    return {
-      selectedModel: '',
-      inputValue: '',
-      shiftPressed: false,
-      fileName: '',
-      imageFiles: [],
-      audioFiles: [],
-      textFiles: [],
-      attachedFiles: [],
-      mcpMode: false,
-      mcpAvailable: false,
-      mcpModels: {},
-      currentPlaceholder: 'Send a message...',
-      placeholderIndex: 0,
-      charIndex: 0,
-      isTyping: false,
-      typingTimeout: null,
-      displayTimeout: null,
-      placeholderMessages: [
-        'What is Nuclear fusion?',
-        'How does a combustion engine work?',
-        'Explain quantum computing',
-        'What causes climate change?',
-        'How do neural networks learn?',
-        'What is the theory of relativity?',
-        'How does photosynthesis work?',
-        'Explain the water cycle',
-        'What is machine learning?',
-        'How do black holes form?'
-      ],
-
-      init() {
-        window.currentPlaceholderText = this.currentPlaceholder;
-        this.startTypingAnimation();
-        this.buildMCPModelsMap();
-        this.$nextTick(() => {
-          const select = this.$el.querySelector('select');
-          if (select && select.options.length > 1) {
-            const firstModelOption = select.options[1];
-            if (firstModelOption && firstModelOption.value) {
-              this.selectedModel = firstModelOption.value;
-              this.checkMCPAvailability();
-            }
-          }
-        });
-        this.$watch('selectedModel', () => {
-          this.checkMCPAvailability();
-        });
-      },
-
-      buildMCPModelsMap() {
-        const select = this.$el.querySelector('select');
-        if (!select) return;
-        this.mcpModels = {};
-        for (let i = 0; i < select.options.length; i++) {
-          const option = select.options[i];
-          if (option.value) {
-            const hasMcpAttr = option.getAttribute('data-has-mcp');
-            this.mcpModels[option.value] = hasMcpAttr === 'true';
-          }
-        }
-      },
-
-      checkMCPAvailability() {
-        if (!this.selectedModel) {
-          this.mcpAvailable = false;
-          this.mcpMode = false;
-          return;
-        }
-        const hasMCP = this.mcpModels[this.selectedModel] === true;
-        this.mcpAvailable = hasMCP;
-        if (!hasMCP) {
-          this.mcpMode = false;
-        }
-      },
-
-      startTypingAnimation() {
-        if (this.isTyping) return;
-        this.typeNextPlaceholder();
-      },
-
-      typeNextPlaceholder() {
-        if (this.isTyping) return;
-        this.isTyping = true;
-        this.charIndex = 0;
-        const message = this.placeholderMessages[this.placeholderIndex];
-        this.currentPlaceholder = '';
-        window.currentPlaceholderText = '';
-
-        const typeChar = () => {
-          if (this.charIndex < message.length) {
-            this.currentPlaceholder = message.substring(0, this.charIndex + 1);
-            window.currentPlaceholderText = this.currentPlaceholder;
-            this.charIndex++;
-            this.typingTimeout = setTimeout(typeChar, 30);
-          } else {
-            this.isTyping = false;
-            window.currentPlaceholderText = this.currentPlaceholder;
-            this.displayTimeout = setTimeout(() => {
-              this.placeholderIndex = (this.placeholderIndex + 1) % this.placeholderMessages.length;
-              this.typeNextPlaceholder();
-            }, 2000);
-          }
-        };
-
-        typeChar();
-      },
-
-      pauseTyping() {
-        if (this.typingTimeout) {
-          clearTimeout(this.typingTimeout);
-          this.typingTimeout = null;
-        }
-        if (this.displayTimeout) {
-          clearTimeout(this.displayTimeout);
-          this.displayTimeout = null;
-        }
-        this.isTyping = false;
-      },
-
-      resumeTyping() {
-        if (!this.inputValue.trim() && !this.isTyping) {
-          this.startTypingAnimation();
-        }
-      },
-
-      handleFocus() {
-        if (this.isTyping && this.placeholderIndex < this.placeholderMessages.length) {
-          const fullMessage = this.placeholderMessages[this.placeholderIndex];
-          this.currentPlaceholder = fullMessage;
-          window.currentPlaceholderText = fullMessage;
-        }
-        this.pauseTyping();
-      },
-
-      handleBlur() {
-        if (!this.inputValue.trim()) {
-          this.resumeTyping();
-        }
-      },
-
-      handleInput() {
-        if (this.inputValue.trim()) {
-          this.pauseTyping();
-        } else {
-          this.resumeTyping();
-        }
-      },
-
-      handleFileSelection(files, fileType) {
-        Array.from(files).forEach(file => {
-          const exists = this.attachedFiles.some(f => f.name === file.name && f.type === fileType);
-          if (!exists) {
-            this.attachedFiles.push({ name: file.name, type: fileType });
-          }
-        });
-      },
-
-      removeAttachedFile(fileType, fileName) {
-        const index = this.attachedFiles.findIndex(f => f.name === fileName && f.type === fileType);
-        if (index !== -1) {
-          this.attachedFiles.splice(index, 1);
-        }
-        if (fileType === 'image') {
-          this.imageFiles = this.imageFiles.filter(f => f.name !== fileName);
-        } else if (fileType === 'audio') {
-          this.audioFiles = this.audioFiles.filter(f => f.name !== fileName);
-        } else if (fileType === 'file') {
-          this.textFiles = this.textFiles.filter(f => f.name !== fileName);
-        }
-      }
-    };
-  }
-
-  // Start chat function for SPA
-  function startChatSPA(event) {
-    if (event) event.preventDefault();
-    const form = event ? event.target.closest('form') : document.querySelector('form');
-    if (!form) return;
-
-    const alpineComponent = form.closest('[x-data]');
-    const select = alpineComponent ? alpineComponent.querySelector('select') : null;
-    const textarea = form.querySelector('textarea');
-
-    const selectedModel = select ? select.value : '';
-    let message = textarea ? textarea.value : '';
-
-    if (!message.trim() && window.currentPlaceholderText) {
-      message = window.currentPlaceholderText;
-    }
-
-    if (!selectedModel || !message.trim()) return;
-
-    let mcpMode = false;
-    const mcpToggle = document.getElementById('spa_home_mcp_toggle');
-    if (mcpToggle && mcpToggle.checked) mcpMode = true;
-
-    const chatData = { message, imageFiles: [], audioFiles: [], textFiles: [], mcpMode };
-    const imageInput = document.getElementById('spa_home_input_image');
-    const audioInput = document.getElementById('spa_home_input_audio');
-    const fileInput = document.getElementById('spa_home_input_file');
-
-    const filePromises = [
-      ...Array.from(imageInput?.files || []).map(file =>
-        new Promise(resolve => {
-          const reader = new FileReader();
-          reader.onload = e => resolve({ name: file.name, data: e.target.result, type: file.type });
-          reader.readAsDataURL(file);
-        })
-      ),
-      ...Array.from(audioInput?.files || []).map(file =>
-        new Promise(resolve => {
-          const reader = new FileReader();
-          reader.onload = e => resolve({ name: file.name, data: e.target.result, type: file.type });
-          reader.readAsDataURL(file);
-        })
-      ),
-      ...Array.from(fileInput?.files || []).map(file =>
-        new Promise(resolve => {
-          const reader = new FileReader();
-          reader.onload = e => resolve({ name: file.name, data: e.target.result, type: file.type });
-          reader.readAsText(file);
-        })
-      )
-    ];
-
-    const navigateToChat = () => {
-      localStorage.setItem('localai_index_chat_data', JSON.stringify(chatData));
-      if (window.Alpine && Alpine.store('router')) {
-        Alpine.store('router').navigate('chat', { model: selectedModel });
-      } else {
-        window.location.href = `/chat/${selectedModel}`;
-      }
-    };
-
-    if (filePromises.length > 0) {
-      Promise.all(filePromises).then(files => {
-        files.forEach(file => {
-          if (file.type.startsWith('image/')) chatData.imageFiles.push(file);
-          else if (file.type.startsWith('audio/')) chatData.audioFiles.push(file);
-          else chatData.textFiles.push(file);
-        });
-        navigateToChat();
-      }).catch(() => navigateToChat());
-    } else {
-      navigateToChat();
-    }
-  }
-
-  // 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) {
-        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 loadedModelElements = document.querySelectorAll('[data-loaded-model]');
-    const loadedModelNames = Array.from(loadedModelElements).map(el => {
-      const span = el.querySelector('span.truncate');
-      return span ? span.textContent.trim() : '';
-    }).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;
-
-    if (component) component.stoppingAll = true;
-
-    try {
-      const stopPromises = loadedModelNames.map(modelName =>
-        fetch('/backend/shutdown', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ model: modelName })
-        })
-      );
-      await Promise.all(stopPromises);
-      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 available globally
-  window.resourceMonitor = resourceMonitor;
-  window.formatBytes = formatBytes;
-  window.homeInputForm = homeInputForm;
-  window.startChatSPA = startChatSPA;
-  window.stopModel = stopModel;
-  window.stopAllModels = stopAllModels;
-
-  // ========================================
-  // SPA Router - Alpine.js Store Definition
-  // Must be defined before Alpine.js initializes
-  // ========================================
-  
-  // Define routes and their corresponding view IDs
-  const SPA_ROUTES = {
-    'home': { title: 'LocalAI', viewId: 'view-home', paths: ['/', ''] },
-    'chat': { title: 'LocalAI - Chat', viewId: 'view-chat', paths: ['/chat'] },
-    'text2image': { title: 'LocalAI - Images', viewId: 'view-text2image', paths: ['/text2image'] },
-    'tts': { title: 'LocalAI - TTS', viewId: 'view-tts', paths: ['/tts'] },
-    'talk': { title: 'LocalAI - Talk', viewId: 'view-talk', paths: ['/talk'] },
-    'manage': { title: 'LocalAI - System', viewId: 'view-manage', paths: ['/manage'] },
-    'browse': { title: 'LocalAI - Model Gallery', viewId: 'view-browse', paths: ['/browse'] }
-  };
-
-  // Parse URL path to determine route
-  function parseUrlPath(pathname) {
-    pathname = pathname.replace(/\/$/, '') || '/';
-    
-    // Check for hash-based routes first
-    const hash = window.location.hash.slice(1);
-    if (hash) {
-      const hashParts = hash.split('/');
-      const route = hashParts[0];
-      const model = hashParts[1] || null;
-      if (SPA_ROUTES[route]) {
-        return { route, params: model ? { model } : {} };
-      }
-    }
-    
-    // Check path-based routes
-    for (const [route, config] of Object.entries(SPA_ROUTES)) {
-      for (const path of config.paths) {
-        if (pathname === path) {
-          return { route, params: {} };
-        }
-        if (pathname.startsWith(path + '/')) {
-          const param = pathname.slice(path.length + 1);
-          if (param) {
-            return { route, params: { model: param } };
-          }
-        }
-      }
-    }
-    
-    return { route: 'home', params: {} };
-  }
-
-  // Register the router store with Alpine.js on init event
-  document.addEventListener('alpine:init', () => {
-    const initialRoute = parseUrlPath(window.location.pathname);
-    
-    Alpine.store('router', {
-      currentRoute: initialRoute.route,
-      routeParams: initialRoute.params,
-      previousRoute: null,
-      
-      navigate(route, params = {}) {
-        if (!SPA_ROUTES[route]) {
-          console.warn('Unknown route:', route);
-          return;
-        }
-        
-        this.previousRoute = this.currentRoute;
-        this.currentRoute = route;
-        this.routeParams = params;
-        
-        document.title = SPA_ROUTES[route].title;
-        
-        const url = route === 'home' ? '/' : '/#' + route;
-        if (params.model) {
-          window.history.pushState({ route, params }, '', '/#' + route + '/' + params.model);
-        } else {
-          window.history.pushState({ route, params }, '', url);
-        }
-        
-        window.scrollTo(0, 0);
-        window.dispatchEvent(new CustomEvent('spa:navigate', { 
-          detail: { route, params, previousRoute: this.previousRoute } 
-        }));
-      },
-      
-      isRoute(route) {
-        return this.currentRoute === route;
-      },
-      
-      navigateToChat(model) {
-        this.navigate('chat', { model });
-      },
-      
-      navigateToText2Image(model) {
-        this.navigate('text2image', { model });
-      },
-      
-      navigateToTTS(model) {
-        this.navigate('tts', { model });
-      }
-    });
-  });
-
-  // Handle browser back/forward buttons
-  window.addEventListener('popstate', (event) => {
-    if (window.Alpine && Alpine.store('router')) {
-      if (event.state && event.state.route) {
-        Alpine.store('router').currentRoute = event.state.route;
-        Alpine.store('router').routeParams = event.state.params || {};
-      } else {
-        const parsed = parseUrlPath(window.location.pathname);
-        Alpine.store('router').currentRoute = parsed.route;
-        Alpine.store('router').routeParams = parsed.params;
-      }
-    }
-  });
-
-  // Export for use in other scripts
-  window.SPA_ROUTES = SPA_ROUTES;
-  window.parseUrlPath = parseUrlPath;
-</script>
-
-<!-- SPA Scripts -->
-<script defer src="static/spa-router.js"></script>
-<script defer src="static/spa-home.js"></script>
-<script defer src="static/chat.js"></script>
-<script defer src="static/image.js"></script>
-<script defer src="static/tts.js"></script>
-<!-- Note: talk.js is NOT included here because it has global-scope DOM access that 
-     conflicts with the SPA architecture. The SPA talk view has its own inline JS. -->
-<script src="static/assets/pdf.min.js"></script>
-<script>
-  // Initialize PDF.js worker
-  if (typeof pdfjsLib !== 'undefined') {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = 'static/assets/pdf.worker.min.js';
-  }
-
-  // Store gallery configs for header icon display and model info modal
-  window.__galleryConfigs = {};
-  {{ $allGalleryConfigs:=.GalleryConfig }}
-  {{ range $modelName, $galleryConfig := $allGalleryConfigs }}
-  window.__galleryConfigs["{{$modelName}}"] = {};
-  {{ if $galleryConfig.Icon }}
-  window.__galleryConfigs["{{$modelName}}"].Icon = "{{$galleryConfig.Icon}}";
-  {{ end }}
-  {{ if $galleryConfig.Description }}
-  window.__galleryConfigs["{{$modelName}}"].Description = {{ printf "%q" $galleryConfig.Description }};
-  {{ end }}
-  {{ if $galleryConfig.URLs }}
-  window.__galleryConfigs["{{$modelName}}"].URLs = [
-    {{ range $idx, $url := $galleryConfig.URLs }}
-    {{ if $idx }},{{ end }}{{ printf "%q" $url }}
-    {{ end }}
-  ];
-  {{ end }}
-  {{ end }}
-</script>
-
-<body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
-<div class="flex flex-col min-h-screen" x-data="{ mobileMenuOpen: false, settingsOpen: false, mobileSettingsOpen: false }">
-
-    {{template "views/partials/spa_navbar" .}}
-
-    <!-- SPA View Container -->
-    <div class="flex-1 flex flex-col">
-        
-        <!-- Home View -->
-        <div x-show="$store.router.currentRoute === 'home'" x-cloak>
-            {{template "views/spa/home" .}}
-        </div>
-
-        <!-- Chat View -->
-        <div x-show="$store.router.currentRoute === 'chat'" x-cloak class="flex-1 flex flex-col">
-            {{template "views/spa/chat" .}}
-        </div>
-
-        <!-- Text2Image View -->
-        <div x-show="$store.router.currentRoute === 'text2image'" x-cloak class="flex-1 flex flex-col">
-            {{template "views/spa/text2image" .}}
-        </div>
-
-        <!-- TTS View -->
-        <div x-show="$store.router.currentRoute === 'tts'" x-cloak class="flex-1 flex flex-col">
-            {{template "views/spa/tts" .}}
-        </div>
-
-        <!-- Talk View -->
-        <div x-show="$store.router.currentRoute === 'talk'" x-cloak class="flex-1 flex flex-col">
-            {{template "views/spa/talk" .}}
-        </div>
-
-        <!-- Manage View -->
-        <div x-show="$store.router.currentRoute === 'manage'" x-cloak class="flex-1 flex flex-col">
-            {{template "views/spa/manage" .}}
-        </div>
-
-        <!-- Browse View (Model Gallery) -->
-        <div x-show="$store.router.currentRoute === 'browse'" x-cloak class="flex-1 flex flex-col">
-            {{template "views/spa/browse" .}}
-        </div>
-
-    </div>
-
-    {{template "views/partials/footer" .}}
-</div>
-
-<style>
-/* Hide elements until Alpine.js initializes */
-[x-cloak] { display: none !important; }
-</style>
-
-</body>
-</html>

core/http/views/spa/browse.html

@@ -1,221 +0,0 @@
-<!-- Browse/Gallery View Content for SPA -->
-<!-- This is a simplified gallery view - for full functionality, use the /browse/ URL -->
-<div class="container mx-auto px-4 py-8 flex-grow" x-data="browseGallery()">
-    
-    <!-- Hero Header -->
-    <div class="hero-section">
-        <div class="hero-content">
-            <h1 class="hero-title">
-                <i class="fas fa-images mr-2"></i>Model Gallery
-            </h1>
-            <p class="hero-subtitle">Browse and install AI models</p>
-            
-            <!-- Search and Filter -->
-            <div class="flex flex-wrap justify-center gap-3 mt-6">
-                <div class="relative">
-                    <input type="text" 
-                           x-model="searchQuery"
-                           @input="filterModels()"
-                           placeholder="Search models..." 
-                           class="input pl-10 py-2 w-64">
-                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-secondary)]"></i>
-                </div>
-                
-                <select x-model="categoryFilter" @change="filterModels()" class="input py-2">
-                    <option value="">All Categories</option>
-                    <option value="chat">Chat</option>
-                    <option value="image">Image Generation</option>
-                    <option value="audio">Audio</option>
-                    <option value="embedding">Embeddings</option>
-                </select>
-            </div>
-        </div>
-    </div>
-
-    <!-- Loading State -->
-    <div x-show="loading" class="flex justify-center py-12">
-        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[var(--color-primary)]"></div>
-    </div>
-
-    <!-- Models Grid -->
-    <div x-show="!loading" class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-        <template x-for="model in filteredModels" :key="model.name">
-            <div class="card overflow-hidden hover:border-[var(--color-primary-border)] transition-colors">
-                <!-- Model Header -->
-                <div class="p-4 border-b border-[var(--color-border)]">
-                    <div class="flex items-start justify-between">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 bg-[var(--color-primary-light)] rounded-lg flex items-center justify-center mr-3">
-                                <template x-if="model.icon">
-                                    <img :src="model.icon" :alt="model.name" class="w-8 h-8 rounded">
-                                </template>
-                                <template x-if="!model.icon">
-                                    <i class="fas fa-brain text-[var(--color-primary)]"></i>
-                                </template>
-                            </div>
-                            <div>
-                                <h3 class="text-sm font-semibold text-[var(--color-text-primary)] truncate max-w-[150px]" x-text="model.name"></h3>
-                                <p class="text-xs text-[var(--color-text-secondary)]" x-text="model.gallery?.name || 'Unknown'"></p>
-                            </div>
-                        </div>
-                        <template x-if="model.installed">
-                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-500/20 text-green-300">
-                                <i class="fas fa-check mr-1"></i>Installed
-                            </span>
-                        </template>
-                    </div>
-                </div>
-                
-                <!-- Model Info -->
-                <div class="p-4">
-                    <p class="text-xs text-[var(--color-text-secondary)] line-clamp-2 mb-3" x-text="model.description || 'No description available'"></p>
-                    
-                    <!-- Tags -->
-                    <div class="flex flex-wrap gap-1 mb-3">
-                        <template x-for="tag in (model.tags || []).slice(0, 3)" :key="tag">
-                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]" x-text="tag"></span>
-                        </template>
-                    </div>
-                    
-                    <!-- Actions -->
-                    <div class="flex items-center gap-2">
-                        <template x-if="model.installed">
-                            <button @click="$store.router.navigate('chat', { model: model.name })" 
-                                    class="flex-1 btn-primary text-xs py-1.5">
-                                <i class="fas fa-comments mr-1"></i>Use
-                            </button>
-                        </template>
-                        <template x-if="!model.installed">
-                            <button @click="installModel(model)" 
-                                    :disabled="model.installing"
-                                    :class="model.installing ? 'opacity-50 cursor-not-allowed' : ''"
-                                    class="flex-1 btn-primary text-xs py-1.5">
-                                <i class="fas fa-download mr-1"></i>
-                                <span x-text="model.installing ? 'Installing...' : 'Install'"></span>
-                            </button>
-                        </template>
-                        <a :href="`/browse/${model.gallery?.name || ''}/${model.name}`" 
-                           class="btn-secondary text-xs py-1.5 px-2" title="View details">
-                            <i class="fas fa-info-circle"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </div>
-
-    <!-- Empty State -->
-    <div x-show="!loading && filteredModels.length === 0" class="text-center py-12 text-[var(--color-text-secondary)]">
-        <i class="fas fa-search text-4xl mb-3 opacity-50"></i>
-        <p>No models found</p>
-        <p class="text-sm mt-2">Try adjusting your search or filters</p>
-    </div>
-
-    <!-- Link to Full Gallery -->
-    <div class="mt-8 text-center">
-        <a href="/browse/" class="btn-secondary">
-            <i class="fas fa-external-link-alt mr-2"></i>
-            View Full Model Gallery
-        </a>
-    </div>
-</div>
-
-<script>
-// Browse gallery component
-function browseGallery() {
-    return {
-        loading: true,
-        searchQuery: '',
-        categoryFilter: '',
-        models: [],
-        filteredModels: [],
-        
-        init() {
-            this.loadModels();
-        },
-        
-        async loadModels() {
-            try {
-                // Fetch available models from gallery
-                const response = await fetch('/models/available');
-                if (response.ok) {
-                    const data = await response.json();
-                    this.models = data || [];
-                    this.filterModels();
-                }
-            } catch (error) {
-                console.error('Error loading models:', error);
-            } finally {
-                this.loading = false;
-            }
-        },
-        
-        filterModels() {
-            let filtered = this.models;
-            
-            // Search filter
-            if (this.searchQuery.trim()) {
-                const query = this.searchQuery.toLowerCase();
-                filtered = filtered.filter(m => 
-                    (m.name && m.name.toLowerCase().includes(query)) ||
-                    (m.description && m.description.toLowerCase().includes(query))
-                );
-            }
-            
-            // Category filter
-            if (this.categoryFilter) {
-                filtered = filtered.filter(m => {
-                    const tags = m.tags || [];
-                    const name = (m.name || '').toLowerCase();
-                    switch (this.categoryFilter) {
-                        case 'chat':
-                            return tags.includes('chat') || tags.includes('llm') || name.includes('chat');
-                        case 'image':
-                            return tags.includes('image') || tags.includes('diffusion') || name.includes('stable');
-                        case 'audio':
-                            return tags.includes('audio') || tags.includes('tts') || tags.includes('whisper');
-                        case 'embedding':
-                            return tags.includes('embedding') || name.includes('embed');
-                        default:
-                            return true;
-                    }
-                });
-            }
-            
-            this.filteredModels = filtered.slice(0, 20); // Limit to first 20 for performance
-        },
-        
-        async installModel(model) {
-            model.installing = true;
-            
-            try {
-                const response = await fetch('/models/apply', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        id: model.gallery?.name + '@' + model.name
-                    })
-                });
-                
-                if (response.ok) {
-                    // Model installation started
-                    alert(`Installation of ${model.name} started. This may take a while.`);
-                    // Refresh after a delay
-                    setTimeout(() => this.loadModels(), 5000);
-                } else {
-                    alert('Failed to start installation');
-                }
-            } catch (error) {
-                console.error('Error installing model:', error);
-                alert('Error: ' + error.message);
-            } finally {
-                model.installing = false;
-            }
-        }
-    };
-}
-
-window.browseGallery = browseGallery;
-</script>

core/http/views/spa/chat.html

@@ -1,273 +0,0 @@
-<!-- Chat View Content for SPA -->
-<!-- This embeds the chat interface inline in the SPA -->
-<div class="flex flex-col flex-1 overflow-hidden" x-data="chatSPA()">
-    
-    <!-- Main Chat Area -->
-    <div class="flex flex-1 overflow-hidden">
-        <!-- Sidebar for chat list -->
-        <aside class="hidden lg:flex w-64 flex-col bg-[var(--color-bg-secondary)] border-r border-[var(--color-bg-primary)]">
-            <div class="p-3 border-b border-[var(--color-bg-primary)]">
-                <button @click="createNewChatSPA()" class="w-full btn-primary text-sm py-2">
-                    <i class="fas fa-plus mr-2"></i>New Chat
-                </button>
-            </div>
-            <div class="flex-1 overflow-y-auto p-2 space-y-1">
-                <template x-for="chat in $store.chat.chats" :key="chat.id">
-                    <div 
-                        @click="switchChatSPA(chat.id)"
-                        :class="$store.chat.activeChatId === chat.id ? 'bg-[var(--color-primary-light)] border-[var(--color-primary-border)]' : 'hover:bg-[var(--color-bg-primary)] border-transparent'"
-                        class="p-2 rounded-lg cursor-pointer border transition-colors group relative">
-                        <div class="flex items-center justify-between">
-                            <span class="truncate text-sm text-[var(--color-text-primary)]" x-text="chat.name"></span>
-                            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                                <button 
-                                    @click.stop="deleteChatSPA(chat.id)"
-                                    class="p-1 text-red-400 hover:text-red-300 transition-colors"
-                                    title="Delete chat">
-                                    <i class="fas fa-trash text-xs"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="flex items-center gap-2 mt-1 text-xs text-[var(--color-text-secondary)]">
-                            <span x-text="chat.model || 'No model'"></span>
-                            <span x-show="$store.chat.hasActiveRequest(chat.id)" class="flex items-center gap-1">
-                                <span class="animate-pulse w-1.5 h-1.5 rounded-full bg-green-400"></span>
-                            </span>
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </aside>
-
-        <!-- Chat Content -->
-        <div class="flex-1 flex flex-col min-w-0">
-            <!-- Chat Header -->
-            <header class="flex items-center justify-between px-4 py-2 border-b border-[var(--color-bg-secondary)] bg-[var(--color-bg-primary)]">
-                <div class="flex items-center gap-3">
-                    <button @click="showMobileSidebar = !showMobileSidebar" class="lg:hidden p-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]">
-                        <i class="fas fa-bars"></i>
-                    </button>
-                    <div class="flex items-center gap-2">
-                        <select 
-                            x-model="currentModel"
-                            @change="updateChatModel()"
-                            class="input text-sm py-1.5 px-3">
-                            <option value="" disabled>Select model...</option>
-                            {{ range .ModelsConfig }}
-                            {{ $cfg := . }}
-                            {{ range .KnownUsecaseStrings }}
-                                {{ if eq . "FLAG_CHAT" }}
-                                <option value="{{$cfg.Name}}">{{$cfg.Name}}</option>
-                                {{ end }}
-                            {{ end }}
-                            {{ end }}
-                            {{ range .ModelsWithoutConfig }}
-                            <option value="{{.}}">{{.}}</option>
-                            {{ end }}
-                        </select>
-                    </div>
-                </div>
-                <div class="flex items-center gap-2">
-                    <span id="tokens-per-second" class="text-xs text-[var(--color-text-secondary)]">-</span>
-                    <span id="max-tokens-per-second-badge" class="hidden text-xs bg-green-500/20 text-green-300 px-2 py-0.5 rounded"></span>
-                    <div id="header-loading-indicator" class="hidden">
-                        <svg class="animate-spin h-4 w-4 text-[var(--color-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                    </div>
-                    <button @click="clearChat()" class="p-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors" title="Clear chat">
-                        <i class="fas fa-eraser"></i>
-                    </button>
-                </div>
-            </header>
-
-            <!-- Messages Container -->
-            <div id="chat" class="flex-1 overflow-y-auto p-4 space-y-4">
-                <template x-for="(message, index) in $store.chat.activeHistory" :key="index">
-                    <div :class="message.role === 'user' ? 'justify-end' : 'justify-start'" class="flex">
-                        <div :class="message.role === 'user' ? 'bg-[var(--color-primary)] text-white max-w-[80%]' : 'bg-[var(--color-bg-secondary)] text-[var(--color-text-primary)] max-w-[90%]'"
-                             class="rounded-lg px-4 py-2">
-                            <!-- Thinking/Reasoning messages -->
-                            <template x-if="message.role === 'thinking' || message.role === 'reasoning'">
-                                <div class="text-xs">
-                                    <button @click="message.expanded = !message.expanded" class="flex items-center gap-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]">
-                                        <i :class="message.expanded ? 'fa-chevron-down' : 'fa-chevron-right'" class="fas text-xs"></i>
-                                        <span>Thinking...</span>
-                                    </button>
-                                    <div x-show="message.expanded" x-html="message.html" class="mt-2 prose prose-sm prose-invert max-w-none"></div>
-                                </div>
-                            </template>
-                            <!-- Regular messages -->
-                            <template x-if="message.role !== 'thinking' && message.role !== 'reasoning'">
-                                <div x-html="message.html" class="prose prose-sm prose-invert max-w-none"></div>
-                            </template>
-                            <!-- Images -->
-                            <template x-if="message.image && message.image.length > 0">
-                                <div class="mt-2 flex flex-wrap gap-2">
-                                    <template x-for="img in message.image" :key="img">
-                                        <img :src="img" class="max-w-[200px] rounded-lg" alt="Attached image">
-                                    </template>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </template>
-                
-                <!-- Empty state -->
-                <div x-show="!$store.chat.activeHistory || $store.chat.activeHistory.length === 0" class="flex flex-col items-center justify-center h-full text-center text-[var(--color-text-secondary)]">
-                    <i class="fas fa-comments text-4xl mb-4 opacity-50"></i>
-                    <p>Start a conversation</p>
-                    <p class="text-sm mt-2">Select a model and send a message to begin</p>
-                </div>
-            </div>
-
-            <!-- Input Area -->
-            <div class="border-t border-[var(--color-bg-secondary)] p-4 bg-[var(--color-bg-primary)]">
-                <form id="prompt" @submit.prevent="submitPrompt($event)" class="relative">
-                    <div class="flex items-end gap-2">
-                        <div class="flex-1 relative">
-                            <textarea
-                                id="input"
-                                name="input"
-                                placeholder="Type a message..."
-                                class="input w-full resize-none py-3 pr-12"
-                                rows="1"
-                                @keydown.enter.prevent="if (!$event.shiftKey) submitPrompt($event)"
-                                @input="autoResize($event.target)"
-                            ></textarea>
-                            <div class="absolute right-2 bottom-2 flex items-center gap-1">
-                                <button type="button" @click="document.getElementById('input_image').click()" class="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors" title="Attach image">
-                                    <i class="fas fa-image"></i>
-                                </button>
-                                <button type="button" @click="document.getElementById('input_audio').click()" class="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors" title="Attach audio">
-                                    <i class="fas fa-microphone"></i>
-                                </button>
-                                <button type="button" @click="document.getElementById('input_file').click()" class="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors" title="Attach file">
-                                    <i class="fas fa-paperclip"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <button type="submit" id="send-button" class="btn-primary p-3">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
-                        <button type="button" id="stop-button" @click="stopRequest()" class="btn-primary p-3 bg-red-500 hover:bg-red-600" style="display: none;">
-                            <i class="fas fa-stop"></i>
-                        </button>
-                    </div>
-                    <!-- Hidden file inputs -->
-                    <input type="file" id="input_image" multiple accept="image/*" class="hidden" @change="readInputImage">
-                    <input type="file" id="input_audio" multiple accept="audio/*" class="hidden" @change="readInputAudio">
-                    <input type="file" id="input_file" multiple accept=".txt,.md,.pdf" class="hidden" @change="readInputFile">
-                </form>
-                
-                <!-- System prompt form (hidden) -->
-                <form id="system_prompt" @submit.prevent="submitSystemPrompt($event)" style="display: none;">
-                    <input type="text" id="systemPrompt" name="systemPrompt">
-                </form>
-                <input type="hidden" id="chat-model" value="{{.Model}}">
-            </div>
-        </div>
-    </div>
-
-    <!-- Mobile Sidebar Overlay -->
-    <div x-show="showMobileSidebar" @click="showMobileSidebar = false" class="lg:hidden fixed inset-0 bg-black/50 z-40"></div>
-    <aside x-show="showMobileSidebar" class="lg:hidden fixed left-0 top-0 bottom-0 w-64 bg-[var(--color-bg-secondary)] z-50 transform transition-transform"
-           :class="showMobileSidebar ? 'translate-x-0' : '-translate-x-full'">
-        <div class="p-3 border-b border-[var(--color-bg-primary)] flex items-center justify-between">
-            <span class="font-medium text-[var(--color-text-primary)]">Chats</span>
-            <button @click="showMobileSidebar = false" class="p-2 text-[var(--color-text-secondary)]">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-        <div class="p-3">
-            <button @click="createNewChatSPA(); showMobileSidebar = false" class="w-full btn-primary text-sm py-2">
-                <i class="fas fa-plus mr-2"></i>New Chat
-            </button>
-        </div>
-        <div class="flex-1 overflow-y-auto p-2 space-y-1">
-            <template x-for="chat in $store.chat.chats" :key="chat.id">
-                <div 
-                    @click="switchChatSPA(chat.id); showMobileSidebar = false"
-                    :class="$store.chat.activeChatId === chat.id ? 'bg-[var(--color-primary-light)] border-[var(--color-primary-border)]' : 'hover:bg-[var(--color-bg-primary)] border-transparent'"
-                    class="p-2 rounded-lg cursor-pointer border transition-colors">
-                    <span class="truncate text-sm text-[var(--color-text-primary)]" x-text="chat.name"></span>
-                </div>
-            </template>
-        </div>
-    </aside>
-</div>
-
-<script>
-// Chat SPA component
-function chatSPA() {
-    return {
-        currentModel: '{{.Model}}',
-        showMobileSidebar: false,
-        
-        init() {
-            // Initialize chat store if not already done
-            this.$nextTick(() => {
-                if (window.Alpine && Alpine.store('chat') && Alpine.store('chat').chats.length === 0) {
-                    Alpine.store('chat').createChat(this.currentModel, '', false);
-                }
-                // Update model from route params if available
-                const routeParams = Alpine.store('router')?.routeParams;
-                if (routeParams?.model) {
-                    this.currentModel = routeParams.model;
-                    const activeChat = Alpine.store('chat').activeChat();
-                    if (activeChat) {
-                        activeChat.model = this.currentModel;
-                    }
-                }
-            });
-        },
-        
-        updateChatModel() {
-            const activeChat = Alpine.store('chat').activeChat();
-            if (activeChat) {
-                activeChat.model = this.currentModel;
-                if (typeof window.autoSaveChats === 'function') {
-                    window.autoSaveChats();
-                }
-            }
-        },
-        
-        clearChat() {
-            if (confirm('Clear all messages in this chat?')) {
-                Alpine.store('chat').clear();
-            }
-        },
-        
-        autoResize(textarea) {
-            textarea.style.height = 'auto';
-            textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
-        }
-    };
-}
-
-// Helper functions for chat in SPA context
-function createNewChatSPA() {
-    const currentModel = document.getElementById('chat-model')?.value || '';
-    if (window.createNewChat) {
-        window.createNewChat(currentModel, '', false);
-    }
-}
-
-function switchChatSPA(chatId) {
-    if (window.switchChat) {
-        window.switchChat(chatId);
-    }
-}
-
-function deleteChatSPA(chatId) {
-    if (confirm('Delete this chat?')) {
-        if (window.deleteChat) {
-            window.deleteChat(chatId);
-        }
-    }
-}
-
-// Make component available globally
-window.chatSPA = chatSPA;
-</script>

core/http/views/spa/home.html

@@ -1,329 +0,0 @@
-<!-- Home View Content for SPA -->
-<!-- Main Content - ChatGPT-style minimal interface -->
-<div class="flex-1 flex flex-col items-center justify-center px-4 py-12">
-    <div class="w-full max-w-3xl mx-auto">
-        {{ if eq (len .ModelsConfig) 0 }}
-        <!-- No Models - Wizard Guide -->
-        <div class="hero-section">
-            <div class="hero-content">
-                <h2 class="hero-title">
-                    No Models Installed
-                </h2>
-                <p class="hero-subtitle">
-                    Get started with LocalAI by installing your first model. Choose from our gallery, import your own, or use the API to download models.
-                </p>
-            </div>
-        </div>
-        
-        <!-- Features Preview -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-            <div class="card card-animate">
-                <div class="w-10 h-10 bg-[var(--color-primary-light)] rounded-lg flex items-center justify-center mx-auto mb-3">
-                    <i class="fas fa-images text-[var(--color-primary)] text-xl"></i>
-                </div>
-                <h3 class="text-sm font-semibold text-[var(--color-text-primary)] mb-2">Model Gallery</h3>
-                <p class="text-xs text-[var(--color-text-secondary)]">Browse and install pre-configured models</p>
-            </div>
-            <div class="card card-animate">
-                <div class="w-10 h-10 bg-[var(--color-accent-light)] rounded-lg flex items-center justify-center mx-auto mb-3">
-                    <i class="fas fa-upload text-[var(--color-accent)] text-xl"></i>
-                </div>
-                <h3 class="text-sm font-semibold text-[var(--color-text-primary)] mb-2">Import Models</h3>
-                <p class="text-xs text-[var(--color-text-secondary)]">Upload your own model files</p>
-            </div>
-            <div class="card card-animate">
-                <div class="w-10 h-10 bg-[var(--color-success-light)] rounded-lg flex items-center justify-center mx-auto mb-3">
-                    <i class="fas fa-code text-[var(--color-success)] text-xl"></i>
-                </div>
-                <h3 class="text-sm font-semibold text-[var(--color-text-primary)] mb-2">API Download</h3>
-                <p class="text-xs text-[var(--color-text-secondary)]">Use the API to download models programmatically</p>
-            </div>
-        </div>
-
-        <!-- Setup Instructions -->
-        <div class="card mb-6 text-left">
-            <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-4 flex items-center">
-                <i class="fas fa-rocket text-[var(--color-accent)] mr-2"></i>
-                How to Get Started
-            </h3>
-            <div class="space-y-4">
-                <div class="flex items-start">
-                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--color-accent-light)] flex items-center justify-center mr-3 mt-0.5">
-                        <span class="text-[var(--color-accent)] font-bold text-sm">1</span>
-                    </div>
-                    <div class="flex-1">
-                        <p class="text-[var(--color-text-primary)] font-medium mb-2">Browse the Model Gallery</p>
-                        <p class="text-[var(--color-text-secondary)] text-sm">Explore our curated collection of pre-configured models. Find models for chat, image generation, audio processing, and more.</p>
-                    </div>
-                </div>
-                <div class="flex items-start">
-                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--color-accent-light)] flex items-center justify-center mr-3 mt-0.5">
-                        <span class="text-[var(--color-accent)] font-bold text-sm">2</span>
-                    </div>
-                    <div class="flex-1">
-                        <p class="text-[var(--color-text-primary)] font-medium mb-2">Install a Model</p>
-                        <p class="text-[var(--color-text-secondary)] text-sm">Click on a model from the gallery to install it, or use the import feature to upload your own model files.</p>
-                    </div>
-                </div>
-                <div class="flex items-start">
-                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--color-accent-light)] flex items-center justify-center mr-3 mt-0.5">
-                        <span class="text-[var(--color-accent)] font-bold text-sm">3</span>
-                    </div>
-                    <div class="flex-1">
-                        <p class="text-[var(--color-text-primary)] font-medium mb-2">Start Chatting</p>
-                        <p class="text-[var(--color-text-secondary)] text-sm">Once installed, return to this page to start chatting with your model or use the API to interact programmatically.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="flex flex-wrap justify-center gap-4 mb-8">
-            <a href="#" @click.prevent="$store.router.navigate('browse')" class="btn-primary">
-                <i class="fas fa-images mr-2"></i>
-                Browse Model Gallery
-            </a>
-            <a href="/import-model" class="btn-primary">
-                <i class="fas fa-upload mr-2"></i>
-                Import Model
-            </a>
-            <a href="https://localai.io/basics/getting_started/" target="_blank" class="btn-secondary">
-                <i class="fas fa-graduation-cap mr-2"></i>
-                Getting Started
-                <i class="fas fa-external-link-alt ml-2 text-sm"></i>
-            </a>
-        </div>
-        {{ else }}
-        <!-- Welcome Message / Hero Section -->
-        <div class="hero-section">
-            <div class="hero-content">
-                <div class="mb-4 flex justify-center">
-                    <img src="static/logo.png" alt="LocalAI Logo" class="h-16 md:h-20">
-                </div>
-                <h1 class="hero-title">How can I help you today?</h1>
-                <p class="hero-subtitle">Ask me anything, and I'll do my best to assist you.</p>
-            </div>
-        </div>
-
-        <!-- Chat Input Form -->
-        <div class="mb-8" x-data="homeInputForm()">
-            <!-- Model Selector with MCP Toggle -->
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Select Model</label>
-                <div class="flex items-center gap-3">
-                    <select
-                        x-model="selectedModel"
-                        @change="$nextTick(() => checkMCPAvailability())"
-                        class="input flex-1"
-                        required
-                    >
-                        <option value="" disabled class="text-[var(--color-text-secondary)]">Select a model to chat with...</option>
-                        {{ range .ModelsConfig }}
-                        {{ $cfg := . }}
-                        {{ $hasMCP := or (ne $cfg.MCP.Servers "") (ne $cfg.MCP.Stdio "") }}
-                        {{ range .KnownUsecaseStrings }}
-                            {{ if eq . "FLAG_CHAT" }}
-                            <option value="{{$cfg.Name}}" data-has-mcp="{{if $hasMCP}}true{{else}}false{{end}}" class="bg-[var(--color-bg-secondary)] text-[var(--color-text-primary)]">{{$cfg.Name}}</option>
-                            {{ end }}
-                        {{ end }}
-                        {{ end }}
-                    </select>
-                    
-                    <!-- Compact MCP Toggle - Show only if MCP is available for selected model -->
-                    <div 
-                        x-show="mcpAvailable"
-                        class="flex items-center gap-2 px-3 py-2 text-xs rounded text-[var(--color-text-primary)] bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)] whitespace-nowrap">
-                        <i class="fa-solid fa-plug text-[var(--color-primary)] text-sm"></i>
-                        <span class="text-[var(--color-text-secondary)]">MCP</span>
-                        <label class="relative inline-flex items-center cursor-pointer ml-1">
-                            <input type="checkbox" id="spa_home_mcp_toggle" class="sr-only peer" x-model="mcpMode">
-                            <div class="w-9 h-5 bg-[var(--color-bg-primary)] peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[var(--color-primary-border)] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-[var(--color-bg-secondary)] after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
-                        </label>
-                    </div>
-                </div>
-                
-                <!-- MCP Mode Notification - Compact tooltip style -->
-                <div 
-                    x-show="mcpMode && mcpAvailable"
-                    class="mt-2 p-2 bg-[var(--color-primary-light)] border border-[var(--color-primary-border)] rounded text-[var(--color-text-secondary)] text-xs">
-                    <div class="flex items-start space-x-2">
-                        <i class="fa-solid fa-info-circle text-[var(--color-primary)] mt-0.5 text-xs"></i>
-                        <p class="text-[var(--color-text-secondary)]">Non-streaming mode active. Responses may take longer to process.</p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Input Bar -->
-            <form @submit.prevent="startChatSPA($event)" class="relative w-full">
-                <!-- Attachment Tags - Show above input when files are attached -->
-                <div x-show="attachedFiles.length > 0" class="mb-3 flex flex-wrap gap-2 items-center">
-                    <template x-for="(file, index) in attachedFiles" :key="index">
-                        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-[var(--color-primary-light)] border border-[var(--color-primary-border)] text-[var(--color-text-primary)]">
-                            <i :class="file.type === 'image' ? 'fa-solid fa-image' : file.type === 'audio' ? 'fa-solid fa-microphone' : 'fa-solid fa-file'" class="text-[var(--color-primary)]"></i>
-                            <span x-text="file.name" class="max-w-[200px] truncate"></span>
-                            <button 
-                                type="button"
-                                @click="attachedFiles.splice(index, 1); removeAttachedFile(file.type, file.name)"
-                                class="ml-1 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
-                                title="Remove attachment"
-                            >
-                                <i class="fa-solid fa-times text-xs"></i>
-                            </button>
-                        </div>
-                    </template>
-                </div>
-
-                <div class="relative w-full">
-                    <textarea
-                        x-model="inputValue"
-                        :placeholder="currentPlaceholder"
-                        class="input p-3 pr-16 w-full resize-none border-0"
-                        required
-                        @keydown.shift="shiftPressed = true"
-                        @keyup.shift="shiftPressed = false"
-                        @keydown.enter.prevent="if (!shiftPressed && selectedModel && (inputValue.trim() || currentPlaceholder.trim())) { startChatSPA($event); }"
-                        @focus="handleFocus()"
-                        @blur="handleBlur()"
-                        @input="handleInput()"
-                        rows="2"
-                    ></textarea>
-                    
-                    <!-- Attachment Buttons -->
-                    <button
-                        type="button"
-                        @click="document.getElementById('spa_home_input_image').click()"
-                        class="fa-solid fa-image text-[var(--color-text-secondary)] absolute right-12 top-3 text-base p-1.5 hover:text-[var(--color-primary)] transition-colors duration-200"
-                        title="Attach images"
-                    ></button>
-                    <button
-                        type="button"
-                        @click="document.getElementById('spa_home_input_audio').click()"
-                        class="fa-solid fa-microphone text-[var(--color-text-secondary)] absolute right-20 top-3 text-base p-1.5 hover:text-[var(--color-primary)] transition-colors duration-200"
-                        title="Attach an audio file"
-                    ></button>
-                    <button
-                        type="button"
-                        @click="document.getElementById('spa_home_input_file').click()"
-                        class="fa-solid fa-file text-[var(--color-text-secondary)] absolute right-28 top-3 text-base p-1.5 hover:text-[var(--color-primary)] transition-colors duration-200"
-                        title="Upload text, markdown or PDF file"
-                    ></button>
-
-                    <!-- Send Button -->
-                    <button
-                        type="submit"
-                        :disabled="!selectedModel || (!inputValue.trim() && !currentPlaceholder.trim())"
-                        :class="!selectedModel || (!inputValue.trim() && !currentPlaceholder.trim()) ? 'opacity-50 cursor-not-allowed' : ''"
-                        class="text-lg p-2 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-200 absolute right-3 top-3"
-                        title="Send message (Enter)"
-                    >
-                        <i class="fa-solid fa-paper-plane"></i>
-                    </button>
-                </div>
-            </form>
-
-            <!-- Hidden File Inputs -->
-            <input
-                id="spa_home_input_image"
-                type="file"
-                multiple
-                accept="image/*"
-                style="display: none;"
-                @change="imageFiles = Array.from($event.target.files); handleFileSelection($event.target.files, 'image')"
-            />
-            <input
-                id="spa_home_input_audio"
-                type="file"
-                multiple
-                accept="audio/*"
-                style="display: none;"
-                @change="audioFiles = Array.from($event.target.files); handleFileSelection($event.target.files, 'audio')"
-            />
-            <input
-                id="spa_home_input_file"
-                type="file"
-                multiple
-                accept=".txt,.md,.pdf"
-                style="display: none;"
-                @change="textFiles = Array.from($event.target.files); handleFileSelection($event.target.files, 'file')"
-            />
-        </div>
-
-        <!-- Quick Links -->
-        <div class="flex flex-wrap justify-center gap-3 mb-8">
-            <a href="#" @click.prevent="$store.router.navigate('manage')" class="btn-tertiary">
-                <i class="fas fa-cog mr-2"></i>
-                Installed Models and Backends
-            </a>
-            <a href="/import-model" class="btn-tertiary">
-                <i class="fas fa-upload mr-2"></i>
-                Import Model
-            </a>
-            <a href="#" @click.prevent="$store.router.navigate('browse')" class="btn-tertiary">
-                <i class="fas fa-images mr-2"></i>
-                Browse Gallery
-            </a>
-            <a href="https://localai.io" target="_blank" class="btn-tertiary">
-                <i class="fas fa-book mr-2"></i>
-                Documentation
-            </a>
-        </div>
-
-        <!-- Memory Status Indicator (GPU or RAM) -->
-        <div class="mb-4" x-data="resourceMonitor()" x-init="startPolling()">
-            <template x-if="resourceData && resourceData.available">
-                <div class="flex items-center justify-center gap-3 text-xs text-[var(--color-text-secondary)]">
-                    <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)]/20">
-                        <i :class="resourceData.type === 'gpu' ? 'fas fa-microchip' : 'fas fa-memory'"
-                           :class="resourceData.aggregate.usage_percent > 90 ? 'text-red-400' : resourceData.aggregate.usage_percent > 70 ? 'text-yellow-400' : 'text-green-400'"></i>
-                        <span class="text-[var(--color-text-secondary)]" x-text="resourceData.type === 'gpu' ? 'GPU' : 'RAM'"></span>
-                        <span class="font-mono" 
-                              :class="resourceData.aggregate.usage_percent > 90 ? 'text-red-400' : resourceData.aggregate.usage_percent > 70 ? 'text-yellow-400' : 'text-green-400'"
-                              x-text="`${resourceData.aggregate.usage_percent.toFixed(0)}%`"></span>
-                        <div class="w-16 bg-[var(--color-bg-primary)] rounded-full h-1.5 overflow-hidden">
-                            <div class="h-full rounded-full transition-all duration-300"
-                                 :class="resourceData.aggregate.usage_percent > 90 ? 'bg-red-500' : resourceData.aggregate.usage_percent > 70 ? 'bg-yellow-500' : 'bg-[var(--color-success)]'"
-                                 :style="`width: ${resourceData.aggregate.usage_percent}%`"></div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </div>
-
-        <!-- Model Status Summary - Subtle -->
-        {{ $loadedModels := .LoadedModels }}
-        <div class="mb-8 flex items-center justify-center gap-2 text-xs text-[var(--color-text-secondary)]" 
-             x-data="{ stoppingAll: false, stopAllModels() { window.stopAllModels(this); }, stopModel(name) { window.stopModel(name); }, getLoadedCount() { return document.querySelectorAll('[data-loaded-model]').length; } }"
-             x-show="getLoadedCount() > 0"
-             style="display: none;">
-            <span class="flex items-center gap-1.5">
-                <i class="fas fa-circle text-green-500 text-[10px]"></i>
-                <span x-text="`${getLoadedCount()} model(s) loaded`"></span>
-            </span>
-            <span class="text-[var(--color-primary)] opacity-40">•</span>
-            {{ range .ModelsConfig }}
-                {{ if index $loadedModels .Name }}
-                <span class="inline-flex items-center gap-1 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors" data-loaded-model>
-                    <span class="truncate max-w-[100px]">{{.Name}}</span>
-                    <button
-                        @click="stopModel('{{.Name}}')"
-                        class="text-red-400/60 hover:text-red-400 transition-colors ml-0.5"
-                        title="Stop {{.Name}}"
-                    >
-                        <i class="fas fa-times text-[10px]"></i>
-                    </button>
-                </span>
-                {{ end }}
-            {{ end }}
-            <span class="text-[var(--color-primary)] opacity-40">•</span>
-            <button
-                @click="stopAllModels()"
-                :disabled="stoppingAll"
-                :class="stoppingAll ? 'opacity-50 cursor-not-allowed' : ''"
-                class="text-red-400/60 hover:text-red-400 transition-colors text-xs"
-                title="Stop all loaded models"
-            >
-                <span x-text="stoppingAll ? 'Stopping...' : 'Stop all'"></span>
-            </button>
-        </div>
-        {{ end }}
-    </div>
-</div>

core/http/views/spa/manage.html

@@ -1,322 +0,0 @@
-<!-- Manage View Content for SPA -->
-<div class="container mx-auto px-4 py-8 flex-grow" x-data="manageDashboard()">
-    
-    <!-- Notifications -->
-    <div class="fixed top-20 right-4 z-50 space-y-2" style="max-width: 400px;">
-        <template x-for="notification in notifications" :key="notification.id">
-            <div x-show="true" 
-                 x-transition:enter="transition ease-out duration-200"
-                 x-transition:enter-start="opacity-0"
-                 x-transition:enter-end="opacity-100"
-                 x-transition:leave="transition ease-in duration-150"
-                 x-transition:leave-start="opacity-100"
-                 x-transition:leave-end="opacity-0"
-                 :class="notification.type === 'error' ? 'bg-red-500' : 'bg-[var(--color-success)]'"
-                 class="rounded-lg p-4 text-white flex items-start space-x-3">
-                <div class="flex-shrink-0">
-                    <i :class="notification.type === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'" class="text-xl"></i>
-                </div>
-                <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium break-words" x-text="notification.message"></p>
-                </div>
-                <button @click="dismissNotification(notification.id)" class="flex-shrink-0 text-white hover:opacity-80 transition-opacity">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-        </template>
-    </div>
-
-    <!-- Hero Header -->
-    <div class="hero-section">
-        <div class="hero-content">
-            <h1 class="hero-title">
-                Model & Backend Management
-            </h1>
-            <p class="hero-subtitle">Manage your installed models and backends</p>
-            
-            <!-- Quick Actions -->
-            <div class="flex flex-wrap justify-center gap-3">
-                <a href="#" @click.prevent="$store.router.navigate('browse')" class="btn-primary text-sm py-1.5 px-3">
-                    <i class="fas fa-images mr-1.5 text-[10px]"></i>
-                    <span>Model Gallery</span>
-                </a>
-                
-                <a href="/import-model" class="btn-primary text-sm py-1.5 px-3">
-                    <i class="fas fa-plus mr-1.5 text-[10px]"></i>
-                    <span>Import Model</span>
-                </a>
-
-                <button @click="reloadModels()" class="btn-primary text-sm py-1.5 px-3">
-                    <i class="fas fa-sync-alt mr-1.5 text-[10px]"></i>
-                    <span>Update Models</span>
-                </button>
-
-                <a href="/browse/backends" class="btn-secondary text-sm py-1.5 px-3">
-                    <i class="fas fa-cogs mr-1.5 text-[10px]"></i>
-                    <span>Backend Gallery</span>
-                </a>
-
-                {{ if not .DisableRuntimeSettings }}
-                <a href="/settings" class="btn-secondary text-sm py-1.5 px-3">
-                    <i class="fas fa-cog mr-1.5 text-[10px]"></i>
-                    <span>Settings</span>
-                </a>
-                {{ end }}
-            </div>
-        </div>
-    </div>
-
-    <!-- Memory Info Section -->
-    <div class="mt-8" x-data="resourceMonitor()" x-init="startPolling()">
-        <template x-if="resourceData && resourceData.available">
-            <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)]/20 rounded-lg p-4 mb-6">
-                <div class="flex items-center justify-between mb-3">
-                    <h2 class="h3 flex items-center">
-                        <i :class="resourceData.type === 'gpu' ? 'fas fa-microchip' : 'fas fa-memory'" class="mr-2 text-[var(--color-primary)] text-sm"></i>
-                        <span x-text="resourceData.type === 'gpu' ? 'GPU Status' : 'Memory Status'"></span>
-                    </h2>
-                </div>
-                
-                <!-- Aggregate Stats -->
-                <div class="bg-[var(--color-bg-primary)] rounded p-3">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-xs font-medium text-[var(--color-text-primary)]" x-text="resourceData.type === 'gpu' ? 'Total GPU Memory' : 'System RAM'"></span>
-                        <span class="text-xs font-mono" 
-                              :class="resourceData.aggregate.usage_percent > 90 ? 'text-red-400' : resourceData.aggregate.usage_percent > 70 ? 'text-yellow-400' : 'text-green-400'"
-                              x-text="`${resourceData.aggregate.usage_percent.toFixed(1)}%`"></span>
-                    </div>
-                    <div class="w-full bg-[var(--color-bg-secondary)] rounded-full h-2 overflow-hidden">
-                        <div class="h-full rounded-full transition-all duration-300"
-                             :class="resourceData.aggregate.usage_percent > 90 ? 'bg-red-500' : resourceData.aggregate.usage_percent > 70 ? 'bg-yellow-500' : 'bg-[var(--color-success)]'"
-                             :style="`width: ${resourceData.aggregate.usage_percent}%`"></div>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </div>
-
-    <!-- Installed Models Section -->
-    <div class="mt-8">
-        <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex items-center">
-            <i class="fas fa-brain text-[var(--color-primary)] mr-2"></i>
-            Installed Models
-        </h2>
-        
-        <div class="card overflow-hidden">
-            <div class="overflow-x-auto">
-                <table class="w-full">
-                    <thead>
-                        <tr class="bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
-                            <th class="px-4 py-3 text-left text-xs font-semibold text-[var(--color-text-secondary)] uppercase">Model</th>
-                            <th class="px-4 py-3 text-left text-xs font-semibold text-[var(--color-text-secondary)] uppercase">Status</th>
-                            <th class="px-4 py-3 text-left text-xs font-semibold text-[var(--color-text-secondary)] uppercase">Backend</th>
-                            <th class="px-4 py-3 text-right text-xs font-semibold text-[var(--color-text-secondary)] uppercase">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-[var(--color-border)]">
-                        {{ $loadedModels := .LoadedModels }}
-                        {{ range .ModelsConfig }}
-                        <tr class="hover:bg-[var(--color-bg-secondary)]/50 transition-colors">
-                            <td class="px-4 py-3">
-                                <div class="flex items-center">
-                                    <span class="text-sm font-medium text-[var(--color-text-primary)]">{{.Name}}</span>
-                                </div>
-                            </td>
-                            <td class="px-4 py-3">
-                                {{ if index $loadedModels .Name }}
-                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-500/20 text-green-300">
-                                    <i class="fas fa-circle text-[6px] mr-1.5"></i>Loaded
-                                </span>
-                                {{ else }}
-                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]">
-                                    <i class="fas fa-circle text-[6px] mr-1.5"></i>Idle
-                                </span>
-                                {{ end }}
-                            </td>
-                            <td class="px-4 py-3">
-                                <span class="text-xs text-[var(--color-text-secondary)]">{{.Backend}}</span>
-                            </td>
-                            <td class="px-4 py-3 text-right">
-                                <div class="flex items-center justify-end gap-2">
-                                    {{ $hasChat := false }}
-                                    {{ range .KnownUsecaseStrings }}
-                                        {{ if eq . "FLAG_CHAT" }}{{ $hasChat = true }}{{ end }}
-                                    {{ end }}
-                                    {{ if $hasChat }}
-                                    <button @click="$store.router.navigate('chat', { model: '{{.Name}}' })" 
-                                            class="px-2 py-1 text-xs rounded bg-[var(--color-primary)] text-white hover:opacity-80 transition-opacity">
-                                        <i class="fas fa-comments mr-1"></i>Chat
-                                    </button>
-                                    {{ end }}
-                                    {{ if index $loadedModels .Name }}
-                                    <button onclick="stopModelManage('{{.Name}}')" 
-                                            class="px-2 py-1 text-xs rounded bg-red-500/20 text-red-300 hover:bg-red-500/30 transition-colors">
-                                        <i class="fas fa-stop mr-1"></i>Stop
-                                    </button>
-                                    {{ end }}
-                                    <a href="/model-editor/{{.Name}}" class="px-2 py-1 text-xs rounded bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors">
-                                        <i class="fas fa-edit"></i>
-                                    </a>
-                                </div>
-                            </td>
-                        </tr>
-                        {{ end }}
-                        {{ range .Models }}
-                        <tr class="hover:bg-[var(--color-bg-secondary)]/50 transition-colors">
-                            <td class="px-4 py-3">
-                                <div class="flex items-center">
-                                    <span class="text-sm font-medium text-[var(--color-text-primary)]">{{.}}</span>
-                                    <span class="ml-2 text-xs text-[var(--color-text-secondary)]">(no config)</span>
-                                </div>
-                            </td>
-                            <td class="px-4 py-3">
-                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]">
-                                    <i class="fas fa-circle text-[6px] mr-1.5"></i>Idle
-                                </span>
-                            </td>
-                            <td class="px-4 py-3">
-                                <span class="text-xs text-[var(--color-text-secondary)]">-</span>
-                            </td>
-                            <td class="px-4 py-3 text-right">
-                                <button @click="$store.router.navigate('chat', { model: '{{.}}' })" 
-                                        class="px-2 py-1 text-xs rounded bg-[var(--color-primary)] text-white hover:opacity-80 transition-opacity">
-                                    <i class="fas fa-comments mr-1"></i>Chat
-                                </button>
-                            </td>
-                        </tr>
-                        {{ end }}
-                    </tbody>
-                </table>
-            </div>
-            
-            {{ if and (eq (len .ModelsConfig) 0) (eq (len .Models) 0) }}
-            <div class="text-center py-8 text-[var(--color-text-secondary)]">
-                <i class="fas fa-box-open text-4xl mb-3 opacity-50"></i>
-                <p>No models installed yet</p>
-                <p class="text-sm mt-2">
-                    <a href="#" @click.prevent="$store.router.navigate('browse')" class="text-[var(--color-primary)] hover:underline">Browse the gallery</a> to get started
-                </p>
-            </div>
-            {{ end }}
-        </div>
-    </div>
-
-    <!-- Installed Backends Section -->
-    <div class="mt-8">
-        <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex items-center">
-            <i class="fas fa-server text-[var(--color-accent)] mr-2"></i>
-            Installed Backends
-        </h2>
-        
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {{ range .InstalledBackends }}
-            <div class="card p-4">
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center">
-                        <div class="w-10 h-10 bg-[var(--color-accent-light)] rounded-lg flex items-center justify-center mr-3">
-                            <i class="fas fa-cogs text-[var(--color-accent)]"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-sm font-medium text-[var(--color-text-primary)]">{{.Name}}</h3>
-                            <div class="flex flex-wrap gap-1 mt-1">
-                                {{ if .IsSystem }}
-                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-500/10 text-blue-300">
-                                    <i class="fas fa-shield-alt text-[8px] mr-1"></i>System
-                                </span>
-                                {{ else }}
-                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-success)]/10 text-green-300">
-                                    <i class="fas fa-download text-[8px] mr-1"></i>User
-                                </span>
-                                {{ end }}
-                                {{ if .IsMeta }}
-                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-accent-light)] text-[var(--color-accent)]">
-                                    <i class="fas fa-layer-group text-[8px] mr-1"></i>Meta
-                                </span>
-                                {{ end }}
-                            </div>
-                        </div>
-                    </div>
-                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-500/20 text-green-300">
-                        Installed
-                    </span>
-                </div>
-            </div>
-            {{ else }}
-            <div class="col-span-full text-center py-8 text-[var(--color-text-secondary)]">
-                <i class="fas fa-plug text-4xl mb-3 opacity-50"></i>
-                <p>No backends installed yet</p>
-                <p class="text-sm mt-2">
-                    <a href="/browse/backends" class="text-[var(--color-primary)] hover:underline">Browse the backend gallery</a>
-                </p>
-            </div>
-            {{ end }}
-        </div>
-    </div>
-</div>
-
-<script>
-// Manage dashboard component
-function manageDashboard() {
-    return {
-        notifications: [],
-        
-        init() {
-            // Initialize
-        },
-        
-        addNotification(message, type = 'success') {
-            const id = Date.now();
-            this.notifications.push({ id, message, type });
-            setTimeout(() => this.dismissNotification(id), 5000);
-        },
-        
-        dismissNotification(id) {
-            this.notifications = this.notifications.filter(n => n.id !== id);
-        },
-        
-        reloadModels() {
-            fetch('/models/reload', { method: 'POST' })
-                .then(response => {
-                    if (response.ok) {
-                        this.addNotification('Models reloaded successfully');
-                        setTimeout(() => window.location.reload(), 1000);
-                    } else {
-                        this.addNotification('Failed to reload models', 'error');
-                    }
-                })
-                .catch(error => {
-                    this.addNotification('Error: ' + error.message, 'error');
-                });
-        }
-    };
-}
-
-// Stop model function
-async function stopModelManage(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) {
-            setTimeout(() => window.location.reload(), 500);
-        } else {
-            alert('Failed to stop model');
-        }
-    } catch (error) {
-        console.error('Error stopping model:', error);
-        alert('Failed to stop model');
-    }
-}
-
-window.manageDashboard = manageDashboard;
-window.stopModelManage = stopModelManage;
-</script>

core/http/views/spa/talk.html

@@ -1,229 +0,0 @@
-<!-- Talk View Content for SPA -->
-<div class="container mx-auto px-4 py-8 flex-grow">
-    <!-- Hero Section -->
-    <div class="hero-section">
-        <div class="hero-content">
-            <h1 class="hero-title">
-                <i class="fas fa-comments mr-2"></i>Talk Interface
-            </h1>
-            <p class="hero-subtitle">Speak with your AI models using voice interaction</p>
-        </div>
-    </div>
-
-    <!-- Talk Interface -->
-    <div class="max-w-3xl mx-auto">
-        <div class="card overflow-hidden">
-            <!-- Talk Interface Body -->
-            <div class="p-6">
-                <!-- Recording Status -->
-                <div id="spa-recording" class="bg-red-500/10 border border-red-500/30 rounded-lg p-4 mb-4 flex items-center space-x-3" style="display: none;">
-                    <i class="fa-solid fa-microphone text-2xl text-red-400"></i>
-                    <span class="text-red-300 font-medium">Recording... press "Stop recording" to stop</span>
-                </div>
-                
-                <!-- Loader -->
-                <div id="spa-talk-loader" class="my-4 flex justify-center" style="display: none;">
-                    <div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-[var(--color-primary)]"></div>
-                </div>
-                
-                <!-- Status Text -->
-                <div id="spa-statustext" class="my-4 p-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-primary)]" style="min-height: 3rem;">Press the record button to start recording.</div>
-                
-                <!-- Note -->
-                <div class="bg-[var(--color-primary-light)] border border-[var(--color-primary-border)] rounded-lg p-4 mb-6">
-                    <div class="flex items-start">
-                        <i class="fas fa-info-circle text-[var(--color-primary)] mt-1 mr-3 flex-shrink-0"></i>
-                        <p class="text-[var(--color-text-secondary)]">
-                            <strong class="text-[var(--color-primary)]">Note:</strong> You need an LLM, an audio-transcription (whisper), and a TTS model installed for this to work. Select the appropriate models below and click 'Talk' to start recording.
-                        </p>
-                    </div>
-                </div>
-                
-                <!-- Model Selectors -->
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-                    <!-- LLM Model -->
-                    <div class="space-y-2">
-                        <label for="spa-modelSelect" class="flex items-center text-[var(--color-text-secondary)] font-medium">
-                            <i class="fas fa-brain text-[var(--color-primary)] mr-2"></i>LLM Model
-                        </label>
-                        <select id="spa-modelSelect" class="input w-full p-2.5">
-                            <option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
-                            {{ range .ModelsConfig }}
-                            <option value="{{.Name}}" class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.Name}}</option>
-                            {{ end }}
-                        </select>
-                    </div>
-                    
-                    <!-- Whisper Model -->
-                    <div class="space-y-2">
-                        <label for="spa-whisperModelSelect" class="flex items-center text-[var(--color-text-secondary)] font-medium">
-                            <i class="fas fa-ear-listen text-[var(--color-accent)] mr-2"></i>Whisper Model
-                        </label>
-                        <select id="spa-whisperModelSelect" class="input w-full p-2.5">
-                            <option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
-                            {{ range .ModelsConfig }}
-                            <option value="{{.Name}}" class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.Name}}</option>
-                            {{ end }}
-                        </select>
-                    </div>
-                    
-                    <!-- TTS Model -->
-                    <div class="space-y-2">
-                        <label for="spa-ttsModelSelect" class="flex items-center text-[var(--color-text-secondary)] font-medium">
-                            <i class="fas fa-volume-high text-green-400 mr-2"></i>TTS Model
-                        </label>
-                        <select id="spa-ttsModelSelect" class="input w-full p-2.5">
-                            <option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
-                            {{ range .ModelsConfig }}
-                            <option value="{{.Name}}" class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.Name}}</option>
-                            {{ end }}
-                        </select>
-                    </div>
-                </div>
-                
-                <!-- Buttons -->
-                <div class="flex items-center justify-between mt-8">
-                    <button id="spa-recordButton" onclick="startTalkRecording()" 
-                        class="inline-flex items-center bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors">
-                        <i class="fas fa-microphone mr-2"></i>
-                        <span>Talk</span>
-                    </button>
-                    <button id="spa-stopRecordButton" onclick="stopTalkRecording()" style="display: none;"
-                        class="inline-flex items-center bg-gray-500 hover:bg-gray-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors">
-                        <i class="fas fa-stop mr-2"></i>
-                        <span>Stop Recording</span>
-                    </button>
-                </div>
-                
-                <!-- Audio Result -->
-                <div id="spa-talk-result" class="mt-6"></div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-// Simplified Talk functions for SPA
-let talkMediaRecorder = null;
-let talkAudioChunks = [];
-
-function startTalkRecording() {
-    const statusText = document.getElementById('spa-statustext');
-    const recording = document.getElementById('spa-recording');
-    const recordButton = document.getElementById('spa-recordButton');
-    const stopButton = document.getElementById('spa-stopRecordButton');
-    
-    navigator.mediaDevices.getUserMedia({ audio: true })
-        .then(stream => {
-            talkMediaRecorder = new MediaRecorder(stream);
-            talkAudioChunks = [];
-            
-            talkMediaRecorder.ondataavailable = event => {
-                talkAudioChunks.push(event.data);
-            };
-            
-            talkMediaRecorder.onstop = () => {
-                const audioBlob = new Blob(talkAudioChunks, { type: 'audio/wav' });
-                processTalkAudio(audioBlob);
-            };
-            
-            talkMediaRecorder.start();
-            recording.style.display = 'flex';
-            recordButton.style.display = 'none';
-            stopButton.style.display = 'inline-flex';
-            statusText.textContent = 'Recording... Speak now.';
-        })
-        .catch(error => {
-            statusText.textContent = 'Error accessing microphone: ' + error.message;
-        });
-}
-
-function stopTalkRecording() {
-    const recording = document.getElementById('spa-recording');
-    const recordButton = document.getElementById('spa-recordButton');
-    const stopButton = document.getElementById('spa-stopRecordButton');
-    
-    if (talkMediaRecorder && talkMediaRecorder.state !== 'inactive') {
-        talkMediaRecorder.stop();
-        talkMediaRecorder.stream.getTracks().forEach(track => track.stop());
-    }
-    
-    recording.style.display = 'none';
-    recordButton.style.display = 'inline-flex';
-    stopButton.style.display = 'none';
-}
-
-function processTalkAudio(audioBlob) {
-    const statusText = document.getElementById('spa-statustext');
-    const loader = document.getElementById('spa-talk-loader');
-    const result = document.getElementById('spa-talk-result');
-    const llmModel = document.getElementById('spa-modelSelect').value;
-    const whisperModel = document.getElementById('spa-whisperModelSelect').value;
-    const ttsModel = document.getElementById('spa-ttsModelSelect').value;
-    
-    if (!llmModel || !whisperModel || !ttsModel) {
-        statusText.textContent = 'Please select all three models (LLM, Whisper, TTS)';
-        return;
-    }
-    
-    loader.style.display = 'flex';
-    statusText.textContent = 'Processing...';
-    
-    // Step 1: Transcribe audio
-    const formData = new FormData();
-    formData.append('file', audioBlob, 'audio.wav');
-    formData.append('model', whisperModel);
-    
-    fetch('/v1/audio/transcriptions', {
-        method: 'POST',
-        body: formData
-    })
-    .then(response => response.json())
-    .then(data => {
-        const transcription = data.text;
-        statusText.textContent = 'You said: ' + transcription;
-        
-        // Step 2: Send to LLM
-        return fetch('/v1/chat/completions', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                model: llmModel,
-                messages: [{ role: 'user', content: transcription }]
-            })
-        });
-    })
-    .then(response => response.json())
-    .then(data => {
-        const reply = data.choices[0].message.content;
-        statusText.textContent = 'AI: ' + reply;
-        
-        // Step 3: Convert to speech
-        return fetch('/tts', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                model: ttsModel,
-                input: reply
-            })
-        });
-    })
-    .then(response => response.blob())
-    .then(blob => {
-        loader.style.display = 'none';
-        const audioUrl = URL.createObjectURL(blob);
-        result.innerHTML = `
-            <audio controls autoplay class="w-full">
-                <source src="${audioUrl}" type="audio/wav">
-            </audio>
-        `;
-    })
-    .catch(error => {
-        loader.style.display = 'none';
-        statusText.textContent = 'Error: ' + error.message;
-    });
-}
-
-window.startTalkRecording = startTalkRecording;
-window.stopTalkRecording = stopTalkRecording;
-</script>

core/http/views/spa/text2image.html

@@ -1,155 +0,0 @@
-<!-- Text2Image View Content for SPA -->
-<div class="flex flex-col flex-1 overflow-hidden">
-    <div class="flex flex-1 overflow-hidden">
-        <!-- Two Column Layout: Settings on Left, Preview on Right -->
-        <div class="flex flex-col lg:flex-row flex-1 gap-4 p-4 overflow-hidden">
-            <!-- Left Column: Generation Settings -->
-            <div class="flex-shrink-0 lg:w-1/4 flex flex-col min-h-0">
-                <div class="card p-3 space-y-3 overflow-y-auto flex-1">
-                    <!-- Model Selection -->
-                    <div class="space-y-1.5">
-                        <div class="flex items-center justify-between gap-2">
-                            <label class="text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide flex-shrink-0">Model</label>
-                        </div>
-                        <select id="image-model-select" class="input w-full p-1.5 text-xs" @change="document.getElementById('image-model').value = $event.target.value">
-                            <option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
-                            {{ $model:=.Model}}
-                            {{ range .ModelsConfig }}
-                              {{ $cfg := . }}
-                              {{ range .KnownUsecaseStrings }}
-                                {{ if eq . "FLAG_IMAGE" }}
-                                    <option value="{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{$cfg.Name}}</option>
-                                {{ end }}
-                              {{ end }}
-                            {{ end }}
-                            {{ range .ModelsWithoutConfig }}
-                                <option value="{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
-                            {{end}}
-                        </select>
-                    </div>
-                    
-                    <div class="relative">
-                        <input id="image-model" type="hidden" value="{{.Model}}">
-                        <form id="genimage" @submit.prevent="genImage($event)">
-                            <!-- Basic Settings -->
-                            <div class="space-y-2">
-                                <!-- Prompt -->
-                                <div class="space-y-1">
-                                    <label for="image-input" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
-                                        <i class="fas fa-magic mr-1.5 text-[var(--color-primary)]"></i>Prompt
-                                    </label>
-                                    <textarea
-                                        id="image-input"
-                                        name="input"
-                                        placeholder="Describe the image you want to generate..."
-                                        autocomplete="off"
-                                        rows="3"
-                                        class="input w-full p-1.5 text-xs resize-y"
-                                        required
-                                    ></textarea>
-                                </div>
-
-                                <!-- Negative Prompt -->
-                                <div class="space-y-1">
-                                    <label for="negative-prompt" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
-                                        <i class="fas fa-ban mr-1.5 text-[var(--color-primary)]"></i>Negative Prompt
-                                    </label>
-                                    <textarea
-                                        id="negative-prompt"
-                                        name="negative-prompt"
-                                        placeholder="Things to avoid in the image..."
-                                        rows="2"
-                                        class="input w-full p-1.5 text-xs resize-y"
-                                    ></textarea>
-                                </div>
-
-                                <!-- Size Selection -->
-                                <div class="space-y-1">
-                                    <label for="image-size" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
-                                        <i class="fas fa-expand-arrows-alt mr-1.5 text-[var(--color-primary)]"></i>Image Size
-                                    </label>
-                                    <div class="flex flex-wrap gap-1.5 mb-1.5">
-                                        <button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)]" data-size="256x256">256×256</button>
-                                        <button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)] bg-[var(--color-primary)] text-white" data-size="512x512">512×512</button>
-                                        <button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)]" data-size="768x768">768×768</button>
-                                        <button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)]" data-size="1024x1024">1024×1024</button>
-                                    </div>
-                                    <input
-                                        type="text"
-                                        id="image-size"
-                                        value="512x512"
-                                        placeholder="e.g., 256x256, 512x512, 1024x1024"
-                                        class="input p-1.5 text-xs w-full"
-                                    />
-                                </div>
-
-                                <!-- Number of Images -->
-                                <div class="space-y-1">
-                                    <label for="image-count" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
-                                        <i class="fas fa-images mr-1.5 text-[var(--color-primary)]"></i>Number of Images
-                                    </label>
-                                    <input
-                                        type="number"
-                                        id="image-count"
-                                        name="n"
-                                        min="1"
-                                        max="4"
-                                        value="1"
-                                        class="input p-1.5 text-xs w-full"
-                                    />
-                                </div>
-                            </div>
-                            
-                            <!-- Submit Button -->
-                            <div class="mt-4">
-                                <button
-                                    type="submit"
-                                    id="generate-btn"
-                                    class="w-full px-2 py-1.5 text-xs rounded text-[var(--color-bg-primary)] bg-[var(--color-primary)] hover:bg-[var(--color-primary)]/90 transition-colors font-medium"
-                                >
-                                    <i class="fas fa-magic mr-1.5"></i>Generate Image
-                                </button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Right Column: Image Preview -->
-            <div class="flex-grow lg:w-3/4 flex flex-col min-h-0">
-                <div class="relative flex-1 min-h-0 overflow-y-auto">
-                    <!-- Loading Animation -->
-                    <div id="loader" class="hidden absolute inset-0 flex items-center justify-center bg-[var(--color-bg-primary)]/80 rounded-xl z-10">
-                        <div class="text-center">
-                            <svg class="animate-spin h-10 w-10 text-[var(--color-primary)] mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                            </svg>
-                            <p class="text-xs text-[var(--color-text-secondary)]">Generating image...</p>
-                        </div>
-                    </div>
-                    <!-- Placeholder when no images -->
-                    <div id="result-placeholder" class="min-h-[400px] flex items-center justify-center flex-shrink-0">
-                        <p class="text-xs text-[var(--color-text-secondary)] italic text-center">Your generated images will appear here</p>
-                    </div>
-                    <!-- Results container -->
-                    <div id="result" class="grid grid-cols-1 sm:grid-cols-2 gap-4 pb-4"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-// Size preset buttons for SPA
-document.querySelectorAll('.size-preset').forEach(button => {
-    button.addEventListener('click', function() {
-        const size = this.getAttribute('data-size');
-        document.getElementById('image-size').value = size;
-        document.querySelectorAll('.size-preset').forEach(btn => {
-            btn.classList.remove('bg-[var(--color-primary)]', 'text-white');
-        });
-        this.classList.add('bg-[var(--color-primary)]', 'text-white');
-    });
-});
-</script>

core/http/views/spa/tts.html

@@ -1,138 +0,0 @@
-<!-- TTS View Content for SPA -->
-<div class="container mx-auto px-4 py-8 flex-grow">
-    <!-- Hero Section -->
-    <div class="hero-section">
-        <div class="hero-content">
-            <h1 class="hero-title">
-                <i class="fas fa-volume-high mr-2"></i>Text to Speech
-            </h1>
-            <p class="hero-subtitle">Convert your text into natural-sounding speech</p>
-        </div>
-    </div>
-
-    <!-- TTS Interface -->
-    <div class="max-w-3xl mx-auto">
-        <div class="card overflow-hidden">
-            <!-- Header with Model Selection -->
-            <div class="border-b border-[var(--color-bg-secondary)] p-5">
-                <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
-                    <!-- Model Selection -->
-                    <div class="flex items-center">
-                        <label for="tts-model-select" class="mr-3 text-[var(--color-text-secondary)] font-medium">
-                            <i class="fas fa-microphone-lines text-[var(--color-accent)] mr-2"></i>Model:
-                        </label>
-                        <select id="tts-model-select" class="input p-2.5" @change="document.getElementById('tts-model').value = $event.target.value">
-                            <option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
-                            {{ $model:=.Model}}
-                            {{ range .ModelsConfig }}
-                                {{ $cfg := . }}
-                                {{ range .KnownUsecaseStrings }}
-                                    {{ if eq . "FLAG_TTS" }}
-                                        <option value="{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{$cfg.Name}}</option>
-                                    {{ end }}
-                                {{ end }}
-                            {{ end }}
-                            {{ range .ModelsWithoutConfig }}
-                                <option value="{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
-                            {{end}}
-                        </select>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Input Area -->
-            <div class="p-6">
-                <div class="bg-[var(--color-accent-light)] border border-[var(--color-accent-border)] rounded-lg p-4 mb-6">
-                    <div class="flex items-start">
-                        <i class="fas fa-info-circle text-[var(--color-accent)] mt-1 mr-3 flex-shrink-0"></i>
-                        <p class="text-[var(--color-text-secondary)]">
-                            Enter your text below and submit to generate speech with the selected TTS model.
-                            The generated audio will appear below the input field.
-                        </p>
-                    </div>
-                </div>
-
-                <input id="tts-model" type="hidden" value="{{.Model}}">
-                <form id="tts" @submit.prevent="generateTTS($event)" class="mb-6">
-                    <div class="relative">
-                        <input
-                            type="text"
-                            id="tts-input"
-                            name="input"
-                            placeholder="Enter text to convert to speech..."
-                            autocomplete="off"
-                            class="input w-full p-4 pl-4 pr-12"
-                            required
-                        />
-                        <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-[var(--color-accent)] hover:text-[var(--color-primary)] transition icon-hover">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
-                    </div>
-                </form>
-
-                <!-- Loading indicator -->
-                <div class="flex justify-center my-6">
-                    <div id="tts-loader" class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-[var(--color-accent)]" style="display: none;"></div>
-                </div>
-
-                <!-- Results Area -->
-                <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg p-4 min-h-[100px] flex items-center justify-center">
-                    <div id="tts-result" class="w-full text-center text-[var(--color-text-secondary)]">
-                        <p>Generated audio will appear here</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-// TTS generation function for SPA
-function generateTTS(event) {
-    if (event) event.preventDefault();
-    
-    const input = document.getElementById('tts-input');
-    const model = document.getElementById('tts-model')?.value;
-    const loader = document.getElementById('tts-loader');
-    const result = document.getElementById('tts-result');
-    
-    if (!input?.value.trim() || !model) {
-        alert('Please enter text and select a model');
-        return;
-    }
-    
-    loader.style.display = 'block';
-    result.innerHTML = '';
-    
-    fetch('/tts', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            model: model,
-            input: input.value.trim()
-        })
-    })
-    .then(response => response.blob())
-    .then(blob => {
-        loader.style.display = 'none';
-        const audioUrl = URL.createObjectURL(blob);
-        result.innerHTML = `
-            <audio controls class="w-full">
-                <source src="${audioUrl}" type="audio/wav">
-                Your browser does not support the audio element.
-            </audio>
-            <a href="${audioUrl}" download="tts_output.wav" class="mt-3 inline-block btn-secondary text-sm">
-                <i class="fas fa-download mr-2"></i>Download
-            </a>
-        `;
-    })
-    .catch(error => {
-        loader.style.display = 'none';
-        result.innerHTML = `<p class="text-red-400">Error generating speech: ${error.message}</p>`;
-    });
-}
-
-window.generateTTS = generateTTS;
-</script>