Update app.py

app.py

@@ -615,13 +615,17 @@ def create_main_interface():
             Create a comprehensive visual response that incorporates relevant information from the search results.
             """
             
-            # 기존 generation_code 함수 호출
             return demo_instance.generation_code(enhanced_prompt, setting)
-            
         except Exception as e:
             print(f"Search error: {str(e)}")
-            # 검색 실패시 기본 generation_code로 폴백
-            return demo_instance.generation_code(query, setting)
+            return [
+                "",
+                None,
+                gr.update(active_key="error"),
+                gr.update(open=False)
+            ]
+
+
 
     def execute_code(query: str):
         if not query or query.strip() == '':
@@ -694,7 +698,25 @@ def create_main_interface():
         align-items: center;
         font-family: -apple-system, BlinkMacSystemFont, sans-serif;
     }
-    """
+    .mode-selector {
+        margin-bottom: 15px;
+        padding: 10px;
+        border-radius: 8px;
+        background: #f8f9fa;
+    }
+
+    .error-content {
+        padding: 20px;
+        background: #fff2f0;
+        border-radius: 8px;
+        border: 1px solid #ff4d4f;
+    }
+
+    .search-mode-active {
+        background-color: rgba(66,133,244,0.1);
+    }
+"""
+
 
     demo = gr.Blocks(css=custom_css, theme=theme)
 
@@ -715,26 +737,198 @@ def create_main_interface():
                             mode = gr.Radio(
                                 choices=["Generate", "Web Search"],
                                 label="Mode",
-                                value="Generate"
+                                value="Generate",
+                                elem_classes="mode-selector"
                             )
 
+  
+
                         with antd.Drawer(open=False, title="AI is Creating...", placement="left", width="750px") as code_drawer:
-                            [이전 Drawer HTML 내용 유지]
+                            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>
+                            """)
                             code_output = legacy.Markdown(visible=False)
+                        
+
 
                         # 메인 컨텐츠를 위한 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):
-                                    [이전 헤더 HTML 내용 유지]
+                                    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')))
 
                                     # 입력 영역
                                     input = antd.InputTextarea(
                                         size="large", 
                                         allow_clear=True,
                                         placeholder=get_random_placeholder(),
-                                        elem_classes="custom-textarea"
+                                        elem_classes="custom-textarea"  # style 대신 class 사용
+
                                     )
 
 
@@ -800,6 +994,24 @@ def create_main_interface():
                                         with antd.Tabs.Item(key="render"):
                                             sandbox = gr.HTML(elem_classes="html_content")
 
+
+                                        with antd.Tabs.Item(key="error"):
+                                            error = antd.Empty(
+                                            description="An error occurred. Please try again.",
+                                            elem_classes="right_content error-content"
+                                            )
+
+
+                        # 여기에 추가 (들여쓰기 맞춤)
+                        mode.change(
+                            fn=lambda x: x == "Web Search",
+                            inputs=[mode],
+                            outputs=[search_mode]
+                        )
+
+
+
+                                            
                         # 버튼 이벤트 핸들러
                         btn.click(
                             fn=lambda q, s, m: execute_search_and_generate(q, s) if m else demo_instance.generation_code(q, s),
@@ -811,6 +1023,8 @@ def create_main_interface():
                             outputs=[input]
                         )
 
+
+
                         boost_btn.click(
                             fn=handle_boost,
                             inputs=[input],