Vercel AI SDKを導入して各AIサービスの呼び出し処理を統一化

package.json

@@ -15,6 +15,9 @@
     "desktop": "NEXT_PUBLIC_BACKGROUND_IMAGE_PATH=\"\" run-p dev electron"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^0.0.48",
+    "@ai-sdk/google": "^0.0.46",
+    "@ai-sdk/openai": "^0.0.54",
     "@anthropic-ai/sdk": "^0.20.8",
     "@charcoal-ui/icons": "^2.6.0",
     "@google-cloud/text-to-speech": "^5.0.1",
@@ -26,18 +29,21 @@
     "@pixiv/three-vrm": "^3.0.0",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@vercel/analytics": "^1.3.1",
+    "ai": "^3.3.20",
     "axios": "^1.6.8",
     "canvas": "^2.11.2",
     "formidable": "^3.5.1",
     "groq-sdk": "^0.3.3",
     "i18next": "^23.6.0",
     "next": "^14.2.5",
+    "ollama-ai-provider": "^0.13.0",
     "openai": "^4.38.5",
     "pdfjs-dist": "^4.5.136",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^13.3.1",
     "three": "^0.167.1",
+    "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

src/components/chatLog.tsx

@@ -45,7 +45,7 @@ export const ChatLog = () => {
                   />
                   <ChatImage
                     role={msg.role}
-                    imageUrl={msg.content[1].image_url.url}
+                    imageUrl={msg.content[1].image}
                     characterName={characterName}
                   />
                 </>

src/components/menu.tsx

@@ -144,7 +144,7 @@ export const Menu = () => {
                   />
                 )}
               </div>
