Update app.py

app.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():
-            with antd.Row(gutter=[32, 12]) as layout:
+            # 메인 컨텐츠 영역
+            with antd.Row(gutter=[32, 12], style={"margin-bottom": "24px"}) as layout:
+                # 좌측 패널
                 with antd.Col(span=24, md=8):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
                         header = gr.HTML(f"""
@@ -163,41 +166,48 @@ 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(
-                            SystemPrompt, auto_size=True)
-
-                    with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
-                        code_output = legacy.Markdown()
-
-                    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")
-                            codeBtn = antd.Button("🧑‍💻 view code", type="default")
-                            historyBtn = antd.Button("📜 history", type="default")
-                            
+                        # Setting 버튼들을 우측 상단에 배치
+                        with antd.Row(justify="end", elem_classes="setting-buttons-container"):
+                            with antd.Space(size="small"):
+                                settingPromptBtn = antd.Button(
+                                    "⚙️ set system Prompt", type="default")
+                                codeBtn = antd.Button("🧑‍💻 view code", type="default")
+                                historyBtn = antd.Button("📜 history", type="default")
+                        
                         gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
                         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 섹션을 별도의 컨테이너로 분리
+            with antd.Row(justify="center", elem_classes="examples-container"):
+                with antd.Col(span=24):
+                    antd.Divider("examples")
+                    with antd.Row(gutter=[16, 16], justify="start"):
+                        with ms.Each(DEMO_LIST):
+                            with antd.Col(xs=24, sm=12, md=8):  # 반응형 그리드
+                                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(
+                    SystemPrompt, auto_size=True)
+
+            with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
+                code_output = legacy.Markdown()
+
+            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")
+
 
             # 버튼 이벤트 핸들러
             settingPromptBtn.click(lambda: gr.update(