超简洁的网页版ChatGpt 源码HTML+PHP（api接口）
在这个示例中，我们首先检查HTTP请求是否为POST方法，并获取传递的密码、操作、模型、提示、温度、最大令牌数和停止字符。我们还对这些输入进行了一些基本验证，以确保它们不为空且符合预期。
然后，我们构建了一个API请求，并使用cURL库将其发送到OpenAI的API端点。我们使用HTTP POST方法，并将数据作为URL编码的字符串传递。我们还设置了必要的HTTP标头，例如Content-Type和Authorization。
最后，我们获取API响应并将它作为纯文本返回给调用者。请注意，我们未将API密钥硬编码到代码中，而是在请求标头中使用Authorization标头，并根据安全最佳实践从环境变量或配置文件中获取API密钥。您需要将YOUR_API_KEY_HERE替换为您的OpenAI API密钥。
总体来说，这个PHP脚本的作用是接收来自JavaScript的POST请求，并将其转发到OpenAI的API端点。它还执行一些基本的输入验证和身份验证，以确保API请求是合法的。
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$password = $_POST['password'] ?? '';
// Check password
if ($password !== '12345') {
http_response_code(401);
exit('Unauthorized');
}
$action = $_POST['action'] ?? '';
$model = $_POST['model'] ?? '';
$prompt = $_POST['prompt'] ?? '';
$temperature = $_POST['temperature'] ?? 0.5;
$max_tokens = $_POST['max_tokens'] ?? 50;
$stop = $_POST['stop'] ?? '';
// Validate inputs
if (!$action || !$model || !$prompt) {
http_response_code(400);
exit('Bad Request');
}
// Build API request
$data = [
'model' => $model,
'prompt' => $prompt,
'temperature' => $temperature,
'max_tokens' => $max_tokens,
'stop' => $stop,
];
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => 'https://api.openai.com/v1/' . $action,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => http_build_query($data),
CURLOPT_HTTPHEADER => [
'Content-Type: application/x-www-form-urlencoded',
'Authorization: Bearer YOUR_API_KEY_HERE',
],
]);
// Execute API request
$response = curl_exec($curl);
curl_close($curl);
// Return API response
header('Content-Type: text/plain');
echo $response;
}
该HTML代码的作用是提供一个简单的用户界面，使用户可以输入问题或消息，并将其发送到GPT-3模型以获取响应。它使用Bootstrap框架提供的样式和组件，以便应用程序具有现代外观和响应式布局。
在用户输入消息并单击“Send”按钮后，JavaScript函数将使用Axios库将消息发送到PHP脚本，并等待OpenAI API的响应。一旦收到响应，JavaScript将响应文本添加到输出文本区域中，以便用户可以查看聊天机器人的响应。
在这个示例中，我们使用Bootstrap样式美化了导航条、卡片和表单元素，以提高应用程序的外观和用户体验。我们还添加了一个JavaScript函数，该函数使用Axios库向PHP脚本发送POST请求。我们将输入框中的文本作为参数传递，并设置API操作、模型、温度、最大令牌数和停止字符。我们还添加了密码参数，以便PHP脚本可以验证这个请求是否合法。
最后，我们将JavaScript函数绑定到“Send”按钮的单击事件上，并在发送请求后清空输入框以准备下一个输入。
<!DOCTYPE html>
<html>
<head>
<title>GPT-3 Chatbot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<style>
body {
padding-top: 4rem;
background-color: #f8f9fa;
}
.container {
max-width: 600px;
}
.card {
margin-bottom: 1rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: #007bff;
color: #fff;
font-weight: bold;
}
.card-body {
padding: 1rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0 0 0.25rem 0.25rem;
}
.form-control:focus {
border-color: #007bff;
box-shadow: none;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
font-weight: bold;
transition: all 0.2s;
}
.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary:active, .btn-primary:focus {
background-color: #0069d9;
border-color: #0062cc;
box-shadow: none;
}
.btn-primary:disabled, .btn-primary:disabled:hover {
background-color: #007bff;
border-color: #007bff;
opacity: 0.5;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">GPT-3 Chatbot</a>
</div>
</nav>
<div class="container mt-5">
<div class="card">
<div class="card-header">
Chatbot
</div>
<div class="card-body">
<div class="form-group">
<label for="input">Input:</label>
<input type="text" id="input" class="form-control">
</div>
<div class="form-group text-center">
<button onclick="send()" class="btn btn-primary">Send</button>
</div>
<div class="form-group">
<label for="output">Output:</label>
<textarea id="output" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function send() {
const input = document.getElementById('input').value;
const params = {
action: 'chat',
model: 'text-davinci-002',
prompt: input,
temperature: 0.5,
max_tokens: 50,
stop: ['\n'],
password: '12345'
};
axios.post('gpt3-api.php', params)
.then(response => {
const output = document.getElementById('output');
output.value += response.data + '\n';
})
.catch(error => console.error(error));
document.getElementById('input').value = '';
}
</script>
</body>
</html>最终页面呈现如下：
