anime-kawai-diffusion

Running

App Files Files Community

soiz commited on Oct 21

Commit

dbf2966

•

1 Parent(s): 04429ce

Update app.py

Browse files

Files changed (1) hide show

app.py +183 -5

app.py CHANGED Viewed

@@ -1,7 +1,6 @@
 from flask import Flask, request, jsonify, send_file, render_template_string, make_response
 import requests
 import io
-import os
 import random
 from PIL import Image
 from deep_translator import GoogleTranslator
@@ -9,8 +8,6 @@ from deep_translator import GoogleTranslator
 app = Flask(__name__)
 API_URL = "https://api-inference.huggingface.co/models/Ojimi/anime-kawai-diffusion"
-API_TOKEN = os.getenv("HF_READ_TOKEN")
-headers = {"Authorization": f"Bearer {API_TOKEN}"}
 timeout = 300  # タイムアウトを300秒に設定
 # Function to query the API and return the generated image
@@ -43,7 +40,8 @@ def query(prompt, negative_prompt="", steps=35, cfg_scale=7, sampler="DPM++ 2M K
     for attempt in range(3):  # 最大3回の再試行
         try:
-            response = requests.post(API_URL, headers=headers, json=payload, timeout=timeout)
             if response.status_code != 200:
                 return None, f"Error: Failed to get image. Status code: {response.status_code}, Details: {response.text}"
@@ -74,7 +72,187 @@ def add_security_headers(response):
 # HTML template for the index page
 index_html = """
 """
 @app.route('/')
@@ -104,4 +282,4 @@ def generate_image():
     return send_file(img_bytes, mimetype='image/png')
 if __name__ == "__main__":
-    app.run(host='0.0.0.0', port=7860)

 from flask import Flask, request, jsonify, send_file, render_template_string, make_response
 import requests
 import io
 import random
 from PIL import Image
 from deep_translator import GoogleTranslator
 app = Flask(__name__)
 API_URL = "https://api-inference.huggingface.co/models/Ojimi/anime-kawai-diffusion"
 timeout = 300  # タイムアウトを300秒に設定
 # Function to query the API and return the generated image
     for attempt in range(3):  # 最大3回の再試行
         try:
+            # Authorization header is removed
+            response = requests.post(API_URL, json=payload, timeout=timeout)
             if response.status_code != 200:
                 return None, f"Error: Failed to get image. Status code: {response.status_code}, Details: {response.text}"
 # HTML template for the index page
 index_html = """
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <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 lastX = 0;
+        let lastY = 0;
+        let penSize = 5;
+        let penColor = '#000000';
+        function startDrawing(event) {
+            isDrawing = true;
+            [lastX, lastY] = 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(lastX, lastY);
+            ctx.lineTo(newX, newY);
+            ctx.strokeStyle = penColor;
+            ctx.lineWidth = penSize;
+            ctx.stroke();
+            ctx.closePath();
+            [lastX, lastY] = [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;
+            const width = document.getElementById("width").value;
+            const height = document.getElementById("height").value;
+            const steps = document.getElementById("steps").value;
+            const cfgs = document.getElementById("cfgs").value;
+            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,
+                width,
+                height,
+                steps,
+                cfgs,
+                sampler,
+                strength,
+                seed
+            });
+            const reqURL = `https://soiz-sdapi.hf.space/generate?${params.toString()}`;
+            document.getElementById("reqURL").value = reqURL; // URLを設定
+            try {
+                const response = await fetch(reqURL);
+                if (!response.ok) {
+                    const errorText = await response.text(); // エラーメッセージを取得
+                    throw new Error(`画像生成に失敗しました: ${errorText}`);
+                }
+                const imageBlob = await response.blob();
+                const reader = new FileReader();
+                reader.onloadend = function () {
+                    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) {
+                errorMessage.textContent = error.message; // エラーメッセージを表示
+                console.error(error); // エラーをコンソールに出力
+            } finally {
+                button.disabled = false; // ボタンを再有効化
+            }
+        }
+        function syncWidth(value) {
+            document.getElementById("width-slider").value = value;
+        }
+        function syncHeight(value) {
+            document.getElementById("height-slider").value = value;
+        }
+        function updateWidthInput() {
+            const widthSlider = document.getElementById("width-slider");
+            const widthInput = document.getElementById("width");
+            widthInput.value = widthSlider.value;
+        }
+        function updateHeightInput() {
+            const heightSlider = document.getElementById("height-slider");
+            const heightInput = document.getElementById("height");
+            heightInput.value = heightSlider.value;
+        }
+    </script>
+</head>
+<body>
+    <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>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"></textarea><br><br>
+        <label for="width">Width:</label>
+        <input id="width" name="width" type="number" value="1024" onchange="syncWidth(this.value)"><br>
+        <input id="width-slider" type="range" min="256" max="2048" value="1024" oninput="updateWidthInput()"><br><br>
+        <label for="height">Height:</label>
+        <input id="height" name="height" type="number" value="1024" onchange="syncHeight(this.value)"><br>
+        <input id="height-slider" type="range" min="256" max="2048" value="1024" oninput="updateHeightInput()"><br><br>
+        <label for="steps">Steps:</label>
+        <input id="steps" name="steps" type="number" value="35" min="1" max="100"><br><br>
+        <label for="cfgs">CFG Scale:</label>
+        <input id="cfgs" name="cfgs" type="number" value="7" step="0.1"><br><br>
+        <label for="sampler">Sampler:</label>
+        <select id="sampler" name="sampler">
+            <option value="DPM++ 2M Karras">DPM++ 2M Karras</option>
+            <option value="DPM++ 2S a">DPM++ 2S a</option>
+            <option value="DPM++ SDE Karras">DPM++ SDE Karras</option>
+        </select><br><br>
+        <label for="strength">Strength:</label>
+        <input id="strength" name="strength" type="number" value="0.7" step="0.1" min="0.0" max="1.0"><br><br>
+        <label for="seed">Seed:</label>
+        <input id="seed" name="seed" type="number" value="-1" min="-1"><br><br>
+        <button id="generate-button" type="submit">Generate Image</button>
+        <p id="error-message" style="color: red;"></p>
+    </form>
+    <br>
+    <div>
+        <canvas id="canvas" width="1024" height="1024"></canvas>
+    </div>
+    <img id="generated-image" src="" alt="Generated Image" style="display: none;"><br>
+    <textarea id="reqURL" readonly style="width: 100%; height: 50px;"></textarea>
+</body>
+</html>
 """
 @app.route('/')
     return send_file(img_bytes, mimetype='image/png')
 if __name__ == "__main__":
+    app.run(host='0.0.0.0', port=7860)