Update app.py

app.py

@@ -79,10 +79,11 @@ index_html = """
             const sampler = document.getElementById("sampler").value;
             const strength = document.getElementById("strength").value;
             const seed = document.getElementById("seed").value;
-
             const button = document.getElementById("generate-button");
+            const errorMessage = document.getElementById("error-message");
             button.disabled = true; // ボタンを無効化
-
+            errorMessage.textContent = ''; // エラーメッセージをクリア
+            
             const params = new URLSearchParams({
                 prompt,
                 negative_prompt,
@@ -95,14 +96,16 @@ index_html = """
                 seed
             });
 
+            const reqURL = `https://soiz-flux-1-dev-serverless.hf.space/generate?${params.toString()}`;
+            document.getElementById("reqURL").value = reqURL; // URLを設定
+            
             try {
-                const response = await fetch(`/generate?${params.toString()}`);
+                const response = await fetch(reqURL);
                 if (!response.ok) {
-                    throw new Error('画像生成に失敗しました');
+                    const errorText = await response.text(); // エラーメッセージを取得
+                    throw new Error(`画像生成に失敗しました: ${errorText}`);
                 }
                 const imageBlob = await response.blob();
-
-                // Convert Blob to Data URL
                 const reader = new FileReader();
                 reader.onloadend = function () {
                     const img = document.getElementById("generated-image");
@@ -111,7 +114,8 @@ index_html = """
                 };
                 reader.readAsDataURL(imageBlob);
             } catch (error) {
-                alert(error.message);
+                errorMessage.textContent = error.message; // エラーメッセージを表示
+                console.error(error); // エラーをコンソールに出力
             } finally {
                 button.disabled = false; // ボタンを再有効化
             }
@@ -142,25 +146,25 @@ index_html = """
     <h1>FLUX.1-Dev Image Generator</h1>
     <form onsubmit="event.preventDefault(); generateImage();">
         <label for="prompt">Prompt:</label><br>
-        <textarea id="prompt" name="prompt" rows="4" cols="50" placeholder="Enter your prompt" required></textarea><br><br>
+        <textarea id="prompt" name="prompt" rows="4" cols="50" placeholder="Enter your prompt" required>real, sky, blue, clouds, light blue, light blue sky, sun, 32K, many islands floating in the sky, Ghibli, many islands, many islands in the sky, islands in the clouds, old islands, fog, high quality, cool</textarea><br><br>
         
         <label for="negative_prompt">Negative Prompt:</label><br>
-        <textarea id="negative_prompt" name="negative_prompt" rows="4" cols="50" placeholder="Enter negative prompt (optional)"></textarea><br><br>
-
+        <textarea id="negative_prompt" name="negative_prompt" rows="4" cols="50" placeholder="Enter negative prompt (optional)">(deformed, distorted, disfigured), poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, (mutated hands and fingers), disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, misspellings, typos</textarea><br><br>
+        
         <label for="width">Width:</label>
-        <input type="number" id="width" name="width" value="1024" min="64" max="2048" step="8" oninput="syncWidth(this.value)">
-        <input type="range" id="width-slider" name="width-slider" min="64" max="2048" value="1024" step="8" oninput="updateWidthInput()"><br><br>
-
+        <input type="number" id="width" name="width" value="1024" min="64" max="2048" step="8" style="width:250px" oninput="syncWidth(this.value)">
+        <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>
+        
         <label for="height">Height:</label>
         <input type="number" id="height" name="height" value="1024" min="64" max="2048" step="8" oninput="syncHeight(this.value)">
-        <input type="range" id="height-slider" name="height-slider" min="64" max="2048" value="1024" step="8" oninput="updateHeightInput()"><br><br>
-
+        <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>
+        
         <label for="steps">Sampling Steps:</label>
         <input type="number" id="steps" name="steps" value="35"><br><br>
-
+        
         <label for="cfgs">CFG Scale:</label>
         <input type="number" id="cfgs" name="cfgs" value="7"><br><br>
-
+        
         <label for="sampler">Sampling Method:</label>
         <select id="sampler" name="sampler">
             <option value="DPM++ 2M Karras">DPM++ 2M Karras</option>
@@ -170,19 +174,23 @@ index_html = """
             <option value="Heun">Heun</option>
             <option value="DDIM">DDIM</option>
         </select><br><br>
-
+        
         <label for="strength">Strength:</label>
         <input type="number" id="strength" name="strength" value="0.7" step="0.01" min="0" max="1"><br><br>
-
+        
         <label for="seed">Seed:</label>
         <input type="number" id="seed" name="seed" value="-1" step="1"><br><br>
-
+        
         <button type="submit" id="generate-button">Generate Image</button>
     </form>
+    <p id="reqURL"></p>
+    <div id="error-message" style="color: red;"></div>
+    
     <h2>Generated Image:</h2>
     <img id="generated-image" src="" alt="Generated Image" style="max-width: 100%; height: auto; display: none;">
 </body>
 </html>
+
 """
 
 @app.route('/')