Update app.py

app.py

@@ -68,7 +68,65 @@ index_html = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FLUX.1-Dev Image Generator</title>
+    <style>
+        #canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            cursor: crosshair;
+        }
+        #container {
+            position: relative;
+            display: inline-block;
+        }
+    </style>
     <script>
+        let isDrawing = false;
+        let x = 0;
+        let y = 0;
+        let penSize = 5;
+        let penColor = '#000000';
+
+        function startDrawing(event) {
+            isDrawing = true;
+            [x, y] = getMousePos(event);
+        }
+
+        function draw(event) {
+            if (!isDrawing) return;
+
+            const canvas = document.getElementById('canvas');
+            const ctx = canvas.getContext('2d');
+            const [newX, newY] = getMousePos(event);
+
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            ctx.lineTo(newX, newY);
+            ctx.strokeStyle = penColor;
+            ctx.lineWidth = penSize;
+            ctx.stroke();
+            ctx.closePath();
+
+            [x, y] = [newX, newY];
+        }
+
+        function stopDrawing() {
+            isDrawing = false;
+        }
+
+        function getMousePos(event) {
+            const rect = document.getElementById('canvas').getBoundingClientRect();
+            return [event.clientX - rect.left, event.clientY - rect.top];
+        }
+
+        function setPenSize(value) {
+            penSize = value;
+        }
+
+        function setPenColor(value) {
+            penColor = value;
+        }
+
         async function generateImage() {
             const prompt = document.getElementById("prompt").value;
             const negative_prompt = document.getElementById("negative_prompt").value;
@@ -111,6 +169,18 @@ index_html = """
                     const img = document.getElementById("generated-image");
                     img.src = reader.result; // dataURLを設定
                     img.style.display = 'block'; // 画像を表示
+
+                    // 画像をキャンバスに描画
+                    const canvas = document.getElementById('canvas');
+                    const ctx = canvas.getContext('2d');
+                    ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア
+                    const imgElement = new Image();
+                    imgElement.src = reader.result;
+                    imgElement.onload = function () {
+                        canvas.width = imgElement.width;
+                        canvas.height = imgElement.height;
+                        ctx.drawImage(imgElement, 0, 0);
+                    };
                 };
                 reader.readAsDataURL(imageBlob);
             } catch (error) {
@@ -152,7 +222,7 @@ index_html = """
         <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="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>
@@ -187,7 +257,26 @@ index_html = """
     <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;">
+    <div id="container">
+        <canvas id="canvas"></canvas>
+        <img id="generated-image" src="" alt="Generated Image" style="max-width: 100%; height: auto; display: none;">
+    </div>
+    
+    <h3>Draw on the Image:</h3>
+    <label for="penSize">Pen Size:</label>
+    <input type="range" id="penSize" name="penSize" min="1" max="50" value="5" oninput="setPenSize(this.value)">
+    
+    <label for="penColor">Pen Color:</label>
+    <input type="color" id="penColor" name="penColor" value="#000000" onchange="setPenColor(this.value)">
+    
+    <script>
+        // Canvasイベントリスナーを設定
+        const canvas = document.getElementById('canvas');
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseup', stopDrawing);
+        canvas.addEventListener('mouseleave', stopDrawing);
+    </script>
 </body>
 </html>