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