import json import gradio as gr from theme import Seafoam from utils.utils import ( get_content, get_player_partners, get_player_badges, get_player_adventure_logs_html, get_player_achievements, get_current_story, get_player_nickname, ) 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() with gr.Row(): with gr.Column( scale=1, ): pet_description = gr.Markdown("# 夥伴", elem_id="pet_avatar_description") pet_gallery = gr.Gallery( [], label="夥伴", preview=False, elem_id="pet_gallery", columns=30, height=200, ) badge_description = gr.Markdown("# 徽章", elem_id="badge_avatar_description") badge_gallery = gr.Gallery( [], label="徽章", preview=False, elem_id="badge_gallery", columns=30, height=200, ) with gr.Column(scale=1, elem_id="player_avatar_container"): avatar = gr.Image( "avatar/blank_avatar.png", elem_id="player_avatar", ) avatar_description = gr.Markdown( "# 光束守護者", elem_id="player_avatar_description" ) with gr.Column(scale=1): with gr.Column(elem_id="adventure_container"): adventure_description = gr.Markdown( "# 冒險階段", elem_id="adventure_description" ) adventure = gr.Slider( value=0, show_label=False, interactive=False, elem_id="adventure_slider", info="", ) achievements_description = gr.Markdown( "# 達成成就", elem_id="achievements_description" ) achievements = gr.HighlightedText( value=[], elem_classes="achievements", color_map={ "完成": "green", "未完成": "red", }, ) with gr.Row(): html = ( "
" + get_content("htmls/adventure_blank.html") ) adventure_log = gr.HTML(html, label="Adventure Log", elem_id="adventure_log") # handling player info with gr.Row(): player_backend_id = gr.Textbox("", elem_id="player_backend_id", visible=False) player_info_query_btn = gr.Button( "Query", elem_id="trigger_button", visible=False ) # actions when player login player_info_query_btn.click(get_player_info, player_backend_id, player_info).then( player_info_query_btn.click(get_player_partners, player_info, pet_gallery) ).then( player_info_query_btn.click(get_player_badges, player_info, badge_gallery) ).then( player_info_query_btn.click( get_player_adventure_logs_html, player_info, adventure_log ) ).then( player_info_query_btn.click(get_player_achievements, player_info, achievements) ).then( player_info_query_btn.click(get_current_story, None, adventure) ) if __name__ == "__main__": demo.launch()