added error modal

components/ErrorModal.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { X } from 'lucide-react';
+import { Github } from 'lucide-react';
+
+const ErrorModal = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Semi-opaque blur background */}
+      <div 
+        className="absolute inset-0 bg-gray-800/30 backdrop-blur-sm"
+        onClick={onClose}
+        onKeyDown={(e) => e.key === 'Escape' && onClose()}
+        role="button"
+        tabIndex={0}
+      />
+      
+      {/* Modal card */}
+      <div className="relative bg-white rounded-2xl p-8 shadow-lg border border-gray-200 max-w-lg mx-4 z-10">
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          <X size={24} />
+        </button>
+
+        <h2 className="text-xl font-bold text-gray-900 mb-4">
+          This space is very popular right now...
+        </h2>
+        
+        <p className="text-gray-600 mb-4">
+          Due to high demand, we're not able to process requests right now. Want to run this locally? Get the code and host it yourself!
+        </p>
+
+        <p className="text-gray-600 mb-8">
+          You can get your own API key from{' '}
+          <a 
+            href="https://ai.google.dev" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-blue-600 hover:text-blue-800 underline"
+          >
+            ai.google.dev
+          </a>
+          {' '}to start using this right away.
+        </p>
+
+        <div className="flex gap-4 justify-center">
+          <a
+            href="https://github.com/googlecreativelab/gemini-demos/tree/main/image-to-code"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
+          >
+            <Github size={20} />
+            <span>Get the code on GitHub</span>
+          </a>
+          
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorModal; 

pages/index.js

@@ -20,6 +20,7 @@ import { ChevronDown, Image, Upload, Settings, Send, History, ArrowRight, Pen, L
 import Head from "next/head";
 import CodePreview from "../components/CodePreview";
 import Header from '../components/Header';
+import ErrorModal from '../components/ErrorModal';
 
 const SAMPLE_IMAGES = [
   'beeripple.jpeg',
@@ -36,23 +37,28 @@ const SAMPLE_IMAGES = [
 
 // Helper function to generate code from image
 async function generateCodeFromImage(imageBase64, prompt, userInput) {
-  const response = await fetch('/api/hello', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      imageBase64,
-      prompt,
-      userInput
-    })
-  });
+  try {
+    const response = await fetch('/api/hello', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        imageBase64,
+        prompt,
+        userInput
+      })
+    });
+
+    if (!response.ok) {
+      return { error: true, message: 'Failed to generate code' };
+    }
 
-  if (!response.ok) {
-    throw new Error('Failed to generate code');
+    const data = await response.json();
+    return { error: false, ...data };
+  } catch (error) {
+    return { error: true, message: error.message || 'Failed to generate code' };
   }
-
-  return response.json();
 }
 
 export default function Home() {
@@ -64,6 +70,7 @@ export default function Home() {
   const [concurrentRequests, setConcurrentRequests] = useState(5);
   const [showPrompt, setShowPrompt] = useState(false);
   const [prompt, setPrompt] = useState("");
+  const [showErrorModal, setShowErrorModal] = useState(false);
 
   // Load prompt from localStorage on initial render
   useEffect(() => {
@@ -181,12 +188,20 @@ export default function Home() {
     setLoading(true);
     setHasStartedGenerating(true);
     setOutputs([]);
+    
     try {
       const requests = Array(concurrentRequests)
         .fill()
         .map(() => generateCodeFromImage(imageBase64, prompt, userInput));
       
       const results = await Promise.all(requests);
+      
+      // Check if any requests resulted in an error
+      if (results.some(result => result.error)) {
+        setShowErrorModal(true);
+        return;
+      }
+
       setOutputs(results.map((result, index) => ({
         id: index + 1,
         code: result.code,
@@ -194,6 +209,7 @@ export default function Home() {
       })));
     } catch (error) {
       console.error("Error generating code:", error);
+      setShowErrorModal(true);
     } finally {
       setLoading(false);
     }
@@ -277,6 +293,10 @@ export default function Home() {
       </Head>
       <div className="h-screen max-h-screen bg-white flex items-center justify-center overflow-y-hidden tracking-[-0.005em]">
         <Header />
+        <ErrorModal 
+          isOpen={showErrorModal} 
+          onClose={() => setShowErrorModal(false)} 
+        />
 
         <div className="w-full h-full max-h-full overflow-hidden bg-white">
           <div className={`flex flex-col md:flex-row gap-0 max-w-6xl mx-auto py-0 h-full transition-all duration-500 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
@@ -410,7 +430,7 @@ export default function Home() {
                 {loading ? (
                   // Loading skeletons for code previews
                   Array(concurrentRequests).fill().map((_, index) => (
-                    <div key={`skeleton-${index}`} className="mb-4 p-6 rounded-3xl bg-gray-100 animate-pulse">
+                    <div key={`skeleton-preview-${Date.now()}-${index}`} className="mb-4 p-6 rounded-3xl bg-gray-100 animate-pulse">
                       <div className="w-full h-[500px] bg-gray-200 rounded-lg mb-4" />
                       <div className="flex justify-between items-center">
                         <div className="h-10 w-32 bg-gray-200 rounded-full" />