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

调整下右侧表格的颜色，顺便加一下每一列的线

Browse Source 
Fixes #26
This commit is contained in:
wood 2023-09-03 21:33:44 +08:00
parent c6bfa059d0
commit dbc489523f
3 changed files with 214 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@ -49,7 +49,16 @@
</div> </div>
<div class="flex mt-4"> <div class="flex mt-4">
<div id="progressbar-toggle" class="form-control w-1/3">
<label class="label">
<span class="label-text text-warning">已用比例</span>
</label>
<input type="checkbox" class="toggle toggle-primary" onchange="toggleProgressBar()">
</div>
<div id="subinfo-toggle" class="form-control w-1/3"> <div id="subinfo-toggle" class="form-control w-1/3">
<label class="label"> <label class="label">
<span class="label-text text-warning">绑卡信息</span> <span class="label-text text-warning">绑卡信息</span>
@ -88,25 +97,25 @@
<h2 class="text-2xl mb-6 font-semibold text-gradient">查询结果</h2> <h2 class="text-2xl mb-6 font-semibold text-gradient">查询结果</h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="overflow-y-hidden "> <div class="overflow-y-hidden ">
<table id="result-table" class="table table-xs bg-neutral-content/20 w-full"> <table id="result-table" class="table table-md border border-slate-500 w-full">
<thead class="text-white"> <thead class="text-white border-b border-slate-500">
<tr> <tr class="bg-gray-800 bg-opacity-80">
<th class="w-1/12">序号</th> <th class="w-0.5 border border-slate-500">序号</th>
<th class="w-2/12">API KEY</th> <th class="w-2/12 border border-slate-500">API KEY</th>
<th class="w-1/12">总额度</th> <th class="w-auto border border-slate-500">总额度</th>
<th class="w-1/12">已使用</th> <th class="w-auto border border-slate-500">已使用</th>
<th class="w-1/12">剩余量</th> <th class="w-auto border border-slate-500">剩余量</th>
<th class="w-1/12">已用比例</th> <th class="w-auto border border-slate-500" id="progressbar-header">已用比例</th>
<th class="w-1/12">到期时间</th> <th class="w-36 border border-slate-500">到期时间</th>
<th class="w-1/12">模型[最高]</th> <th class="w-auto border border-slate-500">模型[最高]</th>
<th class="w-1/12">绑卡</th> <th class="w-auto border border-slate-500" >绑卡</th>
<th class="w-1/12" id="subinfo-header">绑卡信息</th> <th class="w-auto border border-slate-500" id="subinfo-header">绑卡信息</th>
<th class="w-1/12" id="setid-header">组织信息</th> <th class="w-auto border border-slate-500" id="setid-header">组织信息</th>
<th class="w-2/12">速率[RPM,TPM]</th> <th class="w-2/12 border border-slate-500">速率[RPM,TPM]</th>
<th class="w-1/12">有效</th> <th class="w-2 border border-slate-500">有效</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="border-t border-slate-500">
<!-- 表格内容 --> <!-- 表格内容 -->
</tbody> </tbody>
</table> </table>

325
static/js.js
View File

