work on Groq support

.env

@@ -10,6 +10,7 @@ RENDERING_ENGINE="INFERENCE_API"
 # - INFERENCE_ENDPOINT
 # - INFERENCE_API
 # - OPENAI
+# - GROQ
 LLM_ENGINE="INFERENCE_API"
 
 NEXT_PUBLIC_MAX_NB_PAGES="2"
@@ -43,6 +44,10 @@ AUTH_OPENAI_API_KEY=
 # An experimental RENDERING engine (sorry it is not very documented yet, so you can use one of the other engines)
 AUTH_VIDEOCHAIN_API_TOKEN=
 
+
+# Groq.com key: available for the LLM engine
+AUTH_GROQ_API_KEY=
+
 # ------------- RENDERING API CONFIG --------------
 
 # If you decided to use Replicate for the RENDERING engine
@@ -69,6 +74,8 @@ RENDERING_OPENAI_API_MODEL="dall-e-3"
 
 # ------------- LLM API CONFIG ----------------
 
+LLM_GROQ_API_MODEL="mixtral-8x7b-32768"
+
 # If you decided to use OpenAI for the LLM engine
 LLM_OPENAI_API_BASE_URL="https://api.openai.com/v1"
 LLM_OPENAI_API_MODEL="gpt-4"

README.md

@@ -24,13 +24,14 @@ it requires various components to run for the frontend, backend, LLM, SDXL etc.
 If you try to duplicate the project, open the `.env` you will see it requires some variables.
 
 Provider config:
-- `LLM_ENGINE`: can be one of: "INFERENCE_API", "INFERENCE_ENDPOINT", "OPENAI"
+- `LLM_ENGINE`: can be one of: "INFERENCE_API", "INFERENCE_ENDPOINT", "OPENAI", or "GROQ"
 - `RENDERING_ENGINE`: can be one of: "INFERENCE_API", "INFERENCE_ENDPOINT", "REPLICATE", "VIDEOCHAIN", "OPENAI" for now, unless you code your custom solution
 
 Auth config:
-- `AUTH_HF_API_TOKEN`: only if you decide to use OpenAI for the LLM engine necessary if you decide to use an inference api model or a custom inference endpoint
-- `AUTH_OPENAI_TOKEN`: only if you decide to use OpenAI for the LLM engine
-- `AITH_VIDEOCHAIN_API_TOKEN`: secret token to access the VideoChain API server
+- `AUTH_HF_API_TOKEN`:  if you decide to use Hugging Face for the LLM engine (inference api model or a custom inference endpoint)
+- `AUTH_OPENAI_API_KEY`: to use OpenAI for the LLM engine
+- `AUTH_GROQ_API_KEY`: to use Groq for the LLM engine
+- `AUTH_VIDEOCHAIN_API_TOKEN`: secret token to access the VideoChain API server
 - `AUTH_REPLICATE_API_TOKEN`: in case you want to use Replicate.com
 
 Rendering config:
@@ -42,9 +43,12 @@ Rendering config:
 - `RENDERING_REPLICATE_API_MODEL`: optional, defaults to "stabilityai/sdxl"
 - `RENDERING_REPLICATE_API_MODEL_VERSION`: optional, in case you want to change the version
 
-Language model config:
+Language model config (depending on the LLM engine you decide to use):
 - `LLM_HF_INFERENCE_ENDPOINT_URL`: "<use your own>"
-- `LLM_HF_INFERENCE_API_MODEL`: "codellama/CodeLlama-7b-hf"
+- `LLM_HF_INFERENCE_API_MODEL`: "HuggingFaceH4/zephyr-7b-beta"
+- `LLM_OPENAI_API_BASE_URL`: "https://api.openai.com/v1"
+- `LLM_OPENAI_API_MODEL`: "gpt-4"
+- `LLM_GROQ_API_MODEL`: "mixtral-8x7b-32768"
 
 In addition, there are some community sharing variables that you can just ignore.
 Those variables are not required to run the AI Comic Factory on your own website or computer
@@ -108,14 +112,23 @@ To activate it, create a `.env.local` configuration file:
 LLM_ENGINE="OPENAI"
 
 # default openai api base url is: https://api.openai.com/v1
-LLM_OPENAI_API_BASE_URL="Your OpenAI API Base URL"
+LLM_OPENAI_API_BASE_URL="A custom OpenAI API Base URL if you have some special privileges"
 
 LLM_OPENAI_API_MODEL="gpt-3.5-turbo"
 
