mirror of
https://github.com/woodchen-ink/openai-billing-query.git
synced 2025-07-18 14:01:59 +08:00
Merge pull request #17 from woodchen-ink:woodchen-ink/issue16
改为使用tailwind css和daisyUI进行布局，绑卡信息和组织信息改为可选显示。
This commit is contained in:
wood chen
GitHub
commit
975c558a3d
@ -9,8 +9,7 @@ Telegram交流群：https://t.me/ai_cn2023
|
||||
|
||||
## 最新示意图(2023.08.28)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## SESS ID获取方法
|
||||
|
||||
148
index.html
148
index.html
@ -1,94 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenAI API 信息查询</title>
|
||||
<meta name="description" content="批量快速查询OPENAI的余额，支持可视化展现已用比例、额度、已用量、未用量、是否GPT-4、是否GPT4-32K、是否绑卡、绑卡信息、组织信息、是否有效">
|
||||
<link rel="stylesheet" href="./static/css.css" type="text/css" />
|
||||
<link rel="stylesheet" href="./static/css-1.css" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.6.4/dist/full.css" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="bg-gray-900 text-white">
|
||||
<div class="container w-full">
|
||||
<div class="sidebar bg-gray-800 bg-opacity-60 p-8 relative">
|
||||
<header>
|
||||
<h1 class="text-3xl font-semibold text-center mb-8 text-gradient">OpenAI API 信息查询</h1>
|
||||
<p class=" text-center text-gradient" style="text-align: center;">7月22日更新后，需使用sess码进行查询。使用key只能查询总额度、绑卡、GPT4和组织ID。
|
||||
</p>
|
||||
<p style="color:#FFF;text-align: center;">页面列表：<a href="index.html" style="color:#FFF;text-decoration: underline;">查API信息</a> <a href="get_sess1.html" style="color:#FFF;text-decoration: underline;">通过access token获取sess</a> </p>
|
||||
<h1 class="text-2xl font-semibold mb-8 text-gradient">OpenAI API 信息查询</h1>
|
||||
<p class="mt-3 text-sm">页面列表：<a href="index.html" class="underline">查API信息</a><br><a href="get_sess1.html"
|
||||
class="underline">通过access token获取sess</a></p>
|
||||
</header>
|
||||
|
||||
<div class="query">
|
||||
<div>
|
||||
<h2 style="display: inline-block;">输入 API KEY</h2>
|
||||
<p style="display: inline-block; font-size: smaller;">本站不保存 KEY 信息，查询后请自行保存</p>
|
||||
<div class="query mt-8">
|
||||
<div class=" items-center mb-4">
|
||||
<h2>输入 API KEY</h2>
|
||||
<p class="text-xs text-gray-400">本站不保存 KEY 信息，查询后请自行保存</p>
|
||||
</div>
|
||||
<textarea id="api-key-input" placeholder="请输入 API-KEY或sessID，多个可直接粘贴"></textarea></p>
|
||||
<!-- API链接选择框 -->
|
||||
<div class="api-url-container"></div>
|
||||
<!-- API链接选择 -->
|
||||
<div>
|
||||
<h2 style="display: inline-block;">选择查询线路</h2>
|
||||
<p style="display: inline-block; font-size: smaller;">支持自定义线路，官网线路需要魔法</p>
|
||||
<textarea id="api-key-input"
|
||||
class="w-full bg-gray-700 border border-gray-500 rounded px-3 py-2 placeholder-gray-500 placeholder-opacity-50 textarea-xs"
|
||||
placeholder="请输入 API-KEY或sessID，多个可直接粘贴"></textarea>
|
||||
|
||||
<div class=" items-center mt-4">
|
||||
<h2>选择查询线路</h2>
|
||||
<p class="text-xs text-gray-400">支持自定义线路，官网线路需要魔法</p>
|
||||
</div>
|
||||
<select id="api-url-select" style="width:49%;">
|
||||
<select id="api-url-select"
|
||||
class="w-full bg-gray-700 border border-gray-500 rounded px-3 py-2 mt-2 text-gray-400"
|
||||
onchange="toggleCustomUrlInput()">
|
||||
<option value="https://api.openai.com">【官网线路】api.openai.com</option>
|
||||
<option value="https://oapi.czl.net">【CZLoapi线路】oapi.czl.net</option>
|
||||
<option value="https://openai.996.lat">【群友提供公益CF反代,勿测重要key】openai.996.lat</option>
|
||||
<option value="custom">【已前置https】自定义 ...</option>
|
||||
</select>
|
||||
|
||||
<!-- 自定义API链接输入框 -->
|
||||
<input type="text" id="custom-url-input" placeholder="输入自定义API，填域名即可，无需https://" style="width:45%;" />
|
||||
<input type="text" id="custom-url-input" placeholder="输入自定义API，填域名即可，无需https://"
|
||||
class="w-full bg-gray-700 border border-gray-500 rounded px-3 py-2 mt-2 text-gray-400 hidden" />
|
||||
</div>
|
||||
<button :class="{ loading }" :disabled="loading" onclick="sendRequest()">查询</button> </p>
|
||||
|
||||
<div class="flex mt-4">
|
||||
<div id="subinfo-toggle" class="form-control w-1/2">
|
||||
<label class="label">
|
||||
<span class="label-text text-warning">显示/隐藏 绑卡信息</span>
|
||||
</label>
|
||||
<input type="checkbox" class="toggle toggle-primary" onchange="toggleSubInfo()">
|
||||
</div>
|
||||
<h2 id="result-head" style="visibility:hidden">查询结果</h2>
|
||||
<table id="result-table" style="visibility:hidden">
|
||||
<thead>
|
||||
|
||||
<div id="setid-toggle" class="form-control w-1/2">
|
||||
<label class="label">
|
||||
<span class="label-text text-warning">显示/隐藏 组织信息</span>
|
||||
</label>
|
||||
<input type="checkbox" class="toggle toggle-primary" onchange="toggleSetidInfo()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="query-button" class="mt-8 w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
||||
onclick="sendRequest()">
|
||||
查询
|
||||
</button>
|
||||
|
||||
<footer class="footer bg-gray-800 text-white absolute bottom-0 left-0 ">
|
||||
<div class="alert">
|
||||
<p>广告链接：
|
||||
<a href="https://chat.czl.net" target="_blank" class="text-accent">CZLChat</a> <a
|
||||
href="https://oapi.czl.net" target="_blank" class="text-accent">CZLOapi</a>
|
||||
<a href="https://store0.czl.net" target="_blank" class="text-accent">CZL Store</a>
|
||||
<br> 本网页由<a href="https://woodchen.ink" target="_blank" class="text-accent">woodchen</a>开源于<a
|
||||
href="https://github.com/woodchen-ink/openai-billing-query" target="_blank"
|
||||
class="text-accent">Github</a>,欢迎给个star
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="content pl-6">
|
||||
<h2 class="textarea-lg">查询结果</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-y-hidden">
|
||||
<table id="result-table" class="table table-xs bg-neutral-content/20 w-full">
|
||||
<thead class="text-white">
|
||||
<tr>
|
||||
<th style="width:35px">序号</th>
|
||||
<th>API KEY</th>
|
||||
<th style="width: 50px;">总额度</th>
|
||||
<th style="width: 50px">已使用</th>
|
||||
<th style="width: 50px">剩余量</th>
|
||||
<th style="width: 90px">已用比例</th>
|
||||
<th style="width: 90px">到期时间</th>
|
||||
<th style="width: 50px">GPT-3.5</th>
|
||||
<th style="width: 50px">GPT-4</th>
|
||||
<th style="width: 50px">32K</th>
|
||||
<th style="width: 60px">绑卡</th>
|
||||
<th style="width: 120px">绑卡信息</th>
|
||||
<th style="width: 120px">组织信息</th>
|
||||
<th style="width: 120px">速率</th>
|
||||
<th style="width: 50px;">是否有效</th>
|
||||
<th class="w-1/12">序号</th>
|
||||
<th class="w-2/12">API KEY</th>
|
||||
<th class="w-1/12">总额度</th>
|
||||
<th class="w-1/12">已使用</th>
|
||||
<th class="w-1/12">剩余量</th>
|
||||
<th class="w-1/12">已用比例</th>
|
||||
<th class="w-1/12">到期时间</th>
|
||||
<th class="w-1/12">模型</th>
|
||||
<th class="w-1/12">绑卡</th>
|
||||
<th class="w-1/12" id="subinfo-header">绑卡信息</th>
|
||||
<th class="w-1/12" id="setid-header">组织信息</th>
|
||||
<th class="w-1/12">速率</th>
|
||||
<th class="w-1/12">是否有效</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tbody>
|
||||
<!-- 表格内容 -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>详细信息</h2>
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="modalText"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>广告链接：
|
||||
<a href="https://chat.czl.net" target="_blank">CZLChat</a>
|
||||
<a href="https://oapi.czl.net" target="_blank">CZLOapi</a>
|
||||
<a href="https://store0.czl.net" target="_blank">CZL Store</a>
|
||||
<br>
|
||||
本网页由<a href="https://woodchen.ink" target="_blank">woodchen</a>开源于<a
|
||||
href="https://github.com/woodchen-ink/openai-billing-query" target="_blank">Github</a>,欢迎给个star
|
||||
</p>
|
||||
|
||||
</footer>
|
||||
<script src="./static/js.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
25
static/css-1.css
Normal file
25
static/css-1.css
Normal file
@ -0,0 +1,25 @@
|
||||
body {
|
||||
background: url('https://cdn-img.czl.net/2023/05/23/pjbczr.webp') no-repeat center center fixed;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100VH;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100VH;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
179
static/js.js
179
static/js.js
@ -1,19 +1,30 @@
|
||||
var modal = document.getElementById("myModal");
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
span.onclick = function () {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
window.onclick = function (event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
function toggleSubInfo() {
|
||||
let toggle = document.querySelector("#subinfo-toggle input");
|
||||
let display = toggle.checked ? "" : "none";
|
||||
|
||||
let subInfoHeader = document.getElementById("subinfo-header");
|
||||
subInfoHeader.style.display = display;
|
||||
|
||||
let subInfoCells = document.querySelectorAll("td.subinfo");
|
||||
subInfoCells.forEach(function (cell) { cell.style.display = display; });
|
||||
}
|
||||
|
||||
function toggleSetidInfo() {
|
||||
let toggle = document.querySelector("#setid-toggle input");
|
||||
let display = toggle.checked ? "" : "none";
|
||||
|
||||
let setIdHeader = document.getElementById("setid-header");
|
||||
setIdHeader.style.display = display;
|
||||
|
||||
let setIdCells = document.querySelectorAll("td.setid");
|
||||
setIdCells.forEach(function (cell) { cell.style.display = display; });
|
||||
}
|
||||
toggleSubInfo();
|
||||
toggleSetidInfo();
|
||||
|
||||
let queriedApiKeys = [];
|
||||
let serialNumber = 1;
|
||||
|
||||
|
||||
async function checkBilling(apiKey, apiUrl) {
|
||||
const now = new Date();
|
||||
let startDate = new Date(now - 90 * 24 * 60 * 60 * 1000);
|
||||
@ -37,9 +48,7 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
let SubscribleInformation = {};
|
||||
let SubInformation;
|
||||
let errors = {};
|
||||
|
||||
let response = await fetch(urlSubscription, { headers });
|
||||
|
||||
let currentDate = new Date();
|
||||
const subscriptionData = await response.json();
|
||||
const expiryDate = new Date(subscriptionData.access_until * 1000 + 8 * 60 * 60 * 1000);
|
||||
@ -48,7 +57,7 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
try {
|
||||
totalAmount = subscriptionData.system_hard_limit_usd;
|
||||
|
||||
if (totalAmount > 20) {
|
||||
if (totalAmount > 3) {
|
||||
startDate = subDate;
|
||||
urlUsage = `${apiUrl}/v1/dashboard/billing/usage?start_date=${formatDate(startDate)}&end_date=${formatDate(endDate)}`;
|
||||
response = await fetch(urlUsage, { headers });
|
||||
@ -84,7 +93,6 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
//获取绑卡信息
|
||||
try {
|
||||
// 从 subscriptionData 中获取 SubscribleInformation 的值...
|
||||
@ -103,7 +111,6 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
//使用 JavaScript 的可选链式调用来确定是否为null，避免异常控制台报错
|
||||
SubInformation += "账单地址: " + (billingAddress?.line1 ? billingAddress.line1 : '') + ", " + (billingAddress?.city ? billingAddress.city : '') + ", " + (billingAddress?.state ? billingAddress.state : '') + ", " + (billingAddress?.country ? billingAddress.country : '') + ", " + (billingAddress?.postal_code ? billingAddress.postal_code : '') + "\n";
|
||||
SubInformation += "商业地址: " + (businessAddress?.line1 ? businessAddress.line1 : '') + ", " + (businessAddress?.city ? businessAddress.city : '') + ", " + (businessAddress?.state ? businessAddress.state : '') + ", " + (businessAddress?.country ? businessAddress.country : '') + ", " + (businessAddress?.postal_code ? businessAddress.postal_code : '\n');
|
||||
|
||||
// 获取付款方法信息
|
||||
response = await fetch(urlPaymentmethods, { headers });
|
||||
const paymentMethodsData = await response.json();
|
||||
@ -126,7 +133,6 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
//组织信息
|
||||
try {
|
||||
response = await fetch(urlsetid, { headers });
|
||||
@ -140,12 +146,9 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
const description = setiddata.data[0].description;
|
||||
const createdTimestamp = setiddata.data[0].created;
|
||||
const createdDate = new Date(createdTimestamp * 1000);
|
||||
|
||||
// 格式化日期
|
||||
const formattedDate = `${createdDate.getFullYear()}.${(createdDate.getMonth() + 1).toString().padStart(2, '0')}.${createdDate.getDate().toString().padStart(2, '0')}`;
|
||||
|
||||
const timeAndZone = createdDate.toString().match(/\d{2}:\d{2}:\d{2} \w+/)[0];
|
||||
|
||||
if (typeof setiddata.data[1] !== 'undefined') {
|
||||
const id2 = setiddata.data[1].id;
|
||||
setid = `${title}\n${email}\n${id1}\n${id2}\n${name}\n${description}\n${formattedDate} ${timeAndZone}`;
|
||||
@ -163,7 +166,6 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
console.error(error);
|
||||
errors['setid'] = error.message;
|
||||
}
|
||||
|
||||
//获取速率
|
||||
let rateLimits;
|
||||
try {
|
||||
@ -179,9 +181,6 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
console.error(error);
|
||||
errors['rateLimits'] = error.message;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 初始化模型查询结果
|
||||
GPT35CheckResult = '❌';
|
||||
GPT4CheckResult = '❌';
|
||||
@ -191,22 +190,14 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
try {
|
||||
const modelsCheckResponse = await fetch(modelsCheck, { headers });
|
||||
const modelsCheckData = await modelsCheckResponse.json();
|
||||
|
||||
GPT35CheckSuccess = GPT35CheckResult = Array.isArray(modelsCheckData.data) && modelsCheckData.data.some(item => item.id.includes('gpt-3.5-turbo')) ? '✅' : '❌';
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errors['modelsCheck'] = error.message;
|
||||
}
|
||||
//4模型查询
|
||||
try {
|
||||
const modelsCheckResponse = await fetch(modelsCheck, { headers });
|
||||
const modelsCheckData = await modelsCheckResponse.json();
|
||||
GPT4CheckResult = Array.isArray(modelsCheckData.data) && modelsCheckData.data.some(item => item.id.includes('gpt-4')) ? '✅' : '❌';
|
||||
GPT432kCheckResult = Array.isArray(modelsCheckData.data) && modelsCheckData.data.some(item => item.id.includes('gpt-4-32k')) ? '✅' : '❌';
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errors['modelsCheck'] = error.message;
|
||||
}
|
||||
// 是否有效查询
|
||||
async function checkCompletion(apiKey, apiUrl) {
|
||||
const urlCompletion = `${apiUrl}/v1/chat/completions`;
|
||||
const headers = {
|
||||
@ -245,9 +236,6 @@ async function checkBilling(apiKey, apiUrl) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
@ -258,17 +246,16 @@ function formatDate(date) {
|
||||
|
||||
//查询函数
|
||||
function sendRequest() {
|
||||
let button = document.querySelector("button");
|
||||
button.textContent = "加载中...";
|
||||
button.disabled = true;
|
||||
button.classList.add("loading")
|
||||
showLoadingAnimation();
|
||||
toggleSubInfo();
|
||||
toggleSetidInfo();
|
||||
|
||||
let apiKeyInput = document.getElementById("api-key-input");
|
||||
let apiUrlSelect = document.getElementById("api-url-select");
|
||||
let customUrlInput = document.getElementById("custom-url-input");
|
||||
let table = document.getElementById("result-table");
|
||||
let h2 = document.getElementById("result-head");
|
||||
h2.style.visibility = "visible";
|
||||
// let h2 = document.getElementById("result-head");
|
||||
// h2.style.visibility = "visible";
|
||||
table.style.visibility = "visible";
|
||||
|
||||
if (apiKeyInput.value.trim() === "") {
|
||||
@ -302,6 +289,8 @@ function sendRequest() {
|
||||
|
||||
alert("成功匹配到 API Key，确认后开始查询：" + apiKeys);
|
||||
|
||||
let lastQueryPromise = null;
|
||||
|
||||
let tableBody = document.querySelector("#result-table tbody");
|
||||
for (let i = 0; i < apiKeys.length; i++) {
|
||||
let apiKey = apiKeys[i].trim();
|
||||
@ -394,17 +383,25 @@ function sendRequest() {
|
||||
expireTime.textContent = data[3];
|
||||
row.appendChild(expireTime);
|
||||
|
||||
|
||||
let GPT35CheckResult = document.createElement("td");
|
||||
GPT35CheckResult.textContent = data[4];
|
||||
row.appendChild(GPT35CheckResult);
|
||||
|
||||
let GPT4CheckResult = document.createElement("td");
|
||||
GPT4CheckResult.textContent = data[5];
|
||||
row.appendChild(GPT4CheckResult);
|
||||
|
||||
let GPT432kCheckResult = document.createElement("td");
|
||||
GPT432kCheckResult.textContent = data[6];
|
||||
row.appendChild(GPT432kCheckResult);
|
||||
let highestModel = document.createElement("td");
|
||||
if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "❌" && GPT432kCheckResult.textContent === "❌") {
|
||||
highestModel.textContent = "gpt3.5";
|
||||
} else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "❌") {
|
||||
highestModel.textContent = "gpt4";
|
||||
} else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "✅") {
|
||||
highestModel.textContent = "gpt4-32K";
|
||||
} else {
|
||||
highestModel.textContent = "❌";
|
||||
}
|
||||
|
||||
row.appendChild(highestModel);
|
||||
|
||||
let isSubscribe = document.createElement("td");
|
||||
isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行
|
||||
@ -412,30 +409,24 @@ function sendRequest() {
|
||||
row.appendChild(isSubscribe);
|
||||
|
||||
let SubInformation = document.createElement("td");
|
||||
SubInformation.classList.add("subinfo");
|
||||
let SubInformationContainer = document.createElement("div");
|
||||
SubInformationContainer.style.whiteSpace = "pre-wrap";
|
||||
if (data[8].length > 50) {
|
||||
SubInformationContainer.textContent = data[8].slice(0, 25) + '... ';
|
||||
SubInformationContainer.appendChild(createSeeMoreLink(data[8]));
|
||||
} else {
|
||||
SubInformationContainer.textContent = data[8];
|
||||
}
|
||||
|
||||
SubInformation.appendChild(SubInformationContainer);
|
||||
row.appendChild(SubInformation);
|
||||
SubInformation.style.display = document.querySelector("#subinfo-toggle input").checked ? "" : "none";
|
||||
|
||||
|
||||
let setidCell = document.createElement("td");
|
||||
setidCell.classList.add("setid");
|
||||
let setidCellContainer = document.createElement("div");
|
||||
setidCellContainer.style.whiteSpace = "pre-wrap";
|
||||
if (data[9].length > 50) {
|
||||
setidCellContainer.textContent = data[9].slice(0, 25) + '... ';
|
||||
setidCellContainer.appendChild(createSeeMoreLink(data[9]));
|
||||
|
||||
} else {
|
||||
setidCellContainer.textContent = data[9];
|
||||
}
|
||||
setidCell.appendChild(setidCellContainer);
|
||||
row.appendChild(setidCell);
|
||||
setidCell.style.display = document.querySelector("#setid-toggle input").checked ? "" : "none";
|
||||
|
||||
|
||||
let rateLimitsDataCell = document.createElement("td");
|
||||
@ -447,18 +438,23 @@ function sendRequest() {
|
||||
let rateLimitsText = '';
|
||||
for (let model of models) {
|
||||
if (rateLimitsData[model]) {
|
||||
rateLimitsText += `${model}:\n\tRPM: ${rateLimitsData[model].max_requests_per_1_minute}\n\tTPM: ${rateLimitsData[model].max_tokens_per_1_minute}\n\n`;
|
||||
let modelName = '';
|
||||
if (model === 'gpt-3.5-turbo') {
|
||||
modelName = 'gpt3.5';
|
||||
} else if (model === 'gpt-3.5-turbo-16k') {
|
||||
modelName = 'gpt3.5-16K';
|
||||
} else if (model === 'gpt-4') {
|
||||
modelName = 'gpt4';
|
||||
} else if (model === 'gpt-4-32k') {
|
||||
modelName = 'gpt4-32K';
|
||||
}
|
||||
rateLimitsText += `${modelName}: ${rateLimitsData[model].max_requests_per_1_minute}, ${rateLimitsData[model].max_tokens_per_1_minute}\n`;
|
||||
} else {
|
||||
rateLimitsText += model + ": ❌\n";
|
||||
}
|
||||
}
|
||||
if (rateLimitsText.length > 50) {
|
||||
rateLimitsDataContainer.textContent = rateLimitsText.slice(0, 25) + '... ';
|
||||
rateLimitsDataContainer.appendChild(createSeeMoreLink(rateLimitsText));
|
||||
} else {
|
||||
rateLimitsDataContainer.textContent = rateLimitsText;
|
||||
}
|
||||
}
|
||||
|
||||
rateLimitsDataCell.appendChild(rateLimitsDataContainer);
|
||||
row.appendChild(rateLimitsDataCell);
|
||||
@ -480,22 +476,51 @@ function sendRequest() {
|
||||
h2.style.display = 'block';
|
||||
table.style.display = 'table';
|
||||
|
||||
button.textContent = "查询";
|
||||
button.disabled = false;
|
||||
button.classList.remove("loading")
|
||||
})
|
||||
hideLoadingAnimation();
|
||||
|
||||
})
|
||||
lastQueryPromise = checkBilling(apiKey, apiUrl).then((data) => {
|
||||
// 查询完成后的代码...
|
||||
|
||||
hideLoadingAnimation();
|
||||
});
|
||||
}
|
||||
if (lastQueryPromise) {
|
||||
lastQueryPromise.then(() => {
|
||||
hideLoadingAnimation();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function toggleCustomUrlInput() {
|
||||
const selectElement = document.getElementById("api-url-select");
|
||||
const customUrlInput = document.getElementById("custom-url-input");
|
||||
|
||||
if (selectElement.value === "custom") {
|
||||
customUrlInput.classList.remove("hidden");
|
||||
} else {
|
||||
customUrlInput.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
let apiUrlSelect = document.getElementById("api-url-select");
|
||||
let customUrlInput = document.getElementById("custom-url-input");
|
||||
function showLoadingAnimation() {
|
||||
const button = document.getElementById("query-button");
|
||||
button.disabled = true;
|
||||
button.innerHTML = `
|
||||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
加载中...
|
||||
`;
|
||||
}
|
||||
|
||||
function hideLoadingAnimation() {
|
||||
const button = document.getElementById("query-button");
|
||||
button.disabled = false;
|
||||
button.innerHTML = "查询";
|
||||
}
|
||||
|
||||
apiUrlSelect.addEventListener("change", function () {
|
||||
if (apiUrlSelect.value === "custom") {
|
||||
customUrlInput.style.display = "inline-block";
|
||||
customUrlInput.style.marginTop = "5px";
|
||||
} else {
|
||||
customUrlInput.style.display = "none";
|
||||
}
|
||||
});
|
||||
20
tailwind.config.js
Normal file
20
tailwind.config.js
Normal file
@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
//...
|
||||
|
||||
// add daisyUI plugin
|
||||
plugins: [require("daisyui")],
|
||||
|
||||
// daisyUI config (optional - here are the default values)
|
||||
daisyui: {
|
||||
themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
darkTheme: "dark", // name of one of the included themes for dark mode
|
||||
base: true, // applies background color and foreground color for root element by default
|
||||
styled: true, // include daisyUI colors and design decisions for all components
|
||||
utils: true, // adds responsive and modifier utility classes
|
||||
rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
|
||||
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
|
||||
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
|
||||
},
|
||||
|
||||
//...
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user