webui.py

import gradio as gr
from gradio.themes.utils.colors import Color
import random, time, shared, argparse, modules.path, fooocus_version, modules.html
import modules.async_worker as worker
from math import floor
from PIL import Image, ImageDraw, ImageFont

from modules.sdxl_styles import style_keys, aspect_ratios

QM_LOGO  = Image.open("resources/siemens_qm_logo.png")
QM_COLOR = Color(name="qm", c50="#effaed",c100="#def5db",c200="#64b445",c300="#c6eec0",c400="#b9ebb3",c500="#64b445",c600="#55993b",c700="#467e30",c800="#325a23",c900="#233f18",c950="#192d11")
PROMPT_EXAMPLES = ["Industrial automation in a huge factory", 
                   "Advanced industrial technology in a high tech laboratory", 
                   "A diverse group of happy people in a modern office"]
EXAMPLE_GREETINGS = [ 
    "Siemens: Technology with purpose!",
    "Thank you for your commitment",
    "Happy birthday!",
    "I wish you a wonderful day!"
]
INIT_IMAGE_PATH = "resources/init.png"

def generate(*args):
    yield gr.HTML(value=modules.html.make_progress_html(1, "0/30")), \
          gr.Image(), \
          gr.Text()

    while worker.is_working:
        time.sleep(0.1)
        
    worker.buffer=[list(args)]
    worker.outputs = []

    finished=False
    while not finished:
        time.sleep(0.01)
        if len(worker.outputs) > 0:
            flag, product = worker.outputs.pop(0)
            if flag == 'preview':
                percentage, title, image = product
                yield gr.HTML(value=modules.html.make_progress_html(percentage, title)), \
                      gr.Image(value=image) if image is not None else gr.Image(), \
                      gr.Text()
            if flag == 'results':
                image, image_path = product
                yield gr.HTML(value=""), \
                      gr.Image(value=image), \
                      gr.Text(value=image_path)
                finished = True
    return

def toggle_greet_visibility(is_visible):
    return gr.Row(visible=is_visible)

def __toggle_generate_state(is_preview):
    return gr.Image(visible=is_preview), gr.Image(visible=not is_preview), gr.Button(interactive=not is_preview)

def prepare_generate():
    return __toggle_generate_state(True)

def finish_generate():
    return __toggle_generate_state(False)

def debounce():
    time.sleep(0.5)
    return

def overlay_image(image_path, toggle_greet, greet):
    image = ImageDraw.Draw(Image.open(image_path), "RGBA")
    HEIGHT, TEXT_PADDING, TEXTBOX_HEIGHT  = 100, 32, 56
    LOGO_EXTRA_WIDTH = 250
    TEXTBOX_WIDTH = 1280-HEIGHT-4*TEXT_PADDING-LOGO_EXTRA_WIDTH
    
    X_RECT=1280-HEIGHT-2*TEXT_PADDING-LOGO_EXTRA_WIDTH
    image.rectangle(((X_RECT, 768-HEIGHT), (1280, 766)), fill=(0, 0, 0, 75))
    image._image.paste(QM_LOGO, (885,687), QM_LOGO)
    if (toggle_greet):
        image.rectangle(((0, 768-HEIGHT), (X_RECT-1, 768)), fill=(255, 255, 255, 190))
        txt_image = Image.new('RGBA', (4*1280, 4*TEXTBOX_HEIGHT), (255,255,255,0))
        ImageDraw.Draw(txt_image).text(xy=(0,0), text=greet, font=ImageFont.truetype('resources/Neuton-ExtralightItalic.ttf', floor(1.5*TEXTBOX_HEIGHT)), fill=(0, 0, 0))
        image_box = txt_image.getbbox()
        txt_image = txt_image.crop(image_box)
        width, height = txt_image.size
        if (height > 0 and width/height < TEXTBOX_WIDTH/TEXTBOX_HEIGHT):
            txt_image = txt_image.resize((floor((TEXTBOX_HEIGHT/height)*width), TEXTBOX_HEIGHT))
        else:
            txt_image = txt_image.resize((TEXTBOX_WIDTH, floor((TEXTBOX_WIDTH/width)*height)))
        _, height = txt_image.size
        image._image.paste(txt_image, (TEXT_PADDING, 768 - floor((HEIGHT+height)/2)), txt_image)

    return image._image

def make_overlay(image, toggle_greet, greet):
    return gr.Image(value=overlay_image(image, toggle_greet, greet)), gr.Textbox(value=greet)

def verify_latest_overlay(image, toggle_greet, greet, greet_active):
    if greet != greet_active:
        return make_overlay(image, toggle_greet, greet)
    else:
        return gr.Image(), gr.Textbox()

