Spaces:

sadsad232
/

anycoder-e966ad9a

Running

App Files Files Community

sadsad232 commited on 6 days ago

Commit

2496bcf

verified ·

1 Parent(s): 675e869

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +649 -19

index.html CHANGED Viewed

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

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>anycoder | AI Manga Image Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        comic: ['"Bangers"', 'cursive'],
+                        inter: ['"Inter"', 'sans-serif'],
+                        jp: ['"Noto Sans JP"', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        :root {
+            --bg-base: #0c0c14;
+            --bg-panel: #13131f;
+            --bg-card: #1a1a28;
+            --bg-input: #161623;
+            --border-subtle: rgba(255,255,255,0.06);
+            --border-accent: rgba(100, 200, 255, 0.2);
+            --text-main: #ecebf3;
+            --text-muted: #7a7a94;
+            --text-faint: #4a4a5e;
+            --cyan-glow: #00e5ff;
+            --cyan-soft: rgba(0, 229, 255, 0.15);
+            --cyan-wash: rgba(0, 229, 255, 0.06);
+            --purple-glow: #a855f7;
+            --purple-wash: rgba(168, 85, 247, 0.08);
+            --pink-soft: rgba(255, 105, 180, 0.15);
+            --red-glow: #ff3366;
+            --red-wash: rgba(255, 51, 102, 0.1);
+            --success: #10b981;
+            --error: #ef4444;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg-base);
+            color: var(--text-main);
+            overflow-x: hidden;
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+        /* ---- Scrollbar ---- */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: rgba(100,200,255,0.15); border-radius: 10px; }
+        ::-webkit-scrollbar-thumb:hover { background: rgba(100,200,255,0.3); }
+        /* ---- Hero Canvas ---- */
+        .hero-canvas-wrap {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            z-index: 1;
+            pointer-events: none;
+        }
+        /* ---- Noise Texture ---- */
+        .noise {
+            position: fixed;
+            inset: 0;
+            opacity: 0.035;
+            z-index: 9999;
+            pointer-events: none;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+            background-size: 200px 200px;
+        }
+        /* ---- Radial Glow ---- */
+        .radial-glow {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(140px);
+            opacity: 0.4;
+            pointer-events: none;
+            animation: glowPulse 6s ease-in-out infinite alternate;
+        }
+        .radial-glow.cyan {
+            background: var(--cyan-glow);
+            width: 500px; height: 500px;
+            top: -10%; left: -5%;
+        }
+        .radial-glow.purple {
+            background: var(--purple-glow);
+            width: 400px; height: 400px;
+            bottom: -5%; right: -8%;
+            animation-delay: -3s;
+        }
+        @keyframes glowPulse {
+            0% { opacity: 0.2; transform: scale(1); }
+            100% { opacity: 0.45; transform: scale(1.15); }
+        }
+        /* ---- Floating Particles ---- */
+        .particle {
+            position: absolute;
+            border-radius: 50%;
+            pointer-events: none;
+            will-change: transform, opacity;
+        }
+        /* ---- Scattered grid pattern ---- */
+        .grid-bg {
+            background-image:
+                linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
+            background-size: 60px 60px;
+        }
+        /* ---- Glass Panel ---- */
+        .glass-panel {
+            background: rgba(19, 19, 31, 0.6);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            border: 1px solid var(--border-subtle);
+        }
+        /* ---- Neon Input ---- */
+        .neon-input {
+            background: var(--bg-input);
+            border: 1.5px solid rgba(255,255,255,0.07);
+            color: var(--text-main);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .neon-input:hover { border-color: rgba(0,229,255,0.2); }
+        .neon-input:focus {
+            outline: none;
+            border-color: var(--cyan-glow);
+            box-shadow: 0 0 20px rgba(0,229,255,0.08), inset 0 0 30px rgba(0,229,255,0.03);
+            background: #1a1a2a;
+        }
+        /* ---- Glow Button ---- */
+        .glow-btn {
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            border: 1.5px solid transparent;
+        }
+        .glow-btn::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, var(--cyan-glow), var(--purple-glow));
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: 0;
+            border-radius: inherit;
+        }
+        .glow-btn:hover::before { opacity: 0.15; }
+        .glow-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 8px 32px rgba(0,229,255,0.15);
+            border-color: rgba(0,229,255,0.3);
+        }
+        .glow-btn:active { transform: translateY(0) scale(0.98); }
+        /* ---- Anime Speed Lines ---- */
+        .speed-line {
+            position: absolute;
+            background: linear-gradient(90deg, transparent, rgba(0,229,255,0.12), transparent);
+            transform-origin: center;
+            pointer-events: none;
+        }
+        /* ---- Anime Action Star ---- */
+        .action-star {
+            position: absolute;
+            pointer-events: none;
+            animation: starPop 0.5s ease-out forwards;
+        }
+        @keyframes starPop {
+            0% { transform: scale(0) rotate(0deg); opacity: 1; }
+            60% { transform: scale(1.2) rotate(90deg); opacity: 0.8; }
+            100% { transform: scale(1) rotate(180deg); opacity: 0; }
+        }
+        /* ---- Card Hover ---- */
+        .hover-lift {
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .hover-lift:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 30px rgba(0,229,255,0.06);
+        }
+        /* ---- Scanlines ---- */
+        .scanlines {
+            background: repeating-linear-gradient(
+                0deg,
+                transparent,
+                transparent 2px,
+                rgba(0,0,0,0.02) 2px,
+                rgba(0,0,0,0.02) 4px
+            );
+            pointer-events: none;
+        }
+        /* ---- Manga Border ---- */
+        .manga-border {
+            position: relative;
+            border: 2px solid var(--cyan-glow);
+        }
+        .manga-border::before {
+            content: '';
+            position: absolute;
+            inset: -4px;
+            border: 1px dashed rgba(0,229,255,0.3);
+            pointer-events: none;
+        }
+        /* ---- Bento Grid ---- */
+        .bento-card {
+            background: rgba(19, 19, 31, 0.4);
+            border: 1px solid var(--border-subtle);
+            border-radius: 16px;
+            overflow: hidden;
+            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .bento-card:hover {
+            border-color: rgba(0,229,255,0.2);
+            transform: translateY(-3px);
+            box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 40px rgba(0,229,255,0.04);
+        }
+        /* ---- Loading Text Shimmer ---- */
+        @keyframes shimmer {
+            0% { background-position: -200% center; }
+            100% { background-position: 200% center; }
+        }
+        .shimmer-text {
+            background: linear-gradient(90deg, var(--text-muted), var(--cyan-glow), var(--text-muted));
+            background-size: 200% auto;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: shimmer 2.5s linear infinite;
+        }
+        /* ---- Pulse Ring ---- */
+        @keyframes pulseRing {
+            0% { transform: scale(0.8); opacity: 0.6; }
+            100% { transform: scale(1.5); opacity: 0; }
+        }
+        .pulse-ring {
+            animation: pulseRing 1.5s ease-out infinite;
+        }
+        /* ---- Tooltip ---- */
+        .tip {
+            position: relative;
+        }
+        .tip::after {
+            content: attr(data-tip);
+            position: absolute;
+            bottom: calc(100% + 8px);
+            left: 50%;
+            transform: translateX(-50%) scale(0.9);
+            background: var(--bg-panel);
+            color: var(--text-muted);
+            padding: 6px 12px;
+            border-radius: 8px;
+            font-size: 11px;
+            border: 1px solid var(--border-subtle);
+            white-space: nowrap;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.2s;
+            z-index: 100;
+            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+        }
+        .tip:hover::after {
+            opacity: 1;
+            transform: translateX(-50%) scale(1);
+        }
+        /* ---- Anime Line ---- */
+        .anime-line {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
+            opacity: 0.2;
+        }
+        /* ---- Floating 3D card ---- */
+        @keyframes float3d {
+            0%, 100% { transform: translateY(0) rotateX(2deg); }
+            50% { transform: translateY(-15px) rotateX(-2deg); }
+        }
+        .float3d {
+            animation: float3d 6s ease-in-out infinite;
+        }
+        /* ---- Typewriter cursor ---- */
+        .type-cursor::after {
+            content: '|';
+            animation: blink 0.8s infinite;
+            color: var(--cyan-glow);
+        }
+        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+        /* ---- Nav Link Underline ---- */
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--cyan-glow);
+            border-radius: 2px;
+            transition: width 0.3s;
+        }
+        .nav-link:hover::after { width: 100%; }
+        /* ---- Responsive overrides ---- */
+        @media (max-width: 640px) {
+            .hero-title { font-size: 2.5rem !important; }
+        }
+    </style>
+</head>
+<body class="grid-bg">
+    <!-- Noise Overlay -->
+    <div class="noise"></div>
+    <!-- ============ FIXED TOP NAVIGATION ============ -->
+    <nav class="fixed top-0 left-0 right-0 z-50 glass-panel border-b border-white/[0.04]">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+            <!-- Logo -->
+            <a href="#" class="flex items-center gap-2.5 group">
+                <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00e5ff] to-[#a855f7] flex items-center justify-center shadow-lg shadow-[rgba(0,229,255,0.15)] group-hover:shadow-[rgba(0,229,255,0.3)] transition-all">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                    </svg>
+                </div>
+                <div class="flex flex-col">
+                    <span class="text-[15px] font-bold tracking-tight text-white/90 leading-none">anycoder</span>
+                    <span class="text-[9px] tracking-[0.25em] uppercase text-[#00e5ff]/60 font-semibold leading-tight">AI Manga</span>
+                </div>
+            </a>
+            <!-- Center Links (desktop) -->
+            <div class="hidden md:flex items-center gap-8">
+                <a href="#generate" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">Generate</a>
+                <a href="#gallery" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">Gallery</a>
+                <a href="#how-it-works" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">How It Works</a>
+                <a href="#pricing" class="nav-link text-[13px] text-white/50 hover:text-white/80 transition-colors tracking-wide">Pricing</a>
+            </div>
+            <!-- Right Side -->
+            <div class="flex items-center gap-3">
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer"
+                   class="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-[#00e5ff]/10 border border-[#00e5ff]/20 text-[#00e5ff] text-[13px] font-medium hover:bg-[#00e5ff]/15 hover:border-[#00e5ff]/35 transition-all group">
+                    <span class="relative flex h-2 w-2">
+                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00e5ff] opacity-75"></span>
+                        <span class="relative inline-flex rounded-full h-2 w-2 bg-[#00e5ff]"></span>
+                    </span>
+                    Built with anycoder
+                </a>
+                <button class="md:hidden p-2 text-white/50 hover:text-white/80">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                        <line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- ============ HERO SECTION ============ -->
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
+        <!-- Hero background canvas -->
+        <div class="hero-canvas-wrap">
+            <canvas id="heroCanvas" style="width:100%;height:100%"></canvas>
+        </div>
+        <!-- Radial Glows -->
+        <div class="radial-glow cyan"></div>
+        <div class="radial-glow purple"></div>
+        <div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
+            <!-- Badge -->
+            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#00e5ff]/5 border border-[#00e5ff]/15 mb-10 animate-[fadeIn_0.8s_ease-out]">
+                <span class="relative flex h-2 w-2">
+                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00e5ff] opacity-75"></span>
+                    <span class="relative inline-flex rounded-full h-2 w-2 bg-[#00e5ff]"></span>
+                </span>
+                <span class="text-[12px] font-medium text-[#00e5ff]/80 tracking-wide">Now Generating in Real-time</span>
+            </div>
+            <!-- Title -->
+            <h1 class="hero-title font-comic text-6xl sm:text-7xl md:text-8xl text-white leading-none mb-6 tracking-wide animate-[fadeIn_1s_ease-out_0.2s_both]">
+                AI Manga
+                <br>
+                <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00e5ff] via-[#a855f7] to-[#ff3366] animate-[shimmer_4s_linear_infinite]" style="background-size:200% auto">
+                    Image Generator
+                </span>
+            </h1>
+            <!-- Subtitle -->
+            <p class="text-[15px] sm:text-[17px] text-white/35 max-w-2xl mx-auto mb-12 leading-relaxed font-light animate-[fadeIn_1.2s_ease-out_0.4s_both]">
+                Transform your imagination into stunning manga artwork instantly. Just describe your scene and watch as AI brings your anime vision to life with breathtaking detail and authentic Japanese manga aesthetics.
+            </p>
+            <!-- CTA Buttons -->
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-[fadeIn_1.4s_ease-out_0.6s_both]">
+                <a href="#generate" class="glow-btn group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-[#00e5ff] to-[#00b8d4] text-black font-bold rounded-xl text-[15px] shadow-[0_8px_32px_rgba(0,229,255,0.25)]">
+                    <span class="relative z-10 flex items-center gap-3">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            <path d="M12 5l0 14M5 12l14 0"/>
+                        </svg>
+                        Start Creating
+                    </span>
+                </a>
+                <a href="#how-it-works" class="group inline-flex items-center gap-2.5 px-7 py-4 border border-white/10 rounded-xl text-white/60 font-medium text-[15px] hover:bg-white/5 hover:text-white/80 hover:border-white/20 transition-all">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>
+                    </svg>
+                    Watch Demo
+                </a>
+            </div>
+            <!-- Hero Preview Cards (floating 3D style) -->
+            <div class="mt-20 flex items-center justify-center gap-4 sm:gap-6 animate-[fadeIn_1.6s_ease-out_0.8s_both] perspective-[1200px]">
+                <div class="float3d hidden sm:block" style="animation-delay:-2s">
+                    <div class="w-[140px] h-[180px] rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-black/40">
+                        <img src="https://images.unsplash.com/photo-1578632767115-351597cf2477?w=300&h=400&fit=crop&q=80" alt="Anime girl" class="w-full h-full object-cover">
+                    </div>
+                </div>
+                <div class="float3d" style="animation-delay:-1s">
+                    <div class="w-[180px] h-[240px] rounded-xl overflow-hidden border-2 border-[#00e5ff]/20 shadow-2xl shadow-black/50 relative manga-border">
+                        <img src="https://images.unsplash.com/photo-1542051841857-5f90071e7989?w=400&h=530&fit=crop&q=80" alt="Anime warrior" class="w-full h-full object-cover">
+                        <div class="absolute top-2 right-2 px-2 py-0.5 rounded-md bg-black/60 backdrop-blur-sm text-[10px] font-bold text-[#00e5ff] border border-[#00e5ff]/20">NEW</div>
+                    </div>
+                </div>
+                <div class="float3d hidden md:block" style="animation-delay:-3s">
+                    <div class="w-[140px] h-[180px] rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-black/40">
+                        <img src="https://images.unsplash.com/photo-1607604276583-eef5a0d8b1f9?w=300&h=400&fit=crop&q=80" alt="Anime landscape" class="w-full h-full object-cover">
+                    </div>
+                </div>
+            </div>
+            <!-- Scroll indicator -->
+            <div class="mt-16 flex flex-col items-center gap-2 animate-bounce">
+                <span class="text-[11px] text-white/20 uppercase tracking-[0.2em]">Scroll to explore</span>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-white/20">
+                    <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
+                </svg>
+            </div>
+        </div>
+    </section>
+    <!-- ============ GENERATOR SECTION ============ -->
+    <section id="generate" class="relative py-20">
+        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#00e5ff]/[0.015] to-transparent pointer-events-none"></div>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <!-- Section Header -->
+            <div class="text-center mb-12">
+                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#a855f7]/5 border border-[#a855f7]/15 mb-4">
+                    <span class="text-[11px] font-semibold uppercase tracking-widest text-[#a855f7]/70">Generator</span>
+                </div>
+                <h2 class="font-comic text-4xl sm:text-5xl text-white mb-3 tracking-wide">Create Your Manga</h2>
+                <p class="text-[14px] text-white/30 max-w-lg mx-auto">Describe your vision. Adjust the parameters. Watch AI transform your words into manga art.</p>
+            </div>
+            <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
+                <!-- LEFT PANEL: Controls -->
+                <div class="lg:w-[420px] flex-shrink-0 space-y-5">
+                    <!-- Prompt Card -->
+                    <div class="bento-card p-6 space-y-5">
+                        <div class="flex items-center gap-3">
+                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#00e5ff]/15 to-[#a855f7]/10 flex items-center justify-center border border-[#00e5ff]/10">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00e5ff" stroke-width="2" stroke-linecap="round">
+                                    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
+                                </svg>
+                            </div>
+                            <div>
+                                <h3 class="text-[15px] font-semibold text-white/90">Prompt</h3>
+                                <p class="text-[11px] text-white/30">Describe your manga scene</p>
+                            </div>
+                        </div>
+                        <div class="relative group">
+                            <textarea
+                                id="promptInput"
+                                class="neon-input w-full min-h-[120px] rounded-xl p-4 text-[14px] resize-none font-light placeholder-white/15 leading-relaxed"
+                                placeholder="e.g., A cyberpunk samurai girl with neon blue katana standing on a rainy Tokyo rooftop at night, detailed manga style..."
+                            ></textarea>
+                            <div class="absolute bottom-3 right-3 flex gap-1.5">
+                                <button class="tip p-1.5 rounded-lg hover:bg-white/5 text-white/20 hover:text-white/50 transition-all" data-tip="Clear" onclick="document.getElementById('promptInput').value=''">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                                </button>
+                            </div>
+                            <div class="absolute top-3 right-3">
+                                <button id="randomPrompt" class="tip p-1.5 rounded-lg hover:bg-white/5 text-white/20 hover:text-white/50 transition-all" data-tip="Random Prompt">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l5 5M4 4l5 5"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- Quick Suggestions -->
+                        <div class="flex flex-wrap gap-2">
+                            <button onclick="setPrompt('A brave female warrior with flowing hair, battle-scarred armor, lightning effects, dramatic pose, manga style')"
+                                class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#00e5ff]/10 hover:text-[#00e5ff]/80 hover:border-[#00e5ff]/20 transition-all cursor-pointer">
+                                Female Warrior
+                            </button>
+                            <button onclick="setPrompt('Cute anime girl with cat ears, cherry blossom petals, soft pink color palette, shoujo manga style')"
+                                class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#ff69b4]/10 hover:text-[#ff69b4]/80 hover:border-[#ff69b4]/20 transition-all cursor-pointer">
+                                Kawaii Cat Girl
+                            </button>
+                            <button onclick="setPrompt('Dark mysterious ninja assassin, hidden in shadows, glowing red eyes, dark city alley, seinen manga style')"
+                                class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#ff3366]/10 hover:text-[#ff3366]/80 hover:border-[#ff3366]/20 transition-all cursor-pointer">
+                                Dark Ninja
+                            </button>
+                            <button onclick="setPrompt('Futuristic mecha robot piloted by a young boy, space battle scene, explosions, mecha anime style')"
+                                class="px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.06] text-[11px] text-white/40 hover:bg-[#a855f7]/10 hover:text-[#a855f7]/80 hover:border-[#a855f7]/20 transition-all cursor-pointer">
+                                Mecha Battle
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Parameters Card -->
+                    <div class="bento-card p-6 space-y-5">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#a855f7]/15 to-[#ff3366]/10 flex items-center justify-center border border-[#a855f7]/10">
+                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round">
+                                        <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 000 .33c0 .93-.76 1.68-1.69 1.68h-1.72M9.31 5.75L8.5 2.68M14.69 5.75L15.5 2.68M2.82 15.69a1.65 1.65 0 01.33 0 1.68 1.68 0 011.69-1.69h1.72M9.31 18.25l.81 3.07M14.69 18.25l-.81 3.07M5.69 9.31L2.68 8.5M18.31 9.31l3.01-.81M2.82 8.31a1.65 1.65 0 01-.33 0A1.68 1.68 0 011.65 7.5h1.72"/>
+                                    </svg>
+                                </div>
+                                <h3 class="text-[15px] font-semibold text-white/90">Parameters</h3>
+                            </div>
+                            <button id="resetParams" class="tip text-[11px] text-white/25 hover:text-white/50 transition-colors" data-tip="Reset to defaults">Reset</button>
+                        </div>
+                        <!-- Style -->
+                        <div class="space-y-2.5">
+                            <div class="flex items-center justify-between">
+                                <label class="text-[13px] text-white/50 font-medium">Manga Style</label>
+                                <span id="styleValue" class="text-[12px] text-[#00e5ff]">Shonen</span>
+                            </div>
+                            <div class="flex flex-wrap gap-2">
+                                <button class="style-chip active px-3.5 py-2 rounded-lg text-[12px] font-medium border border-[#00e5ff]/30 bg-[#00e5ff]/10 text-[#00e5ff] transition-all" data-style="shonen">Shonen</button>
+                                <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="shoujo">Shoujo</button>
+                                <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="seinen">Seinen</button>
+                                <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="josei">Josei</button>
+                                <button class="style-chip px-3.5 py-2 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-style="chibi">Chibi</button>
+                            </div>
+                        </div>
+                        <div class="anime-line"></div>
+                        <!-- Aspect Ratio -->
+                        <div class="space-y-2.5">
+                            <div class="flex items-center justify-between">
+                                <label class="text-[13px] text-white/50 font-medium">Aspect Ratio</label>
+                                <span id="aspectValue" class="text-[12px] text-[#a855f7]">1:1 Square</span>
+                            </div>
+                            <div class="flex gap-2">
+                                <button class="aspect-chip active flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-[#a855f7]/30 bg-[#a855f7]/10 text-[#a855f7] transition-all" data-aspect="1:1" data-w="512" data-h="512">1:1</button>
+                                <button class="aspect-chip flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-aspect="3:4" data-w="512" data-h="768">3:4</button>
+                                <button class="aspect-chip flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-aspect="16:9" data-w="1024" data-h="640">16:9</button>
+                                <button class="aspect-chip flex-1 py-2.5 rounded-lg text-[12px] font-medium border border-white/[0.06] bg-transparent text-white/40 hover:bg-white/[0.04] hover:text-white/60 transition-all" data-aspect="9:16" data-w="640" data-h="1024">9:16</button>
+                            </div>
+                        </div>
+                        <div class="anime-line"></div>
+                        <!-- Steps Slider -->
+                        <div class="space-y-3">
+                            <div class="flex items-center justify-between">
+                                <label class="text-[13px] text-white/50 font-medium">Quality Steps</label>
+                                <span id="stepsValue" class="text-[12px] text-white/50 tabular-nums">25 steps</span>
+                            </div>
+                            <div class="relative">
+                                <input type="range" id="stepsRange" min="15" max="50" value="25" class="w-full h-[3px] rounded-full appearance-none cursor-pointer" style="background:linear-gradient(90deg,#00e5ff 50%,rgba(255,255,255,0.08) 50%)">
+                                <style>
+                                    input[type="range"]::-webkit-slider-thumb {
+                                        -webkit-appearance: none;
+                                        width: 16px; height: 16px;
+                                        border-radius: 50%;
+                                        background: #00e5ff;
+                                        cursor: pointer;
+                                        box-shadow: 0 0 12px rgba(0,229,255,0.4), 0 0 0 4px rgba(0,229,255,0.1);
+                                        transition: box-shadow 0.2s;
+                                    }
+                                    input[type="range"]::-webkit-slider-thumb:hover {
+                                        box-shadow: 0 0 20px rgba(0,229,255,0.6), 0 0 0 6px rgba(0,229,255,0.15);
+                                    }
+                                </style>
+                            </div>
+                            <div class="flex justify-between text-[10px] text-white/20">
+                                <span>Fast</span><span>Better</span>
+                            </div>
+                        </div>
+                        <div class="anime-line"></div>
+                        <!-- Negative Prompt -->
+                        <div class="space-y-2">
+                            <div class="flex items-center gap-2">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-white/20"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                                <label class="text-[13px] text-white/50 font-medium">Negative Prompt</label>
+                            </div>
+                            <input type="text" id="negativePrompt"
+                                class="neon-input w-full rounded-xl px-4 py-3 text-[13px] placeholder-white/15"
+                                placeholder="e.g., blurry, low quality, bad anatomy, watermark..."
+                            >
+                        </div>
+                    </div>
+                    <!-- Generate Button -->
+                    <button id="generateBtn" class="glow-btn relative w-full py-4 rounded-xl bg-gradient-to-r from-[#00e5ff] to-[#0099cc] text-black font-bold text-[15px] shadow-[0_8px_32px_rgba(0,229,255,0.2)] flex items-center justify-center gap-2.5 cursor-pointer overflow-hidden">
+                        <span id="btnContent" class="relative z-10 flex items-center gap-2.5">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+                            </svg>
+                            Generate Manga Art
+                        </span>
+                        <span id="btnSpinner" class="hidden relative z-10 flex items-center gap-2.5">
+                            <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            <span id="loadingText" class="shimmer-text type-cursor font-medium">Generating</span>
+                        </span>
+                    </button>
+                </div>
+                <!-- RIGHT PANEL: Preview -->
+                <div class="flex-1 min-w-0">
+                    <div class="bento-card overflow-hidden h-full min-h-[520px] flex flex-col relative">
+                        <!-- Preview Toolbar -->
+                        <div class="flex items-center