Update image-playground.html

image-playground.html

@@ -4,25 +4,36 @@
   <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">
+  <!-- Use more weights for DM Sans -->
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,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;
+      --secondary-bg: #f7f7f9; /* Slightly different secondary */
+      --text-color: #1a1a1a; /* Darker text */
+      --text-muted: #666666;
       --border-color: #e0e0e0;
       --accent-color: #000000;
-      --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      --accent-rgb: 0, 0, 0; /* For rgba usage */
+      --primary-button-text: #ffffff;
+      --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Softer, deeper shadow */
+      --input-bg: #ffffff;
+      --transition-speed: 0.3s;
+      --transition-ease: ease-in-out;
     }
 
     .dark {
-      --primary-bg: #121212;
-      --secondary-bg: #1e1e1e;
-      --text-color: #ffffff;
-      --border-color: #333333;
+      --primary-bg: #16161a; /* Slightly richer dark */
+      --secondary-bg: #0d0d0f;
+      --text-color: #f0f0f0;
+      --text-muted: #a0a0a0;
+      --border-color: #3a3a40;
       --accent-color: #ffffff;
-      --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+      --accent-rgb: 255, 255, 255;
+      --primary-button-text: #000000;
+      --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+      --input-bg: #242428;
     }
 
     * {
@@ -35,85 +46,102 @@
     body {
       background-color: var(--secondary-bg);
       color: var(--text-color);
-      transition: all 0.3s ease;
-      padding: 20px;
+      transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
+      padding: 40px 20px; /* More vertical padding */
+      font-weight: 400; /* Base weight */
+      line-height: 1.6;
     }
 
     .container {
-      max-width: 1000px;
+      max-width: 1100px; /* Slightly wider */
       margin: 0 auto;
     }
 
     .card {
       background-color: var(--primary-bg);
-      border-radius: 12px;
-      padding: 24px;
+      border-radius: 16px; /* Larger radius */
+      padding: 32px; /* More padding */
       box-shadow: var(--card-shadow);
-      transition: all 0.3s ease;
+      transition: all var(--transition-speed) var(--transition-ease);
+      border: 1px solid var(--border-color); /* Subtle border */
     }
 
+    .dark .card {
+       border: 1px solid transparent; /* Remove border in dark mode if bg is dark enough */
+    }
+
+
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 24px;
+      margin-bottom: 32px; /* More space */
       flex-wrap: wrap;
-      gap: 12px;
+      gap: 16px;
     }
 
     .title {
-      font-size: 28px;
-      font-weight: 700;
+      font-size: 32px; /* Larger title */
+      font-weight: 700; /* Bolder */
       color: var(--text-color);
+      letter-spacing: -0.5px; /* Slightly tighter */
     }
 
+    /* --- Theme Toggle --- */
     .theme-toggle {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 12px; /* More space */
     }
 
     .toggle-label {
       font-size: 14px;
-      color: var(--text-color);
-      opacity: 0.7;
+      font-weight: 500;
+      color: var(--text-muted);
+      transition: color var(--transition-speed) var(--transition-ease);
     }
 
     .toggle-switch {
       position: relative;
-      width: 48px;
-      height: 24px;
-      background-color: #e5e5e5;
-      border-radius: 12px;
+      width: 52px; /* Slightly larger */
+      height: 28px;
+      background-color: var(--border-color);
+      border-radius: 14px;
       cursor: pointer;
-      transition: background-color 0.3s;
+      transition: background-color var(--transition-speed) var(--transition-ease);
     }
