Update app-backup.py

app-backup.py

@@ -258,7 +258,7 @@ class Demo:
 
     async def generation_code(self, query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
         if not query or query.strip() == '':
-            query = random.choice(DEMO_LIST)['description']
+            query = get_random_placeholder()
         
         if _history is None:
             _history = []
@@ -281,8 +281,9 @@ class Demo:
         openai_messages.append({"role": "user", "content": query})
         
         try:
+            # 로딩 시작
             yield [
-                "Generating code...",
+                "",  # 빈 문자열로 변경 (코드 출력하지 않음)
                 _history,
                 None,
                 gr.update(active_key="loading"),
@@ -294,28 +295,28 @@ class Demo:
             try:
                 async for content in try_claude_api(system_message, claude_messages):
                     yield [
-                        content,
+                        "",  # 빈 문자열로 변경 (코드 출력하지 않음)
                         _history,
                         None,
                         gr.update(active_key="loading"),
                         gr.update(open=True)
                     ]
                     await asyncio.sleep(0)
-                collected_content = content
-                
+                    collected_content = content
+                    
             except Exception as claude_error:
                 print(f"Falling back to OpenAI API due to Claude error: {str(claude_error)}")
                 
                 async for content in try_openai_api(openai_messages):
                     yield [
-                        content,
+                        "",  # 빈 문자열로 변경 (코드 출력하지 않음)
                         _history,
                         None,
                         gr.update(active_key="loading"),
                         gr.update(open=True)
                     ]
                     await asyncio.sleep(0)
-                collected_content = content
+                    collected_content = content
 
             if collected_content:
                 _history = messages_to_history([
@@ -325,13 +326,13 @@ class Demo:
                     'content': collected_content
                 }])
         
-        # code_drawer를 닫도록 수정
+                # 최종 결과만 표시
                 yield [
                     collected_content,
                     _history,
                     send_to_sandbox(remove_code_block(collected_content)),
                     gr.update(active_key="render"),
-                    gr.update(open=False)  # code_drawer를 닫음
+                    gr.update(open=False)
                 ]
 
             else:
@@ -483,9 +484,7 @@ def create_main_interface():
 
     with demo:
         with gr.Tabs(elem_classes="main-tabs") as tabs:
-            # MOUSE 탭
             with gr.Tab("Visual AI Assistant", elem_id="mouse-tab", elem_classes="mouse-tab"):
-
                 history = gr.State([])
                 setting = gr.State({
                     "system": SystemPrompt,
@@ -493,9 +492,155 @@ def create_main_interface():
 
                 with ms.Application() as app:
                     with antd.ConfigProvider():
-                        # Drawer 컴포넌트들      
-                        with antd.Drawer(open=False, title="Thinking", placement="left", width="750px") as code_drawer:
-                            code_output = legacy.Markdown()
+                        # Drawer 컴포넌트들    
+                        with antd.Drawer(open=False, title="AI is Creating...", placement="left", width="750px") as code_drawer:
+                            gr.HTML("""
+                                <div class="thinking-container">
+                                    <style>
+                                        .thinking-container {
+                                            text-align: center;
+                                            padding: 20px;
+                                            background: #f8f9fa;
+                                            border-radius: 15px;
+                                            font-family: 'Arial', 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, #1890ff, #52c41a);
+                                            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;
+                                        }
+                                        
+                                        .tip-box:hover {
+                                            transform: translateY(-5px);
+                                            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+                                        }
+                                        
+                                        .status-text {
+                                            color: #1890ff;
+                                            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(24,144,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: #1890ff; 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)
+
+
+                
+                        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.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")