├── cookies.js
├── modal.js
├── main.js
├── README.md
├── index.html
└── style.css


/cookies.js:
--------------------------------------------------------------------------------
 1 | const cookieNotification = document.querySelector('.cookie-notification');
 2 | const cookieAccept = document.querySelector('#cookie-accept');
 3 | 
 4 | if (!localStorage.getItem('cookieAccepted')) {
 5 |   cookieNotification.style.display = 'block';
 6 | }
 7 | 
 8 | cookieAccept.addEventListener('click', () => {
 9 |   localStorage.setItem('cookieAccepted', true);
10 |   cookieNotification.style.display = 'none';
11 | });


--------------------------------------------------------------------------------
/modal.js:
--------------------------------------------------------------------------------
 1 | const modalLinks = document.querySelectorAll('.modal-link');
 2 | const modalCloseButtons = document.querySelectorAll('.modal-close');
 3 | const modals = document.querySelectorAll('.modal');
 4 | 
 5 | modalLinks.forEach((link) => {
 6 |   link.addEventListener('click', (event) => {
 7 |     event.preventDefault();
 8 |     const target = link.getAttribute('href');
 9 |     const modal = document.querySelector(target);
10 |     modal.style.display = 'flex';
11 |   });
12 | });
13 | 
14 | modalCloseButtons.forEach((button) => {
15 |   button.addEventListener('click', (event) => {
16 |     event.preventDefault();
17 |     const modal = button.closest('.modal');
18 |     modal.style.display = 'none';
19 |   });
20 | });
21 | 
22 | modals.forEach((modal) => {
23 |   modal.addEventListener('click', (event) => {
24 |     if (event.target === modal) {
25 |       modal.style.display = 'none';
26 |     }
27 |   });
28 | });
29 | 
30 | document.addEventListener('keyup', (event) => {
31 |   if (event.key === 'Escape') {
32 |     modals.forEach((modal) => {
33 |       modal.style.display = 'none';
34 |     });
35 |   }
36 | });


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | const modelSelect = document.getElementById('model');
 2 | const resultText = document.getElementById('result');
 3 | 
 4 | const wordCountButtons = document.querySelectorAll('.word-count-btn');
 5 | wordCountButtons.forEach(button => {
 6 |   button.addEventListener('click', () => {
 7 |     const words = button.getAttribute('data-words');
 8 |     document.getElementById('word-count').value = words;
 9 |     calculateTotal(words);
10 |   });
11 | });
12 | 
13 | modelSelect.addEventListener('change', () => {
14 |   calculateTotal();
15 | });
16 | 
17 | document.getElementById('word-count').addEventListener('input', () => {
18 |   calculateTotal();
19 | });
20 | 
21 | function calculateTotal(words) {
22 |   const wordCount = words || document.getElementById('word-count').value;
23 |   const model = modelSelect.value;
24 |   let price = 0;
25 | 
26 |   switch (model) {
27 |     case 'chatgpt-4k':
28 |       price = 0.002;
29 |       break;
30 |     case 'chatgpt-16k':
31 |       price = 0.004;
32 |       break;
33 |     case 'gpt4-8k':
34 |       price = 0.06;
35 |       break;
36 |     case 'gpt4-32k':
37 |       price = 0.12;
38 |       break;
39 |     default:
40 |       break;
41 |   }
42 | 
43 |   const total = (wordCount / 500) * price;
44 |   resultText.textContent = '$' + total.toFixed(2);
45 | }
46 | 
47 | calculateTotal();


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | <img src="https://faucet.openkey.cloud/_next/image?url=%2Flogo.png&w=256&q=75" alt="LOGO"/>
 3 | 
 4 | <h1 align="center">OpenAI ChatGPT API 成本计算器（中文版）</h1>
 5 | 
 6 | 这是一款专门为团队和开发者设计的工具，可以帮助用户准确预算和规划他们在项目中使用ChatGPT API的成本。
 7 | 
 8 | [演示 Demo](https://ccc.openkey.cloud/) / [团队介绍](https://openkey.cloud/)
 9 | 
10 | </div>
11 | 
12 | ## 界面预览
13 | 
14 | <img src="https://gptocean.com/assets/files/2023-10-06/1696583293-195286-2023-10-06-170659-fotor-2023100617741.png" alt="LOGO"/>
15 | 
16 | ## 主要特点和功能
17 | 
18 | 基于中文汉字的的 API 价格/成本计算器，对中文开发者更加友好；
19 | 
20 | 可以帮助用户估算项目成本，规划API使用；
21 | 
22 | 精确性高，简单易懂。
23 | 
24 | ## 计算细节
25 | 
26 | 模型对应的价格：
27 | 
28 | >GPT-3.5-Turbo 4K - $0.002 / 1K tokens
29 | >
30 | >GPT-3.5-Turbo 16K - $0.004 / 1K tokens
31 | >
32 | >GPT-4.0 8K - $0.06 / 1K tokens
33 | >
34 | >GPT-4.0 32K - $0.12 / 1K tokens
35 | 
36 | 计算公式：
37 | 
38 | >成本 = (中文字数 * 2 / 1000) * 模型价格
39 | 
40 | ## 部署方式
41 | 
42 | 纯静态部署
43 | 
44 | ## 开源赞助
45 | 
46 | <a href="https://hematown.com/" target="_blank">
47 |   <img src="https://terobox.oss-cn-hongkong.aliyuncs.com/openkey/poster-hema.png" alt="河马小镇"/>
48 | </a>
49 | 
50 | ## 相关项目
51 | 
52 | * [ChatGPT-API-Faucet](https://github.com/terobox/ChatGPT-API-Faucet): AI 圈的水龙头网站，每24小时可领取一个令牌用于开发测试 AI 产品
53 | 
54 | ## 开源协议
55 | 
56 | [MIT](https://opensource.org/license/mit/)


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>OpenAI ChatGPT API 成本计算器（中文版）</title>
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="icon" href="https://openkey.cloud/logo.png"/>
 11 |     <!-- Good information about this page -->
 12 |     <meta name="description" content="OpenAI ChatGPT API 成本计算器（中文版）是一款专门为团队和开发者设计的工具，可以帮助用户准确预算和规划他们在项目中使用ChatGPT API的成本。">
 13 |     <meta name="keywords" content="ChatGPT, OpenAI, API, 人工智能, 成本计算, 开发者工具, 免费开源, OpenKey, Github, 方便易用, 估算项目成本, 精确性高, 节省成本">
 14 |     <meta name="author" content="openkey.cloud">
 15 |     <!-- Matomo -->
 16 |     <script>
 17 |         var _paq = window._paq = window._paq || [];
 18 |         /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
 19 |         _paq.push(['trackPageView']);
 20 |         _paq.push(['enableLinkTracking']);
 21 |         (function() {
 22 |         var u="//matomo.gptocean.com/";
 23 |         _paq.push(['setTrackerUrl', u+'matomo.php']);
 24 |         _paq.push(['setSiteId', '18']);
 25 |         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
 26 |         g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
 27 |         })();
 28 |     </script>
 29 |     <!-- End Matomo Code -->
 30 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 31 | <link href="https://fonts.googleapis.com/css2?family=Aladin&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
 32 | <!-- Google tag (gtag.js) -->
 33 | <script async src="https://www.googletagmanager.com/gtag/js?id=G-BWXSYQYTZ1"></script>
 34 | <script>
 35 |   window.dataLayer = window.dataLayer || [];
 36 |   function gtag(){dataLayer.push(arguments);}
 37 |   gtag('js', new Date());
 38 | 
 39 |   gtag('config', 'G-BWXSYQYTZ1');
 40 | </script>
 41 | <script type="text/javascript">
 42 |     (function(c,l,a,r,i,t,y){
 43 |         c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
 44 |         t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
 45 |         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
 46 |     })(window, document, "clarity", "script", "h5dtj175aw");
 47 | </script>
 48 | </head>
 49 | <body>
 50 |     <div class="container">
 51 |         <h1 class="title">OpenAI ChatGPT API 成本计算器（中文版）</h1>
 52 | 		<a href="https://github.com/terobox/ChatGPT-Cost-Calculator" target="_blank" rel="noopener noreferrer" style="display: block; margin: 0 auto; text-decoration: none; color: #a61b29; text-align: center;">GitHub链接</a>
 53 |         <br>
 54 | 		<h2 class="description">
 55 |             这是一款专门为团队和开发者设计的工具，可以帮助用户准确预算和规划他们在项目中使用ChatGPT API的成本。
 56 |         </h2>
 57 |         <div class="input-group">
 58 |             <label for="word-count">输入汉字数量:</label>
 59 |             <input type="number" id="word-count" oninput="calcularResultado()" placeholder="e.g. 1000">
 60 |         </div>
 61 |           <div class="word-count-buttons">
 62 |             <button class="word-count-btn pink" data-words="10000">1万</button>
 63 |             <button class="word-count-btn green" data-words="200000">20万</button>
 64 |             <button class="word-count-btn orange" data-words="1000000">100万</button>
 65 |             <button class="word-count-btn blue" data-words="5000000">500万</button>
 66 |             <button class="word-count-btn violet" data-words="10000000">1000万</button>
 67 |         </div>
 68 |         <div class="input-group selstyle">
 69 |           <div class="selstyle">
 70 |             <label>选择语言模型:</label>
 71 |             <select id="model">
 72 |                 <option value="chatgpt-4k">GPT-3.5-Turbo 4K</option>
 73 | 				<option value="chatgpt-16k">GPT-3.5-Turbo 16K</option>
 74 |                 <option value="gpt4-8k">GPT-4.0 8K</option>
 75 |                 <option value="gpt4-32k">GPT-4 32K</option>
 76 |             </select>
 77 |           </div>
 78 |         </div>
 79 |         <div class="input-group">
 80 |             <button id="calculate-btn">开始计算</button>
 81 |         </div>
 82 |         <div class="result-container">
 83 |             <h2>评估成本:</h2>
 84 |             <p id="result">$0.00</p>
 85 |         </div>
 86 |     </div>
 87 |     <div class="poweredby"><a href='#about-modal' class="modal-link"><button>关于我们</button></a></div>
 88 |     <div class="cookie-notification">
 89 |         <p>我们使用cookies来提高您在我们网站上的浏览体验。继续使用我们的网站，即表示您同意我们使用cookies。</p>
 90 |         <button id="cookie-accept">接受</button>
 91 |       </div>
 92 |       
 93 |         <div id="about-modal" class="modal">
 94 |           <div class="modal-content">
 95 |             <br><br>
 96 |             <h2>关于我们</h2>
 97 |             <br>
 98 |             <p>OpenAI ChatGPT API 成本计算器（中文版）是一款专门为团队和开发者设计的工具，可以帮助用户准确预算和规划他们在项目中使用ChatGPT API的成本。
 99 | 				<br><br>
100 |                 <h3>主要特点和功能：</h3>
101 | 				<br>
102 |                 1) 基于中文汉字的 API 价格/成本计算器，对中文开发者更加友好；
103 | 				<br>
104 |                 2) 可以帮助用户估算项目成本，规划API使用；
105 | 				<br>
106 | 				3) 精确性高，简单易懂。
107 | 				<br><br>
108 |                 <h3>计算细节：</h3>
109 | 				<br>
110 | 				1) 模型对应的价格：
111 | 				<br><br>
112 | 				GPT-3.5-Turbo 4K - $0.002 / 1K tokens
113 | 				<br>
114 | 				GPT-3.5-Turbo 16K - $0.004 / 1K tokens
115 | 				<br>
116 | 				GPT-4.0 8K - $0.06 / 1K tokens
117 | 				<br>
118 | 				GPT-4.0 32K - $0.12 / 1K tokens
119 | 				<br><br>
120 | 				
121 | 				2) 计算公式：
122 | 				<br><br>
123 | 				成本 = (中文字数 * 2 / 1000) * 模型价格
124 | 				<br><br>
125 | 				<h3>团队介绍：</h3>
126 | 				<br>
127 | 				<a href="https://openkey.cloud/" target="_blank" style="color: #B13A3D;">OpenKey.Cloud</a> - 提供企业级专业稳定的 ChatGPT 接口集成分发服务。
128 |                 <button class="modal-close">关闭</button>
129 |           </div>
130 |         </div>
131 | 		
132 |     <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="cookies.js"></script>
133 |     <script src="modal.js"></script>
134 |     <script src="main.js"></script>
135 | </body>
136 | </html>
137 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   font-family: 'Open Sans', sans-serif;
  9 |   font-size: 16px;
 10 |   line-height: 1.5;
 11 |   color: #333;
 12 |   background-color: #f2f2f2;
 13 | }
 14 | 
 15 | a{
 16 |   text-decoration: none;
 17 |   color: #36CF8F;
 18 | }
 19 | 
 20 | .container {
 21 |   max-width: 500px;
 22 |   margin: 50px auto 25px auto;
 23 |   padding: 20px;
 24 |   border-radius: 22px;
 25 |   background-color: #fff;
 26 |   border:1px solid #333;
 27 |   /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
 28 | }
 29 | 
 30 | .title {
 31 |   font-size: 26px;
 32 |   font-weight: 700;
 33 |   margin-bottom: 10px;
 34 |   font-family: 'Space Mono', monospace;
 35 | }
 36 | 
 37 | .description{
 38 |   font-size: 16px;
 39 |   font-weight: 500;
 40 | }
 41 | 
 42 | .input-group {
 43 |   margin-bottom: 20px;
 44 | }
 45 | 
 46 | label {
 47 |   display: block;
 48 |   margin-bottom: 5px;
 49 |   font-size: 18px;
 50 |   font-weight: 600;
 51 | }
 52 | 
 53 | input[type="number"],
 54 | select {
 55 |   width: 100%;
 56 |   padding: 10px;
 57 |   font-size: 16px;
 58 |   border: 1px solid #ccc;
 59 |   border-radius: 5px;
 60 |   background-color: #fff;
 61 |   -moz-appearance: none; 
 62 |     -webkit-appearance: none; 
 63 |     appearance: none;
 64 | }
 65 | select {
 66 |   border: 1px solid #ccc;
 67 |   background: #fff;
 68 |   line-height: 1.2;
 69 |   height: 40px;
 70 |   border-radius: 5px;
 71 |   padding: 0 18px 0 8px;
 72 |   background: #fff url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 98% 50%;
 73 |     background-size: auto;
 74 |   background-size: 16px 100%;
 75 |   -moz-appearance: none;
 76 |   -webkit-appearance: none;
 77 |   appearance: none;
 78 |   box-shadow: none;
 79 |   outline: 0;
 80 |   cursor: pointer;
 81 | }
 82 | 
 83 | .input-group .selstyle {
 84 |   background: #f8f8f8;
 85 |   padding: 10px 15px 15px 15px;
 86 |   border-radius: 5px;
 87 |   border: 1px solid #ccc;
 88 | }
 89 | 
 90 | button {
 91 |   padding: 10px 20px;
 92 |   font-size: 16px;
 93 |   font-weight: 600;
 94 |   border: none;
 95 |   border-radius: 5px;
 96 |   cursor: pointer;
 97 |   transition: background-color 0.3s ease;
 98 | }
 99 | 
