FLUX.1-schnell

Running

File size: 12,992 Bytes

from flask import Flask, request, jsonify, send_file, render_template_string
import requests
import io
import os
import random
from PIL import Image
from deep_translator import GoogleTranslator

app = Flask(__name__)

API_URL = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev"
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
def query(prompt, negative_prompt="", steps=35, cfg_scale=7, sampler="DPM++ 2M Karras", seed=-1, strength=0.7, width=1024, height=1024):
    if not prompt:
        return None, "Prompt is required"

    key = random.randint(0, 999)
    
    # Translate the prompt from Russian to English if necessary
    prompt = GoogleTranslator(source='ru', target='en').translate(prompt)
    print(f'Generation {key} translation: {prompt}')

    # Add some extra flair to the prompt
    prompt = f"{prompt} | ultra detail, ultra elaboration, ultra quality, perfect."
    print(f'Generation {key}: {prompt}')
    
    payload = {
        "inputs": prompt,
        "is_negative": False,
        "steps": steps,
        "cfg_scale": cfg_scale,
        "seed": seed if seed != -1 else random.randint(1, 1000000000),
        "strength": strength,
        "parameters": {
            "width": width,
            "height": height
        }
    }

    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}"

            image_bytes = response.content
            image = Image.open(io.BytesIO(image_bytes))
            return image, None
        except requests.exceptions.Timeout:
            if attempt < 2:  # 最後の試行でない場合は再試行
                print("Timeout occurred, retrying...")
                continue
            return None, "Error: The request timed out. Please try again."
        except requests.exceptions.RequestException as e:
            return None, f"Request Exception: {str(e)}"
        except Exception as e:
            return None, f"Error when trying to open the image: {e}"

# 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-flux-1-dev-serverless.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 (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">
        <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" 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>
            <option value="DPM++ SDE Karras">DPM++ SDE Karras</option>
            <option value="Euler">Euler</option>
            <option value="Euler a">Euler a</option>
            <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>
    <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>

"""

@app.route('/')
def index():
    return render_template_string(index_html)

@app.route('/generate', methods=['GET'])
def generate_image():
    # Retrieve query parameters
    prompt = request.args.get("prompt", "")
    negative_prompt = request.args.get("negative_prompt", "")
    steps = int(request.args.get("steps", 35))
    cfg_scale = float(request.args.get("cfgs", 7))
    sampler = request.args.get("sampler", "DPM++ 2M Karras")
    strength = float(request.args.get("strength", 0.7))
    seed = int(request.args.get("seed", -1))
    width = int(request.args.get("width", 1024))
    height = int(request.args.get("height", 1024))

    # Call the query function to generate the image
    image, error = query(prompt, negative_prompt, steps, cfg_scale, sampler, seed, strength, width, height)
    
    if error:
        return jsonify({"error": error}), 400

    # Save the image to a BytesIO object and return it
    img_bytes = io.BytesIO()
    image.save(img_bytes, format='PNG')
    img_bytes.seek(0)
    return send_file(img_bytes, mimetype='image/png')

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=7860)