Hugging Face's logo

Spaces:
BoobyBoobs
/
loros
Running

App Files Community
loros
File size: 9,731 Bytes 
6265b9e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
<!DOCTYPE html>
<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>