Add SearchButton and Links

app.py

@@ -61,16 +61,20 @@ class App(GrBlocks):
             }
         }
 
-        input = InputTextbox(
+        input_search = InputSearch(
             model_dir, label_info_dics, cuisine_df_path, unify_dics_path,
             cuisine_infos_num
         )
         input_samples = InputSamplesDataset()
         extracted_words = ExtractedWordsHighlightedText(label_info_dics)
+        links = Links()
         cuisine_infos = CuisineInfos(cuisine_infos_num)
+        
+        input = input_search.children['input']
+        search_btn = input_search.children['search_btn']
 
         input_submitted = GrListener(
-            trigger=input.comp.submit,
+            trigger=[input.comp.submit, search_btn.comp.click],
             fn=input.submitted,
             inputs=input,
             outputs=[extracted_words, cuisine_infos],
@@ -84,12 +88,97 @@ class App(GrBlocks):
             thens=input_submitted
         )
 
-        children = [input, input_samples, extracted_words, cuisine_infos]
+        children = [
+            input_search, input_samples, extracted_words, links, cuisine_infos
+        ]
         listeners = [input_submitted, input_samples_selected]
 
         return children, listeners
 
 
+class InputSearch(GrLayout):
+    """
+    入力欄と検索ボタンのクラス
+
+    Attributes
+    ----------
+    layout_type : gr.Row
+        GradioのRow
+    """
+    layout_type = gr.Row
+    
+    def __init__(
+            self, 
+            model_dir: str,
+            label_info_dics: Dict[str, str | List[str]],
+            cuisine_df_path: str,
+            unify_dics_path: str,
+            cuisine_infos_num: int
+    ):
+        """
+        コンストラクタ
+
+        Parameters
+        ----------
+        model_dir : str
+            ファインチューニング済みモデルが保存されているディレクトリ
+        label_info_dics : Dict[str, str  |  List[str]]
+            固有表現のラベルとラベルに対する各種設定情報の辞書
+        cuisine_df_path : str
+            料理のデータフレームが保存されているパス
+        unify_dics_path : str
+            表記ゆれ統一用辞書が保存されているパス
+        cuisine_infos_num : int
+            表示する料理検索結果の最大数
+        """
+        super().__init__(
+            model_dir,
+            label_info_dics,
+            cuisine_df_path,
+            unify_dics_path,
+            cuisine_infos_num
+        )
+
+    def _create(
+            self, 
+            model_dir: str,
+            label_info_dics: Dict[str, str | List[str]],
+            cuisine_df_path: str,
+            unify_dics_path: str,
+            cuisine_infos_num: int
+    ) -> Dict[str, InputTextbox | SearchButton]:
+        """
+        子要素の作成
+
+        Parameters
+        ----------
+        model_dir : str
+            ファインチューニング済みモデルが保存されているディレクトリ
+        label_info_dics : Dict[str, str  |  List[str]]
+            固有表現のラベルとラベルに対する各種設定情報の辞書
+        cuisine_df_path : str
+            料理のデータフレームが保存されているパス
+        unify_dics_path : str
+            表記ゆれ統一用辞書が保存されているパス
+        cuisine_infos_num : int
+            表示する料理検索結果の最大数
+
+        Returns
+        -------
+        Dict[str, InputTextbox | SearchButton]
+            入力欄と検索ボタン
+        """
+        input = InputTextbox(
+            model_dir, label_info_dics, cuisine_df_path, unify_dics_path,
+            cuisine_infos_num
+        )
+        search_btn = SearchButton()
+
+        children = {'input': input, 'search_btn': search_btn}
+
+        return children
+
+
 class InputTextbox(GrComponent):
     """
     入力欄のクラス
@@ -149,7 +238,7 @@ class InputTextbox(GrComponent):
         """
         label = self._create_label()
         placeholder = 'どんな料理をお探しでしょうか？'
-        comp = gr.Textbox(placeholder=placeholder, label=label)
+        comp = gr.Textbox(placeholder=placeholder, label=label, scale=9)
 
         return comp
 
@@ -198,6 +287,24 @@ class InputTextbox(GrComponent):
         return [pos_tokens] + cuisine_infos
 
 
+class SearchButton(GrComponent):
+    """
+    検索ボタンのクラス
+    """
+    def _create(self) -> gr.Button:
+        """
+        コンポーネントの作成
+
+        Returns
+        -------
+        gr.Button
+            検索ボタンのコンポーネント
+        """
+        comp = gr.Button(value='🔍', scale=1)
+
+        return comp
+
+
 class InputSamplesDataset(GrComponent):
     """
     入力例のクラス
@@ -291,6 +398,39 @@ class ExtractedWordsHighlightedText(GrComponent):
         return comp
 
 
+class Links(GrComponent):
+    """
+    外部リンクのクラス
+    """
+    def _create(self) -> gr.HTML:
+        """
+        コンポーネントの作成
+
+        Returns
+        -------
+        gr.HTML
+            外部リンクのコンポーネント
+        """
+        qiita_link = 'https://qiita.com/wolf4032/items/9dd7423c706fa86bf005'
+        qiita = 'アプリに関する情報（Qiita）'
+        github_link = 'https://github.com/wolf4032/nlp-token-classification/tree/main'
+        github = 'GitHub'
+
+        value = f"""
+            <div style="display: flex; justify-content: center; gap: 20px;">
+                <div style="display: inline-block;">
+                    <a href={qiita_link} target="_blank">{qiita}</a>
+                </div>
+                <div style="display: inline-block;">
+                    <a href={github_link} target="_blank">{github}</a>
+                </div>
+            </div>
+        """
+        comp = gr.HTML(value=value)
+
+        return comp
+
+
 class CuisineInfos(GrLayout):
     """
     全検索結果のクラス
@@ -663,7 +803,6 @@ class CuisineSearcher:
         ----------
         label_info_dics : Dict[str, str  |  List[str]]
             固有表現のラベルとラベルに対する各種設定情報の辞書
-
         Returns
         -------
         Dict[str, List[str]]