files [initial-commit]

Dockerfile

@@ -0,0 +1,33 @@
+# Stage 1: Build the frontend, and install server dependencies
+FROM node:22 AS builder
+
+WORKDIR /app
+
+# Copy all files from the current directory
+COPY . ./
+RUN echo "API_KEY=PLACEHOLDER" > ./.env
+RUN echo "GEMINI_API_KEY=PLACEHOLDER" >> ./.env
+
+# Install server dependencies
+WORKDIR /app/server
+RUN npm install
+
+# Install dependencies and build the frontend
+WORKDIR /app
+RUN mkdir dist
+RUN bash -c 'if [ -f package.json ]; then npm install && npm run build; fi'
+
+
+# Stage 2: Build the final server image
+FROM node:22
+
+WORKDIR /app
+
+#Copy server files
+COPY --from=builder /app/server .
+# Copy built frontend assets from the builder stage
+COPY --from=builder /app/dist ./dist
+
+EXPOSE 3000
+
+CMD ["node", "server.js"]

Home.tsx

@@ -0,0 +1,712 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* tslint:disable */
+import {
+  GoogleGenAI,
+  GenerateContentResponse,
+} from '@google/genai';
+import {
+  ArrowUp,
+  Brush,
+  Cpu,
+  Eraser,
+  Info,
+  LoaderCircle,
+  Moon,
+  Palette,
+  Redo2,
+  Sun,
+  Trash2,
+  Undo2,
+  X,
+} from 'lucide-react';
+import {useEffect, useRef, useState} from 'react';
+
+export default function Home() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const backgroundImageRef = useRef<HTMLImageElement | null>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [prompt, setPrompt] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
+  const [showInfoModal, setShowInfoModal] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [errorTitle, setErrorTitle] = useState('Failed to generate');
+
+  // Brush settings
+  const [brushSize, setBrushSize] = useState(5);
+  const [showBrushMenu, setShowBrushMenu] = useState(false);
+  const [brushColor, setBrushColor] = useState('#000000');
+  const [showColorMenu, setShowColorMenu] = useState(false);
+  const [isErasing, setIsErasing] = useState(false);
+
+  // Model settings
+  const [selectedModel, setSelectedModel] = useState('gemini-2.5-flash-image');
+  const [showModelMenu, setShowModelMenu] = useState(false);
+
+  // Theme settings
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // State for canvas history
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+
+  // Toggle Dark Mode
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  }, [isDarkMode]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  // When switching to canvas mode, initialize it and its history
+  useEffect(() => {
+    if (canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // If an image already exists from another mode, draw it.
+      if (generatedImage) {
+        const img = new window.Image();
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          // Save this as the initial state for this session
+          const dataUrl = canvas.toDataURL();
+          setHistory([dataUrl]);
+          setHistoryIndex(0);
+        };
+        img.src = generatedImage;
+      } else {
+        // Otherwise, save the blank state as initial
+        const dataUrl = canvas.toDataURL();
+        setHistory([dataUrl]);
+        setHistoryIndex(0);
+      }
+    }
+  }, []); // Rerun if the key is selected to init canvas
+
+  // Load background image when generatedImage changes
+  useEffect(() => {
+    if (generatedImage && canvasRef.current) {
+      const img = new window.Image();
+      img.onload = () => {
+        backgroundImageRef.current = img;
+        drawImageToCanvas();
+        // A small timeout to let the draw happen before saving
+        setTimeout(saveCanvasState, 50);
+      };
+      img.src = generatedImage;
+    }
+  }, [generatedImage]);
+
+  // Initialize canvas with white background
+  const initializeCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  };
+
+  // Draw the background image to the canvas
+  const drawImageToCanvas = () => {
+    if (!canvasRef.current || !backgroundImageRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(
+      backgroundImageRef.current,
+      0,
+      0,
+      canvas.width,
+      canvas.height,
+    );
+  };
+
+  // Canvas history functions
+  const saveCanvasState = () => {
+    if (!canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const dataUrl = canvas.toDataURL();
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(dataUrl);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  };
+
+  const restoreCanvasState = (index: number) => {
+    if (!canvasRef.current || !history[index]) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const dataUrl = history[index];
+    const img = new window.Image();
+    img.onload = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    };
+    img.src = dataUrl;
+  };
+
+  const handleUndo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      restoreCanvasState(newIndex);
+    }
+  };
+
+  const handleRedo = () => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      restoreCanvasState(newIndex);
+    }
+  };
+
+  // Get the correct coordinates based on canvas scaling
+  const getCoordinates = (e: any) => {
+    const canvas = canvasRef.current!;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+      x:
+        (e.nativeEvent.offsetX ||
+          e.nativeEvent.touches?.[0]?.clientX - rect.left) * scaleX,
+      y:
+        (e.nativeEvent.offsetY ||
+          e.nativeEvent.touches?.[0]?.clientY - rect.top) * scaleY,
+    };
+  };
+
+  const startDrawing = (e: any) => {
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext('2d')!;
+    const {x, y} = getCoordinates(e);
+    if (e.type === 'touchstart') {
+      e.preventDefault();
+    }
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    setIsDrawing(true);
+  };
+
+  const draw = (e: any) => {
+    if (!isDrawing) return;
+    if (e.type === 'touchmove') {
+      e.preventDefault();
+    }
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext('2d')!;
+    const {x, y} = getCoordinates(e);
+    ctx.lineWidth = brushSize;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = isErasing ? '#FFFFFF' : brushColor;
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  };
+
+  const stopDrawing = () => {
+    if (!isDrawing) return;
+    setIsDrawing(false);
+    saveCanvasState();
+  };
+
+  const handleClear = () => {
+    if (canvasRef.current) {
+      initializeCanvas();
+      const dataUrl = canvasRef.current.toDataURL();
+      setHistory([dataUrl]);
+      setHistoryIndex(0);
+    }
+    setGeneratedImage(null);
+    backgroundImageRef.current = null;
+    setPrompt('');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const cleanApiKey = apiKey.trim();
+
+    if (!cleanApiKey) {
+      setErrorTitle('API Key Required');
+      setErrorMessage(
+        'Please enter your Gemini API Key to continue the process.',
+      );
+      setShowErrorModal(true);
+      return;
+    }
+
+    setIsLoading(true);
+    setErrorMessage('');
+    setErrorTitle('Failed to generate');
+
+    try {
+      // Create a new GenAI instance right before the call
+      const ai = new GoogleGenAI({apiKey: cleanApiKey});
+
+      if (!canvasRef.current) return;
+      const canvas = canvasRef.current;
+      const imageB64 = canvas.toDataURL('image/png').split(',')[1];
+      const parts = [
+        {inlineData: {data: imageB64, mimeType: 'image/png'}},
+        {text: prompt},
+      ];
+
+      const response: GenerateContentResponse = await ai.models.generateContent({
+        model: selectedModel,
+        contents: [{parts}],
+        config: {
+          imageConfig: {
+            aspectRatio: '16:9',
+          },
+        },
+      });
+
+      let newImageData: string | null = null;
+      // Find the image part, do not assume it is the first part.
+      for (const part of response.candidates[0].content.parts) {
+        if (part.inlineData) {
+          newImageData = part.inlineData.data;
+          break;
+        }
+      }
+
+      if (newImageData) {
+        const imageUrl = `data:image/png;base64,${newImageData}`;
+        setGeneratedImage(imageUrl);
+      } else {
+        setErrorMessage(
+          'Failed to generate image from the response. Please try again.',
+        );
+        setShowErrorModal(true);
+      }
+    } catch (error: any) {
+      console.error('Error submitting:', error);
+      let message =
+        error.message ||
+        'An unexpected error occurred. Check the console for details.';
+      
+      // Robust 403 check
+      if (
+        error.status === 403 || 
+        error.code === 403 || 
+        message.includes('403') || 
+        message.includes('PERMISSION_DENIED')
+      ) {
+        setErrorTitle('Permission Denied');
+        message = selectedModel.includes('pro') 
+          ? 'The Gemini 3 Pro Image model requires a paid API key from a Google Cloud Project with billing enabled. Please switch to "Gemini 2.5 Flash" or provide a valid key.'
+          : 'The API key provided does not have permission to access the Gemini API. Please ensure your key is valid and has the necessary permissions.';
+      }
+
+      setErrorMessage(message);
+      setShowErrorModal(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const closeErrorModal = () => {
+    setShowErrorModal(false);
+  };
+
+  const closeInfoModal = () => {
+    setShowInfoModal(false);
+  };
+
+  const toggleBrushMenu = () => {
+    setShowBrushMenu(!showBrushMenu);
+    setShowColorMenu(false);
+    setShowModelMenu(false);
+  };
+
+  const toggleColorMenu = () => {
+    setShowColorMenu(!showColorMenu);
+    setShowBrushMenu(false);
+    setShowModelMenu(false);
+  };
+
+  const toggleModelMenu = () => {
+    setShowModelMenu(!showModelMenu);
+    setShowBrushMenu(false);
+    setShowColorMenu(false);
+  };
+
+  const toggleEraser = () => {
+    setIsErasing(!isErasing);
+    // If enabling eraser, close menus
+    if (!isErasing) {
+      setShowBrushMenu(false);
+      setShowColorMenu(false);
+      setShowModelMenu(false);
+    }
+  };
+
+  const presetColors = [
+    '#000000',
+    '#FFFFFF',
+    '#FF0000',
+    '#00FF00',
+    '#0000FF',
+    '#FFFF00',
+    '#00FFFF',
+    '#FF00FF',
+    '#808080',
+    '#A52A2A',
+  ];
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const preventTouchDefault = (e: TouchEvent) => {
+      if (isDrawing) {
+        e.preventDefault();
+      }
+    };
+
+    canvas.addEventListener('touchstart', preventTouchDefault, {
+      passive: false,
+    });
+    canvas.addEventListener('touchmove', preventTouchDefault, {
+      passive: false,
+    });
+
+    return () => {
+      canvas.removeEventListener('touchstart', preventTouchDefault);
+      canvas.removeEventListener('touchmove', preventTouchDefault);
+    };
+  }, [isDrawing]);
+
+  return (
+    <>
+      <div className="min-h-screen flex flex-col justify-start items-center p-4 pt-12">
+        <main className="container mx-auto max-w-5xl w-full">
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end mb-6 gap-4">
+            <div className="flex items-end gap-4">
+              <button
+                type="button"
+                onClick={() => setShowInfoModal(true)}
+                className="button-log">
+                <Info
+                  className="w-5 h-5"
+                  aria-label="Information"
+                />
+              </button>
+
+              {/* Brush Size Selector */}
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={toggleBrushMenu}
+                  className="button-log"
+                  title="Brush Size">
+                  <Brush className="w-5 h-5" aria-label="Brush Settings" />
+                </button>
+                {showBrushMenu && (
+                  <div className="absolute top-12 left-0 z-50 p-3 bg-[var(--bg-color)] border-2 border-[var(--main-color)] shadow-[4px_4px_var(--main-color)] rounded-[5px] flex flex-col gap-2 w-48">
+                    <label
+                      htmlFor="brush-size"
+                      className="text-sm font-bold flex justify-between">
+                      <span>Size</span>
+                      <span>{brushSize}px</span>
+                    </label>
+                    <input
+                      id="brush-size"
+                      type="range"
+                      min="1"
+                      max="50"
+                      value={brushSize}
+                      onChange={(e) => setBrushSize(Number(e.target.value))}
+                      className="w-full"
+                    />
+                    <div className="flex justify-center mt-2 h-12 items-center bg-white border border-black rounded shadow-sm">
+                      <div
+                        style={{
+                          width: `${brushSize}px`,
+                          height: `${brushSize}px`,
+                          backgroundColor: brushColor,
+                          borderRadius: '50%',
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Brush Color Selector */}
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={toggleColorMenu}
+                  className="button-log"
+                  title="Brush Color">
+                  <Palette
+                    className="w-5 h-5"
+                    style={{color: isErasing ? 'inherit' : brushColor}}
+                    aria-label="Brush Color"
+                  />
+                </button>
+                {showColorMenu && (
+                  <div className="absolute top-12 left-0 z-50 p-3 bg-[var(--bg-color)] border-2 border-[var(--main-color)] shadow-[4px_4px_var(--main-color)] rounded-[5px] flex flex-col gap-2 w-48">
+                    <label className="text-sm font-bold">Color</label>
+                    <div className="grid grid-cols-5 gap-2">
+                      {presetColors.map((color) => (
+                        <button
+                          key={color}
+                          onClick={() => {
+                            setBrushColor(color);
+                            setIsErasing(false);
+                            setShowColorMenu(false);
+                          }}
+                          className={`w-6 h-6 rounded-full border border-black shadow-sm ${
+                            brushColor === color && !isErasing ? 'ring-2 ring-offset-1 ring-black' : ''
+                          }`}
+                          style={{backgroundColor: color}}
+                          title={color}
+                        />
+                      ))}
+                    </div>
+                    <div className="flex items-center gap-2 mt-2 pt-2 border-t border-[var(--main-color)]">
+                      <span className="text-xs font-bold">Custom:</span>
+                      <input
+                        type="color"
+                        value={brushColor}
+                        onChange={(e) => {
+                          setBrushColor(e.target.value);
+                          setIsErasing(false);
+                        }}
+                        className="h-8 flex-1 cursor-pointer bg-transparent"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Model Selector */}
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={toggleModelMenu}
+                  className="button-log"
+                  title="Select Model">
+                  <Cpu className="w-5 h-5" aria-label="Select Model" />
+                </button>
+                {showModelMenu && (
+                  <div className="absolute top-12 left-0 z-50 p-2 bg-[var(--bg-color)] border-2 border-[var(--main-color)] shadow-[4px_4px_var(--main-color)] rounded-[5px] flex flex-col gap-2 w-56">
+                    <label className="text-sm font-bold px-1">Model</label>
+                    <button
+                      onClick={() => {
+                        setSelectedModel('gemini-2.5-flash-image');
+                        setShowModelMenu(false);
+                      }}
+                      className={`text-left px-3 py-2 text-sm font-semibold rounded hover:bg-[var(--main-color)] hover:text-[var(--bg-color)] transition-colors ${
+                        selectedModel === 'gemini-2.5-flash-image' ? 'bg-[var(--main-color)] text-[var(--bg-color)]' : ''
+                      }`}
+                    >
+                      Gemini 2.5 Flash Image
+                    </button>
+                    <button
+                      onClick={() => {
+                        setSelectedModel('gemini-3-pro-image-preview');
+                        setShowModelMenu(false);
+                      }}
+                      className={`text-left px-3 py-2 text-sm font-semibold rounded hover:bg-[var(--main-color)] hover:text-[var(--bg-color)] transition-colors ${
+                        selectedModel === 'gemini-3-pro-image-preview' ? 'bg-[var(--main-color)] text-[var(--bg-color)]' : ''
+                      }`}
+                    >
+                      Gemini 3 Pro Image
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-end gap-4">
+              <div className="flex flex-col items-end">
+                <label
+                  htmlFor="api-key-input"
+                  className="block text-sm font-bold mb-1 text-[var(--font-color)]">
+                  Gemini API Key
+                </label>
+                <input
+                  id="api-key-input"
+                  type="password"
+                  value={apiKey}
+                  onChange={(e) => setApiKey(e.target.value)}
+                  placeholder="Enter API Key"
+                  className="custom-input !w-64"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={handleClear}
+                className="button-log">
+                <Trash2
+                  className="w-5 h-5"
+                  aria-label="Clear Canvas"
+                />
+              </button>
+              <button
+                type="button"
+                onClick={toggleDarkMode}
+                className="button-log"
+                title={isDarkMode ? 'Light Mode' : 'Dark Mode'}>
+                {isDarkMode ? (
+                  <Sun className="w-5 h-5" aria-label="Switch to Light Mode" />
+                ) : (
+                  <Moon className="w-5 h-5" aria-label="Switch to Dark Mode" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <div className="w-full mb-6">
+            <div className="relative w-full">
+              <canvas
+                ref={canvasRef}
+                width={960}
+                height={540}
+                onMouseDown={startDrawing}
+                onMouseMove={draw}
+                onMouseUp={stopDrawing}
+                onMouseLeave={stopDrawing}
+                onTouchStart={startDrawing}
+                onTouchMove={draw}
+                onTouchEnd={stopDrawing}
+                className={`canvas-custom w-full sm:h-[60vh] h-[40vh] min-h-[320px] touch-none ${isErasing ? 'cursor-eraser' : ''}`}
+              />
+              
+              {/* Eraser - Top Left */}
+              <div className="absolute top-2 left-2">
+                <button
+                  onClick={toggleEraser}
+                  className={`button-log-small ${isErasing ? 'ring-2 ring-[var(--main-color)]' : ''}`}
+                  aria-label={isErasing ? "Switch to Brush" : "Eraser"}
+                  title={isErasing ? "Switch to Brush" : "Eraser"}>
+                  <Eraser className="w-5 h-5" />
+                </button>
+              </div>
+
+              <div className="absolute top-2 right-2 flex gap-2">
+                <button
+                  onClick={handleUndo}
+                  disabled={historyIndex <= 0}
+                  className="button-log-small"
+                  aria-label="Undo">
+                  <Undo2 className="w-5 h-5" />
+                </button>
+                <button
+                  onClick={handleRedo}
+                  disabled={historyIndex >= history.length - 1}
+                  className="button-log-small"
+                  aria-label="Redo">
+                  <Redo2 className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Input form */}
+          <form onSubmit={handleSubmit} className="w-full">
+            <div className="relative">
+              <input
+                type="text"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="Describe what to generate or how to edit the drawing..."
+                className="prompt-input"
+                required
+              />
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="button-confirm absolute right-0 top-0">
+                {isLoading ? (
+                  <LoaderCircle
+                    className="w-6 h-6 animate-spin"
+                    aria-label="Loading"
+                  />
+                ) : (
+                  <ArrowUp
+                    className="w-6 h-6"
+                    aria-label="Submit"
+                  />
+                )}
+              </button>
+            </div>
+          </form>
+        </main>
+        {/* Info Modal */}
+        {showInfoModal && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="modal-content max-w-md w-full">
+              <div className="flex justify-between items-start mb-4">
+                <h3 className="title text-xl font-bold">Information</h3>
+                <button
+                  onClick={closeInfoModal}
+                  className="button-log-small -translate-y-1 -translate-x-1">
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              <div className="space-y-4 font-medium text-[var(--font-color)] break-words">
+                <p>
+                  Nano-banana-pro-sketch-board is a web-based app where you can
+                  draw or sketch anything and transform it into your desired
+                  style. The Gemini API key you provide is used only on your
+                  device and it will be removed when the page is closed or
+                  refreshed. The key will not be exposed anywhere.
+                </p>
+                <p>
+                  About: This app is powered by the {selectedModel === 'gemini-2.5-flash-image' ? 'Gemini 2.5 Flash Image' : 'Gemini 3 Pro Image Preview'} / Gemini 3 Pro Image Preview model
+                  through the Gemini API and built by{' '}
+                  <a
+                    href="https://huggingface.co/prithivMLmods"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:underline">
+                    Prithiv Sakthi
+                  </a>
+                  .
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+        {/* Error Modal */}
+        {showErrorModal && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="modal-content max-w-md w-full">
+              <div className="flex justify-between items-start mb-4">
+                <h3 className="title text-xl font-bold">{errorTitle}</h3>
+                <button
+                  onClick={closeErrorModal}
+                  className="button-log-small -translate-y-1 -translate-x-1">
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              <p className="font-medium text-[var(--font-color)] break-words">
+                {errorMessage}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

index.css

@@ -0,0 +1,223 @@
+
+:root {
+  --input-focus: #2d8cf0;
+  --font-color: #323232;
+  --font-color-sub: #666;
+  --bg-color: beige;
+  --main-color: black;
+  --page-bg: lightblue;
+  --cursor-crosshair: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>') 12 12, crosshair;
+  --cursor-eraser: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/></svg>') 0 24, auto;
+}
+
+[data-theme='dark'] {
+  --input-focus: #2d8cf0;
+  --font-color: #323232;
+  --font-color-sub: #666;
+  --bg-color: #fff;
+  --main-color: #323232;
+  --page-bg: lightgrey;
+  --cursor-crosshair: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>') 12 12, crosshair;
+  --cursor-eraser: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/></svg>') 0 24, auto;
+}
+
+html {
+  color-scheme: light dark;
+  background-color: var(--page-bg);
+  color: var(--font-color);
+  font-family: sans-serif;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.title {
+  color: var(--font-color);
+  font-weight: 900;
+}
+
+.custom-input {
+  height: 40px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--font-color);
+  padding: 5px 10px;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
+
+.custom-input::placeholder {
+  color: var(--font-color-sub);
+  opacity: 0.8;
+}
+
+.custom-input:focus {
+  border: 2px solid var(--input-focus);
+}
+
+.button-log {
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  color: var(--font-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.1s ease-in-out;
+}
+
+.button-log:active {
+  box-shadow: 0px 0px var(--main-color);
+  transform: translate(3px, 3px);
+}
+
+.canvas-custom {
+  border-radius: 5px;
+  border: 2px solid var(--main-color) !important;
+  background-color: white;
+  box-shadow: 4px 4px var(--main-color);
+  cursor: var(--cursor-crosshair);
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.cursor-eraser {
+  cursor: var(--cursor-eraser) !important;
+}
+
+.button-log-small {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  color: var(--font-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.1s ease-in-out;
+}
+
+.button-log-small:active:not(:disabled) {
+  box-shadow: 0px 0px var(--main-color);
+  transform: translate(3px, 3px);
+}
+
+.button-log-small:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.prompt-input {
+  width: 100%;
+  height: 52px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--font-color);
+  padding: 5px 10px;
+  padding-right: 60px; /* space for the button */
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
+
+.prompt-input::placeholder {
+  color: var(--font-color-sub);
+  opacity: 0.8;
+}
+
+.prompt-input:focus {
+  border: 2px solid var(--input-focus);
+}
+
+.button-confirm {
+  cursor: pointer;
+  height: 100%;
+  width: 48px;
+  border-radius: 5px;
+  border: none;
+  background-color: transparent;
+  font-weight: 600;
+  color: var(--font-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.1s ease-in-out;
+}
+
+.button-confirm:active:not(:disabled) {
+  transform: translate(3px, 3px);
+}
+
+.button-confirm:disabled {
+    color: var(--font-color-sub);
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.modal-content {
+  padding: 24px;
+  background: var(--bg-color);
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  box-shadow: 4px 4px var(--main-color);
+  color: var(--font-color);
+}
+
+/* Custom Range Slider for Retro Theme */
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  border: 2px solid var(--main-color);
+  border-radius: 50%;
+  background: var(--bg-color);
+  cursor: pointer;
+  margin-top: -6px;
+  box-shadow: 1px 1px var(--main-color);
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  background: var(--main-color);
+  border-radius: 2px;
+}
+
+input[type=range]::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border: 2px solid var(--main-color);
+  border-radius: 50%;
+  background: var(--bg-color);
+  cursor: pointer;
+  box-shadow: 1px 1px var(--main-color);
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  background: var(--main-color);
+  border-radius: 2px;
+}

index.html

@@ -0,0 +1,15 @@
+<script type="importmap">
+  {
+    "imports": {
+      "@google/genai": "https://esm.sh/@google/genai@^0.7.0",
+      "react": "https://esm.sh/react@^19.0.0",
+      "react/": "https://esm.sh/react@^19.0.0/",
+      "react-dom/": "https://esm.sh/react-dom@^19.0.0/",
+      "lucide-react": "https://esm.sh/lucide-react@^0.487.0",
+      "@tailwindcss/browser": "https://esm.sh/@tailwindcss/browser@^4.1.2"
+    }
+  }
+</script>
+<link rel="stylesheet" href="index.css">
+<div id="root"></div><link rel="stylesheet" href="/index.css">
+<script type="module" src="/index.tsx"></script>

index.tsx

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import '@tailwindcss/browser';
+
+import ReactDOM from 'react-dom/client';
+import Home from './Home';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Home />);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "nanobanana-sketch-to-image",
+  "description": "Turn sketches into stunning visuals. Draw, prompt, and let Gemini transform your ideas into creative images in seconds.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "nanobanana-sketch-to-image",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^0.7.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "lucide-react": "^0.487.0",
+    "@tailwindcss/browser": "^4.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});