From 4c29b2390c1de9d5ff24111a54d5979c8ad8ecb8 Mon Sep 17 00:00:00 2001
From: Anthony Bryan Gavilan Vinces <abgv9221@gmail.com>
Date: Tue, 17 Dec 2024 18:11:07 -0500
Subject: [PATCH] Feature/Add Groq Whisper support (#3706)

* feat: Add Groq Whisper support to SpeechToText component

- Introduced a new speech-to-text provider, Groq Whisper, in both the backend and UI components.
- Updated SpeechToTextType to include GROQ_WHISPER.
- Implemented Groq client integration for audio transcription with customizable model, language, and temperature options.
- Added UI elements for Groq Whisper configuration, including input fields for model, language, and temperature settings.

* turn speech to text none status to false when other was selected

---------

Co-authored-by: Henry <hzj94@hotmail.com>
---
 packages/components/src/speechToText.ts       |  21 +++++++-
 packages/ui/src/assets/images/groq.png        | Bin 0 -> 1773 bytes
 .../ui-component/extended/SpeechToText.jsx    |  47 +++++++++++++++++-
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/src/assets/images/groq.png

diff --git a/packages/components/src/speechToText.ts b/packages/components/src/speechToText.ts
index 821f02216..547804c5c 100644
--- a/packages/components/src/speechToText.ts
+++ b/packages/components/src/speechToText.ts
@@ -3,11 +3,13 @@ import { getCredentialData } from './utils'
 import { type ClientOptions, OpenAIClient, toFile } from '@langchain/openai'
 import { AssemblyAI } from 'assemblyai'
 import { getFileFromStorage } from './storageUtils'
+import Groq from 'groq-sdk'
 
 const SpeechToTextType = {
     OPENAI_WHISPER: 'openAIWhisper',
     ASSEMBLYAI_TRANSCRIBE: 'assemblyAiTranscribe',
-    LOCALAI_STT: 'localAISTT'
+    LOCALAI_STT: 'localAISTT',
+    GROQ_WHISPER: 'groqWhisper'
 }
 
 export const convertSpeechToText = async (upload: IFileUpload, speechToTextConfig: ICommonObject, options: ICommonObject) => {
@@ -70,6 +72,23 @@ export const convertSpeechToText = async (upload: IFileUpload, speechToTextConfi
                 }
                 break
             }
+            case SpeechToTextType.GROQ_WHISPER: {
+                const groqClient = new Groq({
+                    apiKey: credentialData.groqApiKey
+                })
+                const file = await toFile(audio_file, upload.name)
+                const groqTranscription = await groqClient.audio.transcriptions.create({
+                    file,
+                    model: speechToTextConfig?.model || 'whisper-large-v3',
+                    language: speechToTextConfig?.language,
+                    temperature: speechToTextConfig?.temperature ? parseFloat(speechToTextConfig.temperature) : undefined,
+                    response_format: 'verbose_json'
+                })
+                if (groqTranscription?.text) {
+                    return groqTranscription.text
+                }
+                break
+            }
         }
     } else {
         throw new Error('Speech to text is not selected, but found a recorded audio file. Please fix the chain.')
diff --git a/packages/ui/src/assets/images/groq.png b/packages/ui/src/assets/images/groq.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea2b8821cf8a317fa3e2cf1a7b36e1d0b7b89798
GIT binary patch
literal 1773
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
P(ngT=sjTp72mk;(pOH4_

literal 0
HcmV?d00001

diff --git a/packages/ui/src/ui-component/extended/SpeechToText.jsx b/packages/ui/src/ui-component/extended/SpeechToText.jsx
index 59f9964b9..17dc13203 100644
--- a/packages/ui/src/ui-component/extended/SpeechToText.jsx
+++ b/packages/ui/src/ui-component/extended/SpeechToText.jsx
@@ -17,6 +17,7 @@ import { Dropdown } from '@/ui-component/dropdown/Dropdown'
 import openAISVG from '@/assets/images/openai.svg'
 import assemblyAIPng from '@/assets/images/assemblyai.png'
 import localAiPng from '@/assets/images/localai.png'
+import groqPng from '@/assets/images/groq.png'
 
 // store
 import useNotifier from '@/utils/useNotifier'
@@ -29,7 +30,8 @@ import chatflowsApi from '@/api/chatflows'
 const SpeechToTextType = {
     OPENAI_WHISPER: 'openAIWhisper',
     ASSEMBLYAI_TRANSCRIBE: 'assemblyAiTranscribe',
-    LOCALAI_STT: 'localAISTT'
+    LOCALAI_STT: 'localAISTT',
+    GROQ_WHISPER: 'groqWhisper'
 }
 
 // Weird quirk - the key must match the name property value.
@@ -139,6 +141,46 @@ const speechToTextProviders = {
                 optional: true
             }
         ]
+    },
+    [SpeechToTextType.GROQ_WHISPER]: {
+        label: 'Groq Whisper',
+        name: SpeechToTextType.GROQ_WHISPER,
+        icon: groqPng,
+        url: 'https://console.groq.com/',
+        inputs: [
+            {
+                label: 'Model',
+                name: 'model',
+                type: 'string',
+                description: `The STT model to load. Defaults to whisper-large-v3 if left blank.`,
+                placeholder: 'whisper-large-v3',
+                optional: true
+            },
+            {
+                label: 'Connect Credential',
+                name: 'credential',
+                type: 'credential',
+                credentialNames: ['groqApi']
+            },
+            {
+                label: 'Language',
+                name: 'language',
+                type: 'string',
+                description:
+                    'The language of the input audio. Supplying the input language in ISO-639-1 format will improve accuracy and latency.',
+                placeholder: 'en',
+                optional: true
+            },
+            {
+                label: 'Temperature',
+                name: 'temperature',
+                type: 'number',
+                step: 0.1,
+                description:
+                    'The sampling temperature, between 0 and 1. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.',
+                optional: true
+            }
+        ]
     }
 }
 
@@ -210,6 +252,9 @@ const SpeechToText = ({ dialogProps }) => {
                     newVal[provider.name] = { ...speechToText[provider.name], status: false }
                 }
             })
+            if (providerName !== 'none') {
+                newVal['none'].status = false
+            }
         }
         setSpeechToText(newVal)
         return newVal