Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Knowledge Base Server</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/@supabase/supabase-js@2"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .knowledge-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid #6e8efb; | |
| } | |
| .knowledge-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .file-upload { | |
| border: 2px dashed #a777e3; | |
| transition: all 0.3s ease; | |
| } | |
| .file-upload:hover { | |
| background-color: rgba(167, 119, 227, 0.1); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255,255,255,0.1); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(110, 142, 251, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0); } | |
| } | |
| .auth-modal { | |
| transition: all 0.3s ease; | |
| } | |
| .auth-modal.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .auth-modal:not(.hidden) { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Auth Modal --> | |
| <div id="auth-modal" class="auth-modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold" id="auth-modal-title">Sign In</h3> | |
| <button id="close-auth-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div id="auth-tabs" class="flex border-b border-gray-200 mb-6"> | |
| <button class="auth-tab px-4 py-2 font-medium text-purple-600 border-b-2 border-purple-600" data-tab="signin">Sign In</button> | |
| <button class="auth-tab px-4 py-2 font-medium text-gray-500 hover:text-gray-700" data-tab="signup">Sign Up</button> | |
| <button class="auth-tab px-4 py-2 font-medium text-gray-500 hover:text-gray-700" data-tab="forgot">Forgot Password</button> | |
| </div> | |
| <!-- Sign In Form --> | |
| <div id="signin-form" class="auth-form"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="signin-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="signin-password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <button id="signin-btn" class="w-full gradient-bg text-white py-2 px-4 rounded-md font-medium mb-4"> | |
| Sign In | |
| </button> | |
| <div class="text-center text-sm text-gray-500"> | |
| Or sign in with | |
| </div> | |
| <div class="flex justify-center space-x-4 mt-4"> | |
| <button id="google-signin" class="p-2 border border-gray-300 rounded-full hover:bg-gray-50"> | |
| <i class="fab fa-google text-red-500"></i> | |
| </button> | |
| <button id="github-signin" class="p-2 border border-gray-300 rounded-full hover:bg-gray-50"> | |
| <i class="fab fa-github text-gray-800"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Sign Up Form --> | |
| <div id="signup-form" class="auth-form hidden"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="signup-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="signup-password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label> | |
| <input type="password" id="signup-confirm-password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <button id="signup-btn" class="w-full gradient-bg text-white py-2 px-4 rounded-md font-medium"> | |
| Create Account | |
| </button> | |
| </div> | |
| <!-- Forgot Password Form --> | |
| <div id="forgot-form" class="auth-form hidden"> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="forgot-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <button id="forgot-btn" class="w-full gradient-bg text-white py-2 px-4 rounded-md font-medium"> | |
| Send Reset Link | |
| </button> | |
| </div> | |
| <div id="auth-message" class="mt-4 text-center text-sm hidden"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main App (hidden until authenticated) --> | |
| <div id="app-container" class="hidden"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-gray-900 text-white flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h1 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-brain mr-2 text-purple-400"></i> | |
| AI Knowledge Base | |
| </h1> | |
| <p class="text-gray-400 text-sm mt-1">Your centralized intelligence hub</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center"> | |
| <i class="fas fa-folder-open mr-2 text-blue-400"></i> | |
| Categories | |
| </h2> | |
| <ul id="categories-list" class="space-y-1"> | |
| <li class="sidebar-item px-3 py-2 rounded cursor-pointer bg-gray-800"> | |
| <i class="fas fa-code mr-2 text-green-400"></i> | |
| Code Frameworks | |
| </li> | |
| <li class="sidebar-item px-3 py-2 rounded cursor-pointer"> | |
| <i class="fas fa-file-alt mr-2 text-yellow-400"></i> | |
| Documentation | |
| </li> | |
| <li class="sidebar-item px-3 py-2 rounded cursor-pointer"> | |
| <i class="fas fa-chart-line mr-2 text-red-400"></i> | |
| Analytics | |
| </li> | |
| <li class="sidebar-item px-3 py-2 rounded cursor-pointer"> | |
| <i class="fas fa-project-diagram mr-2 text-purple-400"></i> | |
| Projects | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center"> | |
| <i class="fas fa-tags mr-2 text-blue-400"></i> | |
| Popular Tags | |
| </h2> | |
| <div id="tags-list" class="flex flex-wrap gap-2"> | |
| <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer"> | |
| #python | |
| </span> | |
| <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer"> | |
| #ai | |
| </span> | |
| <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer"> | |
| #flask | |
| </span> | |
| <span class="sidebar-item px-2 py-1 rounded-full text-xs bg-gray-800 cursor-pointer"> | |
| #machinelearning | |
| </span> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center"> | |
| <i class="fas fa-cog mr-2 text-blue-400"></i> | |
| AI Models | |
| </h2> | |
| <ul class="space-y-2"> | |
| <li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center justify-between"> | |
| <div> | |
| <i class="fas fa-robot mr-2 text-green-400"></i> | |
| DeepSeek V3.1 | |
| </div> | |
| <span class="text-xs bg-green-500 text-white px-2 py-1 rounded-full">Active</span> | |
| </li> | |
| <li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center"> | |
| <i class="fas fa-robot mr-2 text-blue-400"></i> | |
| Local LLM | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <button id="upload-btn" class="w-full gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt mr-2"></i> | |
| Upload Knowledge | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="relative w-64"> | |
| <input type="text" placeholder="Search knowledge base..." | |
| class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="pulse-animation gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> | |
| Train AI Model | |
| </button> | |
| <div id="user-menu" class="relative"> | |
| <button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none"> | |
| <div class="h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <span id="user-email" class="text-sm font-medium"></span> | |
| </button> | |
| <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <button id="signout-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign Out</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Knowledge Repository</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white border border-gray-300 px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-filter mr-2 text-gray-500"></i> | |
| Filter | |
| </button> | |
| <button class="bg-white border border-gray-300 px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-sort mr-2 text-gray-500"></i> | |
| Sort | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total Files</p> | |
| <h3 class="text-2xl font-bold">1,248</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-500"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">AI Models</p> | |
| <h3 class="text-2xl font-bold">5</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-500"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Knowledge Used</p> | |
| <h3 class="text-2xl font-bold">87%</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-500"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Last Training</p> | |
| <h3 class="text-2xl font-bold">2h ago</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-500"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Knowledge Items --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Sample knowledge cards --> | |
| <div class="knowledge-card bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-lg bg-blue-100 text-blue-500 mr-3"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Custom AI Framework</h4> | |
| <p class="text-gray-500 text-sm">Advanced neural network implementation</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Complete implementation of our proprietary AI framework with custom layers and optimization techniques.</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">#python</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-600 text-xs rounded-full">#tensorflow</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">#ai</span> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-500"> | |
| <span>Updated 3 days ago</span> | |
| <span>1.2 MB</span> | |
| </div> | |
| </div> | |
| <div class="knowledge-card bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-lg bg-purple-100 text-purple-500 mr-3"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Project Blueprint</h4> | |
| <p class="text-gray-500 text-sm">Architecture documentation</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Detailed system architecture and component interactions for our flagship AI product.</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">#architecture</span> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full">#documentation</span> | |
| <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">#design</span> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-500"> | |
| <span>Updated 1 week ago</span> | |
| <span>450 KB</span> | |
| </div> | |
| </div> | |
| <div class="knowledge-card bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-start justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-lg bg-green-100 text-green-500 mr-3"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Performance Metrics</h4> | |
| <p class="text-gray-500 text-sm">Model evaluation results</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Comprehensive evaluation of model performance across different datasets and parameters.</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">#analytics</span> | |
| <span class="px-2 py-1 bg-indigo-100 text-indigo-600 text-xs rounded-full">#metrics</span> | |
| <span class="px-2 py-1 bg-pink-100 text-pink-600 text-xs rounded-full">#evaluation</span> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-500"> | |
| <span>Updated yesterday</span> | |
| <span>780 KB</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upload Modal --> | |
| <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold">Upload to Knowledge Base</h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="file-upload p-8 rounded-lg text-center mb-6 cursor-pointer"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-purple-500 mb-3"></i> | |
| <p class="font-medium">Drag & drop files here or click to browse</p> | |
| <p class="text-gray-500 text-sm mt-1">Supports: .py, .js, .html, .css, .pdf, .txt, .md, .ipynb</p> | |
| <input type="file" id="file-input" class="hidden" multiple> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categories</label> | |
| <input type="text" placeholder="e.g. Frameworks, Documentation" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tags</label> | |
| <input type="text" placeholder="e.g. python, ai, flask" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea rows="3" placeholder="Brief description of the knowledge content" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancel-upload" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> | |
| Cancel | |
| </button> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90"> | |
| <i class="fas fa-save mr-2"></i> | |
| Save Knowledge | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Training Modal --> | |
| <div id="training-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold">Train AI Model with Knowledge</h3> | |
| <button id="close-training-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Select AI Model</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option>DeepSeek V3.1</option> | |
| <option>Local LLM</option> | |
| <option>Custom Fine-tuned Model</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Select Knowledge to Include</label> | |
| <div class="border border-gray-300 rounded-md p-4 max-h-64 overflow-y-auto"> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="knowledge-1" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> | |
| <label for="knowledge-1" class="ml-2 block text-sm text-gray-700"> | |
| Custom AI Framework (Advanced neural network implementation) | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="knowledge-2" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> | |
| <label for="knowledge-2" class="ml-2 block text-sm text-gray-700"> | |
| Project Blueprint (Architecture documentation) | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="knowledge-3" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> | |
| <label for="knowledge-3" class="ml-2 block text-sm text-gray-700"> | |
| Performance Metrics (Model evaluation results) | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Training Parameters</label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Epochs</label> | |
| <input type="number" value="10" min="1" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Learning Rate</label> | |
| <input type="number" step="0.0001" value="0.001" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancel-training" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> | |
| Cancel | |
| </button> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90"> | |
| <i class="fas fa-bolt mr-2"></i> | |
| Start Training | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Supabase Configuration | |
| const supabaseUrl = 'https://xlfboxorogcafgkokjeg.supabase.co'; | |
| const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhsZmJveG9yb2djYWZna29ramVnIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDU3ODgzNDAsImV4cCI6MjA2MTM2NDM0MH0.Ohi958kKpbLGv5xRmwbtyw1nadPUxcZVJf-Jf0VTs9c'; | |
| const supabase = supabase.createClient(supabaseUrl, supabaseKey); | |
| // DOM Elements | |
| const authModal = document.getElementById('auth-modal'); | |
| const closeAuthModal = document.getElementById('close-auth-modal'); | |
| const authTabs = document.querySelectorAll('.auth-tab'); | |
| const authForms = document.querySelectorAll('.auth-form'); | |
| const authModalTitle = document.getElementById('auth-modal-title'); | |
| const authMessage = document.getElementById('auth-message'); | |
| const appContainer = document.getElementById('app-container'); | |
| const userMenuButton = document.getElementById('user-menu-button'); | |
| const userDropdown = document.getElementById('user-dropdown'); | |
| const userEmail = document.getElementById('user-email'); | |
| const signoutBtn = document.getElementById('signout-btn'); | |
| // Auth Form Elements | |
| const signinForm = document.getElementById('signin-form'); | |
| const signupForm = document.getElementById('signup-form'); | |
| const forgotForm = document.getElementById('forgot-form'); | |
| const signinEmail = document.getElementById('signin-email'); | |
| const signinPassword = document.getElementById('signin-password'); | |
| const signinBtn = document.getElementById('signin-btn'); | |
| const signupEmail = document.getElementById('signup-email'); | |
| const signupPassword = document.getElementById('signup-password'); | |
| const signupConfirmPassword = document.getElementById('signup-confirm-password'); | |
| const signupBtn = document.getElementById('signup-btn'); | |
| const forgotEmail = document.getElementById('forgot-email'); | |
| const forgotBtn = document.getElementById('forgot-btn'); | |
| const googleSignin = document.getElementById('google-signin'); | |
| const githubSignin = document.getElementById('github-signin'); | |
| // Check auth state on page load | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| // Show auth modal by default | |
| authModal.classList.remove('hidden'); | |
| // Check if user is already signed in | |
| const { data: { session }, error } = await supabase.auth.getSession(); | |
| if (session) { | |
| // User is signed in | |
| handleSignedIn(session.user); | |
| } else { | |
| // User is not signed in | |
| authModal.classList.remove('hidden'); | |
| appContainer.classList.add('hidden'); | |
| } | |
| }); | |
| // Auth Tab Switching | |
| authTabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| const tabName = tab.getAttribute('data-tab'); | |
| // Update active tab | |
| authTabs.forEach(t => { | |
| t.classList.remove('text-purple-600', 'border-purple-600'); | |
| t.classList.add('text-gray-500', 'hover:text-gray-700'); | |
| }); | |
| tab.classList.remove('text-gray-500', 'hover:text-gray-700'); | |
| tab.classList.add('text-purple-600', 'border-purple-600'); | |
| // Update form visibility | |
| authForms.forEach(form => { | |
| form.classList.add('hidden'); | |
| }); | |
| // Update modal title | |
| if (tabName === 'signin') { | |
| authModalTitle.textContent = 'Sign In'; | |
| signinForm.classList.remove('hidden'); | |
| } else if (tabName === 'signup') { | |
| authModalTitle.textContent = 'Sign Up'; | |
| signupForm.classList.remove('hidden'); | |
| } else if (tabName === 'forgot') { | |
| authModalTitle.textContent = 'Forgot Password'; | |
| forgotForm.classList.remove('hidden'); | |
| } | |
| // Clear any messages | |
| authMessage.classList.add('hidden'); | |
| authMessage.textContent = ''; | |
| }); | |
| }); | |
| // Close Auth Modal | |
| closeAuthModal.addEventListener('click', () => { | |
| authModal.classList.add('hidden'); | |
| }); | |
| // Sign In | |
| signinBtn.addEventListener('click', async () => { | |
| const email = signinEmail.value; | |
| const password = signinPassword.value; | |
| if (!email || !password) { | |
| showAuthMessage('Please enter both email and password', 'error'); | |
| return; | |
| } | |
| const { data, error } = await supabase.auth.signInWithPassword({ | |
| email, | |
| password | |
| }); | |
| if (error) { | |
| showAuthMessage(error.message, 'error'); | |
| } else { | |
| handleSignedIn(data.user); | |
| authModal.classList.add | |
| </html> |