Update src/App.tsx

src/App.tsx

@@ -14,6 +14,7 @@ function App() {
   const [generatedResult, setGeneratedResult] = useState<string | null>(null);
   const [isGenerating, setIsGenerating] = useState(false);
   const [generationError, setGenerationError] = useState<string | null>(null);
+  const [retryAfter, setRetryAfter] = useState<number | null>(null);
 
   const handleSelectProduct = (product: Product) => {
     setSelectedProduct(product);
@@ -26,13 +27,12 @@ function App() {
     setUserImage(null);
     setGeneratedResult(null);
     setGenerationError(null);
+    setRetryAfter(null);
   };
 
   const handleCapture = async (imageSrc: string) => {
     setUserImage(imageSrc);
     setCurrentView(AppView.RESULT);
-    
-    // Automatically trigger generation
     if (selectedProduct) {
         await processTryOn(imageSrc, selectedProduct);
     }
@@ -41,13 +41,21 @@ function App() {
   const processTryOn = async (imageSrc: string, product: Product) => {
     setIsGenerating(true);
     setGenerationError(null);
+    setRetryAfter(null);
+    
     try {
         const resultImage = await generateTryOn(imageSrc, product);
         setGeneratedResult(resultImage);
     } catch (error: any) {
         console.error("Try-on failed", error);
-        // Show the actual error message which helps with debugging (e.g. "API Key missing")
-        setGenerationError(error.message || "Sorry, we couldn't generate the try-on image.");
+        
+        // Extract wait time if it's a rate limit error
+        const waitMatch = error.message?.match(/retry in ([\d\.]+)s/);
+        if (waitMatch) {
+            setRetryAfter(Math.ceil(parseFloat(waitMatch[1])));
+        } else {
+            setGenerationError(error.message || "Sorry, we couldn't generate the try-on image.");
+        }
     } finally {
         setIsGenerating(false);
     }
@@ -57,11 +65,11 @@ function App() {
     setCurrentView(AppView.CAMERA);
     setGeneratedResult(null);
     setGenerationError(null);
+    setRetryAfter(null);
   };
 
   return (
     <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
-      
       {currentView === AppView.CATALOG && (
         <>
           <Navigation showBack={false} />
@@ -101,7 +109,9 @@ function App() {
              generatedImage={generatedResult}
              loading={isGenerating}
              error={generationError}
+             retryAfter={retryAfter}
              onRetake={handleRetake}
+             onRetry={() => processTryOn(userImage, selectedProduct)}
            />
         </>
       )}