Update app-backup1.py

app-backup1.py

@@ -143,9 +143,12 @@ 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
             with antd.Row(gutter=[32, 12]) as layout:
+                # 좌측 패널
                 with antd.Col(span=24, md=8):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
                         header = gr.HTML(f"""
@@ -163,13 +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")
 
-                        antd.Divider("examples")
-                        with antd.Flex(gap="small", wrap=True):
-                            with ms.Each(DEMO_LIST):
-                              with antd.Card(hoverable=True, as_item="card") as demoCard:
-                                antd.CardMeta()
-                              demoCard.click(demo_card_click, outputs=[input])
-
                     # Modal과 Drawer 컴포넌트들
                     with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
                         systemPromptInput = antd.InputTextarea(
@@ -181,9 +177,9 @@ with gr.Blocks(css_paths="app.css") as demo:
                     with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
                         history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
 
+                # 우측 패널
                 with antd.Col(span=24, md=16):
                     with ms.Div(elem_classes="right_panel"):
-                        # 우측 상단에 setting 버튼들 추가
                         with antd.Flex(gap="small", elem_classes="setting-buttons"):
                             settingPromptBtn = antd.Button(
                                 "⚙️ set system Prompt", type="default")
@@ -199,6 +195,17 @@ with gr.Blocks(css_paths="app.css") as demo:
                                 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])