81 lines
3.6 KiB
HTML
81 lines
3.6 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>智能知识库问答</title>
|
|||
|
|
<link rel="stylesheet" href="/static/style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="header">
|
|||
|
|
<h1>🧠 智能知识库问答</h1>
|
|||
|
|
<p class="subtitle">✨ 企业/课程 · 自有文档精准问答，减少人工答疑</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="main-content">
|
|||
|
|
<div class="left-panel">
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<h2>📁 文档上传</h2>
|
|||
|
|
<div class="upload-area" id="upload-area">
|
|||
|
|
<input type="file" id="file-input" accept=".txt,.pdf,.docx" hidden>
|
|||
|
|
<div class="upload-icon">📤</div>
|
|||
|
|
<p class="upload-text">点击或拖拽文件到此处</p>
|
|||
|
|
<p class="upload-hint">💡 支持 PDF、Word、TXT 格式（最大 16MB）</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<h2>📚 知识库</h2>
|
|||
|
|
<span class="doc-count" id="doc-count">0 个文档</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="document-list" id="document-list">
|
|||
|
|
<div class="empty-state">
|
|||
|
|
<div class="empty-icon">📭</div>
|
|||
|
|
<p>暂无文档</p>
|
|||
|
|
<p class="empty-hint">上传文档后即可开始问答</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="right-panel">
|
|||
|
|
<div class="panel-section">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<h2>💬 智能问答</h2>
|
|||
|
|
<button class="clear-btn" onclick="clearHistory()" title="清除对话历史">🗑️ 清空</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-container">
|
|||
|
|
<div class="chat-messages" id="chat-messages">
|
|||
|
|
<div class="message bot">
|
|||
|
|
<div class="message-content">
|
|||
|
|
<p>👋 您好！我是您的智能知识库助手。</p>
|
|||
|
|
<p>📋 请先上传文档，然后我可以基于文档内容回答您的问题。</p>
|
|||
|
|
<p>🎯 支持精准检索，减少人工答疑时间！</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chat-input">
|
|||
|
|
<div class="input-wrapper">
|
|||
|
|
<textarea id="question-input" placeholder="💭 请输入您的问题...（按 Enter 发送，Shift+Enter 换行）" maxlength="1000"></textarea>
|
|||
|
|
<div class="char-count" id="char-count">0/1000</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="send-btn" onclick="askQuestion()" id="send-btn">
|
|||
|
|
<span class="btn-text">发送</span>
|
|||
|
|
<span class="btn-icon">🚀</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="toast" id="toast"></div>
|
|||
|
|
|
|||
|
|
<script src="/static/script.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|