Update app.py

app.py

@@ -492,86 +492,151 @@ def create_main_interface():
 
                 with ms.Application() as app:
                     with antd.ConfigProvider():
-                        # Drawer 컴포넌트들      
+                        # Drawer 컴포넌트들    
                         with antd.Drawer(open=False, title="AI is Creating...", placement="left", width="750px") as code_drawer:
                             gr.HTML("""
                                 <div class="thinking-container">
-                                    <div class="thinking-animation">
-                                        <lottie-player
-                                            src="https://assets2.lottiefiles.com/packages/lf20_szviypry.json"
-                                            background="transparent"
-                                            speed="1"
-                                            style="width: 300px; height: 300px;"
-                                            loop
-                                            autoplay>
-                                        </lottie-player>
-                                    </div>
-                                    
-                                    <div class="thinking-tips" id="thinkingTips">
-                                        <h3>Did you know?</h3>
-                                        <div class="tip-content"></div>
-                                    </div>
-                                    
                                     <style>
                                         .thinking-container {
                                             text-align: center;
                                             padding: 20px;
+                                            background: #f8f9fa;
+                                            border-radius: 15px;
                                             font-family: 'Arial', sans-serif;
                                         }
                                         
-                                        .thinking-animation {
-                                            margin-bottom: 30px;
+                                        .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;
                                         }
                                         
-                                        .thinking-tips {
-                                            background: #f5f5f5;
+                                        .tip-box {
+                                            background: white;
                                             padding: 20px;
                                             border-radius: 10px;
-                                            margin-top: 20px;
+                                            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+                                            margin: 20px 0;
+                                            transition: all 0.3s ease;
                                         }
                                         
-                                        .thinking-tips h3 {
+                                        .tip-box:hover {
+                                            transform: translateY(-5px);
+                                            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+                                        }
+                                        
+                                        .status-text {
                                             color: #1890ff;
-                                            margin-bottom: 15px;
+                                            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%); }
                                         }
                                         
-                                        .tip-content {
-                                            font-size: 16px;
-                                            line-height: 1.6;
-                                            color: #333;
+                                        @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>
                                     
-                                    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+                                    <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 can create interactive visualizations using Chart.js and D3.js! 📊",
-                                            "Our AI understands and implements modern design principles for better user experience. 🎨",
-                                            "Every visualization is responsive and works on all devices! 📱",
-                                            "We use advanced animations to make your data come alive! ✨",
-                                            "MOUSE-I can create beautiful presentations in multiple styles! 🎯",
-                                            "Your visualization is being crafted with attention to every detail! 🔍",
-                                            "We're adding interactive elements to make your content engaging! 🎮",
-                                            "MOUSE-I is optimizing the layout for the best visual experience! 🎪"
+                                            "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.querySelector('.tip-content');
+                                            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();
-                                        
-                                        // 3초마다 팁 업데이트
                                         setInterval(updateTip, 3000);
                                     </script>
                                 </div>
                             """)
-                            code_output = legacy.Markdown(visible=False)  # 코드 출력은 숨김 처리
+                            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")