Spaces:

bibibi12345
/

ve2gem

Paused

App Files Files Community

bibibi12345 commited on Aug 27, 2025

Commit

b6eebc3

1 Parent(s): 5ef2ea1

added animation frontend

Browse files

Files changed (2) hide show

index.html +317 -0
main.py +7 -1

index.html ADDED Viewed

	@@ -0,0 +1,317 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemini Image Generator</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .input-group {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+            color: #555;
+        }
+        input[type="text"], textarea {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+        textarea {
+            height: 100px;
+            resize: vertical;
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            width: 100%;
+            margin-top: 10px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            margin: 20px 0;
+        }
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .result {
+            margin-top: 30px;
+            padding: 20px;
+            background-color: #f9f9f9;
+            border-radius: 5px;
+            display: none;
+        }
+        .result h3 {
+            margin-top: 0;
+            color: #333;
+        }
+        .text-content {
+            margin-bottom: 20px;
+            line-height: 1.6;
+        }
+        .image-container {
+            text-align: center;
+            margin-top: 20px;
+        }
+        .generated-image {
+            max-width: 100%;
+            height: auto;
+            border-radius: 5px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+        }
+        .error {
+            color: #d32f2f;
+            background-color: #ffebee;
+            padding: 15px;
+            border-radius: 5px;
+            margin-top: 20px;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎨 Gemini Image Generator</h1>
+        <div class="input-group">
+            <label for="apiKey">API Key:</label>
+            <input type="text" id="apiKey" placeholder="Enter your API key">
+        </div>
+        <div class="input-group">
+            <label for="prompt">Image Prompt:</label>
+            <textarea id="prompt" placeholder="Describe the image you want to generate..."></textarea>
+        </div>
+        <button onclick="generateImage()">Generate Image</button>
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>Generating image...</p>
+        </div>
+        <div class="error" id="error"></div>
+        <div class="result" id="result">
+            <h3>Generated Content:</h3>
+            <div class="text-content" id="textContent"></div>
+            <div class="image-container" id="imageContainer"></div>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.min.js"></script>
+    <script>
+        async function generateImage() {
+            const apiKey = document.getElementById('apiKey').value.trim();
+            const prompt = document.getElementById('prompt').value.trim();
+            if (!apiKey) {
+                showError('Please enter your API key');
+                return;
+            }
+            if (!prompt) {
+                showError('Please enter a prompt');
+                return;
+            }
+            // Show loading state
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('result').style.display = 'none';
+            document.getElementById('error').style.display = 'none';
+            document.querySelector('button').disabled = true;
+            try {
+                const response = await fetch('/v1beta/models/gemini-2.5-flash-image-preview:generateContent', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'x-goog-api-key': apiKey
+                    },
+                    body: JSON.stringify({
+                        contents: [{
+                            parts: [{
+                                text: prompt
+                            }]
+                        }]
+                    })
+                });
+                if (!response.ok) {
+                    const errorData = await response.text();
+                    throw new Error(`HTTP ${response.status}: ${errorData}`);
+                }
+                const data = await response.json();
+                displayResult(data);
+            } catch (error) {
+                console.error('Error:', error);
+                showError('Error generating image: ' + error.message);
+            } finally {
+                // Hide loading state
+                document.getElementById('loading').style.display = 'none';
+                document.querySelector('button').disabled = false;
+            }
+        }
+        function displayResult(data) {
+            const resultDiv = document.getElementById('result');
+            const textContentDiv = document.getElementById('textContent');
+            const imageContainerDiv = document.getElementById('imageContainer');
+            // Clear previous results
+            textContentDiv.innerHTML = '';
+            imageContainerDiv.innerHTML = '';
+            if (data.candidates && data.candidates.length > 0) {
+                const candidate = data.candidates[0];
+                const parts = candidate.content.parts;
+                let textParts = [];
+                let imageParts = [];
+                // Separate text and image parts
+                parts.forEach(part => {
+                    if (part.text) {
+                        textParts.push(part.text);
+                    } else if (part.inlineData && part.inlineData.data) {
+                        imageParts.push(part.inlineData.data);
+                    }
+                });
+                // Display text content
+                if (textParts.length > 0) {
+                    textContentDiv.innerHTML = textParts.join('');
+                }
+                // Handle images
+                if (imageParts.length === 1) {
+                    // Single image - display as is
+                    const img = document.createElement('img');
+                    img.src = `data:image/png;base64,${imageParts[0]}`;
+                    img.className = 'generated-image';
+                    img.alt = 'Generated image';
+                    imageContainerDiv.appendChild(img);
+                } else if (imageParts.length > 1) {
+                    // Multiple images - create animated GIF
+                    createAnimatedGif(imageParts, imageContainerDiv);
+                }
+                resultDiv.style.display = 'block';
+            } else {
+                showError('No content generated');
+            }
+        }
+        function createAnimatedGif(imageDataArray, container) {
+            const gif = new GIF({
+                workers: 2,
+                quality: 10,
+                width: 512,
+                height: 512
+            });
+            let loadedImages = 0;
+            const totalImages = imageDataArray.length;
+            // Show loading message for GIF creation
+            container.innerHTML = '<p>Creating animated GIF...</p>';
+            imageDataArray.forEach((imageData, index) => {
+                const img = new Image();
+                img.onload = function() {
+                    // Create a canvas to resize the image
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    canvas.width = 512;
+                    canvas.height = 512;
+                    // Draw and resize image
+                    ctx.drawImage(img, 0, 0, 512, 512);
+                    // Add frame to GIF with 500ms delay
+                    gif.addFrame(canvas, {delay: 500});
+                    loadedImages++;
+                    if (loadedImages === totalImages) {
+                        // All images loaded, render GIF
+                        gif.on('finished', function(blob) {
+                            const url = URL.createObjectURL(blob);
+                            const gifImg = document.createElement('img');
+                            gifImg.src = url;
+                            gifImg.className = 'generated-image';
+                            gifImg.alt = 'Generated animated GIF';
+                            container.innerHTML = '';
+                            container.appendChild(gifImg);
+                        });
+                        gif.render();
+                    }
+                };
+                img.src = `data:image/png;base64,${imageData}`;
+            });
+        }
+        function showError(message) {
+            const errorDiv = document.getElementById('error');
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+        }
+        // Allow Enter key to submit
+        document.getElementById('prompt').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter' && e.ctrlKey) {
+                generateImage();
+            }
+        });
+    </script>
+</body>
+</html>

