This commit is contained in:
wood 2023-10-21 14:50:08 +08:00
parent 08b6a4186b
commit 918213a64e
5 changed files with 91 additions and 64 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="mdui-theme-light"> <html class="mdui-theme-light" lang="zh-cmn-Hans">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -7,14 +7,14 @@
<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-1.css" type="text/css" /> <link rel="stylesheet" href="./static/css-1.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/mdui@2.0.1/mdui.css"> <link rel="stylesheet" href="./static/mdui/mdui.css">
<script src="https://unpkg.com/mdui@2.0.1/mdui.global.js"></script> <script src="./static/mdui/mdui.global.js"></script>
<script src="https://unpkg.com/mdui@2.0.1/functions/setColorScheme.js"></script>
</head> </head>
<body> <body>
<mdui-layout class="mdui-prose"> <mdui-layout >
<mdui-layout-main> <mdui-layout-main>
<div class="mdui-main-container">
<h2>查询结果</h2> <h2>查询结果</h2>
<div class="mdui-table"> <div class="mdui-table">
<table id="result-table"> <table id="result-table">
@ -40,6 +40,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</mdui-layout-main> </mdui-layout-main>
<mdui-top-app-bar> <mdui-top-app-bar>
@ -48,7 +49,7 @@
</mdui-top-app-bar> </mdui-top-app-bar>
<mdui-navigation-drawer open class="left-drawer" close-on-overlay-click > <mdui-navigation-drawer open class="left-drawer" close-on-overlay-click >
<div style="width:92%;margin:0 auto;"> <div class="left-drawer-main">
<h3>输入 API KEY</h3> <h3>输入 API KEY</h3>
<p>本站不保存 KEY 信息,查询后请自行保存</p> <p>本站不保存 KEY 信息,查询后请自行保存</p>
<mdui-text-field id="api-key-input" placeholder="请输入 API-KEY或sessID多个可直接粘贴" rows="8" <mdui-text-field id="api-key-input" placeholder="请输入 API-KEY或sessID多个可直接粘贴" rows="8"
@ -57,12 +58,11 @@
<mdui-select id="api-url-select" icon="airline_stops" label="查询线路" value="https://api.openai.com" <mdui-select id="api-url-select" icon="airline_stops" label="查询线路" value="https://api.openai.com"
onchange="toggleCustomUrlInput()"> onchange="toggleCustomUrlInput()">
<mdui-menu-item value="https://api.openai.com">[官网线路]api.openai.com</mdui-menu-item> <mdui-menu-item value="https://api.openai.com">[官网线路]api.openai.com</mdui-menu-item>
<mdui-menu-item value="https://oapi.czl.net">[CZLoapi线路] oapi.czl.net</mdui-menu-item> <mdui-menu-item value="https://oapi.czl.net">[CZLoapi线路]oapi.czl.net</mdui-menu-item>
<mdui-menu-item <mdui-menu-item
value="https://gateway.ai.cloudflare.com/v1/feedd0aa8abd6875052d86a94f1baf83/test/openai">[Cloudflare网关] value="https://gateway.ai.cloudflare.com/v1/feedd0aa8abd6875052d86a94f1baf83/test/openai">[Cloudflare网关]查不了已用量</mdui-menu-item>
查不了已用量</mdui-menu-item> <mdui-menu-item value="https://openai.996.lat">[群友CF反代]openai.996.lat</mdui-menu-item>
<mdui-menu-item value="https://openai.996.lat">[群友提供公益CF反代] openai.996.lat</mdui-menu-item> <mdui-menu-item value="custom">[已前置https]自定义</mdui-menu-item>
<mdui-menu-item value="custom">[已前置https] 自定义</mdui-menu-item>
</mdui-select> </mdui-select>
<mdui-text-field type="text" id="custom-url-input" placeholder="输入自定义API填域名即可无需https://" <mdui-text-field type="text" id="custom-url-input" placeholder="输入自定义API填域名即可无需https://"
@ -83,6 +83,8 @@
<mdui-button full-width id="query-button" icon="search" onclick="sendRequest()"> <mdui-button full-width id="query-button" icon="search" onclick="sendRequest()">
查询 查询
</mdui-button> </mdui-button>
<!-- 下半部分 -->
<h4>页面列表</h4> <h4>页面列表</h4>
<mdui-menu dense style="width:100%;margin-top:20px;"> <mdui-menu dense style="width:100%;margin-top:20px;">
<mdui-menu-item icon="search" href="index.html">查API信息</mdui-menu-item> <mdui-menu-item icon="search" href="index.html">查API信息</mdui-menu-item>

