feat: Rename 'Whisper' model type to 'STT' in UI (#8785)

* feat: Rename 'Whisper' model type to 'STT' in UI

- Updated models.html: Changed 'Whisper' filter button to 'STT'
- Updated talk.html: Changed 'Whisper Model' to 'STT Model'
- Updated backends.html: Changed 'Whisper' to 'STT'
- Updated talk.js: Renamed getWhisperModel() to getSTTModel(),
  sendAudioToWhisper() to sendAudioToSTT(), and whisperModelSelect to sttModelSelect

This change makes the UI more consistent with the model category naming,
where all speech-to-text models (including Whisper, Parakeet, Moonshine,
WhisperX, etc.) are grouped under the 'STT' (Speech-to-Text) category.

Fixes #8776

Signed-off-by: team-coding-agent-1 <team-coding-agent-1@localai.dev>

* Rename whisperModelSelect to sttModelSelect in talk.html

As requested by maintainer mudler in PR review, replacing all
whisperModelSelect occurrences with sttModelSelect since the
model type was renamed from Whisper to STT.

Signed-off-by: LocalAI [bot] <localai-bot@users.noreply.github.com>

---------

Signed-off-by: team-coding-agent-1 <team-coding-agent-1@localai.dev>
Signed-off-by: LocalAI [bot] <localai-bot@users.noreply.github.com>
Co-authored-by: team-coding-agent-1 <team-coding-agent-1@localai.dev>
Co-authored-by: LocalAI [bot] <localai-bot@users.noreply.github.com>

Author: localai-bot

core/http/static/talk.js

@@ -13,8 +13,8 @@ function getModel() {
     return document.getElementById('modelSelect').value;
 }
 
-function getWhisperModel() {
-    return document.getElementById('whisperModelSelect').value;
+function getSTTModel() {
+    return document.getElementById('sttModelSelect').value;
 }
 
 function getTTSModel() {
@@ -73,7 +73,7 @@ function stopRecording() {
         document.getElementById("loader").style.display = "block";
         const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
         document.getElementById("statustext").textContent = "Processing audio...";
-        const transcript = await sendAudioToWhisper(audioBlob);
+        const transcript = await sendAudioToSTT(audioBlob);
         console.log("Transcript:", transcript);
         document.getElementById("statustext").textContent = "Seems you said: " + transcript+ ". Generating response...";
         const responseText = await sendTextToChatGPT(transcript);
@@ -95,18 +95,18 @@ function stopRecording() {
     };
 }
 
-async function sendAudioToWhisper(audioBlob) {
+async function sendAudioToSTT(audioBlob) {
     const formData = new FormData();
     formData.append('file', audioBlob);
-    formData.append('model', getWhisperModel());
+    formData.append('model', getSTTModel());
 
     const response = await fetch('v1/audio/transcriptions', {
         method: 'POST',
         body: formData
     });
 
     const result = await response.json();
-    console.log("Whisper result:", result)
+    console.log("STT result:", result)
     return result.text;
 }
 

core/http/views/backends.html

@@ -186,7 +186,7 @@ <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-4 flex item
                         <button @click="filterByTerm('whisper')"
                             class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-success-light)] hover:bg-[var(--color-success)]/30 text-[var(--color-success)] border border-[var(--color-success)]/30 transition-colors">
                             <i class="fas fa-headphones mr-2"></i>
-                            <span>Whisper</span>
+                            <span>STT</span>
                         </button>
                         <button @click="filterByTerm('object-detection')"
                             class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-error-light)] hover:bg-[var(--color-error)]/30 text-[var(--color-error)] border border-[var(--color-error)]/30 transition-colors">

core/http/views/models.html

@@ -142,10 +142,10 @@ <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-4 flex item
                             <i class="fas fa-sort-amount-up mr-2"></i>
                             <span>Rerank</span>
                         </button>
-                        <button @click="filterByTerm('whisper')"
+                        <button @click="filterByTerm('stt')"
                             class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-secondary-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-secondary-light)] transition-colors">
                             <i class="fas fa-headphones mr-2"></i>
-                            <span>Whisper</span>
+                            <span>STT</span>
                         </button>
                         <button @click="filterByTerm('object-detection')"
                             class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-red-600/20 hover:bg-red-600/30 text-red-300 border border-red-500/30 transition-colors">

core/http/views/talk.html

@@ -65,12 +65,12 @@ <h1 class="hero-title">
                   </select>
                 </div>
 
-                <!-- Whisper Model -->
+                <!-- STT Model -->
                 <div class="space-y-2">
-                  <label for="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 for="sttModelSelect" class="flex items-center text-[var(--color-text-secondary)] font-medium">
+                    <i class="fas fa-ear-listen text-[var(--color-accent)] mr-2"></i>STT Model
                   </label>
-                  <select id="whisperModelSelect" 
+                  <select id="sttModelSelect" 
                     class="w-full bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:ring-2 focus:ring-[var(--color-accent)]/50 rounded-lg shadow-sm p-2.5 appearance-none">
                     <option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
                     {{ range .ModelsConfig }}