Create a single-page, responsive web application called "AI Media & Model Hub" with a modern, dark-themed interface (black background, white text, and teal accents). The app should have a sticky, minimal navigation bar at the top with links to four sections: Home, Media Manager, Model Manager, and AI Agent Interface. Ensure the app is SEO-optimized with appropriate metadata and responsive design for all screen sizes. Home Section: Display a welcome message with a fullscreen hero image (use a placeholder image of a futuristic AI interface). Include a brief description of the app’s features and a "Get Started" button linking to the Media Manager section. Media Manager Section: Provide a file explorer interface to access and preview various media and file types (images: PNG, JPEG; audio: MP3; video: MP4; documents: PDF, TXT). Allow users to upload files via a drag-and-drop zone or file input (use browser-based file handling). Display files in a grid with thumbnails for media and icons for documents. Clicking a file shows a preview (images/videos in a lightbox, audio in a player, text/PDF in a readable viewer). Include a download button for each file. Model Manager Section: Create a dashboard to manage AI models. Show a table listing mock AI models (e.g., "Model A: Image Recognition", "Model B: NLP") with columns for name, type, size, and actions. Actions include "Uninstall" (delete model from list) and "Install" (upload a model file or input a URL to simulate adding a model). Include a form to upload or link new models with fields for name, type, and description. Display a confirmation dialog for uninstall actions. AI Agent Interface Section: Design an interactive chat-like interface to prompt AI agents within a fictional "implants" system. Include a text input box for users to enter prompts (e.g., "Analyze image data" or "Generate report"). Display responses in a conversation-style layout with mock AI responses (e.g., "Processing request..." or "Report generated"). Add a dropdown to select different AI agents (e.g., "Vision Agent", "Text Agent"). Include a "Clear Chat" button to reset the conversation. Ensure the app uses clean, production-ready HTML, CSS, and JavaScript, contained in a single HTML file for easy export. Provide real-time previews of all interactions (e.g., file uploads, model changes, chat updates). Add subtle animations for section transitions and button clicks. Include built-in SEO tools for metadata and page structure optimization. Make the app accessible to non-technical users with clear labels and tooltips. - Initial Deployment
7292e18 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Media & Model Hub | Advanced Content Management</title> | |
| <meta name="description" content="Next-gen interface for managing AI models, media files, and interacting with intelligent agents"> | |
| <meta name="keywords" content="AI, media manager, model manager, neural networks, agent interface"> | |
| <meta name="author" content="AI Media Hub"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* Custom styles that Tailwind doesn't cover */ | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1677442135136-760c813a743a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .file-card { | |
| transition: all 0.3s ease; | |
| } | |
| .file-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 255, 203, 0.1); | |
| } | |
| .chat-message { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .drag-drop-area { | |
| border: 2px dashed #0ff1ce; | |
| transition: all 0.3s ease; | |
| } | |
| .drag-drop-area.active { | |
| background-color: rgba(0, 255, 203, 0.1); | |
| border-color: #0ff1ce; | |
| } | |
| .preview-backdrop { | |
| background-color: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| .section { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| } | |
| .section.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="sticky top-0 z-50 bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-md shadow-lg"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-cyan-500 bg-clip-text text-transparent">AI Hub</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link hover:text-teal-400 transition duration-300">Home</a> | |
| <a href="#media" class="nav-link hover:text-teal-400 transition duration-300">Media Manager</a> | |
| <a href="#models" class="nav-link hover:text-teal-400 transition duration-300">Model Manager</a> | |
| <a href="#agent" class="nav-link hover:text-teal-400 transition duration-300">AI Agent</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-toggle"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden mt-4 space-y-3" id="mobile-menu"> | |
| <a href="#home" class="block nav-link hover:text-teal-400 transition duration-300">Home</a> | |
| <a href="#media" class="block nav-link hover:text-teal-400 transition duration-300">Media Manager</a> | |
| <a href="#models" class="block nav-link hover:text-teal-400 transition duration-300">Model Manager</a> | |
| <a href="#agent" class="block nav-link hover:text-teal-400 transition duration-300">AI Agent</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Home Section --> | |
| <section id="home" class="section min-h-screen flex items-center hero-bg rounded-xl mb-12"> | |
| <div class="container mx-auto px-4 py-20"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| <span class="bg-gradient-to-r from-teal-400 to-cyan-500 bg-clip-text text-transparent">AI Media & Model Hub</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8"> | |
| A unified interface for managing your digital assets, AI models, and intelligent agents. | |
| Streamline your workflow with our next-generation content management system. | |
| </p> | |
| <div class="space-x-4"> | |
| <a href="#media" class="bg-gradient-to-r from-teal-500 to-cyan-600 text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition duration-300 inline-flex items-center"> | |
| Get Started <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| <a href="#models" class="border border-teal-400 text-teal-400 px-6 py-3 rounded-full font-medium hover:bg-teal-400 hover:bg-opacity-10 transition duration-300 inline-flex items-center"> | |
| Explore Models <i class="fas fa-robot ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Media Manager Section --> | |
| <section id="media" class="section mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <i class="fas fa-photo-film text-teal-400 text-3xl mr-4"></i> | |
| <h2 class="text-3xl font-bold">Media Manager</h2> | |
| </div> | |
| <!-- File Upload Area --> | |
| <div class="drag-drop-area p-12 rounded-xl mb-8 text-center cursor-pointer transition-all" | |
| id="drag-drop-area"> | |
| <div class="max-w-md mx-auto"> | |
| <i class="fas fa-cloud-arrow-up text-5xl mb-4 text-teal-400"></i> | |
| <h3 class="text-xl font-semibold mb-2">Drag & Drop Files Here</h3> | |
| <p class="text-gray-400 mb-4">or click to browse your device</p> | |
| <input type="file" id="file-input" class="hidden" multiple> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded transition duration-300"> | |
| Select Files | |
| </button> | |
| </div> | |
| </div> | |
| <!-- File Explorer --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Your Media Files</h3> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded"> | |
| <i class="fas fa-th-large"></i> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded"> | |
| <i class="fas fa-list"></i> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded"> | |
| <i class="fas fa-filter"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <!-- File Grid --> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="file-grid"> | |
| <!-- Sample files will be generated by JS --> | |
| </div> | |
| </div> | |
| <!-- File Preview Modal --> | |
| <div class="fixed inset-0 z-50 flex items-center justify-center preview-backdrop hidden" id="preview-modal"> | |
| <div class="bg-gray-900 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-auto relative"> | |
| <button class="absolute top-4 right-4 bg-gray-800 hover:bg-gray-700 p-2 rounded-full" id="close-preview"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="p-8" id="preview-content"> | |
| <!-- Preview content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Model Manager Section --> | |
| <section id="models" class="section mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <i class="fas fa-robot text-teal-400 text-3xl mr-4"></i> | |
| <h2 class="text-3xl font-bold">Model Manager</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mb-8"> | |
| <div class="md:col-span-2 order-1"> | |
| <div class="bg-gray-900 rounded-xl p-6 shadow-lg"> | |
| <h3 class="text-xl font-semibold mb-4">Installed AI Models</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-800"> | |
| <th class="text-left py-3 px-4">Name</th> | |
| <th class="text-left py-3 px-4">Type</th> | |
| <th class="text-left py-3 px-4">Size</th> | |
| <th class="text-left py-3 px-4">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="model-table-body"> | |
| <!-- Model rows will be inserted here by JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="order-2"> | |
| <div class="bg-gray-900 rounded-xl p-6 shadow-lg"> | |
| <h3 class="text-xl font-semibold mb-4">Install New Model</h3> | |
| <form id="model-form"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-400 mb-2">Model Name</label> | |
| <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded px-4 py-2" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-400 mb-2">Model Type</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded px-4 py-2"> | |
| <option>Computer Vision</option> | |
| <option>Natural Language</option> | |
| <option>Generative</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-400 mb-2">Source</label> | |
| <div class="flex items-center bg-gray-800 border border-gray-700 rounded overflow-hidden"> | |
| <input type="file" class="hidden" id="model-file-input"> | |
| <input type="text" placeholder="File or URL" class="flex-1 bg-transparent px-4 py-2" id="model-source"> | |
| <button type="button" class="bg-gray-700 hover:bg-gray-600 px-3 py-2" id="browse-model"> | |
| <i class="fas fa-folder-open"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-400 mb-2">Description</label> | |
| <textarea class="w-full bg-gray-800 border border-gray-700 rounded px-4 py-2 h-20"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-teal-500 hover:bg-teal-600 text-white py-2 rounded font-medium"> | |
| <i class="fas fa-plus mr-2"></i> Add Model | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Uninstall Confirmation Modal --> | |
| <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 hidden" id="confirmation-modal"> | |
| <div class="bg-gray-900 rounded-xl p-6 max-w-md w-full"> | |
| <h3 class="text-xl font-semibold mb-4">Confirm Uninstall</h3> | |
| <p class="text-gray-400 mb-6">Are you sure you want to uninstall this model? This action cannot be undone.</p> | |
| <div class="flex justify-end space-x-4"> | |
| <button class="px-4 py-2 rounded border border-gray-700 hover:bg-gray-800" id="cancel-uninstall">Cancel</button> | |
| <button class="px-4 py-2 rounded bg-red-600 hover:bg-red-700" id="confirm-uninstall">Uninstall</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Agent Interface Section --> | |
| <section id="agent" class="section mb-20"> | |
| <div class="flex items-center mb-8"> | |
| <i class="fas fa-comments text-teal-400 text-3xl mr-4"></i> | |
| <h2 class="text-3xl font-bold">AI Agent Interface</h2> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Agent Selector --> | |
| <div class="border-b border-gray-800 p-4 flex items-center"> | |
| <div class="mr-4"> | |
| <span class="text-gray-400 text-sm">Active Agent:</span> | |
| <select class="bg-gray-800 border border-gray-700 rounded px-3 py-1 ml-2"> | |
| <option>Vision Agent (v1.2.4)</option> | |
| <option>Text Agent (v2.1.0)</option> | |
| <option>Analysis Agent (v1.5.3)</option> | |
| </select> | |
| </div> | |
| <div class="ml-auto"> | |
| <button class="text-gray-400 hover:text-teal-400 px-3 py-1 rounded" id="clear-chat"> | |
| <i class="fas fa-trash mr-1"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Area --> | |
| <div class="p-4 h-96 overflow-y-auto" id="chat-area"> | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-end"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="bg-teal-500 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-robot text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-xs md:max-w-md bg-gray-800 rounded-lg px-4 py-2"> | |
| <p class="text-sm">Hello, I'm your AI assistant. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-gray-800 p-4"> | |
| <div class="flex"> | |
| <input type="text" class="flex-1 bg-gray-800 border border-gray-700 rounded-l px-4 py-2 focus:outline-none focus:border-teal-500" | |
| placeholder="Type your command or inquiry..." id="chat-input"> | |
| <button class="bg-teal-500 hover:bg-teal-600 px-6 py-2 rounded-r font-medium transition duration-300" id="send-message"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> | |
| <span>Press Enter to send</span> | |
| <span>Token balance: <span class="text-teal-400 font-bold">24,531</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold bg-gradient-to-r from-teal-400 to-cyan-500 bg-clip-text text-transparent">AI Media & Model Hub</h3> | |
| <p class="text-gray-500 text-sm">Next-generation content management</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> | |
| <i class="fas fa-globe"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| <p>© 2023 AI Media & Model Hub. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Activate sections when they come into view | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Navigation | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Highlight current nav link | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| function highlightNav() { | |
| const fromTop = window.scrollY + 100; | |
| navLinks.forEach(link => { | |
| const section = document.querySelector(link.getAttribute('href')); | |
| if ( | |
| section.offsetTop <= fromTop && | |
| section.offsetTop + section.offsetHeight > fromTop | |
| ) { | |
| link.classList.add('text-teal-400'); | |
| link.classList.add('font-medium'); | |
| } else { | |
| link.classList.remove('text-teal-400'); | |
| link.classList.remove('font-medium'); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', highlightNav); | |
| highlightNav(); // Run once on load | |
| // Section animations | |
| const sections = document.querySelectorAll('.section'); | |
| function checkSections() { | |
| sections.forEach(section => { | |
| const rect = section.getBoundingClientRect(); | |
| if (rect.top < window.innerHeight - 100) { | |
| section.classList.add('active'); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', checkSections); | |
| checkSections(); // Run once on load | |
| // Media Manager functionality | |
| const fileGrid = document.getElementById('file-grid'); | |
| const dragDropArea = document.getElementById('drag-drop-area'); | |
| const fileInput = document.getElementById('file-input'); | |
| const previewModal = document.getElementById('preview-modal'); | |
| const closePreview = document.getElementById('close-preview'); | |
| const previewContent = document.getElementById('preview-content'); | |
| // Sample files | |
| const sampleFiles = [ | |
| { name: 'project_diagram.png', type: 'image', size: '1.2 MB', icon: 'fa-image' }, | |
| { name: 'dataset_final.zip', type: 'archive', size: '458 MB', icon: 'fa-file-zipper' }, | |
| { name: 'presentation.pdf', type: 'document', size: '8.4 MB', icon: 'fa-file-pdf' }, | |
| { name: 'training_logs.txt', type: 'text', size: '32 KB', icon: 'fa-file-lines' }, | |
| { name: 'sample_audio.mp3', type: 'audio', size: '3.5 MB', icon: 'fa-file-audio' }, | |
| { name: 'demo_video.mp4', type: 'video', size: '24.8 MB', icon: 'fa-file-video' }, | |
| { name: 'config.json', type: 'code', size: '12 KB', icon: 'fa-file-code' }, | |
| { name: 'user_guide.docx', type: 'document', size: '2.1 MB', icon: 'fa-file-word' } | |
| ]; | |
| // Render sample files | |
| function renderFiles() { | |
| fileGrid.innerHTML = ''; | |
| sampleFiles.forEach(file => { | |
| const fileCard = document.createElement('div'); | |
| fileCard.className = 'file-card bg-gray-900 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition-all'; | |
| fileCard.innerHTML = ` | |
| <div class="text-teal-400 text-3xl mb-2"> | |
| <i class="fas ${file.icon}"></i> | |
| </div> | |
| <div class="text-center"> | |
| <h4 class="font-medium text-sm mb-1 truncate w-full">${file.name}</h4> | |
| <p class="text-gray-400 text-xs">${file.size}</p> | |
| </div> | |
| `; | |
| fileCard.addEventListener('click', () => previewFile(file)); | |
| fileGrid.appendChild(fileCard); | |
| }); | |
| } | |
| // Preview file function | |
| function previewFile(file) { | |
| let content = ''; | |
| if (file.type === 'image') { | |
| content = ` | |
| <div class="flex flex-col items-center"> | |
| <h4 class="text-xl font-medium mb-4">${file.name}</h4> | |
| <img src="https://placehold.co/600x400/0f172a/22d3ee?text=${file.name}" alt="${file.name}" class="rounded-lg max-h-[60vh]"> | |
| <div class="mt-6 flex space-x-4"> | |
| <button class="bg-teal-500 hover:bg-teal-600 px-4 py-2 rounded"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded"> | |
| <i class="fas fa-edit mr-2"></i> Edit Metadata | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| } else if (file.type === 'video') { | |
| content = ` | |
| <div class="flex flex-col items-center"> | |
| <h4 class="text-xl font-medium mb-4">${file.name}</h4> | |
| <video controls class="rounded-lg max-h-[60vh]"> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| Your browser does not support HTML video. | |
| </video> | |
| <div class="mt-6 flex space-x-4"> | |
| <button class="bg-teal-500 hover:bg-teal-600 px-4 py-2 rounded"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| } else if (file.type === 'audio') { | |
| content = ` | |
| <div class="flex flex-col items-center"> | |
| <h4 class="text-xl font-medium mb-4">${file.name}</h4> | |
| <audio controls class="w-full max-w-md"> | |
| <source src="https://sample-videos.com/audio123/mp3/india-national-anthem.mp3" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <div class="mt-6 flex space-x-4"> | |
| <button class="bg-teal-500 hover:bg-teal-600 px-4 py-2 rounded"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| content = ` | |
| <div class="flex flex-col items-center"> | |
| <h4 class="text-xl font-medium mb-4">${file.name}</h4> | |
| <div class="bg-gray-800 p-6 rounded-lg w-full max-h-[60vh] overflow-auto"> | |
| <pre class="text-sm font-mono">This is a preview of the ${file.name} file. In a real application, you would see the actual file content here. | |
| File size: ${file.size} | |
| File type: ${file.type}</pre> | |
| </div> | |
| <div class="mt-6 flex space-x-4"> | |
| <button class="bg-teal-500 hover:bg-teal-600 px-4 py-2 rounded"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| previewContent.innerHTML = content; | |
| previewModal.classList.remove('hidden'); | |
| } | |
| // Drag and drop functionality | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dragDropArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dragDropArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dragDropArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dragDropArea.classList.add('active'); | |
| } | |
| function unhighlight() { | |
| dragDropArea.classList.remove('active'); | |
| } | |
| dragDropArea.addEventListener('drop', handleDrop, false); | |
| dragDropArea.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFiles); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles({ target: { files } }); | |
| } | |
| function handleFiles(e) { | |
| const files = e.target.files; | |
| if (files.length) { | |
| alert(`You've selected ${files.length} file(s). In a real application, these would be uploaded.`); | |
| // In a real app, you would upload files here | |
| } | |
| } | |
| closePreview.addEventListener('click', () => { | |
| previewModal.classList.add('hidden'); | |
| }); | |
| // Model Manager functionality | |
| const modelTableBody = document.getElementById('model-table-body'); | |
| const modelForm = document.getElementById('model-form'); | |
| const browseModel = document.getElementById('browse-model'); | |
| const modelFileInput = document.getElementById('model-file-input'); | |
| const modelSource = document.getElementById('model-source'); | |
| const confirmationModal = document.getElementById('confirmation-modal'); | |
| const cancelUninstall = document.getElementById('cancel-uninstall'); | |
| const confirmUninstall = document.getElementById('confirm-uninstall'); | |
| let models = [ | |
| { name: 'Vision Processor', type: 'Computer Vision', size: '1.8 GB', id: 1 }, | |
| { name: 'NLP Transformer', type: 'Natural Language', size: '845 MB', id: 2 }, | |
| { name: 'Image Generator', type: 'Generative', size: '2.4 GB', id: 3 } | |
| ]; | |
| let modelToUninstall = null; | |
| function renderModels() { | |
| modelTableBody.innerHTML = ''; | |
| models.forEach(model => { | |
| const row = document.createElement('tr'); | |
| row.className = 'border-b border-gray-800 hover:bg-gray-800 transition duration-200'; | |
| row.innerHTML = ` | |
| <td class="py-3 px-4">${model.name}</td> | |
| <td class="py-3 px-4">${model.type}</td> | |
| <td class="py-3 px-4">${model.size}</td> | |
| <td class="py-3 px-4"> | |
| <button class="text-red-400 hover:text-red-300 mr-3 uninstall-btn" data-id="${model.id}"> | |
| <i class="fas fa-trash"></i> Uninstall | |
| </button> | |
| <button class="text-teal-400 hover:text-teal-300 details-btn" data-id="${model.id}"> | |
| <i class="fas fa-info-circle"></i> Details | |
| </button> | |
| </td> | |
| `; | |
| modelTableBody.appendChild(row); | |
| }); | |
| // Add event listeners to uninstall buttons | |
| document.querySelectorAll('.uninstall-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const id = parseInt(e.target.getAttribute('data-id') || e.target.parentElement.getAttribute('data-id')); | |
| modelToUninstall = id; | |
| confirmationModal.classList.remove('hidden'); | |
| }); | |
| }); | |
| } | |
| modelForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const name = this.elements[0].value; | |
| const type = this.elements[1].value; | |
| const source = modelSource.value || "Manually added"; | |
| const description = this.elements[3].value; | |
| const newModel = { | |
| id: models.length + 1, | |
| name: name, | |
| type: type, | |
| size: 'Calculating...', | |
| source: source, | |
| description: description | |
| }; | |
| models.push(newModel); | |
| renderModels(); | |
| // Simulate size calculation | |
| setTimeout(() => { | |
| const sizes = ['124 MB', '567 MB', '890 MB', '1.2 GB', '2.5 GB', '3.8 GB']; | |
| newModel.size = sizes[Math.floor(Math.random() * sizes.length)]; | |
| renderModels(); | |
| }, 1500); | |
| this.reset(); | |
| alert('Model added successfully!'); | |
| }); | |
| browseModel.addEventListener('click', () => { | |
| modelFileInput.click(); | |
| }); | |
| modelFileInput.addEventListener('change', () => { | |
| if (modelFileInput.files.length) { | |
| modelSource.value = modelFileInput.files[0].name; | |
| } | |
| }); | |
| cancelUninstall.addEventListener('click', () => { | |
| confirmationModal.classList.add('hidden'); | |
| modelToUninstall = null; | |
| }); | |
| confirmUninstall.addEventListener('click', () => { | |
| models = models.filter(model => model.id !== modelToUninstall); | |
| renderModels(); | |
| confirmationModal.classList.add('hidden'); | |
| modelToUninstall = null; | |
| }); | |
| // AI Agent Interface functionality | |
| const chatArea = document.getElementById('chat-area'); | |
| const chatInput = document.getElementById('chat-input'); | |
| const sendMessageBtn = document.getElementById('send-message'); | |
| const clearChatBtn = document.getElementById('clear-chat'); | |
| sendMessageBtn.addEventListener('click', sendMessage); | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| clearChatBtn.addEventListener('click', () => { | |
| chatArea.innerHTML = ` | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-end"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="bg-teal-500 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-robot text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-xs md:max-w-md bg-gray-800 rounded-lg px-4 py-2"> | |
| <p class="text-sm">Hello, I'm your AI assistant. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (!message) return; | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'chat-message mb-4'; | |
| userMessage.innerHTML = ` | |
| <div class="flex items-end justify-end"> | |
| <div class="max-w-xs md:max-w-md bg-teal-600 rounded-lg px-4 py-2"> | |
| <p class="text-sm">${message}</p> | |
| </div> | |
| <div class="flex-shrink-0 ml-3"> | |
| <div class="bg-gray-700 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-user text-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatArea.appendChild(userMessage); | |
| // Clear input | |
| chatInput.value = ''; | |
| // Add thinking indicator | |
| const thinking = document.createElement('div'); | |
| thinking.className = 'chat-message mb-4'; | |
| thinking.innerHTML = ` | |
| <div class="flex items-end"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="bg-teal-500 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-robot text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-xs md:max-w-md bg-gray-800 rounded-lg px-4 py-2"> | |
| <div class="flex space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-100"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-200"></div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatArea.appendChild(thinking); | |
| // Scroll to bottom | |
| chatArea.scrollTop = chatArea.scrollHeight; | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| thinking.remove(); | |
| const responses = [ | |
| `I've processed your request about "${message}" and found relevant data. Would you like me to elaborate on any specific aspect?`, | |
| `Analysis complete. Based on my neural networks, I recommend checking the connected datasets for more context.`, | |
| `Command understood. Executing task... Task completed successfully with 98.7% accuracy.`, | |
| `Interesting inquiry! My neural matrix suggests this correlates with patterns we've seen before in similar contexts.`, | |
| `Processing complete. The operation took 423ms across 8.2 million parameters.` | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'chat-message mb-4'; | |
| aiMessage.innerHTML = ` | |
| <div class="flex items-end"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="bg-teal-500 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-robot text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-xs md:max-w-md bg-gray-800 rounded-lg px-4 py-2"> | |
| <p class="text-sm">${randomResponse}</p> | |
| </div> | |
| </div> | |
| `; | |
| chatArea.appendChild(aiMessage); | |
| // Scroll to bottom again | |
| chatArea.scrollTop = chatArea.scrollHeight; | |
| }, 1500 + Math.random() * 2000); | |
| } | |
| // Initialize everything | |
| renderFiles(); | |
| renderModels(); | |
| }); | |
| </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=BlaqQloud/maybe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |