Update app.py

app.py

@@ -143,6 +143,7 @@ with gr.Blocks(css_paths="app.css") as demo:
         except Exception as e:
             raise ValueError(f'Error calling Claude API: {str(e)}')
 
+
     with ms.Application() as app:
         with antd.ConfigProvider():
             # 메인 컨텐츠를 위한 Row
@@ -165,18 +166,6 @@ with gr.Blocks(css_paths="app.css") as demo:
                         btn = antd.Button("send", type="primary", size="large")
                         clear_btn = antd.Button("clear history", type="default", size="large")
 
-                        # Examples 섹션을 여기로 이동
-                        antd.Divider("examples")
-                        with antd.Flex(vertical=True, gap="small"):
-                            for demo in DEMO_LIST:
-                                with antd.Card(hoverable=True) as demoCard:
-                                    antd.CardMeta(title=demo.get('title', 'Example'))
-                                demoCard.click(
-                                    fn=lambda x, d=demo: d['description'],
-                                    inputs=[gr.State(None)],
-                                    outputs=[input]
-                                )
-
                     # Modal과 Drawer 컴포넌트들
                     with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
                         systemPromptInput = antd.InputTextarea(
@@ -201,11 +190,22 @@ with gr.Blocks(css_paths="app.css") as demo:
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
                                 empty = antd.Empty(description="empty input", elem_classes="right_content")
-                            with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
-                            with antd.Tabs.Item(key="render"):
-                                sandbox = gr.HTML(elem_classes="html_content")
-
+                                with antd.Tabs.Item(key="loading"):
+                                    loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
+                                with antd.Tabs.Item(key="render"):
+                                    sandbox = gr.HTML(elem_classes="html_content")
+
+            # Examples 섹션을 별도의 Row로 추가 (전체 화면 하단)
+            with antd.Row(gutter=[0, 24], elem_classes="examples-section"):
+                with antd.Col(span=24):
+                    antd.Divider("examples")
+                    with antd.Row(gutter=[16, 16]):
+                        with ms.Each(DEMO_LIST):
+                            with antd.Col(span=8):  # 한 줄에 3개씩 (24/3 = 8)
+                                with antd.Card(hoverable=True, as_item="card") as demoCard:
+                                    antd.CardMeta()
+                                demoCard.click(demo_card_click, outputs=[input])
+                                
             # 버튼 이벤트 핸들러
             settingPromptBtn.click(lambda: gr.update(
                 open=True), inputs=[], outputs=[system_prompt_modal])
@@ -231,8 +231,6 @@ with gr.Blocks(css_paths="app.css") as demo:
             
             clear_btn.click(clear_history, inputs=[], outputs=[history])
 
+
 if __name__ == "__main__":
-    demo = gr.Blocks(css_paths="app.css")
-    with demo:
-        app
     demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)