Spaces:

bibibi12345
/

ve2gem

Paused

App Files Files Community

bibibi12345 commited on Aug 27, 2025

Commit

ed0fd8a

1 Parent(s): 19bbe02

added animation frontend

Browse files

Files changed (1) hide show

index.html +254 -53

index.html CHANGED Viewed

@@ -113,6 +113,59 @@
             margin-top: 20px;
             display: none;
         }
     </style>
 </head>
 <body>
@@ -125,8 +178,18 @@
         </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>
@@ -145,8 +208,96 @@
         </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();
@@ -156,8 +307,9 @@
                 return;
             }
-            if (!prompt) {
-                showError('Please enter a prompt');
                 return;
             }
@@ -168,6 +320,32 @@
             document.querySelector('button').disabled = true;
             try {
                 const response = await fetch('/v1beta/models/gemini-2.5-flash-image-preview:generateContent', {
                     method: 'POST',
                     headers: {
@@ -177,9 +355,7 @@
                     body: JSON.stringify({
                         contents: [{
                             role: "user",
-                            parts: [{
-                                text: prompt
-                            }]
                         }]
                     })
                 });
@@ -241,8 +417,13 @@
                     img.alt = 'Generated image';
                     imageContainerDiv.appendChild(img);
                 } else if (imageParts.length > 1) {
-                    // Multiple images - create animated GIF
-                    createAnimatedGif(imageParts, imageContainerDiv);
                 }
                 resultDiv.style.display = 'block';
@@ -252,52 +433,72 @@
         }
         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}`;
             });
         }

             margin-top: 20px;
             display: none;
         }
+        .file-upload {
+            border: 2px dashed #ddd;
+            border-radius: 5px;
+            padding: 20px;
+            text-align: center;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: border-color 0.3s;
+        }
+        .file-upload:hover {
+            border-color: #4CAF50;
+        }
+        .file-upload.dragover {
+            border-color: #4CAF50;
+            background-color: #f0f8f0;
+        }
+        .uploaded-images {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        .uploaded-image {
+            position: relative;
+            width: 100px;
+            height: 100px;
+        }
+        .uploaded-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 5px;
+            border: 2px solid #ddd;
+        }
+        .remove-image {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background: #ff4444;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .remove-image:hover {
+            background: #cc0000;
+        }
     </style>
 </head>
 <body>
         </div>
         <div class="input-group">
+            <label for="imageUpload">Upload Images (optional):</label>
+            <div class="file-upload" id="fileUpload" onclick="document.getElementById('imageUpload').click()">
+                <p>Click here or drag and drop images to upload</p>
+                <p style="font-size: 12px; color: #666;">Supports: JPG, PNG, GIF, WebP</p>
+            </div>
+            <input type="file" id="imageUpload" multiple accept="image/*" style="display: none;">
+            <div class="uploaded-images" id="uploadedImages"></div>
+        </div>
+        <div class="input-group">
+            <label for="prompt">Text Prompt:</label>
+            <textarea id="prompt" placeholder="Describe what you want to do with the images or generate..."></textarea>
         </div>
         <button onclick="generateImage()">Generate Image</button>
         </div>
     </div>
     <script>
+        // Simple fallback for GIF creation if the library fails to load
+        let GIF_LIBRARY_LOADED = false;
+        // Try to load gif.js library
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js';
+        script.onload = function() {
+            GIF_LIBRARY_LOADED = true;
+        };
+        script.onerror = function() {
+            console.warn('GIF library failed to load, will show images individually');
+        };
+        document.head.appendChild(script);
+        // Global variable to store uploaded images
+        let uploadedImages = [];
+        // File upload handling
+        document.getElementById('imageUpload').addEventListener('change', handleFileSelect);
+        const fileUpload = document.getElementById('fileUpload');
+        fileUpload.addEventListener('dragover', handleDragOver);
+        fileUpload.addEventListener('drop', handleDrop);
+        fileUpload.addEventListener('dragleave', handleDragLeave);
+        function handleFileSelect(event) {
+            const files = Array.from(event.target.files);
+            processFiles(files);
+        }
+        function handleDragOver(event) {
+            event.preventDefault();
+            fileUpload.classList.add('dragover');
+        }
+        function handleDrop(event) {
+            event.preventDefault();
+            fileUpload.classList.remove('dragover');
+            const files = Array.from(event.dataTransfer.files);
+            processFiles(files);
+        }
+        function handleDragLeave(event) {
+            event.preventDefault();
+            fileUpload.classList.remove('dragover');
+        }
+        function processFiles(files) {
+            files.forEach(file => {
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const imageData = {
+                            name: file.name,
+                            data: e.target.result.split(',')[1], // Remove data:image/...;base64, prefix
+                            mimeType: file.type
+                        };
+                        uploadedImages.push(imageData);
+                        displayUploadedImage(imageData, uploadedImages.length - 1);
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+        function displayUploadedImage(imageData, index) {
+            const container = document.getElementById('uploadedImages');
+            const imageDiv = document.createElement('div');
+            imageDiv.className = 'uploaded-image';
+            imageDiv.innerHTML = `
+                <img src="data:${imageData.mimeType};base64,${imageData.data}" alt="${imageData.name}">
+                <button class="remove-image" onclick="removeImage(${index})">×</button>
+            `;
+            container.appendChild(imageDiv);
+        }
+        function removeImage(index) {
+            uploadedImages.splice(index, 1);
+            refreshUploadedImages();
+        }
+        function refreshUploadedImages() {
+            const container = document.getElementById('uploadedImages');
+            container.innerHTML = '';
+            uploadedImages.forEach((imageData, index) => {
+                displayUploadedImage(imageData, index);
+            });
+        }
         async function generateImage() {
             const apiKey = document.getElementById('apiKey').value.trim();
             const prompt = document.getElementById('prompt').value.trim();
                 return;
             }
+            // Check if we have either a prompt or uploaded images
+            if (!prompt && uploadedImages.length === 0) {
+                showError('Please enter a prompt or upload at least one image');
                 return;
             }
             document.querySelector('button').disabled = true;
             try {
+                // Build the parts array with text and images
+                const parts = [];
+                // Add text prompt
+                if (prompt) {
+                    parts.push({
+                        text: prompt
+                    });
+                }
+                // Add uploaded images
+                uploadedImages.forEach(imageData => {
+                    parts.push({
+                        inlineData: {
+                            mimeType: imageData.mimeType,
+                            data: imageData.data
+                        }
+                    });
+                });
+                // Ensure we have at least some content
+                if (parts.length === 0) {
+                    showError('Please enter a prompt or upload at least one image');
+                    return;
+                }
                 const response = await fetch('/v1beta/models/gemini-2.5-flash-image-preview:generateContent', {
                     method: 'POST',
                     headers: {
                     body: JSON.stringify({
                         contents: [{
                             role: "user",
+                            parts: parts
                         }]
                     })
                 });
                     img.alt = 'Generated image';
                     imageContainerDiv.appendChild(img);
                 } else if (imageParts.length > 1) {
+                    // Multiple images - try to create animated GIF or show individually
+                    if (GIF_LIBRARY_LOADED && typeof GIF !== 'undefined') {
+                        createAnimatedGif(imageParts, imageContainerDiv);
+                    } else {
+                        // Fallback: show all images individually
+                        showMultipleImages(imageParts, imageContainerDiv);
+                    }
                 }
                 resultDiv.style.display = 'block';
         }
         function createAnimatedGif(imageDataArray, container) {
+            try {
+                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}`;
+                });
+            } catch (error) {
+                console.error('Error creating GIF:', error);
+                // Fallback to showing individual images
+                showMultipleImages(imageDataArray, container);
+            }
+        }
+        function showMultipleImages(imageDataArray, container) {
+            container.innerHTML = '<p>Multiple images generated:</p>';
             imageDataArray.forEach((imageData, index) => {
+                const img = document.createElement('img');
                 img.src = `data:image/png;base64,${imageData}`;
+                img.className = 'generated-image';
+                img.alt = `Generated image ${index + 1}`;
+                img.style.marginBottom = '10px';
+                img.style.display = 'block';
+                container.appendChild(img);
             });
         }