|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Knowledge Base System</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> |
|
|
.file-upload { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
display: inline-block; |
|
|
} |
|
|
.file-upload input[type="file"] { |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
opacity: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
cursor: pointer; |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-icon { |
|
|
margin-right: 0; |
|
|
} |
|
|
.content { |
|
|
transition: margin-left 0.3s ease; |
|
|
} |
|
|
.knowledge-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
.code-block { |
|
|
font-family: 'Courier New', monospace; |
|
|
background-color: #2d3748; |
|
|
color: #f7fafc; |
|
|
border-radius: 0.375rem; |
|
|
padding: 1rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.drag-over { |
|
|
background-color: #f0f7ff; |
|
|
border-color: #3b82f6; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="flex h-screen"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex flex-col"> |
|
|
<div class="p-4 flex items-center justify-between border-b border-indigo-700"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-brain text-2xl sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text font-bold text-xl">AI Knowledge Base</span> |
|
|
</div> |
|
|
<button id="toggleSidebar" class="text-white focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
<nav class="flex-1 p-4"> |
|
|
<ul> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700 active-nav"> |
|
|
<i class="fas fa-home sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Dashboard</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-upload sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Upload Files</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-database sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Knowledge Base</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-robot sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">AI Integration</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-cog sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Settings</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
<div class="p-4 border-t border-indigo-700"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-3"> |
|
|
<div class="sidebar-text"> |
|
|
<div class="font-medium">Admin User</div> |
|
|
<div class="text-xs text-indigo-300">admin@example.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content flex flex-1 flex-col overflow-hidden ml-64"> |
|
|
|
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Knowledge Base Dashboard</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search knowledge..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button id="newUploadBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-plus mr-2"></i> New Upload |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8" id="statsContainer"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 mb-8"> |
|
|
<h2 class="text-xl font-bold mb-4">Upload Knowledge Files</h2> |
|
|
<div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
|
|
<div class="file-upload"> |
|
|
<button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-cloud-upload-alt mr-2"></i> Choose Files |
|
|
</button> |
|
|
<input type="file" id="fileInput" multiple> |
|
|
</div> |
|
|
<p class="mt-2 text-gray-500">or drag and drop files here</p> |
|
|
<p class="text-sm text-gray-400 mt-4">Supports: PDF, DOCX, TXT, PPTX, XLSX, CSV, PY, JS, HTML, etc.</p> |
|
|
</div> |
|
|
<div id="uploadProgress" class="mt-4 hidden"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium">Uploading...</span> |
|
|
<span class="text-sm font-medium" id="progressPercent">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div id="uploadList" class="mt-4 space-y-2 hidden"> |
|
|
<h3 class="font-medium">Uploaded Files:</h3> |
|
|
<ul id="fileList"></ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Recent Knowledge Files</h2> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800">View All</a> |
|
|
</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">Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Uploaded</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="recentFilesTable" class="bg-white divide-y divide-gray-200"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-xl font-bold mb-4">AI Model Integration</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="aiModelsContainer"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-lg font-semibold mb-4">Knowledge Query Interface</h3> |
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<div id="chatContainer" class="max-h-96 overflow-y-auto mb-4"> |
|
|
|
|
|
</div> |
|
|
<div class="flex"> |
|
|
<input id="aiQueryInput" type="text" placeholder="Ask the AI about your knowledge..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button id="sendQueryBtn" class="bg-indigo-600 text-white px-6 py-2 rounded-r-lg hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<h3 class="text-lg font-bold mb-2" id="modalTitle">Confirm Action</h3> |
|
|
<p class="text-gray-600 mb-4" id="modalMessage">Are you sure you want to perform this action?</p> |
|
|
<div class="flex justify-end space-x-4"> |
|
|
<button id="modalCancelBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Cancel</button> |
|
|
<button id="modalConfirmBtn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Confirm</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="filePreviewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-4xl w-full max-h-[90vh] overflow-auto"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold" id="filePreviewTitle">File Preview</h3> |
|
|
<button id="closePreviewBtn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="filePreviewContent" class="mt-4"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Class definitions |
|
|
class KnowledgeBaseFile { |
|
|
constructor(file) { |
|
|
this.id = crypto.randomUUID(); |
|
|
this.name = file.name; |
|
|
this.size = file.size; |
|
|
this.type = this.getFileType(file.name); |
|
|
this.uploaded = new Date(); |
|
|
this.content = ''; |
|
|
this.loadContent(file); |
|
|
this.icon = this.getFileIcon(); |
|
|
} |
|
|
|
|
|
getFileType(filename) { |
|
|
const ext = filename.split('.').pop().toLowerCase(); |
|
|
if (['pdf'].includes(ext)) return 'PDF'; |
|
|
if (['docx', 'doc'].includes(ext)) return 'Word'; |
|
|
if (['xlsx', 'xls', 'csv'].includes(ext)) return 'Excel'; |
|
|
if (['pptx', 'ppt'].includes(ext)) return 'PowerPoint'; |
|
|
if (['txt'].includes(ext)) return 'Text'; |
|
|
if (['py'].includes(ext)) return 'Python'; |
|
|
if (['js'].includes(ext)) return 'JavaScript'; |
|
|
if (['html', 'htm'].includes(ext)) return 'HTML'; |
|
|
if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) return 'Image'; |
|
|
return 'Unknown'; |
|
|
} |
|
|
|
|
|
getFileIcon() { |
|
|
switch(this.type) { |
|
|
case 'PDF': return 'fa-file-pdf text-red-500'; |
|
|
case 'Word |
|
|
</html> |
