upload app

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,863 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+/* tslint:disable */
+import {GoogleGenAI, Modality} from '@google/genai';
+import {
+  ChevronDown,
+  Download,
+  ImageUp,
+  Info,
+  LoaderCircle,
+  Moon,
+  Paintbrush,
+  Redo2,
+  Sparkles,
+  Sun,
+  Trash2,
+  Undo2,
+  X,
+} from 'lucide-react';
+import {useState, useRef, useEffect} from 'react';
+
+const ai = new GoogleGenAI({apiKey: process.env.API_KEY});
+
+const aspectRatios = ['1:1', '16:9', '9:16', '4:3', '3:4'];
+
+type Mode = 'text-to-image' | 'image-to-image' | 'draw-to-image';
+type Theme = 'light' | 'dark';
+
+function parseError(error: any): string {
+  if (error instanceof Error) {
+    const match = error.message.match(/"message":\s*"(.*?)"/);
+    if (match && match[1]) {
+      return match[1];
+    }
+    return error.message;
+  }
+  if (typeof error === 'string') {
+    return error;
+  }
+  return 'An unexpected error occurred.';
+}
+
+export default function Home() {
+  const [mode, setMode] = useState<Mode>('text-to-image');
+  const [prompt, setPrompt] = useState('');
+  const [sourceImages, setSourceImages] = useState<string[]>([]);
+  const [resultImages, setResultImages] = useState<string[]>([]);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(true);
+  const [aspectRatio, setAspectRatio] = useState('1:1');
+  const [downloadType, setDownloadType] = useState<'png' | 'jpeg'>('png');
+  const [numberOfImages, setNumberOfImages] = useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [theme, setTheme] = useState<Theme>('light');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Canvas state
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [canvasHistory, setCanvasHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const initCanvas = () => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        const dataUrl = canvas.toDataURL();
+        setCanvasHistory([dataUrl]);
+        setHistoryIndex(0);
+      }
+    }
+  };
+
+  // Initialize canvas when mode changes to draw-to-image
+  useEffect(() => {
+    if (mode === 'draw-to-image') {
+      // A small delay to ensure canvas is in the DOM
+      setTimeout(initCanvas, 50);
+    }
+  }, [mode]);
+  
+  // Load generated image back to canvas in draw mode
+  useEffect(() => {
+    if (mode === 'draw-to-image' && resultImages.length > 0 && canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      const img = new Image();
+      img.onload = () => {
+        if (ctx) {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          saveCanvasState();
+        }
+      };
+      img.src = resultImages[0];
+    }
+  }, [resultImages]);
+
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  const handleModeChange = (newMode: Mode) => {
+    if (mode !== newMode) {
+      setMode(newMode);
+      setResultImages([]);
+      setSelectedImageIndex(0);
+      setErrorMessage('');
+      setPrompt('');
+      setSourceImages([]);
+      setNumberOfImages(1);
+    }
+    setIsDropdownOpen(false);
+  };
+
+  const handleClear = () => {
+    setPrompt('');
+    setSourceImages([]);
+    setResultImages([]);
+    setSelectedImageIndex(0);
+    setErrorMessage('');
+    setShowAdvanced(true);
+    setAspectRatio('1:1');
+    setDownloadType('png');
+    setNumberOfImages(1);
+    if (mode === 'draw-to-image') {
+      initCanvas();
+    }
+  };
+  
+    // Canvas history functions
+  const saveCanvasState = () => {
+    if (!canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const dataUrl = canvas.toDataURL();
+    const newHistory = canvasHistory.slice(0, historyIndex + 1);
+    newHistory.push(dataUrl);
+    setCanvasHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  };
+
+  const restoreCanvasState = (index: number) => {
+    if (!canvasRef.current || !canvasHistory[index]) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const dataUrl = canvasHistory[index];
+    const img = new window.Image();
+    img.onload = () => {
+      if(ctx) {
+        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 < canvasHistory.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      restoreCanvasState(newIndex);
+    }
+  };
+  
+  const getCoordinates = (e: React.MouseEvent | React.TouchEvent) => {
+    const canvas = canvasRef.current;
+    if(!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    
+    let clientX, clientY;
+    if ('touches' in e.nativeEvent) {
+      clientX = e.nativeEvent.touches[0].clientX;
+      clientY = e.nativeEvent.touches[0].clientY;
+    } else {
+      clientX = e.nativeEvent.clientX;
+      clientY = e.nativeEvent.clientY;
+    }
+
+    return {
+      x: (clientX - rect.left) * scaleX,
+      y: (clientY - rect.top) * scaleY,
+    };
+  };
+
+  const startDrawing = (e: React.MouseEvent | React.TouchEvent) => {
+    if ('touches' in e.nativeEvent) e.preventDefault();
+    const canvas = canvasRef.current;
+    if(!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if(!ctx) return;
+    const {x, y} = getCoordinates(e);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    setIsDrawing(true);
+  };
+
+  const draw = (e: React.MouseEvent | React.TouchEvent) => {
+    if (!isDrawing) return;
+    if ('touches' in e.nativeEvent) e.preventDefault();
+    const canvas = canvasRef.current;
+    if(!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if(!ctx) return;
+    const {x, y} = getCoordinates(e);
+    ctx.lineWidth = 5;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = '#000000';
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  };
+
+  const stopDrawing = () => {
+    if (!isDrawing) return;
+    setIsDrawing(false);
+    saveCanvasState();
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const preventDefault = (e: TouchEvent) => {
+      if (isDrawing) {
+        e.preventDefault();
+      }
+    };
+
+    canvas.addEventListener('touchstart', preventDefault, { passive: false });
+    canvas.addEventListener('touchmove', preventDefault, { passive: false });
+
+    return () => {
+      canvas.removeEventListener('touchstart', preventDefault);
+      canvas.removeEventListener('touchmove', preventDefault);
+    };
+  }, [isDrawing]);
+
+
+  const processFiles = (files: FileList) => {
+    if (!files || files.length === 0) return;
+    const imageFiles = Array.from(files).filter((file) =>
+      file.type.startsWith('image/'),
+    );
+    if (imageFiles.length === 0) return;
+
+    const readers = imageFiles.map((file) => {
+      return new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result as string);
+        reader.onerror = (error) => reject(error);
+        reader.readAsDataURL(file);
+      });
+    });
+
+    Promise.all(readers)
+      .then((newImages) => {
+        setSourceImages((prev) => [...prev, ...newImages]);
+        setResultImages([]);
+        setSelectedImageIndex(0);
+      })
+      .catch(() => {
+        setErrorMessage('Failed to read one or more files.');
+      });
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      processFiles(e.target.files);
+    }
+    e.target.value = '';
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.classList.remove('dragover');
+    if (e.dataTransfer.files) {
+      processFiles(e.dataTransfer.files);
+    }
+  };
+
+  const removeImage = (indexToRemove: number) => {
+    setSourceImages((prev) =>
+      prev.filter((_, index) => index !== indexToRemove),
+    );
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.classList.add('dragover');
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.classList.remove('dragover');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!prompt) {
+      setErrorMessage('Please enter a prompt to continue.');
+      return;
+    }
+    if (mode === 'image-to-image' && sourceImages.length === 0) {
+      setErrorMessage('Please upload at least one source image for editing.');
+      return;
+    }
+
+    setIsLoading(true);
+    setResultImages([]);
+    setSelectedImageIndex(0);
+    setErrorMessage('');
+
+    try {
+      if ((mode === 'image-to-image' && sourceImages.length > 0) || mode === 'draw-to-image') {
+
+        const parts = [];
+        if (mode === 'image-to-image') {
+          const imageParts = sourceImages.map((imgData) => {
+            const mimeType = imgData.substring(
+              imgData.indexOf(':') + 1,
+              imgData.indexOf(';'),
+            );
+            const imageB64 = imgData.split(',')[1];
+            return {inlineData: {data: imageB64, mimeType}};
+          });
+          parts.push(...imageParts);
+        } else if (mode === 'draw-to-image' && canvasRef.current) {
+          const imageB64 = canvasRef.current.toDataURL('image/png').split(',')[1];
+          parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
+        }
+
+        const textPart = {text: prompt};
+        parts.push(textPart);
+
+        const response = await ai.models.generateContent({
+          model: 'gemini-2.5-flash-image',
+          contents: {parts},
+          config: {
+            responseModalities: [Modality.IMAGE, Modality.TEXT],
+          },
+        });
+
+        let foundImage = false;
+        if(response.candidates && response.candidates[0].content.parts) {
+          for (const part of response.candidates[0].content.parts) {
+            if (part.inlineData) {
+              const imageUrl = `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`;
+              setResultImages([imageUrl]);
+              foundImage = true;
+              break;
+            }
+          }
+        }
+        
+        if (!foundImage) {
+          const textMessage = response.text;
+          setErrorMessage(
+            textMessage ||
+              'The model did not return an image. Please try a different prompt.',
+          );
+        }
+      } else { // Text-to-image
+        const response = await ai.models.generateImages({
+          model: 'imagen-4.0-generate-001',
+          prompt: prompt,
+          config: {
+            numberOfImages: numberOfImages,
+            aspectRatio: aspectRatio as any,
+            outputMimeType:
+              `image/${downloadType}` as 'image/png' | 'image/jpeg',
+          },
+        });
+
+        if (response.generatedImages && response.generatedImages.length > 0) {
+          const imageUrls = response.generatedImages.map((img) => {
+            const base64Image = img.image.imageBytes;
+            return `data:image/${downloadType};base64,${base64Image}`;
+          });
+          setResultImages(imageUrls);
+        } else {
+          setErrorMessage(
+            'The model did not return an image. Please try again.',
+          );
+        }
+      }
+    } catch (error) {
+      console.error('Error during API call:', error);
+      setErrorMessage(parseError(error));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDownload = async (imageUrl: string) => {
+    const targetMimeType = `image/${downloadType}`;
+    const targetExtension = downloadType;
+    const sourceMimeType = imageUrl.match(/data:(image\/.*?);/)?.[1];
+
+    let finalImageUrl = imageUrl;
+
+    if (sourceMimeType && sourceMimeType !== targetMimeType) {
+      try {
+        finalImageUrl = await new Promise((resolve, reject) => {
+          const img = new Image();
+          img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+              reject(new Error('Could not get canvas context'));
+              return;
+            }
+            if (targetMimeType === 'image/jpeg') {
+              ctx.fillStyle = '#FFFFFF';
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            ctx.drawImage(img, 0, 0);
+            resolve(canvas.toDataURL(targetMimeType, 0.9));
+          };
+          img.onerror = () => {
+            reject(new Error('Failed to load image for conversion.'));
+          };
+          img.src = imageUrl;
+        });
+      } catch (error) {
+        setErrorMessage(
+          error instanceof Error ? error.message : 'Image conversion failed.',
+        );
+        return;
+      }
+    }
+
+    const link = document.createElement('a');
+    link.href = finalImageUrl;
+    link.download = `gemini-studio-image.${targetExtension}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="app-container">
+      <header className="app-header">
+        <div>
+          <h1>Gemini-Image-Studio</h1>
+          <p>State-of-the-art image generation and editing model.</p>
+        </div>
+        <button
+          onClick={toggleTheme}
+          className="button theme-toggle"
+          aria-label="Toggle theme">
+          {theme === 'light' ? (
+            <Moon className="w-6 h-6" />
+          ) : (
+            <Sun className="w-6 h-6" />
+          )}
+        </button>
+      </header>
+      <main className="app-main">
+        <div className="main-grid">
+          {/* Input Card */}
+          <div className="card">
+            <div className="head">
+              <span>INPUT</span>
+              <div
+                className="relative inline-block text-left"
+                ref={dropdownRef}>
+                <button
+                  type="button"
+                  className="button"
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}>
+                  {mode === 'text-to-image'
+                    ? 'Text-to-Image'
+                    : mode === 'image-to-image'
+                    ? 'Image-to-Image'
+                    : 'Draw-to-Image'}
+                  <ChevronDown className="-mr-1 h-5 w-5" />
+                </button>
+                {isDropdownOpen && (
+                  <div className="dropdown-panel">
+                    <div
+                      onClick={() => handleModeChange('text-to-image')}
+                      className={`dropdown-item ${
+                        mode === 'text-to-image' ? 'active' : ''
+                      }`}
+                      role="menuitem">
+                      Text-to-Image
+                    </div>
+                    <div
+                      onClick={() => handleModeChange('image-to-image')}
+                      className={`dropdown-item ${
+                        mode === 'image-to-image' ? 'active' : ''
+                      }`}
+                      role="menuitem">
+                      Image-to-Image
+                    </div>
+                    <div
+                      onClick={() => handleModeChange('draw-to-image')}
+                      className={`dropdown-item ${
+                        mode === 'draw-to-image' ? 'active' : ''
+                      }`}
+                      role="menuitem">
+                      Draw-to-Image
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="content">
+              <form onSubmit={handleSubmit} className="form-content">
+                {mode === 'image-to-image' && (
+                  <div className="form-group">
+                    <label>Source Image(s)</label>
+                    <input
+                      ref={fileInputRef}
+                      id="file-upload"
+                      type="file"
+                      onChange={handleFileChange}
+                      accept="image/*"
+                      className="hidden"
+                      multiple
+                    />
+                    <div
+                      className="uploader"
+                      onDrop={handleDrop}
+                      onDragOver={handleDragOver}
+                      onDragEnter={handleDragEnter}
+                      onDragLeave={handleDragLeave}>
+                      {sourceImages.length > 0 ? (
+                        <div className="image-grid">
+                          {sourceImages.map((image, index) => (
+                            <div
+                              key={index}
+                              className="relative group aspect-square">
+                              <img src={image} alt={`Source ${index + 1}`} />
+                              <button
+                                type="button"
+                                onClick={() => removeImage(index)}
+                                className="image-remove-button"
+                                aria-label={`Remove image ${index + 1}`}>
+                                <X className="w-4 h-4" />
+                              </button>
+                            </div>
+                          ))}
+                          <button
+                            type="button"
+                            onClick={() => fileInputRef.current?.click()}
+                            className="uploader-add-button">
+                            + Add
+                          </button>
+                        </div>
+                      ) : (
+                        <button
+                          type="button"
+                          onClick={() => fileInputRef.current?.click()}
+                          className="uploader-placeholder">
+                          <ImageUp className="w-8 h-8" />
+                          <span>Click or Drag & Drop</span>
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {mode === 'draw-to-image' && (
+                  <div className="form-group">
+                    <label>Canvas</label>
+                    <div className="canvas-container">
+                       <canvas
+                          ref={canvasRef}
+                          width={960}
+                          height={540}
+                          onMouseDown={startDrawing}
+                          onMouseMove={draw}
+                          onMouseUp={stopDrawing}
+                          onMouseLeave={stopDrawing}
+                          onTouchStart={startDrawing}
+                          onTouchMove={draw}
+                          onTouchEnd={stopDrawing}
+                        />
+                       <div className="canvas-controls">
+                        <button type="button" onClick={handleUndo} disabled={historyIndex <= 0} aria-label="Undo">
+                          <Undo2 className="w-5 h-5" />
+                        </button>
+                        <button type="button" onClick={handleRedo} disabled={historyIndex >= canvasHistory.length - 1} aria-label="Redo">
+                          <Redo2 className="w-5 h-5" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+
+                <div className="form-group">
+                  <div className="label-with-info">
+                    <label htmlFor="prompt">Prompt</label>
+                    {mode === 'text-to-image' && (
+                      <div className="info-tooltip-container">
+                        <Info className="w-4 h-4 info-icon" />
+                        <span className="info-tooltip">
+                          The model used for this mode is <code>imagen-4.0-generate-001</code>.
+                        </span>
+                      </div>
+                    )}
+                    {(mode === 'image-to-image' || mode === 'draw-to-image') && (
+                      <div className="info-tooltip-container">
+                        <Info className="w-4 h-4 info-icon" />
+                        <span className="info-tooltip">
+                          The model used for image editing is <code>gemini-2.5-flash-image</code>.
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <textarea
+                    id="prompt"
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    placeholder={
+                      mode === 'image-to-image'
+                        ? 'Describe how to edit the image(s)...'
+                        : mode === 'draw-to-image'
+                        ? 'Describe the image you want to create from your drawing...'
+                        : 'A photorealistic cat astronaut on Mars...'
+                    }
+                    className="input"
+                    required
+                  />
+                </div>
+
+                <div className="form-group">
+                  <button
+                    type="button"
+                    onClick={() => setShowAdvanced(!showAdvanced)}
+                    className="advanced-toggle">
+                    <span>Advanced Settings</span>
+                    <ChevronDown
+                      className={`w-5 h-5 transition-transform ${
+                        showAdvanced ? 'transform rotate-180' : ''
+                      }`}
+                    />
+                  </button>
+                  {showAdvanced && (
+                    <div className="advanced-panel">
+                      {mode === 'text-to-image' && (
+                        <>
+                          <div className="form-group">
+                            <div className="label-with-value">
+                              <label htmlFor="number-of-images">
+                                Number of Images
+                              </label>
+                              <span>{numberOfImages}</span>
+                            </div>
+                            <input
+                              id="number-of-images"
+                              type="range"
+                              value={numberOfImages}
+                              onChange={(e) =>
+                                setNumberOfImages(parseInt(e.target.value, 10))
+                              }
+                              min="1"
+                              max="4"
+                              step="1"
+                              className="slider"
+                            />
+                          </div>
+                          <div className="form-group">
+                            <label htmlFor="aspect-ratio">Aspect Ratio</label>
+                            <select
+                              id="aspect-ratio"
+                              value={aspectRatio}
+                              onChange={(e) => setAspectRatio(e.target.value)}
+                              className="input">
+                              {aspectRatios.map((ar) => (
+                                <option key={ar} value={ar}>
+                                  {ar}
+                                </option>
+                              ))}
+                            </select>
+                          </div>
+                        </>
+                      )}
+                      <div className="form-group">
+                        <label htmlFor="download-type">Download Format</label>
+                        <select
+                          id="download-type"
+                          value={downloadType}
+                          onChange={(e) =>
+                            setDownloadType(e.target.value as 'png' | 'jpeg')
+                          }
+                          className="input">
+                          <option value="png">PNG</option>
+                          <option value="jpeg">JPEG</option>
+                        </select>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <div className="form-actions">
+                  <button
+                    type="submit"
+                    disabled={isLoading}
+                    className="button primary">
+                    {isLoading ? (
+                      <>
+                        <LoaderCircle className="w-5 h-5 animate-spin" />
+                        <span>
+                          {mode === 'image-to-image'
+                            ? 'Editing...'
+                            : 'Generating...'}
+                        </span>
+                      </>
+                    ) : (
+                      <>
+                        {mode === 'text-to-image' && 'Generate Image'}
+                        {mode === 'image-to-image' && 'Edit Image'}
+                        {mode === 'draw-to-image' && 'Generate from Drawing'}
+                      </>
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleClear}
+                    className="button secondary"
+                    aria-label="Clear inputs">
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+
+          {/* Result Card */}
+          <div className="card">
+            <div className="head">
+              <span>RESULT</span>
+            </div>
+            <div className="content">
+              <div className="result-area">
+                {isLoading ? (
+                  <div className="result-placeholder">
+                    <LoaderCircle className="w-10 h-10 animate-spin" />
+                    <p>
+                      {mode === 'image-to-image' || mode === 'draw-to-image'
+                        ? 'Processing your image...'
+                        : `Generating ${numberOfImages} image(s)...`}
+                    </p>
+                  </div>
+                ) : resultImages.length > 0 ? (
+                  <div className="showcase-container">
+                    <div className="main-image-wrapper group">
+                      <img
+                        src={resultImages[selectedImageIndex]}
+                        alt={`Generated result ${selectedImageIndex + 1}`}
+                      />
+                      <button
+                        onClick={() =>
+                          handleDownload(resultImages[selectedImageIndex])
+                        }
+                        className="download-button"
+                        aria-label="Download image">
+                        <Download className="w-5 h-5" />
+                      </button>
+                    </div>
+                    {resultImages.length > 1 && (
+                      <div className="thumbnail-container">
+                        {resultImages.map((image, index) => (
+                          <img
+                            key={index}
+                            src={image}
+                            alt={`Thumbnail ${index + 1}`}
+                            className={`thumbnail-image ${
+                              index === selectedImageIndex ? 'active' : ''
+                            }`}
+                            onClick={() => setSelectedImageIndex(index)}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="result-placeholder">
+                    {mode === 'draw-to-image' ? <Paintbrush className="w-10 h-10" /> : <Sparkles className="w-10 h-10" />}
+                    <h3>
+                      {mode === 'draw-to-image' 
+                        ? "Start drawing and see your ideas come to life"
+                        : "Your result will appear here"
+                      }
+                    </h3>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {errorMessage && (
+        <div className="modal-backdrop">
+          <div className="card modal-card">
+            <div className="head">
+              <span>REQUEST FAILED</span>
+              <button
+                onClick={() => setErrorMessage('')}
+                className="modal-close-button">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="content">
+              <p>{errorMessage}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

index.css

@@ -0,0 +1,630 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap'); */
+
+:root {
+  --bg-main: #ffd6e7;
+  --bg-card: #ff66a3;
+  --bg-header: #ffffff;
+  --bg-result: #ffffff;
+  --bg-dropdown-active: #ff66a3;
+  --bg-advanced: rgba(255, 255, 255, 0.3);
+  --bg-uploader: rgba(255, 255, 255, 0.4);
+  --bg-button-primary: #4ade80;
+  --bg-button-primary-hover: #1ac2ff;
+  --bg-button-secondary: #fde047;
+  --bg-button-secondary-hover: #f97316;
+
+  --color-border: #000000;
+  --color-text: #000000;
+  --color-text-button: #000000;
+}
+
+[data-theme="dark"] {
+  --bg-main: #2c132c;
+  --bg-card: #592659;
+  --bg-header: #1a1a1a;
+  --bg-result: #2a2a2a;
+  --bg-dropdown-active: #7f397f;
+  --bg-advanced: rgba(0, 0, 0, 0.3);
+  --bg-uploader: rgba(0, 0, 0, 0.4);
+
+  --color-text: #f0f0f0;
+}
+
+body {
+  font-family: 'Montserrat', sans-serif;
+  margin: 0;
+  padding: 0;
+  color: var(--color-text);
+  background-color: var(--bg-main);
+  overflow-x: hidden;
+  transition: background-color 0.3s ease;
+}
+
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  background: var(--bg-header);
+  padding: 2rem 4rem;
+  border-bottom: 3px solid var(--color-border);
+  color: var(--color-text);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.app-header h1 {
+  font-size: 2.5rem;
+  font-weight: 900;
+  margin: 0 0 0.5rem 0;
+}
+
+.app-header p {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.app-main {
+  flex-grow: 1;
+  background: var(--bg-main);
+  padding: 2rem;
+  transition: background-color 0.3s ease;
+}
+
+.main-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 4rem 2rem;
+}
+
+@media (min-width: 1024px) {
+  .main-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem 4rem;
+  }
+}
+
+/* Card Styles */
+.card {
+  font-family: 'Montserrat', sans-serif;
+  translate: -6px -6px;
+  background: var(--bg-card);
+  border: 3px solid var(--color-border);
+  box-shadow: 12px 12px 0 var(--color-border);
+  transition: all 0.2s ease;
+  width: 100%;
+}
+
+.card:hover {
+  translate: -3px -3px;
+  box-shadow: 9px 9px 0 var(--color-border);
+}
+
+.head {
+  font-size: 14px;
+  font-weight: 900;
+  width: 100%;
+  background: var(--bg-header);
+  padding: 8px 12px;
+  color: var(--color-text);
+  border-bottom: 3px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  padding: 1.5rem;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+/* Button Styles */
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 8px 16px;
+  border: 3px solid var(--color-border);
+  box-shadow: 4px 4px 0 var(--color-border);
+  font-weight: 900;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--color-text-button);
+}
+.button.primary {
+  background: var(--bg-button-primary);
+}
+.button.primary:hover {
+  background: var(--bg-button-primary-hover);
+}
+.button.secondary {
+  background: var(--bg-button-secondary);
+}
+.button.secondary:hover {
+  background: var(--bg-button-secondary-hover);
+}
+.theme-toggle {
+  padding: 8px;
+  background: var(--bg-button-secondary);
+}
+.theme-toggle:hover {
+  background: var(--bg-button-secondary-hover);
+}
+
+.button:hover {
+  translate: 2px 2px;
+  box-shadow: 2px 2px 0 var(--color-border);
+}
+.button:active {
+  translate: 4px 4px;
+  box-shadow: 0 0 0 var(--color-border);
+}
+.button:disabled {
+  background: #d1d5db;
+  color: #6b7280;
+  cursor: not-allowed;
+  translate: 0 0;
+  box-shadow: 4px 4px 0 var(--color-border);
+}
+
+/* Form Styles */
+.form-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.form-group label {
+  font-weight: 900;
+}
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1rem;
+}
+.form-actions > .button.primary {
+  flex-grow: 1;
+}
+
+.label-with-value {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 12px;
+  background: var(--bg-uploader);
+  outline: none;
+  border: 3px solid var(--color-border);
+  padding: 0;
+  cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  background: var(--bg-button-secondary);
+  cursor: pointer;
+  border: 3px solid var(--color-border);
+  margin-top: -9px; /* Vertically center thumb */
+}
+
+.slider::-moz-range-thumb {
+  width: 18px; /* 24px - (2 * 3px border) */
+  height: 18px;
+  background: var(--bg-button-secondary);
+  cursor: pointer;
+  border: 3px solid var(--color-border);
+  border-radius: 0;
+}
+
+.input, textarea.input, select.input {
+  width: 100%;
+  padding: 10px;
+  border: 3px solid var(--color-border);
+  background: var(--bg-result);
+  color: var(--color-text);
+  font-weight: 600;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+  box-sizing: border-box;
+  border-radius: 0;
+}
+textarea.input {
+  resize: vertical;
+  min-height: 120px;
+}
+select.input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1em;
+}
+
+.advanced-toggle {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  font-weight: 900;
+  cursor: pointer;
+  padding: 0;
+  color: var(--color-text);
+}
+.advanced-panel {
+  background: var(--bg-advanced);
+  padding: 1rem;
+  border: 3px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Dropdown */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.dropdown-panel {
+    position: absolute;
+    background: var(--bg-result);
+    border: 3px solid var(--color-border);
+    margin-top: 8px;
+    box-shadow: 4px 4px 0 var(--color-border);
+    z-index: 10;
+    width: 100%;
+}
+.dropdown-item {
+    padding: 8px 12px;
+    font-weight: 700;
+    cursor: pointer;
+    color: var(--color-text);
+}
+.dropdown-item:hover, .dropdown-item.active {
+    background: var(--bg-dropdown-active);
+}
+[data-theme="dark"] .dropdown-item.active,
+[data-theme="dark"] .dropdown-item:hover {
+  color: #ffffff;
+}
+[data-theme="dark"] .head .button {
+  color: var(--color-text);
+}
+
+
+/* Uploader */
+.uploader {
+  border: 3px dashed var(--color-border);
+  background: var(--bg-uploader);
+  padding: 1rem;
+  cursor: pointer;
+  min-height: 100px;
+  transition: background-color 0.2s;
+  color: var(--color-text);
+}
+.uploader.dragover {
+  background: rgba(74, 222, 128, 0.5);
+}
+.uploader-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  gap: 0.5rem;
+  font-weight: 900;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+}
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 1rem;
+}
+.image-grid .aspect-square {
+  aspect-ratio: 1/1;
+  position: relative;
+}
+.image-grid img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border: 2px solid var(--color-border);
+}
+.image-remove-button {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(0,0,0,0.7);
+  color: white;
+  border: none;
+  border-radius: 99px;
+  padding: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.image-grid .group:hover .image-remove-button {
+  opacity: 1;
+}
+
+.uploader-add-button {
+  border: 3px dashed var(--color-border);
+  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 900;
+  font-size: 20px;
+  cursor: pointer;
+  aspect-ratio: 1/1;
+  color: inherit;
+}
+
+/* Canvas Styles */
+.canvas-container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  border: 3px solid var(--color-border);
+  background: white;
+}
+.canvas-container canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: 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="%23fde047" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>') 12 12, crosshair;
+  touch-action: none;
+}
+.canvas-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 0.5rem;
+}
+.canvas-controls button {
+  background-color: var(--bg-header);
+  border: 3px solid var(--color-border);
+  box-shadow: 3px 3px 0 var(--color-border);
+  padding: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.canvas-controls button:hover {
+  translate: 1px 1px;
+  box-shadow: 2px 2px 0 var(--color-border);
+}
+.canvas-controls button:active {
+  translate: 3px 3px;
+  box-shadow: 0 0 0 var(--color-border);
+}
+
+.canvas-controls button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #ccc;
+  translate: 0;
+  box-shadow: 3px 3px 0 var(--color-border);
+}
+
+
+/* Result Area */
+.result-area {
+  width: 100%;
+  height: 60vh;
+  min-height: 400px;
+  background: var(--bg-result);
+  border: 3px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+.result-area img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.result-placeholder {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  color: var(--color-text);
+}
+.result-placeholder h3 {
+  font-weight: 900;
+}
+.download-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(0,0,0,0.7);
+  color: white;
+  border-radius: 99px;
+  padding: 8px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.main-image-wrapper.group:hover .download-button {
+  opacity: 1;
+}
+
+/* Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  backdrop-filter: blur(4px);
+  padding: 1rem;
+}
+.modal-card {
+  max-width: 500px;
+  width: 100%;
+  margin-bottom: 0; /* Override card margin */
+}
+.modal-close-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+/* Showcase for multiple images */
+.showcase-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+}
+
+.main-image-wrapper {
+  flex-grow: 1;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.thumbnail-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
+  height: 80px;
+  padding: 0 1rem;
+}
+
+.thumbnail-image {
+  height: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  border: 3px solid var(--color-border);
+  cursor: pointer;
+  opacity: 0.6;
+  transition: all 0.2s ease;
+  box-shadow: 4px 4px 0 var(--color-border);
+}
+
+.thumbnail-image.active,
+.thumbnail-image:hover {
+  opacity: 1;
+  border-color: var(--bg-button-primary-hover);
+  transform: translateY(-4px);
+  box-shadow: 6px 6px 0 var(--color-border);
+}
+
+/* Lucide icon helpers */
+.w-4 { width: 1rem; }
+.h-4 { height: 1rem; }
+.w-5 { width: 1.25rem; }
+.h-5 { height: 1.25rem; }
+.w-6 { width: 1.5rem; }
+.h-6 { height: 1.5rem; }
+.w-8 { width: 2rem; }
+.h-8 { height: 2rem; }
+.w-10 { width: 2.5rem; }
+.h-10 { height: 2.5rem; }
+.-mr-1 { margin-right: -0.25rem; }
+.animate-spin { animation: spin 1s linear infinite; }
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+.transform { transform: T; } /* Placeholder */
+.rotate-180 { transform: rotate(180deg); }
+.hidden { display: none; }
+
+/* Info Tooltip Styles */
+.label-with-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.info-tooltip-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: help;
+}
+
+.info-icon {
+  opacity: 0.7;
+}
+
+.info-tooltip {
+  position: absolute;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--bg-header);
+  color: var(--color-text);
+  border: 3px solid var(--color-border);
+  padding: 0.5rem 0.75rem;
+  font-weight: 600;
+  font-size: 12px;
+  width: max-content;
+  max-width: 250px;
+  text-align: center;
+  z-index: 10;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  box-shadow: 4px 4px 0 var(--color-border);
+}
+
+.info-tooltip code {
+  background-color: var(--bg-advanced);
+  padding: 2px 4px;
+  font-weight: 700;
+}
+
+.info-tooltip-container:hover .info-tooltip {
+  opacity: 1;
+  visibility: visible;
+}

index.html

@@ -0,0 +1,17 @@
+<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="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap" rel="stylesheet">
+<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": "Gemini-Image-Studio",
+  "description": "A state-of-the-art tool to generate new images from text or edit existing ones, powered by Gemini.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "gemini-image-studio",
+  "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, '.'),
+        }
+      }
+    };
+});