-AUTH_OPENAI_API_KEY="Your OpenAI API Key"
+AUTH_OPENAI_API_KEY="Yourown OpenAI API Key"
 ```
+### Option 4: (new, experimental) use Groq
 
-### Option 4: Fork and modify the code to use a different LLM system
+```bash
+LLM_ENGINE="GROQ"
+
+LLM_GROQ_API_MODEL="mixtral-8x7b-32768"
+
+AUTH_GROQ_API_KEY="Your own GROQ API Key"
+```
+
+### Option 5: Fork and modify the code to use a different LLM system
 
 Another option could be to disable the LLM completely and replace it with another LLM protocol and/or provider (eg. Claude, Replicate), or a human-generated story instead (by returning mock or static data).
 

package-lock.json

@@ -40,6 +40,7 @@
         "encoding": "^0.1.13",
         "eslint": "8.45.0",
         "eslint-config-next": "13.4.10",
+        "groq-sdk": "^0.3.1",
         "html2canvas": "^1.4.1",
         "konva": "^9.2.2",
         "lucide-react": "^0.260.0",
@@ -4166,6 +4167,30 @@
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
+    "node_modules/groq-sdk": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/groq-sdk/-/groq-sdk-0.3.1.tgz",
+      "integrity": "sha512-A3/u52JDBR1BzAmMCc+XceDJdNGc0KipDrJOWeIFIYMy6vz4hWvfJBFLXgoS7MHNcLZ4jG89L48JhH/ONcaiMA==",
+      "dependencies": {
+        "@types/node": "^18.11.18",
+        "@types/node-fetch": "^2.6.4",
+        "abort-controller": "^3.0.0",
+        "agentkeepalive": "^4.2.1",
+        "digest-fetch": "^1.3.0",
+        "form-data-encoder": "1.7.2",
+        "formdata-node": "^4.3.2",
+        "node-fetch": "^2.6.7",
+        "web-streams-polyfill": "^3.2.1"
+      }
+    },
+    "node_modules/groq-sdk/node_modules/@types/node": {
+      "version": "18.19.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.21.tgz",
+      "integrity": "sha512-2Q2NeB6BmiTFQi4DHBzncSoq/cJMLDdhPaAoJFnFCyD9a8VPZRf7a1GAwp1Edb7ROaZc5Jz/tnZyL6EsWMRaqw==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",

package.json

@@ -41,6 +41,7 @@
     "encoding": "^0.1.13",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.10",
+    "groq-sdk": "^0.3.1",
     "html2canvas": "^1.4.1",
     "konva": "^9.2.2",
     "lucide-react": "^0.260.0",

src/app/interface/page/index.tsx

@@ -1,5 +1,6 @@
 import { allLayoutAspectRatios, allLayouts, allLayoutsNbPanels } from "@/app/layouts"
 import { useStore } from "@/app/store"
+import { NB_PANELS_PER_PAGE } from "@/config"
 import { cn } from "@/lib/utils"
 import { useEffect, useRef } from "react"
 
@@ -14,6 +15,7 @@ export function Page({ page }: { page: number}) {
   const aspectRatio = ((allLayoutAspectRatios as any)[layout] as string) || "aspect-[250/297]"
 
   const nbPanels = ((allLayoutsNbPanels as any)[layout] as number) || 4
+  const nbPages = Math.round(nbPanels / NB_PANELS_PER_PAGE)
 
   /*
   const [canLoad, setCanLoad] = useState(false)
@@ -41,21 +43,31 @@ export function Page({ page }: { page: number}) {
       ref={pageRef}
       className={cn(
         `w-full`,
+        `print:w-screen`,
+        `print:break-after-all`
+      )}
+      style={{
+        padding: `${Math.round((zoomLevel / 100) * 16)}px`
+        // marginLeft: `${zoomLevel > 100 ? `100`}`
+      }}
+      >
+      <div
+      className={cn(
         aspectRatio,
         `transition-all duration-100 ease-in-out`,
         `border border-stone-200`,
         `shadow-2xl`,
         `print:shadow-none`,
         `print:border-0`,
-        `print:width-screen`,
-        `print:break-after-all`
       )}
       style={{
         padding: `${Math.round((zoomLevel / 100) * 16)}px`
         // marginLeft: `${zoomLevel > 100 ? `100`}`
       }}
       >
-      <LayoutElement page={page} nbPanels={nbPanels} />
+       <LayoutElement page={page} nbPanels={nbPanels} />
+      </div>
+      {nbPages > 1 && <p className="w-full text-center pt-4 font-sans text-2xs font-semibold text-stone-600">Page {page + 1} / {nbPages}</p>}
     </div>
   )
 }

src/app/interface/settings-dialog/defaultSettings.ts

@@ -14,4 +14,7 @@ export const defaultSettings: Settings = {
   replicateApiModelTrigger: "",
   openaiApiKey: "",
   openaiApiModel: "dall-e-3",
+  openaiApiLanguageModel: "gpt-4",
+  groqApiKey: "",
+  groqApiLanguageModel: "mixtral-8x7b-32768",
 }

src/app/interface/settings-dialog/getSettings.ts

@@ -21,6 +21,9 @@ export function getSettings(): Settings {
       replicateApiModelTrigger: getValidString(localStorage?.getItem?.(localStorageKeys.replicateApiModelTrigger), defaultSettings.replicateApiModelTrigger),
       openaiApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.openaiApiKey), defaultSettings.openaiApiKey),
       openaiApiModel: getValidString(localStorage?.getItem?.(localStorageKeys.openaiApiModel), defaultSettings.openaiApiModel),
+      openaiApiLanguageModel: getValidString(localStorage?.getItem?.(localStorageKeys.openaiApiLanguageModel), defaultSettings.openaiApiLanguageModel),
+      groqApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.groqApiKey), defaultSettings.groqApiKey),
+      groqApiLanguageModel: getValidString(localStorage?.getItem?.(localStorageKeys.groqApiLanguageModel), defaultSettings.groqApiLanguageModel),
     }
   } catch (err) {
     return {

src/app/interface/settings-dialog/localStorageKeys.ts

@@ -14,4 +14,7 @@ export const localStorageKeys: Record<keyof Settings, string> = {
   replicateApiModelTrigger: "CONF_RENDERING_REPLICATE_API_MODEL_TRIGGER",
   openaiApiKey: "CONF_AUTH_OPENAI_API_KEY",
   openaiApiModel: "CONF_AUTH_OPENAI_API_MODEL",
+  openaiApiLanguageModel: "CONF_AUTH_OPENAI_API_LANGUAGE_MODEL",
+  groqApiKey: "CONF_AUTH_GROQ_API_KEY",
+  groqApiLanguageModel: "CONF_AUTH_GROQ_API_LANGUAGE_MODEL",
 }

src/app/queries/predict.ts

@@ -3,7 +3,11 @@
 import { LLMEngine } from "@/types"
 import { predict as predictWithHuggingFace } from "./predictWithHuggingFace"
 import { predict as predictWithOpenAI } from "./predictWithOpenAI"
+import { predict as predictWithGroq } from "./predictWithGroq"
 
 const llmEngine = `${process.env.LLM_ENGINE || ""}` as LLMEngine
 
-export const predict = llmEngine === "OPENAI" ? predictWithOpenAI : predictWithHuggingFace
+export const predict =
+  llmEngine === "GROQ" ? predictWithGroq :
+  llmEngine === "OPENAI" ? predictWithOpenAI :
+  predictWithHuggingFace

src/app/queries/predictWithGroq.ts

@@ -0,0 +1,28 @@
+"use server"
+
+import Groq from "groq-sdk"
+
+export async function predict(inputs: string, nbPanels: number): Promise<string> {
+  const groqApiKey = `${process.env.AUTH_GROQ_API_KEY || ""}`
+  const groqApiModel = `${process.env.LLM_GROQ_API_MODEL || "mixtral-8x7b-32768"}`
+  
+  const groq = new Groq({
+    apiKey: groqApiKey,
+  })
+
+  const messages: Groq.Chat.Completions.CompletionCreateParams.Message[] = [
+    { role: "assistant", content: "" },
+  ]
+
+  try {
+    const res = await groq.chat.completions.create({
+      messages: messages,
+      model: groqApiModel,
+    })
+
+    return res.choices[0].message.content || ""
+  } catch (err) {
+    console.error(`error during generation: ${err}`)
+    return ""
+  }
+}

src/lib/useOAuth.ts

@@ -56,6 +56,22 @@ export function useOAuth({
       canLogin,
       isLoggedIn,
     })
+
+    /*
+    useOAuth debug: {
+      oauthResult: '',
+      clientId: '........',
+      redirectUrl: 'http://localhost:3000',
+      scopes: 'openid profile inference-api',
+      isOAuthEnabled: true,
+      isBetaEnabled: false,
+      code: '...........',
+      state: '{"nonce":".........","redirectUri":"http://localhost:3000"}',
+      hasReceivedFreshOAuth: true,
+      canLogin: false,
+      isLoggedIn: false
+    }
+    */
   }
 
   useEffect(() => {

src/types.ts

@@ -100,6 +100,7 @@ export type LLMEngine =
   | "INFERENCE_ENDPOINT"
   | "OPENAI"
   | "REPLICATE"
+  | "GROQ"
 
   export type RenderingEngine =
   | "VIDEOCHAIN"
@@ -154,6 +155,7 @@ export type LayoutProps = {
   nbPanels: number
 }
 
+// TODO: rename the *Model fields to better indicate if this is a LLM or RENDER mdoel
 export type Settings = {
   renderingModelVendor: RenderingModelVendor
   renderingUseTurbo: boolean
@@ -168,4 +170,7 @@ export type Settings = {
   replicateApiModelTrigger: string
   openaiApiKey: string
   openaiApiModel: string
+  openaiApiLanguageModel: string
+  groqApiKey: string
+  groqApiLanguageModel: string
 }