🐛 fix: Azure OpenAI vision models issue (lobehub#2207)

src/libs/agent-runtime/azureOpenai/index.test.ts

@@ -163,4 +163,57 @@ describe('LobeAzureOpenAI', () => {
       });
     });
   });
+
+  describe('private method', () => {
+
+    describe('tocamelCase', () => {
+      it('should convert string to camel case', () => {
+        const key = 'image_url';
+
+        const camelCaseKey = instance['tocamelCase'](key);
+
+        expect(camelCaseKey).toEqual('imageUrl');
+      });
+    });
+
+    describe('camelCaseKeys', () => {
+      it('should convert object keys to camel case', () => {
+        const obj = {
+          "frequency_penalty": 0,
+          "messages": [
+            {
+              "role": "user",
+              "content": [
+                {
+                  "type": "image_url",
+                  "image_url": {
+                    "url": "<image URL>"
+                  }
+                }
+              ]
+            }
+          ]
+        };
+
+        const newObj = instance['camelCaseKeys'](obj);
+
+        expect(newObj).toEqual({
+          "frequencyPenalty": 0,
+          "messages": [
+            {
+              "role": "user",
+              "content": [
+                {
+                  "type": "image_url",
+                  "imageUrl": {
+                    "url": "<image URL>"
+                  }
+                }
+              ]
+            }
+          ]
+        });
+      });
+    });
+  })
 });

src/libs/agent-runtime/azureOpenai/index.ts

@@ -28,27 +28,16 @@ export class LobeAzureOpenAI implements LobeRuntimeAI {
 
   async chat(payload: ChatStreamPayload, options?: ChatCompetitionOptions) {
     // ============  1. preprocess messages   ============ //
-    const { messages, model, ...params } = payload;
-
-    // fix the issue: "The sample encountered an error: TypeError: Cannot read properties of undefined (reading 'url')"
-    messages.forEach(message => {
-      if (Array.isArray(message['content'])) {
-        message['content'].forEach((content: any) => {
-          if (content['type'] === 'image_url') {
-            content['imageUrl'] = content['image_url'];
-            delete content['image_url'];
-          }
-        });
-      }
-    });
+    const camelCasePayload = this.camelCaseKeys(payload);
+    const { messages, model, maxTokens = 2048, ...params } = camelCasePayload;
 
     // ============  2. send api   ============ //
 
     try {
       const response = await this.client.streamChatCompletions(
         model,
         messages as ChatRequestMessage[],
-        { ...params, abortSignal: options?.signal } as GetChatCompletionsOptions,
+        { ...params, maxTokens, abortSignal: options?.signal } as GetChatCompletionsOptions,
       );
 
       const stream = OpenAIStream(response as any);
@@ -89,4 +78,30 @@ export class LobeAzureOpenAI implements LobeRuntimeAI {
       });
     }
   }
+
+  // Convert object keys to camel case, copy from `@azure/openai` in `node_modules/@azure/openai/dist/index.cjs`
+  private camelCaseKeys = (obj: any): any => {
+    if (typeof obj !== "object" || !obj)
+      return obj;
+    if (Array.isArray(obj)) {
+      return obj.map((v) => this.camelCaseKeys(v));
+    }
+    else {
+      for (const key of Object.keys(obj)) {
+        const value = obj[key];
+        const newKey = this.tocamelCase(key);
+        if (newKey !== key) {
+          delete obj[key];
+        }
+        obj[newKey] = typeof obj[newKey] === "object" ? this.camelCaseKeys(value) : value;
+      }
+      return obj;
+    }
+  }
+
+  private tocamelCase = (str: string) => {
+    return str
+      .toLowerCase()
+      .replace(/([_][a-z])/g, (group) => group.toUpperCase().replace("_", ""));
+  }
 }