feat(ui): do also filter tts and image models (#4871)

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

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,11 +381,13 @@ 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,
+			"ModelsWithoutConfig": modelsWithoutConfig,
 			"Model":               c.Params("model"),
 			"Version":             internal.PrintableVersion(),
 			"IsP2PEnabled":        p2p.IsP2PEnabled(),
@@ -390,19 +398,31 @@ 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,
+			"Title":               title,
 			"BaseURL":             utils.BaseURL(c),
 			"ModelsConfig":        backendConfigs,
-			"Model":        backendConfigs[0].Name,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               modelThatCanBeUsed,
 			"Version":             internal.PrintableVersion(),
 			"IsP2PEnabled":        p2p.IsP2PEnabled(),
 		}
@@ -413,11 +433,13 @@ 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,
+			"ModelsWithoutConfig": modelsWithoutConfig,
 			"Model":               c.Params("model"),
 			"Version":             internal.PrintableVersion(),
 			"IsP2PEnabled":        p2p.IsP2PEnabled(),
@@ -428,19 +450,30 @@ 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,
+			"Title":               title,
 			"BaseURL":             utils.BaseURL(c),
 			"ModelsConfig":        backendConfigs,
-			"Model":        backendConfigs[0].Name,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"Model":               modelThatCanBeUsed,
 			"IsP2PEnabled":        p2p.IsP2PEnabled(),
 			"Version":             internal.PrintableVersion(),
 		}

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>
+                <option value="chat/{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-gray-700 text-white">{{$cfg.Name}}</option>
-              {{ end }}
             {{ end }}
           {{ end }}
         {{ end }}
         {{ range .ModelsWithoutConfig }}
-          {{ if eq . $model }}
+            <option value="chat/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-gray-700 text-white">{{.}}</option>
-            <option value="chat/{{.}}" selected  class="bg-gray-700 text-white">{{.}}</option>
-          {{ else }}
-            <option value="chat/{{.}}" class="bg-gray-700 text-white">{{.}}</option>
-          {{ end }}
         {{end}}
       </select>
       </div>

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 }}
+                  {{ $cfg := . }}
-                <option value="text2image/{{.Name}}" selected class="bg-gray-700 text-white">{{.Name}}</option>
+                  {{ range .KnownUsecaseStrings }}
-                {{ else }}
+                    {{ if eq . "FLAG_IMAGE" }}
-                <option value="text2image/{{.Name}}" class="bg-gray-700 text-white">{{.Name}}</option>
+                        <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>

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 }}
+                  {{ $cfg := . }}
-                <option value="tts/{{.Name}}" selected class="bg-gray-700 text-white">{{.Name}}</option>
+                  {{ range .KnownUsecaseStrings }}
-                {{ else }}
+                    {{ if eq . "FLAG_TTS" }}
-                <option value="tts/{{.Name}}" class="bg-gray-700 text-white">{{.Name}}</option>
+                        <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>