SD-SafeAI
/
shudao-main


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流式接口Markdown渲染测试</title>
    <!-- Vditor CSS -->
    <link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .content {
            padding: 20px;
        }
        .input-section {
            margin-bottom: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 6px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #2c3e50;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        textarea {
            height: 80px;
            resize: vertical;
        }
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        .btn-primary {
            background: #3498db;
            color: white;
        }
        .btn-primary:hover {
            background: #2980b9;
        }
        .btn-secondary {
            background: #95a5a6;
            color: white;
        }
        .btn-secondary:hover {
            background: #7f8c8d;
        }
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        .btn-danger:hover {
            background: #c0392b;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-weight: 600;
        }
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .output-section {
            margin-top: 20px;
        }
        .output-tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }
        .tab.active {
            border-bottom-color: #3498db;
            color: #3498db;
            font-weight: 600;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .raw-output {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        .markdown-output {
            border: 1px solid #e9ecef;
            border-radius: 4px;
            min-height: 200px;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .loading.show {
            display: block;
        }
        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>流式接口Markdown渲染测试</h1>
            <p>测试 /apiv1/stream/chat 接口的流式响应和Markdown渲染效果</p>
        </div>
        
        <div class="content">
            <div class="input-section">
                <div class="input-group">
                    <label for="apiUrl">API地址:</label>
                    <input type="text" id="apiUrl" value="http://localhost:22000/apiv1/stream/chat" placeholder="输入流式接口地址">
                </div>
                
                <div class="input-group">
                    <label for="message">测试消息:</label>
                    <textarea id="message" placeholder="输入要测试的消息内容">你好，请介绍一下施工现场的安全防护要求</textarea>
                </div>
                
                <div class="input-group">
                    <label for="model">模型名称 (可选):</label>
                    <input type="text" id="model" placeholder="模型名称，留空使用默认">
                </div>
                
                <div class="button-group">
                    <button class="btn-primary" onclick="startStreamTest()">开始流式测试</button>
                    <button class="btn-secondary" onclick="clearOutput()">清空输出</button>
                    <button class="btn-danger" onclick="stopStream()">停止流式</button>
                </div>
            </div>
            
            <div id="status" class="status info" style="display: none;"></div>
            
            <div class="loading" id="loading">
                <div class="spinner"></div>
                <div>正在接收流式数据...</div>
            </div>
            
            <div class="output-section">
                <div class="output-tabs">
                    <div class="tab active" onclick="switchTab('raw')">原始输出</div>
                    <div class="tab" onclick="switchTab('markdown')">Markdown渲染</div>
                </div>
                
                <div id="rawTab" class="tab-content active">
                    <div class="raw-output" id="rawOutput"></div>
                </div>
                
                <div id="markdownTab" class="tab-content">
                    <div class="markdown-output" id="markdownOutput"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Vditor JavaScript -->
    <script src="https://unpkg.com/vditor/dist/index.min.js"></script>
    
    <script>
        let vditor = null;
        let eventSource = null;
        let isStreaming = false;
        
        // 初始化Vditor
        function initVditor() {
            if (vditor) {
                vditor.destroy();
            }
            
            vditor = new Vditor('markdownOutput', {
                height: 400,
                mode: 'wysiwyg',
                toolbar: ['emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|', 'list', 'ordered-list', 'check', 'outdent', 'indent', '|', 'quote', 'line', 'code', 'inline-code', 'insert-before', 'insert-after', '|', 'table', '|', 'undo', 'redo', '|', 'fullscreen', 'edit-mode', '|', 'content-theme', 'code-theme', '|', 'preview', 'export'],
                after: () => {
                    console.log('Vditor初始化完成');
                }
            });
        }
        
        // 切换标签页
        function switchTab(tabName) {
            // 隐藏所有标签内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 移除所有标签的active类
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签内容
            document.getElementById(tabName + 'Tab').classList.add('active');
            
            // 添加active类到选中的标签
            event.target.classList.add('active');
        }
        
        // 显示状态信息
        function showStatus(message, type = 'info') {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.className = `status ${type}`;
            statusEl.style.display = 'block';
            
            setTimeout(() => {
                statusEl.style.display = 'none';
            }, 5000);
        }
        
        // 清空输出
        function clearOutput() {
            document.getElementById('rawOutput').textContent = '';
            if (vditor) {
                vditor.setValue('');
            }
            showStatus('输出已清空', 'success');
        }
        
        // 停止流式
        function stopStream() {
            if (eventSource) {
                eventSource.close();
                eventSource = null;
            }
            isStreaming = false;
            document.getElementById('loading').classList.remove('show');
            showStatus('流式连接已停止', 'info');
        }
        
        // 开始流式测试
        function startStreamTest() {
            const apiUrl = document.getElementById('apiUrl').value.trim();
            const message = document.getElementById('message').value.trim();
            const model = document.getElementById('model').value.trim();
            
            if (!apiUrl || !message) {
                showStatus('请填写API地址和测试消息', 'error');
                return;
            }
            
            // 停止之前的连接
            stopStream();
            
            // 清空输出
            clearOutput();
            
            // 显示加载状态
            document.getElementById('loading').classList.add('show');
            isStreaming = true;
            
            showStatus('正在连接流式接口...', 'info');
            
            // 构建请求数据
            const requestData = {
                message: message
            };
            
            if (model) {
                requestData.model = model;
            }
            
            console.log('发送请求:', requestData);
            
            // 使用fetch发送POST请求
            fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(requestData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误: ${response.status} ${response.statusText}`);
                }
                
                if (!response.body) {
                    throw new Error('响应体为空');
                }
                
                showStatus('连接成功，开始接收流式数据...', 'success');
                
                // 处理流式响应
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';
                let rawContent = '';
                let markdownContent = '';
                
                function readStream() {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            console.log('流式数据接收完成');
                            document.getElementById('loading').classList.remove('show');
                            isStreaming = false;
                            showStatus('流式数据接收完成', 'success');
                            return;
                        }
                        
                        // 解码数据
                        const chunk = decoder.decode(value, { stream: true });
                        buffer += chunk;
                        
                        // 处理完整的数据行
                        const lines = buffer.split('\n');
                        buffer = lines.pop() || ''; // 保留最后一个不完整的行
                        
                        for (const line of lines) {
                            if (line.trim() === '') continue;
                            
                            console.log('收到数据行:', line);
                            
                            if (line.startsWith('data: ')) {
                                const data = line.substring(6);
                                
                                if (data === '[DONE]') {
                                    console.log('流式结束');
                                    document.getElementById('loading').classList.remove('show');
                                    isStreaming = false;
                                    showStatus('流式数据接收完成', 'success');
                                    return;
                                }
                                
                                // 尝试解析JSON
                                try {
                                    const jsonData = JSON.parse(data);
                                    if (jsonData.error) {
                                        showStatus(`错误: ${jsonData.error}`, 'error');
                                        document.getElementById('loading').classList.remove('show');
                                        isStreaming = false;
                                        return;
                                    }
                                } catch (e) {
                                    // 不是JSON，直接作为文本内容处理
                                    console.log('收到文本内容:', data);
                                    
                                    // 添加到原始输出
                                    rawContent += data;
                                    document.getElementById('rawOutput').textContent = rawContent;
                                    
                                    // 添加到markdown内容
                                    markdownContent += data;
                                    
                                    // 实时更新Vditor
                                    if (vditor) {
                                        vditor.setValue(markdownContent);
                                    }
                                }
                            }
                        }
                        
                        // 继续读取
                        readStream();
                    }).catch(error => {
                        console.error('读取流式数据时出错:', error);
                        showStatus(`读取数据出错: ${error.message}`, 'error');
                        document.getElementById('loading').classList.remove('show');
                        isStreaming = false;
                    });
                }
                
                readStream();
                
            })
            .catch(error => {
                console.error('请求失败:', error);
                showStatus(`请求失败: ${error.message}`, 'error');
                document.getElementById('loading').classList.remove('show');
                isStreaming = false;
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initVditor();
            showStatus('页面加载完成，可以开始测试', 'success');
        });
        
        // 页面卸载时清理
        window.addEventListener('beforeunload', function() {
            stopStream();
        });
    </script>
</body>
</html>