Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Dev Assistant Pro</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 src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <style> | |
| .code-editor { | |
| font-family: 'Fira Code', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .terminal { | |
| font-family: 'Fira Code', monospace; | |
| background-color: #1e1e1e; | |
| color: #f8f8f2; | |
| } | |
| .model-selector.active { | |
| border-color: #3b82f6; | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .response-area { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| .loading-dots:after { | |
| content: '.'; | |
| animation: dots 1.5s steps(5, end) infinite; | |
| } | |
| @keyframes dots { | |
| 0%, 20% { content: '.'; } | |
| 40% { content: '..'; } | |
| 60% { content: '...'; } | |
| 80%, 100% { content: ''; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold text-blue-600 flex items-center"> | |
| <i class="fas fa-robot mr-3"></i> AI Dev Assistant Pro | |
| </h1> | |
| <div class="flex space-x-4"> | |
| <button id="settings-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg"> | |
| <i class="fas fa-cog"></i> Settings | |
| </button> | |
| <button id="docs-btn" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg"> | |
| <i class="fas fa-book"></i> Documentation | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mt-2">Your all-in-one AI development environment with macOS integration</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel - Input and Controls --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Model Selection --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Select AI Model</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="model-selector p-3 border rounded-lg cursor-pointer active" data-model="gpt-4.1"> | |
| <div class="font-medium">GPT-4.1</div> | |
| <div class="text-sm text-gray-500">Azure</div> | |
| </div> | |
| <div class="model-selector p-3 border rounded-lg cursor-pointer" data-model="grok-3"> | |
| <div class="font-medium">Grok-3</div> | |
| <div class="text-sm text-gray-500">Azure</div> | |
| </div> | |
| <div class="model-selector p-3 border rounded-lg cursor-pointer" data-model="deepseek"> | |
| <div class="font-medium">DeepSeek</div> | |
| <div class="text-sm text-gray-500">Azure</div> | |
| </div> | |
| <div class="model-selector p-3 border rounded-lg cursor-pointer" data-model="o3-mini"> | |
| <div class="font-medium">O3-Mini</div> | |
| <div class="text-sm text-gray-500">Azure</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Input --> | |
| <div class="bg-white rounded-xl shadow"> | |
| <div class="p-4 border-b"> | |
| <div class="flex space-x-4"> | |
| <div class="tab tab-active" data-tab="prompt">Prompt</div> | |
| <div class="tab" data-tab="system">System Instructions</div> | |
| <div class="tab" data-tab="files">File Context</div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div id="prompt-tab" class="tab-content active"> | |
| <textarea id="prompt-input" class="w-full h-40 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your prompt here..."></textarea> | |
| </div> | |
| <div id="system-tab" class="tab-content hidden"> | |
| <textarea id="system-input" class="w-full h-40 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter system instructions...">You are an expert AI developer assistant specialized in generating high-quality code, debugging, and creating complete applications. Follow these guidelines: | |
| 1. For code generation tasks, always: | |
| - Use the most appropriate programming language | |
| - Include comprehensive comments | |
| - Implement error handling | |
| - Follow best practices for the language/framework | |
| 2. For macOS automation: | |
| - Use AppleScript for simple tasks | |
| - Use Swift for more complex automation | |
| - Include proper permissions handling | |
| - Provide clear instructions for setup | |
| 3. For Azure AI API usage: | |
| - Include proper authentication | |
| - Implement retry logic | |
| - Handle rate limiting | |
| - Process responses efficiently | |
| 4. Always: | |
| - Be concise but thorough | |
| - Provide complete implementations | |
| - Suggest optimizations | |
| - Offer alternative approaches when relevant</textarea> | |
| </div> | |
| <div id="files-tab" class="tab-content hidden"> | |
| <div class="mb-4"> | |
| <input type="file" id="file-upload" class="hidden" multiple> | |
| <button id="upload-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-upload mr-2"></i>Upload Files | |
| </button> | |
| <span id="file-count" class="ml-2 text-sm text-gray-500">No files selected</span> | |
| </div> | |
| <div id="file-preview" class="border rounded-lg p-3 h-40 overflow-y-auto bg-gray-50"> | |
| <p class="text-gray-500 text-center">Uploaded files will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t flex justify-between"> | |
| <div class="flex space-x-3"> | |
| <button id="macos-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg"> | |
| <i class="fab fa-apple mr-2"></i> macOS Control | |
| </button> | |
| <button id="code-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg"> | |
| <i class="fas fa-code mr-2"></i> Generate Code | |
| </button> | |
| <button id="app-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg"> | |
| <i class="fas fa-cubes mr-2"></i> Create App | |
| </button> | |
| </div> | |
| <button id="submit-btn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> Submit | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Response Area --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">AI Response</h2> | |
| <div id="response-area" class="response-area min-h-40 p-4 border rounded-lg bg-gray-50"> | |
| <p class="text-gray-500 text-center">Response will appear here</p> | |
| </div> | |
| <div id="loading-indicator" class="hidden mt-4 text-center text-blue-600"> | |
| <p class="loading-dots">Processing</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Code Editor and Terminal --> | |
| <div class="space-y-6"> | |
| <!-- Code Editor --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold">Code Editor</h2> | |
| <div class="flex space-x-2"> | |
| <button id="copy-code-btn" class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| <button id="run-code-btn" class="p-2 text-gray-600 hover:text-green-600"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button id="save-code-btn" class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-save"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <select id="language-select" class="absolute right-0 top-0 z-10 bg-gray-100 border rounded p-1 text-sm"> | |
| <option value="javascript">JavaScript</option> | |
| <option value="python">Python</option> | |
| <option value="html">HTML</option> | |
| <option value="css">CSS</option> | |
| <option value="swift">Swift</option> | |
| <option value="applescript">AppleScript</option> | |
| </select> | |
| <textarea id="code-editor" class="code-editor w-full h-64 p-3 border rounded-lg bg-gray-900 text-gray-100"></textarea> | |
| </div> | |
| </div> | |
| <!-- Terminal --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Terminal</h2> | |
| <div id="terminal" class="terminal w-full h-40 p-3 rounded-lg overflow-y-auto"> | |
| <div class="mb-2"> | |
| <span class="text-green-400">user@macos</span> | |
| <span class="text-blue-400"> ~ </span> | |
| <span class="text-white">$</span> | |
| <span id="terminal-prompt" class="ml-2"></span> | |
| </div> | |
| <div id="terminal-output"></div> | |
| </div> | |
| <div class="mt-3 flex"> | |
| <input id="terminal-input" type="text" class="flex-1 px-3 py-1 border rounded-l-lg focus:outline-none" placeholder="Enter command..."> | |
| <button id="terminal-submit" class="px-4 py-1 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- API Status --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">API Status</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span>OpenAI API: Connected</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span>Azure AI: Connected</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span>macOS Bridge: Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- macOS Control Modal --> | |
| <div id="macos-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold">macOS Control Panel</h3> | |
| <button id="close-macos-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <div class="text-blue-600 mb-2"> | |
| <i class="fas fa-folder-open text-2xl"></i> | |
| </div> | |
| <h4 class="font-medium">File Operations</h4> | |
| <p class="text-sm text-gray-500">Create, move, delete files</p> | |
| </div> | |
| <div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <div class="text-blue-600 mb-2"> | |
| <i class="fas fa-window-maximize text-2xl"></i> | |
| </div> | |
| <h4 class="font-medium">Window Control</h4> | |
| <p class="text-sm text-gray-500">Manage application windows</p> | |
| </div> | |
| <div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <div class="text-blue-600 mb-2"> | |
| <i class="fas fa-network-wired text-2xl"></i> | |
| </div> | |
| <h4 class="font-medium">System Info</h4> | |
| <p class="text-sm text-gray-500">Get hardware/software details</p> | |
| </div> | |
| <div class="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <div class="text-blue-600 mb-2"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h4 class="font-medium">Automation</h4> | |
| <p class="text-sm text-gray-500">Create workflows</p> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Custom AppleScript</label> | |
| <textarea id="applescript-input" class="w-full h-32 p-3 border rounded-lg" placeholder="tell application \"Finder\" to..."></textarea> | |
| <div class="mt-3 flex justify-end space-x-3"> | |
| <button id="cancel-applescript" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg"> | |
| Cancel | |
| </button> | |
| <button id="run-applescript" class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg"> | |
| Run Script | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const modelSelectors = document.querySelectorAll('.model-selector'); | |
| const tabs = document.querySelectorAll('.tab'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| const promptInput = document.getElementById('prompt-input'); | |
| const systemInput = document.getElementById('system-input'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| const responseArea = document.getElementById('response-area'); | |
| const loadingIndicator = document.getElementById('loading-indicator'); | |
| const codeEditor = document.getElementById('code-editor'); | |
| const languageSelect = document.getElementById('language-select'); | |
| const copyCodeBtn = document.getElementById('copy-code-btn'); | |
| const runCodeBtn = document.getElementById('run-code-btn'); | |
| const saveCodeBtn = document.getElementById('save-code-btn'); | |
| const terminalInput = document.getElementById('terminal-input'); | |
| const terminalSubmit = document.getElementById('terminal-submit'); | |
| const terminalOutput = document.getElementById('terminal-output'); | |
| const terminalPrompt = document.getElementById('terminal-prompt'); | |
| const macosBtn = document.getElementById('macos-btn'); | |
| const macosModal = document.getElementById('macos-modal'); | |
| const closeMacosModal = document.getElementById('close-macos-modal'); | |
| const applescriptInput = document.getElementById('applescript-input'); | |
| const runApplescript = document.getElementById('run-applescript'); | |
| const cancelApplescript = document.getElementById('cancel-applescript'); | |
| const uploadBtn = document.getElementById('upload-btn'); | |
| const fileUpload = document.getElementById('file-upload'); | |
| const filePreview = document.getElementById('file-preview'); | |
| const fileCount = document.getElementById('file-count'); | |
| const codeBtn = document.getElementById('code-btn'); | |
| const appBtn = document.getElementById('app-btn'); | |
| // Current state | |
| let currentModel = 'gpt-4.1'; | |
| let uploadedFiles = []; | |
| let isProcessing = false; | |
| // API Configuration | |
| const apiConfig = { | |
| 'gpt-4.1': { | |
| endpoint: 'https://maste-m2sgu57w-eastus2.openai.azure.com/openai/deployments/gpt-4.1/chat/completions?api-version=2025-01-01-preview', | |
| key: '1bcdac56c7d54513844c0b0d7c7c079e' | |
| }, | |
| 'grok-3': { | |
| endpoint: 'https://ai-huroaiai970351299673.services.ai.azure.com/models/chat/completions?api-version=2024-05-01-preview', | |
| key: 'GgTqsvTU1GpxmIHeaRbzctxdivLvdlOGLRl6F37oUFnu09JKyGPLJQQJ99BBACHYHv6XJ3w3AAAAACOGWLsV' | |
| }, | |
| 'deepseek': { | |
| endpoint: 'https://ai-huroaiai970351299673.services.ai.azure.com/models/chat/completions?api-version=2024-05-01-preview', | |
| key: 'GgTqsvTU1GpxmIHeaRbzctxdivLvdlOGLRl6F37oUFnu09JKyGPLJQQJ99BBACHYHv6XJ3w3AAAAACOGWLsV' | |
| }, | |
| 'o3-mini': { | |
| endpoint: 'https://ai-huroaiai970351299673.openai.azure.com/openai/deployments/o3-mini/chat/completions?api-version=2025-01-01-preview', | |
| key: 'GgTqsvTU1GpxmIHeaRbzctxdivLvdlOGLRl6F37oUFnu09JKyGPLJQQJ99BBACHYHv6XJ3w3AAAAACOGWLsV' | |
| }, | |
| 'openai': { | |
| endpoint: 'https://api.openai.com/v1/chat/completions', | |
| key: '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' | |
| } | |
| }; | |
| // Event Listeners | |
| modelSelectors.forEach(selector => { | |
| selector.addEventListener('click', () => { | |
| modelSelectors.forEach(s => s.classList.remove('active')); | |
| selector.classList.add('active'); | |
| currentModel = selector.dataset.model; | |
| }); | |
| }); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| tabs.forEach(t => t.classList.remove('tab-active')); | |
| tab.classList.add('tab-active'); | |
| const tabName = tab.dataset.tab; | |
| tabContents.forEach(content => { | |
| content.classList.add('hidden'); | |
| if (content.id === `${tabName}-tab`) { | |
| content.classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| }); | |
| submitBtn.addEventListener('click', handleSubmit); | |
| codeBtn.addEventListener('click', () => { | |
| promptInput.value = "Generate complete, production-ready code for: " + (promptInput.value || "a web application with modern UI"); | |
| document.querySelector('.tab').click(); | |
| }); | |
| appBtn.addEventListener('click', () => { | |
| promptInput.value = "Create a complete application with all necessary files for: " + (promptInput.value || "a task management tool"); | |
| document.querySelector('.tab').click(); | |
| }); | |
| macosBtn.addEventListener('click', () => { | |
| macosModal.classList.remove('hidden'); | |
| }); | |
| closeMacosModal.addEventListener('click', () => { | |
| macosModal.classList.add('hidden'); | |
| }); | |
| runApplescript.addEventListener('click', () => { | |
| const script = applescriptInput.value; | |
| if (script.trim()) { | |
| runTerminalCommand(`osascript -e '${script}'`); | |
| macosModal.classList.add('hidden'); | |
| } | |
| }); | |
| cancelApplescript.addEventListener('click', () => { | |
| macosModal.classList.add('hidden'); | |
| }); | |
| uploadBtn.addEventListener('click', () => { | |
| fileUpload.click(); | |
| }); | |
| fileUpload.addEventListener('change', handleFileUpload); | |
| copyCodeBtn.addEventListener('click', () => { | |
| navigator.clipboard.writeText(codeEditor.value); | |
| showTerminalMessage('Code copied to clipboard!'); | |
| }); | |
| runCodeBtn.addEventListener('click', () => { | |
| const code = codeEditor.value; | |
| const language = languageSelect.value; | |
| if (code.trim()) { | |
| showTerminalMessage(`Running ${language} code...`); | |
| // In a real app, this would execute the code in a sandbox | |
| setTimeout(() => { | |
| showTerminalMessage('Code execution complete.'); | |
| showTerminalMessage('Output would appear here in a real implementation.'); | |
| }, 1000); | |
| } | |
| }); | |
| saveCodeBtn.addEventListener('click', () => { | |
| const code = codeEditor.value; | |
| if (code.trim()) { | |
| const blob = new Blob([code], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `code.${languageSelect.value}`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| showTerminalMessage(`Code saved as code.${languageSelect.value}`); | |
| } | |
| }); | |
| terminalSubmit.addEventListener('click', () => { | |
| const command = terminalInput.value.trim(); | |
| if (command) { | |
| runTerminalCommand(command); | |
| terminalInput.value = ''; | |
| } | |
| }); | |
| terminalInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| const command = terminalInput.value.trim(); | |
| if (command) { | |
| runTerminalCommand(command); | |
| terminalInput.value = ''; | |
| } | |
| } | |
| }); | |
| // Functions | |
| function handleSubmit() { | |
| if (isProcessing) return; | |
| const prompt = promptInput.value.trim(); | |
| const system = systemInput.value.trim(); | |
| if (!prompt) { | |
| showTerminalMessage('Please enter a prompt'); | |
| return; | |
| } | |
| isProcessing = true; | |
| loadingIndicator.classList.remove('hidden'); | |
| responseArea.innerHTML = '<p class="text-gray-500 text-center">Processing your request...</p>'; | |
| // Simulate API call (in a real app, this would be an actual API call) | |
| setTimeout(() => { | |
| generateResponse(prompt, system); | |
| isProcessing = false; | |
| loadingIndicator.classList.add('hidden'); | |
| }, 2000); | |
| } | |
| function generateResponse(prompt, system) { | |
| // This is a simulation - in a real app, you would call the actual API | |
| const responses = { | |
| code: `Here's the complete code you requested: | |
| \`\`\`${languageSelect.value} | |
| // ${prompt} | |
| function main() { | |
| // Implementation goes here | |
| console.log("Hello, World!"); | |
| // Error handling | |
| try { | |
| // Critical operations | |
| } catch (error) { | |
| console.error("Error:", error); | |
| } | |
| } | |
| // Run the main function | |
| main(); | |
| \`\`\` | |
| Key features: | |
| - Proper error handling | |
| - Clean code structure | |
| - Comprehensive comments | |
| - Follows best practices`, | |
| app: `I'll create a complete application structure for you: | |
| Project Structure: | |
| ├── src/ | |
| │ ├── main.${languageSelect.value} - Main application entry point | |
| │ ├── components/ - Reusable UI components | |
| │ ├── utils/ - Utility functions | |
| │ └── styles/ - CSS/Styles | |
| ├── public/ - Static assets | |
| ├── package.json - Project configuration | |
| └── README.md - Documentation | |
| Would you like me to generate each of these files?`, | |
| default: `Here's the information you requested about "${prompt}": | |
| 1. Overview: This is a comprehensive response generated by the ${currentModel} model. | |
| 2. Implementation Details: | |
| - First approach: Using standard libraries | |
| - Alternative approach: Using modern frameworks | |
| 3. Recommendations: | |
| - Best practice: Follow industry standards | |
| - Optimization: Consider performance implications | |
| Let me know if you'd like me to elaborate on any specific aspect.` | |
| }; | |
| let response; | |
| if (prompt.toLowerCase().includes('generate code') || prompt.toLowerCase().includes('create code')) { | |
| response = responses.code; | |
| } else if (prompt.toLowerCase().includes('create app') || prompt.toLowerCase().includes('build application')) { | |
| response = responses.app; | |
| } else { | |
| response = responses.default; | |
| } | |
| // Update code editor if code was generated | |
| if (response.includes('```')) { | |
| const codeMatch = response.match(/```[\w-]*\n([\s\S]*?)\n```/); | |
| if (codeMatch && codeMatch[1]) { | |
| codeEditor.value = codeMatch[1]; | |
| } | |
| } | |
| responseArea.innerHTML = marked.parse(response); | |
| } | |
| function runTerminalCommand(command) { | |
| const promptLine = document.createElement('div'); | |
| promptLine.className = 'mb-2'; | |
| promptLine.innerHTML = ` | |
| <span class="text-green-400">user@macos</span> | |
| <span class="text-blue-400"> ~ </span> | |
| <span class="text-white">$</span> | |
| <span class="ml-2">${command}</span> | |
| `; | |
| terminalOutput.appendChild(promptLine); | |
| // Simulate command output | |
| const output = simulateCommandOutput(command); | |
| const outputLine = document.createElement('div'); | |
| outputLine.className = 'mb-4 text-gray-300'; | |
| outputLine.textContent = output; | |
| terminalOutput.appendChild(outputLine); | |
| // Scroll to bottom | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| } | |
| function simulateCommandOutput(command) { | |
| if (command.startsWith('ls')) { | |
| return 'Applications Documents Downloads\nPictures Music Desktop'; | |
| } else if (command.startsWith('pwd')) { | |
| return '/Users/user'; | |
| } else if (command.includes('osascript')) { | |
| return 'AppleScript executed successfully'; | |
| } else { | |
| return `${command}: command output would appear here in a real terminal`; | |
| } | |
| } | |
| function showTerminalMessage(message) { | |
| const messageLine = document.createElement('div'); | |
| messageLine.className = 'mb-2 text-gray-300'; | |
| messageLine.textContent = message; | |
| terminalOutput.appendChild(messageLine); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| } | |
| function handleFileUpload(e) { | |
| const files = Array.from(e.target.files); | |
| if (files.length === 0) return; | |
| uploadedFiles = files; | |
| fileCount.textContent = `${files.length} file(s) selected`; | |
| filePreview.innerHTML = ''; | |
| files.forEach(file => { | |
| const fileElement = document.createElement('div'); | |
| fileElement.className = 'flex items-center p-2 border-b last:border-b-0'; | |
| fileElement.innerHTML = ` | |
| <i class="fas fa-file-alt text-gray-500 mr-3"></i> | |
| <div> | |
| <div class="font-medium">${file.name}</div> | |
| <div class="text-sm text-gray-500">${(file.size / 1024).toFixed(1)} KB</div> | |
| </div> | |
| `; | |
| filePreview.appendChild(fileElement); | |
| }); | |
| } | |
| // Initialize | |
| showTerminalMessage('System ready. Enter commands or use the 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=tommytracx/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |