Hugging Face's logo

Spaces:
black-forest-labs
/
FLUX.1-dev
Running on Zero

App Files Community
243

Create web1

#230
by Yussifweb3 - opened
base: refs/heads/main
←
from: refs/pr/230
Discussion Files changed
+210
-0
Files changed (1) hide show
  1. web1 +210 -0
web1 ADDED
@@ -0,0 +1,210 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI Image Generator</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ font-family: system-ui, -apple-system, sans-serif;
13
+ }
14
+
15
+ body {
16
+ background: #f9fafb;
17
+ min-height: 100vh;
18
+ padding: 2rem;
19
+ }
20
+
21
+ .container {
22
+ max-width: 900px;
23
+ margin: 0 auto;
24
+ }
25
+
26
+ header {
27
+ text-align: center;
28
+ margin-bottom: 2rem;
29
+ }
30
+
31
+ h1 {
32
+ font-size: 2.5rem;
33
+ margin-bottom: 1rem;
34
+ color: #4f46e5;
35
+ animation: fadeIn 0.5s ease-in;
36
+ }
37
+
38
+ .description {
39
+ color: #6b7280;
40
+ font-size: 1.1rem;
41
+ margin-bottom: 0.5rem;
42
+ animation: fadeIn 0.5s ease-in 0.2s backwards;
43
+ }
44
+
45
+ .iframe-container {
46
+ background: white;
47
+ padding: 2rem;
48
+ border-radius: 1rem;
49
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
50
+ margin-bottom: 2rem;
51
+ animation: slideUp 0.5s ease-out 0.4s backwards;
52
+ }
53
+
54
+ iframe {
55
+ width: 100%;
56
+ border: none;
57
+ border-radius: 0.5rem;
58
+ background: white;
59
+ }
60
+
61
+ .tips {
62
+ background: #f0f9ff;
63
+ padding: 1.5rem;
64
+ border-radius: 0.5rem;
65
+ margin-top: 2rem;
66
+ border: 1px solid #bae6fd;
67
+ animation: fadeIn 0.5s ease-in 0.6s backwards;
68
+ }
69
+
70
+ .tips h2 {
71
+ color: #0369a1;
72
+ font-size: 1.25rem;
73
+ margin-bottom: 1rem;
74
+ }
75
+
76
+ .tips ul {
77
+ list-style-position: inside;
78
+ color: #0c4a6e;
79
+ }
80
+
81
+ .tips li {
82
+ margin-bottom: 0.5rem;
83
+ }
84
+
85
+ @keyframes fadeIn {
86
+ from {
87
+ opacity: 0;
88
+ }
89
+ to {
90
+ opacity: 1;
91
+ }
92
+ }
93
+
94
+ @keyframes slideUp {
95
+ from {
96
+ opacity: 0;
97
+ transform: translateY(20px);
98
+ }
99
+ to {
100
+ opacity: 1;
101
+ transform: translateY(0);
102
+ }
103
+ }
104
+
105
+ @media (max-width: 900px) {
106
+ body {
107
+ padding: 1rem;
108
+ }
109
+
110
+ h1 {
111
+ font-size: 2rem;
112
+ }
113
+
114
+ .iframe-container {
115
+ padding: 1rem;
116
+ }
117
+
118
+ iframe {
119
+ height: 600px;
120
+ }
121
+ }
122
+
123
+ .loader {
124
+ display: flex;
125
+ justify-content: center;
126
+ align-items: center;
127
+ height: 450px;
128
+ background: #f9fafb;
129
+ border-radius: 0.5rem;
130
+ }
131
+
132
+ .loader-spinner {
133
+ width: 50px;
134
+ height: 50px;
135
+ border: 5px solid #f3f3f3;
136
+ border-top: 5px solid #4f46e5;
137
+ border-radius: 50%;
138
+ animation: spin 1s linear infinite;
139
+ }
140
+
141
+ @keyframes spin {
142
+ 0% { transform: rotate(0deg); }
143
+ 100% { transform: rotate(360deg); }
144
+ }
145
+ </style>
146
+ </head>
147
+ <body>
148
+ <div class="container">
149
+ <header>
150
+ <h1>AI Image Generator</h1>
151
+ <p class="description">Create amazing AI-generated images with Stable Diffusion</p>
152
+ <p class="description">Powered by Black Forest Labs</p>
153
+ </header>
154
+
155
+ <main>
156
+ <div class="iframe-container">
157
+ <div id="loader" class="loader">
158
+ <div class="loader-spinner"></div>
159
+ </div>
160
+ <iframe
161
+ id="generatorFrame"
162
+ src="https://black-forest-labs-flux-1-dev.hf.space"
163
+ frameborder="0"
164
+ width="850"
165
+ height="450"
166
+ style="display: none;"
167
+ onload="frameLoaded()"
168
+ ></iframe>
169
+ </div>
170
+
171
+ <div class="tips">
172
+ <h2>Tips for Best Results</h2>
173
+ <ul>
174
+ <li>Be specific in your descriptions - include details about style, mood, and composition</li>
175
+ <li>Try adding artistic styles like "oil painting", "watercolor", or "digital art"</li>
176
+ <li>Include lighting descriptions like "sunset", "studio lighting", or "moonlight"</li>
177
+ <li>Experiment with different perspectives: "close-up", "aerial view", or "wide angle"</li>
178
+ <li>Add quality enhancers like "highly detailed", "4K", or "professional photography"</li>
179
+ </ul>
180
+ </div>
181
+ </main>
182
+ </div>
183
+
184
+ <script>
185
+ function frameLoaded() {
186
+ const frame = document.getElementById('generatorFrame');
187
+ const loader = document.getElementById('loader');
188
+
189
+ // Hide loader and show iframe
190
+ loader.style.display = 'none';
191
+ frame.style.display = 'block';
192
+
193
+ // Adjust iframe height for mobile
194
+ if (window.innerWidth <= 900) {
195
+ frame.style.height = '600px';
196
+ }
197
+ }
198
+
199
+ // Handle window resize
200
+ window.addEventListener('resize', () => {
201
+ const frame = document.getElementById('generatorFrame');
202
+ if (window.innerWidth <= 900) {
203
+ frame.style.height = '600px';
204
+ } else {
205
+ frame.style.height = '450px';
206
+ }
207
+ });
208
+ </script>
209
+ </body>
210
+ </html>