100 | #calculate-btn{
101 |   background: #2a2a2d!important;
102 |   color: #fff;
103 |   width: 100%;
104 |   padding: 17px;
105 |   font-weight: 400;
106 |   border-radius: 8px;
107 | }
108 | #calculate-btn:hover{
109 |   background: #151515 !important;
110 | }
111 | 
112 | .pink, .green, .blue, .orange, .yellow, .violet{margin-bottom:20px;opacity:.9;border:1px solid #555;color: #000;border-radius: 5px;}
113 | .pink:hover, .green:hover, .blue:hover, .orange:hover, .yellow:hover, .violet:hover{opacity: inherit;}
114 | .pink{background-color: #FEDDDC;margin-right:4px;}
115 | .green{background-color: #DBFFE5;margin-right:5px;}
116 | .blue{background-color: #DBF4FD;margin-right:4px;}
117 | .orange{background-color: #ffe8d4;margin-right:4px;}
118 | .yellow{background-color: #FFF9C2;margin-right:4px;}
119 | .violet{background-color: #EFDBFE;}
120 | 
121 | .result-container {
122 |   margin-top: 20px;
123 |   text-align: center;
124 | }
125 | 
126 | h2 {
127 |   font-size: 24px;
128 |   font-weight: 700;
129 |   margin-bottom: 10px;
130 | }
131 | 
132 | p#result {
133 |   font-size: 36px;
134 |   font-weight: 700;
135 |   color: #36CF90;
136 | }
137 | 
138 | .poweredby{
139 |   width: 100%;
140 | }
141 | .poweredby button{
142 |   background-color: #e6e6e6;
143 |   font-size: 12px;
144 |   font-weight: 400;
145 |   color: #999;
146 |   border-radius: 32px;
147 |   text-align: center;
148 |   margin: 0 auto; 
149 |   left: 0;
150 |   right: 0;
151 |   display: block;
152 | }
153 | 
154 | 
155 | .cookie-notification {
156 |   background-color: #fff;
157 |   color: #333;
158 |   padding: 20px;
159 |   position: fixed;
160 |   bottom: 10px;
161 |   left: 10px;
162 |   max-width: 380px;
163 |   border: 1px solid #000;
164 |   border-radius: 14px;
165 |   display: none;
166 | }
167 | 
168 | 
169 | .cookie-notification p {
170 |   margin: 0;
171 |   margin-bottom: 10px;
172 |   font-size: 15px;
173 | }
174 | 
175 | .cookie-notification button {
176 |   background-color: #efdbfe !important;
177 |   color: #000;
178 |   border: 1px solid #000;
179 |   width: 100%;
180 |   font-weight: 400;
181 |   border-radius: 8px;
182 |   padding: 10px 10px;
183 |   cursor: pointer;
184 |   float: right;
185 | }
186 | 
187 | 
188 | 
189 | /* Estilo de los enlaces */
190 | nav{
191 |   display: flex;
192 |   justify-content: center;
193 |   margin: 15px 0 25px 0;
194 | }
195 | nav ul {
196 |   list-style: none;
197 |   display: flex;
198 | }
199 | 
200 | nav li {
201 |   margin-right: 20px;
202 | }
203 | 
204 | nav a {
205 |   color: #333;
206 |   text-decoration: none;
207 |   font-size: 14px;
208 | }
209 | 
210 | /* Estilo del modal */
211 | .modal {
212 |   position: fixed;
213 |   left: 0;
214 |   bottom: 0;
215 |   width: 100%;
216 |   height: 100%;
217 |   background-color: rgba(0, 0, 0, 0.375);
218 |   display: none;
219 |   justify-content: center;
220 | }
221 | 
222 | .modal-content {
223 |   background-color: #fff;
224 |   border: 1.5px solid #000;
225 |   border-bottom: none;
226 |   max-width: 800px;
227 |   width: 100%;
228 |   max-height: 100%;
229 |   overflow-y: auto;
230 |   padding: 50px 50px;
231 |   margin-top: 5%;
232 |   border-radius: 14px;
233 |   border-bottom-left-radius: 0px;
234 |   border-bottom-right-radius: 0px;
235 |   position: relative;
236 | }
237 | 
238 | .modal h2 {
239 |   margin-top: 0;
240 | }
241 | 
242 | .modal p {
243 |   line-height: 32px;
244 | }
245 | 
246 | .modal-close {
247 |   position: absolute;
248 |   top: 10px;
249 |   right: 10px;
250 |   background-color: #fff;
251 |   color: #333;
252 |   border: none;
253 |   padding: 10px 20px;
254 |   border-radius: 3px;
255 |   cursor: pointer;
256 | }
257 | 
258 | 
259 | 
260 | 
261 | 
262 | 
263 | 
264 | 
265 | 
266 | @media screen and (max-width: 600px) {
267 |     .container {margin: 15px 15px 30px 15px;}
268 |     .cookie-notification {
269 |         display: flex;
270 |         justify-content: center;
271 |         align-items: center;
272 |         margin:0 auto;
273 |         left: 0;
274 |         right:0;
275 |         width: 100%;
276 |         z-index: 999;
277 |     }
278 |     .pink, .green, .blue, .orange, .yellow, .violet{padding:6px 10px;}
279 |     .pink, .green, .blue, .orange, .yellow{margin-right:3px;}
280 |     .modal-content {
281 |       border: 1px solid #000;
282 |       max-height: 100%;
283 |       overflow-y: auto;
284 |       padding: 30px 20px;
285 |       margin-top: 25%;
286 |     }
287 | }
288 | 
289 | 
290 | 
291 | 
292 | 


--------------------------------------------------------------------------------