如何实现一个与AI角色聊天

本文将通过代码分析和详细讲解，帮助你实现一个与AI角色进行实时互动的网页，类似于本文中提到的聊天系统。

最近写了一个Ai福瑞聊天，现在把方法分享出来

1. HTML 结构

HTML 是整个网页的基础。代码包含以下主要部分：

头部信息：如字符编码、标题、图标和样式表链接。
主体结构：页面主要分为三部分：
- 主聊天界面
- 角色介绍
- 提示内容

代码结构：


<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <title>订阅 - 萬事屋日記</title>
    <!-- 样式和脚本文件 -->
    <link rel="stylesheet" href="路径/to/样式.css">
    <script src="路径/to/脚本.js"></script>
</head>
<body>
    <!-- 标题和头部 -->
    <?php include 'includes/title.php'; ?>
    <?php include 'includes/header.php'; ?>

    <!-- 主内容部分 -->
    <div class="content">
        <div class="ui grid">
            <div class="twelve wide column">
                <div class="ui segment chat-container main-chat">
                    <!-- 主聊天区域 -->
                    <h2 class="ui header">与角色聊天</h2>
                    <div id="main-chat-messages" class="chat-messages"></div>
                    <div class="input-area">
                        <textarea id="main-user-input" placeholder="输入内容..." rows="1"></textarea>
                        <button onclick="sendMainMessage()" class="ui button">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <div class="ui segment">
                    <h3 class="ui header">关于角色</h3>
                    <p>个性描述、背景等信息。</p>
                </div>
                <div class="ui segment">
                    <h3 class="ui header">提示</h3>
                    <p>提供用户如何使用聊天功能的说明。</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

2. JavaScript 功能实现

JavaScript 用于处理交互，包括：

动态显示消息
与后端通信
提供 AI 角色的响应

以下是关键功能解析：

2.1 初始化聊天角色：这个是一个核心代码


const systemPrompt = `
    你是一只可爱的小狼，性格活泼开朗。请用温柔可爱的语气回应用户。
`;

systemPrompt 定义了角色的性格和说话方式，发送给 AI 后，AI 会基于此设置回复内容。

2.2 发送消息的实现：


async function sendMainMessage() {
    const userInput = document.getElementById('main-user-input');
    const message = userInput.value.trim();
    if (!message) return;

    // 显示用户消息
    addMessage(message, 'user', 'main-chat-messages');
    userInput.value = '';

    // 发送请求
    const response = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${API_KEY}` },
        body: JSON.stringify({ messages: [{ role: "system", content: systemPrompt }, { role: "user", content: message }] })
    });

    // 显示 AI 回复
    const aiResponse = await response.json();
    addMessage(aiResponse.choices[0].message.content, 'ai', 'main-chat-messages');
}

发送消息时，将用户输入和系统提示组合成对话历史，发送到指定的 API。

2.3 消息显示效果：


function addMessage(message, sender, containerId) {
    const container = document.getElementById(containerId);
    const messageDiv = document.createElement('div');
    messageDiv.className = `${sender}-message`;
    messageDiv.textContent = message;
    container.appendChild(messageDiv);
}

用户和 AI 的消息分别用不同的样式显示。

3. 样式设计

样式部分负责布局和美化聊天界面。以下是关键 CSS 示例：


body {
    font-family: Arial, sans-serif;
    background-color: #333;
    color: #fff;
}

.chat-container {
    border: 1px solid #444;
    border-radius: 10px;
    padding: 20px;
    background-color: #444;
}

.user-message {
    text-align: right;
    background-color: #007bff;
    color: #fff;
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
}

.ai-message {
    text-align: left;
    background-color: #f1f1f1;
    color: #000;
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
}

4. 高级功能

动态代码块显示：通过高亮插件（如 Highlight.js），支持代码块的动态加载与复制。
主题切换：使用 localStorage 保存用户选择的主题（暗黑模式或浅色模式）

5. 运行效果

完成代码后，将文件放置在支持 PHP 的服务器环境，访问页面即可体验与 AI 角色的互动。适配移动设备，确保聊天界面响应式良好。

通过以上步骤，你可以轻松实现一个与 AI 角色互动的聊天网页。根据需要修改角色的设定和功能，打造属于你自己的独特体验！