| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> |
| <meta http-equiv="Pragma" content="no-cache"> |
| <meta http-equiv="Expires" content="0"> |
| <title>HR智能对话助手</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| background: white; |
| border-radius: 16px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| overflow: hidden; |
| } |
| |
| .header { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 24px; |
| text-align: center; |
| } |
| |
| .header h1 { |
| font-size: 28px; |
| margin-bottom: 8px; |
| } |
| |
| .header p { |
| opacity: 0.9; |
| font-size: 14px; |
| } |
| |
| .main-content { |
| display: flex; |
| height: calc(100vh - 200px); |
| min-height: 500px; |
| } |
| |
| .chat-section { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| border-right: 1px solid #e5e7eb; |
| } |
| |
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 20px; |
| background: #f9fafb; |
| } |
| |
| .message { |
| margin-bottom: 16px; |
| display: flex; |
| align-items: flex-start; |
| gap: 12px; |
| } |
| |
| .message.user { |
| flex-direction: row-reverse; |
| } |
| |
| .message-avatar { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| color: white; |
| flex-shrink: 0; |
| } |
| |
| .message.user .message-avatar { |
| background: #667eea; |
| } |
| |
| .message.assistant .message-avatar { |
| background: #10b981; |
| } |
| |
| .message-content { |
| max-width: 70%; |
| padding: 12px 16px; |
| border-radius: 12px; |
| line-height: 1.5; |
| } |
| |
| .message.user .message-content { |
| background: #667eea; |
| color: white; |
| border-bottom-right-radius: 4px; |
| } |
| |
| .message.assistant .message-content { |
| background: white; |
| border: 1px solid #e5e7eb; |
| border-bottom-left-radius: 4px; |
| } |
| |
| .chat-input { |
| padding: 20px; |
| background: white; |
| border-top: 1px solid #e5e7eb; |
| display: flex; |
| gap: 12px; |
| } |
| |
| .chat-input input { |
| flex: 1; |
| padding: 12px 16px; |
| border: 2px solid #e5e7eb; |
| border-radius: 8px; |
| font-size: 14px; |
| transition: border-color 0.2s; |
| } |
| |
| .chat-input input:focus { |
| outline: none; |
| border-color: #667eea; |
| } |
| |
| .chat-input button { |
| padding: 12px 24px; |
| background: #667eea; |
| color: white; |
| border: none; |
| border-radius: 8px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background 0.2s; |
| } |
| |
| .chat-input button:hover { |
| background: #5568d3; |
| } |
| |
| .chat-input button:disabled { |
| background: #d1d5db; |
| cursor: not-allowed; |
| } |
| |
| .reasoning-panel { |
| width: 400px; |
| overflow-y: auto; |
| padding: 20px; |
| background: #f9fafb; |
| } |
| |
| .panel-title { |
| font-size: 18px; |
| font-weight: 600; |
| margin-bottom: 16px; |
| color: #111827; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .panel-section { |
| background: white; |
| border-radius: 8px; |
| padding: 16px; |
| margin-bottom: 12px; |
| border: 1px solid #e5e7eb; |
| } |
| |
| .panel-section-title { |
| font-weight: 600; |
| margin-bottom: 8px; |
| color: #374151; |
| font-size: 14px; |
| } |
| |
| .panel-section-content { |
| font-size: 13px; |
| color: #6b7280; |
| line-height: 1.6; |
| } |
| |
| .badge { |
| display: inline-block; |
| padding: 4px 8px; |
| border-radius: 4px; |
| font-size: 12px; |
| font-weight: 500; |
| margin-right: 6px; |
| margin-bottom: 4px; |
| } |
| |
| .badge.intent { |
| background: #dbeafe; |
| color: #1e40af; |
| } |
| |
| .badge.good { |
| background: #d1fae5; |
| color: #065f46; |
| } |
| |
| .badge.warning { |
| background: #fef3c7; |
| color: #92400e; |
| } |
| |
| .badge.error { |
| background: #fee2e2; |
| color: #991b1b; |
| } |
| |
| .score-display { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-top: 8px; |
| } |
| |
| .score-bar { |
| flex: 1; |
| height: 8px; |
| background: #e5e7eb; |
| border-radius: 4px; |
| overflow: hidden; |
| } |
| |
| .score-fill { |
| height: 100%; |
| border-radius: 4px; |
| transition: width 0.3s; |
| } |
| |
| .score-fill.good { |
| background: #10b981; |
| } |
| |
| .score-fill.warning { |
| background: #f59e0b; |
| } |
| |
| .score-fill.error { |
| background: #ef4444; |
| } |
| |
| .knowledge-item { |
| padding: 8px; |
| background: #f3f4f6; |
| border-radius: 6px; |
| margin-bottom: 8px; |
| } |
| |
| .knowledge-question { |
| font-weight: 500; |
| color: #374151; |
| margin-bottom: 4px; |
| } |
| |
| .knowledge-similarity { |
| font-size: 12px; |
| color: #10b981; |
| } |
| |
| .loading { |
| text-align: center; |
| padding: 20px; |
| color: #6b7280; |
| } |
| |
| .spinner { |
| border: 3px solid #e5e7eb; |
| border-top: 3px solid #667eea; |
| border-radius: 50%; |
| width: 24px; |
| height: 24px; |
| animation: spin 1s linear infinite; |
| margin: 0 auto 8px; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .examples { |
| padding: 16px; |
| background: #f0fdf4; |
| border: 1px solid #bbf7d0; |
| border-radius: 8px; |
| margin: 20px; |
| } |
| |
| .examples-title { |
| font-weight: 600; |
| margin-bottom: 8px; |
| color: #166534; |
| } |
| |
| .example-button { |
| display: inline-block; |
| padding: 6px 12px; |
| background: white; |
| border: 1px solid #86efac; |
| border-radius: 6px; |
| margin: 4px; |
| font-size: 13px; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .example-button:hover { |
| background: #f0fdf4; |
| border-color: #22c55e; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>HR智能对话助手</h1> |
| <p>基于RAG的检索增强生成 · 自动展示模型判断依据</p> |
| </div> |
|
|
| <div class="main-content"> |
| <div class="chat-section"> |
| <div class="chat-messages" id="chatMessages"> |
| <div class="examples"> |
| <div class="examples-title">试试这些问题：</div> |
| <button class="example-button" onclick="askQuestion('我想申请机器学习培训')">我想申请机器学习培训</button> |
| <button class="example-button" onclick="askQuestion('社保怎么缴纳？')">社保怎么缴纳？</button> |
| <button class="example-button" onclick="askQuestion('年假有多少天？')">年假有多少天？</button> |
| <button class="example-button" onclick="askQuestion('我想申请离职')">我想申请离职</button> |
| </div> |
| </div> |
|
|
| <div class="chat-input"> |
| <input type="text" id="userInput" placeholder="请输入您的问题..." onkeypress="handleKeyPress(event)"> |
| <button id="sendButton" onclick="sendMessage()">发送</button> |
| </div> |
| </div> |
|
|
| <div class="reasoning-panel" id="reasoningPanel"> |
| <div class="panel-title"> |
| <span>模型判断依据</span> |
| </div> |
| <div class="panel-section"> |
| <div class="panel-section-content" style="text-align: center; color: #9ca3af; padding: 40px 0;"> |
| 发送消息后，这里将展示AI的完整思考过程 |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| // Use relative path to support any port |
| const API_URL = '/api/v1/chat'; |
| let conversationHistory = []; |
| let sessionId = 'web_' + Date.now(); |
| |
| function askQuestion(question) { |
| document.getElementById('userInput').value = question; |
| sendMessage(); |
| } |
| |
| function handleKeyPress(event) { |
| if (event.key === 'Enter') { |
| sendMessage(); |
| } |
| } |
| |
| async function sendMessage() { |
| const input = document.getElementById('userInput'); |
| const message = input.value.trim(); |
| |
| if (!message) return; |
| |
| // 添加用户消息 |
| addMessage('user', message); |
| input.value = ''; |
| |
| // 禁用发送按钮 |
| document.getElementById('sendButton').disabled = true; |
| |
| // 显示加载中 |
| addLoadingIndicator(); |
| |
| try { |
| const response = await fetch(API_URL, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| question: message, |
| conversation_history: conversationHistory, |
| show_reasoning: true, |
| session_id: sessionId |
| }) |
| }); |
| |
| const data = await response.json(); |
| |
| // 移除加载中 |
| removeLoadingIndicator(); |
| |
| // 添加助手消息（使用打字机效果） |
| const answer = data.answer || '抱歉，无法获取回复'; |
| addMessage('assistant', answer, true); |
| |
| // 更新推理面板 |
| updateReasoningPanel(data.reasoning); |
| |
| // 更新对话历史 |
| conversationHistory = data.conversation_history || []; |
| |
| } catch (error) { |
| removeLoadingIndicator(); |
| addMessage('assistant', '抱歉，发生了错误：' + error.message, true); |
| console.error('Error:', error); |
| } |
| |
| // 启用发送按钮 |
| document.getElementById('sendButton').disabled = false; |
| } |
| |
| function addMessage(role, content, animate = false) { |
| const messagesDiv = document.getElementById('chatMessages'); |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message ${role}`; |
| |
| const avatar = role === 'user' ? '员' : 'HR'; |
| const avatarClass = role === 'user' ? 'user' : 'assistant'; |
| |
| messageDiv.innerHTML = ` |
| <div class="message-avatar ${avatarClass}">${avatar}</div> |
| <div class="message-content"></div> |
| `; |
| |
| messagesDiv.appendChild(messageDiv); |
| |
| const contentDiv = messageDiv.querySelector('.message-content'); |
| |
| // 助手消息使用打字机效果 |
| if (role === 'assistant' && animate) { |
| typeWriter(content, contentDiv, messagesDiv); |
| } else { |
| contentDiv.innerHTML = content; |
| messagesDiv.scrollTop = messagesDiv.scrollHeight; |
| } |
| } |
| |
| // 打字机效果 |
| function typeWriter(text, element, container) { |
| let index = 0; |
| const speed = 15; // 打字速度（毫秒） |
| |
| function type() { |
| if (index < text.length) { |
| element.innerHTML += text.charAt(index); |
| index++; |
| container.scrollTop = container.scrollHeight; |
| setTimeout(type, speed); |
| } |
| } |
| |
| type(); |
| } |
| |
| function addLoadingIndicator() { |
| const messagesDiv = document.getElementById('chatMessages'); |
| const loadingDiv = document.createElement('div'); |
| loadingDiv.className = 'message assistant'; |
| loadingDiv.id = 'loadingIndicator'; |
| loadingDiv.innerHTML = ` |
| <div class="message-avatar assistant">HR</div> |
| <div class="message-content"> |
| <div class="spinner"></div> |
| <div style="text-align: center; font-size: 12px;">正在思考...</div> |
| </div> |
| `; |
| messagesDiv.appendChild(loadingDiv); |
| messagesDiv.scrollTop = messagesDiv.scrollHeight; |
| } |
| |
| function removeLoadingIndicator() { |
| const loading = document.getElementById('loadingIndicator'); |
| if (loading) loading.remove(); |
| } |
| |
| function updateReasoningPanel(reasoning) { |
| const panel = document.getElementById('reasoningPanel'); |
| |
| if (!reasoning) { |
| panel.innerHTML = ` |
| <div class="panel-title"> |
| <span>模型判断依据</span> |
| </div> |
| <div class="panel-section"> |
| <div class="panel-section-content">无判断依据数据</div> |
| </div> |
| `; |
| return; |
| } |
| |
| // 新数据结构解析 |
| const layer1 = reasoning.layer1_intelligence_analysis || {}; |
| const layer2 = reasoning.layer2_execution || {}; |
| const replyInstruction = reasoning.reply_instruction || {}; |
| |
| // 意图理解 |
| const intentUnderstanding = layer1.intent_understanding || {}; |
| // 场景识别 |
| const scenarioRecognition = layer1.scenario_recognition || {}; |
| // 信息提取 |
| const informationExtraction = layer1.information_extraction || {}; |
| // 情绪分析 |
| const emotionAnalysis = layer1.emotion_analysis || {}; |
| // 风险评估 |
| const riskAssessment = layer1.risk_assessment || {}; |
| // 正确性检查 |
| const correctnessCheck = layer2.correctness_check || {}; |
| // 合规性检查 |
| const complianceCheck = layer2.compliance_check || {}; |
| // 质量分数 |
| const qualityScore = layer2.quality_score || 0; |
| |
| panel.innerHTML = ` |
| <div class="panel-title"> |
| <span>模型判断依据</span> |
| <span style="float: right; font-size: 14px; font-weight: normal; color: #6b7280;"> |
| 质量分数: <strong style="color: ${qualityScore >= 80 ? '#10b981' : qualityScore >= 60 ? '#f59e0b' : '#ef4444'}">${qualityScore}</strong> |
| </span> |
| </div> |
| |
| |
| <div class="panel-section"> |
| <div class="panel-section-title"> |
| <span class="badge intent">意图理解</span> |
| </div> |
| <div class="panel-section-content"> |
| <strong>识别意图:</strong> ${intentUnderstanding.detected_intent || 'unknown'}<br> |
| <strong>置信度:</strong> ${(intentUnderstanding.confidence * 100 || 0).toFixed(1)}% |
| </div> |
| </div> |
| |
| |
| <div class="panel-section"> |
| <div class="panel-section-title"> |
| <span class="badge intent">场景识别</span> |
| </div> |
| <div class="panel-section-content"> |
| <strong>场景:</strong> ${scenarioRecognition.identified_scenario || 'unknown'}<br> |
| <strong>置信度:</strong> ${(scenarioRecognition.confidence * 100 || 0).toFixed(1)}%<br> |
| <strong>描述:</strong> ${scenarioRecognition.description || 'N/A'} |
| </div> |
| </div> |
| |
| |
| ${Object.keys(informationExtraction).length > 0 ? ` |
| <div class="panel-section"> |
| <div class="panel-section-title"> |
| <span class="badge intent">信息提取</span> |
| </div> |
| <div class="panel-section-content"> |
| ${informationExtraction.extracted_data ? Object.entries(informationExtraction.extracted_data).map(([key, value]) => ` |
| <div style="padding: 4px 0; border-bottom: 1px solid #f3f4f6;"> |
| <strong>${key}:</strong> ${value} |
| </div> |
| `).join('') : ''} |
| <div style="margin-top: 8px; font-size: 12px;"> |
| 提取字段: ${(informationExtraction.extracted_fields || []).join(', ') || 'N/A'} |
| </div> |
| </div> |
| </div> |
| ` : ''} |
| |
| |
| <div class="panel-section"> |
| <div class="panel-section-title"> |
| <span class="badge ${emotionAnalysis.emotion === 'positive' ? 'good' : emotionAnalysis.emotion === 'negative' ? 'error' : 'warning'}"> |
| 情绪分析 |
| </span> |
| </div> |
| <div class="panel-section-content"> |
| <strong>情绪:</strong> ${emotionAnalysis.emotion || 'neutral'}<br> |
| <strong>强度:</strong> ${(emotionAnalysis.intensity * 100 || 0).toFixed(0)}% |
| </div> |
| </div> |
| |
| |
| <div class="panel-section"> |
| <div class="panel-section-title"> |
| <span class="badge ${correctnessCheck.is_correct ? 'good' : 'warning'}"> |
| 正确性检查 |
| </span> |
| </div> |
| <div class="panel-section-content"> |
| ${correctnessCheck.is_question ? ` |
| <strong>类型:</strong> 追问<br> |
| <strong>状态:</strong> <span class="badge good">合理</span> |
| ` : ` |
| <strong>相似度分数:</strong> ${((correctnessCheck.similarity_score || 0) * 100).toFixed(1)}%<br> |
| <strong>等级:</strong> ${correctnessCheck.level || 'unknown'} |
| `} |
| </div> |
| </div> |
| |
| |
| <div class="panel-section"> |
| <div class="panel-section-title"> |
| <span class="badge ${complianceCheck.is_compliant ? 'good' : 'error'}"> |
| 合规性检查 |
| </span> |
| </div> |
| <div class="panel-section-content"> |
| <strong>状态:</strong> ${complianceCheck.is_compliant ? '<span class="badge good">合规</span>' : '<span class="badge error">违规</span>'} |
| ${complianceCheck.violations && complianceCheck.violations.length > 0 ? ` |
| <div style="margin-top: 8px; padding: 8px; background: #fee2e2; border-radius: 4px;"> |
| <strong style="color: #991b1b;">检测到违规:</strong> |
| <ul style="margin: 4px 0 0 20px; color: #991b1b;"> |
| ${complianceCheck.violations.map(v => `<li>${v.type || v.category || '违规'}: ${v.text || v.word || 'N/A'}</li>`).join('')} |
| </ul> |
| </div> |
| ` : ''} |
| </div> |
| </div> |
| `; |
| } |
| </script> |
| </body> |
| </html> |
|
|
