CRBC-MaaS-Platform-Project
/
LQAgentPlatform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>词句语法审查测试</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: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 24px;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        header h1 { font-size: 24px; margin-bottom: 6px; }
        header p { opacity: 0.9; font-size: 13px; }

        .panel {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .panel h2 {
            font-size: 16px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }

        textarea {
            width: 100%;
            min-height: 160px;
            padding: 12px;
            border: 1.5px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
        }
        textarea:focus { outline: none; border-color: #667eea; }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            transition: all 0.2s;
        }
        .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        .loading {
            display: inline-block;
            width: 14px; height: 14px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        .result { margin-top: 16px; }
        .result-card {
            background: #fafafa;
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
            border-left: 4px solid #667eea;
        }
        .result-card.success { border-left-color: #51cf66; }
        .result-card.error { border-left-color: #ff6b6b; }

        .meta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
        }
        .meta span { background: #f0f0f0; padding: 4px 12px; border-radius: 12px; }

        .json-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 14px;
            border-radius: 8px;
            font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
            font-size: 12px;
            line-height: 1.5;
            overflow-x: auto;
            max-height: 400px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .empty {
            text-align: center;
            color: #999;
            padding: 40px 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>词句语法审查测试</h1>
            <p>调用 GrammarCheckReviewer.check_grammar() 进行错别字、标点、重复字词检查</p>
        </header>

        <div class="panel">
            <h2>输入文本</h2>
            <textarea id="content" placeholder="输入要审查的施工方案文本..."></textarea>
            <div style="margin-top:12px; display:flex; align-items:center; gap:16px;">
                <button class="btn" id="submitBtn" onclick="runCheck()">
                    执行审查
                </button>
                <label style="display:flex; align-items:center; gap:6px; cursor:pointer; font-size:14px;">
                    <input type="checkbox" id="enableThinking" style="width:16px; height:16px; cursor:pointer;">
                    启用思考模式 (enable_thinking)
                </label>
            </div>
        </div>

        <div class="panel result" id="resultPanel">
            <h2>审查结果</h2>
            <div class="empty">输入文本并点击"执行审查"</div>
        </div>
    </div>

    <script>
        const API_BASE = window.location.origin;
        let isRunning = false;

        async function runCheck() {
            if (isRunning) return;
            const content = document.getElementById('content').value.trim();
            if (!content) {
                alert('请输入审查文本');
                return;
            }

            isRunning = true;
            const btn = document.getElementById('submitBtn');
            const original = btn.innerHTML;
            btn.innerHTML = '<span class="loading"></span> 审查中...';
            btn.disabled = true;

            const start = Date.now();
            let result;
            try {
                const enableThinking = document.getElementById('enableThinking').checked;
                const res = await fetch(`${API_BASE}/api/grammar_check`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ content, enable_thinking: enableThinking })
                });
                result = await res.json();
            } catch (e) {
                result = { success: false, error_message: `请求失败: ${e.message}` };
            }
            const wallTime = ((Date.now() - start) / 1000).toFixed(3);

            renderResult(result, wallTime);

            btn.innerHTML = original;
            btn.disabled = false;
            isRunning = false;
        }

        function renderResult(result, wallTime) {
            const panel = document.getElementById('resultPanel');
            const isSuccess = result.success;
            const cardClass = isSuccess ? 'success' : 'error';
            const statusText = isSuccess ? '成功' : '失败';

            const meta = [
                `<span>状态: ${statusText}</span>`,
                `<span>总耗时: ${wallTime}s</span>`,
                result.model_execution_time !== undefined ? `<span>模型耗时: ${(result.model_execution_time ?? 0).toFixed?.(3) ?? result.model_execution_time}s</span>` : '',
                result.trace_id ? `<span>trace_id: ${result.trace_id}</span>` : ''
            ].filter(Boolean).join('');

            const responseDetail = result.details?.response
                ? `<div style="margin-top:10px;"><strong>模型响应:</strong></div><div class="json-block">${escapeHtml(result.details.response)}</div>`
                : '';

            const errorDetail = result.error_message
                ? `<div style="margin-top:10px;color:#c92a2a;"><strong>错误:</strong> ${escapeHtml(result.error_message)}</div>`
                : '';

            const rawJson = `<div style="margin-top:10px;"><strong>原始返回:</strong></div><div class="json-block">${JSON.stringify(result, null, 2)}</div>`;

            panel.innerHTML = `
                <h2>审查结果</h2>
                <div class="result-card ${cardClass}">
                    <div class="meta">${meta}</div>
                    ${responseDetail}
                    ${errorDetail}
                </div>
                ${rawJson}
            `;
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
</body>
</html>