Hugging Face's logo

Spaces:
soiz
/
sdAPI
Paused

App Files Community
soiz commited on
Commit
f30e838
·
verified ·
1 Parent(s): 197b646

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +125 -1
app.py CHANGED
@@ -64,7 +64,131 @@ def query(prompt, negative_prompt="", steps=35, cfg_scale=7, sampler="DPM++ 2M K
64
 
65
  # HTML template for the index page (unchanged)
66
  index_html = """
67
- <!-- unchanged HTML template -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  """
69
 
70
  @app.route('/')
 
64
 
65
  # HTML template for the index page (unchanged)
66
  index_html = """
67
+ <!DOCTYPE html>
68
+ <html lang="ja">
69
+ <head>
70
+ <meta charset="UTF-8">
71
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
72
+ <title>FLUX.1-Dev Image Generator</title>
73
+ <script>
74
+ async function generateImage() {
75
+ const prompt = document.getElementById("prompt").value;
76
+ const negative_prompt = document.getElementById("negative_prompt").value;
77
+ const width = document.getElementById("width").value;
78
+ const height = document.getElementById("height").value;
79
+ const steps = document.getElementById("steps").value;
80
+ const cfgs = document.getElementById("cfgs").value;
81
+ const sampler = document.getElementById("sampler").value;
82
+ const strength = document.getElementById("strength").value;
83
+ const seed = document.getElementById("seed").value;
84
+ const button = document.getElementById("generate-button");
85
+ const errorMessage = document.getElementById("error-message");
86
+ button.disabled = true; // ボタンを無効化
87
+ errorMessage.textContent = ''; // エラーメッセージをクリア
88
+
89
+ const params = new URLSearchParams({
90
+ prompt,
91
+ negative_prompt,
92
+ width,
93
+ height,
94
+ steps,
95
+ cfgs,
96
+ sampler,
97
+ strength,
98
+ seed
99
+ });
100
+
101
+ try {
102
+ const response = await fetch(`https://soiz-flux-1-dev-serverless.hf.space/generate?${params.toString()}`);
103
+ if (!response.ok) {
104
+ throw new Error('画像生成に失敗しました');
105
+ }
106
+ const imageBlob = await response.blob();
107
+ const reader = new FileReader();
108
+ reader.onloadend = function () {
109
+ const img = document.getElementById("generated-image");
110
+ img.src = reader.result; // dataURLを設定
111
+ img.style.display = 'block'; // 画像を表示
112
+ };
113
+ reader.readAsDataURL(imageBlob);
114
+ } catch (error) {
115
+ errorMessage.textContent = error.message; // エラーメッセージを表示
116
+ console.error(error); // エラーをコンソールに出力
117
+ } finally {
118
+ button.disabled = false; // ボタンを再有効化
119
+ }
120
+ }
121
+
122
+ function syncWidth(value) {
123
+ document.getElementById("width-slider").value = value;
124
+ }
125
+
126
+ function syncHeight(value) {
127
+ document.getElementById("height-slider").value = value;
128
+ }
129
+
130
+ function updateWidthInput() {
131
+ const widthSlider = document.getElementById("width-slider");
132
+ const widthInput = document.getElementById("width");
133
+ widthInput.value = widthSlider.value;
134
+ }
135
+
136
+ function updateHeightInput() {
137
+ const heightSlider = document.getElementById("height-slider");
138
+ const heightInput = document.getElementById("height");
139
+ heightInput.value = heightSlider.value;
140
+ }
141
+ </script>
142
+ </head>
143
+ <body>
144
+ <h1>FLUX.1-Dev Image Generator</h1>
145
+ <form onsubmit="event.preventDefault(); generateImage();">
146
+ <label for="prompt">Prompt:</label><br>
147
+ <textarea id="prompt" name="prompt" rows="4" cols="50" placeholder="Enter your prompt" required></textarea><br><br>
148
+
149
+ <label for="negative_prompt">Negative Prompt:</label><br>
150
+ <textarea id="negative_prompt" name="negative_prompt" rows="4" cols="50" placeholder="Enter negative prompt (optional)"></textarea><br><br>
151
+
152
+ <label for="width">Width:</label>
153
+ <input type="number" id="width" name="width" value="1024" min="64" max="2048" step="8" style="width:250px" oninput="syncWidth(this.value)">
154
+ <input type="range" id="width-slider" name="width-slider" min="64" max="2048" value="1024" step="8" style="width:250px; display: inline-block;" oninput="updateWidthInput()"><br><br>
155
+
156
+ <label for="height">Height:</label>
157
+ <input type="number" id="height" name="height" value="1024" min="64" max="2048" step="8" oninput="syncHeight(this.value)">
158
+ <input type="range" id="height-slider" name="height-slider" min="64" max="2048" value="1024" step="8" style="width:250px; display: inline-block;" oninput="updateHeightInput()"><br><br>
159
+
160
+ <label for="steps">Sampling Steps:</label>
161
+ <input type="number" id="steps" name="steps" value="35"><br><br>
162
+
163
+ <label for="cfgs">CFG Scale:</label>
164
+ <input type="number" id="cfgs" name="cfgs" value="7"><br><br>
165
+
166
+ <label for="sampler">Sampling Method:</label>
167
+ <select id="sampler" name="sampler">
168
+ <option value="DPM++ 2M Karras">DPM++ 2M Karras</option>
169
+ <option value="DPM++ SDE Karras">DPM++ SDE Karras</option>
170
+ <option value="Euler">Euler</option>
171
+ <option value="Euler a">Euler a</option>
172
+ <option value="Heun">Heun</option>
173
+ <option value="DDIM">DDIM</option>
174
+ </select><br><br>
175
+
176
+ <label for="strength">Strength:</label>
177
+ <input type="number" id="strength" name="strength" value="0.7" step="0.01" min="0" max="1"><br><br>
178
+
179
+ <label for="seed">Seed:</label>
180
+ <input type="number" id="seed" name="seed" value="-1" step="1"><br><br>
181
+
182
+ <button type="submit" id="generate-button">Generate Image</button>
183
+ </form>
184
+
185
+ <div id="error-message" style="color: red;"></div>
186
+
187
+ <h2>Generated Image:</h2>
188
+ <img id="generated-image" src="" alt="Generated Image" style="max-width: 100%; height: auto; display: none;">
189
+ </body>
190
+ </html>
191
+
192
  """
193
 
194
  @app.route('/')