Function; Add Image generation page

ShenKSPZ · ShenKSPZ · commit 92c4a2d944b2 · 2025-04-21T23:03:18.000-04:00
diff --git 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
@@ -1,37 +1,47 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode } from 'react';
 import Sidebar from './Sidebar';
 import SettingsPage from '../pages/SettingsPage';
 import TopBar from './TopBar';
 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
@@ -1,20 +1,42 @@
 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">
  
       {/* Navigation buttons */}
       <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,18 +46,30 @@ 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>
 
       {/* Settings button at bottom */}
       <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
@@ -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; 
diff --git 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
@@ -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 [];
   }
 } 
diff --git 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);
       

Original file line number	Diff line number	Diff line change
`@@ -346,7 +346,7 @@ export class MessageHelper {`
`346`	`346`	`const fileContent: FilePart = {`
`347`	`347`	`type: 'file',`
`348`	`348`	`data: content.content,`
`349`		`- mimeType: 'application/pdf',`
	`349`	`+ mimeType: 'application/pdf', // SDK requires pdf mime type, but it supports all mime types`
`350`	`350`	`filename: dataJson.name`
`351`	`351`	`}`
`352`	`352`	`return fileContent;`