问答社区

原创作者: 图龙网络科技发布时间： 2023-09-23 231.93K 人阅读

我用图龙智慧助手写一个前端的php加html代码AI智能聊天窗口网页

太极混元发布于 1个月前分类：技术分享

好的，我将为你提供一个简单的前端PHP加HTML代码示例，用于创建一个AI智能聊天窗口网页。这个示例包括基本的HTML结构、CSS样式以及PHP后端处理。

1732370021-0040eea2831bf6c

### 项目结构
```
chatbot/
├── index.html
├── chatbot.php
└── style.css
```

### 1. `index.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>AI智能聊天窗口</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>AI智能聊天助手</h2>
</div>
<div class="chat-body" id="chat-body">

</div>
<div class="chat-input">
<input type="text" id="user-input" placeholder="输入您的消息..." />
<button onclick="sendMessage()">发送</button>
</div>
</div>

// 显示用户的消息
const chatBody = document.getElementById('chat-body');
const userMessage = document.createElement('div');
userMessage.classList.add('user-message');
userMessage.textContent = userInput;
chatBody.appendChild(userMessage);

// 清空输入框
document.getElementById('user-input').value = '';

// 发送消息到后端并获取回复
fetch('chatbot.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `message=${encodeURIComponent(userInput)}`
})
.then(response => response.text())
.then(data => {
const botMessage = document.createElement('div');
botMessage.classList.add('bot-message');
botMessage.textContent = data;
chatBody.appendChild(botMessage);
chatBody.scrollTop = chatBody.scrollHeight; // 滚动到底部
});
}
</script>
</body>
</html>
```

### 2. `style.css` - 样式文件
```css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.chat-container {
width: 400px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.chat-header {
background-color: #007bff;
color: #fff;
padding: 15px;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.chat-body {
height: 300px;
padding: 15px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
}

.user-message, .bot-message {
padding: 10px;
margin: 10px 0;
border-radius: 10px;
}

.user-message {
background-color: #007bff;
color: #fff;
text-align: right;
}

.bot-message {
background-color: #f1f1f1;
color: #000;
text-align: left;
}

.chat-input {
display: flex;
padding: 10px;
}

.chat-input input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
}

.chat-input button {
margin-left: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.chat-input button:hover {
background-color: #0056b3;
}
```

### 3. `chatbot.php` - 后端处理
```php
<?php
// 这里只是一个简单的示例，你可以根据需要扩展功能
$message = isset($_POST['message']) ? $_POST['message'] : '';

// 简单的AI响应
$aiResponse = "您说: $message\n";
$aiResponse .= "AI助手: 我收到了你的消息！\n";

echo $aiResponse;
?>
```

### 使用说明
1. 将上述三个文件分别保存为 `index.html`, `style.css` 和 `chatbot.php`。
2. 将这三个文件放在同一个目录下（例如 `chatbot/`）。
3. 将该目录上传到支持PHP的Web服务器上。
4. 打开浏览器，访问 `index.html` 文件所在的URL，即可看到并使用这个简单的AI聊天窗口。

这个示例非常基础，你可以根据需要进一步扩展和改进，例如集成更复杂的AI模型、增加用户认证、存储聊天记录等功能。希望这对你有帮助！