From 92c4a2d944b2b429ed8a528bef2823c5644bccc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Mon, 21 Apr 2025 23:03:18 -0400
Subject: [PATCH 1/8] Function; Add Image generation page

---
 src/App.tsx                                  |  13 +-
 src/components/layout/MainLayout.tsx         |  42 ++++---
 src/components/layout/Sidebar.tsx            |  44 ++++++-
 src/components/pages/ImageGenerationPage.tsx | 122 +++++++++++++++++++
 src/services/message-helper.ts               |   2 +-
 src/services/providers/openai-service.ts     |  22 +++-
 src/services/settings-service.ts             |   2 +-
 7 files changed, 221 insertions(+), 26 deletions(-)
 create mode 100644 src/components/pages/ImageGenerationPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 15404fe..7ecf492 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,12 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { ChatPage } from './components/pages/ChatPage';
+import { ImageGenerationPage } from './components/pages/ImageGenerationPage';
 import MainLayout from './components/layout/MainLayout';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
 
 function App() {
+  const [activePage, setActivePage] = useState('chat');
+  const [showSettings, setShowSettings] = useState(false);
 
   // Handle link clicks
   useEffect(() => {
@@ -22,11 +25,15 @@ function App() {
     };
   }, []);
   
+  const handlePageChange = (page: string) => {
+    setActivePage(page);
+  };
   
   return (
     <DatabaseInitializer>
-      <MainLayout>
-        <ChatPage/>
+      <MainLayout activePage={activePage} onChangePage={handlePageChange} showSettings={showSettings} setShowSettings={setShowSettings}>
+        {activePage === 'chat' && <ChatPage />}
+        {activePage === 'image' && <ImageGenerationPage />}
       </MainLayout>
     </DatabaseInitializer>
   );
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 1d82268..b579459 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode } from 'react';
 import Sidebar from './Sidebar';
 import SettingsPage from '../pages/SettingsPage';
 import TopBar from './TopBar';
@@ -6,32 +6,42 @@ import { SettingsService } from '../../services/settings-service';
 
 interface MainLayoutProps {
   children: ReactNode;
+  activePage: string;
+  onChangePage: (page: string) => void;
+  showSettings: boolean;
+  setShowSettings: (showSettings: boolean) => void;
 }
 
