今天來講一個比較特別的功能 -- 頁面跳轉

這邊指的跳轉，不是指重導向，而是分頁之間的切換

而這個功能會應用在投票系統上，意義是當使用者對於目前回覆覺得不錯，可以進一步進行編輯檢視，因此我們需要在目前既有的前端，再多新增一個分頁

為了達成該功能，我們需要一個元件用來管理所有頁面，這邊我選擇再所有的 Tab 的父節點新增一個 Tabs() 的元件，並且在原有的三個分頁中再新增一個 Tab 裡面則是存放 Dataframe 這個元件，用於顯示我們 csv 中的資料

utils.py 則是新增一個類別，專門拿來處理與 Dataframe 有關的作業，裡面的 get_dataframe() 則是使用 pandas 的套件來幫我們讀取 csv 中的資料並且顯示於前端的 dataframe 元件中

原本放在 chat 分頁的 chatbot.like 也要移到最下層，這樣才能存取 dataframe 的變數，用意是當點選 「喜歡這則回覆」 時能跳轉到其他分頁去預覽並且查看過往點讚過的對話(?

再來是修改的部分，這部分時做就稍微比較複雜，我偏好自己寫的方法，是否要套用取決於各位囉

• main.py

  首先在既有的 saved 介面底下再新增幾顆按鍵及文字輸入框

  with gr.Tab(label="saved", id="saved_tab"):
      with gr.Column():
          with gr.Row():
              dataframe = gr.Dataframe(
                  wrap=True, 
                  interactive=False,
                  value=lambda: Dataframe.get_dataframe()
              )
  
          with gr.Row():
              add_btn = gr.Button(value="新增一列", elem_classes="edit-csv-new-row-btn")
              del_btn = gr.Button(value="刪除選擇列", elem_classes="edit-csv-new-row-btn")
  
          with gr.Row():
              with gr.Row():
                  textbox = gr.TextArea(label="編輯框", value="", max_lines=10)
  
              with gr.Row(visible=False):
                  invisible_row = gr.Textbox(value="")
                  invisible_col = gr.Textbox(value="")
  
              with gr.Row():
                  with gr.Column():
                      save_btn = gr.Button(value="儲存")
  
      dataframe.select(Dataframe.onselect, outputs=[textbox, invisible_row, invisible_col])
      add_btn.click(
          Dataframe.add_row,
          outputs=[dataframe]
      )
      del_btn.click(
          Dataframe.del_row,
          inputs=[dataframe, invisible_row],
          outputs=[dataframe, textbox, invisible_row, invisible_col]
      )
      save_btn.click(
          Dataframe.save_row,
          inputs=[dataframe, textbox, invisible_row, invisible_col],
          outputs=[dataframe, textbox, invisible_row, invisible_col]
      )
  

• utils.py

  再加個幾個函式對應前端按鈕不同的行為，如新增一列或儲存等等功能

  class Dataframe:
      ...
      def onselect(evt: gr.SelectData):
          yield evt.value, evt.index[0], evt.index[1]
  
      def add_row():
          new_row_data = {
              "Q": f"新增問題"
          }
          gr_dataframe = pd.concat(
              [pd.DataFrame([new_row_data]), pd.read_csv("saved_answer.csv")], 
              ignore_index=True
          )
          gr_dataframe.to_csv("saved_answer.csv", index=False, encoding='utf-8-sig')
  
          yield gr.update(value=Dataframe.get_dataframe())
  
      def del_row(gr_dataframe: gr.DataFrame, select_row: str):
          df = pd.read_csv("saved_answer.csv")
          match_row = df[df["Q"] == gr_dataframe.iat[int(select_row), 0]].index[0]
          df = df.drop(match_row)
          df.to_csv("saved_answer.csv", index=False, encoding='utf-8-sig')
          yield gr.update(value=Dataframe.get_dataframe()), "", "", ""
  
      def save_row(gr_dataframe: gr.DataFrame, textbox: str, select_row: str, select_col: str):
          df = pd.read_csv("saved_answer.csv")
          matching_rows = df[df["Q"] == gr_dataframe.iat[int(select_row), 0]]
          row_index = matching_rows.index[0]
          df.iat[int(row_index), int(select_col)] = textbox
          df.to_csv("saved_answer.csv", index=False, encoding='utf-8-sig')
          yield gr.update(value=Dataframe.get_dataframe()), "", "", ""
  

其效果如下，在點擊 dataframe 元件內的元件後，底下的文字編輯框就會出現其文字內容，而我們可以進一步修改它的文字內容，在後續使用這個系統時，使用起來彈性更大，且可以透過「新增一列」的按鈕去擴大我們的資料庫去提升使用體驗