mirror of
https://github.com/HKUDS/LightRAG.git
synced 2025-07-03 15:10:03 +00:00
293 lines
12 KiB
HTML
293 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>LightRAG</title>
|
||
<style>
|
||
:root {
|
||
--primary: #4F46E5;
|
||
--secondary: #10B981;
|
||
--background: #F8FAFC;
|
||
--surface: #FFFFFF;
|
||
--text-primary: #1E293B;
|
||
--text-secondary: #64748B;
|
||
--border: #E2E8F0;
|
||
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" type="text/css" href="css/lightrag.css">
|
||
<link rel="stylesheet" type="text/css" href="css/graph.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<nav class="nav-panel">
|
||
<h2 class="nav-title">LightRAG</h2>
|
||
<div class="nav-menu">
|
||
<button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
|
||
onclick="showSection('documents')">
|
||
📁 DOC MANAGE
|
||
</button>
|
||
<button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
|
||
onclick="showSection('text-upload')">
|
||
📝 TEXT UPLOAD
|
||
</button>
|
||
|
||
<button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;" onclick="showSection('query')">
|
||
🔍 GRAPH SEARCH
|
||
</button>
|
||
<button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
|
||
onclick="showSection('label-management'); loadLabels()">
|
||
🏷️ GRAPH MANAGE
|
||
</button>
|
||
<button class="btn btn-secondary" style="width: 100%;" onclick="showSection('status')">
|
||
📊 SYSTEM STATUS
|
||
</button>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="main-content">
|
||
<section id="documents" class="card">
|
||
<h3 class="card-title">DOC MANAGE</h3>
|
||
<div class="file-dropzone" id="dropzone">
|
||
<input type="file" id="fileInput" hidden multiple>
|
||
<p>Drap file</p>
|
||
<button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
|
||
📤 select file
|
||
</button>
|
||
<div class="file-list" style="margin-top: 1rem;"></div>
|
||
<div class="status-indicator" id="fileUploadStatus"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="text-upload" class="card" style="display: none;">
|
||
<h3 class="card-title">TEXT UPLOAD</h3>
|
||
<div class="text-upload-form">
|
||
<div class="form-group">
|
||
<label for="textDescription">Title（optional）</label>
|
||
<input
|
||
type="text"
|
||
id="textDescription"
|
||
class="input-field"
|
||
placeholder="Please enter a text title..."
|
||
>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="textContent">TEXT CONTENT</label>
|
||
<textarea
|
||
id="textContent"
|
||
class="input-field"
|
||
placeholder="lease enter a text content..."
|
||
rows="8"
|
||
required
|
||
></textarea>
|
||
</div>
|
||
<div class="action-bar">
|
||
<button class="btn btn-primary" onclick="handleTextUpload()">
|
||
📤 submit
|
||
</button>
|
||
<div class="status-indicator" id="textUploadStatus"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="label-management" class="card" style="display: none;">
|
||
<h3 class="card-title">GRAPH MANAGE(neo4j)</h3>
|
||
<div class="action-bar" style="margin-bottom: 1rem;">
|
||
<button class="btn btn-secondary" onclick="refreshLabels()">
|
||
🔄 refresh
|
||
</button>
|
||
</div>
|
||
<div id="label-list" class="label-container">
|
||
</div>
|
||
</section>
|
||
|
||
<!-- search -->
|
||
<section id="query" class="card" style="display: none;">
|
||
<h3 class="card-title">SEARCH API</h3>
|
||
<select class="input-field" style="margin-bottom: 1rem;">
|
||
<option value="local">local search</option>
|
||
<option value="global">global search</option>
|
||
<option value="native">native search</option>
|
||
<option value="hybrid">hybrid search</option>
|
||
<option value="mix">mix search</option>
|
||
</select>
|
||
<textarea
|
||
class="input-field"
|
||
placeholder="enter your content..."
|
||
style="height: 120px; resize: vertical;"
|
||
></textarea>
|
||
<div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
|
||
<button class="btn btn-primary">🔍 searching</button>
|
||
<label class="btn btn-secondary">
|
||
<input type="checkbox" style="margin-right: 0.5rem;">stream modal
|
||
</label>
|
||
</div>
|
||
<div class="results"
|
||
style="margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 8px;"></div>
|
||
</section>
|
||
|
||
|
||
<section id="status" class="card" style="display: none;">
|
||
<h3 class="card-title">System Status</h3>
|
||
<div class="status-grid">
|
||
<div class="status-card health-status">
|
||
<div class="status-header">
|
||
<i class="status-icon fas fa-heartbeat"></i>
|
||
<h4>HEATH STATUS</h4>
|
||
</div>
|
||
<div class="status-badge" id="healthStatus">checking...</div>
|
||
</div>
|
||
|
||
<!-- 存储状态 -->
|
||
<div class="status-card storage-status">
|
||
<div class="status-header">
|
||
<i class="status-icon fas fa-database"></i>
|
||
<h4>Storage status</h4>
|
||
</div>
|
||
<div class="progress-container">
|
||
<progress value="0" max="100" id="storageProgress"></progress>
|
||
<div class="progress-labels">
|
||
<span id="indexedFiles">Indexed files：0</span>
|
||
<span id="storageUsage">Use ratio：0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-card model-config">
|
||
<div class="status-header">
|
||
<i class="status-icon fas fa-brain"></i>
|
||
<h4>LLM configuration</h4>
|
||
</div>
|
||
<dl class="config-list">
|
||
<dt>LLM MODEL</dt>
|
||
<dd id="llmModel">Loading...</dd>
|
||
|
||
<dt>Embedded model</dt>
|
||
<dd id="embedModel">Loading...</dd>
|
||
|
||
<dt>Max token</dt>
|
||
<dd id="maxTokens">0</dd>
|
||
</dl>
|
||
</div>
|
||
|
||
<div class="status-card directory-info">
|
||
<div class="status-header">
|
||
<i class="status-icon fas fa-folder-open"></i>
|
||
<h4>Catalog information</h4>
|
||
</div>
|
||
<div class="directory-list">
|
||
<div class="directory-item">
|
||
<span class="directory-label">Work directory：</span>
|
||
<span class="directory-path" id="workingDir"></span>
|
||
</div>
|
||
<div class="directory-item">
|
||
<span class="directory-label">Input directory：</span>
|
||
<span class="directory-path" id="inputDir"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-card directory-info">
|
||
<div class="status-header">
|
||
<i class="status-icon fas fa-folder-open"></i>
|
||
<h4>Store information</h4>
|
||
</div>
|
||
<div class="directory-list">
|
||
<div class="directory-item">
|
||
<span class="directory-label">kv_storage：</span>
|
||
<span class="directory-path" id="kv_storage"></span>
|
||
</div>
|
||
<div class="directory-item">
|
||
<span class="directory-label">doc_status_storage：</span>
|
||
<span class="directory-path" id="doc_status_storage"></span>
|
||
</div>
|
||
<div class="directory-item">
|
||
<span class="directory-label">graph_storage：</span>
|
||
<span class="directory-path" id="graph_storage"></span>
|
||
</div>
|
||
<div class="directory-item">
|
||
<span class="directory-label">vector_storage：</span>
|
||
<span class="directory-path" id="vector_storage"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
<div id="graph-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="graph-title">GRAPH MANAGE</h3>
|
||
<button class="btn btn-close" onclick="closeGraphModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="graph-container">
|
||
<svg id="graph-svg" width="100%" height="600px">
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeGraphModal()">SHUT DOWN</button>
|
||
</div>
|
||
<div class="resize-handle"></div>
|
||
|
||
</div>
|
||
</div>
|
||
<script>
|
||
const dropzone = document.getElementById('dropzone');
|
||
|
||
dropzone.addEventListener('dragover', (e) => {
|
||
e.preventDefault();
|
||
dropzone.classList.add('active');
|
||
});
|
||
|
||
dropzone.addEventListener('dragleave', () => {
|
||
dropzone.classList.remove('active');
|
||
});
|
||
|
||
dropzone.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
dropzone.classList.remove('active');
|
||
const files = e.dataTransfer.files;
|
||
handleFiles(files);
|
||
});
|
||
|
||
function handleFiles(files) {
|
||
console.log('selected file:', files);
|
||
}
|
||
|
||
function showSection(sectionId) {
|
||
// 隐藏所有内容区块 Hide all content blocks
|
||
const sections = document.querySelectorAll('.main-content .card');
|
||
sections.forEach(section => {
|
||
section.style.display = 'none';
|
||
});
|
||
|
||
// 显示目标区块 Display target block
|
||
const targetSection = document.getElementById(sectionId);
|
||
if (targetSection) {
|
||
targetSection.style.display = 'block';
|
||
}
|
||
|
||
// 更新按钮激活状态（可选）Update button activation status (optional)
|
||
const buttons = document.querySelectorAll('.nav-menu button');
|
||
buttons.forEach(button => {
|
||
button.classList.remove('active');
|
||
});
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
// 初始化显示文档管理模块 Initialize the display document management module
|
||
showSection('documents');
|
||
</script>
|
||
<!-- 在页面底部添加 -->
|
||
<script src="js/lightrag.js"></script>
|
||
<script src="js/graph.js"></script>
|
||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||
</body>
|
||
</html>
|