|
29 | 29 | ## Preview |
30 | 30 |
|
31 | 31 | <p align="center"> |
32 | | - <img src="docs/screenshot/en/usage-tab-overview.png" alt="Usage tab — dual pools and cycle summary" width="440" /> |
| 32 | + <img src="docs/screenshot/en/usage-tab-overview.png" alt="Usage tab — dual pools and cycle summary" width="720" /> |
33 | 33 | </p> |
34 | | -<p align="center"><sub><b>Usage</b> — today stats, API / Auto + Composer pools, and billing cycle overview</sub></p> |
35 | | - |
36 | | ---- |
37 | | - |
38 | | -### Quota decline & daily charts |
39 | | - |
40 | | -<p align="center"> |
41 | | - <img src="docs/screenshot/zh/quota-decline-and-daily-charts.png" alt="Quota decline curve and daily usage percent chart" width="440" /> |
42 | | -</p> |
43 | | -<p align="center"><sub>Total / API / Auto quota curves · daily usage as % of billing</sub></p> |
44 | | - |
45 | | ---- |
46 | | - |
47 | | -### Daily spend & model breakdown |
48 | | - |
49 | | -<p align="center"> |
50 | | - <img src="docs/screenshot/zh/daily-spend-and-model-chart.png" alt="Daily spend bar chart and model spend pie chart" width="440" /> |
51 | | -</p> |
52 | | -<p align="center"><sub>Daily spend with USD bar labels · spend distribution by model</sub></p> |
53 | | - |
54 | | ---- |
55 | | - |
56 | | -### Usage events & pricing rules |
57 | | - |
58 | | -<p align="center"> |
59 | | - <img src="docs/screenshot/en/model-distribution-and-events.png" alt="Model filter and usage event pricing detail" width="440" /> |
60 | | -</p> |
61 | | -<p align="center"><sub>Paginated events · model filter · official pricing rules & cost estimates</sub></p> |
62 | | - |
63 | | -<p align="center"> |
64 | | - <img src="docs/screenshot/zh/usage-events-pricing-detail.png" alt="Expanded usage event with token breakdown" width="440" /> |
65 | | -</p> |
66 | | -<p align="center"><sub>Expanded event — token breakdown and rule-based price calculation</sub></p> |
67 | | - |
68 | | ---- |
69 | | - |
70 | | -### Billing & token usage |
71 | | - |
72 | | -<p align="center"> |
73 | | - <img src="docs/screenshot/en/billing-tab-overview.png" alt="Billing tab with dual pools and allowance breakdown" width="440" /> |
74 | | -</p> |
75 | | -<p align="center"><sub><b>Billing</b> — cycle usage, dual-pool status, allowance notes</sub></p> |
76 | | - |
77 | | -<p align="center"> |
78 | | - <img src="docs/screenshot/zh/model-token-usage-and-account.png" alt="Per-model token usage and account info" width="440" /> |
79 | | -</p> |
80 | | -<p align="center"><sub>Per-model token totals · account & plan details</sub></p> |
81 | | - |
82 | | ---- |
| 34 | +<p align="center"><sub><b>Usage</b> — today stats, API / Auto + Composer pools, billing cycle overview</sub></p> |
| 35 | + |
| 36 | +### Charts & analytics |
| 37 | + |
| 38 | +<table> |
| 39 | + <tr> |
| 40 | + <td width="50%" valign="top" align="center"> |
| 41 | + <img src="docs/screenshot/zh/quota-decline-and-daily-charts.png" alt="Quota decline curve and daily usage percent chart" width="98%" /> |
| 42 | + <br><sub>Quota decline — Total / API / Auto</sub> |
| 43 | + </td> |
| 44 | + <td width="50%" valign="top" align="center"> |
| 45 | + <img src="docs/screenshot/zh/daily-spend-and-model-chart.png" alt="Daily spend bar chart and model spend pie chart" width="98%" /> |
| 46 | + <br><sub>Daily spend (USD) · model breakdown</sub> |
| 47 | + </td> |
| 48 | + </tr> |
| 49 | +</table> |
| 50 | + |
| 51 | +### Events & pricing |
| 52 | + |
| 53 | +<table> |
| 54 | + <tr> |
| 55 | + <td width="50%" valign="top" align="center"> |
| 56 | + <img src="docs/screenshot/en/model-distribution-and-events.png" alt="Model filter and usage event list" width="98%" /> |
| 57 | + <br><sub>Paginated events · model filter</sub> |
| 58 | + </td> |
| 59 | + <td width="50%" valign="top" align="center"> |
| 60 | + <img src="docs/screenshot/zh/usage-events-pricing-detail.png" alt="Expanded usage event with token breakdown" width="98%" /> |
| 61 | + <br><sub>Token breakdown · pricing rules & estimates</sub> |
| 62 | + </td> |
| 63 | + </tr> |
| 64 | +</table> |
| 65 | + |
| 66 | +### Billing & account |
| 67 | + |
| 68 | +<table> |
| 69 | + <tr> |
| 70 | + <td width="50%" valign="top" align="center"> |
| 71 | + <img src="docs/screenshot/en/billing-tab-overview.png" alt="Billing tab with dual pools and allowance breakdown" width="98%" /> |
| 72 | + <br><sub><b>Billing</b> — cycle usage, dual-pool status</sub> |
| 73 | + </td> |
| 74 | + <td width="50%" valign="top" align="center"> |
| 75 | + <img src="docs/screenshot/zh/model-token-usage-and-account.png" alt="Per-model token usage and account info" width="98%" /> |
| 76 | + <br><sub>Per-model tokens · account & plan</sub> |
| 77 | + </td> |
| 78 | + </tr> |
| 79 | +</table> |
83 | 80 |
|
84 | 81 | ### Settings |
85 | 82 |
|
86 | 83 | <p align="center"> |
87 | | - <img src="docs/screenshot/en/settings.png" alt="Settings — session token and language picker" width="440" /> |
| 84 | + <img src="docs/screenshot/en/settings.png" alt="Settings — session token and language picker" width="420" /> |
88 | 85 | </p> |
89 | | -<p align="center"><sub>Session token · auto-refresh pacing · <b>Language: System / English / 中文</b></sub></p> |
| 86 | +<p align="center"><sub>Session token · auto-refresh · <b>Language: System / English / 中文</b></sub></p> |
90 | 87 |
|
91 | | -> All screenshots: [`docs/screenshot/en/`](docs/screenshot/en/) · [`docs/screenshot/zh/`](docs/screenshot/zh/) |
| 88 | +<p align="center"><sub>More screenshots → <a href="docs/screenshot/en/">docs/screenshot/en</a> · <a href="docs/screenshot/zh/">docs/screenshot/zh</a></sub></p> |
92 | 89 |
|
93 | 90 | --- |
94 | 91 |
|
|
0 commit comments