Rename project from xpaintai to paintai; update canvas dimensions and AI API endpoint; enhance AI features with dimensions mode

App.tsx

@@ -10,7 +10,7 @@ import { DEFAULT_AI_API_ENDPOINT } from './constants';
 // Custom Hooks
 import { useToasts } from './hooks/useToasts';
 import { useCanvasHistory } from './hooks/useCanvasHistory';
-import { useAiFeatures, AiImageQuality } from './hooks/useAiFeatures';
+import { useAiFeatures, AiImageQuality, AiDimensionsMode } from './hooks/useAiFeatures';
 import { useDrawingTools } from './hooks/useDrawingTools';
 import { useFullscreen } from './hooks/useFullscreen';
 import { useConfirmModal } from './hooks/useConfirmModal';
@@ -23,8 +23,10 @@ const App: React.FC = () => {
   
   // Settings specific states
   const [showZoomSlider, setShowZoomSlider] = useState<boolean>(true);
-  const [aiImageQuality, setAiImageQuality] = useState<AiImageQuality>('low');
+  const [aiImageQuality, setAiImageQuality] = useState<AiImageQuality>('medium');
   const [aiApiEndpoint, setAiApiEndpoint] = useState<string>(DEFAULT_AI_API_ENDPOINT);
+  const [aiDimensionsMode, setAiDimensionsMode] = useState<AiDimensionsMode>('match_canvas');
+
 
   // Custom Hooks Instantiation
   const { toasts, showToast } = useToasts();
@@ -84,6 +86,7 @@ const App: React.FC = () => {
     setZoomLevel,
     aiImageQuality,
     aiApiEndpoint,
+    aiDimensionsMode,
     currentCanvasWidth: canvasWidth, // Pass current canvas dimensions
     currentCanvasHeight: canvasHeight, // Pass current canvas dimensions
   });
