如何实现一个与AI角色聊天
发表于：2024-12-19 23:50:38
本文将通过代码分析和详细讲解，帮助你实现一个与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 角色互动的聊天网页。根据需要修改角色的设定和功能，打造属于你自己的独特体验！
暂无评论，快来抢沙发吧！