Hugging Face's logo

Spaces:
En3rGy
/
test
Build error

App Files Community
En3rGy commited on
Commit
bd0b38f
·
verified ·
1 Parent(s): 86288c1

Upload index.nopehtml.txt

Browse files
Files changed (1) hide show
  1. index.nopehtml.txt +889 -0
index.nopehtml.txt ADDED
@@ -0,0 +1,889 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>NSFW Image to Text Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .nsfw-toggle {
11
+ position: relative;
12
+ width: 60px;
13
+ height: 30px;
14
+ -webkit-appearance: none;
15
+ background: #c6c6c6;
16
+ outline: none;
17
+ border-radius: 20px;
18
+ box-shadow: inset 0 0 5px rgba(0,0,0,.2);
19
+ transition: .5s;
20
+ }
21
+ .nsfw-toggle:checked {
22
+ background: #ff4081;
23
+ }
24
+ .nsfw-toggle:before {
25
+ content: '';
26
+ position: absolute;
27
+ width: 30px;
28
+ height: 30px;
29
+ border-radius: 20px;
30
+ top: 0;
31
+ left: 0;
32
+ background: #fff;
33
+ transform: scale(1.1);
34
+ box-shadow: 0 2px 5px rgba(0,0,0,.2);
35
+ transition: .5s;
36
+ }
37
+ .nsfw-toggle:checked:before {
38
+ left: 30px;
39
+ }
40
+ .dropzone {
41
+ border: 2px dashed #9ca3af;
42
+ border-radius: 0.5rem;
43
+ transition: all 0.3s ease;
44
+ }
45
+ .dropzone.active {
46
+ border-color: #3b82f6;
47
+ background-color: rgba(59, 130, 246, 0.05);
48
+ }
49
+ .tag-bubble {
50
+ display: inline-flex;
51
+ align-items: center;
52
+ background-color: #e5e7eb;
53
+ border-radius: 9999px;
54
+ padding: 0.25rem 0.75rem;
55
+ margin-right: 0.5rem;
56
+ margin-bottom: 0.5rem;
57
+ }
58
+ .tag-bubble button {
59
+ margin-left: 0.5rem;
60
+ color: #6b7280;
61
+ }
62
+ .tag-bubble button:hover {
63
+ color: #ef4444;
64
+ }
65
+ .output-area {
66
+ min-height: 200px;
67
+ border: 1px solid #e5e7eb;
68
+ border-radius: 0.5rem;
69
+ background-color: #f9fafb;
70
+ }
71
+ .tab-active {
72
+ border-bottom: 3px solid #3b82f6;
73
+ color: #3b82f6;
74
+ font-weight: 600;
75
+ }
76
+ .model-card {
77
+ transition: all 0.3s ease;
78
+ border: 1px solid #e5e7eb;
79
+ }
80
+ .model-card:hover {
81
+ transform: translateY(-2px);
82
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
83
+ }
84
+ .model-card.selected {
85
+ border-color: #3b82f6;
86
+ background-color: rgba(59, 130, 246, 0.05);
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gray-50 min-h-screen">
91
+ <div class="container mx-auto px-4 py-8">
92
+ <header class="mb-8">
93
+ <div class="flex justify-between items-center">
94
+ <h1 class="text-3xl font-bold text-gray-800">
95
+ <i class="fas fa-image mr-2 text-blue-500"></i> NSFW Image to Text Generator
96
+ </h1>
97
+ <div class="flex items-center">
98
+ <span class="mr-2 text-sm font-medium text-gray-700">NSFW Mode</span>
99
+ <label class="relative inline-block w-14 h-8">
100
+ <input type="checkbox" id="nsfwToggle" class="opacity-0 w-0 h-0">
101
+ <span class="slider round absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 transition duration-300 rounded-full before:absolute before:content-[''] before:h-6 before:w-6 before:left-1 before:bottom-1 before:bg-white before:transition before:duration-300 before:rounded-full"></span>
102
+ </label>
103
+ </div>
104
+ </div>
105
+ <p class="text-gray-600 mt-2">Generate detailed descriptions, captions, tags, and prompts from your images with AI</p>
106
+ </header>
107
+
108
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
109
+ <!-- Left Column - Input Section -->
110
+ <div class="lg:col-span-1 bg-white rounded-lg shadow p-6">
111
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">
112
+ <i class="fas fa-upload mr-2 text-blue-500"></i> Upload Image
113
+ </h2>
114
+
115
+ <!-- Image Dropzone -->
116
+ <div id="dropzone" class="dropzone flex flex-col items-center justify-center p-8 mb-6 cursor-pointer">
117
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
118
+ <p class="text-gray-500 mb-2">Drag & drop your image here</p>
119
+ <p class="text-gray-400 text-sm mb-4">or</p>
120
+ <label for="fileInput" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded cursor-pointer transition">
121
+ Select Image
122
+ </label>
123
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
124
+ </div>
125
+ <div id="imagePreviewContainer" class="hidden mb-6">
126
+ <img id="imagePreview" class="max-w-full h-auto rounded-lg shadow" src="" alt="Preview">
127
+ </div>
128
+
129
+ <!-- Settings Section -->
130
+ <div class="mb-6">
131
+ <h3 class="font-medium text-gray-700 mb-3">
132
+ <i class="fas fa-cog mr-2 text-blue-500"></i> Generation Settings
133
+ </h3>
134
+
135
+ <div class="space-y-4">
136
+ <div>
137
+ <label class="block text-sm font-medium text-gray-700 mb-1">Output Type</label>
138
+ <select id="outputType" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
139
+ <option value="description">Detailed Description</option>
140
+ <option value="caption">Short Caption</option>
141
+ <option value="tags">Tag List</option>
142
+ <option value="prompt">AI Prompt</option>
143
+ <option value="training">Model Training Data</option>
144
+ </select>
145
+ </div>
146
+
147
+ <div>
148
+ <label class="block text-sm font-medium text-gray-700 mb-1">Style</label>
149
+ <select id="styleSelect" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
150
+ <option value="neutral">Neutral</option>
151
+ <option value="erotic">Erotic</option>
152
+ <option value="artistic">Artistic</option>
153
+ <option value="technical">Technical</option>
154
+ <option value="literary">Literary</option>
155
+ <option value="bdsm">BDSM</option>
156
+ <option value="fetish">Fetish</option>
157
+ </select>
158
+ </div>
159
+
160
+ <div>
161
+ <label class="block text-sm font-medium text-gray-700 mb-1">Detail Level</label>
162
+ <div class="flex items-center">
163
+ <input type="range" id="detailLevel" min="1" max="5" value="3" class="w-full">
164
+ <span id="detailValue" class="ml-2 text-sm text-gray-600">3</span>
165
+ </div>
166
+ </div>
167
+
168
+ <div id="nsfwOptions" class="hidden">
169
+ <label class="block text-sm font-medium text-gray-700 mb-1">NSFW Focus</label>
170
+ <div class="flex flex-wrap gap-2">
171
+ <button class="nsfw-option-btn px-3 py-1 text-sm rounded-full border border-gray-300 hover:bg-gray-100" data-value="general">General</button>
172
+ <button class="nsfw-option-btn px-3 py-1 text-sm rounded-full border border-gray-300 hover:bg-gray-100" data-value="body">Body Details</button>
173
+ <button class="nsfw-option-btn px-3 py-1 text-sm rounded-full border border-gray-300 hover:bg-gray-100" data-value="pose">Pose</button>
174
+ <button class="nsfw-option-btn px-3 py-1 text-sm rounded-full border border-gray-300 hover:bg-gray-100" data-value="clothing">Clothing</button>
175
+ <button class="nsfw-option-btn px-3 py-1 text-sm rounded-full border border-gray-300 hover:bg-gray-100" data-value="fetish">Fetish</button>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Custom Tags Section -->
182
+ <div class="mb-6">
183
+ <h3 class="font-medium text-gray-700 mb-3">
184
+ <i class="fas fa-tags mr-2 text-blue-500"></i> Custom Tags
185
+ </h3>
186
+ <div class="flex mb-2">
187
+ <input type="text" id="tagInput" placeholder="Add custom tags" class="flex-1 border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
188
+ <button id="addTagBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-r-md transition">
189
+ Add
190
+ </button>
191
+ </div>
192
+ <div id="tagsContainer" class="flex flex-wrap"></div>
193
+ </div>
194
+
195
+ <!-- Model Selection -->
196
+ <div class="mb-6">
197
+ <h3 class="font-medium text-gray-700 mb-3">
198
+ <i class="fas fa-brain mr-2 text-blue-500"></i> AI Model
199
+ </h3>
200
+ <div class="grid grid-cols-2 gap-2">
201
+ <div class="model-card p-3 rounded cursor-pointer" data-model="clip">
202
+ <div class="font-medium">CLIP</div>
203
+ <div class="text-xs text-gray-500">General purpose</div>
204
+ </div>
205
+ <div class="model-card p-3 rounded cursor-pointer" data-model="blip">
206
+ <div class="font-medium">BLIP</div>
207
+ <div class="text-xs text-gray-500">Detailed descriptions</div>
208
+ </div>
209
+ <div class="model-card p-3 rounded cursor-pointer" data-model="deepdanbooru">
210
+ <div class="font-medium">DeepDanbooru</div>
211
+ <div class="text-xs text-gray-500">Anime tagging</div>
212
+ </div>
213
+ <div class="model-card p-3 rounded cursor-pointer" data-model="nsfw-detector">
214
+ <div class="font-medium">NSFW Detector</div>
215
+ <div class="text-xs text-gray-500">Explicit content</div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Generate Button -->
221
+ <button id="generateBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-md transition flex items-center justify-center">
222
+ <i class="fas fa-magic mr-2"></i> Generate Text
223
+ </button>
224
+ </div>
225
+
226
+ <!-- Middle Column - Output Section -->
227
+ <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
228
+ <div class="flex border-b mb-4">
229
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-500 tab-active" data-tab="output">
230
+ <i class="fas fa-file-alt mr-2"></i> Output
231
+ </button>
232
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-500" data-tab="prompt">
233
+ <i class="fas fa-keyboard mr-2"></i> Prompt Tools
234
+ </button>
235
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-500" data-tab="training">
236
+ <i class="fas fa-graduation-cap mr-2"></i> Training Data
237
+ </button>
238
+ </div>
239
+
240
+ <!-- Output Tab -->
241
+ <div id="outputTab" class="tab-content">
242
+ <div class="flex justify-between items-center mb-4">
243
+ <h3 class="text-lg font-medium text-gray-800">Generated Output</h3>
244
+ <div class="flex space-x-2">
245
+ <button id="copyOutputBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded">
246
+ <i class="fas fa-copy"></i> Copy
247
+ </button>
248
+ <button id="downloadOutputBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded">
249
+ <i class="fas fa-download"></i> Download
250
+ </button>
251
+ <button id="clearOutputBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded">
252
+ <i class="fas fa-trash"></i> Clear
253
+ </button>
254
+ </div>
255
+ </div>
256
+ <div id="outputArea" class="output-area p-4 mb-4">
257
+ <p class="text-gray-500 italic">Your generated text will appear here...</p>
258
+ </div>
259
+
260
+ <div class="flex space-x-2">
261
+ <button id="enhanceBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
262
+ <i class="fas fa-wand-magic-sparkles mr-2"></i> Enhance
263
+ </button>
264
+ <button id="shortenBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded transition">
265
+ <i class="fas fa-compress mr-2"></i> Shorten
266
+ </button>
267
+ <button id="rewriteBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded transition">
268
+ <i class="fas fa-pen-fancy mr-2"></i> Rewrite
269
+ </button>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Prompt Tools Tab -->
274
+ <div id="promptTab" class="tab-content hidden">
275
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Prompt Enhancement Tools</h3>
276
+
277
+ <div class="mb-6">
278
+ <h4 class="font-medium text-gray-700 mb-2">Prompt Builder</h4>
279
+ <textarea id="promptInput" class="w-full border border-gray-300 rounded-md px-3 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your base prompt here..."></textarea>
280
+ <div class="flex flex-wrap gap-2 mt-2">
281
+ <button class="prompt-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="artist">Add Artist</button>
282
+ <button class="prompt-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="style">Add Style</button>
283
+ <button class="prompt-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="lighting">Add Lighting</button>
284
+ <button class="prompt-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="composition">Add Composition</button>
285
+ <button class="prompt-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="nsfw">Add NSFW</button>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="mb-6">
290
+ <h4 class="font-medium text-gray-700 mb-2">Prompt Optimizer</h4>
291
+ <div class="flex space-x-2 mb-2">
292
+ <button id="optimizePromptBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
293
+ Optimize Prompt
294
+ </button>
295
+ <button id="randomizePromptBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded transition">
296
+ Randomize
297
+ </button>
298
+ </div>
299
+ <div id="optimizedPrompt" class="border border-gray-300 rounded-md p-4 bg-gray-50 min-h-32">
300
+ <p class="text-gray-500 italic">Optimized prompt will appear here...</p>
301
+ </div>
302
+ </div>
303
+
304
+ <div>
305
+ <h4 class="font-medium text-gray-700 mb-2">Negative Prompt Builder</h4>
306
+ <textarea id="negativePromptInput" class="w-full border border-gray-300 rounded-md px-3 py-2 h-24 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter negative prompts here..."></textarea>
307
+ <div class="flex flex-wrap gap-2 mt-2">
308
+ <button class="negative-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="quality">Quality Issues</button>
309
+ <button class="negative-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="anatomy">Anatomy</button>
310
+ <button class="negative-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="nsfw">NSFW Limits</button>
311
+ <button class="negative-tool-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded" data-tool="style">Style</button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Training Data Tab -->
317
+ <div id="trainingTab" class="tab-content hidden">
318
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Model Training Preparation</h3>
319
+
320
+ <div class="mb-6">
321
+ <h4 class="font-medium text-gray-700 mb-2">Training Tags</h4>
322
+ <div id="trainingTags" class="border border-gray-300 rounded-md p-4 bg-gray-50 min-h-32 mb-4">
323
+ <p class="text-gray-500 italic">Training tags will appear here...</p>
324
+ </div>
325
+ <div class="flex space-x-2">
326
+ <button id="generateTagsBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
327
+ Generate Tags
328
+ </button>
329
+ <button id="formatTagsBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded transition">
330
+ Format for Training
331
+ </button>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="mb-6">
336
+ <h4 class="font-medium text-gray-700 mb-2">Caption Generation</h4>
337
+ <div class="flex items-center mb-2">
338
+ <select id="captionStyle" class="border border-gray-300 rounded-md px-3 py-2 mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
339
+ <option value="basic">Basic Caption</option>
340
+ <option value="detailed">Detailed Description</option>
341
+ <option value="booru">Booru Style</option>
342
+ <option value="natural">Natural Language</option>
343
+ </select>
344
+ <button id="generateCaptionBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
345
+ Generate Caption
346
+ </button>
347
+ </div>
348
+ <div id="trainingCaption" class="border border-gray-300 rounded-md p-4 bg-gray-50 min-h-32">
349
+ <p class="text-gray-500 italic">Training caption will appear here...</p>
350
+ </div>
351
+ </div>
352
+
353
+ <div>
354
+ <h4 class="font-medium text-gray-700 mb-2">LoRA Training Preparation</h4>
355
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
356
+ <div>
357
+ <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Word</label>
358
+ <input type="text" id="triggerWord" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g., mycharacter">
359
+ </div>
360
+ <div>
361
+ <label class="block text-sm font-medium text-gray-700 mb-1">Class</label>
362
+ <input type="text" id="classWord" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g., woman, man, person">
363
+ </div>
364
+ </div>
365
+ <button id="prepareLoraBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition">
366
+ Prepare LoRA Training Data
367
+ </button>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <script>
375
+ // DOM Elements
376
+ const dropzone = document.getElementById('dropzone');
377
+ const fileInput = document.getElementById('fileInput');
378
+ const imagePreviewContainer = document.getElementById('imagePreviewContainer');
379
+ const imagePreview = document.getElementById('imagePreview');
380
+ const nsfwToggle = document.getElementById('nsfwToggle');
381
+ const nsfwOptions = document.getElementById('nsfwOptions');
382
+ const outputType = document.getElementById('outputType');
383
+ const detailLevel = document.getElementById('detailLevel');
384
+ const detailValue = document.getElementById('detailValue');
385
+ const tagInput = document.getElementById('tagInput');
386
+ const addTagBtn = document.getElementById('addTagBtn');
387
+ const tagsContainer = document.getElementById('tagsContainer');
388
+ const generateBtn = document.getElementById('generateBtn');
389
+ const outputArea = document.getElementById('outputArea');
390
+ const copyOutputBtn = document.getElementById('copyOutputBtn');
391
+ const downloadOutputBtn = document.getElementById('downloadOutputBtn');
392
+ const clearOutputBtn = document.getElementById('clearOutputBtn');
393
+ const enhanceBtn = document.getElementById('enhanceBtn');
394
+ const shortenBtn = document.getElementById('shortenBtn');
395
+ const rewriteBtn = document.getElementById('rewriteBtn');
396
+ const tabBtns = document.querySelectorAll('.tab-btn');
397
+ const tabContents = document.querySelectorAll('.tab-content');
398
+ const modelCards = document.querySelectorAll('.model-card');
399
+ const nsfwOptionBtns = document.querySelectorAll('.nsfw-option-btn');
400
+
401
+ // Event Listeners
402
+ dropzone.addEventListener('dragover', (e) => {
403
+ e.preventDefault();
404
+ dropzone.classList.add('active');
405
+ });
406
+
407
+ dropzone.addEventListener('dragleave', () => {
408
+ dropzone.classList.remove('active');
409
+ });
410
+
411
+ dropzone.addEventListener('drop', (e) => {
412
+ e.preventDefault();
413
+ dropzone.classList.remove('active');
414
+
415
+ if (e.dataTransfer.files.length) {
416
+ fileInput.files = e.dataTransfer.files;
417
+ handleFileUpload(e.dataTransfer.files[0]);
418
+ }
419
+ });
420
+
421
+ fileInput.addEventListener('change', () => {
422
+ if (fileInput.files.length) {
423
+ handleFileUpload(fileInput.files[0]);
424
+ }
425
+ });
426
+
427
+ nsfwToggle.addEventListener('change', () => {
428
+ if (nsfwToggle.checked) {
429
+ nsfwOptions.classList.remove('hidden');
430
+ } else {
431
+ nsfwOptions.classList.add('hidden');
432
+ }
433
+ });
434
+
435
+ detailLevel.addEventListener('input', () => {
436
+ detailValue.textContent = detailLevel.value;
437
+ });
438
+
439
+ addTagBtn.addEventListener('click', addTag);
440
+ tagInput.addEventListener('keypress', (e) => {
441
+ if (e.key === 'Enter') {
442
+ addTag();
443
+ }
444
+ });
445
+
446
+ generateBtn.addEventListener('click', generateText);
447
+ copyOutputBtn.addEventListener('click', copyOutput);
448
+ downloadOutputBtn.addEventListener('click', downloadOutput);
449
+ clearOutputBtn.addEventListener('click', clearOutput);
450
+ enhanceBtn.addEventListener('click', enhanceOutput);
451
+ shortenBtn.addEventListener('click', shortenOutput);
452
+ rewriteBtn.addEventListener('click', rewriteOutput);
453
+
454
+ tabBtns.forEach(btn => {
455
+ btn.addEventListener('click', () => {
456
+ const tab = btn.getAttribute('data-tab');
457
+ switchTab(tab);
458
+ });
459
+ });
460
+
461
+ modelCards.forEach(card => {
462
+ card.addEventListener('click', () => {
463
+ modelCards.forEach(c => c.classList.remove('selected'));
464
+ card.classList.add('selected');
465
+ });
466
+ });
467
+
468
+ nsfwOptionBtns.forEach(btn => {
469
+ btn.addEventListener('click', () => {
470
+ nsfwOptionBtns.forEach(b => b.classList.remove('bg-blue-500', 'text-white'));
471
+ btn.classList.add('bg-blue-500', 'text-white');
472
+ });
473
+ });
474
+
475
+ // Functions
476
+ function handleFileUpload(file) {
477
+ if (!file.type.match('image.*')) {
478
+ alert('Please select an image file');
479
+ return;
480
+ }
481
+
482
+ const reader = new FileReader();
483
+ reader.onload = (e) => {
484
+ imagePreview.src = e.target.result;
485
+ imagePreviewContainer.classList.remove('hidden');
486
+ };
487
+ reader.readAsDataURL(file);
488
+ }
489
+
490
+ function addTag() {
491
+ const tag = tagInput.value.trim();
492
+ if (tag) {
493
+ const tagElement = document.createElement('div');
494
+ tagElement.className = 'tag-bubble';
495
+ tagElement.innerHTML = `
496
+ <span>${tag}</span>
497
+ <button class="remove-tag" type="button">
498
+ <i class="fas fa-times"></i>
499
+ </button>
500
+ `;
501
+ tagsContainer.appendChild(tagElement);
502
+ tagInput.value = '';
503
+
504
+ tagElement.querySelector('.remove-tag').addEventListener('click', () => {
505
+ tagElement.remove();
506
+ });
507
+ }
508
+ }
509
+
510
+ function generateText() {
511
+ if (!imagePreview.src) {
512
+ alert('Please upload an image first');
513
+ return;
514
+ }
515
+
516
+ // Simulate API call with timeout
517
+ outputArea.innerHTML = '<p class="text-gray-500 italic">Generating text... <i class="fas fa-spinner fa-spin"></i></p>';
518
+
519
+ setTimeout(() => {
520
+ const outputTypeValue = outputType.value;
521
+ const isNSFW = nsfwToggle.checked;
522
+ const detail = detailLevel.value;
523
+ const style = document.getElementById('styleSelect').value;
524
+
525
+ // Sample outputs based on settings
526
+ let output = '';
527
+
528
+ if (outputTypeValue === 'description') {
529
+ output = generateDescription(isNSFW, detail, style);
530
+ } else if (outputTypeValue === 'caption') {
531
+ output = generateCaption(isNSFW, detail, style);
532
+ } else if (outputTypeValue === 'tags') {
533
+ output = generateTags(isNSFW, detail, style);
534
+ } else if (outputTypeValue === 'prompt') {
535
+ output = generatePrompt(isNSFW, detail, style);
536
+ } else if (outputTypeValue === 'training') {
537
+ output = generateTrainingData(isNSFW, detail, style);
538
+ }
539
+
540
+ outputArea.innerHTML = `<pre class="whitespace-pre-wrap">${output}</pre>`;
541
+ }, 2000);
542
+ }
543
+
544
+ function generateDescription(isNSFW, detail, style) {
545
+ let description = '';
546
+
547
+ if (isNSFW) {
548
+ description += "A high-quality NSFW image featuring ";
549
+
550
+ if (style === 'erotic') {
551
+ description += "an erotic scene with ";
552
+ } else if (style === 'bdsm') {
553
+ description += "a BDSM-themed composition showing ";
554
+ } else if (style === 'fetish') {
555
+ description += "a fetish-focused image depicting ";
556
+ } else {
557
+ description += "a sensual composition of ";
558
+ }
559
+
560
+ description += "a beautiful woman with ";
561
+
562
+ if (detail >= 3) {
563
+ description += "full, voluptuous curves, smooth skin, and ";
564
+ if (detail >= 4) {
565
+ description += "detailed anatomical features including perky breasts with ";
566
+ if (detail >= 5) {
567
+ description += "visible nipples and areola, a toned stomach, and ";
568
+ }
569
+ }
570
+ }
571
+
572
+ description += "an alluring pose. ";
573
+
574
+ if (detail >= 2) {
575
+ description += "She wears ";
576
+ if (style === 'bdsm') {
577
+ description += "restrictive leather harnesses and cuffs";
578
+ } else if (style === 'fetish') {
579
+ description += "specialized fetish attire";
580
+ } else {
581
+ description += "lingerie that accentuates her figure";
582
+ }
583
+ description += ". ";
584
+ }
585
+
586
+ if (detail >= 4) {
587
+ description += "The lighting is soft and flattering, casting gentle shadows that highlight her form. ";
588
+ if (detail >= 5) {
589
+ description += "Subtle details like skin texture, fabric folds, and environmental elements add to the realism. ";
590
+ }
591
+ }
592
+
593
+ description += "The composition is tasteful yet explicit, focusing on erotic appeal.";
594
+ } else {
595
+ description += "A high-quality image featuring ";
596
+
597
+ if (style === 'artistic') {
598
+ description += "an artistic composition with ";
599
+ } else if (style === 'technical') {
600
+ description += "a technically precise depiction of ";
601
+ } else if (style === 'literary') {
602
+ description += "a scene with narrative qualities showing ";
603
+ } else {
604
+ description += "a well-composed image of ";
605
+ }
606
+
607
+ description += "a person in ";
608
+
609
+ if (detail >= 3) {
610
+ description += "detailed clothing with visible textures, ";
611
+ if (detail >= 4) {
612
+ description += "expressive facial features, and ";
613
+ if (detail >= 5) {
614
+ description += "intricate background elements that add context. ";
615
+ }
616
+ }
617
+ }
618
+
619
+ description += "The lighting is ";
620
+
621
+ if (detail >= 2) {
622
+ description += "carefully balanced to highlight the subject, ";
623
+ if (detail >= 4) {
624
+ description += "with attention to shadow detail and color temperature. ";
625
+ }
626
+ }
627
+
628
+ description += "The overall aesthetic is visually appealing and well-executed.";
629
+ }
630
+
631
+ return description;
632
+ }
633
+
634
+ function generateCaption(isNSFW, detail, style) {
635
+ if (isNSFW) {
636
+ let caption = "beautiful woman";
637
+
638
+ if (style === 'erotic') {
639
+ caption += ", erotic pose";
640
+ } else if (style === 'bdsm') {
641
+ caption += ", bdsm gear";
642
+ } else if (style === 'fetish') {
643
+ caption += ", fetish wear";
644
+ }
645
+
646
+ if (detail >= 3) {
647
+ caption += ", detailed anatomy";
648
+ if (detail >= 4) {
649
+ caption += ", visible details";
650
+ }
651
+ }
652
+
653
+ caption += ", high quality";
654
+
655
+ return caption;
656
+ } else {
657
+ let caption = "person";
658
+
659
+ if (style === 'artistic') {
660
+ caption += ", artistic style";
661
+ } else if (style === 'technical') {
662
+ caption += ", technical precision";
663
+ } else if (style === 'literary') {
664
+ caption += ", narrative quality";
665
+ }
666
+
667
+ if (detail >= 3) {
668
+ caption += ", detailed";
669
+ if (detail >= 4) {
670
+ caption += ", intricate";
671
+ }
672
+ }
673
+
674
+ return caption;
675
+ }
676
+ }
677
+
678
+ function generateTags(isNSFW, detail, style) {
679
+ let tags = [];
680
+
681
+ if (isNSFW) {
682
+ tags.push("nsfw", "adult", "mature");
683
+
684
+ if (style === 'erotic') {
685
+ tags.push("erotic", "sensual", "seductive");
686
+ } else if (style === 'bdsm') {
687
+ tags.push("bdsm", "restraints", "dominance");
688
+ } else if (style === 'fetish') {
689
+ tags.push("fetish", "specialized", "kink");
690
+ }
691
+
692
+ tags.push("woman", "female", "adult female");
693
+
694
+ if (detail >= 3) {
695
+ tags.push("detailed", "anatomy", "curves");
696
+ if (detail >= 4) {
697
+ tags.push("skin texture", "breasts", "nipples");
698
+ if (detail >= 5) {
699
+ tags.push("areola", "toned", "fit");
700
+ }
701
+ }
702
+ }
703
+
704
+ tags.push("high quality", "professional");
705
+ } else {
706
+ tags.push("sfw", "safe", "general");
707
+
708
+ if (style === 'artistic') {
709
+ tags.push("artistic", "creative", "stylized");
710
+ } else if (style === 'technical') {
711
+ tags.push("technical", "precise", "accurate");
712
+ } else if (style === 'literary') {
713
+ tags.push("narrative", "storytelling", "dramatic");
714
+ }
715
+
716
+ tags.push("person", "human", "individual");
717
+
718
+ if (detail >= 3) {
719
+ tags.push("detailed", "textured", "complex");
720
+ if (detail >= 4) {
721
+ tags.push("intricate", "elaborate", "refined");
722
+ }
723
+ }
724
+
725
+ tags.push("well-composed", "balanced");
726
+ }
727
+
728
+ // Add any custom tags
729
+ const customTags = Array.from(tagsContainer.querySelectorAll('.tag-bubble span')).map(el => el.textContent);
730
+ tags = tags.concat(customTags);
731
+
732
+ return tags.join(", ");
733
+ }
734
+
735
+ function generatePrompt(isNSFW, detail, style) {
736
+ let prompt = "";
737
+
738
+ if (isNSFW) {
739
+ prompt += "A high-quality NSFW image of a beautiful woman, ";
740
+
741
+ if (style === 'erotic') {
742
+ prompt += "erotic pose, sensual expression, ";
743
+ } else if (style === 'bdsm') {
744
+ prompt += "bound in leather restraints, submissive pose, ";
745
+ } else if (style === 'fetish') {
746
+ prompt += "wearing specialized fetish attire, kinky aesthetic, ";
747
+ } else {
748
+ prompt += "alluring composition, ";
749
+ }
750
+
751
+ if (detail >= 3) {
752
+ prompt += "detailed anatomy, perfect proportions, ";
753
+ if (detail >= 4) {
754
+ prompt += "visible skin texture, realistic details, ";
755
+ if (detail >= 5) {
756
+ prompt += "intricate lighting on curves, ";
757
+ }
758
+ }
759
+ }
760
+
761
+ prompt += "professional photography, 8k resolution, ultra-detailed";
762
+ } else {
763
+ prompt += "A high-quality image of a person, ";
764
+
765
+ if (style === 'artistic') {
766
+ prompt += "artistic composition, creative framing, ";
767
+ } else if (style === 'technical') {
768
+ prompt += "technically precise, accurate proportions, ";
769
+ } else if (style === 'literary') {
770
+ prompt += "narrative quality, storytelling elements, ";
771
+ } else {
772
+ prompt += "well-composed, balanced aesthetic, ";
773
+ }
774
+
775
+ if (detail >= 3) {
776
+ prompt += "detailed textures, complex elements, ";
777
+ if (detail >= 4) {
778
+ prompt += "intricate lighting, refined details, ";
779
+ }
780
+ }
781
+
782
+ prompt += "professional, 8k resolution, ultra-detailed";
783
+ }
784
+
785
+ return prompt;
786
+ }
787
+
788
+ function generateTrainingData(isNSFW, detail, style) {
789
+ let data = "Training data for AI model:\n\n";
790
+
791
+ data += "IMAGE DESCRIPTION:\n";
792
+ data += generateDescription(isNSFW, detail, style) + "\n\n";
793
+
794
+ data += "TAGS:\n";
795
+ data += generateTags(isNSFW, detail, style) + "\n\n";
796
+
797
+ data += "PROMPT EXAMPLE:\n";
798
+ data += generatePrompt(isNSFW, detail, style) + "\n\n";
799
+
800
+ if (isNSFW) {
801
+ data += "NSFW NOTES:\n";
802
+ data += "- Focus on anatomical accuracy\n";
803
+ data += "- Maintain tasteful presentation\n";
804
+ if (style === 'bdsm') {
805
+ data += "- Include BDSM elements authentically\n";
806
+ } else if (style === 'fetish') {
807
+ data += "- Represent fetish content accurately\n";
808
+ }
809
+ data += "\n";
810
+ }
811
+
812
+ data += "TRAINING PARAMETERS:\n";
813
+ data += `- Detail level: ${detail}\n`;
814
+ data += `- Style: ${style}\n`;
815
+ data += `- NSFW: ${isNSFW ? 'Yes' : 'No'}\n`;
816
+
817
+ return data;
818
+ }
819
+
820
+ function copyOutput() {
821
+ const text = outputArea.textContent;
822
+ navigator.clipboard.writeText(text).then(() => {
823
+ alert('Output copied to clipboard!');
824
+ });
825
+ }
826
+
827
+ function downloadOutput() {
828
+ const text = outputArea.textContent;
829
+ const blob = new Blob([text], {type: 'text/plain'});
830
+ const url = URL.createObjectURL(blob);
831
+ const a = document.createElement('a');
832
+ a.href = url;
833
+ a.download = 'image-description.txt';
834
+ document.body.appendChild(a);
835
+ a.click();
836
+ document.body.removeChild(a);
837
+ URL.revokeObjectURL(url);
838
+ }
839
+
840
+ function clearOutput() {
841
+ outputArea.innerHTML = '<p class="text-gray-500 italic">Your generated text will appear here...</p>';
842
+ }
843
+
844
+ function enhanceOutput() {
845
+ // Simulate enhancement
846
+ outputArea.innerHTML = '<p class="text-gray-500 italic">Enhancing output... <i class="fas fa-spinner fa-spin"></i></p>';
847
+
848
+ setTimeout(() => {
849
+ const currentText = outputArea.textContent;
850
+ outputArea.innerHTML = `<pre class="whitespace-pre-wrap">${currentText}\n\n[Enhanced with additional details and refined language]</pre>`;
851
+ }, 1500);
852
+ }
853
+
854
+ function shortenOutput() {
855
+ // Simulate shortening
856
+ outputArea.innerHTML = '<p class="text-gray-500 italic">Shortening output... <i class="fas fa-spinner fa-spin"></i></p>';
857
+
858
+ setTimeout(() => {
859
+ const currentText = outputArea.textContent;
860
+ const shortened = currentText.split(' ').slice(0, 30).join(' ') + '...';
861
+ outputArea.innerHTML = `<pre class="whitespace-pre-wrap">${shortened}</pre>`;
862
+ }, 1500);
863
+ }
864
+
865
+ function rewriteOutput() {
866
+ // Simulate rewriting
867
+ outputArea.innerHTML = '<p class="text-gray-500 italic">Rewriting output... <i class="fas fa-spinner fa-spin"></i></p>';
868
+
869
+ setTimeout(() => {
870
+ const currentText = outputArea.textContent;
871
+ outputArea.innerHTML = `<pre class="whitespace-pre-wrap">[Rewritten version with different phrasing]\n${currentText.replace(/woman/g, 'female').replace(/beautiful/g, 'attractive')}</pre>`;
872
+ }, 1500);
873
+ }
874
+
875
+ function switchTab(tabName) {
876
+ tabContents.forEach(content => {
877
+ content.classList.add('hidden');
878
+ });
879
+
880
+ tabBtns.forEach(btn => {
881
+ btn.classList.remove('tab-active');
882
+ });
883
+
884
+ document.getElementById(`${tabName}Tab`).classList.remove('hidden');
885
+ document.querySelector(`.tab-btn[data-tab="${tabName}"]`).classList.add('tab-active');
886
+ }
887
+ </script>
888
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=En3rGy/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
889
+ </html>