Spaces:

kdub307
/

computer-use

Running

App Files Files Community

kdub307 commited on Jun 22, 2025

Commit

3aa248e

verified ·

1 Parent(s): c080a1b

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +614 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Computer Use
-emoji: 🏆
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: computer-use
+emoji: 🐳
+colorFrom: blue
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,614 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Ecosystem Sandbox</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'desktop-blue': '#0f172a',
+                        'taskbar-gray': '#1e293b',
+                        'app-blue': '#1d4ed8',
+                        'app-light': '#3b82f6',
+                        'ai-purple': '#7e22ce'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        * {
+            font-family: 'Inter', sans-serif;
+            user-select: none;
+        }
+        body {
+            overflow: hidden;
+            background: linear-gradient(135deg, #0f172a, #1e293b);
+        }
+        .desktop-icon {
+            transition: all 0.2s ease;
+        }
+        .desktop-icon:hover {
+            transform: scale(1.05);
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .window {
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+            border-radius: 8px;
+            overflow: hidden;
+            resize: both;
+            min-width: 400px;
+            min-height: 300px;
+        }
+        .window-header {
+            cursor: move;
+        }
+        .taskbar-app {
+            transition: all 0.2s ease;
+        }
+        .taskbar-app.active {
+            border-bottom: 2px solid #3b82f6;
+        }
+        .ai-message {
+            animation: fadeIn 0.3s ease;
+        }
+        .typing-indicator {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #94a3b8;
+            margin-right: 4px;
+            animation: bounce 1.5s infinite;
+        }
+        .typing-indicator:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .grid-bg {
+            background-image:
+                linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .app-icon {
+            transition: all 0.2s ease;
+        }
+        .app-icon:hover {
+            transform: scale(1.1);
+            filter: brightness(1.2);
+        }
+        .notification {
+            animation: slideIn 0.3s forwards, fadeOut 0.3s forwards 2.7s;
+        }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes fadeOut {
+            from { opacity: 1; }
+            to { opacity: 0; }
+        }
+    </style>
+</head>
+<body class="h-screen grid-bg flex flex-col">
+    <!-- Desktop Icons -->
+    <div class="flex-1 relative p-4">
+        <div class="absolute top-4 left-4 flex flex-col items-center w-20 text-center text-white desktop-icon" onclick="openApp('ai-assistant')">
+            <div class="bg-ai-purple w-14 h-14 rounded-xl flex items-center justify-center mb-1">
+                <i class="fas fa-robot text-2xl"></i>
+            </div>
+            <span class="text-xs">AI Assistant</span>
+        </div>
+        <div class="absolute top-4 left-28 flex flex-col items-center w-20 text-center text-white desktop-icon">
+            <div class="bg-green-600 w-14 h-14 rounded-xl flex items-center justify-center mb-1">
+                <i class="fas fa-tasks text-2xl"></i>
+            </div>
+            <span class="text-xs">Task Manager</span>
+        </div>
+        <div class="absolute top-28 left-4 flex flex-col items-center w-20 text-center text-white desktop-icon" onclick="openApp('documents')">
+            <div class="bg-yellow-500 w-14 h-14 rounded-xl flex items-center justify-center mb-1">
+                <i class="fas fa-file-alt text-2xl"></i>
+            </div>
+            <span class="text-xs">Documents</span>
+        </div>
+        <div class="absolute top-28 left-28 flex flex-col items-center w-20 text-center text-white desktop-icon">
+            <div class="bg-red-500 w-14 h-14 rounded-xl flex items-center justify-center mb-1">
+                <i class="fas fa-cog text-2xl"></i>
+            </div>
+            <span class="text-xs">Settings</span>
+        </div>
+    </div>
+    <!-- Taskbar -->
+    <div class="h-12 bg-taskbar-gray bg-opacity-90 backdrop-blur-sm flex items-center px-3 border-t border-gray-700">
+        <div class="mr-4">
+            <button class="bg-app-blue w-8 h-8 rounded flex items-center justify-center text-white">
+                <i class="fab fa-windows"></i>
+            </button>
+        </div>
+        <div class="flex-1 flex items-center h-full">
+            <div class="taskbar-app active mr-2 px-3 h-full flex items-center text-white text-sm rounded cursor-pointer" onclick="focusApp('ai-assistant')">
+                <i class="fas fa-robot mr-2"></i>
+                <span>AI Assistant</span>
+            </div>
+            <div class="taskbar-app mr-2 px-3 h-full flex items-center text-white text-sm rounded cursor-pointer" onclick="focusApp('documents')">
+                <i class="fas fa-folder mr-2"></i>
+                <span>Documents</span>
+            </div>
+        </div>
+        <div class="flex items-center">
+            <div class="text-white text-xs mr-4">
+                <i class="fas fa-wifi mr-2"></i>
+                <i class="fas fa-volume-up mr-2"></i>
+                <span id="clock">12:45 PM</span>
+            </div>
+            <div class="w-px h-6 bg-gray-600 mx-2"></div>
+            <div class="text-gray-300">
+                <div class="relative">
+                    <button class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
+                        <i class="fas fa-user"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- AI Assistant Window -->
+    <div id="ai-assistant" class="window absolute top-1/4 left-1/4 w-2/5 h-2/3 bg-gray-900 border border-gray-700 flex flex-col hidden">
+        <div class="window-header bg-gray-800 h-10 flex items-center justify-between px-3 border-b border-gray-700">
+            <div class="flex items-center">
+                <div class="bg-ai-purple w-6 h-6 rounded flex items-center justify-center mr-2">
+                    <i class="fas fa-robot text-xs text-white"></i>
+                </div>
+                <span class="text-white text-sm font-medium">AI Assistant</span>
+            </div>
+            <div class="flex">
+                <button class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-gray-700 rounded" onclick="minimizeApp('ai-assistant')">
+                    <i class="fas fa-window-minimize"></i>
+                </button>
+                <button class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-gray-700 rounded" onclick="maximizeApp('ai-assistant')">
+                    <i class="fas fa-window-maximize"></i>
+                </button>
+                <button class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-red-500 hover:text-white rounded" onclick="closeApp('ai-assistant')">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+        <div class="flex-1 flex flex-col">
+            <div class="p-4 bg-gray-800 border-b border-gray-700">
+                <div class="flex">
+                    <button class="px-3 py-1 bg-app-blue text-white rounded-l text-sm">Assistant</button>
+                    <button class="px-3 py-1 bg-gray-700 text-gray-300 rounded-r text-sm">Tools</button>
+                </div>
+            </div>
+            <div id="chat-container" class="flex-1 overflow-y-auto p-4 bg-gray-850">
+                <div class="ai-message mb-4 flex">
+                    <div class="w-8 h-8 bg-ai-purple rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-robot text-white"></i>
+                    </div>
+                    <div class="flex-1">
+                        <div class="bg-gray-800 rounded-lg p-3 text-gray-200">
+                            <p>Hello! I'm your AI assistant. How can I help you today? Here are some things I can do:</p>
+                            <ul class="mt-2 ml-4 list-disc">
+                                <li>Complete tasks and automate workflows</li>
+                                <li>Analyze and summarize documents</li>
+                                <li>Generate reports and content</li>
+                                <li>Answer questions and provide insights</li>
+                            </ul>
+                        </div>
+                        <div class="mt-2 text-xs text-gray-500">Just now</div>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4 border-t border-gray-700 bg-gray-800">
+                <div class="flex">
+                    <div class="flex-1 mr-3">
+                        <input
+                            type="text"
+                            id="user-input"
+                            class="w-full bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-app-light"
+                            placeholder="Ask AI to complete a task..."
+                            onkeypress="if(event.key === 'Enter') sendMessage()"
+                        >
+                    </div>
+                    <button
+                        id="send-btn"
+                        class="bg-app-blue hover:bg-app-light text-white px-4 py-2 rounded-lg flex items-center transition"
+                        onclick="sendMessage()"
+                    >
+                        <i class="fas fa-paper-plane mr-2"></i> Send
+                    </button>
+                </div>
+                <div class="mt-2 flex flex-wrap">
+                    <span class="text-xs text-gray-400 mr-3">Try:</span>
+                    <button class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded mr-2 mb-1 hover:bg-gray-600" onclick="quickPrompt('Summarize my latest project documents')">Summarize documents</button>
+                    <button class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded mr-2 mb-1 hover:bg-gray-600" onclick="quickPrompt('Generate a monthly report')">Generate report</button>
+                    <button class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded mr-2 mb-1 hover:bg-gray-600" onclick="quickPrompt('Analyze sales data from last quarter')">Analyze data</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Documents Window -->
+    <div id="documents" class="window absolute top-1/4 left-1/3 w-1/3 h-2/3 bg-gray-900 border border-gray-700 flex flex-col hidden">
+        <div class="window-header bg-gray-800 h-10 flex items-center justify-between px-3 border-b border-gray-700">
+            <div class="flex items-center">
+                <div class="bg-yellow-500 w-6 h-6 rounded flex items-center justify-center mr-2">
+                    <i class="fas fa-file-alt text-xs text-white"></i>
+                </div>
+                <span class="text-white text-sm font-medium">Documents</span>
+            </div>
+            <div class="flex">
+                <button class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-gray-700 rounded" onclick="minimizeApp('documents')">
+                    <i class="fas fa-window-minimize"></i>
+                </button>
+                <button class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-gray-700 rounded" onclick="maximizeApp('documents')">
+                    <i class="fas fa-window-maximize"></i>
+                </button>
+                <button class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-red-500 hover:text-white rounded" onclick="closeApp('documents')">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto p-4 bg-gray-850">
+            <div class="mb-4">
+                <h3 class="text-white font-medium mb-2">Recent Documents</h3>
+                <div class="bg-gray-800 rounded-lg p-3 text-gray-200 mb-2 flex items-center cursor-pointer hover:bg-gray-750" onclick="aiProcessDocument('Project_Report.pdf')">
+                    <i class="fas fa-file-pdf text-red-400 mr-3"></i>
+                    <span>Project_Report.pdf</span>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-3 text-gray-200 mb-2 flex items-center cursor-pointer hover:bg-gray-750" onclick="aiProcessDocument('Sales_Data_Q3.xlsx')">
+                    <i class="fas fa-file-excel text-green-400 mr-3"></i>
+                    <span>Sales_Data_Q3.xlsx</span>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-3 text-gray-200 mb-2 flex items-center cursor-pointer hover:bg-gray-750" onclick="aiProcessDocument('Meeting_Notes.docx')">
+                    <i class="fas fa-file-word text-blue-400 mr-3"></i>
+                    <span>Meeting_Notes.docx</span>
+                </div>
+            </div>
+            <div class="mb-4">
+                <h3 class="text-white font-medium mb-2">AI Document Actions</h3>
+                <button class="w-full bg-ai-purple hover:bg-purple-700 text-white px-4 py-2 rounded-lg mb-2 flex items-center justify-center" onclick="quickPrompt('Summarize all documents')">
+                    <i class="fas fa-robot mr-2"></i> Summarize Documents
+                </button>
+                <button class="w-full bg-ai-purple hover:bg-purple-700 text-white px-4 py-2 rounded-lg mb-2 flex items-center justify-center" onclick="quickPrompt('Extract key data points from all documents')">
+                    <i class="fas fa-database mr-2"></i> Extract Data
+                </button>
+                <button class="w-full bg-ai-purple hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center justify-center" onclick="quickPrompt('Generate report combining all documents')">
+                    <i class="fas fa-file-contract mr-2"></i> Generate Combined Report
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Notification -->
+    <div id="notification" class="fixed top-4 right-4 w-80 bg-gray-800 border border-gray-700 rounded-lg shadow-lg p-4 hidden">
+        <div class="flex items-start">
+            <div class="mr-3 mt-1 text-ai-purple">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="flex-1">
+                <div class="font-medium text-white">AI Assistant</div>
+                <div class="text-gray-300 text-sm mt-1" id="notification-message">Task completed successfully</div>
+            </div>
+            <button class="text-gray-400 hover:text-white" onclick="document.getElementById('notification').classList.add('hidden')">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </div>
+    <script>
+        // Initialize clock
+        function updateClock() {
+            const now = new Date();
+            const hours = now.getHours();
+            const minutes = now.getMinutes().toString().padStart(2, '0');
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            const formattedHours = hours % 12 || 12;
+            document.getElementById('clock').textContent = `${formattedHours}:${minutes} ${ampm}`;
+        }
+        setInterval(updateClock, 60000);
+        updateClock();
+        // App management functions
+        function openApp(appId) {
+            const app = document.getElementById(appId);
+            app.classList.remove('hidden');
+            focusApp(appId);
+        }
+        function closeApp(appId) {
+            document.getElementById(appId).classList.add('hidden');
+        }
+        function minimizeApp(appId) {
+            const app = document.getElementById(appId);
+            app.classList.add('hidden');
+        }
+        function maximizeApp(appId) {
+            const app = document.getElementById(appId);
+            app.classList.toggle('w-full');
+            app.classList.toggle('h-full');
+            app.classList.toggle('top-0');
+            app.classList.toggle('left-0');
+        }
+        function focusApp(appId) {
+            document.querySelectorAll('.window').forEach(window => {
+                window.style.zIndex = '10';
+            });
+            document.getElementById(appId).style.zIndex = '50';
+            document.querySelectorAll('.taskbar-app').forEach(app => {
+                app.classList.remove('active');
+            });
+            document.querySelector(`.taskbar-app:nth-child(1)`).classList.add('active');
+        }
+        // Chat functionality
+        function sendMessage() {
+            const input = document.getElementById('user-input');
+            const message = input.value.trim();
+            if (message) {
+                addMessage(message, 'user');
+                input.value = '';
+                // Simulate AI processing
+                setTimeout(() => {
+                    processTask(message);
+                }, 1000);
+            }
+        }
+        function addMessage(message, sender) {
+            const chatContainer = document.getElementById('chat-container');
+            const now = new Date();
+            const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            if (sender === 'user') {
+                const messageElement = `
+                    <div class="ai-message mb-4 flex justify-end">
+                        <div class="flex-1 max-w-3/4">
+                            <div class="bg-app-blue rounded-lg p-3 text-white">
+                                ${message}
+                            </div>
+                            <div class="mt-2 text-xs text-gray-500 text-right">${time}</div>
+                        </div>
+                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center ml-3">
+                            <i class="fas fa-user text-white"></i>
+                        </div>
+                    </div>
+                `;
+                chatContainer.innerHTML += messageElement;
+            } else {
+                const messageElement = `
+                    <div class="ai-message mb-4 flex">
+                        <div class="w-8 h-8 bg-ai-purple rounded-full flex items-center justify-center mr-3">
+                            <i class="fas fa-robot text-white"></i>
+                        </div>
+                        <div class="flex-1">
+                            <div class="bg-gray-800 rounded-lg p-3 text-gray-200">
+                                ${message}
+                            </div>
+                            <div class="mt-2 text-xs text-gray-500">${time}</div>
+                        </div>
+                    </div>
+                `;
+                chatContainer.innerHTML += messageElement;
+            }
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        function showTypingIndicator() {
+            const chatContainer = document.getElementById('chat-container');
+            const typingElement = `
+                <div class="ai-message mb-4 flex">
+                    <div class="w-8 h-8 bg-ai-purple rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-robot text-white"></i>
+                    </div>
+                    <div class="flex-1">
+                        <div class="bg-gray-800 rounded-lg p-3 text-gray-200">
+                            <span class="typing-indicator"></span>
+                            <span class="typing-indicator"></span>
+                            <span class="typing-indicator"></span>
+                        </div>
+                    </div>
+                </div>
+            `;
+            chatContainer.innerHTML += typingElement;
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            return chatContainer.lastElementChild;
+        }
+        function removeTypingIndicator(element) {
+            element.remove();
+        }
+        function processTask(task) {
+            const typingElement = showTypingIndicator();
+            setTimeout(() => {
+                removeTypingIndicator(typingElement);
+                // Simulated AI responses based on task
+                let response = "";
+                let notification = "Task completed";
+                if (task.toLowerCase().includes("report")) {
+                    response = `I've generated a comprehensive report based on your request. The report includes:<br><br>
+                    <ul class="list-disc ml-5">
+                        <li>Executive summary of key findings</li>
+                        <li>Quarterly performance metrics</li>
+                        <li>Competitive analysis</li>
+                        <li>Recommendations for next quarter</li>
+                    </ul><br>
+                    The report has been saved to your Documents folder as "Q3_Report.pdf".`;
+                    notification = "Report generated successfully";
+                } else if (task.toLowerCase().includes("summarize") || task.toLowerCase().includes("document")) {
+                    response = `I've analyzed and summarized the requested documents. Here's the key summary:<br><br>
+                    <div class="bg-gray-750 p-3 rounded-lg">
+                        <p class="font-medium">Project Status Summary:</p>
+                        <p>The project is currently 75% complete with all major milestones achieved on schedule. The remaining tasks involve final testing and documentation. Budget utilization is at 68% which is within projected parameters.</p>
+                    </div><br>
+                    The full summary has been saved to your Documents folder.`;
+                    notification = "Documents summarized";
+                } else if (task.toLowerCase().includes("data") || task.toLowerCase().includes("analyze")) {
+                    response = `I've completed the analysis of your sales data. Key insights:<br><br>
+                    <div class="bg-gray-750 p-3 rounded-lg">
+                        <p>📈 <span class="font-medium">Top Performing Products:</span> Product X increased sales by 24% this quarter</p>
+                        <p>🌍 <span class="font-medium">Regional Performance:</span> European market shows strongest growth at 18%</p>
+                        <p>📊 <span class="font-medium">Forecast:</span> Projected 12% growth next quarter based on current trends</p>
+                    </div><br>
+                    I've created visualizations and saved the full analysis to your Documents folder.`;
+                    notification = "Data analysis complete";
+                } else {
+                    response = `I've completed the task: "${task}".<br><br>
+                    The results have been saved to your Documents folder. Let me know if you need anything else!`;
+                }
+                addMessage(response, 'ai');
+                showNotification(notification);
+            }, 2000);
+        }
+        function quickPrompt(prompt) {
+            document.getElementById('user-input').value = prompt;
+            sendMessage();
+        }
+        function aiProcessDocument(filename) {
+            const typingElement = showTypingIndicator();
+            setTimeout(() => {
+                removeTypingIndicator(typingElement);
+                let response = "";
+                if (filename.includes('.pdf')) {
+                    response = `I've analyzed <span class="font-medium">${filename}</span> and found:<br><br>
+                    <ul class="list-disc ml-5">
+                        <li>32 pages of comprehensive project documentation</li>
+                        <li>5 key recommendations for next steps</li>
+                        <li>3 critical risks identified</li>
+                    </ul><br>
+                    <button class="bg-ai-purple hover:bg-purple-700 text-white px-3 py-1 rounded text-sm" onclick="quickPrompt('Summarize ${filename}')">Summarize Document</button>`;
+                } else if (filename.includes('.xlsx')) {
+                    response = `I've processed <span class="font-medium">${filename}</span> containing:<br><br>
+                    <ul class="list-disc ml-5">
+                        <li>Quarterly sales data across 5 regions</li>
+                        <li>12 product categories with performance metrics</li>
+                        <li>Year-over-year growth analysis</li>
+                    </ul><br>
+                    <button class="bg-ai-purple hover:bg-purple-700 text-white px-3 py-1 rounded text-sm" onclick="quickPrompt('Analyze trends in ${filename}')">Analyze Data</button>`;
+                } else {
+                    response = `I've reviewed <span class="font-medium">${filename}</span> which contains:<br><br>
+                    <ul class="list-disc ml-5">
+                        <li>Meeting minutes from 3 sessions</li>
+                        <li>Action items for 5 team members</li>
+                        <li>Project timeline updates</li>
+                    </ul><br>
+                    <button class="bg-ai-purple hover:bg-purple-700 text-white px-3 py-1 rounded text-sm" onclick="quickPrompt('Extract action items from ${filename}')">Extract Actions</button>`;
+                }
+                addMessage(response, 'ai');
+                showNotification(`Processed ${filename}`);
+                focusApp('ai-assistant');
+            }, 1500);
+        }
+        function showNotification(message) {
+            const notification = document.getElementById('notification');
+            document.getElementById('notification-message').textContent = message;
+            notification.classList.remove('hidden');
+            setTimeout(() => {
+                notification.classList.add('hidden');
+            }, 3000);
+        }
+        // Make windows draggable
+        document.querySelectorAll('.window-header').forEach(header => {
+            header.addEventListener('mousedown', (e) => {
+                const window = header.parentElement;
+                let posX = e.clientX;
+                let posY = e.clientY;
+                function mouseMoveHandler(e) {
+                    const dx = e.clientX - posX;
+                    const dy = e.clientY - posY;
+                    window.style.left = (window.offsetLeft + dx) + 'px';
+                    window.style.top = (window.offsetTop + dy) + 'px';
+                    posX = e.clientX;
+                    posY = e.clientY;
+                }
+                function mouseUpHandler() {
+                    document.removeEventListener('mousemove', mouseMoveHandler);
+                    document.removeEventListener('mouseup', mouseUpHandler);
+                }
+                document.addEventListener('mousemove', mouseMoveHandler);
+                document.addEventListener('mouseup', mouseUpHandler);
+            });
+        });
+        // Open AI Assistant on load
+        window.onload = function() {
+            openApp('ai-assistant');
+        };
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kdub307/computer-use" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>