@ -1,3 +1,11 @@
function toggleProgressBar() {
let progressBarHeader = document.getElementById("progressbar-header");
let progressBarCells = document.querySelectorAll("td.progressbar");
let toggle = document.querySelector("#progressbar-toggle input");
let display = toggle.checked ? "" : "none";
progressBarHeader.style.display = display;
progressBarCells.forEach(function (cell) { cell.style.display = display; });
}
function toggleSubInfo() { function toggleSubInfo() {
let toggle = document.querySelector("#subinfo-toggle input"); let toggle = document.querySelector("#subinfo-toggle input");
let display = toggle.checked ? "" : "none"; let display = toggle.checked ? "" : "none";
@ -19,6 +27,7 @@ function toggleSetidInfo() {
let setIdCells = document.querySelectorAll("td.setid"); let setIdCells = document.querySelectorAll("td.setid");
setIdCells.forEach(function (cell) { cell.style.display = display; }); setIdCells.forEach(function (cell) { cell.style.display = display; });
} }
toggleProgressBar();
toggleSubInfo(); toggleSubInfo();
toggleSetidInfo(); toggleSetidInfo();
@ -64,7 +73,7 @@ async function checkBilling(apiKey, apiUrl) {
if ((subscriptionData.billing_mechanism === 'advance') || (totalAmount <= 6 && !subscriptionData.has_credit_card)) { if ((subscriptionData.billing_mechanism === 'advance') || (totalAmount <= 6 && !subscriptionData.has_credit_card)) {
totalAmount = advanceData.total_granted; totalAmount = advanceData.total_granted;
} }
if (totalAmount > 6) { if (totalAmount > 6) {
startDate = subDate; startDate = subDate;
@ -76,7 +85,7 @@ async function checkBilling(apiKey, apiUrl) {
const usageData = await response.json(); const usageData = await response.json();
totalUsage = usageData.total_usage / 100; totalUsage = usageData.total_usage / 100;
remaining = (totalAmount - totalUsage).toFixed(3); remaining = (totalAmount - totalUsage).toFixed(3);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
errors['subscription'] = error.message; errors['subscription'] = error.message;
@ -289,22 +298,22 @@ function sendRequest() {
apiUrl = apiUrlSelect.value; apiUrl = apiUrlSelect.value;
} }
let apiKeys = parseKeys(apiKeyInput.value); let apiKeys = parseKeys(apiKeyInput.value);
if (apiKeys.length === 0) { if (apiKeys.length === 0) {
alert("未匹配到 API-KEY，请检查输入内容"); alert("未匹配到 API-KEY，请检查输入内容");
return; return;
} }
alert("成功匹配到 API Key，确认后开始查询：" + apiKeys); alert("成功匹配到 API Key，确认后开始查询：" + apiKeys);
function parseKeys(input) { function parseKeys(input) {
let lines = input.split(/\n/); let lines = input.split(/\n/);
let result = []; let result = [];
for (let line of lines) { for (let line of lines) {
let sessKeyMatch = line.match(/sess-[^-]+/); let sessKeyMatch = line.match(/sess-[^-]+/);
let skKeyMatch = line.match(/sk-[^-]+/); let skKeyMatch = line.match(/sk-[^-]+/);
if (sessKeyMatch !== null && skKeyMatch !== null) { if (sessKeyMatch !== null && skKeyMatch !== null) {
result.push(sessKeyMatch[0]); result.push(sessKeyMatch[0]);
} }
@ -317,7 +326,7 @@ function sendRequest() {
} }
return result; return result;
} }
let lastQueryPromise = null; let lastQueryPromise = null;
@ -342,162 +351,174 @@ function sendRequest() {
) )
let row = document.createElement("tr"); let row = document.createElement("tr");
row.classList.add("hover:bg-gray-700"); 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.textContent = serialNumber; // 设置序列号文本 serialNumberCell.classList.add("border");
row.appendChild(serialNumberCell); // 将序列号单元格添加到行中 serialNumberCell.classList.add("border-slate-500");
serialNumberCell.textContent = serialNumber;
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 的值
if (data[0] === undefined) { let totalAmount = document.createElement("td");
let errorMessageCell = document.createElement("td"); totalAmount.classList.add("border");
errorMessageCell.colSpan = "8"; totalAmount.classList.add("border-slate-500");
errorMessageCell.classList.add("status-error"); totalAmount.textContent = data[0];
errorMessageCell.textContent = "不正确或已失效的API-KEY"; row.appendChild(totalAmount);
row.appendChild(errorMessageCell);
let totalUsedCell = document.createElement("td");
totalUsedCell.classList.add("border");
totalUsedCell.classList.add("border-slate-500");
if (!isNaN(data[1])) {
totalUsedCell.textContent = data[1].toFixed(3);
} else { } else {
let totalAmount = document.createElement("td"); totalUsedCell.textContent = '❌'
totalAmount.textContent = data[0];
row.appendChild(totalAmount);
let totalUsedCell = document.createElement("td");
if (!isNaN(data[1])) {
totalUsedCell.textContent = data[1].toFixed(3);
} else {
totalUsedCell.textContent = '❌'
}
row.appendChild(totalUsedCell);
let totalAvailableCell = document.createElement("td");
totalAvailableCell.textContent = typeof data[2] === 'number' ? data[2] : data[2];
row.appendChild(totalAvailableCell);
let progressCell = document.createElement("td");
let progressContainer = document.createElement("div"); // 添加一个新的容器元素
progressContainer.style.width = "100%";
progressContainer.style.height = "20px";
progressContainer.style.backgroundColor = "#f3f3f3"; // 设置容器的背景色为灰白色
let progressBar = document.createElement("div");
progressBar.style.width = (data[1] / data[0] * 100).toFixed(2) + "%";
progressBar.style.height = "20px";
progressBar.style.backgroundColor = "#4CAF50";
progressBar.style.position = "relative"; // 设置进度条的 position 为 relative
progressBar.textContent = (data[1] / data[0] * 100).toFixed(2) + "%"; // 显示百分比
progressBar.style.textAlign = "right"; // 设置文本对齐方式为右对齐
progressBar.style.paddingRight = "5px"; // 设置右边距以确保文本不超出边界
progressBar.style.color = "black"; // 设置文本颜色为白色
progressContainer.appendChild(progressBar); // 将进度条添加到容器中
progressCell.appendChild(progressContainer); // 将容器添加到单元格中
row.appendChild(progressCell);
function createSeeMoreLink(text) {
let seeMoreLink = document.createElement("a");
seeMoreLink.href = "#";
seeMoreLink.textContent = '全部';
seeMoreLink.style.cursor = "pointer";
seeMoreLink.style.textDecoration = "underline";
seeMoreLink.onclick = (event) => {
event.preventDefault();
document.getElementById('modalText').textContent = text;
document.getElementById('myModal').style.display = "block";
};
return seeMoreLink;
}
let expireTime = document.createElement("td");
expireTime.textContent = data[3];
row.appendChild(expireTime);
let GPT35CheckResult = document.createElement("td");
GPT35CheckResult.textContent = data[4];
let GPT4CheckResult = document.createElement("td");
GPT4CheckResult.textContent = data[5];
let GPT432kCheckResult = document.createElement("td");
GPT432kCheckResult.textContent = data[6];
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"; // 添加这一行来保留换行
isSubscribe.textContent = data[7];
row.appendChild(isSubscribe);
let SubInformation = document.createElement("td");
SubInformation.classList.add("subinfo");
let SubInformationContainer = document.createElement("div");
SubInformationContainer.style.whiteSpace = "pre-wrap";
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";
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");
let rateLimitsDataContainer = document.createElement("div");
rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
if (data[13]) {
let rateLimitsData = data[13];
let models = ['gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4', 'gpt-4-32k'];
let rateLimitsText = '';
for (let model of models) {
if (rateLimitsData[model]) {
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";
}
}
rateLimitsDataContainer.textContent = rateLimitsText;
}
rateLimitsDataCell.appendChild(rateLimitsDataContainer);
row.appendChild(rateLimitsDataCell);
// 是否有效列
let completionCheckResultCell = document.createElement("td");
completionCheckResultCell.innerHTML = `<span style="font-size:24px">${data[12][0]}</span><br>消耗${data[12][1]} tokens`; // 使用 innerHTML 添加两行内容
row.appendChild(completionCheckResultCell);
} }
row.appendChild(totalUsedCell);
let totalAvailableCell = document.createElement("td");
totalAvailableCell.classList.add("border");
totalAvailableCell.classList.add("border-slate-500");
totalAvailableCell.textContent = typeof data[2] === 'number' ? data[2] : data[2];
row.appendChild(totalAvailableCell);
let progressCell = document.createElement("td");
progressCell.classList.add("progressbar");
progressCell.classList.add("border");
progressCell.classList.add("border-slate-500");
let progressContainer = document.createElement("div"); // 添加一个新的容器元素
progressContainer.style.width = "100%";
progressContainer.style.height = "20px";
progressContainer.style.backgroundColor = "#f3f3f3"; // 设置容器的背景色为灰白色
let progressBar = document.createElement("div");
progressBar.style.width = (data[1] / data[0] * 100).toFixed(2) + "%";
progressBar.style.height = "20px";
progressBar.style.backgroundColor = "#4CAF50";
progressBar.style.position = "relative"; // 设置进度条的 position 为 relative
progressBar.textContent = (data[1] / data[0] * 100).toFixed(2) + "%"; // 显示百分比
progressBar.style.textAlign = "right"; // 设置文本对齐方式为右对齐
progressBar.style.paddingRight = "5px"; // 设置右边距以确保文本不超出边界
progressBar.style.color = "black"; // 设置文本颜色为白色
progressContainer.appendChild(progressBar); // 将进度条添加到容器中
progressCell.appendChild(progressContainer); // 将容器添加到单元格中
row.appendChild(progressCell);
progressCell.style.display = document.querySelector("#progressbar-toggle input").checked ? "" : "none";
// 到期时间
let expireTime = document.createElement("td");
expireTime.classList.add("border");
expireTime.classList.add("border-slate-500");
expireTime.textContent = data[3];
row.appendChild(expireTime);
let GPT35CheckResult = document.createElement("td");
GPT35CheckResult.textContent = data[4];
let GPT4CheckResult = document.createElement("td");
GPT4CheckResult.textContent = data[5];
let GPT432kCheckResult = document.createElement("td");
GPT432kCheckResult.textContent = data[6];
let highestModel = document.createElement("td");
highestModel.classList.add("border");
highestModel.classList.add("border-slate-500");
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.classList.add("border");
isSubscribe.classList.add("border-slate-500");
isSubscribe.style.whiteSpace = "pre"; // 添加这一行来保留换行
isSubscribe.textContent = data[7];
row.appendChild(isSubscribe);
let SubInformation = document.createElement("td");
SubInformation.classList.add("border-slate-500");
SubInformation.classList.add("border");
SubInformation.classList.add("subinfo");
let SubInformationContainer = document.createElement("div");
SubInformationContainer.style.whiteSpace = "pre-wrap";
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("border");
setidCell.classList.add("border-slate-500");
setidCell.classList.add("setid");
let setidCellContainer = document.createElement("div");
setidCellContainer.style.whiteSpace = "pre-wrap";
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");
rateLimitsDataCell.classList.add("border");
rateLimitsDataCell.classList.add("border-slate-500");
let rateLimitsDataContainer = document.createElement("div");
rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
if (data[13]) {
let rateLimitsData = data[13];
let models = ['gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4', 'gpt-4-32k'];
let rateLimitsText = '';
for (let model of models) {
if (rateLimitsData[model]) {
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";
}
}
rateLimitsDataContainer.textContent = rateLimitsText;
}
rateLimitsDataCell.appendChild(rateLimitsDataContainer);
row.appendChild(rateLimitsDataCell);
// 是否有效列
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 添加两行内容
row.appendChild(completionCheckResultCell);
tableBody.appendChild(row); tableBody.appendChild(row);
if (i === apiKeys.length - 1) { if (i === apiKeys.length - 1) {

39
tailwind.config.js
View File

@ -1,14 +1,14 @@
module.exports = { module.exports = {
theme: { theme: {
screens: { screens: {
"sm": "640px", "sm": "640px",
"md": "768px", "md": "768px",
"lg": "1024px", "lg": "1024px",
"xl": "1280px", "xl": "1280px",
"2xl": "1600px", "2xl": "1600px",
'sm': '576px', 'sm': '576px',
"2xl":{'max': '1600px'}, "2xl": { 'max': '1600px' },
// => @media (min-width: 576px) { ... } // => @media (min-width: 576px) { ... }
'md': '960px', 'md': '960px',
@ -16,22 +16,13 @@ module.exports = {
'lg': '1560px', 'lg': '1560px',
// => @media (min-width: 1440px) { ... } // => @media (min-width: 1440px) { ... }
} }
}, },
plugins: [require("daisyui")], plugins: [require("daisyui")],
variants: {
extend: {
// daisyui: { borderColor: ['responsive', 'hover', 'focus']
// themes: false, }
// darkTheme: "dark", }
// base: true, }
// styled: true,
// utils: true,
// rtl: false,
// prefix: "",
// logs: true,
// },
//...
}