wood/openai-billing-query
1
0
Fork 0
mirror of https://github.com/woodchen-ink/openai-billing-query.git synced 2025-07-18 14:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

改为使用tailwind css和daisyUI进行布局，绑卡信息和组织信息改为可选显示。

Browse Source 
Fixes #16
This commit is contained in:
wood 2023-09-01 16:36:19 +08:00
parent 712c500681
commit c1d8d1dc3e
5 changed files with 253 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -9,8 +9,7 @@ Telegram交流群：https://t.me/ai_cn2023
## 最新示意图(2023.08.28) ## 最新示意图(2023.08.28)
![1693240108324.png](https://cdn-img.czl.net/2023/08/29/64eccb2da01a1.png) ![1693240108324.png](https://cdn-img.czl.net/2023/09/01/64f1a1dbf0e93.png)
![1693240132856.png](https://cdn-img.czl.net/2023/08/29/64eccb46017e7.png)
## SESS ID获取方法 ## SESS ID获取方法

148
index.html
View File

@ -1,94 +1,120 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenAI API 信息查询</title> <title>OpenAI API 信息查询</title>
<meta name="description" content="批量快速查询OPENAI的余额，支持可视化展现已用比例、额度、已用量、未用量、是否GPT-4、是否GPT4-32K、是否绑卡、绑卡信息、组织信息、是否有效"> <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> </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> <header>
<h1 class="text-3xl font-semibold text-center mb-8 text-gradient">OpenAI API 信息查询</h1> <h1 class="text-2xl font-semibold mb-8 text-gradient">OpenAI API 信息查询</h1>
<p class=" text-center text-gradient" style="text-align: center;">7月22日更新后，需使用sess码进行查询。使用key只能查询总额度、绑卡、GPT4和组织ID。 <p class="mt-3 text-sm">页面列表：<a href="index.html" class="underline">查API信息</a><br><a href="get_sess1.html"
</p> class="underline">通过access token获取sess</a></p>
<p style="color:#FFF;text-align: center;">页面列表：<a href="index.html" style="color:#FFF;text-decoration: underline;">查API信息</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="get_sess1.html" style="color:#FFF;text-decoration: underline;">通过access token获取sess</a> </p>
</header> </header>
<div class="query"> <div class="query mt-8">
<div> <div class=" items-center mb-4">
<h2 style="display: inline-block;">输入 API KEY</h2> <h2>输入 API KEY</h2>
<p style="display: inline-block; font-size: smaller;">本站不保存 KEY 信息，查询后请自行保存</p> <p class="text-xs text-gray-400">本站不保存 KEY 信息，查询后请自行保存</p>
</div> </div>
<textarea id="api-key-input" placeholder="请输入 API-KEY或sessID，多个可直接粘贴"></textarea></p> <textarea id="api-key-input"
<!-- API链接选择框 --> class="w-full bg-gray-700 border border-gray-500 rounded px-3 py-2 placeholder-gray-500 placeholder-opacity-50 textarea-xs"
<div class="api-url-container"></div> placeholder="请输入 API-KEY或sessID，多个可直接粘贴"></textarea>
<!-- API链接选择 -->
<div> <div class=" items-center mt-4">
<h2 style="display: inline-block;">选择查询线路</h2> <h2>选择查询线路</h2>
<p style="display: inline-block; font-size: smaller;">支持自定义线路，官网线路需要魔法</p> <p class="text-xs text-gray-400">支持自定义线路，官网线路需要魔法</p>
</div> </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://api.openai.com">【官网线路】api.openai.com</option>
<option value="https://oapi.czl.net">【CZLoapi线路】oapi.czl.net</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="https://openai.996.lat">【群友提供公益CF反代,勿测重要key】openai.996.lat</option>
<option value="custom">【已前置https】自定义 ...</option> <option value="custom">【已前置https】自定义 ...</option>
</select> </select>
<!-- 自定义API链接输入框 --> <input type="text" id="custom-url-input" placeholder="输入自定义API，填域名即可，无需https://"
<input type="text" id="custom-url-input" placeholder="输入自定义API，填域名即可，无需https://" style="width:45%;" /> class="w-full bg-gray-700 border border-gray-500 rounded px-3 py-2 mt-2 text-gray-400 hidden" />
</div> </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> </div>
<h2 id="result-head" style="visibility:hidden">查询结果</h2>
<table id="result-table" style="visibility:hidden"> <div id="setid-toggle" class="form-control w-1/2">
<thead> <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> <tr>
<th style="width:35px">序号</th> <th class="w-1/12">序号</th>
<th>API KEY</th> <th class="w-2/12">API KEY</th>
<th style="width: 50px;">总额度</th> <th class="w-1/12">总额度</th>
<th style="width: 50px">已使用</th> <th class="w-1/12">已使用</th>
<th style="width: 50px">剩余量</th> <th class="w-1/12">剩余量</th>
<th style="width: 90px">已用比例</th> <th class="w-1/12">已用比例</th>
<th style="width: 90px">到期时间</th> <th class="w-1/12">到期时间</th>
<th style="width: 50px">GPT-3.5</th> <th class="w-1/12">模型</th>
<th style="width: 50px">GPT-4</th> <th class="w-1/12">绑卡</th>
<th style="width: 50px">32K</th> <th class="w-1/12" id="subinfo-header">绑卡信息</th>
<th style="width: 60px">绑卡</th> <th class="w-1/12" id="setid-header">组织信息</th>
<th style="width: 120px">绑卡信息</th> <th class="w-1/12">速率</th>
<th style="width: 120px">组织信息</th> <th class="w-1/12">是否有效</th>
<th style="width: 120px">速率</th>
<th style="width: 50px;">是否有效</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody>
<!-- 表格内容 -->
</tbody>
</table> </table>
<div id="myModal" class="modal"> </div>
<div class="modal-content">
<div class="modal-header">
<h2>详细信息</h2>
<span class="close">&times;</span>
</div> </div>
<div class="modal-body">
<p id="modalText"></p>
</div> </div>
</div> </div>
</div>
<footer>
<p>广告链接：
<a href="https://chat.czl.net" target="_blank">CZLChat</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://oapi.czl.net" target="_blank">CZLOapi</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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> <script src="./static/js.js"></script>
</body> </body>

25
static/css-1.css Normal file
View 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
View File

@ -1,19 +1,30 @@
var modal = document.getElementById("myModal"); function toggleSubInfo() {
var span = document.getElementsByClassName("close")[0]; let toggle = document.querySelector("#subinfo-toggle input");
span.onclick = function () { let display = toggle.checked ? "" : "none";
modal.style.display = "none";
} let subInfoHeader = document.getElementById("subinfo-header");
window.onclick = function (event) { subInfoHeader.style.display = display;
if (event.target == modal) {
modal.style.display = "none"; 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 queriedApiKeys = [];
let serialNumber = 1; let serialNumber = 1;
async function checkBilling(apiKey, apiUrl) { async function checkBilling(apiKey, apiUrl) {
const now = new Date(); const now = new Date();
let startDate = new Date(now - 90 * 24 * 60 * 60 * 1000); let startDate = new Date(now - 90 * 24 * 60 * 60 * 1000);
@ -37,9 +48,7 @@ async function checkBilling(apiKey, apiUrl) {
let SubscribleInformation = {}; let SubscribleInformation = {};
let SubInformation; let SubInformation;
let errors = {}; let errors = {};
let response = await fetch(urlSubscription, { headers }); let response = await fetch(urlSubscription, { headers });
let currentDate = new Date(); let currentDate = new Date();
const subscriptionData = await response.json(); const subscriptionData = await response.json();
const expiryDate = new Date(subscriptionData.access_until * 1000 + 8 * 60 * 60 * 1000); const expiryDate = new Date(subscriptionData.access_until * 1000 + 8 * 60 * 60 * 1000);
@ -48,7 +57,7 @@ async function checkBilling(apiKey, apiUrl) {
try { try {
totalAmount = subscriptionData.system_hard_limit_usd; totalAmount = subscriptionData.system_hard_limit_usd;
if (totalAmount > 20) { if (totalAmount > 3) {
startDate = subDate; startDate = subDate;
urlUsage = `${apiUrl}/v1/dashboard/billing/usage?start_date=${formatDate(startDate)}&end_date=${formatDate(endDate)}`; urlUsage = `${apiUrl}/v1/dashboard/billing/usage?start_date=${formatDate(startDate)}&end_date=${formatDate(endDate)}`;
response = await fetch(urlUsage, { headers }); response = await fetch(urlUsage, { headers });
@ -84,7 +93,6 @@ async function checkBilling(apiKey, apiUrl) {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
//获取绑卡信息 //获取绑卡信息
try { try {
// 从 subscriptionData 中获取 SubscribleInformation 的值... // 从 subscriptionData 中获取 SubscribleInformation 的值...
@ -103,7 +111,6 @@ async function checkBilling(apiKey, apiUrl) {
//使用 JavaScript 的可选链式调用来确定是否为null，避免异常控制台报错 //使用 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 += "账单地址: " + (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'); 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 }); response = await fetch(urlPaymentmethods, { headers });
const paymentMethodsData = await response.json(); const paymentMethodsData = await response.json();
@ -126,7 +133,6 @@ async function checkBilling(apiKey, apiUrl) {
catch (error) { catch (error) {
console.error(error); console.error(error);
} }
//组织信息 //组织信息
try { try {
response = await fetch(urlsetid, { headers }); response = await fetch(urlsetid, { headers });
@ -140,12 +146,9 @@ async function checkBilling(apiKey, apiUrl) {
const description = setiddata.data[0].description; const description = setiddata.data[0].description;
const createdTimestamp = setiddata.data[0].created; const createdTimestamp = setiddata.data[0].created;
const createdDate = new Date(createdTimestamp * 1000); const createdDate = new Date(createdTimestamp * 1000);
// 格式化日期 // 格式化日期
const formattedDate = `${createdDate.getFullYear()}.${(createdDate.getMonth() + 1).toString().padStart(2, '0')}.${createdDate.getDate().toString().padStart(2, '0')}`; 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]; const timeAndZone = createdDate.toString().match(/\d{2}:\d{2}:\d{2} \w+/)[0];
if (typeof setiddata.data[1] !== 'undefined') { if (typeof setiddata.data[1] !== 'undefined') {
const id2 = setiddata.data[1].id; const id2 = setiddata.data[1].id;
setid = `${title}\n${email}\n${id1}\n${id2}\n${name}\n${description}\n${formattedDate} ${timeAndZone}`; 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); console.error(error);
errors['setid'] = error.message; errors['setid'] = error.message;
} }
//获取速率 //获取速率
let rateLimits; let rateLimits;
try { try {
@ -179,9 +181,6 @@ async function checkBilling(apiKey, apiUrl) {
console.error(error); console.error(error);
errors['rateLimits'] = error.message; errors['rateLimits'] = error.message;
} }
// 初始化模型查询结果 // 初始化模型查询结果
GPT35CheckResult = '❌'; GPT35CheckResult = '❌';
GPT4CheckResult = '❌'; GPT4CheckResult = '❌';
@ -191,22 +190,14 @@ async function checkBilling(apiKey, apiUrl) {
try { try {
const modelsCheckResponse = await fetch(modelsCheck, { headers }); const modelsCheckResponse = await fetch(modelsCheck, { headers });
const modelsCheckData = await modelsCheckResponse.json(); const modelsCheckData = await modelsCheckResponse.json();
GPT35CheckSuccess = GPT35CheckResult = Array.isArray(modelsCheckData.data) && modelsCheckData.data.some(item => item.id.includes('gpt-3.5-turbo')) ? '✅' : '❌'; 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')) ? '✅' : '❌'; 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')) ? '✅' : '❌'; GPT432kCheckResult = Array.isArray(modelsCheckData.data) && modelsCheckData.data.some(item => item.id.includes('gpt-4-32k')) ? '✅' : '❌';
} catch (error) { } catch (error) {
console.error(error); console.error(error);
errors['modelsCheck'] = error.message; errors['modelsCheck'] = error.message;
} }
// 是否有效查询
async function checkCompletion(apiKey, apiUrl) { async function checkCompletion(apiKey, apiUrl) {
const urlCompletion = `${apiUrl}/v1/chat/completions`; const urlCompletion = `${apiUrl}/v1/chat/completions`;
const headers = { const headers = {
@ -245,9 +236,6 @@ async function checkBilling(apiKey, apiUrl) {
} }
} }
function formatDate(date) { function formatDate(date) {
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
@ -258,17 +246,16 @@ function formatDate(date) {
//查询函数 //查询函数
function sendRequest() { function sendRequest() {
let button = document.querySelector("button"); showLoadingAnimation();
button.textContent = "加载中..."; toggleSubInfo();
button.disabled = true; toggleSetidInfo();
button.classList.add("loading")
let apiKeyInput = document.getElementById("api-key-input"); let apiKeyInput = document.getElementById("api-key-input");
let apiUrlSelect = document.getElementById("api-url-select"); let apiUrlSelect = document.getElementById("api-url-select");
let customUrlInput = document.getElementById("custom-url-input"); let customUrlInput = document.getElementById("custom-url-input");
let table = document.getElementById("result-table"); let table = document.getElementById("result-table");
let h2 = document.getElementById("result-head"); // let h2 = document.getElementById("result-head");
h2.style.visibility = "visible"; // h2.style.visibility = "visible";
table.style.visibility = "visible"; table.style.visibility = "visible";
if (apiKeyInput.value.trim() === "") { if (apiKeyInput.value.trim() === "") {
@ -302,6 +289,8 @@ function sendRequest() {
alert("成功匹配到 API Key，确认后开始查询：" + apiKeys); alert("成功匹配到 API Key，确认后开始查询：" + apiKeys);
let lastQueryPromise = null;
let tableBody = document.querySelector("#result-table tbody"); let tableBody = document.querySelector("#result-table tbody");
for (let i = 0; i < apiKeys.length; i++) { for (let i = 0; i < apiKeys.length; i++) {
let apiKey = apiKeys[i].trim(); let apiKey = apiKeys[i].trim();
@ -394,17 +383,25 @@ function sendRequest() {
expireTime.textContent = data[3]; expireTime.textContent = data[3];
row.appendChild(expireTime); row.appendChild(expireTime);
let GPT35CheckResult = document.createElement("td"); let GPT35CheckResult = document.createElement("td");
GPT35CheckResult.textContent = data[4]; GPT35CheckResult.textContent = data[4];
row.appendChild(GPT35CheckResult);
let GPT4CheckResult = document.createElement("td"); let GPT4CheckResult = document.createElement("td");
GPT4CheckResult.textContent = data[5]; GPT4CheckResult.textContent = data[5];
row.appendChild(GPT4CheckResult);
let GPT432kCheckResult = document.createElement("td"); let GPT432kCheckResult = document.createElement("td");
GPT432kCheckResult.textContent = data[6]; 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"); let isSubscribe = document.createElement("td");
isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行 isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行
@ -412,30 +409,24 @@ function sendRequest() {
row.appendChild(isSubscribe); row.appendChild(isSubscribe);
let SubInformation = document.createElement("td"); let SubInformation = document.createElement("td");
SubInformation.classList.add("subinfo");
let SubInformationContainer = document.createElement("div"); let SubInformationContainer = document.createElement("div");
SubInformationContainer.style.whiteSpace = "pre-wrap"; 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]; SubInformationContainer.textContent = data[8];
}
SubInformation.appendChild(SubInformationContainer); SubInformation.appendChild(SubInformationContainer);
row.appendChild(SubInformation); row.appendChild(SubInformation);
SubInformation.style.display = document.querySelector("#subinfo-toggle input").checked ? "" : "none";
let setidCell = document.createElement("td"); let setidCell = document.createElement("td");
setidCell.classList.add("setid");
let setidCellContainer = document.createElement("div"); let setidCellContainer = document.createElement("div");
setidCellContainer.style.whiteSpace = "pre-wrap"; 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]; setidCellContainer.textContent = data[9];
}
setidCell.appendChild(setidCellContainer); setidCell.appendChild(setidCellContainer);
row.appendChild(setidCell); row.appendChild(setidCell);
setidCell.style.display = document.querySelector("#setid-toggle input").checked ? "" : "none";
let rateLimitsDataCell = document.createElement("td"); let rateLimitsDataCell = document.createElement("td");
@ -447,18 +438,23 @@ function sendRequest() {
let rateLimitsText = ''; let rateLimitsText = '';
for (let model of models) { for (let model of models) {
if (rateLimitsData[model]) { 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 { } else {
rateLimitsText += model + ": ❌\n"; rateLimitsText += model + ": ❌\n";
} }
} }
if (rateLimitsText.length > 50) {
rateLimitsDataContainer.textContent = rateLimitsText.slice(0, 25) + '... ';
rateLimitsDataContainer.appendChild(createSeeMoreLink(rateLimitsText));
} else {
rateLimitsDataContainer.textContent = rateLimitsText; rateLimitsDataContainer.textContent = rateLimitsText;
} }
}
rateLimitsDataCell.appendChild(rateLimitsDataContainer); rateLimitsDataCell.appendChild(rateLimitsDataContainer);
row.appendChild(rateLimitsDataCell); row.appendChild(rateLimitsDataCell);
@ -480,22 +476,51 @@ function sendRequest() {
h2.style.display = 'block'; h2.style.display = 'block';
table.style.display = 'table'; table.style.display = 'table';
button.textContent = "查询"; hideLoadingAnimation();
button.disabled = false;
button.classList.remove("loading")
})
})
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"); function showLoadingAnimation() {
let customUrlInput = document.getElementById("custom-url-input"); 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
View 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
},
//...
}