Hugging Face's logo

Spaces:
PeepDaSlan9
/
HYDRAS_Artwave-ai-image-creator
Running

App Files Community
predator commited on
Commit
d86df15
·
verified ·
1 Parent(s): d5b20e1

Upload templates_models.html

Browse files
Files changed (1) hide show
  1. templates_models.html +273 -0
templates_models.html ADDED
@@ -0,0 +1,273 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Vizionix XL F1 Models Demo</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ background-color: #f0f0f0;
14
+ color: #333;
15
+ font-family: 'Poppins', sans-serif;
16
+ width: 100%;
17
+ overflow-x: hidden;
18
+ }
19
+ html, body {
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .form-control,
24
+ .form-select {
25
+ background-color: #ffffff;
26
+ color: #333;
27
+ border: 1px solid #ccc;
28
+ border-radius: 4px;
29
+ }
30
+
31
+ .form-control::placeholder {
32
+ color: #888;
33
+ }
34
+ .form-control:focus,
35
+ .form-select:focus {
36
+ outline: none;
37
+ border-color: #333;
38
+ }
39
+
40
+ .btn-primary {
41
+ background-color: #007bff;
42
+ border: none;
43
+ font-size: 1.2em;
44
+ padding: 10px 20px;
45
+ transition: background-color 0.3s ease;
46
+ }
47
+ .btn-primary:hover {
48
+ background-color: #0056b3;
49
+ }
50
+ .btn-primary:focus {
51
+ box-shadow: none;
52
+ }
53
+
54
+ #prompt {
55
+ background-color: #ffffff;
56
+ outline: 4px solid #ffffff;
57
+ }
58
+
59
+ #negative-prompt {
60
+ background-color: #f9f9f9;
61
+ border: 1px solid #e0e0e0;
62
+ border-radius: 10px;
63
+ outline: 3px solid #e0e0e0;
64
+ }
65
+
66
+ #modelLabel,
67
+ #ratioLabel,
68
+ #styleLabel {
69
+ background-color: #007bff;
70
+ color: white;
71
+ border: none;
72
+ padding: 6px 12px;
73
+ border-radius: 4px;
74
+ }
75
+
76
+ .form-range {
77
+ background-color: #ffffff;
78
+ border: 1px solid #ccc;
79
+ }
80
+
81
+ .form-range::-webkit-slider-thumb {
82
+ background-color: #007bff;
83
+ }
84
+ .form-range::-moz-range-thumb {
85
+ background-color: #007bff;
86
+ }
87
+ .form-range::-ms-thumb {
88
+ background-color: #007bff;
89
+ }
90
+
91
+ .input-group-div1,
92
+ .input-group-div {
93
+ background-color: #ffffff;
94
+ padding: 10px;
95
+ border: 1px solid #ccc;
96
+ border-radius: 8px;
97
+ transition: border-color 0.3s ease;
98
+ }
99
+
100
+ .input-group-div1:hover,
101
+ .input-group-div:hover {
102
+ border-color: #007bff;
103
+ }
104
+
105
+ .col-12 p {
106
+ color: #007bff;
107
+ font-size: 1.5em;
108
+ font-weight: 600;
109
+ margin-bottom: 0;
110
+ animation: colorChange 10s infinite;
111
+ }
112
+
113
+ #imshow {
114
+ display: flex;
115
+ flex-wrap: wrap;
116
+ gap: 10px;
117
+ justify-content: center;
118
+ align-items: center;
119
+ padding: 20px;
120
+ background-color: #ffffff;
121
+ border: 1px solid #ccc;
122
+ border-radius: 8px;
123
+ margin-top: 20px;
124
+ width: 100%;
125
+ }
126
+
127
+ #imshow img {
128
+ max-width: 280px;
129
+ margin: 0;
130
+ padding: 0;
131
+ border-radius: 8px;
132
+ transition: transform 0.3s ease;
133
+ }
134
+
135
+ .floating-button {
136
+ position: fixed;
137
+ bottom: 30px;
138
+ left: 20px;
139
+ background-color: #dbdad7;
140
+ color: black;
141
+ padding: 15px 25px;
142
+ border: none;
143
+ border-radius: 10px;
144
+ font-size: 13px;
145
+ font-weight: bold;
146
+ cursor: pointer;
147
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
148
+ transition: background-color 0.3s, box-shadow 0.3s;
149
+ text-decoration: none;
150
+ font-family: 'Poppins', sans-serif;
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: center;
154
+ }
155
+ .floating-button:hover {
156
+ background-color: #dbdad7;
157
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
158
+ }
159
+ .floating-button i {
160
+ margin-right: 10px;
161
+ }
162
+
163
+ @media screen and (max-width: 600px) {
164
+ #imshow {
165
+ justify-content: center;
166
+ align-items: center;
167
+ }
168
+ #imshow img {
169
+ max-width: 280px;
170
+ }
171
+ }
172
+
173
+ #stats {
174
+ color: red;
175
+ }
176
+ </style>
177
+ </head>
178
+ <body>
179
+ <pre id="stats"></pre>
180
+ <div class="container mt-4">
181
+ <div class="row mt-4">
182
+ <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
183
+ <div class="input-group-div1">
184
+ <input type="text" class="form-control" id="prompt" placeholder="Prompt" autocomplete="off">
185
+ </div>
186
+ </div>
187
+ <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
188
+ <div class="input-group-div">
189
+ <input type="text" class="form-control" id="negative-prompt" placeholder="Negative Prompt" autocomplete="off">
190
+ </div>
191
+ </div>
192
+
193
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
194
+ <div class="input-group">
195
+ <label class="input-group-text me-3" for="model" id="modelLabel">Model</label>
196
+ <select class="form-select" id="model" aria-label="Model Select">
197
+ <option value="rvs4">Vizionix XL F1</option>
198
+
199
+ </select>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
204
+ <div class="input-group">
205
+ <label class="input-group-text me-3" id="ratioLabel" for="ratio">Image Ratio</label>
206
+ <select class="form-select" id="ratio" aria-label="Ratio Select">
207
+ <option selected value="1:1">1:1 (Square)</option>
208
+ <option value="16:9">16:9 (Landscape)</option>
209
+ <option value="9:16">9:16 (Portrait)</option>
210
+ <option value="1:2">1:2</option>
211
+ <option value="4:3">4:3</option>
212
+ </select>
213
+ </div>
214
+ </div>
215
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
216
+ <div class="input-group">
217
+ <label class="input-group-text me-3" for="style" id="styleLabel">Style</label>
218
+ <select class="form-select" id="style" aria-label="Style Select">
219
+
220
+ <option value="Cinematic">Cinematic</option>
221
+ <option value="Photography">Photography</option>
222
+ <option value="Anime">Anime</option>
223
+ <option value="Comics">Comics</option>
224
+ <option value="Creative">Fantasy</option>
225
+ <option value="Cartoon">Cartoon</option>
226
+ <option value="3d">3D Cartoon</option>
227
+ <option value="No">No Styles</option>
228
+ </select>
229
+ </div>
230
+ </div>
231
+ <div id="ranges" style="display: flex; gap: 15px; flex-wrap: wrap;">
232
+ <div class="stepsRange" style="display: flex; gap: 10px;">
233
+ <label for="stepsRange" class="form-label">Steps: <p style="display: inline;" id="stepValue">30</p></label>
234
+ <input type="range" class="form-range" id="stepsRange" style="width: 200px; padding-top: 12px;" min="4" max="100" value="30">
235
+ </div>
236
+ <div class="guidenceRange" style="display: flex; gap: 10px;">
237
+ <label for="stepsRange" class="form-label">Guidance: <p style="display: inline;" id="guidenceValue">3</p></label>
238
+ <input type="range" class="form-range" id="guidenceRange" style="width: 200px; padding-top: 12px;" min="2" max="20" value="3" step="0.1">
239
+ </div>
240
+ </div>
241
+ <div class="col-12 text-center mt-4">
242
+ <button type="button" class="btn btn-primary w-90" id="btn">Generate Image (2 Images)</button>
243
+ </div>
244
+ </div>
245
+ <div class="container mt-4" id="cont4">
246
+ <div id="imshow"></div>
247
+ </div>
248
+ </div>
249
+ <br>
250
+ <a href="https://discord.com/invite/qq27GRjZ" class="floating-button" target="_blank">
251
+ <i class="fab fa-discord"></i>Discord
252
+ </a>
253
+
254
+ <br>
255
+ <script>
256
+ document.getElementById('prompt').addEventListener('mouseover', () => {
257
+ document.getElementById('prompt').placeholder = 'A Cat Wearing Purple Hoodie';
258
+ });
259
+ document.getElementById('prompt').addEventListener('mouseout', () => {
260
+ document.getElementById('prompt').placeholder = 'Enter Your Prompt';
261
+ });
262
+ document.getElementById('prompt').addEventListener('input', function() {
263
+ this.style.color = '#333';
264
+ });
265
+ document.getElementById('negative-prompt').addEventListener('input', function() {
266
+ this.style.color = '#007bff';
267
+ });
268
+ </script>
269
+
270
+ <script src="{{ url_for('static', filename='models.js') }}"></script>
271
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
272
+ </body>
273
+ </html>