Hugging Face's logo

Spaces:
BoobyBoobs
/
loros
Running

App Files Community
BoobyBoobs commited on
Commit
6265b9e
·
verified ·
1 Parent(s): dadf706

<!DOCTYPE html>

Browse files

<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="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
<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://unpkg.com/feather-icons"></script>
<style>
body {
font-family: 'Source Sans Pro', sans-serif;
}
.lora-card {
transition: all 0.3s ease;
}
.lora-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.slider-container {
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
border-radius: 9999px;
height: 8px;
}
.slider-thumb {
background: white;
border: 2px solid #4f46e5;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion-content.open {
max-height: 1000px;
}
.generate-btn {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
transition: all 0.3s ease;
}
.generate-btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}
.progress-bar {
transition: width 0.4s ease;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header -->
<header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
<i data-feather="camera" class="text-white"></i>
</div>
<h1 class="text-xl font-bold text-gray-800">Celebrity LoRA Mix</h1>
</div>
<button class="p-2 rounded-lg hover:bg-gray-100">
<i data-feather="settings"></i>
</button>
</header>

<!-- Main Content -->
<main class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Prompt Input -->
<section class="mb-8" data-aos="fade-up">
<label class="block text-lg font-semibold text-gray-800 mb-3">Your Creative Prompt</label>
<div class="relative">
<textarea
id="prompt-input"
class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent shadow-sm resize-none"
rows="3"
placeholder="Describe your vision... (Select LoRAs first for trigger word suggestions)"
></textarea>
<div class="absolute bottom-3 right-3">
<button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200">
<i data-feather="mic"></i>
</button>
</div>
</div>
</section>

<!-- LoRA Selection -->
<section class="mb-8" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800">LoRA Models</h2>
<span class="text-sm text-gray-500">Select up to 4 models</span>
</div>

<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4" id="lora-grid">
<!-- LoRA cards will be dynamically inserted here -->
</div>
</section>

<!-- Scale Sliders -->
<section class="mb-8" data-aos="fade-up" data-aos-delay="200">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Model Influence Scales</h2>
<div id="sliders-container" class="space-y-6">
<!-- Sliders will be dynamically inserted here -->
</div>
</section>

<!-- Advanced Parameters Accordion -->
<section class="mb-8" data-aos="fade-up" data-aos-delay="300">
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button id="accordion-toggle" class="w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100">
<span class="font-semibold text-gray-800">Advanced Parameters</span>
<i data-feather="chevron-down" id="accordion-icon"></i>
</button>

<div id="advanced-params" class="accordion-content open">
<div class="p-4 bg-white grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">CFG Scale</label>
<input type="range" min="1" max="20" value="7" step="0.5"
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
id="cfg-slider">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>1</span>
<span id="cfg-value">7</span>
<span>20</span>
</div>
</div>

<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Steps</label>
<input type="range" min="10" max="100" value="30" step="5"
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
id="steps-slider">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>10</span>
<span id="steps-value">30</span>
<span>100</span>
</div>
</div>

<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Width</label>
<select class="w-full p-2 border border-gray-300 rounded-lg">
<option>512</option>
<option selected>768</option>
<option>1024</option>
</select>
</div>

<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Height</label>
<select class="w-full p-2 border border-gray-300 rounded-lg">
<option>512</option>
<option selected>768</option>
<option>1024</option>
</select>
</div>

<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Seed</label>
<div class="flex space-x-2">
<input type="text" placeholder="Leave blank for random"
class="flex-1 p-2 border border-gray-300 rounded-lg">
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">
<i data-feather="refresh-cw"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Generate Button -->
<section class="mb-8 text-center" data-aos="fade-up" data-aos-delay="400">
<button id="generate-btn" class="generate-btn text-white font-semibold py-4 px-8 rounded-xl shadow-lg w-full sm:w-auto">
<span id="btn-text">Generate Image</span>
<div id="loading-spinner" class="hidden inline-block ml-2">
<i data-feather="loader" class="animate-spin"></i>
</div>
</button>

<!-- Progress Bar -->
<div id="progress-container" class="mt-4 hidden">
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<p id="progress-text" class="text-sm text-gray-600 mt-2">Preparing models...</p>
</div>
</section>

<!-- Generated Image Display -->
<section id="result-section" class="hidden" data-aos="fade-up" data-aos-delay="500">
<div class="border border-gray-200 rounded-xl overflow-hidden bg-white shadow-sm">
<div class="p-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-800">Generated Image</h2>
</div>
<div class="p-4">
<div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center mb-4">
<img id="generated-image" src="" alt="Generated image" class="max-w-full max-h-full object-contain">
</div>
<div class="flex justify-center">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
<i data-feather="download" class="mr-2"></i>

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +187 -19
  3. prompts.txt +421 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Loros
3
- emoji: 👀
4
- colorFrom: blue
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: loros
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,187 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Celebrity LoRA Mix</title>
7
+ <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>">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#6366f1',
19
+ secondary: '#8b5cf6',
20
+ accent: '#ec4899'
21
+ },
22
+ animation: {
23
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite'
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style>
30
+ .slider-track {
31
+ height: 6px;
32
+ border-radius: 3px;
33
+ }
34
+
35
+ .slider-thumb {
36
+ width: 20px;
37
+ height: 20px;
38
+ border-radius: 50%;
39
+ background: white;
40
+ box-shadow: 0 2px 6px rgba(0,0,0,0.2);
41
+ top: 50%;
42
+ transform: translateY(-50%);
43
+ }
44
+
45
+ .lora-card.selected {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
48
+ }
49
+
50
+ .accordion-content {
51
+ max-height: 0;
52
+ overflow: hidden;
53
+ transition: max-height 0.3s ease-out;
54
+ }
55
+
56
+ .accordion-content.open {
57
+ max-height: 1000px;
58
+ }
59
+
60
+ @keyframes fadeIn {
61
+ from { opacity: 0; transform: translateY(10px); }
62
+ to { opacity: 1; transform: translateY(0); }
63
+ }
64
+
65
+ .fade-in {
66
+ animation: fadeIn 0.5s ease-out forwards;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-50 min-h-screen">
71
+ <!-- Header -->
72
+ <header class="bg-white shadow-sm py-4 px-6 flex justify-between items-center sticky top-0 z-10">
73
+ <div class="flex items-center space-x-2">
74
+ <i data-feather="camera" class="text-primary w-8 h-8"></i>
75
+ <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>
76
+ </div>
77
+ <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
78
+ <i data-feather="settings" class="w-5 h-5"></i>
79
+ </button>
80
+ </header>
81
+
82
+ <main class="max-w-6xl mx-auto px-4 py-8">
83
+ <!-- Prompt Input Section -->
84
+ <section class="mb-12" data-aos="fade-up">
85
+ <div class="bg-white rounded-xl shadow-md p-6">
86
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
87
+ <i data-feather="edit-3" class="mr-2 text-primary"></i>
88
+ Describe Your Vision
89
+ </h2>
90
+ <div class="relative">
91
+ <textarea
92
+ id="prompt-input"
93
+ class="w-full h-32 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
94
+ placeholder="Describe your vision... (Select LoRAs first for trigger word suggestions)"
95
+ ></textarea>
96
+ <button class="absolute bottom-3 right-3 p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
97
+ <i data-feather="mic" class="w-5 h-5 text-gray-600"></i>
98
+ </button>
99
+ </div>
100
+ <div id="trigger-suggestions" class="mt-3 flex flex-wrap gap-2"></div>
101
+ </div>
102
+ </section>
103
+
104
+ <!-- LoRA Model Selection -->
105
+ <section class="mb-12" data-aos="fade-up" data-aos-delay="100">
106
+ <div class="bg-white rounded-xl shadow-md p-6">
107
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
108
+ <i data-feather="users" class="mr-2 text-primary"></i>
109
+ Select Celebrity Models (Max 4)
110
+ </h2>
111
+ <div id="lora-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
112
+ <!-- LoRA cards will be dynamically inserted here -->
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Model Influence Sliders -->
118
+ <section class="mb-12" data-aos="fade-up" data-aos-delay="200">
119
+ <div class="bg-white rounded-xl shadow-md p-6">
120
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
121
+ <i data-feather="sliders" class="mr-2 text-primary"></i>
122
+ Model Influence
123
+ </h2>
124
+ <div id="sliders-container" class="space-y-6">
125
+ <!-- Sliders will be dynamically inserted here -->
126
+ <p id="no-models-message" class="text-gray-500 text-center py-4">Select up to 4 models to adjust their influence</p>
127
+ </div>
128
+ </div>
129
+ </section>
130
+
131
+ <!-- Advanced Parameters -->
132
+ <section class="mb-12" data-aos="fade-up" data-aos-delay="300">
133
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
134
+ <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">
135
+ <span class="flex items-center">
136
+ <i data-feather="tool" class="mr-2 text-primary"></i>
137
+ Advanced Parameters
138
+ </span>
139
+ <i data-feather="chevron-down" class="transition-transform duration-300" id="accordion-icon"></i>
140
+ </button>
141
+ <div id="advanced-content" class="accordion-content">
142
+ <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
143
+ <div>
144
+ <label class="block text-sm font-medium text-gray-700 mb-2">CFG Scale: <span id="cfg-value" class="font-mono">7</span></label>
145
+ <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">
146
+ </div>
147
+ <div>
148
+ <label class="block text-sm font-medium text-gray-700 mb-2">Steps: <span id="steps-value" class="font-mono">30</span></label>
149
+ <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">
150
+ </div>
151
+ <div>
152
+ <label class="block text-sm font-medium text-gray-700 mb-2">Width</label>
153
+ <select id="width-select" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
154
+ <option value="512">512px</option>
155
+ <option value="768" selected>768px</option>
156
+ <option value="1024">1024px</option>
157
+ </select>
158
+ </div>
159
+ <div>
160
+ <label class="block text-sm font-medium text-gray-700 mb-2">Height</label>
161
+ <select id="height-select" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
162
+ <option value="512">512px</option>
163
+ <option value="768" selected>768px</option>
164
+ <option value="1024">1024px</option>
165
+ </select>
166
+ </div>
167
+ <div class="md:col-span-2">
168
+ <label class="block text-sm font-medium text-gray-700 mb-2">Seed</label>
169
+ <div class="flex">
170
+ <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">
171
+ <button id="randomize-seed" class="bg-gray-200 hover:bg-gray-300 px-4 rounded-r-lg transition-colors">
172
+ <i data-feather="refresh-cw" class="w-5 h-5"></i>
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Generate Button & Progress -->
182
+ <section class="mb-12 text-center" data-aos="fade-up" data-aos-delay="400">
183
+ <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">
184
+ <span id="generate-text">Generate Image</span>
185
+ <div id="generate-spinner{"ok":false,"message":"terminated"}
186
+ </body>
187
+ </html>
prompts.txt ADDED
@@ -0,0 +1,421 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Celebrity LoRA Mix</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ body {
16
+ font-family: 'Source Sans Pro', sans-serif;
17
+ }
18
+ .lora-card {
19
+ transition: all 0.3s ease;
20
+ }
21
+ .lora-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .slider-container {
26
+ background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
27
+ border-radius: 9999px;
28
+ height: 8px;
29
+ }
30
+ .slider-thumb {
31
+ background: white;
32
+ border: 2px solid #4f46e5;
33
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
34
+ }
35
+ .accordion-content {
36
+ max-height: 0;
37
+ overflow: hidden;
38
+ transition: max-height 0.3s ease-out;
39
+ }
40
+ .accordion-content.open {
41
+ max-height: 1000px;
42
+ }
43
+ .generate-btn {
44
+ background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
45
+ transition: all 0.3s ease;
46
+ }
47
+ .generate-btn:hover {
48
+ transform: scale(1.05);
49
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
50
+ }
51
+ .progress-bar {
52
+ transition: width 0.4s ease;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-50 min-h-screen">
57
+ <!-- Header -->
58
+ <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between">
59
+ <div class="flex items-center space-x-2">
60
+ <div class="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
61
+ <i data-feather="camera" class="text-white"></i>
62
+ </div>
63
+ <h1 class="text-xl font-bold text-gray-800">Celebrity LoRA Mix</h1>
64
+ </div>
65
+ <button class="p-2 rounded-lg hover:bg-gray-100">
66
+ <i data-feather="settings"></i>
67
+ </button>
68
+ </header>
69
+
70
+ <!-- Main Content -->
71
+ <main class="container mx-auto px-4 py-8 max-w-4xl">
72
+ <!-- Prompt Input -->
73
+ <section class="mb-8" data-aos="fade-up">
74
+ <label class="block text-lg font-semibold text-gray-800 mb-3">Your Creative Prompt</label>
75
+ <div class="relative">
76
+ <textarea
77
+ id="prompt-input"
78
+ class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent shadow-sm resize-none"
79
+ rows="3"
80
+ placeholder="Describe your vision... (Select LoRAs first for trigger word suggestions)"
81
+ ></textarea>
82
+ <div class="absolute bottom-3 right-3">
83
+ <button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200">
84
+ <i data-feather="mic"></i>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </section>
89
+
90
+ <!-- LoRA Selection -->
91
+ <section class="mb-8" data-aos="fade-up" data-aos-delay="100">
92
+ <div class="flex items-center justify-between mb-4">
93
+ <h2 class="text-lg font-semibold text-gray-800">LoRA Models</h2>
94
+ <span class="text-sm text-gray-500">Select up to 4 models</span>
95
+ </div>
96
+
97
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4" id="lora-grid">
98
+ <!-- LoRA cards will be dynamically inserted here -->
99
+ </div>
100
+ </section>
101
+
102
+ <!-- Scale Sliders -->
103
+ <section class="mb-8" data-aos="fade-up" data-aos-delay="200">
104
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Model Influence Scales</h2>
105
+ <div id="sliders-container" class="space-y-6">
106
+ <!-- Sliders will be dynamically inserted here -->
107
+ </div>
108
+ </section>
109
+
110
+ <!-- Advanced Parameters Accordion -->
111
+ <section class="mb-8" data-aos="fade-up" data-aos-delay="300">
112
+ <div class="border border-gray-200 rounded-xl overflow-hidden">
113
+ <button id="accordion-toggle" class="w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100">
114
+ <span class="font-semibold text-gray-800">Advanced Parameters</span>
115
+ <i data-feather="chevron-down" id="accordion-icon"></i>
116
+ </button>
117
+
118
+ <div id="advanced-params" class="accordion-content open">
119
+ <div class="p-4 bg-white grid grid-cols-1 md:grid-cols-2 gap-4">
120
+ <div>
121
+ <label class="block text-sm font-medium text-gray-700 mb-1">CFG Scale</label>
122
+ <input type="range" min="1" max="20" value="7" step="0.5"
123
+ class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
124
+ id="cfg-slider">
125
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
126
+ <span>1</span>
127
+ <span id="cfg-value">7</span>
128
+ <span>20</span>
129
+ </div>
130
+ </div>
131
+
132
+ <div>
133
+ <label class="block text-sm font-medium text-gray-700 mb-1">Steps</label>
134
+ <input type="range" min="10" max="100" value="30" step="5"
135
+ class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
136
+ id="steps-slider">
137
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
138
+ <span>10</span>
139
+ <span id="steps-value">30</span>
140
+ <span>100</span>
141
+ </div>
142
+ </div>
143
+
144
+ <div>
145
+ <label class="block text-sm font-medium text-gray-700 mb-1">Width</label>
146
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
147
+ <option>512</option>
148
+ <option selected>768</option>
149
+ <option>1024</option>
150
+ </select>
151
+ </div>
152
+
153
+ <div>
154
+ <label class="block text-sm font-medium text-gray-700 mb-1">Height</label>
155
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
156
+ <option>512</option>
157
+ <option selected>768</option>
158
+ <option>1024</option>
159
+ </select>
160
+ </div>
161
+
162
+ <div class="md:col-span-2">
163
+ <label class="block text-sm font-medium text-gray-700 mb-1">Seed</label>
164
+ <div class="flex space-x-2">
165
+ <input type="text" placeholder="Leave blank for random"
166
+ class="flex-1 p-2 border border-gray-300 rounded-lg">
167
+ <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">
168
+ <i data-feather="refresh-cw"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Generate Button -->
178
+ <section class="mb-8 text-center" data-aos="fade-up" data-aos-delay="400">
179
+ <button id="generate-btn" class="generate-btn text-white font-semibold py-4 px-8 rounded-xl shadow-lg w-full sm:w-auto">
180
+ <span id="btn-text">Generate Image</span>
181
+ <div id="loading-spinner" class="hidden inline-block ml-2">
182
+ <i data-feather="loader" class="animate-spin"></i>
183
+ </div>
184
+ </button>
185
+
186
+ <!-- Progress Bar -->
187
+ <div id="progress-container" class="mt-4 hidden">
188
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
189
+ <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
190
+ </div>
191
+ <p id="progress-text" class="text-sm text-gray-600 mt-2">Preparing models...</p>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Generated Image Display -->
196
+ <section id="result-section" class="hidden" data-aos="fade-up" data-aos-delay="500">
197
+ <div class="border border-gray-200 rounded-xl overflow-hidden bg-white shadow-sm">
198
+ <div class="p-4 border-b border-gray-200">
199
+ <h2 class="text-lg font-semibold text-gray-800">Generated Image</h2>
200
+ </div>
201
+ <div class="p-4">
202
+ <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center mb-4">
203
+ <img id="generated-image" src="" alt="Generated image" class="max-w-full max-h-full object-contain">
204
+ </div>
205
+ <div class="flex justify-center">
206
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
207
+ <i data-feather="download" class="mr-2"></i>
208
+ Download
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Error Message -->
216
+ <div id="error-message" class="hidden p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg" role="alert">
217
+ <span id="error-text"></span>
218
+ </div>
219
+ </main>
220
+
221
+ <script>
222
+ // Sample LoRA data (would come from backend in real implementation)
223
+ const loraModels = [
224
+ { id: 1, name: "Taylor Swift", trigger_word: "taylor_swift", thumbnail: "http://static.photos/people/320x240/1" },
225
+ { id: 2, name: "Dwayne Johnson", trigger_word: "dwayne_johnson", thumbnail: "http://static.photos/people/320x240/2" },
226
+ { id: 3, name: "Scarlett Johansson", trigger_word: "scarlett_johansson", thumbnail: "http://static.photos/people/320x240/3" },
227
+ { id: 4, name: "Tom Hanks", trigger_word: "tom_hanks", thumbnail: "http://static.photos/people/320x240/4" },
228
+ { id: 5, name: "Ariana Grande", trigger_word: "ariana_grande", thumbnail: "http://static.photos/people/320x240/5" },
229
+ { id: 6, name: "Chris Evans", trigger_word: "chris_evans", thumbnail: "http://static.photos/people/320x240/6" }
230
+ ];
231
+
232
+ // State management
233
+ let selectedLoras = [];
234
+ let isAccordionOpen = true;
235
+
236
+ // Initialize UI
237
+ document.addEventListener('DOMContentLoaded', function() {
238
+ feather.replace();
239
+ AOS.init({
240
+ duration: 800,
241
+ easing: 'ease-out-quart'
242
+ });
243
+
244
+ renderLoraGrid();
245
+ setupEventListeners();
246
+ updateSliders();
247
+ });
248
+
249
+ function renderLoraGrid() {
250
+ const grid = document.getElementById('lora-grid');
251
+ grid.innerHTML = '';
252
+
253
+ loraModels.forEach(model => {
254
+ const isSelected = selectedLoras.includes(model.id);
255
+ const card = document.createElement('div');
256
+ card.className = `lora-card border rounded-xl p-3 cursor-pointer transition-all ${isSelected ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:border-gray-300'}`;
257
+ card.dataset.id = model.id;
258
+
259
+ card.innerHTML = `
260
+ <div class="aspect-square mb-2 rounded-lg overflow-hidden bg-gray-200">
261
+ <img src="${model.thumbnail}" alt="${model.name}" class="w-full h-full object-cover">
262
+ </div>
263
+ <h3 class="font-semibold text-sm truncate">${model.name}</h3>
264
+ <p class="text-xs text-gray-500 truncate">${model.trigger_word}</p>
265
+ `;
266
+
267
+ card.addEventListener('click', () => toggleLoraSelection(model.id));
268
+ grid.appendChild(card);
269
+ });
270
+ }
271
+
272
+ function toggleLoraSelection(id) {
273
+ const index = selectedLoras.indexOf(id);
274
+ if (index > -1) {
275
+ selectedLoras.splice(index, 1);
276
+ } else if (selectedLoras.length < 4) {
277
+ selectedLoras.push(id);
278
+ }
279
+
280
+ renderLoraGrid();
281
+ updateSliders();
282
+ }
283
+
284
+ function updateSliders() {
285
+ const container = document.getElementById('sliders-container');
286
+ container.innerHTML = '';
287
+
288
+ selectedLoras.slice(0, 4).forEach((id, index) => {
289
+ const model = loraModels.find(m => m.id === id);
290
+ const slider = document.createElement('div');
291
+ slider.className = 'space-y-2';
292
+ slider.innerHTML = `
293
+ <div class="flex justify-between">
294
+ <label class="font-medium text-gray-700">${model.name} Influence</label>
295
+ <span id="scale-${index}-value" class="text-indigo-600 font-medium">0.8</span>
296
+ </div>
297
+ <input type="range" min="0" max="1" step="0.05" value="0.8"
298
+ class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
299
+ id="scale-${index}">
300
+ <div class="flex justify-between text-xs text-gray-500">
301
+ <span>0</span>
302
+ <span>1.0</span>
303
+ </div>
304
+ `;
305
+ container.appendChild(slider);
306
+ });
307
+
308
+ // Add event listeners to new sliders
309
+ document.querySelectorAll('[id^="scale-"]').forEach((slider, index) => {
310
+ slider.addEventListener('input', function() {
311
+ document.getElementById(`scale-${index}-value`).textContent = this.value;
312
+ });
313
+ });
314
+ }
315
+
316
+ function setupEventListeners() {
317
+ // Accordion toggle
318
+ document.getElementById('accordion-toggle').addEventListener('click', function() {
319
+ const content = document.getElementById('advanced-params');
320
+ const icon = document.getElementById('accordion-icon');
321
+ isAccordionOpen = !isAccordionOpen;
322
+
323
+ if (isAccordionOpen) {
324
+ content.classList.add('open');
325
+ icon.setAttribute('data-feather', 'chevron-up');
326
+ } else {
327
+ content.classList.remove('open');
328
+ icon.setAttribute('data-feather', 'chevron-down');
329
+ }
330
+ feather.replace();
331
+ });
332
+
333
+ // Slider value updates
334
+ document.getElementById('cfg-slider').addEventListener('input', function() {
335
+ document.getElementById('cfg-value').textContent = this.value;
336
+ });
337
+
338
+ document.getElementById('steps-slider').addEventListener('input', function() {
339
+ document.getElementById('steps-value').textContent = this.value;
340
+ });
341
+
342
+ // Generate button
343
+ document.getElementById('generate-btn').addEventListener('click', generateImage);
344
+ }
345
+
346
+ async function generateImage() {
347
+ const prompt = document.getElementById('prompt-input').value.trim();
348
+ const btn = document.getElementById('generate-btn');
349
+ const btnText = document.getElementById('btn-text');
350
+ const spinner = document.getElementById('loading-spinner');
351
+ const progressContainer = document.getElementById('progress-container');
352
+ const progressBar = document.getElementById('progress-bar');
353
+ const progressText = document.getElementById('progress-text');
354
+ const errorContainer = document.getElementById('error-message');
355
+ const errorText = document.getElementById('error-text');
356
+ const resultSection = document.getElementById('result-section');
357
+ const generatedImage = document.getElementById('generated-image');
358
+
359
+ // Validation
360
+ if (!prompt) {
361
+ showError("Please enter a creative prompt");
362
+ return;
363
+ }
364
+
365
+ if (selectedLoras.length === 0) {
366
+ showError("Please select at least one LoRA model");
367
+ return;
368
+ }
369
+
370
+ // Reset UI
371
+ errorContainer.classList.add('hidden');
372
+ resultSection.classList.add('hidden');
373
+
374
+ // Show loading state
375
+ btn.disabled = true;
376
+ btnText.textContent = 'Generating...';
377
+ spinner.classList.remove('hidden');
378
+ progressContainer.classList.remove('hidden');
379
+
380
+ try {
381
+ // Simulate progress updates
382
+ const steps = ['Loading models...', 'Processing prompt...', 'Applying LoRA weights...', 'Generating image...', 'Finalizing...'];
383
+ for (let i = 0; i < steps.length; i++) {
384
+ await new Promise(resolve => setTimeout(resolve, 800));
385
+ const progress = ((i + 1) / steps.length) * 100;
386
+ progressBar.style.width = `${progress}%`;
387
+ progressText.textContent = steps[i];
388
+ }
389
+
390
+ // Simulate image generation
391
+ await new Promise(resolve => setTimeout(resolve, 500));
392
+
393
+ // Display result
394
+ generatedImage.src = `http://static.photos/artistic/1024x1024/${Math.floor(Math.random() * 100)}`;
395
+ resultSection.classList.remove('hidden');
396
+
397
+ } catch (error) {
398
+ showError("Failed to generate image. Please try again.");
399
+ } finally {
400
+ // Reset button
401
+ btn.disabled = false;
402
+ btnText.textContent = 'Generate Image';
403
+ spinner.classList.add('hidden');
404
+ progressContainer.classList.add('hidden');
405
+ }
406
+ }
407
+
408
+ function showError(message) {
409
+ const errorContainer = document.getElementById('error-message');
410
+ const errorText = document.getElementById('error-text');
411
+ errorText.textContent = message;
412
+ errorContainer.classList.remove('hidden');
413
+
414
+ // Auto-hide after 5 seconds
415
+ setTimeout(() => {
416
+ errorContainer.classList.add('hidden');
417
+ }, 5000);
418
+ }
419
+ </script>
420
+ </body>
421
+ </html>