app.py

# encoding=utf8


import os
import cv2
import gradio as gr
import numpy as np
import re
import json

from huggingface_hub import login
from functions import *
from gradio.components import Component

login(token=os.getenv('LOGIN_TOKEN'))
css = './css/style.css'

# Initial a Gradio Block with specific theme
block = gr.Blocks(
    theme=gr.themes.Base(),
    css=css
).queue()

# Load javascript plugin
with open('javascript/bboxHint.js', 'r', encoding="utf-8") as file:
    value = file.read()
escaped_value = json.dumps(value)

with block:
    block.load(
        fn=None,
        _js=f"""() => {{
                const script = document.createElement("script");
                const text =  document.createTextNode({escaped_value});
                script.appendChild(text);
                document.head.appendChild(script);
            }}"""
    )
    gr.HTML(
        '<div style="text-align: center; margin: 20px auto;"> \
        <h1 style="font-size:5em">JoyType</h1> \
        <h1 style="font-size:2.5em">A Robust Design for Multilingual Visual Text Creation</h1> \
        </div>'
    )
    with gr.Row():
        with gr.Column(scale=3):
            with gr.Accordion('Basic Settings(基础设置)', open=True):
                with gr.Row(variant='compact'):
                    usr_prompt = gr.Textbox(label='Prompt(提示词)', elem_id='usr_prompt')
                with gr.Row(variant='compact'):
                    base_model = gr.Dropdown(
                        value='JoyType.v1.0', choices=model_list,
                        label='Base Model(基模型)', elem_id='base_model', allow_custom_value=False
                    )

            with gr.Accordion('Advanced Settings(高级设置)', open=False):
                with gr.Row(variant='compact'):
                    image_width = gr.Slider(label='Image Width(宽度)', minimum=256, maximum=768, value=512, step=32)
                    image_height = gr.Slider(label='Image Height(高度)', minimum=256, maximum=768, value=512, step=32)
                with gr.Row(variant='compact'):
                    num_samples = gr.Slider(label='Samples(生成数量)', minimum=1, maximum=4, value=2, step=1)
                    inference_steps = gr.Slider(label='Steps(推理步数)', minimum=10, maximum=50, value=20, step=1)
                with gr.Row(variant='compact'):
                    conditioning_scale = gr.Slider(label='Text Strength(文字强度)', minimum=0.1, maximum=2., value=1., step=0.1)
                    cfg_scale = gr.Slider(label='CFG Scale(CFG制强度)', minimum=1, maximum=20, value=7.5, step=0.5)
                with gr.Row(variant='compact'):
                    seed = gr.Slider(label='Seed(随机种子)', minimum=-1, maximum=2147483647, value=-1, step=1)
                    scheduler_name = gr.Dropdown(
                        value='PNDM', choices=[
                            'PNDM', 'LMS', 'Euler', 'DPM', 'DDIM', 'Heun', 'Euler-Ancestral'
                        ],
                        label='Scheduler(采样器)', allow_custom_value=False
                    )
                with gr.Row(variant='compact'):
                    a_prompt = gr.Textbox(
                        label='Added Prompt(附加提示词)', max_lines=2,
                        value='best quality, extremely detailed, supper legible text, '
                              'clear text edges, clear strokes, neat writing, no watermarks'
                    )
                with gr.Row(variant='compact'):
                    n_prompt = gr.Textbox(
                        label='Negative Prompt(负向提示词)', max_lines=2,
                        value='low-res, bad anatomy, extra digit, fewer digits, cropped, worst quality, '
                              'low quality, watermark, unreadable text, messy words, distorted text, '
                              'disorganized writing, advertising picture'
                    )

                base_model.change(
                    fn=change_settings,
                    inputs=base_model,
                    outputs=[inference_steps, cfg_scale, scheduler_name]
                )

            with gr.Row():
                with gr.Tab('Text Editing(文字编辑)', elem_id='MD-tab-t2i'):
                    with gr.Row(variant='compact'):
                        choice = gr.Slider(
                            label=f'Text Boxes(可编辑文字框)',
                            minimum=0, maximum=8, step=1, value=BBOX_INI_NUM
                        )

                    with gr.Row():
                        with gr.Column(scale=2):
                            rect_img = gr.Image(
                                value=create_canvas(), label='Rect Position',
                                elem_id='MD-bbox-rect-t2i', show_label=False, visible=True,
                                height=300
                            )
                        with gr.Column(scale=3):
                            rect_cb_list: list[Component] = []
                            rect_box_list: list[Component] = []
                            rect_font_name_list: list[Component] = []
                            rect_usr_text_list: list[Component] = []

                            with gr.Column():
                                with gr.Row(elem_id='row_show'):
                                    with gr.Column(scale=1, min_width=20):
                                        gr.Markdown('<p align="center">Font(字体)</p>', elem_id='markdown_1')
                                    with gr.Column(scale=2, min_width=20):
                                        gr.Markdown('<p align="center">Text(文字内容)</p>', elem_id='markdown_2')

                                row_layout = [gr.Row() for _ in range(BBOX_MAX_NUM)]
                                for i in range(BBOX_MAX_NUM):
                                    visible = True if i < BBOX_INI_NUM else False
                                    with row_layout[i]:
                                        fn = gr.Dropdown(
                                            choices=font_list,
                                            label='Font(字体)', value='CHN-华文行楷', visible=visible,
                                            show_label=False, scale=1, allow_custom_value=False,
                                            min_width=90, elem_id=f'font_input_{i}', container=False
                                        )
                                        ut = gr.Textbox(
                                            label='Text(文字内容)', visible=visible, scale=2,
                                            show_label=False, elem_id=f'text_input_{i}', container=False, max_lines=1
                                        )
                                    e = gr.Checkbox(label=f'{i}', value=visible, visible=False, min_width=10)

                                    x = gr.Slider(label='x', value=0.4, minimum=0.0, maximum=1.0, step=0.0001,
                                                  elem_id=f'MD-t2i-{i}-x',
                                                  visible=False)
                                    y = gr.Slider(label='y', value=0.4, minimum=0.0, maximum=1.0, step=0.0001,
                                                  elem_id=f'MD-t2i-{i}-y',
                                                  visible=False)
                                    w = gr.Slider(label='w', value=0.2, minimum=0.0, maximum=1.0, step=0.0001,
                                                  elem_id=f'MD-t2i-{i}-w',
                                                  visible=False)
                                    h = gr.Slider(label='h', value=0.2, minimum=0.0, maximum=1.0, step=0.0001,
                                                  elem_id=f'MD-t2i-{i}-h',
                                                  visible=False)
                                    x.change(fn=None, inputs=x, outputs=x, _js=f'v => onBoxChange({i}, "x", v)',
                                             show_progress=False, queue=False)
                                    y.change(fn=None, inputs=y, outputs=y, _js=f'v => onBoxChange({i}, "y", v)',
                                             show_progress=False, queue=False)
                                    w.change(fn=None, inputs=w, outputs=w, _js=f'v => onBoxChange({i}, "w", v)',
                                             show_progress=False, queue=False)
                                    h.change(fn=None, inputs=h, outputs=h, _js=f'v => onBoxChange({i}, "h", v)',
                                             show_progress=False, queue=False)
                                    e.change(fn=None, inputs=e, outputs=e, _js=f'e => onBoxEnableClick({i}, e)',
                                             queue=False)

                                    rect_cb_list.extend([e])
                                    rect_box_list.extend([x, y, w, h])
                                    rect_font_name_list.extend([fn])
                                    rect_usr_text_list.extend([ut])

                            choice.change(
                                fn=update_box_num,
                                inputs=[choice],
                                outputs=[
                                    *rect_cb_list, *rect_font_name_list, *rect_usr_text_list, *rect_box_list
                                ]
                            )
                    with gr.Row():
                        gr.Markdown('')
                        run_edit = gr.Button(value='Run(运行)', elem_classes='run', elem_id='run_edit')
                        gr.Markdown('')
                    with gr.Row():
                        with gr.Accordion(label='Examples(示例)', open=True):
                            img_container = gr.Image(visible=False, label='Text Layout(文字布局)')
                            example_id = gr.Textbox(value=-1, visible=False, label='ID(编号)')
                            gen_examples = gr.Examples(
                                [
                                    [1, 'templates/1.png', 'landscape, Chinese style, ink peaks, poster', model_list[0], 1648703813, 3, 1],
                                    [2, 'templates/2.png', 'a clock and medicine bottle has texts and "time"', model_list[0], 1654615998, 2, 1],
                                    [3, 'templates/3.png', '漂亮的风景照，很多山峰，清澈的湖水', model_list[3], 2078698098, 3, 1],
                                    [4, 'templates/4.png', 'a vodka, on the bar, dim background', model_list[2], 443791646, 3, 1],
                                    [5, 'templates/5.png', '画有玫瑰的卡片，明亮的背景', model_list[4], 516210890, 2, 1],
                                    [6, 'templates/6.png', 'posters on the table, with pens, clear background, starry sky, moon', model_list[1], 228167646, 4, 1],
                                    [7, 'templates/7.png', 'snowy landscape, domed cabin, winter scene, cozy atmosphere, soft lighting', model_list[5], 695897181, 3, 1],
                                    [8, 'templates/8.png', '一张关于健康教育的卡片，上面有一些文字，有一些食物图标，背景里有一些水果喝饮料的图标，且背景是模糊的', model_list[1], 936188591, 6, 1],
                                ],
                                [example_id, img_container, usr_prompt, base_model, seed, choice, num_samples],
                                examples_per_page=5,
                                label=''
                            )

                        example_id.change(
                            fn=load_box_list,
                            inputs=[example_id, choice],
                            outputs=[
                                *rect_cb_list, *rect_font_name_list, *rect_usr_text_list, *rect_box_list, example_id
                            ]
                        )

                    rect_img.clear(re_edit, None, [*rect_box_list, rect_img, image_width, image_height])
                    image_width.release(resize_w, [image_width, rect_img], rect_img)
                    image_height.release(resize_h, [image_height, rect_img], rect_img)
                    
        with gr.Column(scale=2):
            with gr.Row():
                result_gallery = gr.Gallery(
                    label='Result(结果)', show_label=True, preview=True, columns=8,
                    allow_preview=True, elem_id='gallery'
                )
            with gr.Row():
                with gr.Tab("Introduction"):
                    gr.Markdown('<span style="color:#3B5998;font-size:20px">What we can do</span>')
                    gr.Markdown(
                        '<span style="color:black;font-size:15px">Generating images with accurately represented text in multi-language.</span>')
                    gr.Markdown('<span style="color:#3B5998;font-size:20px">How to use</span>')
                    gr.Markdown(
                        '<span style="color:black;font-size:15px">Enter a description of the image you want to generate in the "Prompt" text box.</span>')
                    gr.Markdown('<span style="color:#3B5998;font-size:18px">Text Editing</span>')
                    gr.Markdown(
                        '<span style="color:black;font-size:15px">You can drag the "Text Boxes" slider to set the number of text to be laid out, '
                        'and set the corresponding font and text content respectively, Note that there must be no overlap between the text boxes, '
                        'or the model will not generate an image.</span>')
                    gr.Markdown(
                        '<span style="color:black;font-size:15px">Finally, click the Run button to generate a picture!</span>')
                with gr.Tab("说明"):
                    gr.Markdown('<span style="color:#3B5998;font-size:20px">我们能做什么</span>')
                    gr.Markdown('<span style="color:black;font-size:15px">在多种语言上生成具有准确文本的图像</span>')
                    gr.Markdown('<span style="color:#3B5998;font-size:20px">如何使用</span>')
                    gr.Markdown(
                        '<span style="color:black;font-size:15px">在“提示词”文本框中输入你想要生成的图片所对应的文字描述。</span>')
                    gr.Markdown('<span style="color:#3B5998;font-size:18px">文本编辑</span>')
                    gr.Markdown(
                        '<span style="color:black;font-size:15px">你可以拖动“可编辑文字框”滑块来设置需要布局的文字数量，并分别设置对应的字体和文字内容；'
                        '请注意，文本框之间不能有重叠，否则模型将不会生成图片。</span>')
                    gr.Markdown('<span style="color:black;font-size:15px">最后点击运行按钮，即可生成图片！</span>')
            with gr.Row():
                result_info = gr.Markdown('debug', visible=False)

    args = [
        num_samples, a_prompt, n_prompt,
        conditioning_scale, cfg_scale, inference_steps, seed, usr_prompt, 
        rect_img, base_model, scheduler_name, gr.State(BBOX_MAX_NUM),
        *(rect_cb_list + rect_box_list + rect_font_name_list + rect_usr_text_list)
    ]
    run_edit.click(
        fn=process,
        inputs=args,
        outputs=[result_gallery, result_info]
    )


if __name__ == "__main__":
    block.launch(
        server_name='0.0.0.0',
        share=True,
    )