Merge pull request sugarforever#182 from sugarforever/feature/groq

feat: support Groq API
WaiChan8 · Mar 31, 2024 · 2ab6c51 · 2ab6c51
2 parents b0e6841 + ffde9cb
commit 2ab6c51
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 9 deletions.
diff --git a/components/Chat.vue b/components/Chat.vue
@@ -178,7 +178,6 @@ function onAbortChat() {
   <div class="flex flex-col flex-1 box-border dark:text-gray-300 -mx-4">
     <div class="flex items-center justify-between mb-4 px-4 shrink-0">
       <div class="flex items-center">
-        <span class="mr-2">Chat with</span>
         <ModelsDropdown v-model="model" placeholder="Select a model" />
       </div>
       <div>

diff --git a/components/ModelsDropdown.vue b/components/ModelsDropdown.vue
@@ -22,7 +22,8 @@ const loadModels = async () => {
     .filter(el => el?.details?.family !== 'nomic-bert')
     .map(el => {
       return {
-        label: `${el?.details?.family === "Azure OpenAI" ? `Azure ${el.name}` : el.name}`, value: JSON.stringify({
+        label: `${el?.details?.family} ${el.name}`,
+        value: JSON.stringify({
           model: el.name,
           family: el?.details?.family
         })
@@ -45,6 +46,6 @@ loadModels()
 
 <template>
   <ClientOnly>
-    <USelect v-model="currentModel" :options="models" :placeholder="placeholder" />
+    <USelect v-model="currentModel" size="sm" :options="models" :placeholder="placeholder" />
   </ClientOnly>
 </template>
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
         "@langchain/community": "^0.0.33",
         "@langchain/core": "^0.1.44",
         "@langchain/google-genai": "^0.0.10",
+        "@langchain/groq": "^0.0.5",
         "@langchain/openai": "^0.0.15",
         "@nuxt/ui": "^2.14.2",
         "@prisma/client": "^5.10.2",

diff --git a/pages/settings/index.vue b/pages/settings/index.vue
@@ -17,6 +17,8 @@ import {
   moonshotApiHost,
 
   geminiApiKey,
+
+  groqApiKey,
 } from '@/utils/settings';
 
 const toast = useToast();
@@ -39,7 +41,9 @@ const state = reactive({
   moonshotApiKey: undefined,
   moonshotApiHost: undefined,
 
-  geminiApiKey: undefined
+  geminiApiKey: undefined,
+
+  groqApiKey: undefined,
 });
 
 const saving = ref(false);
@@ -76,6 +80,8 @@ const onSubmit = async () => {
 
   geminiApiKey.value = state.geminiApiKey;
 
+  groqApiKey.value = state.groqApiKey;
+
   toast.add({ title: `Set successfully!` });
 };
 
@@ -105,6 +111,9 @@ onMounted(() => {
   // Gemini
   state.geminiApiKey = geminiApiKey.value;
 
+  // Groq
+  state.groqApiKey = groqApiKey.value;
+
   authorization.value = !!(state.username && state.password);
 });
 
@@ -197,6 +206,13 @@ const ui = {
         </UFormGroup>
       </UCard>
 
+      <UCard :ui="ui">
+        <template #header>Groq</template>
+        <UFormGroup label="API Key" name="groqApiKey" class="mb-4">
+          <UInput v-model="state.groqApiKey" type="password" />
+        </UFormGroup>
+      </UCard>
+
       <div class="">
         <UButton type="submit" :loading="saving">
           Save

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/server/api/models/index.get.ts b/server/api/models/index.get.ts
@@ -19,7 +19,9 @@ export default defineEventHandler(async (event) => {
     x_moonshot_api_key: moonshot_api_key,
     x_moonshot_api_host: moonshot_api_host,
 
-    x_gemini_api_key: gemini_api_key
+    x_gemini_api_key: gemini_api_key,
+
+    x_groq_api_key: groq_api_key,
   } = event.context.keys;
   const models: ModelItem[] = []
 
@@ -84,5 +86,16 @@ export default defineEventHandler(async (event) => {
     });
   }
 
+  if (groq_api_key) {
+    GROQ_MODELS.forEach((model) => {
+      models.push({
+        name: model,
+        details: {
+          family: MODEL_FAMILIES.groq
+        }
+      });
+    });
+  }
+
   return models
 })
diff --git a/server/middleware/keys.ts b/server/middleware/keys.ts
@@ -12,7 +12,9 @@ const KEYS = [
   'x_moonshot_api_key',
   'x_moonshot_api_host',
 
-  'x_gemini_api_key'
+  'x_gemini_api_key',
+
+  'x_groq_api_key'
 ] as const;
 
 export type KEYS = typeof KEYS[number];

diff --git a/server/utils/models.ts b/server/utils/models.ts
@@ -7,6 +7,7 @@ import { ChatAnthropic } from "@langchain/anthropic";
 import { ChatOllama } from "@langchain/community/chat_models/ollama";
 import { ChatOpenAI } from '@langchain/openai';
 import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
+import { ChatGroq } from "@langchain/groq";
 import { AzureChatOpenAI } from "@langchain/azure-openai";
 import { type H3Event } from 'h3'
 import { type KEYS } from '@/server/middleware/keys'
@@ -16,7 +17,8 @@ export const MODEL_FAMILIES = {
   azureOpenai: 'Azure OpenAI',
   anthropic: 'Anthropic',
   moonshot: 'Moonshot',
-  gemini: 'Gemini'
+  gemini: 'Gemini',
+  groq: 'Groq'
 };
 
 export const OPENAI_GPT_MODELS = [
@@ -62,7 +64,13 @@ export const MOONSHOT_MODELS = [
 export const GEMINI_MODELS = [
   "gemini-1.0-pro",
   "gemini-1.0-pro-vision-latest"
-]
+];
+
+export const GROQ_MODELS = [
+  "llama2-70b-4096",
+  "mixtral-8x7b-32768",
+  "gemma-7b-it"
+];
 
 export const isOllamaModelExists = async (ollama: Ollama, embeddingModelName: string) => {
   if (!OPENAI_EMBEDDING_MODELS.includes(embeddingModelName) && !GEMINI_EMBEDDING_MODELS.includes(embeddingModelName)) {
@@ -144,6 +152,12 @@ export const createChatModel = (modelName: string, family: string, event: H3Even
       apiKey: keys.x_gemini_api_key,
       modelName: modelName
     })
+  } else if (family === MODEL_FAMILIES.groq && GROQ_MODELS.includes(modelName)) {
+    console.log(`Chat with Groq ${modelName}`);
+    chat = new ChatGroq({
+      apiKey: keys.x_groq_api_key,
+      modelName: modelName
+    })
   } else {
     console.log("Chat with Ollama, host:", host);
     chat = new ChatOllama({

diff --git a/utils/settings.ts b/utils/settings.ts
@@ -20,6 +20,8 @@ const MOONSHOT_API_HOST = 'keys.moonshot_api_host';
 
 const GEMINI_API_KEY = "keys.gemini_api_key";
 
+const GROQ_API_KEY = "keys.groq_api_key";
+
 export const ollamaHost = useStorage(OLLAMA_HOST, '');
 export const ollamaUsername = useStorage(OLLAMA_USERNAME, '');
 export const ollamaPassword = useStorage(OLLAMA_PASSWORD, '');
@@ -39,6 +41,8 @@ export const moonshotApiHost = useStorage(MOONSHOT_API_HOST, '');
 
 export const geminiApiKey = useStorage(GEMINI_API_KEY, '');
 
+export const groqApiKey = useStorage(GROQ_API_KEY, '');
+
 export const fetchHeadersOllama = computed(() => {
   return {
     'x_ollama_host': ollamaHost.value,
@@ -62,7 +66,9 @@ export const fetchHeadersThirdApi = computed(() => {
     'x_moonshot_api_key': moonshotApiKey.value,
     'x_moonshot_api_host': moonshotApiHost.value,
 
-    'x_gemini_api_key': geminiApiKey.value
+    'x_gemini_api_key': geminiApiKey.value,
+
+    'x_groq_api_key': groqApiKey.value,
   }
 })