mirror of
https://github.com/woodchen-ink/openai-billing-query.git
synced 2025-07-18 14:01:59 +08:00
Merge pull request #13 from woodchen-ink:woodchen-ink/issue12
Woodchen-ink/issue12
This commit is contained in:
commit
82a39a0f94
@ -9,9 +9,8 @@ Telegram交流群:https://t.me/ai_cn2023
|
|||||||
|
|
||||||
## 最新示意图(2023.08.28)
|
## 最新示意图(2023.08.28)
|
||||||
|
|
||||||

|

|
||||||

|

|
||||||

|
|
||||||
|
|
||||||
|
|
||||||
## SESS ID获取方法
|
## SESS ID获取方法
|
||||||
|
25
index.html
25
index.html
@ -1,10 +1,9 @@
|
|||||||
<!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>OpenAIAPI 信息查询</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.css" type="text/css" />
|
||||||
</head>
|
</head>
|
||||||
@ -56,15 +55,29 @@
|
|||||||
<th style="width: 50px">GPT-3.5</th>
|
<th style="width: 50px">GPT-3.5</th>
|
||||||
<th style="width: 50px">GPT-4</th>
|
<th style="width: 50px">GPT-4</th>
|
||||||
<th style="width: 50px">32K</th>
|
<th style="width: 50px">32K</th>
|
||||||
<th style="width: 50px">绑卡</th>
|
<th style="width: 60px">绑卡</th>
|
||||||
<th style="width: 230px">绑卡信息</th>
|
<th style="width: 120px">绑卡信息</th>
|
||||||
<th style="width: 230px">组织信息</th>
|
<th style="width: 120px">组织信息</th>
|
||||||
<th style="width: 150px">速率</th>
|
<th style="width: 120px">速率</th>
|
||||||
<th style="width: 50px;">是否有效</th>
|
<th style="width: 50px;">是否有效</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<div id="myModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2>详细信息</h2>
|
||||||
|
<span class="close">×</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p id="modalText"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>广告链接:
|
<p>广告链接:
|
||||||
<a href="https://chat.czl.net" target="_blank">CZLChat</a>
|
<a href="https://chat.czl.net" target="_blank">CZLChat</a>
|
||||||
|
109
static/css.css
109
static/css.css
@ -183,16 +183,8 @@ button.loading::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
/* padding: 2px; */
|
|
||||||
/* border-top: 1px solid var(--border-color); */
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/* opacity: .5; */
|
|
||||||
/* position: fixed; */
|
|
||||||
/* bottom: 0; */
|
|
||||||
/* left: 0; */
|
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
/* width: 100%; */
|
|
||||||
/* background-color:#212121; */
|
|
||||||
line-height: unset !important;
|
line-height: unset !important;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
@ -354,4 +346,103 @@ button.loading::before {
|
|||||||
width: .75rem;
|
width: .75rem;
|
||||||
height: .75rem;
|
height: .75rem;
|
||||||
animation: rotate .5s linear infinite;
|
animation: rotate .5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
/* 在小于768px的屏幕上生效的样式 */
|
||||||
|
|
||||||
|
/* 可以减小字体和表格单元格的大小,使其适应小屏设备 */
|
||||||
|
#result-table th, #result-table td {
|
||||||
|
font-size: 8px;
|
||||||
|
padding: 5px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 可以隐藏一些不是非常重要的列,以便更有效地利用屏幕空间 */
|
||||||
|
#result-table th:nth-child(n+12), #result-table td:nth-child(n+12) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#result-table {
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0 5px;
|
||||||
|
/* padding: 5px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#result-table td {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
padding-top: 100px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fefefe;
|
||||||
|
color: #000000;
|
||||||
|
margin: auto;
|
||||||
|
width: 410px;
|
||||||
|
height: auto;
|
||||||
|
max-height: 80%;
|
||||||
|
border-radius: 12px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.modal h2{
|
||||||
|
margin:8px;
|
||||||
|
}
|
||||||
|
.modal p{
|
||||||
|
margin-block-start:0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
align-self: flex-end;
|
||||||
|
margin:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close:hover,
|
||||||
|
.close:focus {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
padding: 0px;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 12px 12px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 10px 16px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#modalText{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
55
static/js.js
55
static/js.js
@ -1,3 +1,15 @@
|
|||||||
|
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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
let queriedApiKeys = [];
|
let queriedApiKeys = [];
|
||||||
let serialNumber = 1;
|
let serialNumber = 1;
|
||||||
|
|
||||||
@ -362,6 +374,20 @@ function sendRequest() {
|
|||||||
progressCell.appendChild(progressContainer); // 将容器添加到单元格中
|
progressCell.appendChild(progressContainer); // 将容器添加到单元格中
|
||||||
row.appendChild(progressCell);
|
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");
|
let expireTime = document.createElement("td");
|
||||||
@ -388,7 +414,12 @@ function sendRequest() {
|
|||||||
let SubInformation = document.createElement("td");
|
let SubInformation = document.createElement("td");
|
||||||
let SubInformationContainer = document.createElement("div");
|
let SubInformationContainer = document.createElement("div");
|
||||||
SubInformationContainer.style.whiteSpace = "pre-wrap";
|
SubInformationContainer.style.whiteSpace = "pre-wrap";
|
||||||
SubInformationContainer.textContent = data[8];
|
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);
|
SubInformation.appendChild(SubInformationContainer);
|
||||||
row.appendChild(SubInformation);
|
row.appendChild(SubInformation);
|
||||||
|
|
||||||
@ -396,23 +427,37 @@ function sendRequest() {
|
|||||||
let setidCell = document.createElement("td");
|
let setidCell = document.createElement("td");
|
||||||
let setidCellContainer = document.createElement("div");
|
let setidCellContainer = document.createElement("div");
|
||||||
setidCellContainer.style.whiteSpace = "pre-wrap";
|
setidCellContainer.style.whiteSpace = "pre-wrap";
|
||||||
setidCellContainer.textContent = data[9];
|
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);
|
setidCell.appendChild(setidCellContainer);
|
||||||
row.appendChild(setidCell);
|
row.appendChild(setidCell);
|
||||||
|
|
||||||
|
|
||||||
let rateLimitsDataCell = document.createElement("td");
|
let rateLimitsDataCell = document.createElement("td");
|
||||||
let rateLimitsDataContainer = document.createElement("div");
|
let rateLimitsDataContainer = document.createElement("div");
|
||||||
rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
|
rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
|
||||||
if (data[13]) { // checking if rateLimits data exists
|
if (data[13]) {
|
||||||
let rateLimitsData = data[13];
|
let rateLimitsData = data[13];
|
||||||
let models = ['gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4', 'gpt-4-32k'];
|
let models = ['gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4', 'gpt-4-32k'];
|
||||||
|
let rateLimitsText = '';
|
||||||
for (let model of models) {
|
for (let model of models) {
|
||||||
if (rateLimitsData[model]) {
|
if (rateLimitsData[model]) {
|
||||||
rateLimitsDataContainer.textContent += `${model}:\n\tRPM: ${rateLimitsData[model].max_requests_per_1_minute}\n\tTPM: ${rateLimitsData[model].max_tokens_per_1_minute}\n\n`;
|
rateLimitsText += `${model}:\n\tRPM: ${rateLimitsData[model].max_requests_per_1_minute}\n\tTPM: ${rateLimitsData[model].max_tokens_per_1_minute}\n\n`;
|
||||||
} else {
|
} else {
|
||||||
rateLimitsDataContainer.textContent += model + ": ❌\n";
|
rateLimitsText += model + ": ❌\n";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (rateLimitsText.length > 50) {
|
||||||
|
rateLimitsDataContainer.textContent = rateLimitsText.slice(0, 25) + '... ';
|
||||||
|
rateLimitsDataContainer.appendChild(createSeeMoreLink(rateLimitsText));
|
||||||
|
} else {
|
||||||
|
rateLimitsDataContainer.textContent = rateLimitsText;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
rateLimitsDataCell.appendChild(rateLimitsDataContainer);
|
rateLimitsDataCell.appendChild(rateLimitsDataContainer);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user