Merge pull request #13 from woodchen-ink:woodchen-ink/issue12

Woodchen-ink/issue12
This commit is contained in:
wood chen 2023-08-29 00:34:17 +08:00 committed by GitHub
commit 82a39a0f94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 171 additions and 23 deletions

View File

@ -9,9 +9,8 @@ Telegram交流群https://t.me/ai_cn2023
## 最新示意图(2023.08.28) ## 最新示意图(2023.08.28)
![img_v2_29c139e9-9114-42bc-a23d-cba36e635d1g.jpg](https://cdn-img.czl.net/2023/08/28/64eca918b5668.jpg) ![1693240108324.png](https://cdn-img.czl.net/2023/08/29/64eccb2da01a1.png)
![img_v2_388e4f50-a9ee-452d-b0f1-16773bdfc9fg.jpg](https://cdn-img.czl.net/2023/08/28/64eca91cc90fe.jpg) ![1693240132856.png](https://cdn-img.czl.net/2023/08/29/64eccb46017e7.png)
![img_v2_0c1ed439-59b4-4a4a-bf82-b43bd97458ag.jpg](https://cdn-img.czl.net/2023/08/28/64eca9202c6d7.jpg)
## SESS ID获取方法 ## SESS ID获取方法

View File

@ -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">&times;</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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://chat.czl.net" target="_blank">CZLChat</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

View File

@ -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;
}

View File

@ -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);