Update app.py

app.py

@@ -143,10 +143,11 @@ 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:
+            # 메인 컨텐츠를 위한 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):
@@ -165,109 +166,71 @@ 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")
 
+                    # 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):
-                    # Setting 버튼들을 우측 상단에 별도로 배치
-                    with antd.Row(justify="end", elem_classes="setting-buttons-row"):
-                        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"):
+                        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")
+                            
                         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(elem_classes="examples-section"):
+            # Examples 섹션을 별도의 Row로 추가 (전체 화면 하단)
+            with antd.Row(gutter=[0, 24], elem_classes="examples-section"):
                 with antd.Col(span=24):
                     antd.Divider("examples")
-                    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=demo.get('title', f'Example {idx + 1}'))
-                                demoCard.click(
-                                    fn=lambda x, i=idx: DEMO_LIST[i]['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(
-                    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.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(
-                fn=lambda: gr.update(open=True),
-                inputs=[],
-                outputs=[system_prompt_modal]
-            )
-
-            system_prompt_modal.ok(
-                fn=lambda x: ({"system": x}, gr.update(open=False)),
-                inputs=[systemPromptInput],
-                outputs=[setting, system_prompt_modal]
-            )
-
-            system_prompt_modal.cancel(
-                fn=lambda: gr.update(open=False),
-                inputs=[],
-                outputs=[system_prompt_modal]
-            )
-
-            codeBtn.click(
-                fn=lambda: gr.update(open=True),
-                inputs=[],
-                outputs=[code_drawer]
-            )
-
-            code_drawer.close(
-                fn=lambda: gr.update(open=False),
-                inputs=[],
-                outputs=[code_drawer]
-            )
-
-            historyBtn.click(
-                fn=history_render,
-                inputs=[history],
-                outputs=[history_drawer, history_output]
-            )
-
-            history_drawer.close(
-                fn=lambda: gr.update(open=False),
-                inputs=[],
-                outputs=[history_drawer]
-            )
+            settingPromptBtn.click(lambda: gr.update(
+                open=True), inputs=[], outputs=[system_prompt_modal])
+            system_prompt_modal.ok(lambda input: ({"system": input}, gr.update(
+                open=False)), inputs=[systemPromptInput], outputs=[setting, system_prompt_modal])
+            system_prompt_modal.cancel(lambda: gr.update(
+                open=False), outputs=[system_prompt_modal])
+
+            codeBtn.click(lambda: gr.update(open=True),
+                          inputs=[], outputs=[code_drawer])
+            code_drawer.close(lambda: gr.update(
+                open=False), inputs=[], outputs=[code_drawer])
+
+            historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
+            history_drawer.close(lambda: gr.update(
+                open=False), inputs=[], outputs=[history_drawer])
 
             btn.click(
-                fn=generation_code,
+                generation_code,
                 inputs=[input, setting, history],
                 outputs=[code_output, history, sandbox, state_tab, code_drawer]
             )
             
-            clear_btn.click(
-                fn=clear_history,
-                inputs=[],
-                outputs=[history]
-            )
+            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)
+    demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)