-
-    .dark .toggle-switch {
-      background-color: #555;
+    .toggle-switch:hover {
+       background-color: color-mix(in srgb, var(--border-color) 80%, var(--accent-color) 20%);
     }
 
+
     .toggle-thumb {
       position: absolute;
-      top: 2px;
-      left: 2px;
-      width: 20px;
-      height: 20px;
+      top: 3px;
+      left: 3px;
+      width: 22px; /* Larger */
+      height: 22px;
       border-radius: 50%;
       background-color: white;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-      transition: transform 0.3s;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      transition: transform var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
     }
 
+    .dark .toggle-switch {
+        background-color: var(--border-color); /* Use border color for consistency */
+    }
     .dark .toggle-thumb {
-      transform: translateX(24px);
+        transform: translateX(24px);
+        background-color: var(--secondary-bg); /* Match dark secondary bg */
     }
 
+
+    /* --- Form Styling --- */
     .form-row {
       display: grid;
       grid-template-columns: 1fr;
-      gap: 16px;
-      margin-bottom: 16px;
+      gap: 20px; /* Increased gap */
+      margin-bottom: 24px; /* Increased gap */
     }
 
     @media (min-width: 768px) {
@@ -128,182 +156,247 @@
     .form-group {
       display: flex;
       flex-direction: column;
-      gap: 6px;
+      gap: 8px; /* More space */
     }
 
     .form-label {
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 600; /* Bolder label */
       color: var(--text-color);
-      opacity: 0.8;
+      opacity: 0.9;
     }
 
     .form-control {
-      padding: 10px 12px;
-      border-radius: 8px;
+      padding: 12px 16px; /* More padding */
+      border-radius: 10px; /* Slightly larger radius */
       border: 1px solid var(--border-color);
-      background-color: var(--secondary-bg);
+      background-color: var(--input-bg);
       color: var(--text-color);
-      font-size: 14px;
-      transition: all 0.2s;
-      appearance: none;
+      font-size: 15px; /* Slightly larger text */
+      font-weight: 400;
+      transition: all var(--transition-speed) var(--transition-ease);
+      appearance: none; /* Remove default styling */
+      width: 100%;
     }
 
-    .form-control:focus {
-      outline: none;
-      border-color: var(--accent-color);
-      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    .form-control::placeholder {
+        color: var(--text-muted);
+        opacity: 0.7;
     }
 
-    .dark .form-control:focus {
-      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+    .form-control:hover {
+        border-color: color-mix(in srgb, var(--border-color) 70%, var(--text-color) 30%);
+        box-shadow: 0 2px 5px rgba(var(--accent-rgb), 0.05);
     }
 
+    .form-control:focus,
+    .form-control:focus-visible { /* Use focus-visible for keyboard nav */
+      outline: none;
+      border-color: var(--accent-color);
+      box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); /* More prominent focus ring */
+    }
+
+    /* --- Select Wrapper --- */
     .select-wrapper {
       position: relative;
     }
 
-    .select-wrapper:after {
+    .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);
+      right: 16px; /* Adjusted position */
+      width: 8px; /* Larger arrow */
+      height: 8px;
+      border-style: solid;
+      border-width: 0 2px 2px 0;
+      border-color: var(--text-muted);
+      transform: translateY(-70%) rotate(45deg); /* Centered better */
       pointer-events: none;
+      transition: border-color var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease);
+    }
+
+    .select-wrapper:hover::after {
+        border-color: var(--text-color);
+    }
+    .select-wrapper select:focus + ::after { /* Style arrow on focus too */
+        border-color: var(--accent-color);
     }
 
+
+    /* --- Buttons --- */
     .btn {
-      padding: 10px 18px;
-      border-radius: 8px;
-      font-weight: 500;
+      padding: 12px 24px; /* More padding */
+      border-radius: 10px; /* Match inputs */
+      font-weight: 600; /* Bolder text */
+      font-size: 15px;
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all var(--transition-speed) var(--transition-ease);
       border: none;
       text-align: center;
+      display: inline-flex; /* Align icon/text if needed */
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
     }
 
     .btn-primary {
       background-color: var(--accent-color);
-      color: var(--primary-bg);
+      color: var(--primary-button-text);
+      box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.15);
     }
 
     .btn-primary:hover {
-      opacity: 0.9;
-      transform: translateY(-2px);
+      background-color: color-mix(in srgb, var(--accent-color) 90%, var(--primary-bg) 10%);
+      transform: translateY(-3px); /* More lift */
+      box-shadow: 0 7px 15px rgba(var(--accent-rgb), 0.25); /* Larger shadow on hover */
     }
 
     .btn-primary:active {
-      transform: translateY(0);
+      transform: translateY(-1px);
+      box-shadow: 0 3px 8px rgba(var(--accent-rgb), 0.2);
+    }
+
+    .btn-primary:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: translateY(0);
+        box-shadow: none;
     }
 
