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>
    </br>
    
    <br>
    <div style="text-align: center;">
    <h2>
        <span style="color: red;">Character</span> &lt;---
        <span style="color: black;">Zoom out </span>
        <a href='https://github.com/antarestcguo/X2Painting' target="_blank" style="display: inline-block; text-decoration: none; color: black; vertical-align: middle;">
            <img src='https://img.shields.io/badge/Github-Repo-blue' alt="GitHub" style="width: auto; height: 20px;">
        </a>
        <span style="color: black;"> Zoom in ---&gt;</span>
        <span style="color: red;">Painting</span>
    </h2>
    </div>
    <br>

    </br>   
    <img src="https://raw.githubusercontent.com/antarestcguo/X2Painting/main/resources/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(scale=1):
            gr.HTML("""
                <h1>⭐️ User Tips </h1>
                <h2> <p><b>step1：</b> Input a Character. Recommended Chinese Character.</p>
                <p><b>step2：</b> Select a style in the Gallery</p>
                <p><b>step3：</b> Click Run, Waiting for about 1 Min. Enjoy</p></h2>
            """)
            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.HTML("""
            <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=5
                                         )
    # vis result gallery
    gr.HTML("""
    <h1 align="center">Result Gallery</h1>
    """)
    final_gallery = gr.Gallery(
        label="最终生成图",
        show_label=False,
        elem_classes="final_gallery",columns=[4], rows=[2]
    )

    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)