View File

@ -4,19 +4,24 @@
--mdui-color-primary-dark: 208, 188, 255; --mdui-color-primary-dark: 208, 188, 255;
} }
mdui-top-app-bar { mdui-top-app-bar {
background-color: rgba(var(--mdui-color-primary), 0.2); background-color: rgba(var(--mdui-color-primary), 0.8);
} }
mdui-button { mdui-button {
border-radius: var(--mdui-shape-corner-small); border-radius: var(--mdui-shape-corner-small);
} }
.left-drawer-main{
mdui-navigation-drawer { padding:20px 10px 0 10px;
padding-top: 20px; /* background-color: rgba(var(--mdui-color-primary), 0.1); */
height:calc(100vh - 84px);
}
.mdui-main-container{
width:96%;
padding:20px auto 0 auto;
} }
html, html,
body { body {
height: 100%; height: 100VH;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -34,6 +39,8 @@ a {
display: none; display: none;
} }
@font-face { @font-face {
font-family: "Material Icons"; font-family: "Material Icons";
src: url(/static/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2); src: url(/static/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2);

View File

@ -1,3 +1,5 @@
mdui.setColorScheme('#006874');
function toggleProgressBar() { function toggleProgressBar() {
let progressBarHeader = document.getElementById("progressbar-header"); let progressBarHeader = document.getElementById("progressbar-header");
let progressBarCells = document.querySelectorAll("td.progressbar"); let progressBarCells = document.querySelectorAll("td.progressbar");
@ -272,7 +274,6 @@ async function checkBilling(apiKey, apiUrl) {
//查询函数 //查询函数
function sendRequest() { function sendRequest() {
showLoadingAnimation();
toggleProgressBar(); toggleProgressBar();
toggleSubInfo(); toggleSubInfo();
toggleSetidInfo(); toggleSetidInfo();
@ -284,7 +285,11 @@ function sendRequest() {
table.style.visibility = "visible"; table.style.visibility = "visible";
if (apiKeyInput.value.trim() === "") { if (apiKeyInput.value.trim() === "") {
alert("请填写API KEY"); mdui.alert({
headline: "未匹配到 API-KEY",
description: "请检查输入内容",
confirmText: "OK",
})
return; return;
} }
@ -293,7 +298,11 @@ function sendRequest() {
let apiUrl = ""; let apiUrl = "";
if (apiUrlSelect.value === "custom") { if (apiUrlSelect.value === "custom") {
if (customUrlInput.value.trim() === "") { if (customUrlInput.value.trim() === "") {
alert("请设置API链接"); mdui.alert({
headline: "无查询线路",
description: "请选择或自定义",
confirmText: "OK",
})
return; return;
} else { } else {
apiUrl = customUrlInput.value.trim(); apiUrl = customUrlInput.value.trim();
@ -313,11 +322,15 @@ function sendRequest() {
let apiKeys = parseKeys(apiKeyInput.value); let apiKeys = parseKeys(apiKeyInput.value);
if (apiKeys.length === 0) { mdui.alert({
alert("未匹配到 API-KEY请检查输入内容"); headline: "成功匹配到 API Key",
return; description: apiKeys,
} confirmText: "OK",
alert("成功匹配到 API Key确认后开始查询" + apiKeys); });
showLoadingAnimation();
function parseKeys(input) { function parseKeys(input) {
let lines = input.split(/\n/); let lines = input.split(/\n/);
@ -361,36 +374,23 @@ function sendRequest() {
} }
} }
) )
let row = document.createElement("tr"); let row = document.createElement("tr");
row.classList.add("bg-gray-600");
row.classList.add("bg-opacity-60");
row.classList.add("border");
row.classList.add("border-slate-500");
let serialNumberCell = document.createElement("td"); // 创建序列号单元格 let serialNumberCell = document.createElement("td"); // 创建序列号单元格
serialNumberCell.classList.add("border");
serialNumberCell.classList.add("border-slate-500");
serialNumberCell.textContent = serialNumber; serialNumberCell.textContent = serialNumber;
row.appendChild(serialNumberCell); row.appendChild(serialNumberCell);
let apiKeyCell = document.createElement("td"); let apiKeyCell = document.createElement("td");
apiKeyCell.classList.add("border");
apiKeyCell.classList.add("border-slate-500");
apiKeyCell.textContent = apiKey.replace(/^(.{5}).*(.{4})$/, "$1***$2"); apiKeyCell.textContent = apiKey.replace(/^(.{5}).*(.{4})$/, "$1***$2");
row.appendChild(apiKeyCell); row.appendChild(apiKeyCell);
console.log('查看查询结果', data); // 添加 console.log 以查看 data 的值 console.log('查看查询结果', data); // 添加 console.log 以查看 data 的值
let totalAmount = document.createElement("td"); let totalAmount = document.createElement("td");
totalAmount.classList.add("border");
totalAmount.classList.add("border-slate-500");
totalAmount.textContent = typeof data[0] === "number" ? data[0] : "无值"; totalAmount.textContent = typeof data[0] === "number" ? data[0] : "无值";
row.appendChild(totalAmount); row.appendChild(totalAmount);
let totalUsedCell = document.createElement("td"); let totalUsedCell = document.createElement("td");
totalUsedCell.classList.add("border");
totalUsedCell.classList.add("border-slate-500");
typeof data[1] === "number" ? data[1].toFixed(3) : '无值'; typeof data[1] === "number" ? data[1].toFixed(3) : '无值';
if(isNaN(data[1])){ if(isNaN(data[1])){
totalUsedCell.textContent = "无值"; totalUsedCell.textContent = "无值";
@ -400,8 +400,6 @@ function sendRequest() {
row.appendChild(totalUsedCell); row.appendChild(totalUsedCell);
let totalAvailableCell = document.createElement("td"); let totalAvailableCell = document.createElement("td");
totalAvailableCell.classList.add("border");
totalAvailableCell.classList.add("border-slate-500");
if(isNaN(data[2])){ if(isNaN(data[2])){
totalAvailableCell.textContent = "无值"; totalAvailableCell.textContent = "无值";
}else{ }else{
@ -412,8 +410,6 @@ function sendRequest() {
// 进度条 // 进度条
let progressCell = document.createElement("td"); let progressCell = document.createElement("td");
progressCell.classList.add("progressbar"); progressCell.classList.add("progressbar");
progressCell.classList.add("border");
progressCell.classList.add("border-slate-500");
let progressContainer = document.createElement("div"); // 添加一个新的容器元素 let progressContainer = document.createElement("div"); // 添加一个新的容器元素
progressContainer.style.width = "100%"; progressContainer.style.width = "100%";
progressContainer.style.height = "20px"; progressContainer.style.height = "20px";
@ -435,8 +431,6 @@ function sendRequest() {
// 到期时间 // 到期时间
let expireTime = document.createElement("td"); let expireTime = document.createElement("td");
expireTime.classList.add("border");
expireTime.classList.add("border-slate-500");
if (data[3] === "1970-01-01") { if (data[3] === "1970-01-01") {
expireTime.textContent = "永久有效"; expireTime.textContent = "永久有效";
}else if(data[3] === "NaN-NaN-NaN"){ }else if(data[3] === "NaN-NaN-NaN"){
@ -454,8 +448,6 @@ function sendRequest() {
let GPT432kCheckResult = document.createElement("td"); let GPT432kCheckResult = document.createElement("td");
GPT432kCheckResult.textContent = data[6]; GPT432kCheckResult.textContent = data[6];
let highestModel = document.createElement("td"); let highestModel = document.createElement("td");
highestModel.classList.add("border");
highestModel.classList.add("border-slate-500");
if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "❌" && GPT432kCheckResult.textContent === "❌") { if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "❌" && GPT432kCheckResult.textContent === "❌") {
highestModel.textContent = "gpt3.5"; highestModel.textContent = "gpt3.5";
} else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "❌") { } else if (GPT35CheckResult.textContent === "✅" && GPT4CheckResult.textContent === "✅" && GPT432kCheckResult.textContent === "❌") {
@ -469,8 +461,6 @@ function sendRequest() {
row.appendChild(highestModel); row.appendChild(highestModel);
let isSubscribe = document.createElement("td"); let isSubscribe = document.createElement("td");
isSubscribe.classList.add("border");
isSubscribe.classList.add("border-slate-500");
isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行 isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行
isSubscribe.textContent = data[7]; isSubscribe.textContent = data[7];
if (data[7] === "Not Found.") { if (data[7] === "Not Found.") {
@ -482,8 +472,6 @@ function sendRequest() {
row.appendChild(isSubscribe); row.appendChild(isSubscribe);
let SubInformation = document.createElement("td"); let SubInformation = document.createElement("td");
SubInformation.classList.add("border-slate-500");
SubInformation.classList.add("border");
SubInformation.classList.add("subinfo"); SubInformation.classList.add("subinfo");
let SubInformationContainer = document.createElement("div"); let SubInformationContainer = document.createElement("div");
SubInformationContainer.style.whiteSpace = "pre-wrap"; SubInformationContainer.style.whiteSpace = "pre-wrap";
@ -495,8 +483,6 @@ function sendRequest() {
let setidCell = document.createElement("td"); let setidCell = document.createElement("td");
setidCell.classList.add("border");
setidCell.classList.add("border-slate-500");
setidCell.classList.add("setid"); setidCell.classList.add("setid");
let setidCellContainer = document.createElement("div"); let setidCellContainer = document.createElement("div");
setidCellContainer.style.whiteSpace = "pre-wrap"; setidCellContainer.style.whiteSpace = "pre-wrap";
@ -507,8 +493,6 @@ function sendRequest() {
let rateLimitsDataCell = document.createElement("td"); let rateLimitsDataCell = document.createElement("td");
rateLimitsDataCell.classList.add("border");
rateLimitsDataCell.classList.add("border-slate-500");
let rateLimitsDataContainer = document.createElement("div"); let rateLimitsDataContainer = document.createElement("div");
rateLimitsDataContainer.style.whiteSpace = "pre-wrap"; rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
if (data[13]) { if (data[13]) {
@ -541,8 +525,6 @@ function sendRequest() {
// 是否有效列 // 是否有效列
let completionCheckResultCell = document.createElement("td"); let completionCheckResultCell = document.createElement("td");
completionCheckResultCell.classList.add("border");
completionCheckResultCell.classList.add("border-slate-500");
completionCheckResultCell.innerHTML = `<span style="font-size:24px">${data[12][0]}</span><br>消耗${data[12][1]} tokens`; // 使用 innerHTML 添加两行内容 completionCheckResultCell.innerHTML = `<span style="font-size:24px">${data[12][0]}</span><br>消耗${data[12][1]} tokens`; // 使用 innerHTML 添加两行内容
row.appendChild(completionCheckResultCell); row.appendChild(completionCheckResultCell);
@ -556,8 +538,6 @@ function sendRequest() {
serialNumber++; // 增加序列号 serialNumber++; // 增加序列号
table.style.display = 'table'; table.style.display = 'table';
hideLoadingAnimation();
}) })
lastQueryPromise = checkBilling(apiKey, apiUrl).then((data) => { lastQueryPromise = checkBilling(apiKey, apiUrl).then((data) => {
// 查询完成后的代码... // 查询完成后的代码...
@ -587,18 +567,33 @@ function toggleCustomUrlInput() {
function showLoadingAnimation() { function showLoadingAnimation() {
const button = document.getElementById("query-button"); const button = document.getElementById("query-button");
button.disabled = true;
button.innerHTML = ` // 创建一个新的 <mdui-linear-progress> 元素
<span class="loading loading-ring "></span> const progressElement = document.createElement("mdui-linear-progress");
`; progressElement.id = "query-progress";
// 将新元素替代原始按钮元素
button.parentElement.replaceChild(progressElement, button);
} }
function hideLoadingAnimation() { function hideLoadingAnimation() {
const button = document.getElementById("query-button"); const progressElement = document.querySelector("mdui-linear-progress");
button.disabled = false;
if (progressElement) {
const button = document.createElement("mdui-button");
button.id = "query-button";
button.innerHTML = "查询"; button.innerHTML = "查询";
button.setAttribute("full-width", "");
button.setAttribute("icon", "search");
button.setAttribute("onclick", "sendRequest()");
// 将原始按钮元素替代回来
progressElement.parentElement.replaceChild(button, progressElement);
}
} }
const navigationDrawer = document.querySelector(".left-drawer"); const navigationDrawer = document.querySelector(".left-drawer");
const toggleButton = document.getElementById("toggle-button"); const toggleButton = document.getElementById("toggle-button");

1
static/mdui/mdui.css Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long