Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify, render_template_string
+from flask import Flask, request, jsonify, send_file, render_template_string
 import requests
 import io
 import os
@@ -69,7 +69,7 @@ index_html = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FLUX.1-Dev Image Generator</title>
     <script>
-        function generateImage() {
+        async function generateImage() {
             const prompt = document.getElementById("prompt").value;
             const negative_prompt = document.getElementById("negative_prompt").value;
             const width = document.getElementById("width").value;
@@ -80,21 +80,36 @@ index_html = """
             const strength = document.getElementById("strength").value;
             const seed = document.getElementById("seed").value;
 
-            const img = document.getElementById("generated-image");
             const button = document.getElementById("generate-button");
             button.disabled = true; // ボタンを無効化
 
-            const imgSrc = `/generate?prompt=${encodeURIComponent(prompt)}&negative_prompt=${encodeURIComponent(negative_prompt)}&width=${width}&height=${height}&steps=${steps}&cfgs=${cfgs}&sampler=${sampler}&strength=${strength}&seed=${seed}`;
-
-            img.src = imgSrc; // 画像のsrcを設定
-
-            img.onload = function() {
-                button.disabled = false; // 画像が読み込まれたらボタンを再有効化
-            };
-            img.onerror = function() {
-                alert("画像の生成に失敗しました。");
-                button.disabled = false; // エラー時もボタンを再有効化
-            };
+            const params = new URLSearchParams({
+                prompt,
+                negative_prompt,
+                width,
+                height,
+                steps,
+                cfgs,
+                sampler,
+                strength,
+                seed
+            });
+
+            try {
+                const response = await fetch(`/generate?${params.toString()}`);
+                if (!response.ok) {
+                    throw new Error('画像生成に失敗しました');
+                }
+                const imageBlob = await response.blob();
+                const imageUrl = URL.createObjectURL(imageBlob);
+                const img = document.getElementById("generated-image");
+                img.src = imageUrl; // 生成された画像を設定
+                img.style.display = 'block'; // 画像を表示
+            } catch (error) {
+                alert(error.message);
+            } finally {
+                button.disabled = false; // ボタンを再有効化
+            }
         }
     </script>
 </head>
@@ -138,7 +153,7 @@ index_html = """
         <button type="submit" id="generate-button">Generate Image</button>
     </form>
     <h2>Generated Image:</h2>
-    <img id="generated-image" src="" alt="Generated Image" style="max-width: 100%; height: auto; display: none;" onload="this.style.display='block';" onerror="this.style.display='none';">
+    <img id="generated-image" src="" alt="Generated Image" style="max-width: 100%; height: auto; display: none;">
 </body>
 </html>
 """
@@ -171,14 +186,8 @@ def generate_image():
     image.save(img_io, 'PNG')
     img_io.seek(0)
 
-    # Create a unique filename for the image
-    image_filename = f"generated_image_{random.randint(1, 10000)}.png"
-    
-    # Save the image to a file
-    image.save(os.path.join('static', image_filename))
-
-    # Return the image URL
-    return jsonify({"url": f"/static/{image_filename}"})
+    # Return the image directly
+    return send_file(img_io, mimetype='image/png')
 
 if __name__ == '__main__':
     # Ensure the 'static' folder exists for saving images