From fdbe6510b6df6ae1599439455954a6936f2e6976 Mon Sep 17 00:00:00 2001
From: wood chen <95951386+woodchen-ink@users.noreply.github.com>
Date: Fri, 9 Jun 2023 18:20:34 +0800
Subject: [PATCH] 1.0.0

---
 favicon.ico | Bin 0 -> 9662 bytes
 index.html  | 621 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 621 insertions(+)
 create mode 100644 favicon.ico
 create mode 100644 index.html

diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a6971fedc8f58572062ac3823a9f7a69dd70d77a
GIT binary patch
literal 9662
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e194fda
--- /dev/null
+++ b/index.html
@@ -0,0 +1,621 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CZL Chat-查询OpenAIAPI余额</title>
+  <meta name="description" content="批量快速查询OPENAI的余额，支持可视化展现已用比例、额度、已用量、未用量、是否GPT-4、是否绑卡">
+  <style>
+    :root {
+      --color-primary: #1E3B7A;
+      --color-primary-dark: #1E3B7A;
+      --color-primary-alpha: #01847f;
+      --body-color: #dadada;
+      --body-bg: #000000;
+      --border-color: #f8f8f800;
+    }
+
+    body {
+      background: url('https://img.cdn.czl.net/i/2023/05/23/pjbczr.webp') no-repeat center center fixed;
+      /* 自定义背景图 */
+      background-size: cover;
+      width: 90%;
+      max-width: 980px;
+      margin-left: auto;
+      margin-right: auto;
+      padding-left: 2rem;
+      padding-right: 2rem;
+      color: var(--body-color);
+      /* background: var(--body-bg); */
+      font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
+      line-height: 1.5;
+      -webkit-tap-highlight-color: rgb(252, 247, 247);
+      text-rendering: optimizelegibility;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .query {
+      max-width: 50rem;
+      margin: auto;
+    }
+
+    a {
+      color: var(--color-primary);
+      text-decoration: none;
+      transition: color .3s;
+    }
+
+    a:hover {
+      color: var(--color-primary);
+      text-decoration: underline;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      text-align: center;
+    }
+
+    main[x-cloak] {
+      opacity: 0;
+    }
+
+    main:not([x-cloak]) {
+      opacity: 1;
+      transition: opacity .3s;
+    }
+
+    textarea {
+      -webkit-appearance: none;
+      appearance: none;
+      display: block;
+      width: 100%;
+      padding: .5rem 1rem;
+      border: 1px solid var(--border-color);
+      border-radius: .25rem;
+      box-sizing: border-box;
+      color: #33404d;
+      line-height: inherit;
+      font-size: 1rem;
+      transition: border .3s, box-shadow .3s;
+    }
+
+    textarea:focus {
+      box-shadow: 0 0 0 .25rem var(--color-primary-alpha);
+      border-color: var(--color-primary);
+      outline: 0;
+    }
+
+    input {
+      -webkit-appearance: none;
+      appearance: none;
+      display: block;
+      width: 100%;
+      padding: .5rem 1rem;
+      border: 1px solid var(--border-color);
+      border-radius: .25rem;
+      box-sizing: border-box;
+      color: #33404d;
+      line-height: inherit;
+      font-size: 1rem;
+      transition: border .3s, box-shadow .3s;
+    }
+
+    input:focus {
+      box-shadow: 0 0 0 .25rem var(--color-primary-alpha);
+      border-color: var(--color-primary);
+      outline: 0;
+    }
+
+    details {
+      margin: 1rem 0 2rem;
+      border: 1px solid var(--border-color);
+      border-radius: .25rem;
+      transition: background .3s;
+    }
+
+    details[open] {
+      background: #fff;
+    }
+
+    details summary {
+      padding: .5rem 1rem;
+      font-weight: 500;
+      user-select: none;
+      cursor: pointer;
+      opacity: .8;
+      outline: 0;
+    }
+
+    details div {
+      padding: 1rem;
+      border-top: 1px solid var(--border-color);
+    }
+
+    details small {
+      margin: 0;
+      font-size: .875rem;
+      line-height: 2;
+    }
+
+    button {
+      appearance: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      margin: auto;
+      max-width: 50rem;
+      margin-bottom: 1rem;
+      padding: .5rem .75rem;
+      border: 1px solid var(--color-primary);
+      border-radius: .25rem;
+      background: var(--color-primary);
+      color: #fff;
+      font-size: 1rem;
+      font-weight: 500;
+      line-height: inherit;
+      cursor: pointer;
+      user-select: none;
+      transition: border .3s, background .3s, ;
+    }
+
+    button:hover {
+      border-color: var(--color-primary-dark);
+      background: var(--color-primary-dark);
+    }
+
+    button:focus {
+      box-shadow: 0 0 0 .25rem var(--color-primary-alpha);
+      border-color: var(--color-primary);
+      outline: 0;
+    }
+
+    button:disabled {
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+      opacity: .6;
+      cursor: not-allowed;
+    }
+
+    button.loading::before {
+      content: '';
+      display: inline-block;
+      margin-right: .5rem;
+      border: 2px solid #fff;
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+      border-radius: 50%;
+      width: .75rem;
+      height: .75rem;
+      animation: rotate .5s linear infinite;
+    }
+
+    footer {
+      padding: 1rem;
+      border-top: 1px solid var(--border-color);
+      text-align: center;
+      opacity: .5;
+    }
+
+    footer i {
+      font-style: normal;
+      color: #b32142;
+    }
+
+    .success,
+    .error {
+      margin-bottom: 1rem;
+      padding: .5rem 1rem;
+      border-radius: .25rem;
+      color: #fff;
+      text-align: center;
+      opacity: 1;
+      transition: opacity .3s;
+    }
+
+    .success {
+      /* border: 1px solid #12b886; */
+      background: #38d9a9;
+    }
+
+    .error {
+      /* border: 1px solid #b32142; */
+      background: #b32142;
+    }
+
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* 设置API URL选择器和自定义URL输入框的样式 */
+    select#api-url-select,
+    input#custom-url-input {
+      width: 100%;
+      height: 2.4rem;
+      font-size: 1rem;
+      background-color: #212121;
+      margin-bottom: .5rem;
+      padding: .5rem .75rem;
+      color: #ffffff;
+      border: none;
+      padding: .5rem .75rem;
+      border-radius: .25rem;
+      margin-right: 10px;
+      margin-top: 2vhpx;
+      /* 添加了顶部边距 */
+    }
+
+
+
+    /* 隐藏自定义API链接输入框 */
+    input#custom-url-input {
+      display: none;
+      height: 50px;
+      /* 添加高度 */
+    }
+
+
+
+    /* 下面的代码定义了结果表格的样式 */
+    #result-table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-top: 20px;
+      font-size: 14px;
+      border-radius: 5px;
+      border: none;
+      overflow: hidden;
+    }
+
+    /* 下面的代码定义了结果表格表头的样式 */
+    #result-table th {
+      background-color: var(--color-primary);
+      color: #ffffff;
+      font-weight: 400;
+      height: 20px;
+      padding: 10px 25px;
+      text-align: left;
+      /* border: 1px solid #dcdcdc; */
+    }
+
+    /* 下面的代码定义了结果表格数据单元格的样式 */
+    #result-table td {
+      height: 20px;
+      text-align: left;
+      padding: 10px 25px;
+      /* border: 1px solid #d3d3d3; */
+    }
+
+    /* 下面的代码定义了结果表格奇数行的背景颜色 */
+    #result-table tbody tr:nth-child(odd) {
+      background-color: #252422;
+    }
+
+    /* 下面的代码定义了结果表格偶数行的背景颜色 */
+    #result-table tbody tr:nth-child(even) {
+      background-color: #31302d;
+    }
+
+    /* 下面的代码定义了结果表格表头的宽度 */
+    #result-table .table-header {
+      width: 25%;
+    }
+
+    /* 下面的代码定义了结果表格数据单元格的宽度、字体加粗和颜色 */
+    #result-table .table-data {
+      width: 25%;
+      font-weight: bold;
+      color: #1c248b;
+    }
+
+    /* 下面的代码定义了结果表格数据单元格的样式 */
+    #result-table .status-error {
+      height: 20px;
+      text-align: center;
+      padding: 10px 25px;
+      /* border: 1px solid #dcdcdc; */
+    }
+
+    /* 下面的代码定义了一个类名为status-ok的样式，用于设置成功状态的文本颜色 */
+    .status-ok {
+      color: #2d8d2d;
+    }
+
+    /* 下面的代码定义了一个类名为status-error的样式，用于设置错误状态的文本颜色 */
+    .status-error {
+      color: #ed0808;
+    }
+
+    #api-key-input {
+      width: 100%;
+      height: 100px;
+      /* border: 1px solid #999; */
+      background-color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <header>
+    <h1 class="text-3xl font-semibold text-center mb-8 text-gradient">查询 OpenAI API 余额</h1>
+  </header>
+
+  <div class="query">
+    <div>
+      <h2 style="display: inline-block;">输入 API KEY</h2>
+      <p style="display: inline-block; font-size: smaller;">本站不保存 KEY 信息，查询后请自行保存</p>
+    </div>
+    <textarea id="api-key-input" placeholder="请输入 API-KEY，必须包含 sk-,多个可直接粘贴"></textarea></p>
+    <!-- API链接选择框 -->
+    <div class="api-url-container"></div>
+    <!-- API链接选择 -->
+    <div>
+      <h2 style="display: inline-block;">选择查询线路</h2>
+      <p style="display: inline-block; font-size: smaller;">支持自定义线路，官网线路需要魔法</p>
+    </div>
+    <select id="api-url-select">
+      <option value="https://api.openai.com">【官网线路】api.openai.com</option>
+      <option value="https://openaibilling.woodchen.ink">【CloudFlare】openaibilling.woodchen.ink</option>
+      <option value="custom">【已前置https】自定义 ...</option>
+    </select>
+
+    <!-- 自定义API链接输入框 -->
+    <input type="text" id="custom-url-input" placeholder="输入自定义API，默认使用 https 协议" />
+  </div>
+  <button :class="{ loading }" :disabled="loading" onclick="sendRequest()">查询</button> </p>
+  </div>
+  <h2 id="result-head" style="visibility:hidden">查询结果</h2>
+  <table id="result-table" style="visibility:hidden">
+    <thead>
+      <tr>
+        <th>API KEY</th>
+        <th style="width: 50px">总额度</th>
+        <th style="width: 50px">已使用</th>
+        <th style="width: 50px">剩余量</th>
+        <th style="width: 120px">已用比例</th>
+        <th style="width: 60px">到期时间</th>
+        <th style="width: 50px">GPT-4</th>
+        <th style="width: 50px">绑卡</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+  <footer>
+    <a href="https://chat.czl.net" style="color: white;" target="_blank">CZL Chat</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <a href="https://store0.czl.net" style="color: white;" target="_blank">AI Store</a>
+
+  </footer>
+
+
+  <script>
+    let queriedApiKeys = [];
+
+    async function checkBilling(apiKey, apiUrl) {
+      // 计算起始日期和结束日期,当前为 90 天，最大不超过100天
+      const now = new Date();
+      let startDate = new Date(now - 90 * 24 * 60 * 60 * 1000);
+      const endDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
+      const subDate = new Date(now);
+      subDate.setDate(1);
+
+      // 设置API请求URL和请求头
+      const headers = {
+        "Authorization": "Bearer " + apiKey,
+        "Content-Type": "application/json"
+      };
+      const gpt4Check = `${apiUrl}/v1/models`;
+      const urlSubscription = `${apiUrl}/v1/dashboard/billing/subscription`;
+      let urlUsage = `${apiUrl}/v1/dashboard/billing/usage?start_date=${formatDate(startDate)}&end_date=${formatDate(endDate)}`;
+
+      try {
+        // 获取API限额
+        let response = await fetch(urlSubscription, { headers });
+        if (!response.ok) {
+          console.log("APIKEY 错误或账号被封，请登录 OpenAI 查看。");
+          return;
+        }
+
+        let currentDate = new Date();
+        const subscriptionData = await response.json();
+        const totalAmount = subscriptionData.system_hard_limit_usd;
+        const expiryDate = new Date(subscriptionData.access_until * 1000 + 8 * 60 * 60 * 1000);
+        const formattedDate = `${expiryDate.getFullYear()}-${(expiryDate.getMonth() + 1).toString().padStart(2, '0')}-${expiryDate.getDate().toString().padStart(2, '0')}`;
+
+        const gpt4CheckResponse = await fetch(gpt4Check, { headers });
+        const gpt4CheckData = await gpt4CheckResponse.json();
+        let GPT4CheckResult = Array.isArray(gpt4CheckData.data) && gpt4CheckData.data.some(item => item.id.includes('gpt-4')) ? '✅' : '❌';
+        let isSubscrible = subscriptionData.plan.id.includes('payg') ? '🟢' : '🔴';
+
+        if (totalAmount > 20) {
+          startDate = subDate;
+          urlUsage = `${apiUrl}/v1/dashboard/billing/usage?start_date=${formatDate(startDate)}&end_date=${formatDate(endDate)}`;
+          response = await fetch(urlUsage, { headers });
+          const usageData = await response.json();
+        }
+
+        response = await fetch(urlUsage, { headers });
+        const usageData = await response.json();
+        const totalUsage = usageData.total_usage / 100;
+        let remaining;
+        if (currentDate > expiryDate) {
+          remaining = "🔴过期";
+        } else {
+          remaining = subscriptionData.system_hard_limit_usd - totalUsage;
+        }
+
+        return [totalAmount, totalUsage, remaining, formattedDate, GPT4CheckResult, isSubscrible];
+      } catch (error) {
+        console.error(error);
+        return ["Error", null, null, null, null, null];
+      }
+    }
+
+    function formatDate(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+
+      return `${year}-${month}-${day}`;
+    }
+
+    function sendRequest() {
+      let apiKeyInput = document.getElementById("api-key-input");
+      let apiUrlSelect = document.getElementById("api-url-select");
+      let customUrlInput = document.getElementById("custom-url-input");
+      let table = document.getElementById("result-table");
+      let h2 = document.getElementById("result-head");
+      h2.style.visibility = "visible";
+      table.style.visibility = "visible";
+
+      if (apiKeyInput.value.trim() === "") {
+        alert("请填写API KEY");
+        return;
+      }
+
+      document.getElementById("result-table").getElementsByTagName('tbody')[0].innerHTML = "";
+
+      let apiUrl = "";
+      if (apiUrlSelect.value === "custom") {
+        if (customUrlInput.value.trim() === "") {
+          alert("请设置API链接");
+          return;
+        } else {
+          apiUrl = customUrlInput.value.trim();
+          if (!apiUrl.startsWith("http://") && !apiUrl.startsWith("https://")) {
+            apiUrl = "https://" + apiUrl;
+          }
+        }
+      } else {
+        apiUrl = apiUrlSelect.value;
+      }
+
+      let apiKeys = apiKeyInput.value.split(/[,\s，\n]+/).filter(key => key.startsWith("sk-"));
+
+      if (apiKeys.length === 0) {
+        alert("未匹配到 API-KEY，请检查输入内容");
+        return;
+      }
+
+      alert("成功匹配到 API Key，确认后开始查询：" + apiKeys);
+
+      let tableBody = document.querySelector("#result-table tbody");
+      for (let i = 0; i < apiKeys.length; i++) {
+        let apiKey = apiKeys[i].trim();
+
+        if (queriedApiKeys.includes(apiKey)) {
+          console.log(`API KEY ${apiKey} 已查询过，跳过此次查询`);
+          continue;
+        }
+        queriedApiKeys.push(apiKey);
+
+        checkBilling(apiKey, apiUrl).then((data) => {
+          let row = document.createElement("tr");
+
+          let apiKeyCell = document.createElement("td");
+          apiKeyCell.textContent = apiKey.replace(/^(sk-[a-zA-Z0-9]{4})[a-zA-Z0-9]*(.{6})$/, "$1***$2");
+          row.appendChild(apiKeyCell);
+
+          if (data[0] === "Error") {
+            let errorMessageCell = document.createElement("td");
+            errorMessageCell.colSpan = "5";
+            errorMessageCell.classList.add("status-error");
+            errorMessageCell.textContent = "不正确或已失效的API-KEY";
+            row.appendChild(errorMessageCell);
+          } else {
+            let totalGrantedCell = document.createElement("td");
+            totalGrantedCell.textContent = data[0].toFixed(2);
+            row.appendChild(totalGrantedCell);
+
+            let totalUsedCell = document.createElement("td");
+            totalUsedCell.textContent = data[1].toFixed(2);
+            row.appendChild(totalUsedCell);
+
+            let totalAvailableCell = document.createElement("td");
+            totalAvailableCell.textContent = typeof data[2] === 'number' ? data[2].toFixed(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);
+
+
+            let expireTime = document.createElement("td");
+            expireTime.textContent = data[3];
+            row.appendChild(expireTime);
+
+            let GPT4CheckResult = document.createElement("td");
+            GPT4CheckResult.textContent = data[4];
+            row.appendChild(GPT4CheckResult);
+
+            let isSubscribe = document.createElement("td");
+            isSubscribe.textContent = data[5];
+            row.appendChild(isSubscribe);
+          }
+
+          tableBody.appendChild(row);
+
+          if (i === apiKeys.length - 1) {
+            queriedApiKeys = [];
+          }
+          h2.style.display = 'block';
+          table.style.display = 'table';
+
+        }).catch((error) => {
+          console.error(error);
+          let row = document.createElement("tr");
+          let apiKeyCell = document.createElement("td");
+          apiKeyCell.textContent = apiKey;
+          row.appendChild(apiKeyCell);
+
+          let errorMessageCell = document.createElement("td");
+          errorMessageCell.colSpan = "6";
+          errorMessageCell.style.width = "90px";
+          errorMessageCell.classList.add("status-error");
+          errorMessageCell.textContent = "账户疑似被封禁，请登录 OpenAI 官网确认";
+          row.appendChild(errorMessageCell);
+
+          tableBody.appendChild(row);
+
+          if (i === apiKeys.length - 1) {
+            queriedApiKeys = [];
+          }
+        });
+      }
+    }
+
+    let apiUrlSelect = document.getElementById("api-url-select");
+    let customUrlInput = document.getElementById("custom-url-input");
+
+    apiUrlSelect.addEventListener("change", function () {
+      if (apiUrlSelect.value === "custom") {
+        customUrlInput.style.display = "inline-block";
+        customUrlInput.style.marginTop = "5px";
+      } else {
+        customUrlInput.style.display = "none";
+      }
+    });
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file