-const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
-  const [activePage, setActivePage] = useState('chat');
-  const [showSettings, setShowSettings] = useState(false);
-
-  // Handle page changes
-  const handlePageChange = (page: string) => {
-    if(activePage === 'settings' && page !== activePage){
+const MainLayout: React.FC<MainLayoutProps> = ({ 
+  children, 
+  activePage, 
+  onChangePage, 
+  showSettings, 
+  setShowSettings
+}) => {
+  
+  // Handle settings dialog
+  const handleOpenSettingsDialog = () => {
+    if(activePage === 'settings' && activePage !== 'settings'){
       // Save settings
+      SettingsService.getInstance().saveSettings();
     }
 
+    setShowSettings(true);
+    onChangePage('settings');
+  };
+
+  // Handle page changes
+  const handlePageChange = (page: string) => {
     if (page === 'settings') {
       setShowSettings(true);
-      setActivePage('settings');
+      onChangePage('settings');
     } else {
       setShowSettings(false);
-      setActivePage(page);
+      onChangePage(page);
     }
   };
 
-  // Handle page changes
-  const handleOpenSettingsDialog = () => {
-    handlePageChange('settings');
-  };
-
   // Handle selecting a model
   const handleSelectModel = (modelId: string, provider: string) => {
     SettingsService.getInstance().setSelectedModel(modelId);
@@ -50,6 +60,8 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         <Sidebar 
           activePage={activePage}
           onChangePage={handlePageChange}
+          showSettings={showSettings}
+          setShowSettings={setShowSettings}
         />
 
         <div className="flex flex-col flex-1 w-[calc(100%-68px)] bg-main-background-color">
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 76e5e8b..aefecaa 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,12 +1,34 @@
 import React from 'react';
-import { MessageSquare, Settings } from 'lucide-react';
+import { MessageSquare, Settings, Image } from 'lucide-react';
 
 interface SidebarProps {
   activePage: string;
   onChangePage: (page: string) => void;
+  showSettings: boolean;
+  setShowSettings: (showSettings: boolean) => void;
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ activePage, onChangePage }) => {
+export const Sidebar: React.FC<SidebarProps> = ({
+  activePage, 
+  onChangePage, 
+  showSettings, 
+  setShowSettings
+}) => {
+
+  const getActivePage = () => {
+    if(showSettings){
+      return 'settings';
+    }
+    else if(activePage === 'chat'){
+      return 'chat';
+    }
+    else if(activePage === 'image'){
+      return 'image';
+    }
+
+    return '';
+  }
+
   return (
     <div className="w-[68px] h-full bg-main-background-color flex flex-col">
  
@@ -14,7 +36,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activePage, onChangePage }) =>
       <div className="flex flex-col items-center flex-1 pt-2">
         <button 
           className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
-            activePage === 'chat' 
+            getActivePage() === 'chat' 
               ? 'navigation-item-selected navigation-item-text' 
               : 'navigation-item navigation-item-text'
           }`}
@@ -24,6 +46,18 @@ export const Sidebar: React.FC<SidebarProps> = ({ activePage, onChangePage }) =>
           <MessageSquare size={22} />
         </button>
         
+        <button 
+          className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
+            getActivePage() === 'image' 
+              ? 'navigation-item-selected navigation-item-text' 
+              : 'navigation-item navigation-item-text'
+          }`}
+          onClick={() => onChangePage('image')}
+          aria-label="Image Generation"
+        >
+          <Image size={22} />
+        </button>
+        
         {/* Add more navigation buttons here as needed */}
       </div>
 
@@ -31,11 +65,11 @@ export const Sidebar: React.FC<SidebarProps> = ({ activePage, onChangePage }) =>
       <div className="flex justify-center mb-4">
         <button 
           className={`flex items-center justify-center w-12 h-12 rounded-lg transition-all duration-200 ${
-            activePage === 'settings' 
+            getActivePage() === 'settings' 
               ? 'navigation-item-selected navigation-item-text' 
               : 'navigation-item navigation-item-text'
           }`}
-          onClick={() => onChangePage('settings')}
+          onClick={() => setShowSettings(true)}
           aria-label="Settings"
         >
           <Settings size={22} />
diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
new file mode 100644
index 0000000..21ec257
--- /dev/null
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -0,0 +1,122 @@
+import { useState, useEffect } from 'react';
+import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
+
+export const ImageGenerationPage = () => {
+  const [prompt, setPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [imageResult, setImageResult] = useState<string | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [selectedModel, setSelectedModel] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState('');
+  const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
+  
+  // Check if API key is available
+  useEffect(() => {
+    setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+    setSelectedProvider(SettingsService.getInstance().getSelectedProvider());
+    setSelectedModel(SettingsService.getInstance().getSelectedModel());
+    
+    const handleSettingsChange = () => {
+      setSelectedProvider(SettingsService.getInstance().getSelectedProvider());
+      setSelectedModel(SettingsService.getInstance().getSelectedModel());
+      setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+    };
+    
+    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    };
+  }, []);
+
+  // Handle generating an image (mock function)
+  const handleGenerateImage = async () => {
+    if (!prompt.trim()) return;
+    
+    setIsGenerating(true);
+    setError(null);
+    
+    try {
+      // In a real implementation, this would call an actual image generation service
+      // For now, just simulate the process with a timeout
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      
+      // For demo purposes, just show a placeholder result
+      setImageResult(`https://placehold.co/512x512/eee/999?text=${encodeURIComponent(prompt)}`);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col w-full h-full p-6 bg-white">
+      {isApiKeyMissing && (
+        <div className="p-2 mb-4 text-sm text-center text-yellow-800 bg-yellow-100">
+          Please set your API key for the selected provider in the settings.
+        </div>
+      )}
+
+      <h1 className="mb-6 text-2xl font-bold">AI Image Generation</h1>
+      
+      <div className="flex flex-col gap-6">
+        {/* Input section */}
+        <div className="flex flex-col gap-3">
+          <label htmlFor="prompt" className="font-medium">
+            Prompt
+          </label>
+          <textarea 
+            id="prompt"
+            className="w-full p-3 border rounded-lg resize-none" 
+            rows={5}
+            placeholder="Describe the image you want to generate..."
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+          />
+          
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-gray-500">
+              Using model: {selectedModel || 'None selected'}
+            </div>
+            <button 
+              className="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              onClick={handleGenerateImage}
+              disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
+            >
+              {isGenerating ? 'Generating...' : 'Generate Image'}
+            </button>
+          </div>
+        </div>
+        
+        {/* Error message */}
+        {error && (
+          <div className="p-3 text-red-700 bg-red-100 rounded-lg">
+            Error: {error.message}
+          </div>
+        )}
+        
+        {/* Results section */}
+        {imageResult && (
+          <div className="flex flex-col gap-3">
+            <h2 className="text-xl font-medium">Generated Image</h2>
+            <div className="flex justify-center p-2 border rounded-lg">
+              <img 
+                src={imageResult} 
+                alt="Generated from AI" 
+                className="object-contain max-w-full max-h-96"
+              />
+            </div>
+            <div className="flex justify-end">
+              <button className="px-3 py-1 border rounded-lg hover:bg-gray-100">
+                Download
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageGenerationPage; 
\ No newline at end of file
diff --git a/src/services/message-helper.ts b/src/services/message-helper.ts
index 772900a..a2ef912 100644
--- a/src/services/message-helper.ts
+++ b/src/services/message-helper.ts
@@ -346,7 +346,7 @@ export class MessageHelper {
                             const fileContent: FilePart = {
                                 type: 'file',
                                 data: content.content,
-                                mimeType: 'application/pdf',
+                                mimeType: 'application/pdf', // SDK requires pdf mime type, but it supports all mime types
                                 filename: dataJson.name
                             }
                             return fileContent;
diff --git a/src/services/providers/openai-service.ts b/src/services/providers/openai-service.ts
index 7613aa8..a978d3b 100644
--- a/src/services/providers/openai-service.ts
+++ b/src/services/providers/openai-service.ts
@@ -157,10 +157,30 @@ export class OpenAIService implements AiServiceProvider {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options: {
       size?: `${number}x${number}`;
+      aspectRatio?: `${number}:${number}`;
       style?: string;
       quality?: string;
     } = {}
+    
   ): Promise<string[]> {
-    throw new Error('Not implemented');
+
+    // const imageModel = openai.imageModel('dall-e-3');
+
+    // const result = await imageModel.doGenerate({
+    //   prompt: prompt,
+    //   n: 1,
+    //   size: options.size || '1024x1024',
+    //   aspectRatio: options.aspectRatio || '1:1',
+    //   seed: 42,
+    //   providerOptions: {
+    //     "openai": {
+    //       "style": options.style || 'vivid'
+    //     }
+    //   }
+    // });
+
+    // return result.images;
+
+    return [];
   }
 } 
\ No newline at end of file
diff --git a/src/services/settings-service.ts b/src/services/settings-service.ts
index 03b233d..69386eb 100644
--- a/src/services/settings-service.ts
+++ b/src/services/settings-service.ts
@@ -319,7 +319,7 @@ export class SettingsService {
   /**
    * Save settings to database
    */
-  private async saveSettings(): Promise<void> {
+  public async saveSettings(): Promise<void> {
     try {
       await this.dbService.saveSettings(this.settings);
       

From 6eff7665b9fbdceb7ebedb548d1f892427e420ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Tue, 22 Apr 2025 06:09:17 -0400
Subject: [PATCH 2/8] Fix: image generation page layout

---
 src/components/pages/ImageGenerationPage.tsx | 369 +++++++++++++++----
 src/locales/en/translation.json              |  16 +
 src/locales/es/translation.json              |  16 +
 src/locales/ja/translation.json              |  16 +
 src/locales/ko/translation.json              |  16 +
 src/locales/zh-CN/translation.json           |  16 +
 src/locales/zh-TW/translation.json           |  16 +
 src/styles/tensorblock-light.css             |  43 +++
 8 files changed, 445 insertions(+), 63 deletions(-)

diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 21ec257..a8d51ee 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -1,29 +1,40 @@
-import { useState, useEffect } from 'react';
-import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
+import { useState, useEffect } from "react";
+import {
+  SettingsService,
+  SETTINGS_CHANGE_EVENT,
+} from "../../services/settings-service";
+import { ChevronDown, RefreshCw } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 export const ImageGenerationPage = () => {
-  const [prompt, setPrompt] = useState('');
+  const { t } = useTranslation();
+  const [prompt, setPrompt] = useState("");
   const [isGenerating, setIsGenerating] = useState(false);
   const [imageResult, setImageResult] = useState<string | null>(null);
   const [error, setError] = useState<Error | null>(null);
-  const [selectedModel, setSelectedModel] = useState('');
-  const [selectedProvider, setSelectedProvider] = useState('');
+  const [selectedModel, setSelectedModel] = useState("");
+  const [selectedProvider, setSelectedProvider] = useState("");
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
-  
+  const [aspectRatio, setAspectRatio] = useState("1:1");
+  const [imageCount, setImageCount] = useState(1);
+  const [randomSeed, setRandomSeed] = useState(
+    Math.floor(Math.random() * 1000000).toString()
+  );
+
   // Check if API key is available
   useEffect(() => {
     setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
     setSelectedProvider(SettingsService.getInstance().getSelectedProvider());
     setSelectedModel(SettingsService.getInstance().getSelectedModel());
-    
+
     const handleSettingsChange = () => {
       setSelectedProvider(SettingsService.getInstance().getSelectedProvider());
       setSelectedModel(SettingsService.getInstance().getSelectedModel());
       setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
     };
-    
+
     window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
-    
+
     return () => {
       window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
     };
@@ -32,17 +43,21 @@ export const ImageGenerationPage = () => {
   // Handle generating an image (mock function)
   const handleGenerateImage = async () => {
     if (!prompt.trim()) return;
-    
+
     setIsGenerating(true);
     setError(null);
-    
+
     try {
       // In a real implementation, this would call an actual image generation service
       // For now, just simulate the process with a timeout
-      await new Promise(resolve => setTimeout(resolve, 2000));
-      
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+
       // For demo purposes, just show a placeholder result
-      setImageResult(`https://placehold.co/512x512/eee/999?text=${encodeURIComponent(prompt)}`);
+      setImageResult(
+        `https://placehold.co/512x512/eee/999?text=${encodeURIComponent(
+          prompt
+        )}`
+      );
     } catch (err) {
       setError(err as Error);
     } finally {
@@ -50,73 +65,301 @@ export const ImageGenerationPage = () => {
     }
   };
 
+  // Generate new random seed
+  const generateNewSeed = () => {
+    setRandomSeed(Math.floor(Math.random() * 1000000).toString());
+  };
+
+  // Get model name
+  const getModelName = (modelID: string, provider: string) => {
+    const providerSettings =
+      SettingsService.getInstance().getProviderSettings(provider);
+    if (!providerSettings.models) return modelID;
+
+    const model = providerSettings.models?.find((m) => m.modelId === modelID);
+    if (!model) return modelID;
+
+    return model.modelName;
+  };
+
+  // Get display provider name
+  const getDisplayProviderName = () => {
+    if (!selectedProvider) return "硅基流动";
+
+    const providerSettings =
+      SettingsService.getInstance().getProviderSettings(selectedProvider);
+    return providerSettings.providerName || selectedProvider;
+  };
+
   return (
-    <div className="flex flex-col w-full h-full p-6 bg-white">
+    <div className="flex flex-col w-full h-full bg-white">
       {isApiKeyMissing && (
-        <div className="p-2 mb-4 text-sm text-center text-yellow-800 bg-yellow-100">
-          Please set your API key for the selected provider in the settings.
+        <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
+          {t("imageGeneration.apiKeyMissing")}
         </div>
       )}
 
-      <h1 className="mb-6 text-2xl font-bold">AI Image Generation</h1>
-      
-      <div className="flex flex-col gap-6">
-        {/* Input section */}
-        <div className="flex flex-col gap-3">
-          <label htmlFor="prompt" className="font-medium">
-            Prompt
-          </label>
-          <textarea 
-            id="prompt"
-            className="w-full p-3 border rounded-lg resize-none" 
-            rows={5}
-            placeholder="Describe the image you want to generate..."
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-          />
-          
-          <div className="flex items-center justify-between">
-            <div className="text-sm text-gray-500">
-              Using model: {selectedModel || 'None selected'}
-            </div>
-            <button 
-              className="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
+      <div className="flex flex-row h-full">
+        {/* Left side - Controls */}
+        <div className="flex-1 p-6 overflow-y-auto frame-right-border">
+          <h1 className="mb-6 text-2xl font-semibold">
+            {t("imageGeneration.title")}
+          </h1>
+
+          {/* Prompt input */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.prompt")}
+            </label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={t("imageGeneration.promptPlaceholder")}
+              className="w-full p-3 input-box min-h-14"
+              rows={4}
+            />
+          </div>
+
+          {/* Negative prompt */}
+          {/* <div className="mb-6">
+            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              反向提示词
+              <div className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help" title="Elements to avoid in the image">?</div>
+            </label>
+            <textarea 
+              placeholder="输入不希望在生成的图像中出现的元素"
+              className="w-full p-3 input-box"
+              rows={3}
+            />
+          </div> */}
+
+          {/* Generation button */}
+          <div className="flex justify-center mb-6">
+            <button
               onClick={handleGenerateImage}
               disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
+              className="px-8 py-2.5 text-white confirm-btn"
             >
-              {isGenerating ? 'Generating...' : 'Generate Image'}
+              {isGenerating
+                ? t("imageGeneration.generating")
+                : t("imageGeneration.generateButton")}
             </button>
           </div>
+
+          <div className="flex items-center mb-4">
+            <h2 className="text-xl font-medium">
+              {t("imageGeneration.results")}
+            </h2>
+          </div>
+
+          {/* Error message */}
+          {error && (
+            <div className="p-3 mb-4 text-red-700 bg-red-100 rounded-lg">
+              {t("common.error")}: {error.message}
+            </div>
+          )}
+
+          {/* Loading indicator */}
+          {isGenerating && (
+            <div className="flex items-center justify-center h-64 rounded-lg bg-gray-50">
+              <div className="flex flex-col items-center">
+                <div className="w-10 h-10 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
+                <p className="mt-4 text-gray-600">
+                  {t("imageGeneration.generating")}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Results display */}
+          {imageResult && !isGenerating && (
+            <div className="grid grid-cols-1 gap-4">
+              <div className="overflow-hidden border rounded-lg image-result-area">
+                <img
+                  src={imageResult}
+                  alt="Generated from AI"
+                  className="object-contain w-full"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Placeholder when no results */}
+          {!imageResult && !isGenerating && (
+            <div className="flex items-center justify-center h-64 rounded-lg image-generation-result-placeholder">
+              <div className="text-center">
+                <p className="text-gray-500">
+                  {t("imageGeneration.placeholderText")}
+                </p>
+              </div>
+            </div>
+          )}
         </div>
-        
-        {/* Error message */}
-        {error && (
-          <div className="p-3 text-red-700 bg-red-100 rounded-lg">
-            Error: {error.message}
+
+        {/* Right side - Results */}
+        <div className="w-[420px] h-full p-6 overflow-y-auto">
+          {/* Provider selection */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.provider")}
+            </label>
+            <div className="relative">
+              <button
+                className="flex items-center justify-between w-full p-3 text-left input-box"
+                disabled={true}
+              >
+                <span>{getDisplayProviderName()}</span>
+                <ChevronDown size={18} className="text-gray-500" />
+              </button>
+            </div>
           </div>
-        )}
-        
-        {/* Results section */}
-        {imageResult && (
-          <div className="flex flex-col gap-3">
-            <h2 className="text-xl font-medium">Generated Image</h2>
-            <div className="flex justify-center p-2 border rounded-lg">
-              <img 
-                src={imageResult} 
-                alt="Generated from AI" 
-                className="object-contain max-w-full max-h-96"
-              />
+
+          {/* Model selection */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.model")}
+            </label>
+            <div className="relative">
+              <button
+                className="flex items-center justify-between w-full p-3 text-left input-box"
+                disabled={true}
+              >
+                <span>
+                  {getModelName(selectedModel, selectedProvider) ||
+                    "FLUX.1 Schnell"}
+                </span>
+                <ChevronDown size={18} className="text-gray-500" />
+              </button>
+            </div>
+          </div>
+
+          {/* Aspect ratio selection */}
+          <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.imageSize")}
+            </label>
+            <div className="grid grid-cols-6 gap-1">
+              <button
+                onClick={() => setAspectRatio("1:1")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "1:1" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-6 h-6 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">1:1</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("1:2")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "1:2" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-4 h-6 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">1:2</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("3:2")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "3:2" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-6 h-4 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">3:2</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("3:4")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "3:4" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-[1rem] h-[1.5rem] border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">3:4</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("16:9")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "16:9" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-6 h-3.5 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">16:9</span>
+              </button>
+              <button
+                onClick={() => setAspectRatio("9:16")}
+                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                  aspectRatio === "9:16" ? "active" : ""
+                }`}
+              >
+                <div className="flex justify-center mb-1">
+                  <div className="w-3.5 h-6 border border-gray-500 rounded-sm"></div>
+                </div>
+                <span className="text-xs">9:16</span>
+              </button>
             </div>
-            <div className="flex justify-end">
-              <button className="px-3 py-1 border rounded-lg hover:bg-gray-100">
-                Download
+          </div>
+
+          {/* Image count */}
+          <div className="mb-6">
+            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.generationCount")}
+              <div
+                className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
+                title={t("imageGeneration.generationCount")}
+              >
+                ?
+              </div>
+            </label>
+            <input
+              type="number"
+              value={imageCount}
+              onChange={(e) => setImageCount(parseInt(e.target.value) || 1)}
+              min="1"
+              max="4"
+              className="w-full p-3 input-box"
+            />
+          </div>
+
+          {/* Random seed */}
+          <div className="mb-6">
+            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              {t("imageGeneration.randomSeed")}
+              <div
+                className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
+                title={t("imageGeneration.seedHelp")}
+              >
+                ?
+              </div>
+            </label>
+            <div className="flex">
+              <input
+                type="text"
+                value={randomSeed}
+                onChange={(e) => setRandomSeed(e.target.value)}
+                className="flex-grow p-3 mr-2 input-box"
+              />
+              <button
+                onClick={generateNewSeed}
+                className="p-2 rounded-lg image-generation-refresh-button"
+                title={t("imageGeneration.randomSeed")}
+              >
+                <RefreshCw size={20} />
               </button>
             </div>
           </div>
-        )}
+        </div>
       </div>
     </div>
   );
 };
 
-export default ImageGenerationPage; 
\ No newline at end of file
+export default ImageGenerationPage;
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 38090b7..a6b48ce 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -37,6 +37,22 @@
     "selectModel_close": "Close",
     "selectModel_search_placeholder": "Search models..."
   },
+  "imageGeneration": {
+    "title": "Image Generation",
+    "provider": "Provider",
+    "model": "Model",
+    "imageSize": "Image Size",
+    "generationCount": "Generation Count",
+    "randomSeed": "Random Seed",
+    "generateButton": "Generate",
+    "generating": "Generating...",
+    "prompt": "Prompt",
+    "promptPlaceholder": "Describe the image you want to create, e.g.: a peaceful lake at sunset with mountains in the background",
+    "results": "Generated Results",
+    "placeholderText": "Enter a prompt and click generate to create images",
+    "apiKeyMissing": "Please set your API key for the selected provider in the settings.",
+    "seedHelp": "Seed for reproducible results"
+  },
   "settings": {
     "language": "Language",
     "apiKey": "API Key",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index a8118e0..9285257 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -37,6 +37,22 @@
     "selectModel_close": "Cerrar",
     "selectModel_search_placeholder": "Buscar modelos..."
   },
+  "imageGeneration": {
+    "title": "Imagen Generación",
+    "provider": "Proveedor",
+    "model": "Modelo",
+    "imageSize": "Tamaño de Imagen",
+    "generationCount": "Cantidad de Generaciones",
+    "randomSeed": "Semilla Aleatoria",
+    "generateButton": "Generar",
+    "generating": "Generando...",
+    "prompt": "Prompt",
+    "promptPlaceholder": "Describe la imagen que quieres crear, ej.: un lago tranquilo al atardecer con montañas en el fondo",
+    "results": "Resultados Generados",
+    "placeholderText": "Ingresa un prompt y haz clic en generar para crear imágenes",
+    "apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
+    "seedHelp": "Semilla para resultados reproducibles"
+  },
   "settings": {
     "language": "Idioma",
     "apiKey": "Clave API",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 48c92ad..8086d38 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -37,6 +37,22 @@
     "selectModel_close": "閉じる",
     "selectModel_search_placeholder": "モデルを検索..."
   },
+  "imageGeneration": {
+    "title": "画像生成",
+    "provider": "プロバイダー",
+    "model": "モデル",
+    "imageSize": "画像サイズ",
+    "generationCount": "生成数",
+    "randomSeed": "ランダムシード",
+    "generateButton": "生成",
+    "generating": "生成中...",
+    "prompt": "プロンプト",
+    "promptPlaceholder": "作成したい画像を説明してください。例：夕日が沈む静かな湖、背景には山々",
+    "results": "生成結果",
+    "placeholderText": "プロンプトを入力して生成ボタンをクリックして画像を作成",
+    "apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
+    "seedHelp": "再現可能な結果のためのシード値"
+  },
   "settings": {
     "language": "言語",
     "apiKey": "APIキー",
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index 2e65f61..c84427e 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -37,6 +37,22 @@
     "selectModel_close": "닫기",
     "selectModel_search_placeholder": "모델 검색..."
   },
+  "imageGeneration": {
+    "title": "이미지 생성",
+    "provider": "제공자",
+    "model": "모델",
+    "imageSize": "이미지 크기",
+    "generationCount": "생성 수량",
+    "randomSeed": "랜덤 시드",
+    "generateButton": "생성",
+    "generating": "생성 중...",
+    "prompt": "프롬프트",
+    "promptPlaceholder": "만들고 싶은 이미지를 설명하세요. 예: 석양이 지는 고요한 호수, 배경에는 산맥",
+    "results": "생성 결과",
+    "placeholderText": "프롬프트를 입력하고 생성 버튼을 클릭하여 이미지 생성",
+    "apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
+    "seedHelp": "재현 가능한 결과를 위한 시드"
+  },
   "settings": {
     "language": "언어",
     "apiKey": "API 키",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index a831fa5..61814e7 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -37,6 +37,22 @@
     "selectModel_close": "关闭",
     "selectModel_search_placeholder": "搜索模型..."
   },
+  "imageGeneration": {
+    "title": "图片生成",
+    "provider": "提供商",
+    "model": "模型",
+    "imageSize": "图片尺寸",
+    "generationCount": "生成数量",
+    "randomSeed": "随机种子",
+    "generateButton": "生成",
+    "generating": "生成中...",
+    "prompt": "提示词",
+    "promptPlaceholder": "描述你想创建的图片，例如：一个宁静的湖泊，夕阳西下，远处是群山",
+    "results": "生成结果",
+    "placeholderText": "输入提示词并点击生成按钮来创建图片",
+    "apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
+    "seedHelp": "用于可重现结果的种子"
+  },
   "settings": {
     "language": "语言",
     "apiKey": "API 密钥",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 07f02a0..0455b37 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -37,6 +37,22 @@
     "selectModel_close": "關閉",
     "selectModel_search_placeholder": "搜尋模型..."
   },
+  "imageGeneration": {
+    "title": "圖片生成",
+    "provider": "提供商",
+    "model": "模型",
+    "imageSize": "圖片尺寸",
+    "generationCount": "生成數量",
+    "randomSeed": "隨機種子",
+    "generateButton": "生成",
+    "generating": "生成中...",
+    "prompt": "提示詞",
+    "promptPlaceholder": "描述你想創建的圖片，例如：一個寧靜的湖泊，夕陽西下，遠處是群山",
+    "results": "生成結果",
+    "placeholderText": "輸入提示詞並點擊生成按鈕來創建圖片",
+    "apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
+    "seedHelp": "用於可重現結果的種子"
+  },
   "settings": {
     "language": "語言",
     "apiKey": "API 金鑰",
diff --git a/src/styles/tensorblock-light.css b/src/styles/tensorblock-light.css
index a3b9f94..a1ba009 100644
--- a/src/styles/tensorblock-light.css
+++ b/src/styles/tensorblock-light.css
@@ -555,4 +555,47 @@
         background-color: var(--primary-300);
     }
     
+    /* Image Generation Page */
+    .aspect-ratio-button {
+        transition: all 0.2s;
+        background-color: var(--surface-0);
+    }
+    
+    .aspect-ratio-button.active {
+        background-color: var(--primary-100);
+        border-color: var(--primary-500);
+    }
+    
+    .aspect-ratio-button:hover:not(.active) {
+        background-color: var(--primary-50);
+        border-color: var(--primary-400);
+    }
+    
+    .image-generation-refresh-button {
+        background-color: var(--primary-50);
+        color: var(--primary-600);
+        transition: all 0.2s;
+    }
+    
+    .image-generation-refresh-button:hover {
+        background-color: var(--primary-200);
+        color: var(--primary-700);
+    }
+    
+    .image-generation-result-placeholder {
+        background-color: var(--primary-50);
+        border: 2px dashed var(--primary-200);
+        color: var(--surface-500);
+    }
+    
+    .image-result-area {
+        background-color: var(--surface-0);
+        border-radius: 0.5rem;
+        border: 1px solid var(--primary-100);
+        transition: all 0.2s;
+    }
+    
+    .image-result-area:hover {
+        border-color: var(--primary-300);
+    }
 }
\ No newline at end of file

From b1d5179c6a22a17d7823475e005975b83b5b0e0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Tue, 22 Apr 2025 09:10:14 -0400
Subject: [PATCH 3/8] Fix: Change the image page layout

---
 src/components/chat/ChatMessageArea.tsx |  2 +-
 src/components/layout/MainLayout.tsx    |  8 ++---
 src/components/pages/ChatPage.tsx       |  4 +--
 src/types/chat.ts                       | 15 +++++++++-
 src/types/chatTypes.md                  | 40 +++++++++++++++++++++++++
 src/types/file.ts                       |  7 +++++
 6 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 src/types/chatTypes.md
 create mode 100644 src/types/file.ts

diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index f090cb0..bc86008 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -321,7 +321,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   return (
     <div className="flex flex-col w-full h-full max-w-full">
       {/* Messages area */}
-      <div className="flex-1 p-4 space-y-4 overflow-y-auto">
+      <div className="p-4 space-y-4 overflow-y-auto">
         {getMessagesList().map((message) => {
           if(message.role === 'system') return null;
 
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index b579459..58f3e66 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -56,7 +56,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({
         onOpenSettingsDialog={handleOpenSettingsDialog}
       />
 
-      <div className="flex flex-1 w-full overflow-hidden">
+      <div className="flex w-full h-full overflow-hidden">
         <Sidebar 
           activePage={activePage}
           onChangePage={handlePageChange}
@@ -64,11 +64,11 @@ const MainLayout: React.FC<MainLayoutProps> = ({
           setShowSettings={setShowSettings}
         />
 
-        <div className="flex flex-col flex-1 w-[calc(100%-68px)] bg-main-background-color">
+        <div className="flex flex-col h-full w-[calc(100%-68px)] bg-main-background-color">
           {/* Main content */}
 
-          <div className='relative flex flex-col flex-1 w-full overflow-hidden major-area-border major-area-bg-color'>
-            <div className="flex-1 w-full overflow-auto">
+          <div className='relative flex flex-col w-full h-full overflow-hidden major-area-border major-area-bg-color'>
+            <div className="w-full h-full overflow-auto">
               {children}
             </div>
             
diff --git a/src/components/pages/ChatPage.tsx b/src/components/pages/ChatPage.tsx
index 2dd278d..37a6c1a 100644
--- a/src/components/pages/ChatPage.tsx
+++ b/src/components/pages/ChatPage.tsx
@@ -372,7 +372,7 @@ export const ChatPage = () => {
     <div className="flex flex-col w-full h-full bg-white">
 
       {/* Main content with chat history and messages */}
-      <div className="flex flex-1 w-full overflow-hidden">
+      <div className="flex w-full overflow-hidden">
         <ChatHistoryList 
           conversations={conversations}
           folders={folders}
@@ -387,7 +387,7 @@ export const ChatPage = () => {
           onMoveConversation={handleMoveConversation}
         />
         
-        <div className="flex flex-col flex-1 w-full min-w-0 overflow-hidden">
+        <div className="flex flex-col w-full min-w-0 overflow-hidden">
           {isApiKeyMissing && (
             <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
               Please set your API key for the selected provider in the settings.
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 3b0f94f..38dca06 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -51,4 +51,17 @@ export interface ConversationFolder{
   createdAt: Date;
   updatedAt: Date;
   colorFlag: string;
-}
\ No newline at end of file
+}
+
+export interface ImageGenerationResult {
+  id: string;
+  prompt: string;
+  negativePrompt: string;
+  seed: string;
+  number: number;
+  status: string;
+  aspectRatio: string;
+  provider: string;
+  model: string;
+  images: MessageContent[];
+}
diff --git a/src/types/chatTypes.md b/src/types/chatTypes.md
new file mode 100644
index 0000000..dfb2298
--- /dev/null
+++ b/src/types/chatTypes.md
@@ -0,0 +1,40 @@
+- Message Content:
+
+    - Text:
+        - cotent: string text content
+        - dataJson: none
+
+    - File:
+        - content: string file reference id
+        - dataJson:
+            - name: string file name
+            - type: string file mime type
+            - size: string file size in bytes
+
+    - Image:
+        - content: string file reference id
+        - dataJson:
+            - name: string file name
+            - type: string file mime type
+            - size: string file size in bytes
+
+
+- File Data:
+
+    - file id: string file reference id
+    - file type: Document/Image/Audio/Others
+    - data: ArrayBuffer data
+
+
+- Image generation result:
+
+    - prompt: string prompt text
+    - negative prompt: string negative prompt text
+    - seed: string seed
+    - number: numbers of generation
+    - status: string none/success/error/running
+    - aspect ratio: string
+    - provider: string provider id
+    - model: string model id
+    - images: MessageContent[]
+
diff --git a/src/types/file.ts b/src/types/file.ts
new file mode 100644
index 0000000..ccfb647
--- /dev/null
+++ b/src/types/file.ts
@@ -0,0 +1,7 @@
+export interface File {
+  fileId: string;
+  name: string;
+  type: string;
+  size: number;
+  data: ArrayBuffer;
+}
\ No newline at end of file

From c5fedc34579b26e4c20ace1f6ffd8058d290cb8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Thu, 24 Apr 2025 10:31:33 +0800
Subject: [PATCH 4/8] Function: OpenAI Image Generation Support

---
 src/components/pages/ImageGenerationPage.tsx | 99 +++++++++-----------
 src/services/core/ai-service-provider.ts     |  9 +-
 src/services/providers/openai-service.ts     | 42 ++++-----
 src/types/chat.ts                            |  1 +
 4 files changed, 69 insertions(+), 82 deletions(-)

diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index a8d51ee..91058dd 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -5,6 +5,8 @@ import {
 } from "../../services/settings-service";
 import { ChevronDown, RefreshCw } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { AIService } from "../../services/ai-service";
+import { OPENAI_PROVIDER_NAME } from "../../services/providers/openai-service";
 
 export const ImageGenerationPage = () => {
   const { t } = useTranslation();
@@ -12,8 +14,6 @@ export const ImageGenerationPage = () => {
   const [isGenerating, setIsGenerating] = useState(false);
   const [imageResult, setImageResult] = useState<string | null>(null);
   const [error, setError] = useState<Error | null>(null);
-  const [selectedModel, setSelectedModel] = useState("");
-  const [selectedProvider, setSelectedProvider] = useState("");
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
   const [aspectRatio, setAspectRatio] = useState("1:1");
   const [imageCount, setImageCount] = useState(1);
@@ -24,12 +24,8 @@ export const ImageGenerationPage = () => {
   // Check if API key is available
   useEffect(() => {
     setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
-    setSelectedProvider(SettingsService.getInstance().getSelectedProvider());
-    setSelectedModel(SettingsService.getInstance().getSelectedModel());
 
     const handleSettingsChange = () => {
-      setSelectedProvider(SettingsService.getInstance().getSelectedProvider());
-      setSelectedModel(SettingsService.getInstance().getSelectedModel());
       setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
     };
 
@@ -40,7 +36,7 @@ export const ImageGenerationPage = () => {
     };
   }, []);
 
-  // Handle generating an image (mock function)
+  // Handle generating an image using OpenAI's DALL-E 3
   const handleGenerateImage = async () => {
     if (!prompt.trim()) return;
 
@@ -48,16 +44,43 @@ export const ImageGenerationPage = () => {
     setError(null);
 
     try {
-      // In a real implementation, this would call an actual image generation service
-      // For now, just simulate the process with a timeout
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // Get the OpenAI service from AIService
+      const openaiService = AIService.getInstance().getProvider(OPENAI_PROVIDER_NAME);
+      
+      if (!openaiService) {
+        throw new Error("OpenAI service not available");
+      }
 
-      // For demo purposes, just show a placeholder result
-      setImageResult(
-        `https://placehold.co/512x512/eee/999?text=${encodeURIComponent(
-          prompt
-        )}`
-      );
+      // Map aspect ratio to size dimensions
+      const sizeMap: Record<string, `${number}x${number}`> = {
+        "1:1": "1024x1024",
+        "1:2": "512x1024",
+        "3:2": "1024x768",
+        "3:4": "768x1024",
+        "16:9": "1792x1024",
+        "9:16": "1024x1792"
+      };
+      
+      // Generate the image
+      const images = await openaiService.getImageGeneration(prompt, {
+        size: sizeMap[aspectRatio] || "1024x1024",
+        aspectRatio: aspectRatio as `${number}:${number}`,
+        style: "vivid"
+      });
+      
+      // Set the result image
+      if (images && images.length > 0) {
+        // Check if the image is already a full data URL
+        const base64Data = images[0] as string;
+        if (base64Data.startsWith('data:image')) {
+          setImageResult(base64Data);
+        } else {
+          // If it's just a base64 string without the data URI prefix, add it
+          setImageResult(`data:image/png;base64,${base64Data}`);
+        }
+      } else {
+        throw new Error("No images generated");
+      }
     } catch (err) {
       setError(err as Error);
     } finally {
@@ -70,27 +93,6 @@ export const ImageGenerationPage = () => {
     setRandomSeed(Math.floor(Math.random() * 1000000).toString());
   };
 
-  // Get model name
-  const getModelName = (modelID: string, provider: string) => {
-    const providerSettings =
-      SettingsService.getInstance().getProviderSettings(provider);
-    if (!providerSettings.models) return modelID;
-
-    const model = providerSettings.models?.find((m) => m.modelId === modelID);
-    if (!model) return modelID;
-
-    return model.modelName;
-  };
-
-  // Get display provider name
-  const getDisplayProviderName = () => {
-    if (!selectedProvider) return "硅基流动";
-
-    const providerSettings =
-      SettingsService.getInstance().getProviderSettings(selectedProvider);
-    return providerSettings.providerName || selectedProvider;
-  };
-
   return (
     <div className="flex flex-col w-full h-full bg-white">
       {isApiKeyMissing && (
@@ -120,19 +122,6 @@ export const ImageGenerationPage = () => {
             />
           </div>
 
-          {/* Negative prompt */}
-          {/* <div className="mb-6">
-            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
-              反向提示词
-              <div className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help" title="Elements to avoid in the image">?</div>
-            </label>
-            <textarea 
-              placeholder="输入不希望在生成的图像中出现的元素"
-              className="w-full p-3 input-box"
-              rows={3}
-            />
-          </div> */}
-
           {/* Generation button */}
           <div className="flex justify-center mb-6">
             <button
@@ -208,7 +197,7 @@ export const ImageGenerationPage = () => {
                 className="flex items-center justify-between w-full p-3 text-left input-box"
                 disabled={true}
               >
-                <span>{getDisplayProviderName()}</span>
+                <span>OpenAI</span>
                 <ChevronDown size={18} className="text-gray-500" />
               </button>
             </div>
@@ -224,10 +213,7 @@ export const ImageGenerationPage = () => {
                 className="flex items-center justify-between w-full p-3 text-left input-box"
                 disabled={true}
               >
-                <span>
-                  {getModelName(selectedModel, selectedProvider) ||
-                    "FLUX.1 Schnell"}
-                </span>
+                <span>DALL-E 3</span>
                 <ChevronDown size={18} className="text-gray-500" />
               </button>
             </div>
@@ -326,6 +312,7 @@ export const ImageGenerationPage = () => {
               min="1"
               max="4"
               className="w-full p-3 input-box"
+              disabled={true}
             />
           </div>
 
@@ -346,11 +333,13 @@ export const ImageGenerationPage = () => {
                 value={randomSeed}
                 onChange={(e) => setRandomSeed(e.target.value)}
                 className="flex-grow p-3 mr-2 input-box"
+                disabled={true}
               />
               <button
                 onClick={generateNewSeed}
                 className="p-2 rounded-lg image-generation-refresh-button"
                 title={t("imageGeneration.randomSeed")}
+                disabled={true}
               >
                 <RefreshCw size={20} />
               </button>
diff --git a/src/services/core/ai-service-provider.ts b/src/services/core/ai-service-provider.ts
index 5facf99..b0b0e3f 100644
--- a/src/services/core/ai-service-provider.ts
+++ b/src/services/core/ai-service-provider.ts
@@ -83,12 +83,13 @@ export interface AiServiceProvider {
   /**
    * Generate an image
    */
-  getImageGeneration?(
+  getImageGeneration(
     prompt: string,
-    options?: {
-      size?: string;
+    options: {
+      size?: `${number}x${number}`;
+      aspectRatio?: `${number}:${number}`;
       style?: string;
       quality?: string;
     }
-  ): Promise<string[]>;
+  ): Promise<string[] | Uint8Array<ArrayBufferLike>[]>;
 }
\ No newline at end of file
diff --git a/src/services/providers/openai-service.ts b/src/services/providers/openai-service.ts
index a978d3b..5feca5b 100644
--- a/src/services/providers/openai-service.ts
+++ b/src/services/providers/openai-service.ts
@@ -154,33 +154,29 @@ export class OpenAIService implements AiServiceProvider {
    */
   public async getImageGeneration(
     prompt: string,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options: {
       size?: `${number}x${number}`;
       aspectRatio?: `${number}:${number}`;
       style?: string;
       quality?: string;
-    } = {}
-    
-  ): Promise<string[]> {
-
-    // const imageModel = openai.imageModel('dall-e-3');
-
-    // const result = await imageModel.doGenerate({
-    //   prompt: prompt,
-    //   n: 1,
-    //   size: options.size || '1024x1024',
-    //   aspectRatio: options.aspectRatio || '1:1',
-    //   seed: 42,
-    //   providerOptions: {
-    //     "openai": {
-    //       "style": options.style || 'vivid'
-    //     }
-    //   }
-    // });
-
-    // return result.images;
-
-    return [];
+    }
+  ): Promise<string[] | Uint8Array<ArrayBufferLike>[]> {
+
+    const imageModel = this.commonProviderHelper.ProviderInstance.imageModel('dall-e-3');
+
+    const result = await imageModel.doGenerate({
+      prompt: prompt,
+      n: 1,
+      size: options.size || '1024x1024',
+      aspectRatio: options.aspectRatio || '1:1',
+      seed: 42,
+      providerOptions: {
+        "openai": {
+          "style": options.style || 'vivid'
+        }
+      }
+    });
+
+    return result.images;
   }
 } 
\ No newline at end of file
diff --git a/src/types/chat.ts b/src/types/chat.ts
index 38dca06..ca592d7 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -43,6 +43,7 @@ export interface Conversation {
   messages: Map<string, Message>;
   createdAt: Date;
   updatedAt: Date;
+  messageInput: string;
 }
 
 export interface ConversationFolder{

From e0808504901450c28c36d4878821879d4ea7bcee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Fri, 25 Apr 2025 20:37:50 +0800
Subject: [PATCH 5/8] Function: Add translation helper page

---
 src/App.tsx                              |   2 +
 src/components/layout/MainLayout.tsx     |   7 -
 src/components/layout/Sidebar.tsx        |  17 +-
 src/components/pages/TranslationPage.tsx | 206 +++++++++++++++++++++++
 src/locales/en/translation.json          |  21 +++
 src/locales/es/translation.json          |  21 +++
 src/locales/ja/translation.json          |  21 +++
 src/locales/ko/translation.json          |  21 +++
 src/locales/zh-CN/translation.json       |  21 +++
 src/locales/zh-TW/translation.json       |  21 +++
 10 files changed, 349 insertions(+), 9 deletions(-)
 create mode 100644 src/components/pages/TranslationPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7ecf492..8532843 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { ChatPage } from './components/pages/ChatPage';
 import { ImageGenerationPage } from './components/pages/ImageGenerationPage';
+import { TranslationPage } from './components/pages/TranslationPage';
 import MainLayout from './components/layout/MainLayout';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
 
@@ -34,6 +35,7 @@ function App() {
       <MainLayout activePage={activePage} onChangePage={handlePageChange} showSettings={showSettings} setShowSettings={setShowSettings}>
         {activePage === 'chat' && <ChatPage />}
         {activePage === 'image' && <ImageGenerationPage />}
+        {activePage === 'translation' && <TranslationPage />}
       </MainLayout>
     </DatabaseInitializer>
   );
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 58f3e66..1ea8f53 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -22,20 +22,13 @@ const MainLayout: React.FC<MainLayoutProps> = ({
   
   // Handle settings dialog
   const handleOpenSettingsDialog = () => {
-    if(activePage === 'settings' && activePage !== 'settings'){
-      // Save settings
-      SettingsService.getInstance().saveSettings();
-    }
-
     setShowSettings(true);
-    onChangePage('settings');
   };
 
   // Handle page changes
   const handlePageChange = (page: string) => {
     if (page === 'settings') {
       setShowSettings(true);
-      onChangePage('settings');
     } else {
       setShowSettings(false);
       onChangePage(page);
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index aefecaa..63c45a9 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MessageSquare, Settings, Image } from 'lucide-react';
+import { MessageSquare, Settings, Image, Languages } from 'lucide-react';
 
 interface SidebarProps {
   activePage: string;
@@ -25,6 +25,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
     else if(activePage === 'image'){
       return 'image';
     }
+    else if(activePage === 'translation'){
+      return 'translation';
+    }
 
     return '';
   }
@@ -58,7 +61,17 @@ export const Sidebar: React.FC<SidebarProps> = ({
           <Image size={22} />
         </button>
         
-        {/* Add more navigation buttons here as needed */}
+        <button 
+          className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
+            getActivePage() === 'translation' 
+              ? 'navigation-item-selected navigation-item-text' 
+              : 'navigation-item navigation-item-text'
+          }`}
+          onClick={() => onChangePage('translation')}
+          aria-label="Translation"
+        >
+          <Languages size={22} />
+        </button>
       </div>
 
       {/* Settings button at bottom */}
diff --git a/src/components/pages/TranslationPage.tsx b/src/components/pages/TranslationPage.tsx
new file mode 100644
index 0000000..a9e88f2
--- /dev/null
+++ b/src/components/pages/TranslationPage.tsx
@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from 'react';
+import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
+import { Orbit, Languages, ArrowRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export const TranslationPage: React.FC = () => {
+  const { t } = useTranslation();
+  const [sourceText, setSourceText] = useState('');
+  const [translatedText, setTranslatedText] = useState('');
+  const [isTranslating, setIsTranslating] = useState(false);
+  const [sourceLanguage, setSourceLanguage] = useState('auto');
+  const [targetLanguage, setTargetLanguage] = useState('en');
+  const [error, setError] = useState<Error | null>(null);
+  const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
+
+  // Check if API key is available
+  useEffect(() => {
+    setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+
+    const handleSettingsChange = () => {
+      setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+    };
+
+    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    };
+  }, []);
+
+  // Handle translation
+  const handleTranslate = async () => {
+    if (!sourceText.trim()) return;
+
+    setIsTranslating(true);
+    setError(null);
+
+    try {
+      // This would be replaced with actual translation logic
+      // using a language model API
+      setTimeout(() => {
+        setTranslatedText(sourceText);
+        setIsTranslating(false);
+      }, 1000);
+    } catch (err) {
+      setError(err as Error);
+      setIsTranslating(false);
+    }
+  };
+
+  // Languages for dropdown
+  const languages = [
+    { code: 'auto', name: t('translation.autoDetect') },
+    { code: 'en', name: t('translation.english') },
+    { code: 'es', name: t('translation.spanish') },
+    { code: 'fr', name: t('translation.french') },
+    { code: 'de', name: t('translation.german') },
+    { code: 'it', name: t('translation.italian') },
+    { code: 'pt', name: t('translation.portuguese') },
+    { code: 'ru', name: t('translation.russian') },
+    { code: 'zh', name: t('translation.chinese') },
+    { code: 'ja', name: t('translation.japanese') },
+    { code: 'ko', name: t('translation.korean') },
+  ];
+
+  return (
+    <div className="flex flex-col w-full h-full bg-white">
+      {isApiKeyMissing && (
+        <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
+          {t('translation.apiKeyMissing')}
+        </div>
+      )}
+
+      <div className="flex flex-row h-full">
+        {/* Left side - Source */}
+        <div className="flex-1 p-6 overflow-hidden frame-right-border">
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between gap-4 mb-4">
+                
+              {/* Language selector */}
+              <div className="relative flex items-center gap-4">
+                <h1 className="text-2xl font-semibold">
+                    {t('translation.title')}
+                </h1>
+                
+                <select
+                  value={sourceLanguage}
+                  onChange={(e) => setSourceLanguage(e.target.value)}
+                  className="px-4 py-2 input-box"
+                >
+                  {languages.map((lang) => (
+                    <option key={`source-${lang.code}`} value={lang.code}>
+                      {lang.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <button
+                onClick={handleTranslate}
+                disabled={isTranslating || !sourceText.trim() || isApiKeyMissing}
+                className="px-8 py-2.5 text-white confirm-btn flex items-center"
+              >
+                {isTranslating ? (
+                  <>
+                    <Orbit size={18} className="mr-2 animate-spin" />
+                    {t('translation.translating')}
+                  </>
+                ) : (
+                  <>
+                    <Languages size={18} className="mr-2" />
+                    {t('translation.translateButton')}
+                  </>
+                )}
+              </button>
+            </div>
+            
+            {/* Source text input */}
+            <textarea
+              value={sourceText}
+              onChange={(e) => setSourceText(e.target.value)}
+              placeholder={t('translation.inputPlaceholder')}
+              className="flex-1 w-full p-3 mb-4 form-textarea-border input-box"
+              style={{ minHeight: '200px', resize: 'none' }}
+            />
+
+            {/* Translation button */}
+            {/* <div className="flex justify-center">
+              <button
+                onClick={handleTranslate}
+                disabled={isTranslating || !sourceText.trim() || isApiKeyMissing}
+                className="px-8 py-2.5 text-white confirm-btn flex items-center"
+              >
+                {isTranslating ? (
+                  <>
+                    <Orbit size={18} className="mr-2 animate-spin" />
+                    {t('translation.translating')}
+                  </>
+                ) : (
+                  <>
+                    <Languages size={18} className="mr-2" />
+                    {t('translation.translateButton')}
+                  </>
+                )}
+              </button>
+            </div> */}
+          </div>
+        </div>
+
+        {/* Right side - Translation result */}
+        <div className="flex-1 p-6 overflow-hidden">
+          <div className="flex flex-col h-full">
+            <div className="flex items-center gap-4 mb-4">
+              <h2 className="flex items-center text-xl font-medium">
+                <ArrowRight size={24} />
+              </h2>
+
+              {/* Target language selector */}
+              <div className="relative">
+                <select
+                  value={targetLanguage}
+                  onChange={(e) => setTargetLanguage(e.target.value)}
+                  className="px-4 py-2 input-box"
+                >
+                  {languages.filter(lang => lang.code !== 'auto').map((lang) => (
+                    <option key={`target-${lang.code}`} value={lang.code}>
+                      {lang.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {/* Error message */}
+            {error && (
+              <div className="p-3 mb-4 text-red-700 bg-red-100 rounded-lg">
+                {t('common.error')}: {error.message}
+              </div>
+            )}
+
+            {/* Translation result */}
+            <div className="flex-1 p-3 overflow-auto form-textarea-border major-area-bg-color">
+              {isTranslating ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="w-8 h-8 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
+                </div>
+              ) : (
+                <div className="h-full">
+                  {translatedText ? (
+                    <p className="text-primary-800">{translatedText}</p>
+                  ) : (
+                    <div className="flex items-center justify-center h-full">
+                      <p className="text-surface-400">{t('translation.resultPlaceholder')}</p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TranslationPage; 
\ No newline at end of file
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index a6b48ce..4e9a7e5 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -32,6 +32,27 @@
     "stopResponse": "Stop Response",
     "pressShiftEnterToChangeLines": "Press Shift+Enter to change lines"
   },
+  "translation": {
+    "title": "Translation",
+    "sourceLanguage": "Source Language",
+    "result": "Translation Result",
+    "translateButton": "Translate",
+    "translating": "Translating...",
+    "inputPlaceholder": "Enter text to translate...",
+    "resultPlaceholder": "Translation will appear here",
+    "apiKeyMissing": "Please set your API key for the selected provider in the settings.",
+    "autoDetect": "Auto-detect",
+    "english": "English",
+    "spanish": "Spanish",
+    "french": "French",
+    "german": "German",
+    "italian": "Italian",
+    "portuguese": "Portuguese",
+    "russian": "Russian",
+    "chinese": "Chinese",
+    "japanese": "Japanese",
+    "korean": "Korean"
+  },
   "selectModel": {
     "selectModel_title": "Select Model",
     "selectModel_close": "Close",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index 9285257..1cd8b53 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -32,6 +32,27 @@
     "stopResponse": "Detener Respuesta",
     "pressShiftEnterToChangeLines": "Presiona Shift+Enter para cambiar de línea"
   },
+  "translation": {
+    "title": "Traducción",
+    "sourceLanguage": "Idioma de Origen",
+    "result": "Resultado de la Traducción",
+    "translateButton": "Traducir",
+    "translating": "Traduciendo...",
+    "inputPlaceholder": "Introduce el texto a traducir...",
+    "resultPlaceholder": "La traducción aparecerá aquí",
+    "apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
+    "autoDetect": "Detección automática",
+    "english": "Inglés",
+    "spanish": "Español",
+    "french": "Francés",
+    "german": "Alemán",
+    "italian": "Italiano",
+    "portuguese": "Portugués",
+    "russian": "Ruso",
+    "chinese": "Chino",
+    "japanese": "Japonés",
+    "korean": "Coreano"
+  },
   "selectModel": {
     "selectModel_title": "Seleccionar Modelo",
     "selectModel_close": "Cerrar",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 8086d38..0ae8e71 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -32,6 +32,27 @@
     "stopResponse": "応答を停止",
     "pressShiftEnterToChangeLines": "Shift+Enterを押して行を変更"
   },
+  "translation": {
+    "title": "翻訳",
+    "sourceLanguage": "ソース言語",
+    "result": "翻訳結果",
+    "translateButton": "翻訳",
+    "translating": "翻訳中...",
+    "inputPlaceholder": "翻訳するテキストを入力...",
+    "resultPlaceholder": "翻訳結果がここに表示されます",
+    "apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
+    "autoDetect": "自動検出",
+    "english": "英語",
+    "spanish": "スペイン語",
+    "french": "フランス語",
+    "german": "ドイツ語",
+    "italian": "イタリア語",
+    "portuguese": "ポルトガル語",
+    "russian": "ロシア語",
+    "chinese": "中国語",
+    "japanese": "日本語",
+    "korean": "韓国語"
+  },
   "selectModel": {
     "selectModel_title": "モデルを選択",
     "selectModel_close": "閉じる",
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index c84427e..b330069 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -32,6 +32,27 @@
     "stopResponse": "응답 중지",
     "pressShiftEnterToChangeLines": "줄을 바꾸려면 Shift+Enter를 누르세요"
   },
+  "translation": {
+    "title": "번역",
+    "sourceLanguage": "원본 언어",
+    "result": "번역 결과",
+    "translateButton": "번역",
+    "translating": "번역 중...",
+    "inputPlaceholder": "번역할 텍스트를 입력하세요...",
+    "resultPlaceholder": "번역 결과가 여기에 표시됩니다",
+    "apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
+    "autoDetect": "자동 감지",
+    "english": "영어",
+    "spanish": "스페인어",
+    "french": "프랑스어",
+    "german": "독일어",
+    "italian": "이탈리아어",
+    "portuguese": "포르투갈어",
+    "russian": "러시아어",
+    "chinese": "중국어",
+    "japanese": "일본어",
+    "korean": "한국어"
+  },
   "selectModel": {
     "selectModel_title": "모델 선택",
     "selectModel_close": "닫기",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 61814e7..7ecf6f1 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -32,6 +32,27 @@
     "stopResponse": "停止响应",
     "pressShiftEnterToChangeLines": "按 Shift+Enter 换行"
   },
+  "translation": {
+    "title": "翻译",
+    "sourceLanguage": "源语言",
+    "result": "翻译结果",
+    "translateButton": "翻译",
+    "translating": "翻译中...",
+    "inputPlaceholder": "输入要翻译的文本...",
+    "resultPlaceholder": "翻译结果将显示在这里",
+    "apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
+    "autoDetect": "自动检测",
+    "english": "英语",
+    "spanish": "西班牙语",
+    "french": "法语",
+    "german": "德语",
+    "italian": "意大利语",
+    "portuguese": "葡萄牙语",
+    "russian": "俄语",
+    "chinese": "中文",
+    "japanese": "日语",
+    "korean": "韩语"
+  },
   "selectModel": {
     "selectModel_title": "选择模型",
     "selectModel_close": "关闭",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 0455b37..415cf90 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -32,6 +32,27 @@
     "stopResponse": "停止回應",
     "pressShiftEnterToChangeLines": "按 Shift+Enter 換行"
   },
+  "translation": {
+    "title": "翻譯",
+    "sourceLanguage": "源語言",
+    "result": "翻譯結果",
+    "translateButton": "翻譯",
+    "translating": "翻譯中...",
+    "inputPlaceholder": "輸入要翻譯的文字...",
+    "resultPlaceholder": "翻譯結果將顯示在這裡",
+    "apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
+    "autoDetect": "自動偵測",
+    "english": "英文",
+    "spanish": "西班牙文",
+    "french": "法文",
+    "german": "德文",
+    "italian": "義大利文",
+    "portuguese": "葡萄牙文",
+    "russian": "俄文",
+    "chinese": "中文",
+    "japanese": "日文",
+    "korean": "韓文"
+  },
   "selectModel": {
     "selectModel_title": "選擇模型",
     "selectModel_close": "關閉",

From 01398d2af4df4e45f66fe473ee98360d25ab60bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 26 Apr 2025 10:39:21 +0800
Subject: [PATCH 6/8] Function: Translation Page now will call AI Provider

---
 src/components/chat/ChatMessageArea.tsx  |  10 +-
 src/components/layout/Sidebar.tsx        |   2 +-
 src/components/pages/TranslationPage.tsx | 128 ++++++++++++++++++++---
 src/locales/en/translation.json          |   2 +-
 src/locales/es/translation.json          |   2 +-
 src/locales/ja/translation.json          |   2 +-
 src/locales/ko/translation.json          |   2 +-
 src/locales/zh-CN/translation.json       |   2 +-
 src/locales/zh-TW/translation.json       |   2 +-
 src/styles/tensorblock-light.css         |   4 +
 10 files changed, 127 insertions(+), 29 deletions(-)

diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index bc86008..3bf2004 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -527,11 +527,11 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           <div className='flex flex-row items-center h-full gap-2'>
             {/* File upload button */}
             {onSendMessageWithFiles && (
-                  <FileUploadButton 
-                    onFilesSelected={handleFilesSelected}
-                    disabled={isLoading || isCurrentlyStreaming}
-                  />
-                )}
+              <FileUploadButton
+                onFilesSelected={handleFilesSelected}
+                disabled={isLoading || isCurrentlyStreaming}
+              />
+            )}
           </div>
 
           {/* Web search element */}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 63c45a9..a77016c 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -36,7 +36,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
     <div className="w-[68px] h-full bg-main-background-color flex flex-col">
  
       {/* Navigation buttons */}
-      <div className="flex flex-col items-center flex-1 pt-2">
+      <div className="flex flex-col items-center flex-1 gap-1 pt-2">
         <button 
           className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
             getActivePage() === 'chat' 
diff --git a/src/components/pages/TranslationPage.tsx b/src/components/pages/TranslationPage.tsx
index a9e88f2..0ff125e 100644
--- a/src/components/pages/TranslationPage.tsx
+++ b/src/components/pages/TranslationPage.tsx
@@ -2,6 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
 import { Orbit, Languages, ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { v4 as uuidv4 } from 'uuid';
+import { Message, MessageRole } from '../../types/chat';
+import { AIService } from '../../services/ai-service';
+import { StreamControlHandler } from '../../services/streaming-control';
+import { MessageHelper } from '../../services/message-helper';
 
 export const TranslationPage: React.FC = () => {
   const { t } = useTranslation();
@@ -36,18 +41,115 @@ export const TranslationPage: React.FC = () => {
     setError(null);
 
     try {
-      // This would be replaced with actual translation logic
-      // using a language model API
-      setTimeout(() => {
-        setTranslatedText(sourceText);
-        setIsTranslating(false);
-      }, 1000);
+      const settingsService = SettingsService.getInstance();
+      const provider = settingsService.getSelectedProvider();
+      const model = settingsService.getSelectedModel();
+      
+      // Create conversation ID (just for streaming handler, won't be stored)
+      const tempConversationId = uuidv4();
+
+      // Create messages for translation
+      const messages = createTranslationMessages(tempConversationId, sourceText, targetLanguage);
+
+      // Create placeholder message for streaming
+      const placeholderMessage = MessageHelper.getPlaceholderMessage(model, provider, tempConversationId);
+      placeholderMessage.fatherMessageId = messages[0].messageId;
+
+      // Create stream controller for handling the response
+      const streamController = new StreamControlHandler(
+        // We create a minimal conversation object just for the StreamControlHandler
+        {
+          conversationId: tempConversationId,
+          folderId: '',
+          title: 'Translation',
+          firstMessageId: messages[0].messageId,
+          messages: new Map([[placeholderMessage.messageId, placeholderMessage]]),
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          messageInput: ''
+        },
+        placeholderMessage,
+        // On chunk callback
+        (updatedConversation) => {
+          const updatedMessage = updatedConversation.messages.get(placeholderMessage.messageId);
+          if (updatedMessage) {
+            setTranslatedText(MessageHelper.MessageContentToText(updatedMessage.content));
+          }
+        },
+        // On finish callback
+        (aiResponse) => {
+          setIsTranslating(false);
+          if (aiResponse) {
+            setTranslatedText(MessageHelper.MessageContentToText(aiResponse.content));
+          }
+        }
+      );
+
+      // Send to AI service
+      await AIService.getInstance().getChatCompletion(
+        messages,
+        {
+          model,
+          provider,
+          stream: true
+        },
+        streamController
+      );
     } catch (err) {
       setError(err as Error);
       setIsTranslating(false);
     }
   };
 
+  // Create messages for translation
+  const createTranslationMessages = (conversationId: string, text: string, targetLang: string): Message[] => {
+    // Create a system message with translation instructions
+    const systemMessage: Message = {
+      messageId: uuidv4(),
+      conversationId,
+      role: 'system' as MessageRole,
+      content: MessageHelper.pureTextMessage(
+        `You are a translation assistant. Detect the source language of the text and translate it to ${getLanguageName(targetLang)}. 
+         Only return the translated text without any explanations, notes, or decorations.
+         Do not include any text that is not in the original input.`
+      ),
+      timestamp: new Date(),
+      provider: SettingsService.getInstance().getSelectedProvider(),
+      model: SettingsService.getInstance().getSelectedModel(),
+      tokens: 0,
+      fatherMessageId: null,
+      childrenMessageIds: [],
+      preferIndex: -1
+    };
+
+    // Create the user message with text to translate
+    const userMessage: Message = {
+      messageId: uuidv4(),
+      conversationId,
+      role: 'user' as MessageRole,
+      content: MessageHelper.pureTextMessage(text),
+      timestamp: new Date(),
+      provider: 'user',
+      model: 'user',
+      tokens: 0,
+      fatherMessageId: systemMessage.messageId,
+      childrenMessageIds: [],
+      preferIndex: -1
+    };
+
+    // Link messages
+    systemMessage.childrenMessageIds.push(userMessage.messageId);
+    systemMessage.preferIndex = 0;
+
+    return [systemMessage, userMessage];
+  };
+
+  // Get language name from code
+  const getLanguageName = (code: string): string => {
+    const language = languages.find(lang => lang.code === code);
+    return language ? language.name : code;
+  };
+
   // Languages for dropdown
   const languages = [
     { code: 'auto', name: t('translation.autoDetect') },
@@ -83,17 +185,9 @@ export const TranslationPage: React.FC = () => {
                     {t('translation.title')}
                 </h1>
                 
-                <select
-                  value={sourceLanguage}
-                  onChange={(e) => setSourceLanguage(e.target.value)}
-                  className="px-4 py-2 input-box"
-                >
-                  {languages.map((lang) => (
-                    <option key={`source-${lang.code}`} value={lang.code}>
-                      {lang.name}
-                    </option>
-                  ))}
-                </select>
+                <span className="text-sm text-light-hint">
+                  {t('translation.sourceLanguageWithAutoSelected')}
+                </span>
               </div>
 
               <button
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 4e9a7e5..a3a3624 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -34,7 +34,7 @@
   },
   "translation": {
     "title": "Translation",
-    "sourceLanguage": "Source Language",
+    "sourceLanguageWithAutoSelected": "Source Language will be auto detected",
     "result": "Translation Result",
     "translateButton": "Translate",
     "translating": "Translating...",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index 1cd8b53..7401a7a 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -34,7 +34,7 @@
   },
   "translation": {
     "title": "Traducción",
-    "sourceLanguage": "Idioma de Origen",
+    "sourceLanguageWithAutoSelected": "El idioma de origen se detectará automáticamente",
     "result": "Resultado de la Traducción",
     "translateButton": "Traducir",
     "translating": "Traduciendo...",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 0ae8e71..fea5ab3 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -34,7 +34,7 @@
   },
   "translation": {
     "title": "翻訳",
-    "sourceLanguage": "ソース言語",
+    "sourceLanguageWithAutoSelected": "ソース言語は自動で検出されます",
     "result": "翻訳結果",
     "translateButton": "翻訳",
     "translating": "翻訳中...",
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index b330069..783bacf 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -34,7 +34,7 @@
   },
   "translation": {
     "title": "번역",
-    "sourceLanguage": "원본 언어",
+    "sourceLanguageWithAutoSelected": "원본 언어는 자동으로 감지됩니다",
     "result": "번역 결과",
     "translateButton": "번역",
     "translating": "번역 중...",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 7ecf6f1..63306d6 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -34,7 +34,7 @@
   },
   "translation": {
     "title": "翻译",
-    "sourceLanguage": "源语言",
+    "sourceLanguageWithAutoSelected": "源语言将会自动识别",
     "result": "翻译结果",
     "translateButton": "翻译",
     "translating": "翻译中...",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 415cf90..a41b528 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -34,7 +34,7 @@
   },
   "translation": {
     "title": "翻譯",
-    "sourceLanguage": "源語言",
+    "sourceLanguageWithAutoSelected": "源語言將會自動偵測",
     "result": "翻譯結果",
     "translateButton": "翻譯",
     "translating": "翻譯中...",
diff --git a/src/styles/tensorblock-light.css b/src/styles/tensorblock-light.css
index a1ba009..57fc2cd 100644
--- a/src/styles/tensorblock-light.css
+++ b/src/styles/tensorblock-light.css
@@ -598,4 +598,8 @@
     .image-result-area:hover {
         border-color: var(--primary-300);
     }
+
+    .text-light-hint{
+        color: var(--surface-400);
+    }
 }
\ No newline at end of file

From 42b72151f0a3b2e639f9ac9e480c770ddc55678a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 26 Apr 2025 16:25:01 +0800
Subject: [PATCH 7/8] Function: Adding support Image generation in chat

---
 src/components/chat/ChatMessageArea.tsx       |  10 +-
 src/components/chat/ImageGenerationButton.tsx | 158 ++++++++++++++++++
 src/components/pages/ChatPage.tsx             |   4 +-
 src/components/pages/TranslationPage.tsx      |   1 -
 src/styles/tensorblock-light.css              |  35 ++++
 5 files changed, 203 insertions(+), 5 deletions(-)
 create mode 100644 src/components/chat/ImageGenerationButton.tsx

diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index 3bf2004..043d407 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -12,6 +12,7 @@ import ProviderIcon from '../ui/ProviderIcon';
 import { useTranslation } from '../../hooks/useTranslation';
 import FileUploadButton from './FileUploadButton';
 import FileAttachmentDisplay from './FileAttachmentDisplay';
+import ImageGenerationButton from './ImageGenerationButton';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
@@ -319,9 +320,9 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   :<></>;
 
   return (
-    <div className="flex flex-col w-full h-full max-w-full">
+    <div className="flex flex-col w-full h-full">
       {/* Messages area */}
-      <div className="p-4 space-y-4 overflow-y-auto">
+      <div className="flex-1 p-4 space-y-4 overflow-y-auto">
         {getMessagesList().map((message) => {
           if(message.role === 'system') return null;
 
@@ -532,6 +533,11 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                 disabled={isLoading || isCurrentlyStreaming}
               />
             )}
+            
+            {/* Image generation button */}
+            <ImageGenerationButton 
+              disabled={isLoading || isCurrentlyStreaming}
+            />
           </div>
 
           {/* Web search element */}
diff --git a/src/components/chat/ImageGenerationButton.tsx b/src/components/chat/ImageGenerationButton.tsx
new file mode 100644
index 0000000..276f562
--- /dev/null
+++ b/src/components/chat/ImageGenerationButton.tsx
@@ -0,0 +1,158 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Image } from 'lucide-react';
+import { SettingsService } from '../../services/settings-service';
+import { AIServiceCapability } from '../../types/capabilities';
+import ProviderIcon from '../ui/ProviderIcon';
+import { useTranslation } from '../../hooks/useTranslation';
+
+interface ImageGenerationButtonProps {
+  onImageGenerate?: (prompt: string, provider: string, model: string) => void;
+  disabled?: boolean;
+}
+
+interface ProviderModel {
+  providerName: string;
+  modelId: string;
+  modelName: string;
+}
+
+const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({ 
+  disabled = false 
+}) => {
+  const { t } = useTranslation();
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [providers, setProviders] = useState<ProviderModel[]>([]);
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+  const [selectedModel, setSelectedModel] = useState<string | null>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Load available image generation providers and models
+  useEffect(() => {
+    const loadProviders = () => {
+      const settingsService = SettingsService.getInstance();
+      const availableProviders: ProviderModel[] = [];
+
+      // Get all providers from settings
+      const settings = settingsService.getSettings();
+      const providerIds = Object.keys(settings.providers);
+      
+      for (const providerId of providerIds) {
+        // Get the provider's settings
+        const providerSettings = settingsService.getProviderSettings(providerId);
+        
+        if (providerSettings.models) {
+          // For now, just assume all models have image generation capability
+          // This would need to be updated once proper capability detection is implemented
+          for (const model of providerSettings.models) {
+            // Check if model has image generation capability
+            if (model.modelCapabilities?.includes(AIServiceCapability.ImageGeneration)) {
+              availableProviders.push({
+                providerName: providerId,
+                modelId: model.modelId,
+                modelName: model.modelName
+              });
+            }
+          }
+        }
+      }
+
+      setProviders(availableProviders);
+      
+      // Set default selected provider and model if available
+      if (availableProviders.length > 0) {
+        setSelectedProvider(availableProviders[0].providerName);
+        setSelectedModel(availableProviders[0].modelId);
+      }
+    };
+
+    loadProviders();
+  }, []);
+
+  // Handle click outside to close popup
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popupRef.current && 
+        !popupRef.current.contains(event.target as Node) &&
+        buttonRef.current && 
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsPopupOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const togglePopup = () => {
+    setIsPopupOpen(!isPopupOpen);
+  };
+
+  const handleProviderModelSelect = (providerName: string, modelId: string) => {
+    setSelectedProvider(providerName);
+    setSelectedModel(modelId);
+    setIsPopupOpen(false);
+  };
+
+  const isButtonEnabled = !disabled && providers.length > 0;
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={togglePopup}
+        disabled={!isButtonEnabled}
+        className="flex items-center justify-center w-8 h-8 rounded-full image-generation-button focus:outline-none"
+        title={isButtonEnabled ? t('chat.generateImage') : t('chat.imageGenerationNotAvailable')}
+      >
+        <Image size={20} />
+      </button>
+      
+      {isPopupOpen && (
+        <div 
+          ref={popupRef}
+          className="absolute z-10 mt-2 image-generation-popup"
+          style={{ bottom: '100%', left: 0, minWidth: '220px' }}
+        >
+          <div className="p-2">
+            <div className="mb-2 text-sm font-medium text-gray-700">
+              {t('chat.selectImageProvider')}
+            </div>
+            <div className="overflow-y-auto max-h-60">
+              {providers.map((provider) => (
+                <div
+                  key={`${provider.providerName}-${provider.modelId}`}
+                  className={`flex items-center px-3 py-2 cursor-pointer rounded-md ${
+                    selectedProvider === provider.providerName && selectedModel === provider.modelId
+                      ? 'image-generation-provider-selected'
+                      : 'image-generation-provider-item'
+                  }`}
+                  onClick={() => handleProviderModelSelect(provider.providerName, provider.modelId)}
+                >
+                  <ProviderIcon providerName={provider.providerName} className="w-5 h-5 mr-2" />
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium">{provider.providerName}</span>
+                    <span className="text-xs text-gray-500">{provider.modelName}</span>
+                  </div>
+                </div>
+              ))}
+              
+              {providers.length === 0 && (
+                <div className="px-3 py-2 text-sm text-gray-500">
+                  {t('chat.noImageProvidersAvailable')}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageGenerationButton; 
\ No newline at end of file
diff --git a/src/components/pages/ChatPage.tsx b/src/components/pages/ChatPage.tsx
index 37a6c1a..15a4151 100644
--- a/src/components/pages/ChatPage.tsx
+++ b/src/components/pages/ChatPage.tsx
@@ -372,7 +372,7 @@ export const ChatPage = () => {
     <div className="flex flex-col w-full h-full bg-white">
 
       {/* Main content with chat history and messages */}
-      <div className="flex w-full overflow-hidden">
+      <div className="flex w-full h-full overflow-hidden">
         <ChatHistoryList 
           conversations={conversations}
           folders={folders}
@@ -387,7 +387,7 @@ export const ChatPage = () => {
           onMoveConversation={handleMoveConversation}
         />
         
-        <div className="flex flex-col w-full min-w-0 overflow-hidden">
+        <div className="flex flex-col w-full h-full overflow-hidden">
           {isApiKeyMissing && (
             <div className="p-2 text-sm text-center text-yellow-800 bg-yellow-100">
               Please set your API key for the selected provider in the settings.
diff --git a/src/components/pages/TranslationPage.tsx b/src/components/pages/TranslationPage.tsx
index 0ff125e..ecd249c 100644
--- a/src/components/pages/TranslationPage.tsx
+++ b/src/components/pages/TranslationPage.tsx
@@ -13,7 +13,6 @@ export const TranslationPage: React.FC = () => {
   const [sourceText, setSourceText] = useState('');
   const [translatedText, setTranslatedText] = useState('');
   const [isTranslating, setIsTranslating] = useState(false);
-  const [sourceLanguage, setSourceLanguage] = useState('auto');
   const [targetLanguage, setTargetLanguage] = useState('en');
   const [error, setError] = useState<Error | null>(null);
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
diff --git a/src/styles/tensorblock-light.css b/src/styles/tensorblock-light.css
index 57fc2cd..2ebe548 100644
--- a/src/styles/tensorblock-light.css
+++ b/src/styles/tensorblock-light.css
@@ -602,4 +602,39 @@
     .text-light-hint{
         color: var(--surface-400);
     }
+
+    .image-generation-button {
+        background-color: transparent;
+        color: var(--primary-500);
+    }
+
+    .image-generation-button:hover {
+        background-color: var(--primary-100);
+        color: var(--primary-600);
+    }
+
+    .image-generation-button:disabled {
+        background-color: transparent;
+        color: var(--surface-400);
+        cursor: not-allowed;
+    }
+
+    .image-generation-popup {
+        background-color: var(--surface-0);
+        border: 1px solid var(--primary-200);
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .image-generation-provider-item {
+        background-color: transparent;
+    }
+
+    .image-generation-provider-item:hover {
+        background-color: var(--primary-100);
+    }
+
+    .image-generation-provider-selected {
+        background-color: var(--primary-200);
+    }
 }
\ No newline at end of file

From 1a228935756223fda9c8db0862e53d058418549e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 26 Apr 2025 16:29:30 +0800
Subject: [PATCH 8/8] Upgrade: AI SDK to latest

---
 package-lock.json | 122 +++++++++++++++++++++++-----------------------
 package.json      |  12 ++---
 2 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c03411e..995dcd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,13 @@
       "name": "tensorblock-studio",
       "version": "0.0.1",
       "dependencies": {
-        "@ai-sdk/fireworks": "^0.2.5",
-        "@ai-sdk/google": "^1.2.5",
-        "@ai-sdk/openai": "^1.3.6",
-        "@ai-sdk/togetherai": "^0.2.5",
-        "@anthropic-ai/sdk": "^0.39.0",
+        "@ai-sdk/fireworks": "^0.2.13",
+        "@ai-sdk/google": "^1.2.13",
+        "@ai-sdk/openai": "^1.3.20",
+        "@ai-sdk/togetherai": "^0.2.13",
+        "@anthropic-ai/sdk": "^0.40.0",
         "@openrouter/ai-sdk-provider": "^0.4.5",
-        "ai": "^4.2.10",
+        "ai": "^4.3.10",
         "axios": "^1.8.4",
         "dotenv": "^16.4.7",
         "electron-builder": "26.0.12",
@@ -63,13 +63,13 @@
       }
     },
     "node_modules/@ai-sdk/fireworks": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/fireworks/-/fireworks-0.2.6.tgz",
-      "integrity": "sha512-2aqKIJ9A6ioRcANxxI6CpxWSS7kYUJDwHyxQiQNw3Ng/rz4u6oa0bOEUWHistP8uKzalveXjooLPZxa/Ie2iFg==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/fireworks/-/fireworks-0.2.13.tgz",
+      "integrity": "sha512-LYS0gof7dgJ2sfOU8WmKobHVV8gHfoFtLmiKfhNJjhOnF0a8EA5mX6uWmN///j8mtst7lBLqOw4Q3DNJFoqS3g==",
       "dependencies": {
-        "@ai-sdk/openai-compatible": "0.2.6",
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/openai-compatible": "0.2.13",
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -79,12 +79,12 @@
       }
     },
     "node_modules/@ai-sdk/google": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-1.2.7.tgz",
-      "integrity": "sha512-swGJ4nPRB83ZQgR9W5fF7usvZmZsBN61+dm03Hz/dRVVLLLTVZq/0YtpFZ8Yj0utNs9K+NvY0456e7cN3Ff8TQ==",
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-1.2.13.tgz",
+      "integrity": "sha512-nnHDzbX1Zst28AjP3718xSWsEqx++qmFuqmnDc2Htelc02HyO6WkWOXMH+YVK3W8zdIyZEKpHL9KKlql7pa10A==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -94,12 +94,12 @@
       }
     },
     "node_modules/@ai-sdk/openai": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.3.7.tgz",
-      "integrity": "sha512-JjjEulfMgH5kGyCWKdyhxNLSIs2qBkUr6LtzNJtYlV23e5RbOHA5qgbbxn6IbGxeZs4xpPhpGmOnUVzh7GZwcg==",
+      "version": "1.3.20",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.3.20.tgz",
+      "integrity": "sha512-/DflUy7ROG9k6n6YTXMBFPbujBKnbGY58f3CwvicLvDar9nDAloVnUWd3LUoOxpSVnX8vtQ7ngxF52SLWO6RwQ==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -109,12 +109,12 @@
       }
     },
     "node_modules/@ai-sdk/openai-compatible": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai-compatible/-/openai-compatible-0.2.6.tgz",
-      "integrity": "sha512-UOPEWIqG3l5K9O+p7gqiCOWzx66JtmG9v9Mab+S4E7WE34EN6u1QS1pX+RDlRDhZ0/8gNJif0r4Xlc+Ti03yNA==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai-compatible/-/openai-compatible-0.2.13.tgz",
+      "integrity": "sha512-tB+lL8Z3j0qDod/mvxwjrPhbLUHp/aQW+NvMoJaqeTtP+Vmv5qR800pncGczxn5WN0pllQm+7aIRDnm69XeSbg==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -124,9 +124,9 @@
       }
     },
     "node_modules/@ai-sdk/provider": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.1.0.tgz",
-      "integrity": "sha512-0M+qjp+clUD0R1E5eWQFhxEvWLNaOtGQRUaBn8CUABnSKredagq92hUS9VjOzGsTm37xLfpaxl97AVtbeOsHew==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.1.3.tgz",
+      "integrity": "sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==",
       "dependencies": {
         "json-schema": "^0.4.0"
       },
@@ -135,11 +135,11 @@
       }
     },
     "node_modules/@ai-sdk/provider-utils": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.4.tgz",
-      "integrity": "sha512-13sEGBxB6kgaMPGOgCLYibF6r8iv8mgjhuToFrOTU09bBxbFQd8ZoARarCfJN6VomCUbUvMKwjTBLb1vQnN+WA==",
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.7.tgz",
+      "integrity": "sha512-kM0xS3GWg3aMChh9zfeM+80vEZfXzR3JEUBdycZLtbRZ2TRT8xOj3WodGHPb06sUK5yD7pAXC/P7ctsi2fvUGQ==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider": "1.1.3",
         "nanoid": "^3.3.8",
         "secure-json-parse": "^2.7.0"
       },
@@ -151,12 +151,12 @@
       }
     },
     "node_modules/@ai-sdk/react": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.2.6.tgz",
-      "integrity": "sha512-5BFChNbcYtcY9MBStcDev7WZRHf0NpTrk8yfSoedWctB3jfWkFd1HECBvdc8w3mUQshF2MumLHtAhRO7IFtGGQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.2.9.tgz",
+      "integrity": "sha512-/VYm8xifyngaqFDLXACk/1czDRCefNCdALUyp+kIX6DUIYUWTM93ISoZ+qJ8+3E+FiJAKBQz61o8lIIl+vYtzg==",
       "dependencies": {
-        "@ai-sdk/provider-utils": "2.2.4",
-        "@ai-sdk/ui-utils": "1.2.5",
+        "@ai-sdk/provider-utils": "2.2.7",
+        "@ai-sdk/ui-utils": "1.2.8",
         "swr": "^2.2.5",
         "throttleit": "2.1.0"
       },
@@ -174,13 +174,13 @@
       }
     },
     "node_modules/@ai-sdk/togetherai": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/togetherai/-/togetherai-0.2.6.tgz",
-      "integrity": "sha512-AV3CABMKlIniCe5owr6H/kSirfk3Y/MeBAetrNJxRDhmrxa5VXzbWeMxS5xeS8crqFXWJPPLcwPiwOuFtpQMrA==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/togetherai/-/togetherai-0.2.13.tgz",
+      "integrity": "sha512-DmcH+5aeLPpVCQYZgmM1nnKNMkqvJR8lWStFze5+PbKJsUHGqli8zdGEEOJ7iGWGOFONo7EpdW/tJeGP1xNXdw==",
       "dependencies": {
-        "@ai-sdk/openai-compatible": "0.2.6",
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4"
+        "@ai-sdk/openai-compatible": "0.2.13",
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7"
       },
       "engines": {
         "node": ">=18"
@@ -190,12 +190,12 @@
       }
     },
     "node_modules/@ai-sdk/ui-utils": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.2.5.tgz",
-      "integrity": "sha512-XDgqnJcaCkDez7qolvk+PDbs/ceJvgkNkxkOlc9uDWqxfDJxtvCZ+14MP/1qr4IBwGIgKVHzMDYDXvqVhSWLzg==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.2.8.tgz",
+      "integrity": "sha512-nls/IJCY+ks3Uj6G/agNhXqQeLVqhNfoJbuNgCny+nX2veY5ADB91EcZUqVeQ/ionul2SeUswPY6Q/DxteY29Q==",
       "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4",
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7",
         "zod-to-json-schema": "^3.24.1"
       },
       "engines": {
@@ -231,9 +231,9 @@
       }
     },
     "node_modules/@anthropic-ai/sdk": {
-      "version": "0.39.0",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.39.0.tgz",
-      "integrity": "sha512-eMyDIPRZbt1CCLErRCi3exlAvNkBtRe+kW5vvJyef93PmNr/clstYgHhtvmkxN82nlKgzyGPCyGxrm0JQ1ZIdg==",
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.40.0.tgz",
+      "integrity": "sha512-NkIgtZxa4nWBzXtDuYe6Wumu1+cgEuEQtol8b1bVSjtS7Dvqex6iNdxaddV8PkRC8Z8mhbNw2m7j+9AD9uRRKw==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -2926,14 +2926,14 @@
       }
     },
     "node_modules/ai": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ai/-/ai-4.3.1.tgz",
-      "integrity": "sha512-6RSRE0x0FAUZxWpLOq6yrh1IFXakvvJgHs8xPHtt8VmsTqhgjP5GClguaGs+KCpVbVfdygwgji7YJjOwq80suQ==",
-      "dependencies": {
-        "@ai-sdk/provider": "1.1.0",
-        "@ai-sdk/provider-utils": "2.2.4",
-        "@ai-sdk/react": "1.2.6",
-        "@ai-sdk/ui-utils": "1.2.5",
+      "version": "4.3.10",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-4.3.10.tgz",
+      "integrity": "sha512-jw+ahNu+T4SHj9gtraIKtYhanJI6gj2IZ5BFcfEHgoyQVMln5a5beGjzl/nQSX6FxyLqJ/UBpClRa279EEKK/Q==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.3",
+        "@ai-sdk/provider-utils": "2.2.7",
+        "@ai-sdk/react": "1.2.9",
+        "@ai-sdk/ui-utils": "1.2.8",
         "@opentelemetry/api": "1.9.0",
         "jsondiffpatch": "0.6.0"
       },
diff --git a/package.json b/package.json
index b6cc7fe..e8783c0 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ai-sdk/fireworks": "^0.2.5",
-    "@ai-sdk/google": "^1.2.5",
-    "@ai-sdk/openai": "^1.3.6",
-    "@ai-sdk/togetherai": "^0.2.5",
-    "@anthropic-ai/sdk": "^0.39.0",
+    "@ai-sdk/fireworks": "^0.2.13",
+    "@ai-sdk/google": "^1.2.13",
+    "@ai-sdk/openai": "^1.3.20",
+    "@ai-sdk/togetherai": "^0.2.13",
+    "@anthropic-ai/sdk": "^0.40.0",
     "@openrouter/ai-sdk-provider": "^0.4.5",
-    "ai": "^4.2.10",
+    "ai": "^4.3.10",
     "axios": "^1.8.4",
     "dotenv": "^16.4.7",
     "electron-builder": "26.0.12",