feat(ui): show only text models in the chat interface (#4869)

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

core/http/routes/ui.go

@@ -305,23 +305,6 @@ func RegisterUIRoutes(app *fiber.App,
 		})
 	}
 
-	// Show the Chat page
-	app.Get("/chat/:model", func(c *fiber.Ctx) error {
-		backendConfigs, _ := services.ListModels(cl, ml, config.NoFilterFn, services.SKIP_IF_CONFIGURED)
-
-		summary := fiber.Map{
-			"Title":        "LocalAI - Chat with " + c.Params("model"),
-			"BaseURL":      utils.BaseURL(c),
-			"ModelsConfig": backendConfigs,
-			"Model":        c.Params("model"),
-			"Version":      internal.PrintableVersion(),
-			"IsP2PEnabled": p2p.IsP2PEnabled(),
-		}
-
-		// Render index
-		return c.Render("views/chat", summary)
-	})
-
 	app.Get("/talk/", func(c *fiber.Ctx) error {
 		backendConfigs, _ := services.ListModels(cl, ml, config.NoFilterFn, services.SKIP_IF_CONFIGURED)
 
@@ -345,20 +328,45 @@ func RegisterUIRoutes(app *fiber.App,
 
 	app.Get("/chat/", func(c *fiber.Ctx) error {
 
-		backendConfigs, _ := services.ListModels(cl, ml, config.NoFilterFn, services.SKIP_IF_CONFIGURED)
+		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(backendConfigs) == 0 {
+		if len(allModels) == 0 {
 			// If no model is available redirect to the index which suggests how to install models
 			return c.Redirect(utils.BaseURL(c))
 		}
 
 		summary := fiber.Map{
-			"Title":        "LocalAI - Chat with " + backendConfigs[0],
-			"BaseURL":      utils.BaseURL(c),
-			"ModelsConfig": backendConfigs,
-			"Model":        backendConfigs[0],
-			"Version":      internal.PrintableVersion(),
-			"IsP2PEnabled": p2p.IsP2PEnabled(),
+			"Title":               "LocalAI - Chat with " + allModels[0],
+			"BaseURL":             utils.BaseURL(c),
+			"AllModels":           allModels,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"ModelsConfig":        backendConfigs,
+			"Model":               allModels[0],
+			"Version":             internal.PrintableVersion(),
+			"IsP2PEnabled":        p2p.IsP2PEnabled(),
+		}
+
+		// Render index
+		return c.Render("views/chat", summary)
+	})
+
+	// 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)
+
+		summary := fiber.Map{
+			"Title":               "LocalAI - Chat with " + c.Params("model"),
+			"BaseURL":             utils.BaseURL(c),
+			"ModelsConfig":        backendConfigs,
+			"ModelsWithoutConfig": modelsWithoutConfig,
+			"AllModels":           allModels,
+			"Model":               c.Params("model"),
+			"Version":             internal.PrintableVersion(),
+			"IsP2PEnabled":        p2p.IsP2PEnabled(),
 		}
 
 		// Render index

core/http/views/chat.html

@@ -100,14 +100,25 @@ SOFTWARE.
         <option value="" disabled class="text-gray-400" >Select a model</option>
         {{ $model:=.Model}}
         {{ range .ModelsConfig }}
-        {{ 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 }}
+          {{ $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 }}
+            {{ 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 }}
+        {{end}}
       </select>
-
       </div>
     </div>
 

core/http/views/index.html

@@ -50,6 +50,7 @@
                 {{$galleryConfig:=.GalleryConfig}}
                 {{$noicon:="https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg"}}
                 {{ range .ModelsConfig }}
+                {{ $backendCfg := . }}
                 {{ $cfg:= index $galleryConfig .Name}}
                 <tr class="bg-gray-800 border-b border-gray-700">
                     <td class="px-4 py-3">
@@ -69,13 +70,13 @@
                         <p class="font-bold text-white flex items-center">{{.Name}} <a href="browse?term={{.Name}}" class="ml-2 text-blue-400 hover:text-blue-600"><i class="fas fa-search"></i></a></p>
                         {{ range .KnownUsecaseStrings }}
                         {{ if eq . "FLAG_CHAT" }}
-                            <a href="chat/{{$cfg.Name}}" class="ml-2 bg-blue-500 text-white py-1 px-3 rounded-lg shadow transition duration-300 ease-in-out hover:bg-blue-700 hover:shadow-lg"><i class="fas fa-comments pr-1"></i>Chat</a>
+                            <a href="chat/{{$backendCfg.Name}}" class="ml-2 bg-blue-500 text-white py-1 px-3 rounded-lg shadow transition duration-300 ease-in-out hover:bg-blue-700 hover:shadow-lg"><i class="fas fa-comments pr-1"></i>Chat</a>
                         {{ end }}
                         {{ if eq . "FLAG_IMAGE" }}
-                            <a href="text2image/{{$cfg.Name}}" class="ml-2 bg-green-500 text-white py-1 px-3 rounded-lg shadow transition duration-300 ease-in-out hover:bg-green-700 hover:shadow-lg"><i class="fas fa-image pr-1"></i>Image</a>
+                            <a href="text2image/{{$backendCfg.Name}}" class="ml-2 bg-green-500 text-white py-1 px-3 rounded-lg shadow transition duration-300 ease-in-out hover:bg-green-700 hover:shadow-lg"><i class="fas fa-image pr-1"></i>Image</a>
                         {{ end }}
                         {{ if eq . "FLAG_TTS" }}
-                            <a href="tts/{{$cfg.Name}}" class="ml-2 bg-purple-500 text-white py-1 px-3 rounded-lg shadow transition duration-300 ease-in-out hover:bg-purple-700 hover:shadow-lg"><i class="fas fa-microphone pr-1"></i>TTS</a>
+                            <a href="tts/{{$backendCfg.Name}}" class="ml-2 bg-purple-500 text-white py-1 px-3 rounded-lg shadow transition duration-300 ease-in-out hover:bg-purple-700 hover:shadow-lg"><i class="fas fa-microphone pr-1"></i>TTS</a>
                         {{ end }}
                         {{ end }}
                     </td>