Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Celebrity LoRA Mix</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📸</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| accent: '#ec4899' | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .slider-track { | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| .slider-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: white; | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.2); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .lora-card.selected { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25); | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion-content.open { | |
| max-height: 1000px; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-4 px-6 flex justify-between items-center sticky top-0 z-10"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="camera" class="text-primary w-8 h-8"></i> | |
| <h1 class="text-xl md:text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Celebrity LoRA Mix</h1> | |
| </div> | |
| <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| </button> | |
| </header> | |
| <main class="max-w-6xl mx-auto px-4 py-8"> | |
| <!-- Prompt Input Section --> | |
| <section class="mb-12" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i data-feather="edit-3" class="mr-2 text-primary"></i> | |
| Describe Your Vision | |
| </h2> | |
| <div class="relative"> | |
| <textarea | |
| id="prompt-input" | |
| class="w-full h-32 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none" | |
| placeholder="Describe your vision... (Select LoRAs first for trigger word suggestions)" | |
| ></textarea> | |
| <button class="absolute bottom-3 right-3 p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"> | |
| <i data-feather="mic" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| </div> | |
| <div id="trigger-suggestions" class="mt-3 flex flex-wrap gap-2"></div> | |
| </div> | |
| </section> | |
| <!-- LoRA Model Selection --> | |
| <section class="mb-12" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i data-feather="users" class="mr-2 text-primary"></i> | |
| Select Celebrity Models (Max 4) | |
| </h2> | |
| <div id="lora-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> | |
| <!-- LoRA cards will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Model Influence Sliders --> | |
| <section class="mb-12" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i data-feather="sliders" class="mr-2 text-primary"></i> | |
| Model Influence | |
| </h2> | |
| <div id="sliders-container" class="space-y-6"> | |
| <!-- Sliders will be dynamically inserted here --> | |
| <p id="no-models-message" class="text-gray-500 text-center py-4">Select up to 4 models to adjust their influence</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advanced Parameters --> | |
| <section class="mb-12" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <button id="advanced-toggle" class="w-full px-6 py-4 text-left flex justify-between items-center font-semibold bg-gray-50 hover:bg-gray-100 transition-colors"> | |
| <span class="flex items-center"> | |
| <i data-feather="tool" class="mr-2 text-primary"></i> | |
| Advanced Parameters | |
| </span> | |
| <i data-feather="chevron-down" class="transition-transform duration-300" id="accordion-icon"></i> | |
| </button> | |
| <div id="advanced-content" class="accordion-content"> | |
| <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">CFG Scale: <span id="cfg-value" class="font-mono">7</span></label> | |
| <input type="range" min="1" max="20" step="0.5" value="7" id="cfg-slider" class="w-full slider-track bg-gradient-to-r from-blue-300 to-purple-400 appearance-none cursor-pointer rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Steps: <span id="steps-value" class="font-mono">30</span></label> | |
| <input type="range" min="10" max="100" step="5" value="30" id="steps-slider" class="w-full slider-track bg-gradient-to-r from-green-300 to-teal-400 appearance-none cursor-pointer rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Width</label> | |
| <select id="width-select" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> | |
| <option value="512">512px</option> | |
| <option value="768" selected>768px</option> | |
| <option value="1024">1024px</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Height</label> | |
| <select id="height-select" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> | |
| <option value="512">512px</option> | |
| <option value="768" selected>768px</option> | |
| <option value="1024">1024px</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Seed</label> | |
| <div class="flex"> | |
| <input type="number" id="seed-input" placeholder="Leave blank for random" class="flex-grow p-2 border border-gray-300 rounded-l-lg focus:ring-primary focus:border-primary"> | |
| <button id="randomize-seed" class="bg-gray-200 hover:bg-gray-300 px-4 rounded-r-lg transition-colors"> | |
| <i data-feather="refresh-cw" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Generate Button & Progress --> | |
| <section class="mb-12 text-center" data-aos="fade-up" data-aos-delay="400"> | |
| <button id="generate-btn" class="relative w-full max-w-xs bg-gradient-to-r from-primary to-secondary text-white font-bold py-4 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"> | |
| <span id="generate-text">Generate Image</span> | |
| <div id="generate-spinner{"ok":false,"message":"terminated"} | |
| </body> | |
| </html> |