shared.gradio_root = gr.Blocks(title='Siemens Factory Automation AI Card Generator', css=modules.html.css, theme=gr.themes.Default(primary_hue=QM_COLOR))
with shared.gradio_root:
    gr.Markdown(
    """
    # Siemens Factory Automation AI Card Generator
    """)
    with gr.Accordion("Info", elem_classes='panel-container', open=False):
        with gr.Column():
            gr.Markdown("""
                * Describe the motif of the card in a prompt, choose a style if necessary and go!
                * To translate a description into English, you can use [deepl.com](https://www.deepl.com/translator#de/Fabrik) for example.
                * Short personal greetings (up to 2 lines) can be added on the front. Longer texts can be added handwritten on the back after printing.
                * Chat AIs like [Bing Chat](https://www.bing.com/search?q=Bing+AI&showconv=1) can help with creating personal greetings, e.g., with prompts like
                    * Create five different personal greetings for my father Anakin (about 120 characters each). Mention our vacation together on Tatooine.
                    * Create three different personal greetings for my esteemed colleague Michael (about 150 characters each). Proceed step by step.
                    * Create five different personal greetings for a card featuring a bulldozer driver (about 133 characters each) and explain them.
                * This tool is based on [Stable Diffusion XL](https://stability.ai/stable-diffusion) v1.0 and the interface [Fooocus](https://github.com/lllyasviel/Fooocus), the code is available open source on [HuggingFace](https://huggingface.co/spaces/QualityMinds/Siemens-Kartengenerator/tree/main).
            """)

    with gr.Row(elem_classes='panel-container'):
        with gr.Column():
            with gr.Row():
                with gr.Column(scale=5):
                    gr.Markdown("##### Prompt", elem_classes="input-label")
                    prompt = gr.Textbox(value="", placeholder="What would you like to depict on the card?", 
                                        autofocus=True, container=False, show_label=False, lines=2)
                with gr.Column(scale=1, min_width="80px"):
                    gr.Markdown("##### Style", elem_classes="input-label")
                    style_selection = gr.Dropdown(choices=style_keys, value='cinematic', container=False, show_label=False, elem_id="style-selection")
                with gr.Column(scale=1, min_width="80px"):
                    progress_html = gr.HTML(visible=True, elem_id='progress-bar', elem_classes='progress-bar')
                    run_button = gr.Button(value="Create\nCard", variant='primary', elem_id='generate-button', )
            with gr.Row():
                gr.Examples(elem_id="prompt-examples", examples=PROMPT_EXAMPLES, inputs=[prompt])
    
    toggle_greet = gr.Checkbox(label="Add personal greetings", elem_id="toggle-greet-checkbox",
                               container=False, value=True, interactive=True)

    greeting_row=gr.Row(elem_classes='panel-container')
    with greeting_row:
        with gr.Column():
            greet = gr.Textbox(value=EXAMPLE_GREETINGS[0], placeholder="", interactive=True, container=False, lines=2, max_lines=2, show_label=False)
            greet_active = gr.Textbox(value=EXAMPLE_GREETINGS[0], visible=False, container=False, show_label=False)
            greet_examples = gr.Examples(elem_id="greet-examples", examples=EXAMPLE_GREETINGS, inputs=[greet])
    generated_image = gr.Image(visible=False, type='pil', label="Creating card...", elem_classes="generated-image", width=1280,
                               value=INIT_IMAGE_PATH, interactive=False, show_share_button=False, show_download_button=False)
    generated_image_overlayed = gr.Image(label="Card", type='pil', elem_classes="generated-image", width=1280,
                                         value=overlay_image(INIT_IMAGE_PATH, toggle_greet.value, greet.value), show_share_button=False)
    generated_image_path = gr.Text(visible=False, value=INIT_IMAGE_PATH, container=False, show_label=False)
    toggle_greet.change(fn=toggle_greet_visibility, inputs=[toggle_greet], outputs=[greeting_row], queue=False, show_progress=False)\
                .then(fn=make_overlay, inputs=[generated_image_path, toggle_greet, greet], outputs=[generated_image_overlayed, greet_active], show_progress=False, queue=False)
    greet.input(fn=None, inputs=[greet], outputs=[greet], _js="(greet) => { return greet.split('\\n').slice(0,2).join('\\n') }")
    greet.change(fn=debounce, queue=False, show_progress=False)\
         .then(fn=make_overlay, inputs=[generated_image_path, toggle_greet, greet], outputs=[generated_image_overlayed, greet_active], queue=False, show_progress=False)
    greet_active.change(fn=verify_latest_overlay, inputs=[generated_image_path, toggle_greet, greet, greet_active], outputs=[generated_image_overlayed, greet_active], queue=False,  show_progress=False)
    run_button.click(fn=prepare_generate, outputs=[generated_image, generated_image_overlayed, run_button], queue=False)\
              .then(fn=generate, inputs=[prompt, style_selection], outputs=[progress_html, generated_image, generated_image_path], queue=True)\
              .then(fn=make_overlay, inputs=[generated_image_path, toggle_greet, greet], outputs=[generated_image_overlayed, greet_active], queue=False)\
              .then(fn=finish_generate, outputs=[generated_image, generated_image_overlayed, run_button], queue=False)

shared.gradio_root.queue(concurrency_count=1, api_open=False)
shared.gradio_root.launch(server_name="0.0.0.0", show_api=False)