fix the tts model dropdown to show the currently selected model (#7306)

* fix the tts model dropdown to show the currently selected model

* Update core/config/model_config.go

Signed-off-by: Ettore Di Giacinto <[email protected]>

---------

Signed-off-by: Ettore Di Giacinto <[email protected]>
Co-authored-by: Erixhens Muka <[email protected]>
Co-authored-by: Ettore Di Giacinto <[email protected]>

Author: 3 people

core/config/model_config.go

@@ -534,7 +534,8 @@ const (
 
 func GetAllModelConfigUsecases() map[string]ModelConfigUsecases {
 	return map[string]ModelConfigUsecases{
-		"FLAG_ANY":              FLAG_ANY,
+		// Note: FLAG_ANY is intentionally excluded from this map
+		// because it's 0 and would always match in HasUsecases checks
 		"FLAG_CHAT":             FLAG_CHAT,
 		"FLAG_COMPLETION":       FLAG_COMPLETION,
 		"FLAG_EDIT":             FLAG_EDIT,
@@ -636,7 +637,7 @@ func (c *ModelConfig) GuessUsecases(u ModelConfigUsecases) bool {
 		}
 	}
 	if (u & FLAG_TTS) == FLAG_TTS {
-		ttsBackends := []string{"bark-cpp", "piper", "transformers-musicgen"}
+		ttsBackends := []string{"bark-cpp", "piper", "transformers-musicgen", "kokoro"}
 		if !slices.Contains(ttsBackends, c.Backend) {
 			return false
 		}

core/http/views/tts.html

@@ -34,15 +34,14 @@ <h1 class="text-4xl md:text-5xl font-bold text-[#E5E7EB] mb-4">
                 <div class="border-b border-[#1E293B] p-5">
                     <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                         <!-- Model Selection -->
-                        <div class="flex items-center">
+                        <div class="flex items-center" x-data="{ link : '{{ if .Model }}tts/{{.Model}}{{ end }}' }">
                             <label for="model-select" class="mr-3 text-[#94A3B8] font-medium">
                                 <i class="fas fa-microphone-lines text-[#8B5CF6] mr-2"></i>Model:
                             </label>
-                            <select 
+                            <select
                                 id="model-select"
-                                x-data="{ link : '' }" 
-                                x-model="link" 
-                                x-init="$watch('link', value => window.location = link)" 
+                                x-model="link"
+                                @change="window.location = link"
                                 class="bg-[#101827] text-[#E5E7EB] border border-[#1E293B] focus:border-[#8B5CF6] focus:ring-2 focus:ring-[#8B5CF6]/50 rounded-lg shadow-sm p-2.5 appearance-none"
                             >	
                                 <option value="" disabled class="text-[#94A3B8]">Select a model</option>