Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LPS Embedded AI Agent</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%); | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transform: translateX(4px); | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .mode-indicator { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| 100% { opacity: 1; } | |
| } | |
| .command-line { | |
| font-family: 'Courier New', monospace; | |
| } | |
| .security-level { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-blue-400"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-xl mr-2"></i> | |
| <span class="text-xl font-bold">LPS AI</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-terminal mr-3"></i> | |
| <span>Command Center</span> | |
| </div> | |
| <div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-lock mr-3"></i> | |
| <span>Security Logs</span> | |
| </div> | |
| <div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span>Revenue Pulse</span> | |
| </div> | |
| <div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-cogs mr-3"></i> | |
| <span>Agent Settings</span> | |
| </div> | |
| <div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-plug mr-3"></i> | |
| <span>Overlay Marketplace</span> | |
| </div> | |
| </div> | |
| <div class="mt-auto mb-6"> | |
| <div class="bg-blue-900 bg-opacity-50 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-400 mr-2 mode-indicator"></div> | |
| <span class="text-sm font-medium">Adaptive Mode</span> | |
| </div> | |
| <p class="text-xs text-blue-200">Agent is operating in multi-persona mode, dynamically switching between roles.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search commands..." type="search"> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-comment-alt"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-blue-500"></span> | |
| </div> | |
| </div> | |
| <div class="flex items-center ml-4 md:ml-6"> | |
| <div class="relative"> | |
| <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500" id="user-menu"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-50"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">LPS Embedded AI Agent</h1> | |
| <p class="text-gray-600">Mission: Guide. Guard. Grow.</p> | |
| </div> | |
| <!-- Agent Status --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Agent Status</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Current Mode</p> | |
| <p class="font-medium">Adaptive Multi-Persona</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Security Level</p> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full security-level" style="width: 92%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium text-gray-700">92%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Memory Usage</p> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium text-gray-700">65%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Active Personas</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">3 Active</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-drafting-compass text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Architect</p> | |
| <p class="text-xs text-gray-500">Strategy & Roadmap</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-green-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Sentinel</p> | |
| <p class="text-xs text-gray-500">Auto-defense</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-hand-holding-usd text-purple-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Economist</p> | |
| <p class="text-xs text-gray-500">Revenue optimization</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Revenue Pulse</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">+12%</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Token Usage</p> | |
| <p class="font-medium">4,892 / 10,000</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">CaaS ROI</p> | |
| <p class="font-medium">$2,450.00</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Top Overlay</p> | |
| <p class="font-medium">Secure-GPT (42%)</p> | |
| </div> | |
| <button class="w-full mt-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm font-medium transition duration-150 ease-in-out"> | |
| View Monetization Dashboard | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Command Center --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="lg:col-span-2 dashboard-card bg-white rounded-lg shadow"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium">Command Center</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="bg-gray-900 rounded-lg p-4 text-green-400 command-line mb-4"> | |
| <p class="font-mono">npx generate-saas --overlay=secure-gpt --cofounder-mode --ai-guard</p> | |
| <p class="font-mono mt-2">✅ Schema validated. GPT sandboxed. Would you like to attach a monetization contract?</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Architect Mode Suggestion</p> | |
| <p class="text-sm text-gray-600">This overlay has 3 monetization opportunities. Would you like to explore them?</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">View Options</button> | |
| <button class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">Dismiss</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-red-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Security Alert</p> | |
| <p class="text-sm text-gray-600">Command entropy threshold at 85%. Recommend throttling or prompt revision.</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Throttle</button> | |
| <button class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">Revise</button> | |
| <button class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Ignore</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="command" class="block text-sm font-medium text-gray-700">Enter Command</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> | |
| LPS> | |
| </span> | |
| <input type="text" name="command" id="command" class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="Type your command..."> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="dashboard-card bg-white rounded-lg shadow"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium">Quick Actions</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-blue-50 hover:bg-blue-100 text-blue-800 transition duration-150 ease-in-out"> | |
| <i class="fas fa-terminal text-xl mb-2"></i> | |
| <span class="text-sm font-medium">CLI Mode</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-green-50 hover:bg-green-100 text-green-800 transition duration-150 ease-in-out"> | |
| <i class="fas fa-lock text-xl mb-2"></i> | |
| <span class="text-sm font-medium">Secure Zone</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-purple-50 hover:bg-purple-100 text-purple-800 transition duration-150 ease-in-out"> | |
| <i class="fas fa-chart-line text-xl mb-2"></i> | |
| <span class="text-sm font-medium">Revenue Pulse</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-yellow-50 hover:bg-yellow-100 text-yellow-800 transition duration-150 ease-in-out"> | |
| <i class="fas fa-bug text-xl mb-2"></i> | |
| <span class="text-sm font-medium">Test Overlay</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-red-50 hover:bg-red-100 text-red-800 transition duration-150 ease-in-out"> | |
| <i class="fas fa-flag text-xl mb-2"></i> | |
| <span class="text-sm font-medium">Flag Anomaly</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-800 transition duration-150 ease-in-out"> | |
| <i class="fas fa-dog text-xl mb-2"></i> | |
| <span class="text-sm font-medium">Request K9</span> | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Voice Command</h4> | |
| <button class="w-full flex items-center justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-microphone mr-2"></i> Activate Voice Mode | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Logs --> | |
| <div class="dashboard-card bg-white rounded-lg shadow mb-6"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-medium">Security Logs</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">3 New Alerts</span> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severity</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 min ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Schema Violation</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">Medium</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Auto-corrected</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 min ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Command Replay Attack</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">High</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Blocked & Alerted</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 hr ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Drift Risk Detected</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-orange-500">High</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Throttled</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 hrs ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Entropy Threshold</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">Medium</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Prompt Revised</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">View All Security Logs</button> | |
| </div> | |
| </div> | |
| <!-- Agent Communication --> | |
| <div class="dashboard-card bg-white rounded-lg shadow"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium">Agent Communication</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="bg-blue-50 rounded-lg p-4 mb-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-robot text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-blue-800">LPS AI Agent</p> | |
| <p class="text-sm text-blue-700 mt-1">Welcome back. I'm operating in Adaptive Multi-Persona mode. Would you like to: [1] Run a command [2] Explore overlays [3] Draft a pitch [4] Review security logs?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="min-w-0 flex-1"> | |
| <form> | |
| <div class="border border-gray-300 rounded-lg shadow | |
| </html> |