we'll add anthropic eventually

Author: jbilcke-hf

src/app/api/mocker/[filename]/route.ts

@@ -89,11 +89,11 @@ export async function GET(req: NextRequest) {
       name,
       prompt,
     })
-    const data = await imagineJSON<Record<string, any>>(prompt, {}, '{')
+    const data = await imagineJSON<Record<string, any>>(prompt, {}, '{', {} as any)
     return NextResponse.json(data, {
       status: 200,
       statusText: "OK",
-      headers
+      headers,
     })
   } else if (['txt'].includes(extension)) {
     const prompt = mockText(name)

src/app/content/page.tsx

@@ -149,9 +149,7 @@ function Content() {
         tasksPrompt(prompt),
         {},
         '{',
-        model,
-        apiKey,
-        mockData
+        settings
       )
     } catch (exc) {
       console.error(`tab.content(${id}): generateTasks: failed`, exc)

src/app/search/page.tsx

@@ -85,9 +85,7 @@ function Search() {
         searchTemplate(prompt, nbResults),
         [],
         '[',
-        settings?.openAIModel,
-        settings?.openAIKey,
-        settings?.useMockData
+        settings
       )
     } catch (exc) {
       console.error(exc)

src/app/settings/page.tsx

@@ -1,13 +1,14 @@
 "use client"
 
-import { type Settings } from '../../types'
+import { LLMVendor, type Settings } from '../../types'
 import { useSettings } from '../../hooks/useSettings'
 import { SettingInput } from '../../components/inputs/SettingInput'
 import { Toggle } from '../../components/toggle'
 
 type BaseField = {
   label: string
   description?: string
+  vendorSpecific?: LLMVendor
 }
 
 export type SpecializedField =
@@ -58,9 +59,14 @@ const fields: Partial<SettingsFields> & MiscPanelFields = {
     options: [
       {
         description:
-          'OpenAI - about $0.08 per query (includes search + generation)',
+          'OpenAI (will bill your own account, please be careful)',
         value: 'OPENAI',
       },
+      {
+        description:
+          'Anthropic (will bill your own account, please be careful)',
+        value: 'ANTHROPIC',
+      },
       /*
       {
         description: 'HuggingFace',
@@ -96,20 +102,46 @@ const fields: Partial<SettingsFields> & MiscPanelFields = {
     description:
       'You need a valid OpenAI account and API token to use this vendor',
     type: 'section',
+    vendorSpecific: "OPENAI",
   },
   openAIKey: {
     label: 'API Key',
     description: '',
     placeholder: 'Enter your OpenAI API access key',
     type: 'password',
     defaultValue: '',
+    vendorSpecific: 'OPENAI',
   },
   openAIModel: {
     label: 'Language Model',
     description: '',
-    placeholder: 'Enter the model (default: gpt-4-turbo)',
+    placeholder: 'Enter the model (default: gpt-4o)',
+    type: 'text',
+    defaultValue: 'gpt-4o',
+    vendorSpecific: 'OPENAI',
+  },
+  anthropic: {
+    label: 'Anthropic Settings',
+    description:
+      'You need a valid Anthropic account and API token to use this vendor',
+    type: 'section',
+    vendorSpecific: "ANTHROPIC",
+  },
+  anthropicKey: {
+    label: 'API Key',
+    description: '',
+    placeholder: 'Enter your Anthropic API access key',
+    type: 'password',
+    defaultValue: '',
+    vendorSpecific: 'ANTHROPIC',
+  },
+  anthropicModel: {
+    label: 'Language Model',
+    description: '',
+    placeholder: 'Enter the model (default: claude-3-5-sonnet-20240620)',
     type: 'text',
-    defaultValue: 'gpt-4-turbo',
+    defaultValue: 'claude-3-5-sonnet-20240620',
+    vendorSpecific: 'ANTHROPIC',
   },
   /*
   customPrompts: {
@@ -168,6 +200,7 @@ const fields: Partial<SettingsFields> & MiscPanelFields = {
 function Favorites() {
   const [settings, setSettings] = useSettings()
   const isLoading = !settings
+  const vendor: LLMVendor = settings.coreVendor
 
   return isLoading ? (
     <div className="flex items-center justify-center h-screen w-screen text-gray-800">
@@ -182,7 +215,7 @@ function Favorites() {
         Settings
       </h3>
       <div className="flex flex-col w-full">
-        {Object.entries(fields).map(
+        {Object.entries(fields).filter(s => s[1].vendorSpecific ? ( s[1].vendorSpecific === vendor) : true).map(
           ([name, { label, description, ...field }]) => (
             <div key={name} className="flex flex-col py-3 w-full">
               {field.type === 'section' ? (

src/hooks/useSettings.ts

@@ -10,7 +10,9 @@ export const useSettings = (
     huggingFaceKey: '',
     huggingFaceModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
     openAIKey: '',
-    openAIModel: 'gpt-4-turbo',
+    openAIModel: 'gpt-4o',
+    anthropicKey: '',
+    anthropicModel: 'claude-3-5-sonnet-20240620',
     customTasksPrompt: '',
     customHtmlPrompt: '',
     customScriptPrompt: '',

src/providers/anthropic/complete.ts

@@ -1,5 +1,3 @@
-
-import Anthropic from '@anthropic-ai/sdk';
 import { MessageParam } from '@anthropic-ai/sdk/resources/index.mjs';
 
 import { CompleteFnParams } from "@/types"

src/providers/openai/complete.ts

@@ -15,7 +15,7 @@ export async function complete({
   }: CompleteFnParams): Promise<string> {
 
   // don't do this if you deploy the latent browser on a server!!!
-  persisted.model = model || 'gpt-4-turbo'
+  persisted.model = model || 'gpt-4o'
 
   const openai = await getOpenAI(apiKey)
 

src/providers/openai/index.ts

@@ -10,6 +10,7 @@ import { presets } from '../../engine/prompts/presets'
 import { type PromptSettings } from '../../engine/prompts/types'
 import { getOpenAI } from './getOpenAI'
 import { complete } from './complete'
+import { Settings } from '@/types'
 
 export const imagineString = async (
   prompt: string,
@@ -165,22 +166,22 @@ export const imagineJSON = async <T>(
   prompt: string,
   defaultValue: T,
   prefix: string,
-  model?: string,
-  apiKey?: string,
-  mockData?: boolean
+  settings: Settings
 ): Promise<T> => {
   console.log('imagineJSON> prompt:', prompt)
 
+  const { model, apiKey, mockData } = settings
+
   if (mockData) {
     return mocks.json<T>(prefix)
   }
 
   let output = await imagineString(
     prompt,
     presets.json,
-    model,
-    apiKey,
-    mockData
+    typeof model === "string" ? model : undefined,
+    typeof apiKey === "string" ? apiKey : undefined,
+    typeof mockData === "boolean" ? mockData : undefined,
   )
 
   try {

src/types/index.ts

@@ -75,6 +75,8 @@ export type Settings = Record<string, string | boolean> & {
   huggingFaceModel: string
   openAIKey: string
   openAIModel: string
+  anthropicKey: string
+  anthropicModel: string
   customTasksPrompt: string
   customHtmlPrompt: string
   customScriptPrompt: string