标题: 随身WIFI刷机资源以及教程
时间: 2023-03-04
『回复列表(28|隐藏机器人聊天)』
@ChatGPT 4，把js改成php，其他的功能不变，给我修改后的代码<!DOCTYPE html>
<html lang="zh-Hans">
<head>
[4] @旧人，我们可以将原始的JavaScript代码改为PHP代码，并保持其他功能不变。请查看以下修改后的代码：
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenAI余额查询</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
</head>
<body class="bg-transparent font-sans">
<div class="mx-auto max-w-7xl px-0">
<div class="container justify-center items-center">
<div class="content">
<h1 class="text-3xl font-semibold text-center mb-6">OpenAI 余额查询</h1>
<form method="POST" class="flex items-center mb-10">
<label for="api_key" class="w-28 mr-4">API密钥:</label>
<input type="text" placeholder="请输入您的API密钥：sk-" name="api_key" id="api_key"
class="border border-gray-400 rounded px-2 py-1 w-full max-w-md focus:outline-none focus:border-blue-500" required>
<button type="submit" name="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full ml-4">
<span style="display:inline-block; width: 50px;">查询</span>
</button>
</form>
<?php
if (isset($_POST["submit"])) {
$apiKey = $_POST["api_key"];
if (!empty($apiKey) && strpos($apiKey, "sk-") === 0) {
// 在此处插入调用 OpenAI API 的 PHP 代码
} else {
echo "<script>alert('无效的API密钥，请检查您的API密钥是否正确。');</script>";
}
}
?>
<div id="result"></div>
</div>
</div>
</div>
</body>
</html>
此代码将原始的JavaScript功能替换为PHP。当用户点击"查询"按钮时，表单将以POST方法提交给当前页面。然后，PHP代码检查是否设置了"submit"按钮和API密钥，以及API密钥是否以"sk-"开头。如果满足这些条件，PHP代码将调用OpenAI API。否则，它将显示一个警告框，提示用户API密钥无效。
请注意，这个示例代码没有包含实际调用OpenAI API的PHP代码。您需要添加相应的代码来实现与JavaScript版本相同的功能。可以使用PHP的cURL库或其他HTTP客户端库（例如Guzzle）来发起API请求。
[4] @旧人，非常抱歉，我明白您的要求了。以下是将原始JavaScript代码全部替换为PHP代码的版本，同时保持页面样式和功能不变：
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenAI余额查询</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
</head>
<body class="bg-transparent font-sans">
<div class="mx-auto max-w-7xl px-0">
<div class="container justify-center items-center">
<div class="content">
<h1 class="text-3xl font-semibold text-center mb-6">OpenAI 余额查询</h1>
<form method="POST" class="flex items-center mb-10">
<label for="api_key" class="w-28 mr-4">API密钥:</label>
<input type="text" placeholder="请输入您的API密钥：sk-" name="api_key" id="api_key"
class="border border-gray-400 rounded px-2 py-1 w-full max-w-md focus:outline-none focus:border-blue-500" required>
<button type="submit" name="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py
连接断开，回复不完整。
[4] @旧人，
-4">
<span style="display:inline-block; width: 50px;">查询</span>
</button>
</form>
<?php
if (isset($_POST["submit"])) {
$apiKey = $_POST["api_key"];
if (!empty($apiKey) && strpos($apiKey, "sk-") === 0) {
// 在此处插入调用 OpenAI API 的 PHP 代码
$result = checkOpenAICredit($apiKey);
displayResult($result);
} else {
echo "<script>alert('无效的API密钥，请检查您的API密钥是否正确。');</script>";
}
}
function checkOpenAICredit($apiKey) {
$now = new DateTime();
$startDate = (new DateTime())->sub(new DateInterval('P90D'));
$endDate = (new DateTime())->add(new DateInterval('P1D'));
$urlSubscription = 'https://api.openai.com/v1/dashboard/billing/subscription';
$urlBalance = 'https://api.openai.com/dashboard/billing/credit_grants';
$urlUsage = 'https://api.openai.com/v1/dashboard/billing/usage?start_date=' . $startDate->format('Y-m-d') . '&end_date=' . $endDate->format('Y-m-d');
$headers = [
'Authorization: Bearer ' . $apiKey,
'Content-Type: application/json'
];
$subscriptionData = fetchAPI($urlSubscription, $headers);
$usageData = fetchAPI($urlUsage, $headers);
$totalAmount = $subscriptionData['hard_limit_usd'];
$is_subscribed = $subscriptionData['has_payment_method'];
$totalUsage = $usageData['total_usage'] / 100;
if ($is_subscribed) {
$startDate = new DateTime('first day of this month');
$urlUsage = 'https://api.openai.com/v1/dashboard/billing/usage?start_date=' . $startDate->format('Y-m-d') . '&end_date=' . $endDate->format('Y-m-d');
$usageData = fetchAPI($urlUsage, $headers);
$totalUsage = $usageData['total_usage'] / 100;
}
$remaining = $totalAmount - $totalUsage;
return [
'total_granted' => $totalAmount,
'total_used' => $totalUsage,
'total_available' => $remaining
];
}
function fetchAPI($url, $headers) {
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => $headers
]);
$response = curl_exec($curl);
curl_close($curl);
return json_decode($response, true);
}
function displayResult($data) {
if ($data) {
echo '<div class="grid grid-cols-3 gap-4">';
echo '<div class="grid-item bg-gray-100 p-6 rounded-lg text-center">';
echo '<p class="text-2xl font-semibold">' . number_format($data['total_granted'], 2) . '</p>';
echo '<p class="text-gray-600">总额度</p>';
echo '</div>';
echo '<div class="grid-item bg-gray-100 p-6 rounded-lg text-center">';
echo '<p class="text-2xl font-semibold">' . number_format($data['total_used'], 2) . '</p>';
echo '<p class="text
[4] @旧人，
-gray-600">已使用额度</p>';
echo '</div>';
echo '<div class="grid-item bg-gray-100 p-6 rounded-lg text-center">';
echo '<p class="text-2xl font-semibold">' . number_format($data['total_available'], 2) . '</p>';
echo '<p class="text-gray-600">剩余可用额度</p>';
echo '</div>';
echo '</div>';
} else {
echo "<script>alert('您的账户已被封禁，请登录OpenAI进行查看。');</script>";
}
}
?>
</div>
</div>
</div>
</body>
</html>
```
上面的代码将原始的 JavaScript 替换为 PHP，以便您在服务器端处理 OpenAI 余额查询。请注意，为了让代码工作正常，您需要在 PHP 可运行的服务器环境中运行此代码。
@ChatGPT 4， 美化一下这段css，使其更加现代简约美观<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 2s linear infinite;
display: none;
}
.content {
width: 100%;
max-width: 800px;
margin: auto;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.9);
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 30px;
}
form {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
label {
font-size: 18px;
color: #333;
margin-right: 10px;
}
input[type="text"] {
border: 2px solid #ddd;
border-radius: 6px;
padding: 12px 16px;
font-size: 16px;
background-color: #f9f9f9;
margin-right: 10px;
flex: 1;
transition: border-color 0.3s ease;
}
input[type="text"]:focus {
outline: none;
border-color: #4299e5;
}
button[type="submit"] {
background-color: #4299e5;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
padding: 14px 28px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button[type="submit"]:hover,
button[type="submit"]:focus {
background-color: #357dbf;
outline: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-gap: 20px;
margin-top: 40px;
}
.grid-item {
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.grid-item:hover {
transform: translateY(-10px);
}
.grid-item p:nth-child(1) {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
color: #4299e5;
animation: pulse 1s ease-in-out infinite alternate;
}
.grid-item p:nth-child(2) {
font-size: 16px;
color: #666;
}
@keyframes pulse {
from {
opacity: 0.6;
transform: scale(1);
}
to {
opacity: 1;
transform: scale(1.2);
}
}
</style>
[4] @旧人，以下是更新后的CSS，这将为您的OpenAI余额查询页面提供一个现代简约且美观的外观：
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 2s linear infinite;
display: none;
}
body {
background: url('https://images.unsplash.com/photo-1678957949479-b1e876bee3f1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2060&q=80') no-repeat center center fixed;
background-size: cover;
background-color: #f5f5f5;
}
.content {
width: 100%;
max-width: 800px;
margin: auto;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.9);
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 30px;
}
form {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
label {
font-size: 18px;
color: #333;
margin-right: 10px;
}
input[type="text"] {
border: 2px solid #ddd;
border-radius: 6px;
padding: 12px 16px;
font-size: 16px;
background-color: #f9f9f9;
margin-right: 10px;
flex: 1;
transition: border-color 0.3s ease;
}
input[type="text"]:focus {
outline: none;
border-color: #4299e5;
}
button[type="submit"] {
background-color: #4299e5;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
padding: 14px 28px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button[type="submit"]:hover,
button[type="submit"]:focus {
background-color: #357dbf;
outline: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-gap: 20px;
margin-top: 40
@ChatGPT 4，分析一下，给出样式和功能优化的建议<!DOCTYPE html>
<html lang="zh-Hans">
<head>
function checkOpenAICredit($apiKey) {
$now = new DateTime();
$startDate = (new DateTime())->sub(new DateInterval('P90D'));
$endDate = (new DateTime())->add(new DateInterval('P1D'));
$urlSubscription = 'https://api.openai.com/v1/dashboard/billing/subscription';
$urlBalance = 'https://api.openai.com/dashboard/billing/credit_grants';
$urlUsage = 'https://api.openai.com/v1/dashboard/billing/usage?start_date=' . $startDate->format('Y-m-d') . '&end_date=' . $endDate->format('Y-m-d');
$headers = [
'Authorization: Bearer ' . $apiKey,
'Content-Type: application/json'
];
$subscriptionData = fetchAPI($urlSubscription, $headers);
$usageData = fetchAPI($urlUsage, $headers);
$totalAmount = $subscriptionData['hard_limit_usd'];
$is_subscribed = $subscriptionData['has_payment_method'];
$totalUsage = $usageData['total_usage'] / 100;
if ($is_subscribed) {
$startDate = new DateTime('first day of this month');
$urlUsage = 'https://api.openai.com/v1/dashboard/billing/usage?start_date=' . $startDate->format('Y-m-d') . '&end_date=' . $endDate->format('Y-m-d');
$usageData = fetchAPI($urlUsage, $headers);
$totalUsage = $usageData['total_usage'] / 100;
}
$remaining = $totalAmount - $totalUsage;
return [
'total_granted' => $totalAmount,
'total_used' => $totalUsage,
'total_available' => $remaining
];
}
function fetchAPI($url, $headers) {
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => $headers
]);
$response = curl_exec($curl);
curl_close($curl);
return json_decode($response, true);
}
function displayResult($data) {
if ($data) {
echo '<div class="row row-cols-1 row-cols-md-3 g-4">';
echo '<div class="col">';
echo '<div class="card text-center">';
echo '<div class="card-body">';
echo '<h5 class="card-title">总额度</h5>';
echo '<p class="card-text text-2xl font-semibold">' . number_format($data['total_granted'], 2) . '</p>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="col">';
echo '<div class="card text-center">';
echo '<div class="card-body">';
echo '<h5 class="card-title">已使用额度</h5>';
echo '<p class="card-text text-2xl font-semibold">' . number_format($data['total_used'], 2) . '</p>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '<div class="col">';
echo '<div class="card text-center">';
echo '<div class="card-body">';
echo '<h5 class="card-title">剩余可用额度</h5>';
echo '<p class="card-text text-2xl font-semibold">' . number_format($data['total_available'], 2) . '</p>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
} else {
echo "<script>alert('您的账户已被封禁，请登录OpenAI进行查看。');</script>";
}
}
?>
</div>
</div>
</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script></body>
</html>
使用Bootstrap的内置类来代替自定义CSS。您已经引入了Bootstrap，可以充分利用其功能。这可以减少代码量并使样式更一致。
添加一个响应式导航栏以增强用户体验。您可以使用Bootstrap的内置导航组件轻松实现这一点。
为表单添加验证以确保用户在提交之前输入有效的API密钥。这可以使用HTML5的内置输入验证或者使用Bootstrap的表单验证功能来实现。
在显示查询结果时，使用Bootstrap的卡片组件以保持一致性。
在显示查询结果时，您可以考虑以图表形式展示数据。这将使信息更容易理解。可以使用开源库，如Chart.js或D3.js。
根据以上建议，这里是一份更新后的代码：
<!DOCTYPE html>
连接断开，回复不完整。
<head>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- 添加表单验证脚本 -->
<script>
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission