Web应用示例

本页面展示了如何在各种 Web 应用中使用 XAI-SDK，包括原生 JavaScript 和现代框架集成。

📋 示例列表

原生 JavaScript 应用

使用纯 JavaScript 和 XAI-SDK 构建的 Web 应用

🚀 快速开始

安装依赖

bash

npm install xai-sdk @xai-sdk/browser-adapter

基础 HTML 结构

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XAI-SDK Web 示例</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .chat-box { border: 1px solid #ddd; height: 400px; overflow-y: auto; padding: 10px; margin: 10px 0; }
        .input-group { display: flex; gap: 10px; }
        input { flex: 1; padding: 10px; }
        button { padding: 10px 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI 助手</h1>
        <div id="chat-box" class="chat-box"></div>
        <div class="input-group">
            <input type="text" id="message-input" placeholder="输入您的问题...">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>
    <script src="./app.js"></script>
</body>
</html>

📚 基础示例

简单的 AI 聊天应用

javascript

// app.js
import { XAI_SDK } from 'xai-sdk';
import { BrowserAdapterPlugin } from '@xai-sdk/browser-adapter';
import { OpenAIProviderPlugin } from '@xai-sdk/openai-provider';

class ChatApp {
    constructor() {
        this.sdk = null;
        this.chatBox = document.getElementById('chat-box');
        this.messageInput = document.getElementById('message-input');
        this.messages = [];
        
        this.init();
    }
    
    async init() {
        try {
            // 初始化 SDK
            this.sdk = new XAI_SDK({ environment: 'browser' });
            
            // 注册插件
            await this.sdk.registerPlugin(new BrowserAdapterPlugin());
            await this.sdk.registerPlugin(new OpenAIProviderPlugin({
                apiKey: 'your-api-key-here' // 实际应用中应该从环境变量获取
            }));
            
            await this.sdk.initialize();
            
            this.addMessage('system', 'AI 助手已就绪，请输入您的问题。');
            
            // 绑定回车键事件
            this.messageInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    this.sendMessage();
                }
            });
            
        } catch (error) {
            console.error('初始化失败:', error);
            this.addMessage('error', '初始化失败，请检查配置。');
        }
    }
    
    async sendMessage() {
        const message = this.messageInput.value.trim();
        if (!message || !this.sdk) return;
        
        // 添加用户消息
        this.addMessage('user', message);
        this.messageInput.value = '';
        
        // 显示加载状态
        const loadingId = this.addMessage('assistant', '正在思考...');
        
        try {
            // 调用 AI
            const response = await this.sdk.chat(message, {
                stream: false,
                maxTokens: 1000
            });
            
            // 更新消息
            this.updateMessage(loadingId, response.content);
            
        } catch (error) {
            console.error('发送消息失败:', error);
            this.updateMessage(loadingId, '抱歉，处理您的请求时出现了错误。');
        }
    }
    
    addMessage(role, content) {
        const messageId = Date.now().toString();
        const messageDiv = document.createElement('div');
        messageDiv.id = messageId;
        messageDiv.className = `message ${role}`;
        messageDiv.innerHTML = `
            <div class="message-header">
                <strong>${this.getRoleName(role)}</strong>
                <span class="timestamp">${new Date().toLocaleTimeString()}</span>
            </div>
            <div class="message-content">${content}</div>
        `;
        
        this.chatBox.appendChild(messageDiv);
        this.chatBox.scrollTop = this.chatBox.scrollHeight;
        
        return messageId;
    }
    
    updateMessage(messageId, content) {
        const messageDiv = document.getElementById(messageId);
        if (messageDiv) {
            const contentDiv = messageDiv.querySelector('.message-content');
            contentDiv.textContent = content;
        }
    }
    
    getRoleName(role) {
        const names = {
            'user': '用户',
            'assistant': 'AI助手',
            'system': '系统',
            'error': '错误'
        };
        return names[role] || role;
    }
}

// 全局函数供 HTML 调用
window.chatApp = new ChatApp();
window.sendMessage = () => window.chatApp.sendMessage();

增强的样式

css

/* styles.css */
.message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
    max-width: 80%;
}

