AI 对话平台前端开发实战
在人工智能飞速发展的今天，AI 对话助手已经成为我们日常生活中不可或缺的工具。本文将带大家从零开始，开发一个类似豆包的 AI 对话平台前端页面。
HTML / CSSAI大前端
AI 对话平台前端开发实战：从零构建聊天界面
基于原生 HTML、CSS 和 JavaScript 构建 AI 对话平台前端页面。包含项目结构搭建、样式美化、交互逻辑实现及安全性处理，提供实时消息显示、推荐问题引导等核心功能代码示例，适合希望构建智能助手界面的开发者参考。
基于原生 HTML、CSS 和 JavaScript 构建 AI 对话平台前端页面。包含项目结构搭建、样式美化、交互逻辑实现及安全性处理，提供实时消息显示、推荐问题引导等核心功能代码示例，适合希望构建智能助手界面的开发者参考。
在人工智能飞速发展的今天，AI 对话助手已经成为我们日常生活中不可或缺的工具。本文将带大家从零开始，开发一个类似豆包的 AI 对话平台前端页面。
先来看看我们最终要实现的效果：
图 1：AI 对话平台最终效果
随着大模型技术的成熟，越来越多的开发者希望构建自己的 AI 对话应用。本项目旨在提供一个完整的前端解决方案，包括：
// 主要技术点
// HTML5: 页面结构
// CSS3: 样式设计 + 动画效果
// JavaScript ES6+: 交互逻辑
// DOM 操作：动态内容更新
让我们从最基础的 HTML 结构开始：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 对话平台</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<!-- 头部 -->
<header>
<h1>🤖 AI 对话助手</h1>
</header>
<!-- 对话区域 -->
<div id="chatMessages">
<!-- 欢迎消息 -->
<div class="message bot-message">
<div class="content">
<p>您好！我是 AI 助手，有什么我可以帮助您的吗？</p>
</div>
<div class="time">现在</div>
</div>
</div>
<!-- 推荐问题区域 -->
<div class="suggested-questions">
<h3>推荐问题</h3>
<div class="buttons">
<button data-question="如何学习前端开发？">如何学习前端开发？</button>
<button data-question="介绍一下人工智能的发展历程">介绍一下人工智能的发展历程</button>
<button data-question="帮我写一个 JavaScript 函数">帮我写一个 JavaScript 函数</button>
<button data-question="什么是机器学习？">什么是机器学习？</button>
</div>
</div>
<!-- 输入区域 -->
<div class="input-area">
<div class="input-box">
<input type="text" id="messageInput" placeholder="请输入您的问题..." />
<button id="sendButton">发送</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
美观的界面是用户体验的关键，让我们来实现现代化的设计：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.chat-container {
width: 100%;
max-width: 800px;
height: 90vh;
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 消息气泡动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.message {
max-width: 80%;
padding: 15px;
border-radius: 18px;
animation: fadeIn 0.3s ease-in;
}
.user-message {
align-self: flex-end;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom-right-radius: 5px;
}
.bot-message {
align-self: flex-start;
background: #f0f2f5;
color: #333;
border-bottom-left-radius: 5px;
}
这是整个项目的核心部分，实现了对话功能：
class ChatApp {
constructor() {
this.chatMessages = document.getElementById('chatMessages');
this.messageInput = document.getElementById('messageInput');
this.sendButton = document.getElementById('sendButton');
this.init();
}
init() {
// 绑定发送事件
this.sendButton.addEventListener('click', () => this.sendMessage());
this.messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.sendMessage();
}
});
// 绑定推荐问题点击事件
const suggestedButtons = document.querySelectorAll('.suggested-btn');
suggestedButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
const question = e.target.dataset.question;
this.sendSuggestedQuestion(question);
});
});
}
sendMessage() {
const message = this.messageInput.value.trim();
if (!message) return;
// 添加用户消息
this.addUserMessage(message);
// 清空输入框
this.messageInput.value = '';
// 模拟 AI 回复
setTimeout(() => {
this.simulateAIResponse(message);
}, 1000 + Math.random() * 2000);
}
addUserMessage(content) {
const messageDiv = document.createElement('div');
messageDiv.className = 'message user-message';
const now = new Date();
const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
messageDiv.innerHTML = '<div class="content"><p>' + this.escapeHtml(content) + '</p></div><div class="time">' + timeString + '</div>';
this.chatMessages.appendChild(messageDiv);
this.scrollToBottom();
}
addBotMessage(content) {
const messageDiv = document.createElement('div');
messageDiv.className = 'message bot-message';
const now = new Date();
const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
let formattedContent = this.escapeHtml(content);
formattedContent = formattedContent.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
messageDiv.innerHTML = '<div class="content"><p>' + formattedContent + '</p></div><div class="time">' + timeString + '</div>';
this.chatMessages.appendChild(messageDiv);
this.scrollToBottom();
}
}
图 2：实时对话显示效果
用户可以通过点击推荐问题快速开始对话，提升用户体验。
适配各种设备屏幕，移动端体验同样优秀。
支持代码格式化显示，技术问答更清晰。
/* 用户消息 - 右侧显示 */
.user-message {
align-self: flex-end;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* AI 消息 - 左侧显示 */
.bot-message {
align-self: flex-start;
background: #f0f2f5;
color: #333;
}
escapeHtml(text) {
if (typeof text !== 'string') return '';
const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
return text.replace(/[&<>"']/g, function(m) {
return map[m];
});
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.message {
animation: fadeIn 0.3s ease-in;
}
通过这个项目，我们可以学到：
# 创建项目文件夹
mkdir ai-chat-platform
cd ai-chat-platform
# 创建三个文件
touch index.html style.css script.js
# 在浏览器中打开
open index.html
通过本文的详细介绍，我们从零开始构建了一个功能完整的 AI 对话平台前端页面。这个项目不仅展示了现代前端开发的技术要点，也为想要构建类似应用的开发者提供了完整的解决方案。
项目特点回顾：
希望这个教程能帮助大家更好地理解前端开发的核心概念，也欢迎大家在此基础上进行创新和扩展！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online