Rename project back to xpaintai in package.json and metadata.json; add QuestionMarkIcon component; enhance AI features with ask functionality in useAiFeatures hook and App component

App.tsx

@@ -75,10 +75,14 @@ const App: React.FC = () => {
     isGeneratingAiImage,
     sharedImageUrlForAi,
     aiEditError,
+    isAskingAi,
+    askUrl,
     handleMagicUpload,
     handleGenerateAiImage,
+    handleAskAi,
     handleCancelAiEdit,
     setAiPrompt,
+    clearAskUrl,
   } = useAiFeatures({
     currentDataURL,
     showToast,
@@ -90,6 +94,14 @@ const App: React.FC = () => {
     currentCanvasWidth: canvasWidth, // Pass current canvas dimensions
     currentCanvasHeight: canvasHeight, // Pass current canvas dimensions
   });
+  
+  const handlePromptChange = (newPrompt: string) => {
+    setAiPrompt(newPrompt);
+    // Clear the previous "Ask" response when the user types a new prompt
+    if (askUrl !== null) {
+      clearAskUrl();
+    }
+  };
 
   // Simple UI Toggles
   const handleToggleSettingsPanel = () => setShowSettingsPanel(prev => !prev);
@@ -170,11 +182,14 @@ const App: React.FC = () => {
           isOpen={showAiEditModal}
           onClose={handleCancelAiEdit}
           onGenerate={handleGenerateAiImage}
+          onAsk={handleAskAi}
           imageUrl={sharedImageUrlForAi}
           prompt={aiPrompt}
-          onPromptChange={setAiPrompt}
+          onPromptChange={handlePromptChange}
           isLoading={isGeneratingAiImage}
+          isAsking={isAskingAi}
           error={aiEditError}
+          askUrl={askUrl}
         />
       )}
 
@@ -218,7 +233,7 @@ const App: React.FC = () => {
         />
       )}
 