.message.user {
    background-color: #007bff;
    color: white;
    margin-left: auto;
    text-align: right;
}

.message.assistant {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.message.system {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    text-align: center;
}

.message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.9em;
    opacity: 0.7;
}

.message-content {
    line-height: 1.4;
}

.input-group {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px 0;
    border-top: 1px solid #ddd;
}

🔧 高级示例

代码编辑器集成

javascript

// code-editor.js
import { XAI_SDK } from 'xai-sdk';
import { CodeMirror } from 'codemirror';

class AICodeEditor {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.sdk = null;
        this.editor = null;
        
        this.init();
    }
    
    async init() {
        // 初始化代码编辑器
        this.editor = CodeMirror(this.container, {
            value: '// 在这里编写代码\nconsole.log("Hello, World!");',
            mode: 'javascript',
            theme: 'default',
            lineNumbers: true,
            autoCloseBrackets: true,
            matchBrackets: true
        });
        
        // 初始化 SDK
        this.sdk = new XAI_SDK({ environment: 'browser' });
        await this.sdk.registerPlugin(new BrowserAdapterPlugin());
        await this.sdk.registerPlugin(new OpenAIProviderPlugin({
            apiKey: process.env.OPENAI_API_KEY
        }));
        await this.sdk.initialize();
        
        // 添加工具栏
        this.createToolbar();
    }
    
    createToolbar() {
        const toolbar = document.createElement('div');
        toolbar.className = 'editor-toolbar';
        toolbar.innerHTML = `
            <button onclick="codeEditor.analyzeCode()">分析代码</button>
            <button onclick="codeEditor.optimizeCode()">优化代码</button>
            <button onclick="codeEditor.generateTests()">生成测试</button>
            <button onclick="codeEditor.explainCode()">解释代码</button>
        `;
        
        this.container.insertBefore(toolbar, this.container.firstChild);
    }
    
    async analyzeCode() {
        const code = this.editor.getValue();
        if (!code.trim()) return;
        
        try {
            const analysis = await this.sdk.analyze(code, {
                type: 'code-quality',
                language: 'javascript'
            });
            
            this.showResults('代码分析结果', analysis);
            
        } catch (error) {
            this.showError('分析失败', error.message);
        }
    }
    
    async optimizeCode() {
        const code = this.editor.getValue();
        if (!code.trim()) return;
        
        try {
            const optimized = await this.sdk.optimize(code, {
                language: 'javascript',
                preserveComments: true
            });
            
            // 显示优化建议
            const shouldApply = confirm('是否应用优化建议？\n\n' + optimized.explanation);
            if (shouldApply) {
                this.editor.setValue(optimized.code);
            }
            
        } catch (error) {
            this.showError('优化失败', error.message);
        }
    }
    
    async generateTests() {
        const code = this.editor.getValue();
        if (!code.trim()) return;
        
        try {
            const tests = await this.sdk.generateTests(code, {
                framework: 'jest',
                coverage: 'comprehensive'
            });
            
            // 在新窗口显示测试代码
            const testWindow = window.open('', '_blank');
            testWindow.document.write(`
                <html>
                    <head><title>生成的测试代码</title></head>
                    <body>
                        <h1>测试代码</h1>
                        <pre><code>${tests.code}</code></pre>
                        <button onclick="navigator.clipboard.writeText('${tests.code.replace(/'/g, "\\'")}')">复制代码</button>
                    </body>
                </html>
            `);
            
        } catch (error) {
            this.showError('生成测试失败', error.message);
        }
    }
    
    async explainCode() {
        const selectedText = this.editor.getSelection();
        const code = selectedText || this.editor.getValue();
        
        if (!code.trim()) return;
        
        try {
            const explanation = await this.sdk.explain(code, {
                language: 'javascript',
                level: 'beginner'
            });
            
            this.showResults('代码解释', explanation);
            
        } catch (error) {
            this.showError('解释失败', error.message);
        }
    }
    
    showResults(title, content) {
        const modal = document.createElement('div');
        modal.className = 'modal';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header">
                    <h3>${title}</h3>
                    <button onclick="this.parentElement.parentElement.parentElement.remove()">&times;</button>
                </div>
                <div class="modal-body">
                    <pre>${JSON.stringify(content, null, 2)}</pre>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
    }
    
    showError(title, message) {
        alert(`${title}: ${message}`);
    }
}

