import json import gradio as gr from theme import Seafoam from utils.utils import ( get_content, get_player_partners, get_player_badges, get_player_achievement_logs_html, ) seafoam = Seafoam() def get_player_info(player_backend_user_id): with open("data.json", "r", encoding="utf-8") as file: player_info = json.load(file) return player_info[player_backend_user_id] # start of gradio interface with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo: player_info = gr.State(get_player_info("http://id.junyiacademy.org/d6317d299321450191dd5da599a48b3d")) with gr.Row(): with gr.Column( scale=1, ): pet_gallery = gr.Gallery( [ "medias/partner1.png", "medias/partner2.png", "medias/partner3.png", "medias/partner4.png", ] * 2, label="夥伴", preview=False, elem_id="pet_gallery", columns=30, height=200, ) pet_description = gr.Markdown("# 夥伴", elem_id="pet_avatar_description") badge_gallery = gr.Gallery( [ "medias/badge.png", "medias/badge2.png", "medias/badge3.png", "medias/badge4.png", ] * 2, label="徽章", preview=False, elem_id="badge_gallery", columns=30, height=200, ) badge_description = gr.Markdown("# 徽章", elem_id="badge_avatar_description") with gr.Column(scale=1, elem_id="player_avatar_container"): avatar = gr.Gallery( ["medias/avatar.png", "medias/avatar2.png"], preview=True, elem_id="player_avatar", ) avatar_description = gr.Markdown( "# 光束守護者", elem_id="player_avatar_description" ) with gr.Column(scale=1): description = gr.Markdown("# 冒險階段", elem_id="adventure_description") progress_bar_html = ( "
" + get_content("htmls/progress_bar.html") ) progress_bar = gr.HTML( progress_bar_html, ) stage_desc_html = ( "
" + get_content("htmls/stage_desc.html") ) stage_desc = gr.HTML( stage_desc_html, ) with gr.Row(): html = ( "
" + get_content("htmls/achievement_blank.html") ) f = gr.HTML(html, label="Achievement Log", elem_id="achievement_log") # handling player info with gr.Row(): player_backend_id = gr.Textbox( "http://id.junyiacademy.org/d6317d299321450191dd5da599a48b3d", visible=False ) player_info_query_btn = gr.Button("Query") # actions when player login #player_info_query_btn.click(get_player_info, player_backend_id, player_info) player_info_query_btn.click(get_player_partners, player_info, pet_gallery) player_info_query_btn.click(get_player_badges, player_info, badge_gallery) player_info_query_btn.click(get_player_achievement_logs_html, player_info, f) if __name__ == "__main__": demo.launch()