-              {selectAIService === 'openai' && !youtubeMode && (
+              {!youtubeMode && (
                 <>
                   <div className="order-3">
                     <IconButton

src/components/settings/log.tsx

@@ -55,7 +55,7 @@ const Log = () => {
                   ></input>
                 ) : (
                   <Image
-                    src={value.content[1].image_url.url}
+                    src={value.content[1].image}
                     alt="画像"
                     width={500}
                     height={500}

src/components/settings/modelProvider.tsx

@@ -7,11 +7,12 @@ import { SYSTEM_PROMPT } from '@/features/constants/systemPromptConstants'
 import { Link } from '../link'
 import { TextButton } from '../textButton'
 import { useCallback } from 'react'
+import { multiModalAIServices } from '@/features/stores/settings'
 
 const ModelProvider = () => {
   const webSocketMode = settingsStore((s) => s.webSocketMode)
 
-  const openAiKey = settingsStore((s) => s.openAiKey)
+  const openaiKey = settingsStore((s) => s.openaiKey)
   const anthropicKey = settingsStore((s) => s.anthropicKey)
   const googleKey = settingsStore((s) => s.googleKey)
   const groqKey = settingsStore((s) => s.groqKey)
@@ -30,7 +31,7 @@ const ModelProvider = () => {
   // ローカルLLMが選択された場合、AIモデルを空文字に設定
   const defaultModels = {
     openai: 'gpt-4o',
-    anthropic: 'claude-3.5-sonnet-20240620',
+    anthropic: 'claude-3-5-sonnet-20240620',
     google: 'gemini-1.5-pro',
     groq: 'gemma-7b-it',
     localLlm: '',
@@ -44,24 +45,17 @@ const ModelProvider = () => {
         selectAIModel: defaultModels[newService],
       })
 
-      if (newService !== 'openai') {
+      if (!multiModalAIServices.includes(newService as any)) {
         homeStore.setState({ modalImage: '' })
         menuStore.setState({ showWebcam: false })
 
-        if (newService !== 'anthropic') {
-          settingsStore.setState({
-            conversationContinuityMode: false,
-          })
-        }
-
-        if (newService !== 'anthropic' && newService !== 'google') {
-          settingsStore.setState({
-            slideMode: false,
-          })
-          slideStore.setState({
-            isPlaying: false,
-          })
-        }
+        settingsStore.setState({
+          conversationContinuityMode: false,
+          slideMode: false,
+        })
+        slideStore.setState({
+          isPlaying: false,
+        })
       }
     },
     []
@@ -100,9 +94,9 @@ const ModelProvider = () => {
                 className="text-ellipsis px-16 py-8 w-col-span-2 bg-surface1 hover:bg-surface1-hover rounded-8"
                 type="text"
                 placeholder="sk-..."
-                value={openAiKey}
+                value={openaiKey}
                 onChange={(e) =>
-                  settingsStore.setState({ openAiKey: e.target.value })
+                  settingsStore.setState({ openaiKey: e.target.value })
                 }
               />
               <div className="my-16">

src/components/settings/slide.tsx

@@ -1,6 +1,9 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useState } from 'react'
-import settingsStore from '@/features/stores/settings'
+import settingsStore, {
+  multiModalAIServices,
+  multiModalAIServiceKey,
+} from '@/features/stores/settings'
 import menuStore from '@/features/stores/menu'
 import slideStore from '@/features/stores/slide'
 import { TextButton } from '../textButton'
@@ -66,9 +69,9 @@ const Slide = () => {
         <TextButton
           onClick={toggleSlideMode}
           disabled={
-            selectAIService !== 'openai' &&
-            selectAIService !== 'anthropic' &&
-            selectAIService !== 'google'
+            !multiModalAIServices.includes(
+              selectAIService as multiModalAIServiceKey
+            )
           }
         >
           {slideMode ? t('StatusOn') : t('StatusOff')}
@@ -92,9 +95,9 @@ const Slide = () => {
               </option>
             ))}
           </select>
-          {selectAIService === 'openai' && (
-            <SlideConvert onFolderUpdate={handleFolderUpdate} />
-          )}
+          {multiModalAIServices.includes(
+            selectAIService as multiModalAIServiceKey
+          ) && <SlideConvert onFolderUpdate={handleFolderUpdate} />}
         </>
       )}
     </>

src/components/settings/slideConvert.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import settingsStore from '@/features/stores/settings'
+import settingsStore, {
+  multiModalAIServiceKey,
+  multiModalAIServices,
+} from '@/features/stores/settings'
 import { TextButton } from '../textButton'
 
 interface SlideConvertProps {
@@ -11,7 +14,9 @@ const SlideConvert: React.FC<SlideConvertProps> = ({ onFolderUpdate }) => {
   const { t } = useTranslation()
   const [file, setFile] = useState<File | null>(null)
   const [folderName, setFolderName] = useState<string>('')
-  const [apiKey] = useState<string>(settingsStore.getState().openAiKey)
+  const aiService = settingsStore.getState()
+    .selectAIService as multiModalAIServiceKey
+
   const [model, setModel] = useState<string>('gpt-4o')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const selectLanguage = settingsStore.getState().selectLanguage
@@ -27,6 +32,15 @@ const SlideConvert: React.FC<SlideConvertProps> = ({ onFolderUpdate }) => {
 
   const handleFormSubmit = async (event: React.FormEvent) => {
     event.preventDefault()
+
+    if (!multiModalAIServices.includes(aiService)) {
+      alert(t('InvalidAIService'))
+      return
+    }
+
+    const apiKeyName = `${aiService}Key` as const
+    const apiKey = settingsStore.getState()[apiKeyName]
+
     if (!file || !folderName || !apiKey || !model) {
       alert(t('PdfConvertSubmitError'))
       return
@@ -37,6 +51,7 @@ const SlideConvert: React.FC<SlideConvertProps> = ({ onFolderUpdate }) => {
     const formData = new FormData()
     formData.append('file', file)
     formData.append('folderName', folderName)
+    formData.append('aiService', aiService)
     formData.append('apiKey', apiKey)
     formData.append('model', model)
     formData.append('selectLanguage', selectLanguage)
@@ -101,11 +116,50 @@ const SlideConvert: React.FC<SlideConvertProps> = ({ onFolderUpdate }) => {
           onChange={(e) => setModel(e.target.value)}
           className="text-ellipsis px-16 py-8 w-col-span-4 bg-surface1 hover:bg-surface1-hover rounded-8"
         >
-          <option value="gpt-4o-mini">gpt-4o-mini</option>
-          <option value="chatgpt-4o-latest">chatgpt-4o-latest</option>
-          <option value="gpt-4o-2024-08-06">gpt-4o-2024-08-06</option>
-          <option value="gpt-4o">gpt-4o(2024-05-13)</option>
-          <option value="gpt-4-turbo">gpt-4-turbo</option>
+          {aiService === 'openai' && (
+            <>
+              <option value="gpt-4o-mini">gpt-4o-mini</option>
+              <option value="chatgpt-4o-latest">chatgpt-4o-latest</option>
+              <option value="gpt-4o-2024-08-06">gpt-4o-2024-08-06</option>
+              <option value="gpt-4o">gpt-4o(2024-05-13)</option>
+              <option value="gpt-4-turbo">gpt-4-turbo</option>
+            </>
+          )}
+          {aiService === 'anthropic' && (
+            <>
+              <option value="claude-3-opus-20240229">
+                claude-3-opus-20240229
+              </option>
+              <option value="claude-3-5-sonnet-20240620">
+                claude-3.5-sonnet-20240620
+              </option>
+              <option value="claude-3-sonnet-20240229">
+                claude-3-sonnet-20240229
+              </option>
+              <option value="claude-3-haiku-20240307">
+                claude-3-haiku-20240307
+              </option>
+            </>
+          )}
+          {aiService === 'google' && (
+            <>
+              <option value="gemini-1.5-flash-exp-0827">
+                gemini-1.5-flash-exp-0827
+              </option>
+              <option value="gemini-1.5-pro-exp-0827">
+                gemini-1.5-pro-exp-0827
+              </option>
+              <option value="gemini-1.5-flash-8b-exp-0827">
+                gemini-1.5-flash-8b-exp-0827
+              </option>
+              <option value="gemini-1.5-pro-latest">
+                gemini-1.5-pro-latest
+              </option>
+              <option value="gemini-1.5-flash-latest">
+                gemini-1.5-flash-latest
+              </option>
+            </>
+          )}
         </select>
         <div className="my-16">
           <TextButton type="submit" disabled={isLoading}>

src/components/settings/youtube.tsx

@@ -4,6 +4,7 @@ import homeStore from '@/features/stores/home'
 import menuStore from '@/features/stores/menu'
 import settingsStore from '@/features/stores/settings'
 import { TextButton } from '../textButton'
+import { multiModalAIServices } from '@/features/stores/settings'
 
 const YouTube = () => {
   const youtubeApiKey = settingsStore((s) => s.youtubeApiKey)
@@ -98,8 +99,7 @@ const YouTube = () => {
                       })
                     }
                     disabled={
-                      (selectAIService !== 'openai' &&
-                        selectAIService !== 'anthropic') ||
+                      !multiModalAIServices.includes(selectAIService as any) ||
                       slideMode ||
                       webSocketMode
                     }

src/features/chat/aiChatFactory.ts

@@ -1,54 +1,41 @@
 import { Message } from '@/features/messages/messages'
-import { AIService, AIServiceConfig } from '@/features/constants/settings'
-import { getAnthropicChatResponseStream } from './anthropicChat'
-import { getDifyChatResponseStream } from './difyChat'
-import { getGoogleChatResponseStream } from './googleChat'
-import { getGroqChatResponseStream } from './groqChat'
+import { AIService } from '@/features/constants/settings'
 import { getLocalLLMChatResponseStream } from './localLLMChat'
-import { getOpenAIChatResponseStream } from './openAiChat'
+import { getDifyChatResponseStream } from './difyChat'
+import { getVercelAIChatResponseStream } from './vercelAIChat'
+import settingsStore from '@/features/stores/settings'
 
 export async function getAIChatResponseStream(
   service: AIService,
-  messages: Message[],
-  config: AIServiceConfig
+  messages: Message[]
 ): Promise<ReadableStream<string> | null> {
+  const ss = settingsStore.getState()
+
   switch (service) {
     case 'openai':
-      return getOpenAIChatResponseStream(
-        messages,
-        config.openai.key,
-        config.openai.model
-      )
     case 'anthropic':
-      return getAnthropicChatResponseStream(
-        messages,
-        config.anthropic.key,
-        config.anthropic.model
-      )
     case 'google':
-      return getGoogleChatResponseStream(
+    case 'groq':
+      return getVercelAIChatResponseStream(
         messages,
-        config.google.key,
-        config.google.model
+        ss[`${service}Key`] ||
+          process.env[`NEXT_PUBLIC_${service.toUpperCase()}_KEY`] ||
+          '',
+        service,
+        ss.selectAIModel
       )
     case 'localLlm':
       return getLocalLLMChatResponseStream(
         messages,
-        config.localLlm.url,
-        config.localLlm.model
-      )
-    case 'groq':
-      return getGroqChatResponseStream(
-        messages,
-        config.groq.key,
-        config.groq.model
+        ss.localLlmUrl || process.env.NEXT_PUBLIC_LOCAL_LLM_URL || '',
+        ss.selectAIModel || process.env.NEXT_PUBLIC_LOCAL_LLM_MODEL || ''
       )
     case 'dify':
       return getDifyChatResponseStream(
         messages,
-        config.dify.key,
-        config.dify.url,
-        config.dify.conversationId
+        ss.difyKey || process.env.NEXT_PUBLIC_DIFY_KEY || '',
+        ss.difyUrl || process.env.NEXT_PUBLIC_DIFY_URL || '',
+        ss.difyConversationId
       )
     default:
       throw new Error(`Unsupported AI service: ${service}`)