Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Mar 24

Commit

5f424f1

verified ·

1 Parent(s): ca92d63

Create image-playground.html

Browse files

Files changed (1) hide show

image-playground.html +327 -0

image-playground.html ADDED Viewed

	@@ -0,0 +1,327 @@

+<!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">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <style>
+    * {
+      font-family: 'DM Sans', sans-serif;
+      transition: all 0.3s ease;
+    }
+    body {
+      background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
+      min-height: 100vh;
+    }
+    .card {
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+      border-radius: 16px;
+    }
+    .pulse {
+      animation: pulse 1.5s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(0.95); }
+      50% { transform: scale(1); }
+      100% { transform: scale(0.95); }
+    }
+    .loading {
+      width: 48px;
+      height: 48px;
+      border: 5px solid #f5f5f5;
+      border-bottom-color: #000;
+      border-radius: 50%;
+      animation: rotation 1s linear infinite;
+    }
+    @keyframes rotation {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    .image-container {
+      overflow: hidden;
+      border-radius: 12px;
+    }
+    .image-container img {
+      transition: transform 0.5s ease;
+    }
+    .image-container:hover img {
+      transform: scale(1.05);
+    }
+    button {
+      position: relative;
+      overflow: hidden;
+    }
+    button:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      transform: scale(0);
+      transition: transform 0.5s;
+      pointer-events: none;
+    }
+    button:active:after {
+      transform: scale(3);
+      opacity: 0;
+      transition: transform 0.5s, opacity 0.3s;
+    }
+  </style>
+</head>
+<body class="p-4 md:p-8">
+  <div class="max-w-4xl mx-auto">
+    <div class="card p-6 md:p-8 bg-white/80">
+      <div class="flex flex-col md:flex-row items-center justify-between mb-8">
+        <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-black to-gray-700 bg-clip-text text-transparent mb-4 md:mb-0">LOKI.AI IMAGE PLAYGROUND</h1>
+        <div class="pulse bg-black text-white px-4 py-1 rounded-full text-sm">Powered by LOKI.AI</div>
+      </div>
+      <div class="space-y-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <label for="model" class="block text-sm font-medium text-gray-700 mb-2">Select Model</label>
+            <div class="relative">
+              <select id="model" class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black 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-700">
+                <svg class="h-5 w-5" 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-2">Enter Prompt</label>
+            <input type="text" id="prompt" placeholder="Describe what you want to see..." class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black" value="sky">
+          </div>
+        </div>
+        <div class="flex flex-col items-center justify-center space-y-4">
+          <button id="generate" class="w-full md:w-auto bg-black text-white px-8 py-3 rounded-lg font-medium hover:bg-gray-800 transform hover:scale-105 transition-all">
+            Generate Image
+          </button>
+          <div id="status" class="text-sm text-gray-500 hidden">Processing your request...</div>
+        </div>
+        <div id="result" class="mt-6 hidden">
+          <div class="text-center mb-6">
+            <h2 class="text-xl font-medium">Your Creation</h2>
+            <p class="text-sm text-gray-500">Created with <span id="model-used"></span></p>
+          </div>
+          <div class="image-container mx-auto max-w-lg">
+            <img id="generated-image" class="w-full h-auto object-cover shadow-lg" src="" alt="Generated image">
+          </div>
+          <div class="mt-4 text-center">
+            <button id="download" class="bg-gray-200 hover:bg-gray-300 text-black px-6 py-2 rounded-lg font-medium mt-4 transform hover:scale-105 transition-all">
+              <span class="flex items-center justify-center">
+                <svg class="w-5 h-5 mr-2" 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>
+                Download
+              </span>
+            </button>
+          </div>
+        </div>
+        <div id="loading" class="flex flex-col items-center justify-center py-10 hidden">
+          <div class="loading mb-4"></div>
+          <p class="text-gray-600">Creating your masterpiece...</p>
+        </div>
+        <div id="error" class="bg-red-50 text-red-800 p-4 rounded-lg 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-center text-gray-500 text-xs mt-6">
+      © 2025 LOKI.AI IMAGE PLAYGROUND | All rights reserved
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      // Elements
+      const generateBtn = document.getElementById('generate');
+      const downloadBtn = document.getElementById('download');
+      const promptInput = document.getElementById('prompt');
+      const modelSelect = document.getElementById('model');
+      const resultDiv = document.getElementById('result');
+      const loadingDiv = document.getElementById('loading');
+      const errorDiv = document.getElementById('error');
+      const statusDiv = document.getElementById('status');
+      const generatedImage = document.getElementById('generated-image');
+      const modelUsed = document.getElementById('model-used');
+      // Animations with GSAP
+      gsap.from('.card', {
+        duration: 1,
+        opacity: 0,
+        y: 50,
+        ease: 'power3.out'
+      });
+      gsap.from('h1', {
+        duration: 1.2,
+        opacity: 0,
+        y: 20,
+        delay: 0.3,
+        ease: 'power3.out'
+      });
+      const staggerItems = [modelSelect, promptInput, generateBtn];
+      gsap.from(staggerItems, {
+        duration: 0.8,
+        opacity: 0,
+        y: 20,
+        stagger: 0.2,
+        delay: 0.5,
+        ease: 'power3.out'
+      });
+      // Generate image
+      generateBtn.addEventListener('click', async () => {
+        const prompt = promptInput.value.trim();
+        const model = modelSelect.value;
+        if (!prompt) {
+          promptInput.classList.add('ring-2', 'ring-red-500');
+          setTimeout(() => {
+            promptInput.classList.remove('ring-2', 'ring-red-500');
+          }, 2000);
+          return;
+        }
+        // Show loading state
+        resultDiv.classList.add('hidden');
+        errorDiv.classList.add('hidden');
+        loadingDiv.classList.remove('hidden');
+        statusDiv.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: 1024,
+              number: 1
+            })
+          });
+          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;
+          // Assuming the response has an images array with base64 or URLs
+          if (data.images && data.images.length > 0) {
+            generatedImage.src = data.images[0];
+            // Animate the image appearance
+            gsap.from('#generated-image', {
+              duration: 1,
+              opacity: 0,
+              scale: 0.9,
+              ease: 'power3.out'
+            });
+          }
+        } catch (error) {
+          console.error('Error:', error);
+          loadingDiv.classList.add('hidden');
+          errorDiv.classList.remove('hidden');
+        } finally {
+          generateBtn.disabled = false;
+          statusDiv.classList.add('hidden');
+        }
+      });
+      // Download image
+      downloadBtn.addEventListener('click', () => {
+        if (!generatedImage.src) return;
+        const a = document.createElement('a');
+        a.href = generatedImage.src;
+        a.download = `loki-ai-${new Date().getTime()}.png`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        // Animation feedback
+        gsap.to('#download', {
+          duration: 0.3,
+          scale: 1.1,
+          yoyo: true,
+          repeat: 1
+        });
+      });
+      // Add input animations
+      promptInput.addEventListener('focus', () => {
+        gsap.to(promptInput, {
+          duration: 0.3,
+          scale: 1.02,
+          ease: 'power2.out'
+        });
+      });
+      promptInput.addEventListener('blur', () => {
+        gsap.to(promptInput, {
+          duration: 0.3,
+          scale: 1,
+          ease: 'power2.in'
+        });
+      });
+      // Enter key to generate
+      promptInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          generateBtn.click();
+        }
+      });
+    });
+  </script>
+</body>
+</html>