From 25bee71bb8077aae09eb1b91196c7d1cabd33b11 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@users.noreply.github.com>
Date: Thu, 20 Feb 2025 15:02:18 +0100
Subject: [PATCH] feat(ui): do also filter tts and image models (#4871)

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/routes/ui.go          | 105 +++++++++++++++++++++-----------
 core/http/views/chat.html       |  18 ++----
 core/http/views/text2image.html |  16 +++--
 core/http/views/tts.html        |  16 +++--
 4 files changed, 94 insertions(+), 61 deletions(-)

diff --git a/core/http/routes/ui.go b/core/http/routes/ui.go
index f60b3698..350d0914 100644
--- a/core/http/routes/ui.go
+++ b/core/http/routes/ui.go
@@ -327,23 +327,31 @@ func RegisterUIRoutes(app *fiber.App,
 	})
 
 	app.Get("/chat/", func(c *fiber.Ctx) error {
-
-		allModels, _ := services.ListModels(cl, ml, config.NoFilterFn, services.SKIP_IF_CONFIGURED)
 		backendConfigs := cl.GetAllBackendConfigs()
 		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
-		if len(allModels) == 0 {
+		if len(backendConfigs)+len(modelsWithoutConfig) == 0 {
 			// If no model is available redirect to the index which suggests how to install models
 			return c.Redirect(utils.BaseURL(c))
 		}
+		modelThatCanBeUsed := ""
+
+		title := "LocalAI - Chat"
+
+		for _, b := range backendConfigs {
+			if b.HasUsecases(config.FLAG_CHAT) {
+				modelThatCanBeUsed = b.Name
+				title = "LocalAI - Chat with " + modelThatCanBeUsed
+				break
+			}
+		}
 
 		summary := fiber.Map{
-			"Title":               "LocalAI - Chat with " + allModels[0],
+			"Title":               title,
 			"BaseURL":             utils.BaseURL(c),
-			"AllModels":           allModels,
 			"ModelsWithoutConfig": modelsWithoutConfig,
 			"ModelsConfig":        backendConfigs,
-			"Model":               allModels[0],
+			"Model":               modelThatCanBeUsed,
 			"Version":             internal.PrintableVersion(),
 			"IsP2PEnabled":        p2p.IsP2PEnabled(),
 		}
@@ -354,7 +362,6 @@ func RegisterUIRoutes(app *fiber.App,
 
 	// Show the Chat page
 	app.Get("/chat/:model", func(c *fiber.Ctx) error {
-		allModels, _ := services.ListModels(cl, ml, config.NoFilterFn, services.SKIP_IF_CONFIGURED)
 		backendConfigs := cl.GetAllBackendConfigs()
 		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
@@ -363,7 +370,6 @@ func RegisterUIRoutes(app *fiber.App,
 			"BaseURL":             utils.BaseURL(c),
 			"ModelsConfig":        backendConfigs,
 			"ModelsWithoutConfig": modelsWithoutConfig,
-			"AllModels":           allModels,
 			"Model":               c.Params("model"),
 			"Version":             internal.PrintableVersion(),
 			"IsP2PEnabled":        p2p.IsP2PEnabled(),
@@ -375,14 +381,16 @@ func RegisterUIRoutes(app *fiber.App,
 
 	app.Get("/text2image/:model", func(c *fiber.Ctx) error {
 		backendConfigs := cl.GetAllBackendConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
 		summary := fiber.Map{
-			"Title":        "LocalAI - Generate images with " + c.Params("model"),
-			"BaseURL":      utils.BaseURL(c),
-			"ModelsConfig": backendConfigs,
-			"Model":        c.Params("model"),
-			"Version":      internal.PrintableVersion(),
-			"IsP2PEnabled": p2p.IsP2PEnabled(),
+			"Title":               "LocalAI - Generate images with " + c.Params("model"),
+			"BaseURL":             utils.BaseURL(c),
+			"ModelsConfig":        backendConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               c.Params("model"),
+			"Version":             internal.PrintableVersion(),
+			"IsP2PEnabled":        p2p.IsP2PEnabled(),
 		}
 
 		// Render index
@@ -390,21 +398,33 @@ func RegisterUIRoutes(app *fiber.App,
 	})
 
 	app.Get("/text2image/", func(c *fiber.Ctx) error {
-
 		backendConfigs := cl.GetAllBackendConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
-		if len(backendConfigs) == 0 {
+		if len(backendConfigs)+len(modelsWithoutConfig) == 0 {
 			// If no model is available redirect to the index which suggests how to install models
 			return c.Redirect(utils.BaseURL(c))
 		}
 
+		modelThatCanBeUsed := ""
+		title := "LocalAI - Generate images"
+
+		for _, b := range backendConfigs {
+			if b.HasUsecases(config.FLAG_IMAGE) {
+				modelThatCanBeUsed = b.Name
+				title = "LocalAI - Generate images with " + modelThatCanBeUsed
+				break
+			}
+		}
+
 		summary := fiber.Map{
-			"Title":        "LocalAI - Generate images with " + backendConfigs[0].Name,
-			"BaseURL":      utils.BaseURL(c),
-			"ModelsConfig": backendConfigs,
-			"Model":        backendConfigs[0].Name,
-			"Version":      internal.PrintableVersion(),
-			"IsP2PEnabled": p2p.IsP2PEnabled(),
+			"Title":               title,
+			"BaseURL":             utils.BaseURL(c),
+			"ModelsConfig":        backendConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               modelThatCanBeUsed,
+			"Version":             internal.PrintableVersion(),
+			"IsP2PEnabled":        p2p.IsP2PEnabled(),
 		}
 
 		// Render index
@@ -413,14 +433,16 @@ func RegisterUIRoutes(app *fiber.App,
 
 	app.Get("/tts/:model", func(c *fiber.Ctx) error {
 		backendConfigs := cl.GetAllBackendConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
 		summary := fiber.Map{
-			"Title":        "LocalAI - Generate images with " + c.Params("model"),
-			"BaseURL":      utils.BaseURL(c),
-			"ModelsConfig": backendConfigs,
-			"Model":        c.Params("model"),
-			"Version":      internal.PrintableVersion(),
-			"IsP2PEnabled": p2p.IsP2PEnabled(),
+			"Title":               "LocalAI - Generate images with " + c.Params("model"),
+			"BaseURL":             utils.BaseURL(c),
+			"ModelsConfig":        backendConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               c.Params("model"),
+			"Version":             internal.PrintableVersion(),
+			"IsP2PEnabled":        p2p.IsP2PEnabled(),
 		}
 
 		// Render index
@@ -428,21 +450,32 @@ func RegisterUIRoutes(app *fiber.App,
 	})
 
 	app.Get("/tts/", func(c *fiber.Ctx) error {
-
 		backendConfigs := cl.GetAllBackendConfigs()
+		modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
 
-		if len(backendConfigs) == 0 {
+		if len(backendConfigs)+len(modelsWithoutConfig) == 0 {
 			// If no model is available redirect to the index which suggests how to install models
 			return c.Redirect(utils.BaseURL(c))
 		}
 
+		modelThatCanBeUsed := ""
+		title := "LocalAI - Generate audio"
+
+		for _, b := range backendConfigs {
+			if b.HasUsecases(config.FLAG_CHAT) {
+				modelThatCanBeUsed = b.Name
+				title = "LocalAI - Generate audio with " + modelThatCanBeUsed
+				break
+			}
+		}
 		summary := fiber.Map{
-			"Title":        "LocalAI - Generate audio with " + backendConfigs[0].Name,
-			"BaseURL":      utils.BaseURL(c),
-			"ModelsConfig": backendConfigs,
-			"Model":        backendConfigs[0].Name,
-			"IsP2PEnabled": p2p.IsP2PEnabled(),
-			"Version":      internal.PrintableVersion(),
+			"Title":               title,
+			"BaseURL":             utils.BaseURL(c),
+			"ModelsConfig":        backendConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               modelThatCanBeUsed,
+			"IsP2PEnabled":        p2p.IsP2PEnabled(),
+			"Version":             internal.PrintableVersion(),
 		}
 
 		// Render index
diff --git a/core/http/views/chat.html b/core/http/views/chat.html
index 4f06a1a4..b3e9bd4a 100644
--- a/core/http/views/chat.html
+++ b/core/http/views/chat.html
@@ -44,7 +44,7 @@ SOFTWARE.
 
       <div class="flex items-center justify-between">
 
-      <h1 class="text-lg font-semibold"> <i class="fa-solid fa-comments"></i> Chat with {{.Model}} <a href="browse?term={{.Model}}" ><i class="fas fa-brain pr-2"></i></a> <a href="https://localai.io/features/text-generation/" target="_blank" >
+      <h1 class="text-lg font-semibold"> <i class="fa-solid fa-comments"></i> Chat {{ if .Model }} with {{.Model}} {{ end }} <a href="browse?term={{.Model}}" ><i class="fas fa-brain pr-2"></i></a> <a href="https://localai.io/features/text-generation/" target="_blank" >
         <i class="fas fa-circle-info pr-2"></i>
       </a></h1>
       <div x-show="component === 'menu'" id="menu">
@@ -101,22 +101,14 @@ SOFTWARE.
         {{ $model:=.Model}}
         {{ range .ModelsConfig }}
           {{ $cfg := . }}
-          {{ if eq .Name $model }}
-            <option value="chat/{{.Name}}" selected  class="bg-gray-700 text-white">{{.Name}}</option>
-          {{ else }}
-            {{ range .KnownUsecaseStrings }}
-              {{ if eq . "FLAG_CHAT" }}
-                  <option value="chat/{{$cfg.Name}}" class="bg-gray-700 text-white">{{$cfg.Name}}</option>
-              {{ end }}
+          {{ range .KnownUsecaseStrings }}
+            {{ if eq . "FLAG_CHAT" }}
+                <option value="chat/{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-gray-700 text-white">{{$cfg.Name}}</option>
             {{ end }}
           {{ end }}
         {{ end }}
         {{ range .ModelsWithoutConfig }}
-          {{ if eq . $model }}
-            <option value="chat/{{.}}" selected  class="bg-gray-700 text-white">{{.}}</option>
-          {{ else }}
-            <option value="chat/{{.}}" class="bg-gray-700 text-white">{{.}}</option>
-          {{ end }}
+            <option value="chat/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-gray-700 text-white">{{.}}</option>
         {{end}}
       </select>
       </div>
diff --git a/core/http/views/text2image.html b/core/http/views/text2image.html
index a3a95b05..10eef2d7 100644
--- a/core/http/views/text2image.html
+++ b/core/http/views/text2image.html
@@ -13,7 +13,7 @@
         <div class="mt-12">
           <div class="flex items-center justify-center text-center pb-2">
             <span class="text-3xl font-semibold text-gray-100">
-              🖼️ Text to Image
+              🖼️ Text to Image {{ if .Model }} (using {{.Model}}) {{ end }}
             <a href="https://localai.io/features/image-generation" target="_blank" >
               <i class="fas fa-circle-info pr-2"></i>
             </a>
@@ -49,12 +49,16 @@
                 <option value="" disabled class="text-gray-400" >Select a model</option>
                 {{ $model:=.Model}}
                 {{ range .ModelsConfig }}
-                {{ if eq .Name $model }}
-                <option value="text2image/{{.Name}}" selected class="bg-gray-700 text-white">{{.Name}}</option>
-                {{ else }}
-                <option value="text2image/{{.Name}}" class="bg-gray-700 text-white">{{.Name}}</option>
-                {{ end }}
+                  {{ $cfg := . }}
+                  {{ range .KnownUsecaseStrings }}
+                    {{ if eq . "FLAG_IMAGE" }}
+                        <option value="text2image/{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-gray-700 text-white">{{$cfg.Name}}</option>
+                    {{ end }}
+                  {{ end }}
                 {{ end }}
+                {{ range .ModelsWithoutConfig }}
+                    <option value="text2image/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-gray-700 text-white">{{.}}</option>
+                {{end}}
               </select>
               
               </div>
diff --git a/core/http/views/tts.html b/core/http/views/tts.html
index 154dad0c..d00927cf 100644
--- a/core/http/views/tts.html
+++ b/core/http/views/tts.html
@@ -11,7 +11,7 @@
           <div class="mt-12">
             <div class="flex items-center justify-center text-center pb-2">
               <span class="text-3xl font-semibold text-gray-100">
-                <i class="fa-solid fa-music"></i> Text to speech/audio
+                <i class="fa-solid fa-music"></i> Text to speech/audio {{ if .Model }} (using {{.Model}}) {{ end }}
               <a href="https://localai.io/features/text-to-audio/" target="_blank" >
                 <i class="fas fa-circle-info pr-2"></i>
               </a>
@@ -46,12 +46,16 @@
                 <option value="" disabled class="text-gray-400" >Select a model</option>
                 {{ $model:=.Model}}
                 {{ range .ModelsConfig }}
-                {{ if eq .Name $model }}
-                <option value="tts/{{.Name}}" selected class="bg-gray-700 text-white">{{.Name}}</option>
-                {{ else }}
-                <option value="tts/{{.Name}}" class="bg-gray-700 text-white">{{.Name}}</option>
-                {{ end }}
+                  {{ $cfg := . }}
+                  {{ range .KnownUsecaseStrings }}
+                    {{ if eq . "FLAG_TTS" }}
+                        <option value="tts/{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-gray-700 text-white">{{$cfg.Name}}</option>
+                    {{ end }}
+                  {{ end }}
                 {{ end }}
+                {{ range .ModelsWithoutConfig }}
+                  <option value="tts/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-gray-700 text-white">{{.}}</option>
+                {{end}}
               </select>
               
               </div>