Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Mar 24

Commit

a829ba4

verified ·

1 Parent(s): 5f424f1

Update image-playground.html

Browse files

Files changed (1) hide show

image-playground.html +41 -140

image-playground.html CHANGED Viewed

@@ -6,42 +6,39 @@
   <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 {
@@ -50,58 +47,25 @@
     }
     .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>
@@ -114,37 +78,36 @@
                 <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
@@ -153,19 +116,19 @@
           </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>
@@ -180,46 +143,19 @@
       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;
         }
@@ -227,7 +163,6 @@
         resultDiv.classList.add('hidden');
         errorDiv.classList.add('hidden');
         loadingDiv.classList.remove('hidden');
-        statusDiv.classList.remove('hidden');
         generateBtn.disabled = true;
         try {
@@ -258,14 +193,6 @@
           // 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) {
@@ -274,7 +201,6 @@
           errorDiv.classList.remove('hidden');
         } finally {
           generateBtn.disabled = false;
-          statusDiv.classList.add('hidden');
         }
       });
@@ -288,31 +214,6 @@
         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

   <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>
   <style>
     * {
       font-family: 'DM Sans', sans-serif;
     }
     body {
+      background-color: #fcfcfc;
       min-height: 100vh;
     }
     .card {
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+      border-radius: 12px;
     }
     .pulse {
+      animation: pulse 2.5s infinite;
     }
     @keyframes pulse {
+      0% { opacity: 0.8; }
+      50% { opacity: 1; }
+      100% { opacity: 0.8; }
     }
     .loading {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #f3f3f3;
       border-bottom-color: #000;
       border-radius: 50%;
+      animation: rotation 1.2s linear infinite;
     }
     @keyframes rotation {
     }
     .image-container {
+      border-radius: 8px;
       overflow: hidden;
     }
   </style>
 </head>
+<body class="p-4 md:p-6">
   <div class="max-w-4xl mx-auto">
+    <div class="card p-6 bg-white">
+      <div class="flex flex-col md:flex-row items-center justify-between mb-6">
+        <h1 class="text-3xl font-bold text-black mb-2 md:mb-0">LOKI.AI IMAGE PLAYGROUND</h1>
+        <div class="pulse bg-black text-white px-3 py-1 rounded-full text-sm">Powered by LOKI.AI</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="block w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 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="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-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="block w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-black" value="sky">
           </div>
         </div>
+        <div class="flex justify-center mt-2">
+          <button id="generate" class="bg-black text-white px-6 py-2 rounded-lg font-medium hover:bg-gray-800">
             Generate Image
           </button>
         </div>
+        <div id="result" class="mt-4 hidden">
+          <div class="text-center mb-4">
+            <h2 class="text-lg 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 shadow-md" src="" alt="Generated image">
           </div>
           <div class="mt-4 text-center">
+            <button id="download" class="bg-gray-100 hover:bg-gray-200 text-black px-4 py-2 rounded-lg font-medium">
               <span class="flex items-center justify-center">
+                <svg class="w-4 h-4 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
           </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="bg-red-50 text-red-700 p-3 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-400 text-xs mt-4">
       © 2025 LOKI.AI IMAGE PLAYGROUND | All rights reserved
     </div>
   </div>
       const resultDiv = document.getElementById('result');
       const loadingDiv = document.getElementById('loading');
       const errorDiv = document.getElementById('error');
       const generatedImage = document.getElementById('generated-image');
       const modelUsed = document.getElementById('model-used');
       // Generate image
       generateBtn.addEventListener('click', async () => {
         const prompt = promptInput.value.trim();
         const model = modelSelect.value;
         if (!prompt) {
+          promptInput.style.borderColor = 'red';
           setTimeout(() => {
+            promptInput.style.borderColor = '';
+          }, 1500);
           return;
         }
         resultDiv.classList.add('hidden');
         errorDiv.classList.add('hidden');
         loadingDiv.classList.remove('hidden');
         generateBtn.disabled = true;
         try {
           // Assuming the response has an images array with base64 or URLs
           if (data.images && data.images.length > 0) {
             generatedImage.src = data.images[0];
           }
         } catch (error) {
           errorDiv.classList.remove('hidden');
         } finally {
           generateBtn.disabled = false;
         }
       });
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
       });
       // Enter key to generate