Update app.py

app.py

@@ -143,11 +143,10 @@ 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], elem_classes="main-content") as layout:  # style 대신 elem_classes 사용
+            with antd.Row(gutter=[32, 12], elem_classes="main-content") as layout:
                 # 좌측 패널
                 with antd.Col(span=24, md=8):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
@@ -168,15 +167,16 @@ with gr.Blocks(css_paths="app.css") as demo:
 
                 # 우측 패널
                 with antd.Col(span=24, md=16):
+                    # Setting 버튼들을 우측 상단에 별도로 배치
+                    with antd.Row(justify="end", elem_classes="setting-buttons-row"):
+                        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")
+                    
+                    # 웹 출력 패널
                     with ms.Div(elem_classes="right_panel"):
-                        # 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"):
@@ -186,16 +186,16 @@ with gr.Blocks(css_paths="app.css") as demo:
                             with antd.Tabs.Item(key="render"):
                                 sandbox = gr.HTML(elem_classes="html_content")
 
-            # Examples 섹션을 별도의 컨테이너로 분리
-            with antd.Row(justify="center", elem_classes="examples-container"):
+            # Examples 섹션
+            with antd.Row(elem_classes="examples-section"):
                 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])
+                    with antd.Row():
+                        for idx, demo in enumerate(DEMO_LIST):
+                            with antd.Col(span=8):
+                                with antd.Card(hoverable=True) as demoCard:
+                                    antd.CardMeta(title=f"Example {idx + 1}")
+                                demoCard.click(lambda e, idx=idx: DEMO_LIST[idx]['description'], outputs=[input])
 
             # Modal과 Drawer 컴포넌트들
             with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
@@ -208,7 +208,6 @@ 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")
 
-
             # 버튼 이벤트 핸들러
             settingPromptBtn.click(lambda: gr.update(
                 open=True), inputs=[], outputs=[system_prompt_modal])
@@ -234,6 +233,5 @@ with gr.Blocks(css_paths="app.css") as demo:
             
             clear_btn.click(clear_history, inputs=[], outputs=[history])
 
-
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)