@@ -192,6 +195,8 @@ const App: React.FC = () => {
             onAiImageQualityChange={setAiImageQuality}
             aiApiEndpoint={aiApiEndpoint}
             onAiApiEndpointChange={setAiApiEndpoint}
+            aiDimensionsMode={aiDimensionsMode}
+            onAiDimensionsModeChange={setAiDimensionsMode}
             isFullscreenActive={isFullscreenActive}
             onToggleFullscreen={toggleFullscreen}
             currentCanvasWidth={canvasWidth}
@@ -233,4 +238,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

components/AiEditModal.tsx

@@ -49,7 +49,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
           <img 
             src={imageUrl} 
             alt="Uploaded image preview" 
-            className="w-auto h-40  rounded border border-slate-300 object-contain mx-auto" 
+            className="max-w-full h-auto max-h-48 rounded border border-slate-300 object-contain mx-auto" 
           />
         </div>
 
@@ -63,7 +63,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
             onChange={(e) => onPromptChange(e.target.value)}
             placeholder="e.g., 'make the cat wear a party hat', 'change background to a beach'"
             rows={3}
-            className="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-xl"
+            className="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
             disabled={isLoading}
             aria-describedby={error ? "ai-edit-error" : undefined}
           />

components/SettingsPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CloseIcon, FullscreenEnterIcon, FullscreenExitIcon } from './icons'; // Import fullscreen icons
-import { AiImageQuality } from '../hooks/useAiFeatures';
+import { AiImageQuality, AiDimensionsMode } from '../hooks/useAiFeatures';
 
 interface SettingsPanelProps {
   isOpen: boolean;
@@ -11,6 +11,8 @@ interface SettingsPanelProps {
   onAiImageQualityChange: (quality: AiImageQuality) => void;
   aiApiEndpoint: string;
   onAiApiEndpointChange: (endpoint: string) => void;
+  aiDimensionsMode: AiDimensionsMode;
+  onAiDimensionsModeChange: (mode: AiDimensionsMode) => void;
   isFullscreenActive: boolean;
   onToggleFullscreen: () => void;
   currentCanvasWidth: number;
@@ -19,13 +21,26 @@ interface SettingsPanelProps {
 }
 
 const CANVAS_SIZE_OPTIONS = [
-  { label: '1000 x 1000 px', width: 1000, height: 1000 },
+  { label: '1024 x 1536 px', width: 1024, height: 1536 },
+  { label: '1024 x 1024 px', width: 1024, height: 1024 },
   { label: '1200 x 1200 px', width: 1200, height: 1200 },
   { label: '1600 x 1600 px', width: 1600, height: 1600 },
   { label: '2000 x 2000 px', width: 2000, height: 2000 },
   { label: '4000 x 4000 px', width: 4000, height: 4000 },
 ];
 
+const AI_API_OPTIONS = [
+    {
+        label: 'Pollinations AI',
+        value: 'https://rpfor.deno.dev/proxy?url=https://image.pollinations.ai/prompt/{prompt}?nologo=true&model=gptimage&image={imgurl.url}&quality={quality}{size_params}'
+    },
+    {
+        label: 'Gemini Simple Get',
+        value: 'https://geminisimpleget.deno.dev/prompt/{prompt}?image={imgurl.url}'
+    }
+];
+
+
 const SettingsPanel: React.FC<SettingsPanelProps> = ({
   isOpen,
   onClose,
@@ -35,6 +50,8 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
   onAiImageQualityChange,
   aiApiEndpoint,
   onAiApiEndpointChange,
+  aiDimensionsMode,
+  onAiDimensionsModeChange,
   isFullscreenActive,
   onToggleFullscreen,
   currentCanvasWidth,
@@ -157,26 +174,50 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
           <h3 className="text-md font-medium text-slate-700 mb-2">AI Image Generation</h3>
           
           <div className="bg-slate-50 p-3 rounded-md border border-slate-200 mb-4">
-            <label htmlFor="aiApiEndpointInput" className="block text-sm text-slate-600 mb-1">
-              API Endpoint URL
+            <label htmlFor="aiApiEndpointSelect" className="block text-sm text-slate-600 mb-1">
+              API Endpoint
             </label>
-            <input
-              type="text"
-              id="aiApiEndpointInput"
-              value={aiApiEndpoint}
-              onChange={(e) => onAiApiEndpointChange(e.target.value)}
-              className="w-full p-2 border border-slate-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
-              placeholder="Enter AI API URL"
-              aria-describedby="ai-api-description"
-            />
+            <select
+                id="aiApiEndpointSelect"
+                value={aiApiEndpoint}
+                onChange={(e) => onAiApiEndpointChange(e.target.value)}
+                className="w-full p-2 border border-slate-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
+                aria-describedby="ai-api-description"
+            >
+                {AI_API_OPTIONS.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
             <p id="ai-api-description" className="text-xs text-slate-500 mt-1">
-              Use <code className="bg-slate-200 px-1 rounded">{'{prompt}'}</code> for text prompt and <code className="bg-slate-200 px-1 rounded">{'{imgurl.url}'}</code> for image URL.
+              Select an API for image generation. Placeholders are filled automatically.
+            </p>
+          </div>
+          
+          <div className="bg-slate-50 p-3 rounded-md border border-slate-200 mb-4">
+            <label htmlFor="aiDimensionsModeSelect" className="block text-sm text-slate-600 mb-1">
+                AI Image Dimensions
+            </label>
+            <select
+                id="aiDimensionsModeSelect"
+                value={aiDimensionsMode}
+                onChange={(e) => onAiDimensionsModeChange(e.target.value as AiDimensionsMode)}
+                className="w-full p-2 border border-slate-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
+                aria-describedby="ai-dimensions-description"
+            >
+                <option value="api_default">API Default (no size)</option>
+                <option value="match_canvas">Match Canvas Size</option>
+                <option value="fixed_1024">Fixed 1024x1024</option>
+            </select>
+            <p id="ai-dimensions-description" className="text-xs text-slate-500 mt-1">
+                Controls `width` & `height` params for APIs that support them (e.g., Pollinations AI).
             </p>
           </div>
 
           <div className="bg-slate-50 p-3 rounded-md border border-slate-200">
             <label htmlFor="aiImageQualitySelect" className="block text-sm text-slate-600 mb-1">
-              Image Quality (Pollinations API)
+              Image Quality
             </label>
             <select
               id="aiImageQualitySelect"
@@ -192,7 +233,7 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
               ))}
             </select>
             <p id="ai-quality-description" className="text-xs text-slate-500 mt-1">
-              This quality setting primarily applies to Pollinations-like APIs. Custom endpoints must manage their own quality parameters if needed.
+              Used for APIs that support a 'quality' parameter (e.g., Pollinations AI).
             </p>
           </div>
         </div>

constants.ts

@@ -4,6 +4,6 @@ export const CANVAS_AUTOSAVE_KEY = 'autosavedCanvas';
 export const MAX_HISTORY_STEPS = 100;
 export const DEFAULT_PEN_COLOR = '#000000';
 export const DEFAULT_PEN_SIZE = 5;
-export const DEFAULT_CANVAS_WIDTH = 1600;
-export const DEFAULT_CANVAS_HEIGHT = 1600;
-export const DEFAULT_AI_API_ENDPOINT = 'https://geminisimpleget.deno.dev/prompt/{prompt}?image={imgurl.url}';
+export const DEFAULT_CANVAS_WIDTH = 1024;
+export const DEFAULT_CANVAS_HEIGHT = 1536;
+export const DEFAULT_AI_API_ENDPOINT = 'https://rpfor.deno.dev/proxy?url=https://image.pollinations.ai/prompt/{prompt}?nologo=true&model=gptimage&image={imgurl.url}&quality={quality}{size_params}';

hooks/useAiFeatures.ts

@@ -7,6 +7,7 @@ const SHARE_API_URL = 'https://sharefile.suisuy.eu.org';
 const MAX_UPLOAD_SIZE_BYTES = 50 * 1024 * 1024; // 50MB
 
 export type AiImageQuality = 'low' | 'medium' | 'hd';
+export type AiDimensionsMode = 'api_default' | 'match_canvas' | 'fixed_1024';
 
 interface AiFeaturesHook {
   isMagicUploading: boolean;
@@ -28,6 +29,7 @@ interface UseAiFeaturesProps {
   setZoomLevel: (zoom: number) => void; 
   aiImageQuality: AiImageQuality;
   aiApiEndpoint: string;
+  aiDimensionsMode: AiDimensionsMode;
   currentCanvasWidth: number; 
   currentCanvasHeight: number; 
 }
@@ -39,6 +41,7 @@ export const useAiFeatures = ({
   setZoomLevel, 
   aiImageQuality,
   aiApiEndpoint,
+  aiDimensionsMode,
   currentCanvasWidth, 
   currentCanvasHeight, 
 }: UseAiFeaturesProps): AiFeaturesHook => {
@@ -175,26 +178,19 @@ export const useAiFeatures = ({
     let finalApiUrl = aiApiEndpoint
         .replace('{prompt}', encodedPrompt)
         .replace('{imgurl.url}', encodedImageUrl);
-
-    if (aiApiEndpoint.includes('pollinations.ai')) {
-        const pollinationsParams = new URLSearchParams({
-            model: 'gptimage', 
-            private: 'true',
-            quality: aiImageQuality,
-            safe: 'false',
-            transparent: 'false',
-            width: '1024', 
-            height: '1024', 
-            seed: Date.now().toString(),
-        });
         
-        if (finalApiUrl.endsWith('/')) { 
-            finalApiUrl = `${finalApiUrl}${encodedPrompt}?image=${encodedImageUrl}&${pollinationsParams.toString()}`;
-        } else if (finalApiUrl.includes('?')) { 
-            finalApiUrl = `${finalApiUrl}&image=${encodedImageUrl}&${pollinationsParams.toString()}`;
-        } else { 
-             finalApiUrl = `${finalApiUrl}?image=${encodedImageUrl}&${pollinationsParams.toString()}`;
+    if (finalApiUrl.includes('{quality}')) {
+        finalApiUrl = finalApiUrl.replace('{quality}', aiImageQuality);
+    }
+
+    if (finalApiUrl.includes('{size_params}')) {
+        let sizeParamsString = '';
+        if (aiDimensionsMode === 'match_canvas') {
+            sizeParamsString = `&width=${currentCanvasWidth}&height=${currentCanvasHeight}`;
+        } else if (aiDimensionsMode === 'fixed_1024') {
+            sizeParamsString = `&width=1024&height=1024`;
         }
+        finalApiUrl = finalApiUrl.replace('{size_params}', sizeParamsString);
     }
     
     try {
@@ -235,7 +231,7 @@ export const useAiFeatures = ({
       setAiEditError(error.message || 'An unknown error occurred during AI image generation.');
       setIsGeneratingAiImage(false);
     }
-  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint]);
+  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint, aiDimensionsMode, currentCanvasWidth, currentCanvasHeight]);
   
 
   const handleCancelAiEdit = () => {

metadata.json

@@ -1,5 +1,5 @@
 {
-  "name": "xpaintai",
+  "name": "paintai",
   "description": "A simple web-based paint application with features like pen customization, undo/redo, image loading/exporting, and autosave to IndexedDB.",
   "requestFramePermissions": [],
   "prompt": ""

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "xpaintai",
+  "name": "paintai",
   "private": true,
   "version": "0.0.0",
   "type": "module",