|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>AI Document Assistant</title> |
|
<link rel="stylesheet" href="../static/css/style.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
|
|
<div class="sidebar"> |
|
<div class="sidebar-header"> |
|
<div class="logo"> |
|
<i class="fas fa-robot"></i> |
|
<h2>DocChat AI</h2> |
|
</div> |
|
<p class="subtitle">Intelligent Document Analysis</p> |
|
<div class="header-actions"> |
|
<button class="theme-toggle" id="themeToggle"> |
|
<i class="fas fa-moon"></i> |
|
</button> |
|
<a href="#" class="help-button"> |
|
<i class="fas fa-question-circle"></i> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="upload-section"> |
|
<h3><i class="fas fa-cloud-upload-alt"></i> Document Upload</h3> |
|
<div class="upload-box" id="dropZone"> |
|
<div class="upload-icon"> |
|
<i class="fas fa-file-pdf"></i> |
|
<div class="upload-pulse"></div> |
|
</div> |
|
<p class="upload-text">Drag & Drop PDF files here</p> |
|
<p class="upload-divider">or</p> |
|
<label for="fileInput" class="upload-btn"> |
|
<i class="fas fa-folder-open"></i> |
|
Choose Files |
|
</label> |
|
<input type="file" id="fileInput" multiple accept=".pdf" hidden> |
|
</div> |
|
|
|
<div class="uploaded-files" id="uploadedFiles"> |
|
<h3><i class="fas fa-folder-open"></i> Uploaded Documents</h3> |
|
<div class="file-list-container"> |
|
<ul id="fileList"></ul> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="sidebar-footer"> |
|
<p>Powered by AI Technology</p> |
|
<div class="tech-stack"> |
|
<i class="fas fa-brain" title="AI"></i> |
|
<i class="fas fa-database" title="Vector DB"></i> |
|
<i class="fas fa-network-wired" title="Neural Networks"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
<div class="main-content"> |
|
|
|
<div class="chat-container" id="chatContainer"> |
|
|
|
<div class="welcome-message"> |
|
<div class="welcome-header"> |
|
<h1>AI Document Assistant</h1> |
|
<p>Advanced Document Analysis & Interactive Chat System</p> |
|
</div> |
|
<div class="welcome-icon"> |
|
<i class="fas fa-book-reader"></i> |
|
</div> |
|
<div class="feature-list"> |
|
<div class="feature"> |
|
<i class="fas fa-file-pdf"></i> |
|
<span>PDF Analysis</span> |
|
<p>Upload and analyze any PDF document</p> |
|
</div> |
|
<div class="feature"> |
|
<i class="fas fa-brain"></i> |
|
<span>AI-Powered</span> |
|
<p>Advanced AI for accurate responses</p> |
|
</div> |
|
<div class="feature"> |
|
<i class="fas fa-search"></i> |
|
<span>Smart Search</span> |
|
<p>Intelligent context understanding</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="chat-messages" id="chatMessages"></div> |
|
|
|
|
|
<div class="chat-input-container"> |
|
<div class="input-wrapper"> |
|
<input type="text" |
|
id="userInput" |
|
placeholder="Ask a question about your documents..." |
|
autocomplete="off"> |
|
<button id="sendButton"> |
|
<i class="fas fa-paper-plane"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<script src="../static/js/main.js"></script> |
|
</body> |
|
</html> |
|
|
