Add generated image URL handling in AiEditModal and update useAiFeatures hook; improve prompt change logic

App.tsx

@@ -82,12 +82,13 @@ const App: React.FC = () => {
     aiEditError,
     isAskingAi,
     askUrl,
+    generatedImageUrl,
     handleMagicUpload,
     handleGenerateAiImage,
     handleAskAi,
     handleCancelAiEdit,
     setAiPrompt,
-    clearAskUrl,
+    clearAiOutputs,
   } = useAiFeatures({
     currentDataURL,
     showToast,
@@ -104,8 +105,8 @@ const App: React.FC = () => {
   const handlePromptChange = (newPrompt: string) => {
     setAiPrompt(newPrompt);
     // Clear the previous "Ask" response when the user types a new prompt
-    if (askUrl !== null) {
-      clearAskUrl();
+    if (askUrl !== null || generatedImageUrl !== null) {
+      clearAiOutputs();
     }
   };
 
@@ -198,6 +199,7 @@ const App: React.FC = () => {
           isAsking={isAskingAi}
           error={aiEditError}
           askUrl={askUrl}
+          generatedImageUrl={generatedImageUrl}
           t={t}
         />
       )}
@@ -264,4 +266,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

components/AiEditModal.tsx

@@ -14,6 +14,7 @@ interface AiEditModalProps {
   isAsking: boolean;
   error: string | null;
   askUrl: string | null;
+  generatedImageUrl: string | null;
   t: TFunction;
 }
 
@@ -29,6 +30,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
   isAsking,
   error,
   askUrl,
+  generatedImageUrl,
   t,
 }) => {
   const iframeContainerRef = useRef<HTMLDivElement>(null);
@@ -87,7 +89,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
         </div>
 
         {error && (
-          <div id="ai-edit-error" className="mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-md text-sm" role="alert">
+          <div id="ai-edit-error" className="mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-md text-sm overflow-y-auto max-h-32" role="alert">
             <p className="font-semibold">{t('errorPrefix')}</p>
             <p>{error}</p>
           </div>
@@ -136,6 +138,20 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
           </button>
         </div>
 
+        {generatedImageUrl && (
+          <div className="mt-4 p-3 bg-slate-50 border border-slate-200 rounded-md text-sm">
+            <p className="text-slate-600 font-medium">{t('aiGeneratedImageURLMessage')}</p>
+            <a
+              href={generatedImageUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-800 break-all underline"
+            >
+              {generatedImageUrl}
+            </a>
+          </div>
+        )}
+
         {askUrl && (
           <div ref={iframeContainerRef} className="mt-4 pt-2">
             <iframe
@@ -150,4 +166,4 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
   );
 };
 
-export default AiEditModal;
+export default AiEditModal;

components/CanvasComponent.tsx

@@ -202,4 +202,4 @@ const CanvasComponent: React.FC<CanvasComponentProps> = ({
   );
 };
 
-export default CanvasComponent;
+export default CanvasComponent;

hooks/useAiFeatures.ts

@@ -20,12 +20,13 @@ interface AiFeaturesHook {
   aiEditError: string | null;
   isAskingAi: boolean;
   askUrl: string | null;
+  generatedImageUrl: string | null;
   handleMagicUpload: () => Promise<void>;
   handleGenerateAiImage: () => Promise<void>;
   handleAskAi: () => Promise<void>;
   handleCancelAiEdit: () => void;
   setAiPrompt: React.Dispatch<React.SetStateAction<string>>;
-  clearAskUrl: () => void;
+  clearAiOutputs: () => void;
 }
 
 interface UseAiFeaturesProps {
@@ -61,9 +62,11 @@ export const useAiFeatures = ({
   const [aiEditError, setAiEditError] = useState<string | null>(null);
   const [isAskingAi, setIsAskingAi] = useState<boolean>(false);
   const [askUrl, setAskUrl] = useState<string | null>(null);
+  const [generatedImageUrl, setGeneratedImageUrl] = useState<string | null>(null);
 
-  const clearAskUrl = useCallback(() => {
+  const clearAiOutputs = useCallback(() => {
     setAskUrl(null);
+    setGeneratedImageUrl(null);
   }, []);
 
   const loadAiImageOntoCanvas = useCallback((aiImageDataUrl: string) => {
@@ -168,7 +171,7 @@ export const useAiFeatures = ({
         setShowAiEditModal(true); 
         setAiPrompt(''); 
         setAiEditError(null);
-        clearAskUrl();
+        clearAiOutputs();
 
     } catch (error: any) {
         console.error('Magic upload error:', error);
@@ -176,7 +179,7 @@ export const useAiFeatures = ({
     } finally {
         setIsMagicUploading(false); 
     }
-  }, [isMagicUploading, currentDataURL, showToast, clearAskUrl, t]);
+  }, [isMagicUploading, currentDataURL, showToast, clearAiOutputs, t]);
 
   const handleGenerateAiImage = useCallback(async () => {
     if (!aiPrompt.trim() || !sharedImageUrlForAi) {
@@ -185,7 +188,7 @@ export const useAiFeatures = ({
     }
     setIsGeneratingAiImage(true);
     setAiEditError(null);
-    clearAskUrl();
+    clearAiOutputs();
     showToast(t('generatingAiImage'), 'info');
 
     const encodedPrompt = encodeURIComponent(aiPrompt);
@@ -208,6 +211,8 @@ export const useAiFeatures = ({
         }
         finalApiUrl = finalApiUrl.replace('{size_params}', sizeParamsString);
     }
+
+    setGeneratedImageUrl(finalApiUrl);
     
     try {
       const response = await fetch(finalApiUrl);
@@ -247,7 +252,7 @@ export const useAiFeatures = ({
       setAiEditError(error.message || t('unknownAiError'));
       setIsGeneratingAiImage(false);
     }
-  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint, aiDimensionsMode, currentCanvasWidth, currentCanvasHeight, clearAskUrl, t]);
+  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint, aiDimensionsMode, currentCanvasWidth, currentCanvasHeight, clearAiOutputs, t]);
 
   const handleAskAi = useCallback(async () => {
     if (!aiPrompt.trim() || !sharedImageUrlForAi) {
@@ -256,7 +261,7 @@ export const useAiFeatures = ({
     }
     setIsAskingAi(true);
     setAiEditError(null);
-    setAskUrl(null); // Clear previous URL first
+    clearAiOutputs();
 
     try {
         const encodedPrompt = encodeURIComponent(aiPrompt);
@@ -270,7 +275,7 @@ export const useAiFeatures = ({
     } finally {
         setIsAskingAi(false);
     }
-  }, [aiPrompt, sharedImageUrlForAi, t]);
+  }, [aiPrompt, sharedImageUrlForAi, t, clearAiOutputs]);
   
 
   const handleCancelAiEdit = () => {
@@ -285,7 +290,7 @@ export const useAiFeatures = ({
     setAiPrompt('');
     setAiEditError(null);
     setSharedImageUrlForAi(null);
-    clearAskUrl();
+    clearAiOutputs();
   };
 
   return {
@@ -297,11 +302,12 @@ export const useAiFeatures = ({
     aiEditError,
     isAskingAi,
     askUrl,
+    generatedImageUrl,
     handleMagicUpload,
     handleGenerateAiImage,
     handleAskAi,
     handleCancelAiEdit,
     setAiPrompt,
-    clearAskUrl,
+    clearAiOutputs,
   };
 };

translations.ts

@@ -34,6 +34,7 @@ const translations = {
     aiAsking: 'Asking...',
     aiGenerateImage: 'Generate Image',
     aiGenerating: 'Generating...',
+    aiGeneratedImageURLMessage: 'You can get the image via link:',
     
     // Settings Panel
     settingsTitle: 'Application Settings',
@@ -148,6 +149,7 @@ const translations = {
     aiAsking: '提问中...',
     aiGenerateImage: '生成图片',
     aiGenerating: '生成中...',
+    aiGeneratedImageURLMessage: '您可以通过以下链接获取图片：',
 
     // Settings Panel
     settingsTitle: '应用设置',
@@ -257,4 +259,4 @@ export const getTranslator = () => {
     }
     return text;
   };
-};
+};