Upgrade ai sdk

package.json

@@ -9,27 +9,28 @@
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "3.564.0",
+    "@ai-sdk/openai": "^0.0.10",
-    "@aws-sdk/s3-request-presigner": "3.564.0",
+    "@aws-sdk/client-s3": "3.574.0",
+    "@aws-sdk/s3-request-presigner": "3.574.0",
     "@next/bundle-analyzer": "14.2.3",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.5",
+    "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.12.11",
-    "@types/pg": "^8.11.5",
+    "@types/pg": "^8.11.6",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.7.1",
+    "@typescript-eslint/parser": "^7.8.0",
     "@upstash/ratelimit": "^1.1.3",
     "@vercel/analytics": "^1.2.2",
     "@vercel/blob": "^0.23.2",
     "@vercel/kv": "^1.0.1",
     "@vercel/speed-insights": "^1.0.10",
-    "ai": "^3.0.34",
+    "ai": "^3.1.5",
     "autoprefixer": "10.4.19",
     "camelcase-keys": "^9.1.3",
     "clsx": "^2.1.1",
@@ -38,19 +39,18 @@
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3",
     "exifr": "^7.1.3",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.1.9",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "nanoid": "^5.0.7",
     "next": "^14.2.3",
     "next-auth": "5.0.0-beta.15",
     "next-themes": "^0.3.0",
-    "openai": "^4.38.5",
     "pg": "^8.11.5",
     "postcss": "8.4.38",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-icons": "^5.1.0",
+    "react-icons": "^5.2.1",
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",
     "swr": "^2.2.5",

src/photo/ai/useAiImageQuery.ts

@@ -21,7 +21,7 @@ export default function useAiImageQuery(
           query,
         );
         for await (const text of readStreamableValue(textStream)) {
-          setText((text ?? '')
+          setText(current => `${current}${text ?? ''}`
             .replaceAll('\n', ' ')
             .replaceAll('"', '')
             .replace(/\.$/, ''));

src/services/openai.ts

@@ -1,17 +1,19 @@
 'use server';
 
-import OpenAI from 'openai';
+import { streamText } from 'ai';
-import { createStreamableValue, render } from 'ai/rsc';
+import { createStreamableValue } from 'ai/rsc';
+import { createOpenAI } from '@ai-sdk/openai';
 import { kv } from '@vercel/kv';
 import { Ratelimit } from '@upstash/ratelimit';
 import { AI_TEXT_GENERATION_ENABLED, HAS_VERCEL_KV } from '@/site/config';
 import { safelyRunAdminServerAction } from '@/auth';
+import { removeBase64Prefix } from '@/utility/image';
 
 const RATE_LIMIT_IDENTIFIER = 'openai-image-query';
 const RATE_LIMIT_MAX_QUERIES_PER_HOUR = 100;
 
-const provider = AI_TEXT_GENERATION_ENABLED
+const openai = AI_TEXT_GENERATION_ENABLED
-  ? new OpenAI({ apiKey: process.env.OPENAI_SECRET_KEY })
+  ? createOpenAI({ apiKey: process.env.OPENAI_SECRET_KEY })
   : undefined;
 
 // Allows 100 requests per hour
@@ -43,10 +45,10 @@ export const streamOpenAiImageQuery = async (
 
     const stream = createStreamableValue('');
 
-    if (provider) {
+    if (openai) {
-      render({
+      (async () => {
-        provider,
+        const { textStream } = await streamText({
-        model: 'gpt-4-vision-preview',
+          model: openai('gpt-4-vision-preview'),
           messages: [{
             'role': 'user',
             'content': [
@@ -54,21 +56,17 @@ export const streamOpenAiImageQuery = async (
                 'type': 'text',
                 'text': query,
               }, {
-              'type': 'image_url',
+                'type': 'image',
-              'image_url': {
+                'image': removeBase64Prefix(imageBase64),
-                'url': imageBase64,
-              },
               },
             ],
           }],
-        text: ({ content, done }): any => {
-          if (done) {
-            stream.done(content);
-          } else {
-            stream.update(content);
-          }
-        },
         });
+        for await (const delta of textStream) {
+          stream.update(delta);
+        }
+        stream.done();
+      })();
     }
 
     return stream.value;

src/utility/image.ts

@@ -0,0 +1,3 @@
+export const removeBase64Prefix = (base64: string) => {
+  return base64.match(/^data:image\/[a-z]{3,4};base64,(.+)$/)?.[1] ?? base64;
+};