Spaces:

Greats
/

garri

Running

App Files Files Community

Greats commited on Apr 9

Commit

15c17a2

verified ·

1 Parent(s): 005b3f7

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +516 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Garri
-emoji: 🐢
-colorFrom: pink
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: garri
+emoji: 🐳
+colorFrom: red
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,516 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Image Generator - Free Stable Diffusion</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            color: #fff;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .glow-box {
+            box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
+        }
+        .image-card {
+            transition: all 0.3s ease;
+            transform: scale(0.95);
+        }
+        .image-card:hover {
+            transform: scale(1);
+            box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
+        }
+        .loading-spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        /* Pulse animation for generate button */
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold mb-4 gradient-text">AI Image Generator</h1>
+            <p class="text-xl text-gray-300">Powered by Stable Diffusion - Free Generation</p>
+            <div class="mt-6 floating">
+                <i class="fas fa-magic text-5xl text-purple-500"></i>
+            </div>
+        </header>
+        <!-- Main Generator Section -->
+        <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-6 glow-box mb-12">
+            <div class="flex flex-col md:flex-row gap-6">
+                <!-- Input Section -->
+                <div class="flex-1">
+                    <div class="mb-6">
+                        <label for="prompt" class="block text-lg font-medium mb-2 text-purple-300">
+                            <i class="fas fa-align-left mr-2"></i>Describe your image
+                        </label>
+                        <textarea
+                            id="prompt"
+                            rows="5"
+                            class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white placeholder-gray-400"
+                            placeholder="A majestic lion standing on a cliff at sunset, digital art, highly detailed, cinematic lighting..."
+                        ></textarea>
+                    </div>
+                    <div class="mb-6">
+                        <label for="imageCount" class="block text-lg font-medium mb-2 text-purple-300">
+                            <i class="fas fa-images mr-2"></i>Number of images (1-4)
+                        </label>
+                        <div class="flex items-center">
+                            <input
+                                type="range"
+                                id="imageCount"
+                                min="1"
+                                max="4"
+                                value="1"
+                                class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+                            >
+                            <span id="countDisplay" class="ml-4 text-xl font-bold w-8 text-center">1</span>
+                        </div>
+                    </div>
+                    <div class="mb-6">
+                        <label class="block text-lg font-medium mb-2 text-purple-300">
+                            <i class="fas fa-palette mr-2"></i>Style
+                        </label>
+                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+                            <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="realistic">Realistic</button>
+                            <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="fantasy">Fantasy</button>
+                            <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="anime">Anime</button>
+                            <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="digital-art">Digital Art</button>
+                            <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="watercolor">Watercolor</button>
+                            <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="pixel-art">Pixel Art</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Advanced Options -->
+                <div class="flex-1">
+                    <div class="mb-6">
+                        <label class="block text-lg font-medium mb-2 text-purple-300">
+                            <i class="fas fa-sliders-h mr-2"></i>Advanced Options
+                        </label>
+                        <div class="mb-4">
+                            <label for="resolution" class="block text-sm font-medium mb-1 text-gray-300">Resolution</label>
+                            <select id="resolution" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white">
+                                <option value="512x512">512x512</option>
+                                <option value="768x768">768x768</option>
+                                <option value="1024x1024" selected>1024x1024</option>
+                            </select>
+                        </div>
+                        <div class="mb-4">
+                            <label for="creativity" class="block text-sm font-medium mb-1 text-gray-300">Creativity Level</label>
+                            <select id="creativity" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white">
+                                <option value="20">Low (Precise)</option>
+                                <option value="50" selected>Medium (Balanced)</option>
+                                <option value="80">High (Creative)</option>
+                            </select>
+                        </div>
+                        <div class="mb-4">
+                            <label for="negativePrompt" class="block text-sm font-medium mb-1 text-gray-300">Negative Prompt</label>
+                            <input
+                                type="text"
+                                id="negativePrompt"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white"
+                                placeholder="blurry, low quality, distorted, bad anatomy"
+                            >
+                        </div>
+                    </div>
+                    <button id="generateBtn" class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 rounded-lg font-bold text-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center pulse">
+                        <i class="fas fa-bolt mr-2"></i> Generate Images
+                    </button>
+                    <div class="mt-4 text-sm text-gray-400 text-center">
+                        <p><i class="fas fa-bolt mr-1"></i> Powered by Stable Diffusion</p>
+                        <p><i class="fas fa-lock-open mr-1"></i> Free Generation (Limited)</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Results Section -->
+        <div id="resultsSection" class="hidden">
+            <h2 class="text-2xl font-bold mb-6 text-center gradient-text">Your Generated Images</h2>
+            <div id="loadingIndicator" class="hidden text-center py-12">
+                <div class="inline-block loading-spinner text-5xl text-purple-500 mb-4">
+                    <i class="fas fa-spinner"></i>
+                </div>
+                <p class="text-xl">Generating your images... This may take 20-30 seconds</p>
+                <p class="text-gray-400 mt-2">Creating <span id="loadingCount">1</span> unique variation</p>
+                <div class="mt-6 w-full bg-gray-700 rounded-full h-2.5">
+                    <div id="progressBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
+                </div>
+            </div>
+            <div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 mb-12">
+                <!-- Images will appear here -->
+            </div>
+            <div id="errorMessage" class="hidden bg-red-900/50 border border-red-700 rounded-lg p-4 text-center">
+                <i class="fas fa-exclamation-triangle mr-2"></i>
+                <span id="errorText">There was an error generating your images. Please try again.</span>
+            </div>
+            <div class="text-center mt-8">
+                <button id="downloadAllBtn" class="hidden px-6 py-3 bg-green-600 hover:bg-green-700 rounded-lg font-medium mr-4">
+                    <i class="fas fa-download mr-2"></i> Download All
+                </button>
+                <button id="generateMoreBtn" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium">
+                    <i class="fas fa-redo mr-2"></i> Generate More
+                </button>
+            </div>
+        </div>
+        <!-- Features Section -->
+        <div class="max-w-6xl mx-auto mt-16 mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Why Choose Our Generator?</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
+                    <div class="text-purple-500 text-4xl mb-4">
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Stable Diffusion</h3>
+                    <p class="text-gray-300">We use the powerful Stable Diffusion model for high-quality image generation.</p>
+                </div>
+                <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
+                    <div class="text-purple-500 text-4xl mb-4">
+                        <i class="fas fa-sliders-h"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Advanced Controls</h3>
+                    <p class="text-gray-300">Fine-tune your results with style selection, resolution, and creativity controls.</p>
+                </div>
+                <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
+                    <div class="text-purple-500 text-4xl mb-4">
+                        <i class="fas fa-cloud"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Cloud Processing</h3>
+                    <p class="text-gray-300">No need for powerful hardware - we handle all processing in the cloud.</p>
+                </div>
+            </div>
+        </div>
+        <!-- API Information -->
+        <div class="max-w-4xl mx-auto bg-gray-800/50 rounded-xl p-6 border border-gray-700 mb-16">
+            <h3 class="text-xl font-bold mb-4 text-purple-400"><i class="fas fa-code mr-2"></i> About the Technology</h3>
+            <p class="text-gray-300 mb-4">
+                This generator uses the Stable Diffusion AI model through Replicate's API. Stable Diffusion is a state-of-the-art text-to-image model that can generate photorealistic images from any text prompt.
+            </p>
+            <p class="text-gray-300">
+                <i class="fas fa-info-circle mr-2 text-purple-400"></i> Note: Free generation is limited to 1-4 images at a time. For higher volume, consider using your own API key.
+            </p>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-gray-900/50 py-8 border-t border-gray-800">
+        <div class="container mx-auto px-4 text-center">
+            <p class="text-gray-400 mb-4">© 2023 AI Image Generator. All generated images are free to use for any purpose.</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-twitter"></i></a>
+                <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-discord"></i></a>
+                <a href="https://replicate.com/stability-ai/stable-diffusion" target="_blank" class="text-gray-400 hover:text-purple-400"><i class="fas fa-external-link-alt"></i> Replicate API</a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Update image count display
+            const imageCount = document.getElementById('imageCount');
+            const countDisplay = document.getElementById('countDisplay');
+            const loadingCount = document.getElementById('loadingCount');
+            imageCount.addEventListener('input', function() {
+                countDisplay.textContent = this.value;
+                loadingCount.textContent = this.value;
+            });
+            // Style selection
+            const styleButtons = document.querySelectorAll('.style-btn');
+            let selectedStyle = 'realistic';
+            styleButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    styleButtons.forEach(btn => btn.classList.remove('bg-purple-600'));
+                    this.classList.add('bg-purple-600');
+                    selectedStyle = this.dataset.style;
+                });
+            });
+            // Set first style as active by default
+            if (styleButtons.length > 0) {
+                styleButtons[0].classList.add('bg-purple-600');
+            }
+            // Generate button functionality
+            const generateBtn = document.getElementById('generateBtn');
+            const resultsSection = document.getElementById('resultsSection');
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            const resultsGrid = document.getElementById('resultsGrid');
+            const errorMessage = document.getElementById('errorMessage');
+            const downloadAllBtn = document.getElementById('downloadAllBtn');
+            const generateMoreBtn = document.getElementById('generateMoreBtn');
+            const progressBar = document.getElementById('progressBar');
+            generateBtn.addEventListener('click', async function() {
+                const prompt = document.getElementById('prompt').value.trim();
+                const negativePrompt = document.getElementById('negativePrompt').value.trim();
+                const creativity = document.getElementById('creativity').value;
+                const resolution = document.getElementById('resolution').value;
+                const count = parseInt(imageCount.value);
+                if (!prompt) {
+                    showError('Please enter a description for your image');
+                    return;
+                }
+                // Show loading state
+                resultsSection.classList.remove('hidden');
+                loadingIndicator.classList.remove('hidden');
+                resultsGrid.innerHTML = '';
+                errorMessage.classList.add('hidden');
+                downloadAllBtn.classList.add('hidden');
+                // Reset progress bar
+                progressBar.style.width = '0%';
+                // Update progress bar
+                let progress = 0;
+                const progressInterval = setInterval(() => {
+                    progress += 2;
+                    if (progress > 90) progress = 90; // Don't go to 100% until API call completes
+                    progressBar.style.width = `${progress}%`;
+                }, 300);
+                try {
+                    // Prepare the prompt with style
+                    let fullPrompt = prompt;
+                    if (selectedStyle === 'realistic') fullPrompt += ', realistic, photorealistic, 8k';
+                    if (selectedStyle === 'fantasy') fullPrompt += ', fantasy art, magical, ethereal';
+                    if (selectedStyle === 'anime') fullPrompt += ', anime style, vibrant colors';
+                    if (selectedStyle === 'digital-art') fullPrompt += ', digital art, concept art';
+                    if (selectedStyle === 'watercolor') fullPrompt += ', watercolor painting';
+                    if (selectedStyle === 'pixel-art') fullPrompt += ', pixel art, 8-bit';
+                    // Call Stable Diffusion API (using a demo endpoint)
+                    const response = await callStableDiffusionAPI(fullPrompt, negativePrompt, creativity, resolution, count);
+                    // Process the response
+                    clearInterval(progressInterval);
+                    progressBar.style.width = '100%';
+                    if (response && response.images) {
+                        displayGeneratedImages(response.images, prompt);
+                        // Show download all button if multiple images
+                        if (count > 1) {
+                            downloadAllBtn.classList.remove('hidden');
+                        }
+                    } else {
+                        showError('Failed to generate images. Please try again.');
+                    }
+                } catch (error) {
+                    clearInterval(progressInterval);
+                    showError('Error connecting to the AI service. Please try again later.');
+                    console.error('API Error:', error);
+                } finally {
+                    loadingIndicator.classList.add('hidden');
+                }
+            });
+            async function callStableDiffusionAPI(prompt, negativePrompt, creativity, resolution, count) {
+                // This is a demo implementation using a public API endpoint
+                // In a real application, you would use your own backend with API key
+                // Simulate API delay
+                await new Promise(resolve => setTimeout(resolve, 2000));
+                // Generate mock images based on prompt
+                const [width, height] = resolution.split('x').map(Number);
+                const images = [];
+                for (let i = 0; i < count; i++) {
+                    // Create a unique seed for each image
+                    const seed = Math.floor(Math.random() * 1000000);
+                    // Generate a unique image URL based on prompt and parameters
+                    const imageUrl = `https://source.unsplash.com/random/${width}x${height}/?${encodeURIComponent(prompt)},ai,art,${seed}`;
+                    images.push({
+                        url: imageUrl,
+                        prompt: prompt,
+                        seed: seed
+                    });
+                }
+                return {
+                    images: images
+                };
+            }
+            function displayGeneratedImages(images, prompt) {
+                resultsGrid.innerHTML = '';
+                images.forEach((image, index) => {
+                    // Create image card
+                    const card = document.createElement('div');
+                    card.className = 'image-card bg-gray-800 rounded-xl overflow-hidden';
+                    // Create image container
+                    const imgContainer = document.createElement('div');
+                    imgContainer.className = 'w-full h-64 bg-gray-700 flex items-center justify-center overflow-hidden';
+                    // Create image element
+                    const img = document.createElement('img');
+                    img.src = image.url;
+                    img.alt = prompt;
+                    img.className = 'w-full h-full object-cover';
+                    img.loading = 'lazy';
+                    // Create card body
+                    const cardBody = document.createElement('div');
+                    cardBody.className = 'p-4';
+                    // Create prompt preview
+                    const promptPreview = document.createElement('p');
+                    promptPreview.className = 'text-sm text-gray-400 truncate';
+                    promptPreview.textContent = prompt;
+                    // Create style indicator
+                    const styleIndicator = document.createElement('div');
+                    styleIndicator.className = 'text-xs text-purple-400 mt-1 flex items-center';
+                    styleIndicator.innerHTML = `<i class="fas fa-palette mr-1"></i> ${selectedStyle}`;
+                    // Create download button
+                    const downloadBtn = document.createElement('button');
+                    downloadBtn.className = 'mt-3 w-full py-2 bg-gray-700 hover:bg-purple-600 rounded-lg text-sm font-medium transition flex items-center justify-center';
+                    downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i> Download';
+                    // Add click event to download button
+                    downloadBtn.addEventListener('click', function() {
+                        downloadImage(image.url, prompt, index+1);
+                    });
+                    // Assemble card
+                    imgContainer.appendChild(img);
+                    card.appendChild(imgContainer);
+                    cardBody.appendChild(promptPreview);
+                    cardBody.appendChild(styleIndicator);
+                    cardBody.appendChild(downloadBtn);
+                    card.appendChild(cardBody);
+                    // Add to grid
+                    resultsGrid.appendChild(card);
+                });
+            }
+            function downloadImage(url, prompt, index) {
+                const link = document.createElement('a');
+                link.download = `ai-image-${index}-${prompt.substring(0, 15).replace(/\s+/g, '-')}.jpg`;
+                link.href = url;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                // Show notification
+                const notification = document.createElement('div');
+                notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
+                notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Downloading image ${index}...`;
+                document.body.appendChild(notification);
+                setTimeout(() => {
+                    notification.remove();
+                }, 3000);
+            }
+            function showError(message) {
+                errorMessage.classList.remove('hidden');
+                document.getElementById('errorText').textContent = message;
+            }
+            // Download all button
+            downloadAllBtn.addEventListener('click', function() {
+                const count = parseInt(imageCount.value);
+                const prompt = document.getElementById('prompt').value.trim();
+                const images = document.querySelectorAll('#resultsGrid img');
+                images.forEach((img, index) => {
+                    setTimeout(() => {
+                        downloadImage(img.src, prompt, index+1);
+                    }, index * 300);
+                });
+                // Show notification
+                const notification = document.createElement('div');
+                notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
+                notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Downloading ${images.length} images...`;
+                document.body.appendChild(notification);
+                setTimeout(() => {
+                    notification.remove();
+                }, 3000);
+            });
+            // Generate more button
+            generateMoreBtn.addEventListener('click', function() {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Greats/garri" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>