codex-token-calendar/index.html at main · Entropy-R/codex-token-calendar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <link rel="icon" href="data:,">
  <title>Codex Token 日历</title>
  <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  <main class="shell">
    <header class="page-header">
      <div>
        <p class="eyebrow">LOCAL CODEX USAGE</p>
        <h1>Codex Token 日历</h1>
        <p id="data-status" class="muted">正在读取本地统计数据…</p>
      </div>
      <div class="header-accent" aria-hidden="true"></div>
    </header>

    <section class="toolbar" aria-label="日历控制">
      <label>
        <span>统计指标 <abbr title="切换日历、摘要和趋势图展示的数据口径">?</abbr></span>
        <select id="metric-select">
          <option value="total">总 Token</option>
          <option value="input">输入 Token</option>
          <option value="cachedInput">缓存输入 Token</option>
          <option value="uncachedInput">非缓存输入 Token</option>
          <option value="output">输出 Token</option>
          <option value="reasoningOutput">推理输出 Token</option>
          <option value="cacheHitRate">缓存命中率</option>
        </select>
      </label>
      <label>
        <span>着色方式 <abbr title="相对分档便于发现个人高峰；固定分档便于跨月份比较">?</abbr></span>
        <select id="scale-select">
          <option value="relative">年度相对分档</option>
          <option value="fixed">固定分档</option>
        </select>
      </label>
      <div class="month-controls">
        <button id="previous-month" type="button" aria-label="上一个月">‹</button>
        <input id="month-picker" type="month" aria-label="选择月份">
        <button id="current-month" type="button">本月</button>
        <button id="next-month" type="button" aria-label="下一个月">›</button>
      </div>
    </section>

    <section class="summary-grid" aria-label="月度摘要">
      <article class="summary-card">
        <span>本月总量</span>
        <strong id="month-total">—</strong>
        <small id="month-total-label">总 Token</small>
      </article>
      <article class="summary-card">
        <span>活跃天数</span>
        <strong id="active-days">—</strong>
        <small id="response-count">—</small>
      </article>
      <article class="summary-card">
        <span>峰值日期</span>
        <strong id="peak-date">—</strong>
        <small id="peak-value">—</small>
      </article>
      <article class="summary-card">
        <span>较上月 <abbr title="按当前所选指标比较本月与上月总量">?</abbr></span>
        <strong id="month-change">—</strong>
        <small id="previous-month-total">—</small>
      </article>
      <article class="summary-card">
        <span>缓存命中率 <abbr title="缓存输入 Token ÷ 输入 Token；不代表回答质量或订阅额度节省比例">?</abbr></span>
        <strong id="cache-hit-rate">—</strong>
        <small id="uncached-total">—</small>
      </article>
      <article class="summary-card">
        <span>使用强度</span>
        <strong id="daily-average">—</strong>
        <small id="response-average">—</small>
      </article>
    </section>

    <section class="trend-section" aria-labelledby="trend-title">
      <div class="section-heading">
        <div>
          <p class="section-kicker">月度趋势</p>
          <h2 id="trend-title">—</h2>
        </div>
        <span id="trend-summary" class="muted"></span>
      </div>
      <div id="trend-chart" class="trend-chart" role="img" aria-label="当前月份每日 Token 趋势"></div>
    </section>

    <div class="content-layout">
      <section class="calendar-section" aria-labelledby="calendar-title">
        <div class="calendar-heading">
          <h2 id="calendar-title">—</h2>
          <div>
            <div id="legend" class="legend" aria-label="用量颜色图例"></div>
            <p id="legend-note" class="legend-note"></p>
          </div>
        </div>
        <div class="weekdays" aria-hidden="true">
          <span data-short="一">周一</span><span data-short="二">周二</span>
          <span data-short="三">周三</span><span data-short="四">周四</span>
          <span data-short="五">周五</span><span data-short="六">周六</span>
          <span data-short="日">周日</span>
        </div>
        <div id="calendar-grid" class="calendar-grid" role="grid" aria-label="Token 月历"></div>
      </section>

      <section id="day-detail" class="day-detail" aria-live="polite">
        选择一个日期查看 Token 明细。
      </section>
    </div>

    <details class="pricing-reference">
      <summary>官方 API 计费参考</summary>
      <div class="pricing-content">
        <p>
          API 标准文本费用按模型分别计算输入、缓存输入和输出 Token；此处只展示官方单价，
          不计算历史费用，也不代表 ChatGPT/Codex 订阅额度。
        </p>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>模型</th><th>输入</th><th>缓存输入</th><th>输出</th><th>来源</th>
              </tr>
            </thead>
            <tbody id="pricing-table"></tbody>
          </table>
        </div>
        <p class="formula">
          API 基础公式：非缓存输入 × 输入单价 + 缓存输入 × 缓存输入单价 + 输出 × 输出单价。
        </p>
        <p id="pricing-notes" class="muted"></p>
      </div>
    </details>
  </main>

  <script src="config/pricing.js"></script>
  <script src="data/usage-data.js"></script>
  <script src="assets/app.js"></script>
</body>
</html>