在 Gradio 裡面，常常需要使用 with 區塊來排版

將 Gradio App 重構為 Class
是個減少縮排的好方法

# 基本框架

class App:
    def __init__(self):
        self.__init_app()

    def __init_app(self):
        with gr.Blocks() as self.app:
            self.__init_layout()

    def __init_layout(self):
        with gr.Tabs(selected=0) as self.tabs:
            with gr.Tab(id=0, label="Setting"):
                self.__init_setting_tab()

            with gr.Tab(id=1, label="Quiz"):
                self.__init_quiz_tab()

            with gr.Tab(id=2, label="Record"):
                self.__init_record_tab()

    def __init_setting_tab(self):
        # ...

    def __init_quiz_tab(self):
        # ...

    def __init_record_tab(self):
        # ...

# 註冊事件

class App:
    def __init__(self):
        self.__init_app()

    def __init_app(self):
        with gr.Blocks() as self.app:
            self.__init_layout()
            self.__register_events()

    def __init_layout(self):
        # ...

    def __register_events(self):
        reset_outputs = [self.n_correct, self.n_total, self.txt_accuracy]
        reset_outputs += [self.txt_info, self.txt_records]
        reset_args = gr_args(self.reset, outputs=reset_outputs)

        start_inputs = [self.chk_kana, self.chk_seion, self.chk_dakuon]
        start_inputs += [self.chk_handakuon, self.chk_youon]
        start_outputs = [self.txt_test, self.st_queue, self.debug, self.tabs]
        start_args = gr_args(self.start_test, start_inputs, start_outputs)

        self.btn_start.click(**reset_args).then(**start_args)

    def reset(self):
        return 0, 0, "100.00%", None, None

    def start_test(self, kana, seion, dakuon, handakuon, yoon):
        # ...
        return char, char_list, char_list, gr.Tabs(selected=1)

HF Space 可以免費讓 Gradio App 在上面運作

先註冊一個 HF 帳號

新增一個 Space 專案

Space SDK 選 Gradio

建立好 Space 後，前往 Files 分頁

右上角的 Contribute 可以建立新檔案或上傳檔案

先上傳 kana-spell.json
再建立 app.py