import gradio as gr
from functions import random_plot, add_message, chat_mem, print_like_dislike

fig = random_plot()

# Membuat antarmuka Gradio
with gr.Blocks(fill_height=True, css="footer {visibility: hidden}") as demo:
    gr.HTML("<div style='text-align: center;'><h2>Chat bot Nopiyar.my.id</h2></div>")  # Menambahkan judul di sini dengan CSS untuk memposisikan di tengah
    chatbot = gr.Chatbot(
        label="NPR",
        elem_id="chatbot",
        bubble_full_width=False,
        scale=1,
        avatar_images=(None, "https://iili.io/d5tk44a.md.png"),
        placeholder="Mulai percakapan dengan memasukkan pesan pada input dibawah ini.",
        render_markdown=True,
        sanitize_html=True,
        show_copy_button=True,
        likeable=True
    )
    
    chat_input = gr.Textbox(interactive=True, placeholder="Masukkan pesan...", show_label=False)
    token_slider = gr.Slider(128, 2048, value=512, step=128, label="Semakin tinggi Token(2048) semakin lengkap jawaban dan lama prosesnya")

    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
    bot_msg = chat_msg.then(chat_mem, inputs=[chat_input, chatbot, token_slider], outputs=[chat_input, chatbot], api_name="bot_response")
    bot_msg.then(lambda: gr.Textbox(interactive=True), None, [chat_input])

    chatbot.like(print_like_dislike, None, None)

demo.launch()