+    /* --- Download Button on Image --- */
     .btn-download {
-      background-color: rgba(255, 255, 255, 0.2);
-      backdrop-filter: blur(4px);
-      padding: 8px;
+      background-color: rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(8px); /* Stronger blur */
+      -webkit-backdrop-filter: blur(8px); /* Safari */
+      padding: 10px; /* Slightly larger */
       border-radius: 50%;
       position: absolute;
-      bottom: 10px;
-      right: 10px;
+      bottom: 12px;
+      right: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      opacity: 0.8;
+      transform: scale(0.95);
+      transition: all var(--transition-speed) var(--transition-ease);
     }
 
     .dark .btn-download {
       background-color: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .image-wrapper:hover .btn-download {
+       opacity: 1;
+       transform: scale(1);
+    }
+
+    .btn-download:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        transform: scale(1.05) !important; /* Override wrapper hover scale */
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+    .dark .btn-download:hover {
+        background-color: rgba(0, 0, 0, 0.5);
     }
 
     .btn-download svg {
-      width: 20px;
-      height: 20px;
-      stroke: var(--accent-color);
+      width: 22px; /* Larger icon */
+      height: 22px;
+      stroke: var(--accent-color); /* Use accent color for icon */
+      stroke-width: 2;
     }
 
     .btn-full {
       width: 100%;
+      height: 48px; /* Match input height */
     }
 
-    .text-center {
-      text-align: center;
-    }
-
+    /* --- Result Area --- */
     .result {
-      margin-top: 24px;
-      display: none;
+      margin-top: 40px; /* More space */
+      display: none; /* Initially hidden */
     }
 
     .result-title {
-      font-size: 18px;
-      font-weight: 500;
-      margin-bottom: 4px;
+      font-size: 22px; /* Larger */
+      font-weight: 700; /* Bold */
+      margin-bottom: 6px;
     }
 
     .result-subtitle {
-      font-size: 14px;
-      opacity: 0.7;
-      margin-bottom: 16px;
+      font-size: 15px;
+      color: var(--text-muted);
+      margin-bottom: 24px; /* More space */
+    }
+    .result-subtitle span {
+        font-weight: 600;
+        color: var(--text-color);
     }
 
     .images-grid {
       display: grid;
       grid-template-columns: 1fr;
-      gap: 16px;
+      gap: 24px; /* More gap */
     }
 
     .images-grid.multi-column {
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
+       @media (min-width: 768px) {
+           grid-template-columns: repeat(2, 1fr); /* Force 2 columns on medium+ */
+       }
     }
 
     .image-wrapper {
       position: relative;
-      border-radius: 8px;
+      border-radius: 12px; /* Consistent radius */
       overflow: hidden;
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-      transform-origin: center;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
+      background-color: var(--secondary-bg); /* Placeholder bg */
     }
 
     .dark .image-wrapper {
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     }
 
     .image-wrapper img {
       width: 100%;
       height: auto;
       display: block;
-      transition: transform 0.3s ease;
+      transition: transform var(--transition-speed) var(--transition-ease), filter 0.4s ease; /* Smoother, slightly longer transform */
+    }
+
+    .image-wrapper:hover {
+        transform: translateY(-5px); /* Lift effect */
+        box-shadow: var(--card-shadow); /* Use main card shadow on hover */
     }
 
     .image-wrapper:hover img {
-      transform: scale(1.03);
+      transform: scale(1.05); /* Slightly larger scale */
+      filter: brightness(1.02); /* Subtle brightness */
     }
 
+    /* --- Loading --- */
     .loading {
-      display: none;
+      display: none; /* Initially hidden */
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 32px 0;
+      padding: 48px 0; /* More padding */
     }
 
     .loading-spinner {
-      width: 40px;
-      height: 40px;
-      border: 4px solid rgba(0, 0, 0, 0.1);
+      width: 48px; /* Larger */
+      height: 48px;
+      border: 5px solid rgba(var(--accent-rgb), 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);
+      animation: spinner 0.8s linear infinite; /* Faster spin */
+      margin-bottom: 20px; /* More space */
     }
 
     @keyframes spinner {
@@ -313,41 +406,49 @@
     }
 
     .loading-text {
-      font-size: 14px;
-      opacity: 0.7;
+      font-size: 15px;
+      color: var(--text-muted);
+      font-weight: 500;
     }
 
+    /* --- Error --- */
     .error {
-      background-color: rgba(255, 0, 0, 0.1);
-      color: #e53e3e;
-      padding: 16px;
-      border-radius: 8px;
-      margin-top: 24px;
-      display: none;
+      background-color: rgba(255, 87, 87, 0.1); /* Standard red, subtle bg */
+      color: #d93030; /* Darker red for text */
+      padding: 20px 24px; /* More padding */
+      border-radius: 12px; /* Consistent radius */
+      margin-top: 32px;
+      display: none; /* Initially hidden */
+      border: 1px solid rgba(255, 87, 87, 0.3);
     }
 
     .dark .error {
-      background-color: rgba(255, 0, 0, 0.05);
+      background-color: rgba(255, 87, 87, 0.1);
+      color: #ff8a8a; /* Lighter red in dark mode */
+      border-color: rgba(255, 87, 87, 0.2);
     }
 
     .error-title {
-      font-size: 16px;
-      font-weight: 500;
-      margin-bottom: 4px;
+      font-size: 17px; /* Slightly larger */
+      font-weight: 700; /* Bold */
+      margin-bottom: 8px;
     }
 
     .error-message {
-      font-size: 14px;
-      opacity: 0.8;
+      font-size: 15px;
+      opacity: 0.9;
     }
 
+    /* --- Footer --- */
     .footer {
-      margin-top: 16px;
+      margin-top: 40px; /* More space */
       text-align: center;
-      font-size: 12px;
-      opacity: 0.5;
+      font-size: 13px; /* Slightly larger */
+      color: var(--text-muted);
+      transition: color var(--transition-speed) var(--transition-ease);
     }
 
+    /* --- Confetti (keep as is) --- */
     .confetti {
       position: fixed;
       width: 10px;
@@ -356,15 +457,28 @@
       opacity: 0;
       top: 0;
       left: 0;
+      pointer-events: none; /* Prevent interaction */
+      z-index: 9999; /* Ensure it's on top */
     }
+
+    /* --- Utility --- */
+    .text-center {
+      text-align: center;
+    }
+
+    /* --- Animation Delays (keep using inline styles for flexibility) --- */
+
   </style>
 </head>
 <body>
   <div class="container">
-    <div class="card animate__animated animate__fadeIn">
+    <!-- Card gets initial fade in -->
+    <div class="card animate__animated animate__fadeIn animate__delay-0.2s">
       <div class="header">
-        <h1 class="title animate__animated animate__slideInLeft">LOKI.AI IMAGE PLAYGROUND</h1>
-        <div class="theme-toggle animate__animated animate__slideInRight">
+        <!-- Title slides in -->
+        <h1 class="title animate__animated animate__fadeInLeft animate__delay-0.3s">LOKI.AI IMAGE PLAYGROUND</h1>
+        <!-- Theme toggle fades in -->
+        <div class="theme-toggle animate__animated animate__fadeInRight animate__delay-0.4s">
           <span class="toggle-label">Theme</span>
           <div id="theme-toggle" class="toggle-switch">
             <div class="toggle-thumb"></div>
@@ -372,7 +486,8 @@
         </div>
       </div>
 
-      <div class="form-row animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
+      <!-- Form rows fade up with delays -->
+      <div class="form-row animate__animated animate__fadeInUp animate__delay-0.5s">
         <div class="form-group">
           <label for="model" class="form-label">Select Model</label>
           <div class="select-wrapper">
@@ -392,11 +507,11 @@
         </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">
+          <input type="text" id="prompt" class="form-control" placeholder="Describe what you want to see..." value="cinematic shot, mystical forest path at twilight, glowing mushrooms">
         </div>
       </div>
 
-      <div class="form-row three-cols animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
+      <div class="form-row three-cols animate__animated animate__fadeInUp animate__delay-0.6s">
         <div class="form-group">
           <label for="image-size" class="form-label">Image Size</label>
           <div class="select-wrapper">
@@ -419,33 +534,40 @@
           </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">
+          <!-- Label for alignment, content via button -->
+          <label class="form-label"> </label>
+          <!-- Removed infinite pulse, rely on hover/active states -->
+          <button id="generate" class="btn btn-primary btn-full">
             Generate Image
           </button>
         </div>
       </div>
 
+      <!-- Result area will fade in when populated -->
       <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 id="images-container" class="images-grid">
+           <!-- Images will be added here dynamically -->
+        </div>
       </div>
 
-      <div id="loading" class="loading">
+      <!-- Loading indicator will fade in/out -->
+      <div id="loading" class="loading animate__animated">
         <div class="loading-spinner"></div>
-        <p class="loading-text">Creating your masterpiece...</p>
+        <p class="loading-text">Conjuring pixels... Please wait.</p>
       </div>
 
-      <div id="error" class="error">
+      <!-- Error message will fade in -->
+      <div id="error" class="error animate__animated">
         <h3 class="error-title">Oops! Something went wrong.</h3>
-        <p class="error-message">Please try again or check your connection.</p>
+        <p class="error-message">Please try adjusting your prompt or try again later.</p>
       </div>
     </div>
-    
-    <div class="footer">
+
+    <div class="footer animate__animated animate__fadeInUp animate__delay-0.8s">
       © 2025 LOKI.AI IMAGE PLAYGROUND | All rights reserved
     </div>
   </div>
@@ -464,69 +586,99 @@
       const errorDiv = document.getElementById('error');
       const imagesContainer = document.getElementById('images-container');
       const modelUsed = document.getElementById('model-used');
-      
-      // Theme Toggle
+      const body = document.body; // Reference body for class toggling
+
+      // --- Theme Logic ---
+      const applyTheme = (theme) => {
+        if (theme === 'dark') {
+          body.classList.add('dark');
+        } else {
+          body.classList.remove('dark');
+        }
+        localStorage.setItem('theme', theme);
+      };
+
       themeToggle.addEventListener('click', () => {
-        document.body.classList.toggle('dark');
-        localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        const currentTheme = body.classList.contains('dark') ? 'light' : 'dark';
+        applyTheme(currentTheme);
       });
-      
-      // 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');
+
+      // Check system preference and saved theme
+      const savedTheme = localStorage.getItem('theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      if (savedTheme) {
+        applyTheme(savedTheme);
+      } else {
+        applyTheme(prefersDark ? 'dark' : 'light');
       }
-      
-      // Create confetti
+
+      // --- Confetti ---
       function createConfetti() {
-        const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
-        const confettiCount = 100;
-        
+        const colors = ['#ff5757', '#57ff87', '#5787ff', '#f0ff57', '#ff57f0', '#57f0ff']; // Adjusted colors
+        const confettiCount = 100; // Keep it reasonable
+
         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';
+          confetti.style.opacity = Math.random() * 0.5 + 0.5; // 0.5 to 1.0
+          confetti.style.width = Math.random() * 8 + 6 + 'px'; // 6px to 14px
+          confetti.style.height = confetti.style.width; // Keep square-ish
+          confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0'; // Mix circles and squares
           document.body.appendChild(confetti);
-          
+
+          const fallDuration = Math.random() * 3000 + 3000; // 3-6 seconds
+          const rotation = Math.random() * 720 - 360; // Random rotation
+
           const animation = confetti.animate([
-            { transform: 'translateY(0) rotate(0)', opacity: 1 },
-            { transform: `translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
+            { transform: `translateY(-20px) rotate(0deg)`, opacity: 1 }, // Start slightly above
+            { transform: `translateY(${window.innerHeight + 20}px) rotate(${rotation}deg)`, opacity: 0 }
           ], {
-            duration: Math.random() * 2000 + 2000,
-            easing: 'cubic-bezier(0, 0.55, 0.45, 1)'
+            duration: fallDuration,
+            easing: 'ease-out' // More natural fall
           });
-          
+
           animation.onfinish = () => confetti.remove();
         }
       }
-      
-      // Generate image
+
+      // --- Form Validation ---
+       const validateInput = (inputElement) => {
+          if (!inputElement.value.trim()) {
+              inputElement.style.borderColor = '#d93030'; // Use error color
+              inputElement.classList.add('animate__animated', 'animate__headShake'); // More subtle shake
+              setTimeout(() => {
+                  inputElement.style.borderColor = ''; // Reset border color
+                  inputElement.classList.remove('animate__animated', 'animate__headShake');
+              }, 1000);
+              return false;
+          }
+          inputElement.style.borderColor = ''; // Ensure reset if valid
+          return true;
+       }
+
+      // --- Image Generation ---
       generateBtn.addEventListener('click', async () => {
+        // Basic validation
+        if (!validateInput(promptInput)) return;
+
         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
+
+        // UI updates for loading state
         resultDiv.style.display = 'none';
         errorDiv.style.display = 'none';
+        errorDiv.classList.remove('animate__fadeIn'); // Reset animation class
         loadingDiv.style.display = 'flex';
+        loadingDiv.classList.remove('animate__fadeOut');
+        loadingDiv.classList.add('animate__fadeIn');
         generateBtn.disabled = true;
-        
+        generateBtn.textContent = 'Generating...'; // Change button text
+
         try {
           const response = await fetch('https://parthsadaria-lokiai.hf.space/images/generations', {
             method: 'POST',
@@ -540,83 +692,121 @@
               number: number
             })
           });
-          
+
+          // Handle API errors more gracefully
           if (!response.ok) {
-            throw new Error('API request failed');
+            let errorMsg = `API request failed with status ${response.status}.`;
+            try {
+                const errorData = await response.json();
+                errorMsg += ` ${errorData.detail || ''}`;
+            } catch (e) { /* Ignore if response body is not JSON */ }
+            throw new Error(errorMsg);
           }
-          
+
           const data = await response.json();
-          
-          // Display result
-          loadingDiv.style.display = 'none';
-          resultDiv.style.display = 'block';
+
+          // --- Display Results ---
+          loadingDiv.classList.replace('animate__fadeIn', 'animate__fadeOut');
+          loadingDiv.addEventListener('animationend', () => {
+                loadingDiv.style.display = 'none';
+          }, { once: true }); // Ensure runs only once
+
+
           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
+
+          // Set grid columns (using auto-fit now, but keep class for potential overrides)
+          imagesContainer.className = number > 1 ? 'images-grid multi-column' : 'images-grid';
+
+          // Add new images with animation
           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`;
-              
+              // Use fadeInUp for a nicer entrance
+              imgWrapper.className = 'image-wrapper animate__animated animate__fadeInUp';
+              imgWrapper.style.animationDelay = `${index * 0.15}s`; // Slightly faster stagger
+
               const img = document.createElement('img');
               img.src = item.url;
-              img.alt = `Generated image ${index + 1}`;
-              
+              img.alt = `Generated image ${index + 1} for prompt: ${prompt}`;
+              img.loading = 'lazy'; // Improve performance for many images
+
               const downloadBtn = document.createElement('button');
               downloadBtn.className = 'btn-download';
+              downloadBtn.setAttribute('aria-label', 'Download image'); // Accessibility
               downloadBtn.innerHTML = `
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <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', () => {
+
+              downloadBtn.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent triggering wrapper hover effects if any
                 const a = document.createElement('a');
                 a.href = item.url;
-                a.download = `loki-ai-${model}-${index + 1}.jpg`;
+                // Create a safer filename
+                const safePrompt = prompt.substring(0, 20).replace(/[^a-z0-9]/gi, '_').toLowerCase();
+                a.download = `loki-ai-${model}-${safePrompt}-${index + 1}.jpg`;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
               });
-              
+
               imgWrapper.appendChild(img);
               imgWrapper.appendChild(downloadBtn);
               imagesContainer.appendChild(imgWrapper);
             });
+
+            // Show result section after images are ready to be animated
+            resultDiv.style.display = 'block';
+            resultDiv.classList.add('animate__animated', 'animate__fadeIn');
+
+            // Trigger confetti only on success
+             createConfetti();
+
+          } else {
+             throw new Error("Received empty data from API."); // Handle cases with OK status but no images
           }
-          
+
         } catch (error) {
-          console.error('Error:', error);
-          loadingDiv.style.display = 'none';
+          console.error('Error generating image:', error);
+          loadingDiv.style.display = 'none'; // Ensure loading is hidden on error
+          loadingDiv.classList.remove('animate__fadeIn', 'animate__fadeOut');
+
+          // Display error message
+          const errorMessageElement = errorDiv.querySelector('.error-message');
+          errorMessageElement.textContent = error.message || 'An unknown error occurred. Please check the console or try again.';
           errorDiv.style.display = 'block';
           errorDiv.classList.add('animate__animated', 'animate__fadeIn');
+
         } finally {
+          // Reset button state regardless of success/error
           generateBtn.disabled = false;
+          generateBtn.textContent = 'Generate Image';
         }
       });
-      
-      // Enter key to generate
+
+      // --- Enter Key Submission ---
       promptInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !generateBtn.disabled) { // Prevent multiple submits
+          e.preventDefault(); // Prevent potential form submission
           generateBtn.click();
         }
       });
+
+      // --- Initial Animation Trigger ---
+      // Small delay to ensure CSS is loaded before animations start
+      setTimeout(() => {
+        document.querySelectorAll('.animate__animated').forEach(el => {
+          // This is mostly handled by animate.css, but ensures visibility if needed
+          // You might not strictly need this if using animate.css correctly
+        });
+      }, 100);
+
     });
   </script>
 </body>