PHP OpenAI GPT Stream Chat API WebUI 项目教程
随着人工智能技术的快速发展，GPT模型因其出色的自然语言处理能力而受到广泛关注。本文将指导读者如何使用PHP构建一个简单的WebUI，与OpenAI的GPT Chat API进行交互，实现实时聊天功能。我们将涵盖基本的设置、代码示例以及一些关键概念。
准备工作
在开始之前，请确保您拥有以下资源：
- OpenAI API密钥：您可以在OpenAI官方网站上申请一个密钥。
- PHP环境：确保您的本地或服务器上已经安装并配置好了PHP。
项目结构
我们将创建一个简单的项目结构，如下：
gpt-chat/
├── index.php
├── style.css
├── script.js
├── api.php
└── README.md
第一步：创建HTML界面
在index.php中，我们将创建一个简单的聊天界面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPT Chat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div id="chat-box"></div>
<textarea id="user-input" placeholder="输入你的消息..."></textarea>
<button id="send-btn">发送</button>
</div>
<script src="script.js"></script>
</body>
</html>
第二步：样式表
在style.css中，我们将简单地设置一些样式。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.chat-container {
width: 80%;
margin: auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#chat-box {
height: 400px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
textarea {
width: 100%;
height: 50px;
}
button {
margin-top: 10px;
}
第三步：JavaScript交互
在script.js中，我们将实现与服务器的交互逻辑。
document.getElementById('send-btn').onclick = function() {
const userInput = document.getElementById('user-input').value;
document.getElementById('user-input').value = '';
const chatBox = document.getElementById('chat-box');
chatBox.innerHTML += `<div>你: ${userInput}</div>`;
fetch('api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: userInput }),
})
.then(response => response.json())
.then(data => {
chatBox.innerHTML += `<div>GPT: ${data.reply}</div>`;
chatBox.scrollTop = chatBox.scrollHeight;
})
.catch(error => {
console.error('Error:', error);
});
};
第四步：API处理
在api.php中，我们将与OpenAI API进行交互。
<?php
header('Content-Type: application/json');
$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, true);
if (isset($input['message'])) {
$api_key = 'YOUR_OPENAI_API_KEY'; // 请替换为您的API密钥
$message = $input['message'];
$data = [
'model' => 'gpt-3.5-turbo',
'messages' => [['role' => 'user', 'content' => $message]]
];
$ch = curl_init('https://api.openai.com/v1/chat/completions');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Authorization: Bearer ' . $api_key,
'Content-Type: application/json',
]);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
$response = curl_exec($ch);
curl_close($ch);
echo $response;
} else {
echo json_encode(['reply' => '未提供消息']);
}
结尾
以上代码展示了如何使用PHP和JavaScript构建一个简单的WebUI与OpenAI的GPT Chat API进行交互。用户可以输入消息并实时获得来自GPT的回复。请确保在实际使用中保护好您的API密钥，并遵循OpenAI的使用条款。
希望此教程能帮助您快速上手创建自己的聊天应用！如果您有任何问题或建议，请随时与我们分享。
