Update app-backup1.py

app-backup1.py

@@ -73,14 +73,76 @@ def demo_card_click(e: gr.EventData):
     return DEMO_CACHE[index]
 
 
-
-
 with gr.Blocks(css_paths="app.css") as demo:
     history = gr.State([])
     setting = gr.State({
         "system": SystemPrompt,
     })
 
+    def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
+        if query is None:
+            query = ''
+        if _history is None:
+            _history = []
+        
+        messages = history_to_messages(_history, _setting['system'])
+        system_message = messages[0]['content']
+        
+        claude_messages = [
+            {"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]} 
+            for msg in messages[1:] + [{'role': Role.USER, 'content': query}]
+        ]
+        
+        try:
+            # 중간 상태 표시
+            yield [
+                "Generating code...",  # code_output
+                _history,              # history
+                None,                  # sandbox
+                gr.update(active_key="loading"),  # state_tab
+                gr.update(open=True)   # code_drawer
+            ]
+
+            # 스트리밍 응답 사용
+            with client.messages.stream(
+                model="claude-3-5-sonnet-20241022",
+                max_tokens=7800,
+                system=system_message,
+                messages=claude_messages
+            ) as stream:
+                collected_content = ""
+                for chunk in stream:
+                    if chunk.type == "content_block_delta":
+                        delta = chunk.delta.text
+                        collected_content += delta
+                        
+                        yield [
+                            collected_content,  # code_output
+                            _history,          # history
+                            None,              # sandbox (아직 완성되지 않았으므로 None)
+                            gr.update(active_key="loading"),  # state_tab
+                            gr.update(open=True)  # code_drawer
+                        ]
+                
+                # 최종 결과 반환
+                _history = messages_to_history([
+                    {'role': Role.SYSTEM, 'content': system_message}
+                ] + claude_messages + [{
+                    'role': Role.ASSISTANT,
+                    'content': collected_content
+                }])
+                
+                yield [
+                    collected_content,  # code_output
+                    _history,          # history
+                    send_to_sandbox(remove_code_block(collected_content)),  # sandbox
+                    gr.update(active_key="render"),  # state_tab
+                    gr.update(open=True)  # code_drawer
+                ]
+            
+        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:
@@ -107,43 +169,27 @@ with gr.Blocks(css_paths="app.css") as demo:
                               with antd.Card(hoverable=True, as_item="card") as demoCard:
                                 antd.CardMeta()
                               demoCard.click(demo_card_click, outputs=[input])
-     
-                        antd.Divider("setting")
-
-                        with antd.Flex(gap="small", wrap=True):
-                            settingPromptBtn = antd.Button(
-                                "⚙️ set system Prompt", type="default")
-                            codeBtn = antd.Button("🧑‍💻 view code", type="default")
-                            historyBtn = antd.Button("📜 history", type="default")
 
+                    # Modal과 Drawer 컴포넌트들
                     with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
                         systemPromptInput = antd.InputTextarea(
                             SystemPrompt, auto_size=True)
 
-                    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])
-
                     with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
                         code_output = legacy.Markdown()
 
-                    codeBtn.click(lambda: gr.update(open=True),
-                                  inputs=[], outputs=[code_drawer])
-                    code_drawer.close(lambda: gr.update(
-                        open=False), inputs=[], outputs=[code_drawer])
-
                     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")
 
-                    historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
-                    history_drawer.close(lambda: gr.update(
-                        open=False), inputs=[], outputs=[history_drawer])
-
                 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")
+                            
                         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"):
@@ -153,69 +199,22 @@ with gr.Blocks(css_paths="app.css") as demo:
                                 with antd.Tabs.Item(key="render"):
                                     sandbox = gr.HTML(elem_classes="html_content")
 
-            def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-                if query is None:
-                    query = ''
-                if _history is None:
-                    _history = []
-                
-                messages = history_to_messages(_history, _setting['system'])
-                system_message = messages[0]['content']
-                
-                claude_messages = [
-                    {"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]} 
-                    for msg in messages[1:] + [{'role': Role.USER, 'content': query}]
-                ]
-                
-                try:
-                    # 중간 상태 표시
-                    yield [
-                        "Generating code...",  # code_output
-                        _history,              # history
-                        None,                  # sandbox
-                        gr.update(active_key="loading"),  # state_tab
-                        gr.update(open=True)   # code_drawer
-                    ]
-
-                    # 스트리밍 응답 사용
-                    with client.messages.stream(
-                        model="claude-3-5-sonnet-20241022",
-                        max_tokens=7800,
-                        system=system_message,
-                        messages=claude_messages
-                    ) as stream:
-                        collected_content = ""
-                        for chunk in stream:
-                            if chunk.type == "content_block_delta":
-                                delta = chunk.delta.text
-                                collected_content += delta
-                                
-                                yield [
-                                    collected_content,  # code_output
-                                    _history,          # history
-                                    None,              # sandbox (아직 완성되지 않았으므로 None)
-                                    gr.update(active_key="loading"),  # state_tab
-                                    gr.update(open=True)  # code_drawer
-                                ]
-                        
-                        # 최종 결과 반환
-                        _history = messages_to_history([
-                            {'role': Role.SYSTEM, 'content': system_message}
-                        ] + claude_messages + [{
-                            'role': Role.ASSISTANT,
-                            'content': collected_content
-                        }])
-                        
-                        yield [
-                            collected_content,  # code_output
-                            _history,          # history
-                            send_to_sandbox(remove_code_block(collected_content)),  # sandbox
-                            gr.update(active_key="render"),  # state_tab
-                            gr.update(open=True)  # code_drawer
-                        ]
-                    
-                except Exception as e:
-                    raise ValueError(f'Error calling Claude API: {str(e)}')
+            # 버튼 이벤트 핸들러
+            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(
                 generation_code,
@@ -225,5 +224,6 @@ 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)