main.py CHANGED Viewed

@@ -2,8 +2,9 @@ import os
 import re
 import httpx
 from fastapi import FastAPI, Request, HTTPException, Security
-from fastapi.responses import StreamingResponse, Response
 from fastapi.security import APIKeyHeader, APIKeyQuery
 from itertools import cycle
 import asyncio
 import json
@@ -65,6 +66,11 @@ async def get_project_id(key: str):
     raise HTTPException(status_code=500, detail="Could not extract project ID from any key.")
 # --- Proxy Endpoint ---
 @app.post("/v1beta/models/{model_path:path}")
 async def proxy(request: Request, model_path: str, api_key: str = Security(get_api_key)):

 import re
 import httpx
 from fastapi import FastAPI, Request, HTTPException, Security
+from fastapi.responses import StreamingResponse, Response, FileResponse
 from fastapi.security import APIKeyHeader, APIKeyQuery
+from fastapi.staticfiles import StaticFiles
 from itertools import cycle
 import asyncio
 import json
     raise HTTPException(status_code=500, detail="Could not extract project ID from any key.")
+# --- Frontend Route ---
+@app.get("/")
+async def frontend():
+    return FileResponse("index.html")
 # --- Proxy Endpoint ---
 @app.post("/v1beta/models/{model_path:path}")
 async def proxy(request: Request, model_path: str, api_key: str = Security(get_api_key)):