import gradio as gr

import numpy as np
from interface_modules.X2Painting.template_config import style_example
from interface_modules.X2Painting.client_process import send_to_server


def on_select(evt: gr.SelectData):
    index = evt.index
    style_name = list(style_example.values())[index]
    return gr.update(value=style_name)


css = """
        .gradio-container {background-color: #F0F5FF; width: 95% !important}
        """
title = r"""
    </br>
    <h1 align="center" style="font-size: 42px;">Character2Painting</h1>
    <h2 align="center"> <span style="color: red;">Character</span> <--- <span style="color: black;">Zoom out⭐️⭐⭐⭐⭐Zoom in ---> </span> <span style="color: red;">Painting</span></h2>
    </br>

    </br>   
    <img src="file/docs/resource/X2Painting/pics/xword_intro.png" style="display: block; margin: 0 auto; max-height: 384px;">
    </br>
    <h2 style="text-align: center;">===================🤪🥳 Have a Try 🤩😄===================</h2>
    """

with gr.Blocks(css=css) as demo:
    # description
    gr.HTML(title)
    with gr.Row():
        with gr.Column():
            # with gr.Row(scale=1):
            #     with gr.Column():
            gr.Markdown('''
                     ⭐️<b> User Tips </b>
                    - <b>step1：</b>Input a Character. Recommended Chinese Character.
                    - <b>step2：</b>Select a style in the Gallery
                    - <b>step3：</b>Click Run,Waiting for about 1 Min. Enjoy
                ''')
            word = gr.Textbox(
                label="Input Character",
                info="please type Character, such as 李. (输入中文字，例如，李)",
                value="李",
                elem_id="InputCha"
            )

            submit = gr.ClearButton(value="Run",elem_id="RunBtn")
            style_name = gr.Textbox(
                label="style_name",
                info="style_name",
                value="", visible=False,
            )

        with gr.Column(scale=6):
            gr.Markdown('''
            <h1 align="center">Style Gallery</h1>
            ''')
            example_gallery = gr.Gallery(label="style_type", show_label=True, elem_id="example_gallery",
                                         value=list(style_example.keys()), columns=10
                                         )
    # vis result gallery
    gr.Markdown('''
    <h1 align="center">Result Gallery</h1>
    ''')
    final_gallery = gr.Gallery(
        label="最终生成图",
        show_label=False,
        elem_classes="final_gallery",columns=[4], rows=[2]
    )

    # server_port = gr.Number(value=args.server_port, visible=False)
    submit.add([final_gallery])
    submit.click(send_to_server,
                 inputs=[word, style_name],
                 outputs=[final_gallery])
    example_gallery.select(on_select, None,
                           [style_name])

demo.queue()
demo.launch(share=True, server_name="0.0.0.0", server_port=12404)
# demo.launch(share=True)