liaoweixin
/
LWX


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识点询问 - AI 数字人答疑</title>
    <style>
        :root {
            --primary-color: #4a90e2;
            --sidebar-width: 250px;
            --header-height: 60px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f7fa; display: flex; height: 100vh; }
        .sidebar {
            width: var(--sidebar-width);
            background: #2c3e50;
            color: #ecf0f1;
        }
        .sidebar-header {
            height: var(--header-height);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border-bottom: 1px solid #34495e;
        }
        .nav-links { list-style: none; padding: 20px 0; }
        .nav-links li { padding: 12px 20px; }
        .nav-links a { color: inherit; text-decoration: none; }
        .nav-links li:hover { background: #34495e; }
        .main-content { flex: 1; display: flex; flex-direction: column; }
        header {
            height: var(--header-height);
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .content-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        .qa-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .qa-input-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .qa-input-row input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        .qa-input-row button {
            padding: 12px 24px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
        }
        .qa-input-row button:hover { background: #357abd; }
        .qa-input-row button:disabled { opacity: 0.6; cursor: not-allowed; }
        .answer-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-top: 20px;
            white-space: pre-wrap;
            line-height: 1.6;
        }
        .answer-card.empty { display: none; }
        .digital-human-area {
            margin-top: 24px;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            background: #fafafa;
        }
        .digital-human-area iframe {
            width: 100%;
            height: 400px;
            border: none;
        }
        .hint { color: #666; font-size: 14px; margin-bottom: 12px; }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-header">AI 教学系统</div>
        <ul class="nav-links">
            <li><a href="/dashboard">🏠 首页</a></li>
            <li><a href="/ai_assistant">🤖 AI 助手</a></li>
            <li><a href="/knowledge_qa">💬 知识点询问</a></li>
            <li><a href="/knowledge_graph">🔗 知识图谱</a></li>
            <li><a href="/daily_training">📚 每日训练</a></li>
            <li><a href="/wrong_questions">📝 错题集</a></li>
            <li><a href="/analysis">📊 学情分析</a></li>
        </ul>
    </div>
    <div class="main-content">
        <header>
            <h2>知识点询问</h2>
            <a href="/logout" style="color: #666;">退出</a>
        </header>
        <div class="content-area">
            <div class="qa-container">
                <p class="hint">输入初中化学知识点相关问题，系统将进行意图识别、知识图谱检索、大模型扩充后，以文字形式展示答案；完成后可前往「知识点题目推荐」巩固练习。</p>
                <div class="qa-input-row">
                    <input type="text" id="questionInput" placeholder="例如：什么是电解质？氧化还原反应的条件是什么？" />
                    <button type="button" id="askBtn">提问</button>
                </div>
                <div id="answerCard" class="answer-card empty"></div>
                <div class="digital-human-area">
                    <p class="hint" style="padding: 8px;">AI 数字人展示区（可嵌入本地数字人服务 localhost:8880）</p>
                    <iframe src="http://localhost:8880" title="AI 数字人"></iframe>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('askBtn').addEventListener('click', askQuestion);
        document.getElementById('questionInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') askQuestion();
        });

        function askQuestion() {
            const input = document.getElementById('questionInput');
            const btn = document.getElementById('askBtn');
            const card = document.getElementById('answerCard');
            const q = (input.value || '').trim();
            if (!q) {
                alert('请输入问题');
                return;
            }
            btn.disabled = true;
            card.classList.add('empty');
            card.textContent = '正在检索知识图谱并生成回答…';

            fetch('/api/ask', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ question: q })
            })
            .then(r => r.json())
            .then(data => {
                btn.disabled = false;
                card.classList.remove('empty');
                if (data.ok) {
                    card.textContent = data.answer;
                } else {
                    card.textContent = '错误：' + (data.error || '请求失败');
                }
            })
            .catch(err => {
                btn.disabled = false;
                card.classList.remove('empty');
                card.textContent = '请求失败：' + err.message;
            });
        }
    </script>
</body>
</html>