Update app.py

app.py

@@ -638,7 +638,9 @@ def create_main_interface():
             print(f"Error executing code: {str(e)}")
             return None, gr.update(active_key="empty")
 
-    # CSS 파일 내용을 직접 적용
+
+
+# CSS 파일 내용을 직접 적용
     with open('app.css', 'r', encoding='utf-8') as f:
         custom_css = f.read()
 
@@ -676,111 +678,25 @@ def create_main_interface():
         line-height: 1.5;
     }
 
-        .empty-content {
-            padding: 40px !important;
-            background: #f8f9fa !important;
-            border-radius: 10px !important;
-            margin: 20px !important;
-        }    
-        
-        .container {
-            background: #f0f0f0;
-            min-height: 100vh;
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-        }
-        
-        .app-window {
-            background: white;
-            border-radius: 10px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            width: 100%;
-            max-width: 1400px;
-            overflow: hidden;
-        }
-        
-        .window-header {
-            background: #f0f0f0;
-            padding: 12px 16px;
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid #e0e0e0;
-        }
-        
-        .window-controls {
-            display: flex;
-            gap: 8px;
-        }
-        
-        .control {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-        
-        .control.close { background: #ff5f57; }
-        .control.minimize { background: #febc2e; }
-        .control.maximize { background: #28c840; }
-        
-        .window-title {
-            flex: 1;
-            text-align: center;
-            color: #333;
-            font-size: 14px;
-            font-weight: 500;
-        }
-        
-        .main-content {
-            display: flex;
-            height: calc(100vh - 100px);
-        }
-        
-        .left-panel {
-            width: 40%;
-            border-right: 1px solid #e0e0e0;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .right-panel {
-            width: 60%;
-            background: #fff;
-            position: relative;
-        }
-        
-        .input-area {
-            background: #f8f9fa;
-            border-radius: 10px;
-            padding: 20px;
-            margin-top: 20px;
-        }
-        
-        .button-group {
-            display: flex;
-            gap: 10px;
-            margin-top: 20px;
-        }
-        
-        .custom-button {
-            background: #007aff;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        
-        .custom-button:hover {
-            background: #0056b3;
-        }
-    """, theme=theme)
+    .empty-content {
+        padding: 40px !important;
+        background: #f8f9fa !important;
+        border-radius: 10px !important;
+        margin: 20px !important;
+    }    
+    
+    .container {
+        background: #f0f0f0;
+        min-height: 100vh;
+        padding: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+    """
 
+    demo = gr.Blocks(css=custom_css, theme=theme)
 
     with demo:
         with gr.Tabs(elem_classes="main-tabs") as tabs:
@@ -792,200 +708,37 @@ def create_main_interface():
                 #NEW - 검색 모드 상태 추가
                 search_mode = gr.State(False)
                 
-
-                
                 with ms.Application() as app:
                     with antd.ConfigProvider():
+                        #NEW - 모드 선택 라디오 버튼 추가
+                        with gr.Row():
+                            mode = gr.Radio(
+                                choices=["Generate", "Web Search"],
+                                label="Mode",
+                                value="Generate"
+                            )
 
                         with antd.Drawer(open=False, title="AI is Creating...", placement="left", width="750px") as code_drawer:
-                            gr.HTML("""
-                                <div class="thinking-container">
-                                    <style>
-                                        .custom-textarea {
-                                            background: #f8f9fa !important;
-                                            border: 1px solid #e0e0e0 !important;
-                                            border-radius: 10px !important;
-                                            padding: 15px !important;
-                                            min-height: 150px !important;
-                                            font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
-                                        }
-        
-                                        .custom-textarea:focus {
-                                            border-color: #007aff !important;
-                                            box-shadow: 0 0 0 2px rgba(0,122,255,0.2) !important;
-                                        }
-        
-                                        .thinking-container {
-                                            text-align: center;
-                                            padding: 20px;
-                                            background: #f8f9fa;
-                                            border-radius: 15px;
-                                            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-                                        }
-                                        
-                                        .progress-bar {
-                                            width: 100%;
-                                            height: 4px;
-                                            background: #e9ecef;
-                                            border-radius: 4px;
-                                            margin: 20px 0;
-                                            overflow: hidden;
-                                        }
-                                        
-                                        .progress-bar-inner {
-                                            width: 30%;
-                                            height: 100%;
-                                            background: linear-gradient(90deg, #007aff, #28c840);
-                                            animation: progress 2s ease-in-out infinite;
-                                        }
-                                        
-                                        .thinking-icon {
-                                            font-size: 48px;
-                                            margin: 20px 0;
-                                            animation: bounce 1s ease infinite;
-                                        }
-                                        
-                                        .tip-box {
-                                            background: white;
-                                            padding: 20px;
-                                            border-radius: 10px;
-                                            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-                                            margin: 20px 0;
-                                            transition: all 0.3s ease;
-                                        }
-                                        
-                                        .status-text {
-                                            color: #007aff;
-                                            font-size: 18px;
-                                            margin: 15px 0;
-                                            animation: fade 1.5s ease infinite;
-                                        }
-                                        
-                                        .icon-grid {
-                                            display: grid;
-                                            grid-template-columns: repeat(4, 1fr);
-                                            gap: 15px;
-                                            margin: 20px 0;
-                                        }
-                                        
-                                        .icon-item {
-                                            padding: 10px;
-                                            background: rgba(0,122,255,0.1);
-                                            border-radius: 8px;
-                                            animation: pulse 2s ease infinite;
-                                        }
-                                        
-                                        @keyframes progress {
-                                            0% { transform: translateX(-100%); }
-                                            100% { transform: translateX(400%); }
-                                        }
-                                        
-                                        @keyframes bounce {
-                                            0%, 100% { transform: translateY(0); }
-                                            50% { transform: translateY(-10px); }
-                                        }
-                                        
-                                        @keyframes fade {
-                                            0%, 100% { opacity: 1; }
-                                            50% { opacity: 0.6; }
-                                        }
-                                        
-                                        @keyframes pulse {
-                                            0% { transform: scale(1); }
-                                            50% { transform: scale(1.05); }
-                                            100% { transform: scale(1); }
-                                        }
-                                    </style>
-                                    
-                                    <div class="thinking-icon">🎨</div>
-                                    <div class="status-text">Creating Your Visualization...</div>
-                                    <div class="progress-bar">
-                                        <div class="progress-bar-inner"></div>
-                                    </div>
-                                    <div class="icon-grid">
-                                        <div class="icon-item">📊</div>
-                                        <div class="icon-item">🎯</div>
-                                        <div class="icon-item">💡</div>
-                                        <div class="icon-item">✨</div>
-                                    </div>
-                                    <div class="tip-box">
-                                        <h3 style="color: #007aff; margin-bottom: 10px;">Did You Know?</h3>
-                                        <div id="tip-content" style="font-size: 16px; line-height: 1.6;"></div>
-                                    </div>
-                                    
-                                    <script>
-                                        const tips = [
-                                            "MOUSE-I is creating responsive and interactive visualizations! 📊",
-                                            "We're applying modern design principles for the best user experience! 🎨",
-                                            "Your content will be optimized for all devices! 📱",
-                                            "Adding engaging animations to bring your data to life! ✨",
-                                            "Crafting a beautiful presentation just for you! 🎯",
-                                            "Implementing interactive elements for better engagement! 🎮",
-                                            "Optimizing colors and layout for visual appeal! 🎪",
-                                            "Creating smooth transitions and animations! 🌟"
-                                        ];
-                                        
-                                        function updateTip() {
-                                            const tipElement = document.getElementById('tip-content');
-                                            if (tipElement) {
-                                                const randomTip = tips[Math.floor(Math.random() * tips.length)];
-                                                tipElement.innerHTML = randomTip;
-                                                tipElement.style.opacity = 0;
-                                                setTimeout(() => {
-                                                    tipElement.style.transition = 'opacity 0.5s ease';
-                                                    tipElement.style.opacity = 1;
-                                                }, 100);
-                                            }
-                                        }
-                                        
-                                        updateTip();
-                                        setInterval(updateTip, 3000);
-                                    </script>
-                                </div>
-                            """)
+                            [이전 Drawer HTML 내용 유지]
                             code_output = legacy.Markdown(visible=False)
 
-
-# 메인 컨텐츠를 위한 Row
+                        # 메인 컨텐츠를 위한 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):
-                                    # macOS 스타일 윈도우 헤더
-                                    header = gr.HTML("""
-                                        <div class="window-frame">
-                                            <div class="window-header">
-                                                <div class="window-controls">
-                                                    <div class="control close"></div>
-                                                    <div class="control minimize"></div>
-                                                    <div class="control maximize"></div>
-                                                </div>
-                                                <div class="window-title">
-                                                    <div class="window-address">
-                                                        <div class="secure-icon">🔒</div>
-                                                        <div class="url-bar">https://VIDraft-mouse-chat.hf.space</div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="app-content">
-                                                <img src="data:image/gif;base64,{}" width="360px" />
-                                                <h1 class="app-title">MOUSE-Chat Visual AI</h1>
-                                                <p class="app-description">Creates visualized web pages from text input, and when you include keywords like "image:", "그림:", or "image:" in your input, it automatically generates AI images based on the description and incorporates them into the web page.
-Use the "Generate" button for basic creation, "Enhance" button for prompt improvement, "Share" button to deploy results to the web, and input like "image: a dog playing in the park" to create results containing both text and generated images.</p>
-                                            </div>
-                                        </div>
-                                    """.format(get_image_base64('mouse.gif')))
+                                    [이전 헤더 HTML 내용 유지]
 
                                     # 입력 영역
                                     input = antd.InputTextarea(
                                         size="large", 
                                         allow_clear=True,
                                         placeholder=get_random_placeholder(),
-                                        elem_classes="custom-textarea"  # style 대신 class 사용
-
+                                        elem_classes="custom-textarea"
                                     )
- 
-                                    # 버튼 그룹
+
+
+# 버튼 그룹
                                     with antd.Flex(gap="small", justify="flex-start"):
                                         btn = antd.Button(
                                             "Generate", 
@@ -1006,39 +759,11 @@ Use the "Generate" button for basic creation, "Enhance" button for prompt improv
                                             elem_classes="share-btn"
                                         )
 
-
                                     deploy_result = gr.HTML(
                                         label="Share Result",
                                         elem_classes="deploy-result"
                                     )
 
-                                    
-                # 버튼 이벤트 핸들러 수정
-                                    btn.click(
-                                        fn=lambda q, s, m: execute_search_and_generate(q, s) if m else demo_instance.generation_code(q, s),
-                                        inputs=[input, setting, search_mode],
-                                        outputs=[code_output, sandbox, state_tab, code_drawer]
-                                    ).then(
-                                        fn=update_placeholder,
-                                        inputs=[],
-                                        outputs=[input]
-                                    )
-
-                #NEW - 검색 모드 토글 버튼 추가
-                                    search_toggle = antd.Button(
-                                        "Toggle Search Mode",
-                                        type="default",
-                                        size="large",
-                                        elem_classes="search-toggle-btn"
-                                    )
-                            
-                                    search_toggle.click(
-                                        fn=lambda x: not x,
-                                        inputs=[search_mode],
-                                        outputs=[search_mode]
-                                    )
-
-                
                             # 우측 패널
                             with antd.Col(span=24, md=16):
                                 with ms.Div(elem_classes="right_panel"):
@@ -1061,9 +786,7 @@ Use the "Generate" button for basic creation, "Enhance" button for prompt improv
                                         with antd.Tabs.Item(key="empty"):
                                             empty = antd.Empty(
                                                 description="Enter your question to begin",
-
-                                                elem_classes="right_content empty-content"  # style 대신 class 사용
-
+                                                elem_classes="right_content empty-content"
                                             )
                                         
                                         with antd.Tabs.Item(key="loading"):
@@ -1076,11 +799,11 @@ Use the "Generate" button for basic creation, "Enhance" button for prompt improv
                                         
                                         with antd.Tabs.Item(key="render"):
                                             sandbox = gr.HTML(elem_classes="html_content")
-                            
 
+                        # 버튼 이벤트 핸들러
                         btn.click(
-                            demo_instance.generation_code,
-                            inputs=[input, setting],  # setting이 이제 정의됨
+                            fn=lambda q, s, m: execute_search_and_generate(q, s) if m else demo_instance.generation_code(q, s),
+                            inputs=[input, setting, search_mode],
                             outputs=[code_output, sandbox, state_tab, code_drawer]
                         ).then(
                             fn=update_placeholder,
@@ -1088,7 +811,6 @@ Use the "Generate" button for basic creation, "Enhance" button for prompt improv
                             outputs=[input]
                         )
 
-
                         boost_btn.click(
                             fn=handle_boost,
                             inputs=[input],
@@ -1121,6 +843,12 @@ Use the "Generate" button for basic creation, "Enhance" button for prompt improv
                 color: #28c840 !important;
             }
             
+            .search-toggle-btn {
+                border-radius: 8px !important;
+                border: 1px solid #4285f4 !important;
+                color: #4285f4 !important;
+            }
+            
             /* hover 효과 */
             .generate-btn:hover {
                 background: #0056b3 !important;
@@ -1133,56 +861,9 @@ Use the "Generate" button for basic creation, "Enhance" button for prompt improv
             .share-btn:hover {
                 background: rgba(40,200,64,0.1) !important;
             }
-
-            .app-content {
-                padding: 20px;
-                text-align: center;
-            }
-            
-            .app-title {
-                font-size: 24px;
-                color: #333;
-                margin: 20px 0 10px;
-                font-weight: 600;
-            }
-            
-            .app-description {
-                color: #666;
-                font-size: 14px;
-                margin-bottom: 30px;
-            }
-            
-            .deploy-result {
-                margin-top: 20px;
-                padding: 15px;
-                background: #f8f9fa;
-                border-radius: 8px;
-                font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-            }
-            
-            .deploy-result a {
-                color: #007aff;
-                text-decoration: none;
-                font-weight: 500;
-            }
-            
-            .deploy-result a:hover {
-                text-decoration: underline;
-            }
             
-            /* 반응형 디자인을 위한 미디어 쿼리 */
-            @media (max-width: 768px) {
-                .window-frame {
-                    border-radius: 0;
-                }
-                
-                .left-panel, .right-panel {
-                    width: 100%;
-                }
-                
-                .main-content {
-                    flex-direction: column;
-                }
+            .search-toggle-btn:hover {
+                background: rgba(66,133,244,0.1) !important;
             }
         </style>
     """)
@@ -1192,10 +873,10 @@ Use the "Generate" button for basic creation, "Enhance" button for prompt improv
 # 메인 실행 부분
 if __name__ == "__main__":
     try:
-        demo_instance = Demo()  # Demo 인스턴스 생성
-        demo = create_main_interface()  # 인터페이스 생성
+        demo_instance = Demo()
+        demo = create_main_interface()
         demo.queue(
-            default_concurrency_limit=20,  # concurrency_count 대신 default_concurrency_limit 사용
+            default_concurrency_limit=20,
             status_update_rate=10,
             api_open=False
         ).launch(
@@ -1206,4 +887,4 @@ if __name__ == "__main__":
         )
     except Exception as e:
         print(f"Initialization error: {e}")
-        raise
+        raise