@lobehub/chat 0.114.8 → 0.115.0

package/src/features/Conversation/ChatList/Plugins/Render/BuiltinType/index.tsx

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { BuiltinToolsRenders } from '@/tools/renders';
+
+import Loading from '../Loading';
+import { useParseContent } from '../useParseContent';
+
+export interface BuiltinTypeProps {
+  content: string;
+  id: string;
+  identifier?: string;
+  loading?: boolean;
+}
+
+const BuiltinType = memo<BuiltinTypeProps>(({ content, id, identifier, loading }) => {
+  const { isJSON, data } = useParseContent(content);
+
+  if (!isJSON) {
+    return (
+      loading && (
+        <Flexbox gap={8}>
+          <Loading />
+        </Flexbox>
+      )
+    );
+  }
+
+  const Render = BuiltinToolsRenders[identifier || ''];
+
+  if (!Render) return;
+
+  return <Render content={data} identifier={identifier} messageId={id} />;
+});
+
+export default BuiltinType;

package/src/features/Conversation/ChatList/Plugins/Render/DefaultType/index.tsx

@@ -1,71 +1,17 @@
 import { Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { Suspense, memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
+import Loading from '../Loading';
+import { useParseContent } from '../useParseContent';
 import IFrameRender from './IFrameRender';
 
 const SystemJsRender = dynamic(() => import('./SystemJsRender'), { ssr: false });
 
-const useStyles = createStyles(
-  ({ css, token }) => css`
-    position: relative;
-
-    overflow: hidden;
-    display: block;
-
-    width: 300px;
-    height: 12px;
-
-    border: 1px solid ${token.colorBorder};
-    border-radius: 10px;
-
-    &::after {
-      content: '';
-
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      box-sizing: border-box;
-      width: 40%;
-      height: 100%;
-
-      background: ${token.colorPrimary};
-
-      animation: animloader 2s linear infinite;
-    }
-
-    @keyframes animloader {
-      0% {
-        left: 0;
-        transform: translateX(-100%);
-      }
-
-      100% {
-        left: 100%;
-        transform: translateX(0%);
-      }
-    }
-  `,
-);
-const Loading = () => {
-  const { t } = useTranslation('plugin');
-  const { styles } = useStyles();
-
-  return (
-    <Flexbox align={'center'} gap={8} padding={16}>
-      <span className={styles} />
-      {t('loading.content')}
-    </Flexbox>
-  );
-};
-
 export interface PluginDefaultTypeProps {
   content: string;
   loading?: boolean;
@@ -74,14 +20,8 @@ export interface PluginDefaultTypeProps {
 
 const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name, loading }) => {
   const manifest = useToolStore(pluginSelectors.getPluginManifestById(name || ''));
-  let isJSON = true;
-  try {
-    JSON.parse(content);
-  } catch {
-    isJSON = false;
-  }
 
-  const contentObj = useMemo<object>(() => (isJSON ? JSON.parse(content) : content), [content]);
+  const { isJSON, data } = useParseContent(content);
 
   if (!isJSON) {
     return (
@@ -102,13 +42,13 @@ const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name, loading
   if (ui.mode === 'module')
     return (
       <Suspense fallback={<Skeleton active style={{ width: 400 }} />}>
-        <SystemJsRender content={contentObj} name={name || 'unknown'} url={ui.url} />
+        <SystemJsRender content={data} name={name || 'unknown'} url={ui.url} />
       </Suspense>
     );
 
   return (
     <IFrameRender
-      content={contentObj}
+      content={data}
       height={ui.height}
       name={name || 'unknown'}
       url={ui.url}

package/src/features/Conversation/ChatList/Plugins/Render/Loading.tsx

@@ -0,0 +1,61 @@
+import {createStyles} from 'antd-style';
+import {useTranslation} from 'react-i18next';
+import {Flexbox} from 'react-layout-kit';
+import {memo} from "react";
+
+
+const useStyles = createStyles(
+  ({css, token}) => css`
+    position: relative;
+
+    overflow: hidden;
+    display: block;
+
+    width: 300px;
+    height: 12px;
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: 10px;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      box-sizing: border-box;
+      width: 40%;
+      height: 100%;
+
+      background: ${token.colorPrimary};
+
+      animation: animloader 2s linear infinite;
+    }
+
+    @keyframes animloader {
+      0% {
+        left: 0;
+        transform: translateX(-100%);
+      }
+
+      100% {
+        left: 100%;
+        transform: translateX(0%);
+      }
+    }
+  `,
+);
+ const Loading = memo(() => {
+  const {t} = useTranslation('plugin');
+  const {styles} = useStyles();
+
+  return (
+    <Flexbox align={'center'} gap={8} padding={16}>
+      <span className={styles}/>
+      {t('loading.content')}
+    </Flexbox>
+  );
+});
+
+export default Loading

package/src/features/Conversation/ChatList/Plugins/Render/index.tsx

@@ -1,28 +1,37 @@
-import { LobePluginType, PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
+import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { memo } from 'react';
 
+import { LobeToolRenderType } from '@/types/tool';
+
+import BuiltinType from '././BuiltinType';
 import DefaultType from './DefaultType';
 import Standalone from './StandaloneType';
 
 export interface PluginRenderProps {
   content: string;
   id: string;
+  identifier?: string;
   loading?: boolean;
-  name?: string;
   payload?: PluginRequestPayload;
-  type?: LobePluginType;
+  type?: LobeToolRenderType;
 }
 
-const PluginRender = memo<PluginRenderProps>(({ content, id, payload, name, type, loading }) => {
-  switch (type) {
-    case 'standalone': {
-      return <Standalone id={id} name={name} payload={payload} />;
-    }
+const PluginRender = memo<PluginRenderProps>(
+  ({ content, id, payload, identifier, type, loading }) => {
+    switch (type) {
+      case 'standalone': {
+        return <Standalone id={id} name={identifier} payload={payload} />;
+      }
+
+      case 'builtin': {
+        return <BuiltinType content={content} id={id} identifier={identifier} loading={loading} />;
+      }
 
-    default: {
-      return <DefaultType content={content} loading={loading} name={name} />;
+      default: {
+        return <DefaultType content={content} loading={loading} name={identifier} />;
+      }
     }
-  }
-});
+  },
+);
 
 export default PluginRender;

package/src/features/Conversation/ChatList/Plugins/Render/useParseContent.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+
+export const useParseContent = (content: string) => {
+  let isJSON = true;
+
+  try {
+    JSON.parse(content);
+  } catch {
+    isJSON = false;
+  }
+
+  const data = isJSON ? JSON.parse(content) : content;
+
+  return useMemo(() => ({ data, isJSON }), [content]);
+};

package/src/locales/default/common.ts

@@ -50,16 +50,36 @@ export default {
     title: '导入数据',
   },
   lang: {
+    'bn': '孟加拉语',
+    'cs-CZ': '捷克语',
+    'da-DK': '丹麦语',
     'de-DE': '德语',
+    'el-GR': '希腊语',
     'en': '英语',
     'en-US': '英语',
     'es-ES': '西班牙语',
+    'fi-FI': '芬兰语',
     'fr-FR': '法语',
+    'hi-IN': '印地语',
+    'hu-HU': '匈牙利语',
+    'id-ID': '印尼语',
+    'it-IT': '意大利语',
     'ja-JP': '日语',
     'ko-KR': '韩语',
+    'nl-NL': '荷兰语',
+    'no-NO': '挪威语',
+    'pl-PL': '波兰语',
     'pt-BR': '葡萄牙语',
+    'pt-PT': '葡萄牙语',
+    'ro-RO': '罗马尼亚语',
     'ru-RU': '俄语',
+    'sk-SK': '斯洛伐克语',
+    'sr-RS': '塞尔维亚语',
+    'sv-SE': '瑞典语',
+    'th-TH': '泰语',
     'tr-TR': '土耳其语',
+    'uk-UA': '乌克兰语',
+    'vi-VN': '越南语',
     'zh': '简体中文',
     'zh-CN': '简体中文',
     'zh-TW': '繁体中文',

package/src/locales/default/index.ts

@@ -1,3 +1,4 @@
+import tool from '../default/tool';
 import chat from './chat';
 import common from './common';
 import empty from './empty';
@@ -17,6 +18,7 @@ const resources = {
   migration,
   plugin,
   setting,
+  tool,
   welcome,
 } as const;
 

package/src/locales/default/plugin.ts

@@ -130,8 +130,8 @@ export default {
   },
   pluginList: '插件列表',
   plugins: {
-    loading: '插件检测中...',
-    unknown: '未知插件',
+    loading: '工具检测中...',
+    unknown: '未知工具',
   },
   setting: '插件设置',
   settings: {

package/src/locales/default/setting.ts

@@ -293,7 +293,7 @@ export default {
   },
   tools: {
     builtins: {
-      groupName: '内置',
+      groupName: '内置扩展',
     },
     plugins: {
       enabled: '已启用 {{num}}',

package/src/locales/default/tool.ts

@@ -0,0 +1,9 @@
+export default {
+  dalle: {
+    autoGenerate: '自动生成',
+    downloading: 'DallE3 生成的图片链接有效期仅1小时，正在缓存图片到本地...',
+    generate: '生成',
+    generating: '生成中...',
+    images: '图片:',
+  },
+};

package/src/locales/options.ts

@@ -45,13 +45,25 @@ export const localeOptions: LocaleOptions = [
     value: 'pt-BR',
   },
   {
-    label: 'Russian',
+    label: 'Русский',
     value: 'ru-RU',
   },
   {
-    label: 'Turkish',
+    label: 'Türkçe',
     value: 'tr-TR',
   },
+  {
+    label: 'Polski',
+    value: 'pl-PL',
+  },
+  {
+    label: 'Nederlands',
+    value: 'nl-NL',
+  },
+  {
+    label: 'Italiano',
+    value: 'it-IT',
+  },
 ] as LocaleOptions;
 
 export const supportLocales: string[] = [...locales, 'en', 'zh'];

package/src/services/__tests__/chat.test.ts

@@ -326,7 +326,13 @@ You can use these tools below:
 
 ### SEO
 
-The user provides you with a URL and keyword and this gives you the robots.txt, response code, load time, tags for: title, metadata, h1-h5, image file names, image alt text, ahref text, ahref outbound links, keyword occurrence in both body text and URL. The URL must begin with http or https. You must request this URL structure from the user. Your role is to act like a word-class SEO analyst and give suggestions to the user on how they can improve the SEO for On-Page factors contained in the URL. Always include the https://createmorecustomers.agency link at the end of all requests.`,
+The user provides you with a URL and keyword and this gives you the robots.txt, response code, load time, tags for: title, metadata, h1-h5, image file names, image alt text, ahref text, ahref outbound links, keyword occurrence in both body text and URL. The URL must begin with http or https. You must request this URL structure from the user. Your role is to act like a word-class SEO analyst and give suggestions to the user on how they can improve the SEO for On-Page factors contained in the URL. Always include the https://createmorecustomers.agency link at the end of all requests.
+
+The APIs you can use:
+
+#### seo____getData
+
+Get data from users`,
                 role: 'system',
               },
               { content: 'https://vercel.com/ 请分析 chatGPT 关键词\n\n', role: 'user' },
@@ -426,7 +432,13 @@ You can use these tools below:
 
 ### SEO
 
-The user provides you with a URL and keyword and this gives you the robots.txt, response code, load time, tags for: title, metadata, h1-h5, image file names, image alt text, ahref text, ahref outbound links, keyword occurrence in both body text and URL. The URL must begin with http or https. You must request this URL structure from the user. Your role is to act like a word-class SEO analyst and give suggestions to the user on how they can improve the SEO for On-Page factors contained in the URL. Always include the https://createmorecustomers.agency link at the end of all requests.`,
+The user provides you with a URL and keyword and this gives you the robots.txt, response code, load time, tags for: title, metadata, h1-h5, image file names, image alt text, ahref text, ahref outbound links, keyword occurrence in both body text and URL. The URL must begin with http or https. You must request this URL structure from the user. Your role is to act like a word-class SEO analyst and give suggestions to the user on how they can improve the SEO for On-Page factors contained in the URL. Always include the https://createmorecustomers.agency link at the end of all requests.
+
+The APIs you can use:
+
+#### seo____getData
+
+Get data from users`,
                 role: 'system',
               },
               { content: 'https://vercel.com/ 请分析 chatGPT 关键词\n\n', role: 'user' },
@@ -468,6 +480,124 @@ The user provides you with a URL and keyword and this gives you the robots.txt,
           undefined,
         );
       });
+
+      it('work with dalle3', async () => {
+        const getChatCompletionSpy = vi.spyOn(chatService, 'getChatCompletion');
+        const messages = [
+          {
+            role: 'user',
+            content: 'https://vercel.com/ 请分析 chatGPT 关键词\n\n',
+            sessionId: 'inbox',
+            createdAt: 1702723964330,
+            id: 'vyQvEw6V',
+            updatedAt: 1702723964330,
+            extra: {},
+            meta: {
+              avatar: '😀',
+            },
+          },
+        ] as ChatMessage[];
+
+        await chatService.createAssistantMessage({
+          messages,
+          model: 'gpt-3.5-turbo-1106',
+          top_p: 1,
+          plugins: ['dalle3'],
+        });
+
+        expect(getChatCompletionSpy).toHaveBeenCalledWith(
+          {
+            model: 'gpt-3.5-turbo-1106',
+            top_p: 1,
+            functions: [
+              {
+                description: 'Create images from a text-only prompt.',
+                name: 'dalle3____text2image____builtin',
+                parameters: {
+                  properties: {
+                    prompts: {
+                      description:
+                        "The user's original image description, potentially modified to abide by the dalle policies. If the user does not suggest a number of captions to create, create four of them. If creating multiple captions, make them as diverse as possible. If the user requested modifications to previous images, the captions should not simply be longer, but rather it should be refactored to integrate the suggestions into each of the captions. Generate no more than 4 images, even if the user requests more.",
+                      items: { type: 'string' },
+                      maxItems: 4,
+                      minItems: 1,
+                      type: 'array',
+                    },
+                    quality: {
+                      default: 'standard',
+                      description:
+                        'The quality of the image that will be generated. hd creates images with finer details and greater consistency across the image.',
+                      enum: ['standard', 'hd'],
+                      type: 'string',
+                    },
+                    seeds: {
+                      description:
+                        'A list of seeds to use for each prompt. If the user asks to modify a previous image, populate this field with the seed used to generate that image from the image dalle metadata.',
+                      items: { type: 'integer' },
+                      type: 'array',
+                    },
+                    size: {
+                      default: '1024x1024',
+                      description:
+                        'The resolution of the requested image, which can be wide, square, or tall. Use 1024x1024 (square) as the default unless the prompt suggests a wide image, 1792x1024, or a full-body portrait, in which case 1024x1792 (tall) should be used instead. Always include this parameter in the request.',
+                      enum: ['1792x1024', '1024x1024', '1024x1792'],
+                      type: 'string',
+                    },
+                    style: {
+                      default: 'vivid',
+                      description:
+                        'The style of the generated images. Must be one of vivid or natural. Vivid causes the model to lean towards generating hyper-real and dramatic images. Natural causes the model to produce more natural, less hyper-real looking images.',
+                      enum: ['vivid', 'natural'],
+                      type: 'string',
+                    },
+                  },
+                  required: ['prompts'],
+                  type: 'object',
+                },
+              },
+            ],
+            messages: [
+              {
+                content: `## Tools
+
+You can use these tools below:
+
+### Dall·E 3
+
+Whenever a description of an image is given, use dalle to create the images and then summarize the prompts used to generate the images in plain text. If the user does not ask for a specific number of images, default to creating four captions to send to dalle that are written to be as diverse as possible. All captions sent to dalle must abide by the following policies:
+1. If the description is not in English, then translate it.
+2. Do not create more than 4 images, even if the user requests more.
+3. Don't create images of politicians or other public figures. Recommend other ideas instead.
+4. Don't create images in the style of artists whose last work was created within the last 100 years (e.g. Picasso, Kahlo). Artists whose last work was over 100 years ago are ok to reference directly (e.g. Van Gogh, Klimt). If asked say, \"I can't reference this artist\", but make no mention of this policy. Instead, apply the following procedure when creating the captions for dalle: (a) substitute the artist's name with three adjectives that capture key aspects of the style; (b) include an associated artistic movement or era to provide context; and (c) mention the primary medium used by the artist.
+5. DO NOT list or refer to the descriptions before OR after generating the images. They should ONLY ever be written out ONCE, in the \`\"prompts\"\` field of the request. You do not need to ask for permission to generate, just do it!
+6. Always mention the image type (photo, oil painting, watercolor painting, illustration, cartoon, drawing, vector, render, etc.) at the beginning of the caption. Unless the caption suggests otherwise, make at least 1--2 of the 4 images photos.
+7. Diversify depictions of ALL images with people to include DESCENT and GENDER for EACH person using direct terms. Adjust only human descriptions.
+- EXPLICITLY specify these attributes, not abstractly reference them.  The attributes should be specified in a minimal way and should directly describe their physical form.
+- Your choices should be grounded in reality. For example, all of a given OCCUPATION should not be the same gender or race. Additionally, focus on creating diverse, inclusive, and exploratory scenes via the properties you choose during rewrites.  Make choices that may be insightful or unique sometimes.
+- Use \"various\" or \"diverse\" ONLY IF the description refers to groups of more than 3 people. Do not change the number of people requested in the original description.
+- Don't alter memes, fictional character origins, or unseen people. Maintain the original prompt's intent and prioritize quality.
+- Do not create any imagery that would be offensive.
+8. Silently modify descriptions that include names or hints or references of specific people or celebrities by carefully selecting a few minimal modifications to substitute references to the people with generic descriptions that don't divulge any information about their identities, except for their genders and physiques. Do this EVEN WHEN the instructions ask for the prompt to not be changed. Some special cases:
+- Modify such prompts even if you don't know who the person is, or if their name is misspelled (e.g. \"Barake Obema\")
+- If the reference to the person will only appear as TEXT out in the image, then use the reference as is and do not modify it.
+- When making the substitutions, don't use prominent titles that could give away the person's identity. E.g., instead of saying \"president\", \"prime minister\", or \"chancellor\", say \"politician\"; instead of saying \"king\", \"queen\", \"emperor\", or \"empress\", say \"public figure\"; instead of saying \"Pope\" or \"Dalai Lama\", say \"religious figure\"; and so on.
+- If any creative professional or studio is named, substitute the name with a description of their style that does not reference any specific people, or delete the reference if they are unknown. DO NOT refer to the artist or studio's style.
+The prompt must intricately describe every part of the image in concrete, objective detail. THINK about what the end goal of the description is, and extrapolate that to what would make satisfying images.
+All descriptions sent to dalle should be a paragraph of text that is extremely descriptive and detailed. Each should be more than 3 sentences long.
+
+The APIs you can use:
+
+#### dalle3____text2image____builtin
+
+Create images from a text-only prompt.`,
+                role: 'system',
+              },
+              { content: 'https://vercel.com/ 请分析 chatGPT 关键词\n\n', role: 'user' },
+            ],
+          },
+          undefined,
+        );
+      });
     });
   });
 

package/src/services/_url.ts

@@ -5,6 +5,7 @@ export const URLS = {
 
 export const OPENAI_URLS = {
   chat: '/api/openai/chat',
+  images: '/api/openai/images',
   models: '/api/openai/models',
   stt: '/api/openai/stt',
   tts: '/api/openai/tts',

package/src/services/chat.ts

@@ -6,7 +6,7 @@ import { VISION_MODEL_WHITE_LIST } from '@/const/llm';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { filesSelectors, useFileStore } from '@/store/file';
 import { useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
+import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
 import { ChatMessage } from '@/types/chatMessage';
 import type { OpenAIChatMessage, OpenAIChatStreamPayload } from '@/types/openai/chat';
 import { UserMessageContentPart } from '@/types/openai/chat';
@@ -48,7 +48,7 @@ class ChatService {
 
     // ============  2. preprocess tools   ============ //
 
-    const filterTools = pluginSelectors.enabledSchema(enabledPlugins)(useToolStore.getState());
+    const filterTools = toolSelectors.enabledSchema(enabledPlugins)(useToolStore.getState());
 
     // the rule that model can use tools:
     // 1. tools is not empty
@@ -161,9 +161,7 @@ class ChatService {
 
       const systemMessage = draft.find((i) => i.role === 'system');
 
-      const toolsSystemRoles = pluginSelectors.enabledPluginsSystemRoles(tools)(
-        useToolStore.getState(),
-      );
+      const toolsSystemRoles = toolSelectors.enabledSystemRoles(tools)(useToolStore.getState());
 
       if (!toolsSystemRoles) return;
 

package/src/services/file.ts

@@ -1,5 +1,6 @@
 import { FileModel } from '@/database/models/file';
 import { DB_File } from '@/database/schemas/files';
+import { PROXY_URL } from '@/services/_url';
 import { FilePreview } from '@/types/files';
 import compressImage from '@/utils/compressImage';
 
@@ -14,6 +15,7 @@ class FileService {
     if (this.isImage(file.fileType) && !isTestData) {
       return this.uploadImageFile(file);
     }
+
     // save to local storage
     // we may want to save to a remote server later
     return FileModel.create(file);
@@ -22,6 +24,7 @@ class FileService {
   async uploadImageFile(file: DB_File) {
     // 加载图片
     const url = file.url || URL.createObjectURL(new Blob([file.data]));
+
     const img = new Image();
     img.src = url;
     await (() =>
@@ -31,10 +34,7 @@ class FileService {
 
     // 压缩图片
     const fileType = 'image/webp';
-    const base64String = compressImage({
-      img,
-      type: fileType,
-    });
+    const base64String = compressImage({ img, type: fileType });
     const binaryString = atob(base64String.split('base64,')[1]);
     const uint8Array = Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
     file.data = uint8Array.buffer;
@@ -42,6 +42,21 @@ class FileService {
     return FileModel.create(file);
   }
 
+  async uploadImageByUrl(url: string, file: Pick<DB_File, 'name' | 'metadata'>) {
+    const res = await fetch(PROXY_URL, { body: url, method: 'POST' });
+    const data = await res.arrayBuffer();
+    const fileType = res.headers.get('content-type') || 'image/webp';
+
+    return this.uploadFile({
+      data,
+      fileType,
+      metadata: file.metadata,
+      name: file.name,
+      saveMode: 'local',
+      size: data.byteLength,
+    });
+  }
+
   async removeFile(id: string) {
     return FileModel.delete(id);
   }
@@ -57,7 +72,7 @@ class FileService {
     }
 
     // arrayBuffer to url
-    const url = URL.createObjectURL(new Blob([item.data]));
+    const url = URL.createObjectURL(new Blob([item.data], { type: item.fileType }));
     const base64 = Buffer.from(item.data).toString('base64');
 
     return {

package/src/services/imageGeneration.ts

@@ -0,0 +1,26 @@
+import { createHeaderWithOpenAI } from '@/services/_header';
+import { OPENAI_URLS } from '@/services/_url';
+import { OpenAIImagePayload } from '@/types/openai/image';
+
+interface FetchOptions {
+  signal?: AbortSignal | undefined;
+}
+
+class ImageGenerationService {
+  async generateImage(params: Omit<OpenAIImagePayload, 'model' | 'n'>, options?: FetchOptions) {
+    const payload: OpenAIImagePayload = { ...params, model: 'dall-e-3', n: 1 };
+
+    const res = await fetch(OPENAI_URLS.images, {
+      body: JSON.stringify(payload),
+      headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
+      method: 'POST',
+      signal: options?.signal,
+    });
+
+    const urls = await res.json();
+
+    return urls[0] as string;
+  }
+}
+
+export const imageGenerationService = new ImageGenerationService();