-      <div className="fixed top-4 right-4 z-[1200] space-y-2">
+      <div className="fixed bottom-4 right-4 z-[1200] flex flex-col-reverse gap-2">
         {toasts.map(toast => (
           <div
             key={toast.id}
@@ -238,4 +253,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

components/AiEditModal.tsx

@@ -1,44 +1,60 @@
-import React from 'react';
-import { MagicSparkleIcon, CloseIcon } from './icons';
+import React, { useEffect, useRef } from 'react';
+import { MagicSparkleIcon, CloseIcon, QuestionMarkIcon } from './icons';
 
 interface AiEditModalProps {
   isOpen: boolean;
   onClose: () => void;
   onGenerate: () => void;
+  onAsk: () => void;
   imageUrl: string;
   prompt: string;
   onPromptChange: (newPrompt: string) => void;
   isLoading: boolean;
+  isAsking: boolean;
   error: string | null;
+  askUrl: string | null;
 }
 
 const AiEditModal: React.FC<AiEditModalProps> = ({
   isOpen,
   onClose,
   onGenerate,
+  onAsk,
   imageUrl,
   prompt,
   onPromptChange,
   isLoading,
+  isAsking,
   error,
+  askUrl,
 }) => {
+  const iframeContainerRef = useRef<HTMLDivElement>(null);
+  
+  useEffect(() => {
+    if (askUrl && iframeContainerRef.current) {
+      iframeContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [askUrl]);
+  
   if (!isOpen) return null;
+  
+  const isAnyLoading = isLoading || isAsking;
 
   return (
     <div 
-        className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex justify-center items-center z-[1000] p-4"
+        className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex justify-center items-start z-[1000] p-4 pt-16"
         aria-modal="true"
         role="dialog"
         aria-labelledby="ai-edit-modal-title"
     >
-      <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-lg transform transition-all">
+      <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-lg transform transition-all max-h-[calc(100vh-5rem)] overflow-y-auto">
         <div className="flex justify-between items-center mb-4">
-          <h2 id="ai-edit-modal-title" className="text-xl font-semibold text-slate-700">Edit Image with AI</h2>
+          <h2 id="ai-edit-modal-title" className="text-xl font-semibold text-slate-700">Edit or Ask about Image with AI</h2>
           <button
             onClick={onClose}
             className="text-slate-400 hover:text-slate-600 transition-colors"
             aria-label="Close AI edit modal"
-            disabled={isLoading}
+            disabled={isAnyLoading}
           >
             <CloseIcon className="w-6 h-6" />
           </button>
@@ -49,22 +65,21 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
           <img 
             src={imageUrl} 
             alt="Uploaded image preview" 
-            className="max-w-full h-auto max-h-48 rounded border border-slate-300 object-contain mx-auto" 
+            className="max-w-full w-auto h-48 rounded border border-slate-300 object-contain mx-auto" 
           />
         </div>
 
         <div className="mb-4">
           <label htmlFor="aiPrompt" className="block text-sm font-medium text-slate-700 mb-1">
-            Describe what you want to change:
+            Describe what you want to change, or ask a question:
           </label>
           <textarea
             id="aiPrompt"
             value={prompt}
             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-sm"
-            disabled={isLoading}
+            placeholder="e.g., 'make the cat wear a party hat' or 'what is in this image?'"
+            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 h-[40vh]"
+            disabled={isAnyLoading}
             aria-describedby={error ? "ai-edit-error" : undefined}
           />
         </div>
@@ -76,17 +91,30 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
           </div>
         )}
 
-        <div className="flex flex-col sm:flex-row justify-end gap-3">
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            className="px-4 py-2 bg-slate-200 text-slate-700 rounded-md hover:bg-slate-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
+        <div className="flex justify-between items-center gap-3">
+           <button
+            onClick={onAsk}
+            disabled={isAnyLoading || !prompt.trim()}
+            className="px-4 py-2 bg-sky-600 text-white rounded-md hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium flex items-center justify-center gap-2"
           >
-            Cancel
+            {isAsking ? (
+              <>
+                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Asking...
+              </>
+            ) : (
+              <>
+                <QuestionMarkIcon className="w-4 h-4 mr-1" />
+                Ask
+              </>
+            )}
           </button>
           <button
             onClick={onGenerate}
-            disabled={isLoading || !prompt.trim()}
+            disabled={isAnyLoading || !prompt.trim()}
             className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium flex items-center justify-center gap-2"
           >
             {isLoading ? (
@@ -105,6 +133,16 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
             )}
           </button>
         </div>
+
+        {askUrl && (
+          <div ref={iframeContainerRef} className="mt-4 pt-2">
+            <iframe
+              src={askUrl}
+              title="AI Response"
+              className="w-full h-[70vh] border-0 rounded-md bg-slate-50"
+            />
+          </div>
+        )}
       </div>
     </div>
   );

components/icons.tsx

@@ -71,4 +71,10 @@ export const FullscreenExitIcon: React.FC<{className?: string}> = ({className})
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5M15 15l5.25 5.25" />
   </svg>
-);
+);
+
+export const QuestionMarkIcon: React.FC<{className?: string}> = ({className}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+    </svg>
+);

hooks/useAiFeatures.ts

@@ -4,6 +4,7 @@ import { dataURLtoBlob, calculateSHA256, copyToClipboard } from '../utils/canvas
 import { CanvasHistoryHook } from './useCanvasHistory';
 
 const SHARE_API_URL = 'https://sharefile.suisuy.eu.org';
+const ASK_API_URL = 'https://getai.deno.dev/';
 const MAX_UPLOAD_SIZE_BYTES = 50 * 1024 * 1024; // 50MB
 
 export type AiImageQuality = 'low' | 'medium' | 'hd';
@@ -16,10 +17,14 @@ interface AiFeaturesHook {
   isGeneratingAiImage: boolean;
   sharedImageUrlForAi: string | null;
   aiEditError: string | null;
+  isAskingAi: boolean;
+  askUrl: string | null;
   handleMagicUpload: () => Promise<void>;
   handleGenerateAiImage: () => Promise<void>;
+  handleAskAi: () => Promise<void>;
   handleCancelAiEdit: () => void;
   setAiPrompt: React.Dispatch<React.SetStateAction<string>>;
+  clearAskUrl: () => void;
 }
 
 interface UseAiFeaturesProps {
@@ -51,6 +56,12 @@ export const useAiFeatures = ({
   const [isGeneratingAiImage, setIsGeneratingAiImage] = useState<boolean>(false);
   const [sharedImageUrlForAi, setSharedImageUrlForAi] = useState<string | null>(null);
   const [aiEditError, setAiEditError] = useState<string | null>(null);
+  const [isAskingAi, setIsAskingAi] = useState<boolean>(false);
+  const [askUrl, setAskUrl] = useState<string | null>(null);
+
+  const clearAskUrl = useCallback(() => {
+    setAskUrl(null);
+  }, []);
 
   const loadAiImageOntoCanvas = useCallback((aiImageDataUrl: string) => {
     const img = new Image();
@@ -153,7 +164,8 @@ export const useAiFeatures = ({
         setSharedImageUrlForAi(finalShareUrl);
         setShowAiEditModal(true); 
         setAiPrompt(''); 
-        setAiEditError(null); 
+        setAiEditError(null);
+        clearAskUrl();
 
     } catch (error: any) {
         console.error('Magic upload error:', error);
@@ -161,7 +173,7 @@ export const useAiFeatures = ({
     } finally {
         setIsMagicUploading(false); 
     }
-  }, [isMagicUploading, currentDataURL, showToast]);
+  }, [isMagicUploading, currentDataURL, showToast, clearAskUrl]);
 
   const handleGenerateAiImage = useCallback(async () => {
     if (!aiPrompt.trim() || !sharedImageUrlForAi) {
@@ -170,6 +182,7 @@ export const useAiFeatures = ({
     }
     setIsGeneratingAiImage(true);
     setAiEditError(null);
+    clearAskUrl();
     showToast('Generating AI image...', 'info');
 
     const encodedPrompt = encodeURIComponent(aiPrompt);
@@ -231,7 +244,30 @@ export const useAiFeatures = ({
       setAiEditError(error.message || 'An unknown error occurred during AI image generation.');
       setIsGeneratingAiImage(false);
     }
-  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint, aiDimensionsMode, currentCanvasWidth, currentCanvasHeight]);
+  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint, aiDimensionsMode, currentCanvasWidth, currentCanvasHeight, clearAskUrl]);
+
+  const handleAskAi = useCallback(async () => {
+    if (!aiPrompt.trim() || !sharedImageUrlForAi) {
+      setAiEditError('Please enter a question about the image.');
+      return;
+    }
+    setIsAskingAi(true);
+    setAiEditError(null);
+    setAskUrl(null); // Clear previous URL first
+
+    try {
+        const encodedPrompt = encodeURIComponent(aiPrompt);
+        const encodedImageUrl = encodeURIComponent(sharedImageUrlForAi);
+        const finalAskUrl = `${ASK_API_URL}?q=${encodedPrompt}&image=${encodedImageUrl}`;
+        setAskUrl(finalAskUrl);
+
+    } catch (error: any) {
+        console.error('AI ask error:', error);
+        setAiEditError(error.message || 'An unknown error occurred while asking AI.');
+    } finally {
+        setIsAskingAi(false);
+    }
+  }, [aiPrompt, sharedImageUrlForAi]);
   
 
   const handleCancelAiEdit = () => {
@@ -245,7 +281,8 @@ export const useAiFeatures = ({
     }
     setAiPrompt('');
     setAiEditError(null);
-    setSharedImageUrlForAi(null); 
+    setSharedImageUrlForAi(null);
+    clearAskUrl();
   };
 
   return {
@@ -255,9 +292,13 @@ export const useAiFeatures = ({
     isGeneratingAiImage,
     sharedImageUrlForAi,
     aiEditError,
+    isAskingAi,
+    askUrl,
     handleMagicUpload,
     handleGenerateAiImage,
+    handleAskAi,
     handleCancelAiEdit,
     setAiPrompt,
+    clearAskUrl,
   };
-};
+};

hooks/useCanvasFileUtils.ts

@@ -81,7 +81,6 @@ export const useCanvasFileUtils = ({
               const compositeDataURL = tempCanvas.toDataURL('image/png');
               
               updateCanvasState(compositeDataURL, finalCanvasWidth, finalCanvasHeight);
-              setZoomLevel(0.5);
               showToast('Image loaded successfully.', 'success');
             }
           };
@@ -93,7 +92,7 @@ export const useCanvasFileUtils = ({
       reader.readAsDataURL(file);
       if(event.target) event.target.value = ''; 
     }
-  }, [canvasWidth, canvasHeight, updateCanvasState, showToast, setZoomLevel]);
+  }, [canvasWidth, canvasHeight, updateCanvasState, showToast]);
   
   const handleExportImage = useCallback(() => {
     if (currentDataURL) {
@@ -110,18 +109,10 @@ export const useCanvasFileUtils = ({
   }, [currentDataURL, showToast]);
 
   const handleClearCanvas = useCallback(() => {
-    requestConfirmation(
-      "Clear Canvas",
-      "Are you sure you want to clear the entire canvas? This action cannot be undone from history.",
-      () => {
-        const blankCanvas = getBlankCanvasDataURL(canvasWidth, canvasHeight);
-        updateCanvasState(blankCanvas, canvasWidth, canvasHeight);
-        setZoomLevel(0.5);
-        showToast("Canvas cleared.", "info");
-      },
-      { isDestructive: true }
-    );
-  }, [requestConfirmation, canvasWidth, canvasHeight, updateCanvasState, setZoomLevel, showToast]);
+    const blankCanvas = getBlankCanvasDataURL(canvasWidth, canvasHeight);
+    updateCanvasState(blankCanvas, canvasWidth, canvasHeight);
+    showToast("Canvas cleared.", "info");
+  }, [canvasWidth, canvasHeight, updateCanvasState, showToast]);
 
   const handleCanvasSizeChange = useCallback((newWidth: number, newHeight: number) => {
     if (newWidth === canvasWidth && newHeight === canvasHeight) {
@@ -141,4 +132,4 @@ export const useCanvasFileUtils = ({
   }, [canvasWidth, canvasHeight, requestConfirmation, updateCanvasState, setZoomLevel, showToast]);
 
   return { handleLoadImageFile, handleExportImage, handleClearCanvas, handleCanvasSizeChange };
-};
+};

metadata.json

@@ -1,5 +1,5 @@
 {
-  "name": "paintai",
+  "name": "xpaintai",
   "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": "paintai",
+  "name": "xpaintai",
   "private": true,
   "version": "0.0.0",
   "type": "module",