index.html•6.73 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semiconductor Component Search - MCP RAG System</title>
<link rel="stylesheet" href="/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="header-content">
<div class="logo">
<i class="fas fa-microchip"></i>
<h1>Semiconductor Component Search</h1>
</div>
<div class="header-subtitle">
<p>MCP-based RAG System with ChromaDB</p>
<span class="status-badge" id="statusBadge">
<i class="fas fa-circle"></i> <span id="statusText">Checking...</span>
</span>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<!-- Upload Section -->
<section class="card upload-section">
<div class="card-header">
<h2><i class="fas fa-upload"></i> Upload Document</h2>
<p>Upload your Excel file with semiconductor components</p>
</div>
<div class="upload-area" id="uploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<p>Drag & drop your Excel file here or <span class="browse-link">browse</span></p>
<input type="file" id="fileInput" accept=".xlsx,.xls" hidden>
<small>Supported formats: .xlsx, .xls</small>
</div>
<div class="upload-progress" id="uploadProgress" style="display: none;">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<p id="uploadStatus">Uploading...</p>
</div>
<div class="upload-result" id="uploadResult"></div>
</section>
<!-- Question Section -->
<section class="card question-section">
<div class="card-header">
<h2><i class="fas fa-question-circle"></i> Ask Questions</h2>
<p>Ask questions about the uploaded semiconductor components</p>
</div>
<div class="question-input-group">
<div class="input-wrapper">
<i class="fas fa-search"></i>
<input
type="text"
id="questionInput"
placeholder="e.g., What MOSFET components are available?"
autocomplete="off"
>
<button id="askButton" class="btn-primary">
<i class="fas fa-paper-plane"></i> Ask
</button>
</div>
<div class="quick-questions">
<span>Quick questions:</span>
<button class="quick-btn" data-question="What MOSFET components are available?">MOSFET</button>
<button class="quick-btn" data-question="Show me voltage regulators">Voltage Regulators</button>
<button class="quick-btn" data-question="What components work with 5V?">5V Components</button>
<button class="quick-btn" data-question="List components from Texas Instruments">Texas Instruments</button>
<button class="quick-btn" data-question="What temperature sensors are available?">Temperature Sensors</button>
</div>
</div>
<div class="answer-section" id="answerSection" style="display: none;">
<div class="answer-header">
<h3><i class="fas fa-lightbulb"></i> Answer</h3>
<button class="btn-icon" id="copyButton" title="Copy answer">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="answer-content" id="answerContent"></div>
<div class="context-section">
<h4><i class="fas fa-file-alt"></i> Retrieved Context</h4>
<div class="context-items" id="contextItems"></div>
</div>
</div>
</section>
<!-- Info Section -->
<section class="card info-section">
<div class="card-header">
<h2><i class="fas fa-info-circle"></i> Collection Information</h2>
</div>
<div class="info-grid" id="infoGrid">
<div class="info-item">
<i class="fas fa-database"></i>
<div>
<h3 id="docCount">-</h3>
<p>Documents</p>
</div>
</div>
<div class="info-item">
<i class="fas fa-folder"></i>
<div>
<h3 id="collectionName">-</h3>
<p>Collection</p>
</div>
</div>
<div class="info-item">
<i class="fas fa-check-circle"></i>
<div>
<h3 id="collectionStatus">-</h3>
<p>Status</p>
</div>
</div>
</div>
<button class="btn-secondary" id="refreshInfoBtn">
<i class="fas fa-sync-alt"></i> Refresh Info
</button>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<p>Powered by MCP (Model Context Protocol) | ChromaDB | RAG Pipeline | Node.js Frontend</p>
</footer>
</div>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
<div class="spinner"></div>
<p>Processing...</p>
</div>
<!-- Toast Notifications -->
<div class="toast-container" id="toastContainer"></div>
<script src="/script.js"></script>
</body>
</html>