// 全局实例
window.codeEditor = new AICodeEditor('editor-container');

🔧 高级功能

实时代码分析

javascript

// real-time-analyzer.js
class RealTimeAnalyzer {
    constructor(editorElement) {
        this.editor = editorElement;
        this.sdk = null;
        this.debounceTimer = null;
        this.init();
    }
    
    async init() {
        this.sdk = new XAI_SDK({ environment: 'browser' });
        await this.sdk.registerPlugin(new BrowserAdapterPlugin());
        await this.sdk.initialize();
        
        this.setupEventListeners();
    }
    
    setupEventListeners() {
        this.editor.addEventListener('input', () => {
            this.debounceAnalysis();
        });
    }
    
    debounceAnalysis() {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = setTimeout(() => {
            this.analyzeCode();
        }, 1000);
    }
    
    async analyzeCode() {
        const code = this.editor.value;
        if (!code.trim()) return;
        
        try {
            const analysis = await this.sdk.analyze(code, {
                type: 'syntax-check',
                includePerformance: true
            });
            
            this.displayResults(analysis);
        } catch (error) {
            console.error('分析失败:', error);
        }
    }
    
    displayResults(analysis) {
        const resultsPanel = document.getElementById('analysis-results');
        resultsPanel.innerHTML = `
            <h3>代码分析结果</h3>
            <div class="score">质量评分: ${analysis.score}/100</div>
            <div class="suggestions">
                <h4>建议:</h4>
                <ul>
                    ${analysis.suggestions.map(s => `<li>${s}</li>`).join('')}
                </ul>
            </div>
        `;
    }
}

// 使用示例
const analyzer = new RealTimeAnalyzer(document.getElementById('code-editor'));

📖 最佳实践

1. 性能优化

javascript

// 使用缓存优化性能
const cache = new Map();

// 实现请求缓存
const cache = new Map();
function getCachedResult(key, fn) {
    if (cache.has(key)) {
        return Promise.resolve(cache.get(key));
    }
    
    return fn().then(result => {
        cache.set(key, result);
        return result;
    });
}

// 使用防抖减少 API 调用
function debounce(fn, delay) {
    let timeoutId;
    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

2. 错误处理

javascript

// 全局错误处理
window.addEventListener('error', (event) => {
    console.error('全局错误:', event.error);
    // 发送错误报告
});

// Promise 错误处理
window.addEventListener('unhandledrejection', (event) => {
    console.error('未处理的 Promise 拒绝:', event.reason);
    event.preventDefault();
});

3. 用户体验

javascript

// 加载状态管理
class LoadingManager {
    constructor() {
        this.loadingCount = 0;
        this.loadingElement = document.getElementById('loading');
    }
    
    show() {
        this.loadingCount++;
        this.loadingElement.style.display = 'block';
    }
    
    hide() {
        this.loadingCount = Math.max(0, this.loadingCount - 1);
        if (this.loadingCount === 0) {
            this.loadingElement.style.display = 'none';
        }
    }
}

📝 相关资源

💡 提示: 这些示例展示了 XAI-SDK 在 Web 应用中的基础应用。根据您的具体需求选择合适的集成方式。

Web应用示例 ​

📋 示例列表 ​

原生 JavaScript 应用 ​

🚀 快速开始 ​

安装依赖 ​

基础 HTML 结构 ​

📚 基础示例 ​

简单的 AI 聊天应用 ​

增强的样式 ​

🔧 高级示例 ​

代码编辑器集成 ​

🔧 高级功能 ​

实时代码分析 ​

📖 最佳实践 ​

1. 性能优化 ​

2. 错误处理 ​

3. 用户体验 ​

📝 相关资源 ​

Web应用示例

📋 示例列表

原生 JavaScript 应用

🚀 快速开始

安装依赖

基础 HTML 结构

📚 基础示例

简单的 AI 聊天应用

增强的样式

🔧 高级示例

代码编辑器集成

🔧 高级功能

实时代码分析

📖 最佳实践

1. 性能优化

2. 错误处理

3. 用户体验

📝 相关资源