Update frontend.py

frontend.py

@@ -1,15 +1,89 @@
-from gradio import Blocks,Row,Group,Markdown,Textbox,Button,DataFrame as GRDataFrame
-from backend import Backend
-def launch_frontend(backend:Backend):
+from gradio import (
+    update,
+    Blocks,
+    Row,
+    Examples,
+    Group,
+    Markdown,
+    Textbox,
+    Button,
+    Tabs,
+    TabItem,
+    DataFrame as GRDataFrame,
+)
+from ambiguous_search_backends import AmbiguousSearchBackend
+from classic_search_backends import ClassicSearchBackend
+
+
+def launch_frontend(
+    ambiguous_search_backend: AmbiguousSearchBackend,
+    classic_search_backend: ClassicSearchBackend,
+):
+    def on_ambiguous_search_click(query: str):
+        result = ambiguous_search_backend.submit(query)
+        return GRDataFrame.update(value=result, visible=True)
+
+    def on_ambiguous_search_query_clear_click():
+        return Textbox.update(value="")
+
+    def on_classic_search_click(query: str):
+        result = classic_search_backend.submit(query)
+        return GRDataFrame.update(value=result, visible=True)
+
     with Blocks() as frontend:
-        Markdown("""
-        自然言語処理モデル"Sentence BERT"を使って、ドラえもんのひみつ道具をあいまい検索。
-        自分の言葉でひみつ道具を説明してください。
-        """)
-        with Group():
-            query_textbox = Textbox(label="ひみつ道具の説明",max_lines=1)
-            submit_button = Button("検索")
-        result_table = GRDataFrame(label="検索結果")
-
-        submit_button.click(backend.on_submit_button_press,inputs=query_textbox,outputs=result_table)
-    frontend.launch()
+        Markdown("## Himitsudogu Search")
+        with Tabs():
+            with TabItem("あいまい検索"):
+                Markdown(
+                    """
+                自然言語処理モデル"Sentence BERT"を使って、ドラえもんのひみつ道具をあいまい検索。
+                """
+                )
+                query_textbox = Textbox(
+                    label="自分の言葉でひみつ道具を説明してください", max_lines=1
+                )
+                with Row():
+                    submit_button = Button("検索", variant="primary")
+                    clear_button = Button("クリア")
+                result_table = GRDataFrame(visible=False)
+                Examples(
+                    examples=[
+                        "ふりかけると水を色々な性質にできる",
+                        "小さいカメラが飛ぶ",
+                        "壁を通り抜けられるようにする輪",
+                        "地図をいじって実際の町の建物などの位置を変える",
+                        "歌声を綺麗にする",
+                    ],
+                    inputs=query_textbox,
+                )
+
+                submit_button.click(
+                    on_ambiguous_search_click,
+                    inputs=query_textbox,
+                    outputs=result_table,
+                )
+                clear_button.click(
+                    on_ambiguous_search_query_clear_click,
+                    inputs=None,
+                    outputs=query_textbox,
+                )
+
+            with TabItem("古典検索"):
+                Markdown(
+                    f"""
+                キーワードから検索。
+                検索可能なひみつ道具は全{classic_search_backend.get_num_items()}種類。
+                """
+                )
+                query_textbox = Textbox(label="キーワード", max_lines=1)
+                with Row():
+                    submit_button = Button("検索", variant="primary")
+                result_table = GRDataFrame(visible=False)
+
+                submit_button.click(
+                    on_classic_search_click,
+                    inputs=query_textbox,
+                    outputs=result_table,
+                )
+
+    frontend.launch()