Update app-backup1.py

app-backup1.py

@@ -131,20 +131,19 @@ with gr.Blocks(css_paths="app.css") as demo:
         except Exception as e:
             print(f"Error details: {str(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"""
                                     <div class="left_header">
                                      <img src="data:image/gif;base64,{get_image_base64('mouse.gif')}" width="360px" />
-                                     <h1 style="font-size: 20px;">AI 코딩 코파일럿: MOUSE(WEB)</h2>
+                                     <h1 style="font-size: 18px;">고양이도 발로 코딩하는 'MOUSE-I'</h2>
+                                     <h1 style="font-size: 10px;">입력없이 'Send' 버튼 클릭시 랜덤한 예제 코드 생성. 생성된 코드만 프롬프트에 붙여넣고 'Code 실행' 버튼 클릭시 화면에 즉시 서비스가 실행. 문의: [email protected] </h2> 
                                     </div>
                                      """)
                         input = antd.InputTextarea(
@@ -153,28 +152,44 @@ with gr.Blocks(css_paths="app.css") as demo:
                             placeholder=random.choice(DEMO_LIST)['description']
                         )
 
-                        btn = antd.Button("send", type="primary", size="large")
-                        clear_btn = antd.Button("clear history", type="default", size="large")
+                        # 버튼들을 가로로 배치하기 위한 Flex 컨테이너
+                        with antd.Flex(gap="small", justify="space-between"):
+                            btn = antd.Button("Send", type="primary", size="large")
+                            execute_btn = antd.Button("Code 실행", type="default", size="large")
+                            clear_btn = antd.Button("Clear", type="default", size="large")
+
+                        # Examples 버튼들 추가
+                        antd.Divider("Try these examples")
 
-        # Examples 버튼 추가
-                        antd.Divider("Try this example")
+                        # 두 번째 예제 버튼
+                        example_btn0 = antd.Button(
+                            "MBTI 진단 서비스", 
+                            type="default",
+                            block=True,
+                            size="large"
+                        )
+                        example_btn0.click(
+                            fn=lambda: "MBTI 진단을 위해 15개의 질문과 객관식 답변을 통해 MBTI 진단 결과 및 해당 성격에 대한 상세한 결과를 출력하라",
+                            inputs=[],
+                            outputs=[input]
+                        )
                         
-                        example_btn = antd.Button(
+                        # 첫 번째 예제 버튼
+                        example_btn1 = antd.Button(
                             "다이나믹 차트 대쉬보드", 
                             type="default",
-                            block=True,  # 전체 너비 사용
+                            block=True,
                             size="large"
                         )
-                        example_btn.click(
+                        example_btn1.click(
                             fn=lambda: "Create an interactive dashboard with Chart.js showing different types of charts (line, bar, pie) with smooth animations. Include buttons to switch between different data views.",
                             inputs=[],
                             outputs=[input]
                         )
 
-
-        # 두 번째 예제 버튼
+                        # 두 번째 예제 버튼
                         example_btn2 = antd.Button(
-                            "카드 기억 게임", 
+                            "[게임] 카드 기억력", 
                             type="default",
                             block=True,
                             size="large"
@@ -185,22 +200,55 @@ with gr.Blocks(css_paths="app.css") as demo:
                             outputs=[input]
                         )
 
-                    
-                    with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
-                        systemPromptInput = antd.InputTextarea(
-                            SystemPrompt, auto_size=True)
+                        # 두 번째 예제 버튼
+                        example_btn3 = antd.Button(
+                            "타로카드 운새", 
+                            type="default",
+                            block=True,
+                            size="large"
+                        )
+                        example_btn3.click(
+                            fn=lambda: "타로카드 운세를 점치는것을 생성하라. 아주 상세하고 전문적이면서 쉽고 길게 답변하라. 모든 답변과 설명은 한글로 하라",
+                            inputs=[],
+                            outputs=[input]
+                        )
 
+                       # 두 번째 예제 버튼
+                        example_btn4 = antd.Button(
+                            "[게임] 테트리스", 
+                            type="default",
+                            block=True,
+                            size="large"
+                        )
+                        example_btn4.click(
+                            fn=lambda: "Classic Tetris Game: Start과 ReStart 버튼과 기능 적용, Game Over(막대가 가장 상단까지 누적해서 쌓였을때), 막대가 한줄 가득 채워졌을때 한줄이 삭제, 떨어진 막대는 사라지지 않고 반드시 누적해서 쌓을것. 막대 우측/좌측/내리기(space)/막대의 자체 모양만 바꿈(up) 버튼 지원, 나머지는 Tetris 기본 규칙을 따름",
+                            inputs=[],
+                            outputs=[input]
+                        )                    
+
+                        example_btn5 = antd.Button(
+                            "텍스트로 음성 생성 및 조정", 
+                            type="default",
+                            block=True,
+                            size="large"
+                        )
+                        example_btn5.click(
+                            fn=lambda: "텍스트를 음성으로 변환하고, 음성 파라미터를 실시간으로 조정할 수 있는 인터페이스를 제공하세요.",
+                            inputs=[],
+                            outputs=[input]
+                        )                         
+                    
+                    # Drawer 컴포넌트들
                     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"):
                         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")
                             
@@ -213,12 +261,31 @@ with gr.Blocks(css_paths="app.css") as demo:
                             with antd.Tabs.Item(key="render"):
                                 sandbox = gr.HTML(elem_classes="html_content")
 
-            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])
+            # Code 실행 버튼 이벤트 핸들러
+            def execute_code(query: str):
+                if not query or query.strip() == '':
+                    return None, gr.update(active_key="empty")
+                
+                try:
+                    # HTML 코드 블록 확인
+                    if '```html' in query and '```' in query:
+                        # HTML 코드 블록 추출
+                        code = remove_code_block(query)
+                    else:
+                        # 입력된 텍스트를 그대로 코드로 사용
+                        code = query.strip()
+                    
+                    return send_to_sandbox(code), gr.update(active_key="render")
+                except Exception as e:
+                    print(f"Error executing code: {str(e)}")
+                    return None, gr.update(active_key="empty")
+
+            # 이벤트 핸들러들
+            execute_btn.click(
+                fn=execute_code,
+                inputs=[input],
+                outputs=[sandbox, state_tab]
+            )
 
             codeBtn.click(lambda: gr.update(open=True),
                           inputs=[], outputs=[code_drawer])