Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Mar 24

Commit

6fa9a95

verified ·

1 Parent(s): 4a303cf

Update image-playground.html

Browse files

Files changed (1) hide show

image-playground.html +613 -759

image-playground.html CHANGED Viewed

@@ -1,769 +1,623 @@
 <!DOCTYPE html>
-<html lang="en" class="light">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LOKI.AI IMAGE PLAYGROUND</title>
-    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
-    <style>
-        * {
-            font-family: 'DM Sans', sans-serif;
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            background-color: #f9f5f6; /* Light background */
-            color: #2d3748; /* Dark text */
-            transition: background-color 0.5s ease, color 0.5s ease;
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-        .dark-mode {
-            background-color: #1a202c; /* Dark background */
-            color: #f7fafc; /* Light text */
-        }
-        .container {
-            max-width: 800px;
-            width: 100%;
-            background-color: #fff; /* White container */
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            padding: 30px;
-            transition: background-color 0.5s ease, box-shadow 0.3s ease;
-        }
-        .dark-mode .container {
-            background-color: #2d3748; /* Dark container */
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-        h1 {
-            font-size: 2.25rem; /* Larger heading */
-            font-weight: bold;
-            margin-bottom: 20px;
-            color: #1e293b; /* Very dark heading */
-            text-align: center;
-            transition: color 0.5s ease;
-        }
-        .dark-mode h1 {
-            color: #f56565; /* Red color for heading in dark mode */
-        }
-        .flex {
-            display: flex;
-            align-items: center;
-        }
-        .justify-between {
-            justify-content: space-between;
-        }
-        .mb-6 {
-            margin-bottom: 24px;
-        }
-        .items-center {
-            align-items: center;
-        }
-        .space-x-4 > * + * {
-            margin-left: 16px;
-        }
-        .text-sm {
-            font-size: 0.875rem;
-        }
-        .text-gray-500 {
-            color: #718096;
-        }
-        .dark-mode .text-gray-500 {
-            color: #a0aec0;
-        }
-        .theme-toggle {
-            position: relative;
-            width: 50px; /* Slightly wider */
-            height: 26px; /* Slightly taller */
-            border-radius: 13px; /* Ensure proper rounding */
-            background-color: #e2e8f0; /* Light background */
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        .dark-mode .theme-toggle {
-            background-color: #4a5568; /* Darker background */
-        }
-        .theme-toggle-thumb {
-            position: absolute;
-            top: 3px; /* Adjusted position */
-            left: 3px; /* Adjusted position */
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background-color: white;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-            transition: transform 0.3s ease;
-        }
-        .dark-mode .theme-toggle-thumb {
-            transform: translateX(24px); /* Increased translation */
-        }
-        .grid {
-            display: grid;
-        }
-        .grid-cols-1 {
-            grid-template-columns: repeat(1, minmax(0, 1fr));
-        }
-        .md\:grid-cols-2 {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-        .md\:grid-cols-3 {
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-        }
-        .gap-4 {
-            gap: 16px;
-        }
-        .mt-2 {
-            margin-top: 8px;
-        }
-        .mb-1 {
-            margin-bottom: 4px;
-        }
-        .block {
-            display: block;
-        }
-        .text-sm {
-            font-size: 0.875rem;
-        }
-        .font-medium {
-            font-weight: 500;
-        }
-        .text-gray-700 {
-            color: #4a5568;
-        }
-        .dark-mode .text-gray-700 {
-            color: #cbd5e0;
-        }
-        .relative {
-            position: relative;
-        }
-        .w-full {
-            width: 100%;
-        }
-        .px-3 {
-            padding-left: 12px;
-            padding-right: 12px;
-        }
-        .py-2 {
-            padding-top: 8px;
-            padding-bottom: 8px;
-        }
-        .bg-gray-50 {
-            background-color: #f7fafc;
-        }
-        .dark-mode .bg-gray-50 {
-            background-color: #2d3748;
-        }
-        .border {
-            border-width: 1px;
-            border-style: solid;
-        }
-        .border-gray-200 {
-            border-color: #e2e8f0;
-        }
-        .dark-mode .border-gray-200 {
-            border-color: #4a5568;
-        }
-        .rounded-lg {
-            border-radius: 8px;
-        }
-        .focus\:outline-none:focus {
-            outline: none;
-        }
-        .focus\:ring-1:focus {
-            --tw-ring-offset-width: 0px;
-            --tw-ring-opacity: 1;
-            ring-width: 1px;
-            ring-color: rgba(0, 0, 0, 0.05);
-        }
-        .dark-mode .focus\:ring-1:focus {
-            ring-color: rgba(255, 255, 255, 0.2);
-        }
-        .text-gray-900 {
-            color: #1a202c;
-        }
-        .dark-mode .text-gray-900 {
-            color: #f7fafc;
-        }
-        .appearance-none {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-        }
-        .pointer-events-none {
-            pointer-events: none;
-        }
-        .absolute {
-            position: absolute;
-        }
-        .inset-y-0 {
-            top: 0;
-            bottom: 0;
-        }
-        .right-0 {
-            right: 0;
-        }
-        .flex {
-            display: flex;
-            align-items: center;
-        }
-        .px-2 {
-            padding-left: 8px;
-            padding-right: 8px;
-        }
-        .text-gray-300 {
-            color: #cbd5e0;
-        }
-        .dark-mode .text-gray-300 {
-            color: #a0aec0;
-        }
-        .h-4 {
-            height: 1rem;
-        }
-        .w-4 {
-            width: 1rem;
-        }
-        .fill-none {
-            fill: none;
-        }
-        .stroke-current {
-            stroke: currentColor;
-        }
-        .stroke-linecap-round {
-            stroke-linecap: round;
-        }
-        .stroke-linejoin-round {
-            stroke-linejoin: round;
-        }
-        .stroke-width-2 {
-            stroke-width: 2;
-        }
-        .mt-6 {
-            margin-top: 24px;
-        }
-        .text-center {
-            text-align: center;
-        }
-        .text-lg {
-            font-size: 1.125rem;
-            line-height: 1.75rem;
-        }
-        .font-semibold {
-            font-weight: 600;
-        }
-        .hidden {
-            display: none;
-        }
-        .loading {
-            width: 40px;
-            height: 40px;
-            border: 4px solid #f3f3f3;
-            border-bottom-color: #000;
-            border-radius: 50%;
-            animation: rotation 1.2s linear infinite;
-        }
-        .dark-mode .loading {
-            border-color: #333;
-            border-bottom-color: #fff;
-        }
-        @keyframes rotation {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .image-container {
-            border-radius: 8px;
-            overflow: hidden;
-            position: relative; /* Make sure the container is a positioning context */
-        }
-        .image-container img {
-            width: 100%;
-            height: auto;
-            display: block; /* Prevent extra space below image */
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow to images */
-            transition: transform 0.2s ease-in-out;
-        }
-        .image-container img:hover {
-            transform: scale(1.03);
-        }
-        .btn-primary {
-            padding: 10px 20px;
-            border-radius: 8px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-            border: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-        }
-        .btn-primary {
-            background-color: #6b7280; /* Gray 600 */
-            color: white;
-        }
-        .btn-primary:hover {
-            background-color: #4b5563; /* Gray 700 */
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        .dark-mode .btn-primary {
-            background-color: #f5f5f5;
-            color: #1a202c;
-        }
-        .dark-mode .btn-primary:hover {
-            background-color: #e0e0e0;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        .btn-secondary {
-            padding: 8px;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-            border: none;
-            display: flex; /* Use flexbox for centering */
-            align-items: center;
-            justify-content: center;
-        }
-        .btn-secondary {
-            background-color: white;
-            color: #1a202c;
-        }
-        .btn-secondary:hover {
-            background-color: #f0f0f0;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-        .dark-mode .btn-secondary {
-            background-color: #4a5568;
-            color: #fff;
-        }
-        .dark-mode .btn-secondary:hover {
-            background-color: #718096;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-        #error {
-            background-color: #fee2e2;
-            color: #dc2626;
-            padding: 16px;
-            border-radius: 8px;
-            margin-top: 20px;
-            border: 1px solid #fecaca;
-        }
-        .dark-mode #error {
-            background-color: #721c24;
-            color: #fecaca;
-            border-color: #b91c1c;
-        }
-        .text-xs {
-            font-size: 0.75rem;
-            color: #a0aec0;
-            margin-top: 16px;
-            text-align: center;
-        }
-        .dark-mode .text-xs {
-            color: #cbd5e0;
-        }
-        /* Confetti Animation */
-        .confetti {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none; /* Allows clicks to go through */
-            z-index: 1000; /* Ensure it's on top */
-        }
-        .confetti-piece {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background-color: #fcd34d; /* Yellow */
-            border-radius: 50%;
-            opacity: 0;
-            animation: confetti-fall 3s forwards, confetti-rotate 2s infinite;
-        }
-        .confetti-piece:nth-child(even) {
-            background-color: #60a5fa; /* Blue */
-        }
-        .confetti-piece:nth-child(3n) {
-            background-color: #f472b6; /* Pink */
-        }
-        .confetti-piece:nth-child(4n) {
-            background-color: #34d399; /* Green */
-        }
-        @keyframes confetti-fall {
-            from {
-                opacity: 0;
-                transform: translateY(-50px) rotate(0deg);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(100vh) rotate(720deg);
-            }
-        }
-        @keyframes confetti-rotate {
-            from {
-                transform: rotate(0deg);
-            }
-            to {
-                transform: rotate(360deg);
-            }
-        }
-    </style>
 </head>
-<body class="light">
-    <div class="container">
-        <h1>LOKI.AI IMAGE PLAYGROUND</h1>
-        <div class="flex justify-between mb-6">
-            <div class="flex items-center space-x-4">
-                <span class="text-sm text-gray-500">Theme</span>
-                <div id="theme-toggle" class="theme-toggle">
-                    <div class="theme-toggle-thumb"></div>
-                </div>
-            </div>
         </div>
-        <div class="space-y-4">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                    <label for="model" class="block text-sm font-medium text-gray-700 mb-1">Select Model</label>
-                    <div class="relative">
-                        <select id="model" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 text-gray-900 appearance-none">
-                            <option value="Flux Realism">Flux Realism</option>
-                            <option value="Flux Pro Ultra">Flux Pro Ultra</option>
-                            <option value="grok-2-aurora">grok-2-aurora</option>
-                            <option value="Flux Pro">Flux Pro</option>
-                            <option value="Flux Pro Ultra Raw">Flux Pro Ultra Raw</option>
-                            <option value="Flux Dev">Flux Dev</option>
-                            <option value="Flux Schnell">Flux Schnell</option>
-                            <option value="stable-diffusion-3-large-turbo">stable-diffusion-3-large-turbo</option>
-                            <option value="sdxl-lightning-4step">sdxl-lightning-4step</option>
-                            <option value="dall-e-3">dall-e-3</option>
-                        </select>
-                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-300">
-                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <label for="prompt" class="block text-sm font-medium text-gray-700 mb-1">Enter Prompt</label>
-                    <input type="text" id="prompt" placeholder="Describe what you want to see..." class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 text-gray-900" value="sky">
-                </div>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
-                <div>
-                    <label for="image-size" class="block text-sm font-medium text-gray-700 mb-1">Image Size</label>
-                    <select id="image-size" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 text-gray-900 appearance-none">
-                        <option value="512">512 x 512</option>
-                        <option value="768">768 x 768</option>
-                        <option value="1024" selected>1024 x 1024</option>
-                        <option value="1536">1536 x 1536</option>
-                    </select>
-                </div>
-                <div>
-                    <label for="image-count" class="block text-sm font-medium text-gray-700 mb-1">Number of Images</label>
-                    <select id="image-count" class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 text-gray-900 appearance-none">
-                        <option value="1" selected>1</option>
-                        <option value="2">2</option>
-                        <option value="4">4</option>
-                    </select>
-                </div>
-                <div class="flex items-end">
-                    <button id="generate" class="btn-primary">
-                        Generate Image
-                    </button>
-                </div>
-            </div>
-            <div id="result" class="mt-6 hidden">
-                <div class="text-center mb-4">
-                    <h2 class="text-lg font-semibold">Your Creation</h2>
-                    <p class="text-sm text-gray-500">Created with <span id="model-used"></span></p>
-                </div>
-                <div id="images-container" class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    </div>
-            </div>
-            <div id="loading" class="flex flex-col items-center justify-center py-6 hidden">
-                <div class="loading mb-3"></div>
-                <p class="text-gray-600 text-sm">Creating your image...</p>
-            </div>
-            <div id="error" class="hidden">
-                <p class="font-medium">Oops! Something went wrong.</p>
-                <p class="text-sm">Please try again or check your connection.</p>
-            </div>
         </div>
     </div>
-    <div class="text-xs">
-        © 2025 LOKI.AI IMAGE PLAYGROUND | All rights reserved
     </div>
-    <div id="confetti-canvas" class="confetti"></div>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // Elements
-            const themeToggle = document.getElementById('theme-toggle');
-            const generateBtn = document.getElementById('generate');
-            const promptInput = document.getElementById('prompt');
-            const modelSelect = document.getElementById('model');
-            const imageSizeSelect = document.getElementById('image-size');
-            const imageCountSelect = document.getElementById('image-count');
-            const resultDiv = document.getElementById('result');
-            const loadingDiv = document.getElementById('loading');
-            const errorDiv = document.getElementById('error');
-            const imagesContainer = document.getElementById('images-container');
-            const modelUsed = document.getElementById('model-used');
-            const body = document.body;
-            // Theme Toggle
-            themeToggle.addEventListener('click', () => {
-                body.classList.toggle('dark-mode');
-                localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark-mode' : 'light');
-            });
-            // Check for saved theme preference
-            if (localStorage.getItem('theme') === 'dark-mode' ||
-                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-                body.classList.add('dark-mode');
-            } else {
-                body.classList.remove('dark-mode');
-            }
-            // Generate image
-            generateBtn.addEventListener('click', async () => {
-                const prompt = promptInput.value.trim();
-                const model = modelSelect.value;
-                const size = parseInt(imageSizeSelect.value);
-                const number = parseInt(imageCountSelect.value);
-                if (!prompt) {
-                    promptInput.style.borderColor = 'red';
-                    setTimeout(() => {
-                        promptInput.style.borderColor = '';
-                    }, 1500);
-                    return;
-                }
-                // Show loading state
-                resultDiv.classList.add('hidden');
-                errorDiv.classList.add('hidden');
-                loadingDiv.classList.remove('hidden');
-                generateBtn.disabled = true;
-                try {
-                    const response = await fetch('https://parthsadaria-lokiai.hf.space/images/generations', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            model: model,
-                            prompt: prompt,
-                            size: size,
-                            number: number
-                        })
-                    });
-                    if (!response.ok) {
-                        throw new Error('API request failed');
-                    }
-                    const data = await response.json();
-                    // Display result
-                    loadingDiv.classList.add('hidden');
-                    resultDiv.classList.remove('hidden');
-                    modelUsed.textContent = model;
-                    // Clear previous images
-                    imagesContainer.innerHTML = '';
-                    // Add generated images
-                    if (data.data && data.data.length > 0) {
-                        // Set grid columns based on number of images.
-                        if (number > 1) {
-                            imagesContainer.className = `grid grid-cols-1 ${number > 1 ? 'md:grid-cols-2' : ''} gap-4`;
-                        } else {
-                            imagesContainer.className = 'mx-auto max-w-lg';
-                        }
-                        data.data.forEach((item, index) => { // Changed to data.data and iterate over item
-                            const imgSrc = item.url;
-                            const imgContainer = document.createElement('div');
-                            imgContainer.className = 'image-container relative';
-                            const img = document.createElement('img');
-                            img.src = imgSrc;
-                            img.className = 'w-full h-auto';
-                            img.alt = `Generated image ${index + 1}`;
-                            const downloadBtn = document.createElement('button');
-                            downloadBtn.className = 'btn-secondary absolute bottom-3 right-3';
-                            downloadBtn.innerHTML = `
-                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
-                                </svg>
-                            `;
-                            downloadBtn.addEventListener('click', () => {
-                                const a = document.createElement('a');
-                                a.href = imgSrc;
-                                a.download = `loki-ai-${model}-${index + 1}-${new Date().getTime()}.png`;
-                                document.body.appendChild(a);
-                                a.click();
-                                document.body.removeChild(a);
-                            });
-                            imgContainer.appendChild(img);
-                            imgContainer.appendChild(downloadBtn);
-                            imagesContainer.appendChild(imgContainer);
-                        });
-                        // Trigger confetti animation
-                        triggerConfetti();
-                    }
-                } catch (error) {
-                    console.error('Error:', error);
-                    loadingDiv.classList.add('hidden');
-                    errorDiv.classList.remove('hidden');
-                } finally {
-                    generateBtn.disabled = false;
-                }
             });
-            // Enter key to generate
-            promptInput.addEventListener('keypress', (e) => {
-                if (e.key === 'Enter') {
-                    generateBtn.click();
-                }
-            });
-            // Confetti Animation
-            function triggerConfetti() {
-                const confettiCanvas = document.getElementById('confetti-canvas');
-                const numConfetti = 200; // More confetti
-                confettiCanvas.innerHTML = ''; // Clear any existing confetti
-                for (let i = 0; i < numConfetti; i++) {
-                    const confettiPiece = document.createElement('div');
-                    confettiPiece.className = 'confetti-piece';
-                    confettiPiece.style.left = `${Math.random() * 100}vw`;
-                    confettiPiece.style.animationDuration = `${Math.random() * 2 + 2}s`; // Longer duration
-                    confettiPiece.style.opacity = '0'; // Start with 0 opacity
-                    confettiPiece.style.transform = `scale(${Math.random() * 0.5 + 0.5})`; // Varying size
-                    confettiPiece.style.rotate = `${Math.random() * 360}deg`;
-                    confettiCanvas.appendChild(confettiPiece);
-                    // Remove confetti element after animation finishes
-                    confettiPiece.addEventListener('animationend', () => {
-                        confettiPiece.remove();
-                    });
-                }
-            }
-        });
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LOKI.AI IMAGE PLAYGROUND</title>
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+  <style>
+    :root {
+      --primary-bg: #ffffff;
+      --secondary-bg: #f8f8f8;
+      --text-color: #000000;
+      --border-color: #e0e0e0;
+      --accent-color: #000000;
+      --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .dark {
+      --primary-bg: #121212;
+      --secondary-bg: #1e1e1e;
+      --text-color: #ffffff;
+      --border-color: #333333;
+      --accent-color: #ffffff;
+      --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'DM Sans', sans-serif;
+    }
+    body {
+      background-color: var(--secondary-bg);
+      color: var(--text-color);
+      transition: all 0.3s ease;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+    .card {
+      background-color: var(--primary-bg);
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: var(--card-shadow);
+      transition: all 0.3s ease;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+    .title {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--text-color);
+    }
+    .theme-toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .toggle-label {
+      font-size: 14px;
+      color: var(--text-color);
+      opacity: 0.7;
+    }
+    .toggle-switch {
+      position: relative;
+      width: 48px;
+      height: 24px;
+      background-color: #e5e5e5;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+    .dark .toggle-switch {
+      background-color: #555;
+    }
+    .toggle-thumb {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: white;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      transition: transform 0.3s;
+    }
+    .dark .toggle-thumb {
+      transform: translateX(24px);
+    }
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 16px;
+      margin-bottom: 16px;
+    }
+    @media (min-width: 768px) {
+      .form-row {
+        grid-template-columns: 1fr 1fr;
+      }
+      .form-row.three-cols {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .form-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--text-color);
+      opacity: 0.8;
+    }
+    .form-control {
+      padding: 10px 12px;
+      border-radius: 8px;
+      border: 1px solid var(--border-color);
+      background-color: var(--secondary-bg);
+      color: var(--text-color);
+      font-size: 14px;
+      transition: all 0.2s;
+      appearance: none;
+    }
+    .form-control:focus {
+      outline: none;
+      border-color: var(--accent-color);
+      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    }
+    .dark .form-control:focus {
+      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+    }
+    .select-wrapper {
+      position: relative;
+    }
+    .select-wrapper:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 12px;
+      transform: translateY(-50%);
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid var(--text-color);
+      pointer-events: none;
+    }
+    .btn {
+      padding: 10px 18px;
+      border-radius: 8px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      border: none;
+      text-align: center;
+    }
+    .btn-primary {
+      background-color: var(--accent-color);
+      color: var(--primary-bg);
+    }
+    .btn-primary:hover {
+      opacity: 0.9;
+      transform: translateY(-2px);
+    }
+    .btn-primary:active {
+      transform: translateY(0);
+    }
+    .btn-download {
+      background-color: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(4px);
+      padding: 8px;
+      border-radius: 50%;
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
+    .dark .btn-download {
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+    .btn-download svg {
+      width: 20px;
+      height: 20px;
+      stroke: var(--accent-color);
+    }
+    .btn-full {
+      width: 100%;
+    }
+    .text-center {
+      text-align: center;
+    }
+    .result {
+      margin-top: 24px;
+      display: none;
+    }
+    .result-title {
+      font-size: 18px;
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+    .result-subtitle {
+      font-size: 14px;
+      opacity: 0.7;
+      margin-bottom: 16px;
+    }
+    .images-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 16px;
+    }
+    .images-grid.multi-column {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .image-wrapper {
+      position: relative;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+      transform-origin: center;
+    }
+    .dark .image-wrapper {
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    }
+    .image-wrapper img {
+      width: 100%;
+      height: auto;
+      display: block;
+      transition: transform 0.3s ease;
+    }
+    .image-wrapper:hover img {
+      transform: scale(1.03);
+    }
+    .loading {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 32px 0;
+    }
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid rgba(0, 0, 0, 0.1);
+      border-left-color: var(--accent-color);
+      border-radius: 50%;
+      animation: spinner 1s linear infinite;
+      margin-bottom: 16px;
+    }
+    .dark .loading-spinner {
+      border-color: rgba(255, 255, 255, 0.1);
+      border-left-color: var(--accent-color);
+    }
+    @keyframes spinner {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    .loading-text {
+      font-size: 14px;
+      opacity: 0.7;
+    }
+    .error {
+      background-color: rgba(255, 0, 0, 0.1);
+      color: #e53e3e;
+      padding: 16px;
+      border-radius: 8px;
+      margin-top: 24px;
+      display: none;
+    }
+    .dark .error {
+      background-color: rgba(255, 0, 0, 0.05);
+    }
+    .error-title {
+      font-size: 16px;
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+    .error-message {
+      font-size: 14px;
+      opacity: 0.8;
+    }
+    .footer {
+      margin-top: 16px;
+      text-align: center;
+      font-size: 12px;
+      opacity: 0.5;
+    }
+    .confetti {
+      position: fixed;
+      width: 10px;
+      height: 10px;
+      background-color: #f00;
+      opacity: 0;
+      top: 0;
+      left: 0;
+    }
+  </style>
 </head>
+<body>
+  <div class="container">
+    <div class="card animate__animated animate__fadeIn">
+      <div class="header">
+        <h1 class="title animate__animated animate__slideInLeft">LOKI.AI IMAGE PLAYGROUND</h1>
+        <div class="theme-toggle animate__animated animate__slideInRight">
+          <span class="toggle-label">Theme</span>
+          <div id="theme-toggle" class="toggle-switch">
+            <div class="toggle-thumb"></div>
+          </div>
         </div>
+      </div>
+      <div class="form-row animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
+        <div class="form-group">
+          <label for="model" class="form-label">Select Model</label>
+          <div class="select-wrapper">
+            <select id="model" class="form-control">
+              <option value="Flux Realism">Flux Realism</option>
+              <option value="Flux Pro Ultra">Flux Pro Ultra</option>
+              <option value="grok-2-aurora">grok-2-aurora</option>
+              <option value="Flux Pro">Flux Pro</option>
+              <option value="Flux Pro Ultra Raw">Flux Pro Ultra Raw</option>
+              <option value="Flux Dev">Flux Dev</option>
+              <option value="Flux Schnell">Flux Schnell</option>
+              <option value="stable-diffusion-3-large-turbo">stable-diffusion-3-large-turbo</option>
+              <option value="sdxl-lightning-4step">sdxl-lightning-4step</option>
+              <option value="dall-e-3">dall-e-3</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="prompt" class="form-label">Enter Prompt</label>
+          <input type="text" id="prompt" class="form-control" placeholder="Describe what you want to see..." value="sky">
+        </div>
+      </div>
+      <div class="form-row three-cols animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
+        <div class="form-group">
+          <label for="image-size" class="form-label">Image Size</label>
+          <div class="select-wrapper">
+            <select id="image-size" class="form-control">
+              <option value="512">512 x 512</option>
+              <option value="768">768 x 768</option>
+              <option value="1024" selected>1024 x 1024</option>
+              <option value="1536">1536 x 1536</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="image-count" class="form-label">Number of Images</label>
+          <div class="select-wrapper">
+            <select id="image-count" class="form-control">
+              <option value="1" selected>1</option>
+              <option value="2">2</option>
+              <option value="4">4</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">&nbsp;</label>
+          <button id="generate" class="btn btn-primary btn-full animate__animated animate__pulse animate__infinite">
+            Generate Image
+          </button>
+        </div>
+      </div>
+      <div id="result" class="result">
+        <div class="text-center animate__animated animate__fadeIn">
+          <h2 class="result-title">Your Creation</h2>
+          <p class="result-subtitle">Created with <span id="model-used"></span></p>
         </div>
+        <div id="images-container" class="images-grid"></div>
+      </div>
+      <div id="loading" class="loading">
+        <div class="loading-spinner"></div>
+        <p class="loading-text">Creating your masterpiece...</p>
+      </div>
+      <div id="error" class="error">
+        <h3 class="error-title">Oops! Something went wrong.</h3>
+        <p class="error-message">Please try again or check your connection.</p>
+      </div>
     </div>
+    <div class="footer">
+      © 2025 LOKI.AI IMAGE PLAYGROUND | All rights reserved
     </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      // Elements
+      const themeToggle = document.getElementById('theme-toggle');
+      const generateBtn = document.getElementById('generate');
+      const promptInput = document.getElementById('prompt');
+      const modelSelect = document.getElementById('model');
+      const imageSizeSelect = document.getElementById('image-size');
+      const imageCountSelect = document.getElementById('image-count');
+      const resultDiv = document.getElementById('result');
+      const loadingDiv = document.getElementById('loading');
+      const errorDiv = document.getElementById('error');
+      const imagesContainer = document.getElementById('images-container');
+      const modelUsed = document.getElementById('model-used');
+      // Theme Toggle
+      themeToggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark');
+        localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+      });
+      // Check for saved theme preference
+      if (localStorage.getItem('theme') === 'dark' ||
+          (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.body.classList.add('dark');
+      }
+      // Create confetti
+      function createConfetti() {
+        const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
+        const confettiCount = 100;
+        for (let i = 0; i < confettiCount; i++) {
+          const confetti = document.createElement('div');
+          confetti.className = 'confetti';
+          confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+          confetti.style.left = Math.random() * 100 + 'vw';
+          confetti.style.opacity = Math.random() + 0.5;
+          confetti.style.width = Math.random() * 10 + 5 + 'px';
+          confetti.style.height = Math.random() * 10 + 5 + 'px';
+          document.body.appendChild(confetti);
+          const animation = confetti.animate([
+            { transform: 'translateY(0) rotate(0)', opacity: 1 },
+            { transform: `translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
+          ], {
+            duration: Math.random() * 2000 + 2000,
+            easing: 'cubic-bezier(0, 0.55, 0.45, 1)'
+          });
+          animation.onfinish = () => confetti.remove();
+        }
+      }
+      // Generate image
+      generateBtn.addEventListener('click', async () => {
+        const prompt = promptInput.value.trim();
+        const model = modelSelect.value;
+        const size = parseInt(imageSizeSelect.value);
+        const number = parseInt(imageCountSelect.value);
+        if (!prompt) {
+          promptInput.style.borderColor = 'red';
+          promptInput.classList.add('animate__animated', 'animate__shakeX');
+          setTimeout(() => {
+            promptInput.style.borderColor = '';
+            promptInput.classList.remove('animate__animated', 'animate__shakeX');
+          }, 1000);
+          return;
+        }
+        // Show loading state
+        resultDiv.style.display = 'none';
+        errorDiv.style.display = 'none';
+        loadingDiv.style.display = 'flex';
+        generateBtn.disabled = true;
+        try {
+          const response = await fetch('https://parthsadaria-lokiai.hf.space/images/generations', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              model: model,
+              prompt: prompt,
+              size: size,
+              number: number
+            })
+          });
+          if (!response.ok) {
+            throw new Error('API request failed');
+          }
+          const data = await response.json();
+          // Display result
+          loadingDiv.style.display = 'none';
+          resultDiv.style.display = 'block';
+          modelUsed.textContent = model;
+          // Clear previous images
+          imagesContainer.innerHTML = '';
+          // Trigger confetti animation
+          createConfetti();
+          // Set grid columns based on number of images
+          if (number > 1) {
+            imagesContainer.className = 'images-grid multi-column';
+          } else {
+            imagesContainer.className = 'images-grid';
+          }
+          // Add generated images
+          if (data.data && data.data.length > 0) {
+            data.data.forEach((item, index) => {
+              const imgWrapper = document.createElement('div');
+              imgWrapper.className = 'image-wrapper animate__animated animate__zoomIn';
+              imgWrapper.style.animationDelay = `${index * 0.2}s`;
+              const img = document.createElement('img');
+              img.src = item.url;
+              img.alt = `Generated image ${index + 1}`;
+              const downloadBtn = document.createElement('button');
+              downloadBtn.className = 'btn-download';
+              downloadBtn.innerHTML = `
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                  <polyline points="7 10 12 15 17 10"></polyline>
+                  <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+              `;
+              downloadBtn.addEventListener('click', () => {
+                const a = document.createElement('a');
+                a.href = item.url;
+                a.download = `loki-ai-${model}-${index + 1}.jpg`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+              });
+              imgWrapper.appendChild(img);
+              imgWrapper.appendChild(downloadBtn);
+              imagesContainer.appendChild(imgWrapper);
             });
+          }
+        } catch (error) {
+          console.error('Error:', error);
+          loadingDiv.style.display = 'none';
+          errorDiv.style.display = 'block';
+          errorDiv.classList.add('animate__animated', 'animate__fadeIn');
+        } finally {
+          generateBtn.disabled = false;
+        }
+      });
+      // Enter key to generate
+      promptInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          generateBtn.click();
+        }
+      });
+    });
+  </script>
 </body>
+</html>