Главная Обзор Помощь
Вход
Evan
/
DoTouchAI
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: a505a45e24
Ветки Метки
DoTouchAI
/
docs
/
design
/
web-v1.1.0
/
model-detail.html

model-detail.html 23 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="vi">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>Model — DoTouch.AI</title>
    7. 

  7. <link rel="stylesheet" href="style.css">
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. 

  11. <div class="dev-note" id="demoLoginBanner" style="bottom:56px;"></div>
    12. 

  12. <div class="dev-note">v1.2.0 · 模型详情页（数据驱动：glm-5.2 / deepseek-v4 / deepseek-v4-pro / qwen-max · 支持 ?m= 参数与语言联动）</div>
    13. 

  13. 

  14. <header>
    15. 

  15.   <div class="wrap nav">
    16. 

  16.     <a class="nav-logo" href="index.html">
    17. 

  17.       <svg viewBox="0 0 460 120" xmlns="http://www.w3.org/2000/svg">
    18. 

  18.         <defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9B7BFF"/><stop offset="1" stop-color="#5C3DF0"/></linearGradient></defs>
    19. 

  19.         <g transform="translate(0,6) scale(0.92)"><circle cx="50" cy="50" r="33" stroke="rgba(124,92,255,.3)" stroke-width="1.5" stroke-dasharray="2 7" fill="none"/><g stroke="#00E5A0" stroke-width="1.8" opacity=".55"><line x1="50" y1="50" x2="76" y2="26"/><line x1="50" y1="50" x2="26" y2="76"/><line x1="50" y1="50" x2="78" y2="75"/></g><circle cx="50" cy="50" r="12" stroke="rgba(124,92,255,.4)" fill="none"/><circle cx="50" cy="50" r="7.5" fill="url(#g1)"/><circle cx="76" cy="26" r="4" fill="#00E5A0"/><circle cx="26" cy="76" r="4" fill="#00E5A0"/><circle cx="78" cy="75" r="4" fill="#00E5A0"/></g>
    20. 

  20.         <text x="128" y="78" font-size="50" font-weight="700" fill="#E8ECF8" font-family="inherit">DoTouch</text><text x="348" y="78" font-size="50" font-weight="700" fill="url(#g1)" font-family="inherit">.AI</text>
    21. 

  21.       </svg>
    22. 

  22.     </a>
    23. 

  23.     <nav class="nav-links">
    24. 

  24.       <a href="index.html" data-i18n="nav_home">Trang chủ</a>
    25. 

  25.       <a href="models.html" data-i18n="nav_models">Models</a>
    26. 

  26.       <a href="pricing.html" data-i18n="nav_pricing">Pricing</a>
    27. 

  27.       <a href="docs.html" data-i18n="nav_docs_ops">Hướng dẫn</a>
    28. 

  28.       <a href="../console-v1.0.0/user-console.html" data-i18n="nav_console">Console</a>
    29. 

  29.     </nav>
    30. 

  30.     <div class="nav-right">
    31. 

  31.       <div class="lang-switch">
    32. 

  32.         <button class="lang-btn active" data-lang="vi">VI</button><button class="lang-btn" data-lang="en">EN</button><button class="lang-btn" data-lang="zh-CN">简</button><button class="lang-btn" data-lang="zh-TW">繁</button>
    33. 

  33.       </div>
    34. 

  34.       <a class="btn btn-sm" href="#" data-open-auth="login" data-i18n="nav_login">Đăng nhập</a>
    35. 

  35.       <a class="btn btn-primary btn-sm" href="#" data-open-auth="register" data-i18n="nav_signup">Bắt đầu</a>
    36. 

  36.     </div>
    37. 

  37.   </div>
    38. 

  38. </header>
    39. 

  39. 

  40. <div class="wrap">
    41. 

  41.   <div class="crumbs"><a href="index.html" data-i18n="crumb_home">Trang chủ</a><span class="sep">/</span><a href="models.html" data-i18n="detail_bread">Mô hình</a><span class="sep">/</span><b id="crumbModel">GLM 5.2</b></div>
    42. 

  42. 

  43.   <!-- 头部 -->
    44. 

  44.   <div class="page-hero" style="display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;">
    45. 

  45.     <div>
    46. 

  46.       <h1 style="display:flex;align-items:center;gap:12px;"><span id="modelName">GLM 5.2</span> <span class="tag tag-purple" id="modelTag" data-i18n="tag_flagship">Cao cấp</span></h1>
    47. 

  47.       <p id="modelDesc">Mô hình đa phương thức hàng đầu, suy luận + lập trình + tác vụ agent.</p>
    48. 

  48.     </div>
    49. 

  49.     <a class="btn btn-primary" href="#" data-i18n="detail_use_btn">Bắt đầu với API này</a>
    50. 

  50.   </div>
    51. 

  51. 

  52.   <div class="grid3">
    53. 

  53.     <!-- 技术规格 -->
    54. 

  54.     <div class="card">
    55. 

  55.       <h3 style="font-size:15px;color:var(--purple-l);margin-bottom:14px;" data-i18n="detail_spec">Thông số kỹ thuật</h3>
    56. 

  56.       <table style="width:100%;font-size:13.5px;border-collapse:collapse;">
    57. 

  57.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_spec_vendor">Nhà cung cấp</td><td style="padding:7px 0;text-align:right;" id="specVendor">Zhipu AI</td></tr>
    58. 

  58.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_spec_ctx">Ngữ cảnh</td><td style="padding:7px 0;text-align:right;" class="price" id="specCtx">128K tokens</td></tr>
    59. 

  59.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_spec_out">Đầu ra tối đa</td><td style="padding:7px 0;text-align:right;" class="price" id="specOut">64K tokens</td></tr>
    60. 

  60.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_spec_base">BASE URL</td><td style="padding:7px 0;text-align:right;" class="price">api.dotouch.ai/v1</td></tr>
    61. 

  61.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_spec_rate">Giới hạn tốc độ</td><td style="padding:7px 0;text-align:right;" class="price" id="specRate">60 req/min</td></tr>
    62. 

  62.       </table>
    63. 

  63.     </div>
    64. 

  64. 

  65.     <!-- 能力矩阵 -->
    66. 

  66.     <div class="card">
    67. 

  67.       <h3 style="font-size:15px;color:var(--purple-l);margin-bottom:14px;" data-i18n="detail_cap">Khả năng</h3>
    68. 

  68.       <table style="width:100%;font-size:13.5px;border-collapse:collapse;">
    69. 

  69.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_cap_json">JSON Output</td><td style="padding:7px 0;text-align:right;" id="capJson"><span class="save-tag" data-i18n="spec_ok">Hỗ trợ</span></td></tr>
    70. 

  70.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_cap_tool">Tool Calls</td><td style="padding:7px 0;text-align:right;" id="capTool"><span class="save-tag" data-i18n="spec_ok">Hỗ trợ</span></td></tr>
    71. 

  71.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_cap_stream">Streaming (SSE)</td><td style="padding:7px 0;text-align:right;" id="capStream"><span class="save-tag" data-i18n="spec_ok">Hỗ trợ</span></td></tr>
    72. 

  72.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_cap_think">Chế độ suy luận</td><td style="padding:7px 0;text-align:right;" id="capThink"><span class="save-tag" data-i18n="spec_ok">Hỗ trợ</span></td></tr>
    73. 

  73.         <tr><td style="padding:7px 0;color:var(--muted);" data-i18n="detail_cap_json">Vision (Hình ảnh)</td><td style="padding:7px 0;text-align:right;" id="capVision"><span class="tag tag-gray" data-i18n="spec_no">Không hỗ trợ</span></td></tr>
    74. 

  74.       </table>
    75. 

  75.     </div>
    76. 

  76. 

  77.     <!-- 价格 -->
    78. 

  78.     <div class="card">
    79. 

  79.       <h3 style="font-size:15px;color:var(--purple-l);margin-bottom:14px;" data-i18n="detail_pricing">Giá</h3>
    80. 

  80.       <p style="font-size:12px;color:var(--muted);margin-bottom:10px;" data-i18n="detail_pricing_note">Giá mỗi 1 triệu tokens · đã gồm ưu đãi giá cực kỳ cạnh tranh</p>
    81. 

  81.       <div style="font-size:13.5px;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;"><span data-i18n="detail_price_in">Đầu vào</span><b class="price" style="color:var(--text);" id="priceIn"><span class="price-usd" data-usd="0.98">$0.98</span></b></div>
    82. 

  82.       <div style="font-size:13.5px;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;"><span data-i18n="detail_price_out">Đầu ra</span><b class="price" style="color:var(--text);" id="priceOut"><span class="price-usd" data-usd="3.08">$3.08</span></b></div>
    83. 

  83.       <div style="font-size:13.5px;color:var(--muted);padding:8px 0;display:flex;justify-content:space-between;"><span data-i18n="price_th_save">Tiết kiệm</span><span class="save-tag">-30% <span style="text-decoration:line-through;opacity:.6;" id="priceCut">$1.40 / $4.40</span></span></div>
    84. 

  84.       <div class="rate-box" style="margin-top:12px;font-size:12px;" data-i18n="rate_note">Tỷ giá tham khảo: 1 USD ≈ 25.400₫</div>
    85. 

  85.     </div>
    86. 

  86.   </div>
    87. 

  87. 

  88.   <!-- 代码示例 -->
    89. 

  89.   <section style="padding-top:36px;">
    90. 

  90.     <h2 class="sec-head" style="font-size:18px;font-weight:800;margin-bottom:14px;" data-i18n="detail_code">Ví dụ gọi API</h2>
    91. 

  91.     <div class="code-block" style="max-width:820px;">
    92. 

  92.       <div class="code-head"><span class="dots"><i></i><i></i><i></i></span><span>cURL</span></div>
    93. 

  93.       <pre><code><span class="c-c"># OpenAI-compatible — chỉ cần đổi base URL và key</span>
    94. 

  94. <span class="c-k">curl</span> https://api.dotouch.ai/v1/chat/completions \
    95. 

  95.   -H <span class="c-s">"Authorization: Bearer dt_your_key_here"</span> \
    96. 

  96.   -H <span class="c-s">"Content-Type: application/json"</span> \
    97. 

  97.   -d <span class="c-s">'{
    98. 

  98.     "model": "<span class="c-p" id="codeModel">glm-5.2</span>",
    99. 

  99.     "messages": [{"role": "user", "content": "Xin chào!"}],
    100. 

  100.     "stream": true
    101. 

  101.   }'</span></code></pre>
    102. 

  102.     </div>
    103. 

  103.     <div class="code-block" style="max-width:820px;margin-top:14px;">
    104. 

  104.       <div class="code-head"><span class="dots"><i></i><i></i><i></i></span><span>Python SDK</span></div>
    105. 

  105.       <pre><code><span class="c-k">from</span> openai <span class="c-k">import</span> OpenAI
    106. 

  106. 

  107. client = OpenAI(
    108. 

  108.     base_url=<span class="c-s">"https://api.dotouch.ai/v1"</span>,
    109. 

  109.     api_key=<span class="c-s">"dt_your_key_here"</span>,
    110. 

  110. )
    111. 

  111. resp = client.chat.completions.create(
    112. 

  112.     model=<span class="c-s">"<span class="c-p" id="codeModel2">glm-5.2</span>"</span>,
    113. 

  113.     messages=[{<span class="c-s">"role"</span>: <span class="c-s">"user"</span>, <span class="c-s">"content"</span>: <span class="c-s">"Xin chào!"</span>}],
    114. 

  114. )
    115. 

  115. <span class="c-k">print</span>(resp.choices[0].message.content)</code></pre>
    116. 

  116.     </div>
    117. 

  117.   </section>
    118. 

  118. 

  119.   <!-- 扣费规则 -->
    120. 

  120.   <section>
    121. 

  121.     <div class="notice" style="max-width:820px;">
    122. 

  122.       <b data-i18n="detail_billing">Quy tắc tính phí：</b> <span data-i18n="detail_billing_p">Phí = token tiêu thụ × đơn giá, trừ trực tiếp từ số dư nạp trước. Giá có thể thay đổi; xem trang này để cập nhật mới nhất.</span>
    123. 

  123.     </div>
    124. 

  124.   </section>
    125. 

  125. 

  126.   <!-- 相关模型 -->
    127. 

  127.   <section>
    128. 

  128.     <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;" data-i18n="detail_rel">Mô hình liên quan</h2>
    129. 

  129.     <div class="grid3" id="relatedBox">
    130. 

  130.       <a class="card hover-up" href="model-detail.html?m=deepseek-v4"><b data-i18n="m_dsv4_name">DeepSeek V4</b><span class="tag tag-green" style="margin-left:8px;" data-i18n="tag_best">Đáng giá</span><p style="font-size:12.5px;color:var(--muted);margin-top:6px;" data-i18n="m_dsv4_short">Cỗ máy suy luận mã nguồn mở, lý tưởng cho chat & RAG khối lượng lớn.</p><div style="margin-top:10px;font-size:12px;color:var(--muted);"><span class="price-usd" data-usd="0.14">$0.14</span> / 1M in</div></a>
    131. 

  131.       <a class="card hover-up" href="model-detail.html?m=deepseek-v4-pro"><b data-i18n="m_dsv4p_name">DeepSeek V4 Pro</b><span class="tag tag-gold" style="margin-left:8px;" data-i18n="tag_reasoning">Suy luận</span><p style="font-size:12.5px;color:var(--muted);margin-top:6px;" data-i18n="m_dsv4p_short">Suy luận sâu cho toán học, logic và kế hoạch agent dài hạn.</p><div style="margin-top:10px;font-size:12px;color:var(--muted);"><span class="price-usd" data-usd="0.30">$0.30</span> / 1M in</div></a>
    132. 

  132.       <a class="card hover-up" href="model-detail.html?m=qwen-max"><b data-i18n="m_qwen_name">Qwen Max</b><span class="tag tag-gray" style="margin-left:8px;" data-i18n="tag_enterprise">Doanh nghiệp</span><p style="font-size:12.5px;color:var(--muted);margin-top:6px;" data-i18n="m_qwen_short">Mô hình tổng quát mạnh nhất, đa ngôn ngữ & gọi công cụ.</p><div style="margin-top:10px;font-size:12px;color:var(--muted);"><span class="price-usd" data-usd="1.96">$1.96</span> / 1M in</div></a>
    133. 

  133.     </div>
    134. 

  134.     <a href="models.html" style="display:inline-block;margin-top:16px;font-size:14px;color:var(--purple-l);font-weight:600;" data-i18n="detail_rel_view">Xem tất cả mô hình →</a>
    135. 

  135.   </section>
    136. 

  136. </div>
    137. 

  137. 

  138. <footer>
    139. 

  139.   <div class="wrap">
    140. 

  140.     <div class="foot-grid">
    141. 

  141.       <div class="foot-brand">
    142. 

  142.         <svg viewBox="0 0 460 120" width="140" xmlns="http://www.w3.org/2000/svg">
    143. 

  143.           <defs><linearGradient id="fg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9B7BFF"/><stop offset="1" stop-color="#5C3DF0"/></linearGradient></defs>
    144. 

  144.           <g transform="translate(0,6) scale(0.92)"><circle cx="50" cy="50" r="33" stroke="rgba(124,92,255,.3)" stroke-width="1.5" stroke-dasharray="2 7" fill="none"/><g stroke="#00E5A0" stroke-width="1.8" opacity=".55"><line x1="50" y1="50" x2="76" y2="26"/><line x1="50" y1="50" x2="26" y2="76"/><line x1="50" y1="50" x2="78" y2="75"/></g><circle cx="50" cy="50" r="7.5" fill="url(#fg)"/><circle cx="76" cy="26" r="4" fill="#00E5A0"/><circle cx="26" cy="76" r="4" fill="#00E5A0"/><circle cx="78" cy="75" r="4" fill="#00E5A0"/></g>
    145. 

  145.           <text x="128" y="78" font-size="50" font-weight="700" fill="#E8ECF8" font-family="inherit">DoTouch</text><text x="348" y="78" font-size="50" font-weight="700" fill="url(#fg)" font-family="inherit">.AI</text>
    146. 

  146.         </svg>
    147. 

  147.         <p data-i18n="foot_p">AI Trung Quốc giá rẻ cho lập trình viên và doanh nghiệp nhỏ trên toàn thế giới.</p>
    148. 

  148.       </div>
    149. 

  149.       <div class="foot-col"><h4 data-i18n="foot_product">Sản phẩm</h4><a href="models.html" data-i18n="nav_models">Mô hình</a><a href="pricing.html" data-i18n="nav_pricing">Bảng giá</a><a href="../console-v1.0.0/user-console.html" data-i18n="foot_console">Console</a><a href="#" data-i18n="foot_status">Trạng thái</a></div>
    150. 

  150.       <div class="foot-col"><h4 data-i18n="foot_dev">Nhà phát triển</h4><a href="docs.html" data-i18n="foot_docs">Tài liệu</a><a href="docs.html" data-i18n="foot_quickstart">Bắt đầu nhanh</a><a href="#" data-i18n="foot_support">Hỗ trợ</a></div>
    151. 

  151.       <div class="foot-col"><h4 data-i18n="foot_legal">Pháp lý</h4><a href="#" data-i18n="foot_tos">Điều khoản dịch vụ</a><a href="#" data-i18n="foot_privacy">Chính sách bảo mật</a><a href="#" data-i18n="foot_refund">Chính sách hoàn tiền</a></div>
    152. 

  152.     </div>
    153. 

  153.     <div class="foot-bottom"><span>© 2026 DoTouch.AI — doTouch.ai</span><span data-i18n="foot_made">Thế giới mã nguồn mở · AI phổ cập</span></div>
    154. 

  154.   </div>
    155. 

  155. </footer>
    156. 

  156. 

  157. <div class="support-panel" id="supportPanel">
    158. 

  158.   <div class="support-head"><b data-i18n="chat_title">Trợ giúp & Hỗ trợ</b><span class="chat-status" data-i18n="chat_online">Trực tuyến</span></div>
    159. 

  159.   <div class="support-body">
    160. 

  160.     <p data-i18n="chat_hello">Xin chào! Chúng tôi có thể giúp gì cho bạn?</p>
    161. 

  161.     <div class="chat-sugg">
    162. 

  162.       <button data-i18n="chat_q_balance">Làm sao để nạp tiền?</button>
    163. 

  163.       <button data-i18n="chat_q_key">Tạo API key thế nào?</button>
    164. 

  164.       <button data-i18n="chat_q_model">Nên chọn mô hình nào?</button>
    165. 

  165.     </div>
    166. 

  166.     <div class="chat-input"><input placeholder="Nhập tin nhắn..." data-i18n="chat_input"><button>➤</button></div>
    167. 

  167.     <div class="chat-channels"><a class="tag tag-purple" href="#">Zalo</a><a class="tag tag-green" href="#">Telegram</a><a class="tag tag-gray" href="#">Email</a></div>
    168. 

  168.   </div>
    169. 

  169. </div>
    170. 

  170. <button class="support-fab" id="supportFab" aria-label="Support">
    171. 

  171.   <span class="pulse-ring"></span>
    172. 

  172.   <svg viewBox="0 0 24 24" width="26" height="26" fill="#fff"><path d="M12 3C7 3 3 6.6 3 11c0 2.3 1 4.3 2.7 5.8L5 20l3.4-1.5c1.1.4 2.3.5 3.6.5 5 0 9-3.6 9-8s-4-8-9-8z"/><circle cx="8.5" cy="11" r="1.2" fill="#0B1020"/><circle cx="12" cy="11" r="1.2" fill="#0B1020"/><circle cx="15.5" cy="11" r="1.2" fill="#0B1020"/></svg>
    173. 

  173. </button>
    174. 

  174. 

  175. <div class="modal-mask" id="authModal">
    176. 

  176.   <div class="modal">
    177. 

  177.     <button class="modal-close" aria-label="Close">✕</button>
    178. 

  178.     <div id="viewLogin">
    179. 

  179.       <h3 data-i18n="auth_login_title">Đăng nhập</h3>
    180. 

  180.       <div class="auth-error" data-i18n="auth_err_email">Email không hợp lệ</div>
    181. 

  181.       <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
    182. 

  182.       <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
    183. 

  183.       <button class="btn btn-primary btn-block" data-i18n="auth_login_btn">Đăng nhập</button>
    184. 

  184.       <div class="auth-links"><a data-auth-view="reset" data-i18n="auth_forgot">Quên mật khẩu?</a><a data-auth-view="register" data-i18n="auth_to_register">Tạo tài khoản</a></div>
    185. 

  185.     </div>
    186. 

  186.     <div id="viewRegister" hidden>
    187. 

  187.       <h3 data-i18n="auth_register_title">Tạo tài khoản</h3>
    188. 

  188.       <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
    189. 

  189.       <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
    190. 

  190.       <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
    191. 

  191.       <div class="field"><label data-i18n="auth_confirm">Xác nhận mật khẩu</label><input type="password"></div>
    192. 

  192.       <div class="field">
    193. 

  193.         <label data-i18n="auth_code_label">Mã xác minh</label>
    194. 

  194.         <div class="code-row">
    195. 

  195.           <input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1">
    196. 

  196.           <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
    197. 

  197.         </div>
    198. 

  198.         <p class="auth-note" data-code-note data-i18n="auth_code_note">Mã gồm 8 ký tự chữ hoa & số, hiệu lực 15 phút</p>
    199. 

  199.       </div>
    200. 

  200.       <button class="btn btn-primary btn-block" data-i18n="auth_register_btn">Đăng ký</button>
    201. 

  201.       <div class="auth-links"><a data-auth-view="login" data-i18n="auth_to_login">Đã có tài khoản? Đăng nhập</a></div>
    202. 

  202.     </div>
    203. 

  203.     <div id="viewReset" hidden>
    204. 

  204.       <h3 data-i18n="auth_reset_title">Đặt lại mật khẩu</h3>
    205. 

  205.       <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
    206. 

  206.       <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
    207. 

  207.       <div class="field">
    208. 

  208.         <label data-i18n="auth_code_label">Mã xác minh</label>
    209. 

  209.         <div class="code-row">
    210. 

  210.           <input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1">
    211. 

  211.           <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
    212. 

  212.         </div>
    213. 

  213.         <p class="auth-note" data-code-note data-i18n="auth_code_note">Mã gồm 8 ký tự chữ hoa & số, hiệu lực 15 phút</p>
    214. 

  214.       </div>
    215. 

  215.       <div class="field"><label data-i18n="auth_new_pwd">Mật khẩu mới</label><input type="password"></div>
    216. 

  216.       <div class="field"><label data-i18n="auth_confirm_new">Xác nhận mật khẩu mới</label><input type="password"></div>
    217. 

  217.       <button class="btn btn-primary btn-block" data-i18n="auth_reset_btn">Đặt lại mật khẩu</button>
    218. 

  218.       <div class="auth-links"><a data-auth-view="login" data-i18n="auth_back_login">Quay lại đăng nhập</a></div>
    219. 

  219.     </div>
    220. 

  220.   </div>
    221. 

  221. </div>
    222. 

  222. 

  223. <script src="i18n.js"></script>
    224. 

  224. <script>
    225. 

  225. /* ══ 模型数据（4 个主推模型；描述/名称引用 i18n 键，随语言联动） ══ */
    226. 

  226. const MODEL_DATA = {
    227. 

  227.   'glm-5.2': {
    228. 

  228.     nameKey: 'm_glm_name', descKey: 'm_glm_desc', vendorKey: 'm_glm_vendor', tagKey: 'tag_flagship', tagCls: 'tag-purple',
    229. 

  229.     ctx: '128K', out: '64K', rate: '60 req/min',
    230. 

  230.     caps: { json: 1, tool: 1, stream: 1, think: 1, vision: 0 },
    231. 

  231.     inUsd: 0.98, outUsd: 3.08, cut: '1.40 / 4.40',
    232. 

  232.     rel: ['deepseek-v4', 'deepseek-v4-pro', 'qwen-max']
    233. 

  233.   },
    234. 

  234.   'deepseek-v4': {
    235. 

  235.     nameKey: 'm_dsv4_name', descKey: 'm_dsv4_desc', vendorKey: 'm_dsv4_vendor', tagKey: 'tag_best', tagCls: 'tag-green',
    236. 

  236.     ctx: '1M', out: '128K', rate: '120 req/min',
    237. 

  237.     caps: { json: 0, tool: 1, stream: 1, think: 1, vision: 0 },
    238. 

  238.     inUsd: 0.14, outUsd: 0.28, cut: '0.20 / 0.40',
    239. 

  239.     rel: ['glm-5.2', 'deepseek-v4-pro', 'qwen-max']
    240. 

  240.   },
    241. 

  241.   'deepseek-v4-pro': {
    242. 

  242.     nameKey: 'm_dsv4p_name', descKey: 'm_dsv4p_desc', vendorKey: 'm_dsv4p_vendor', tagKey: 'tag_reasoning', tagCls: 'tag-gold',
    243. 

  243.     ctx: '1M', out: '128K', rate: '60 req/min',
    244. 

  244.     caps: { json: 0, tool: 1, stream: 1, think: 1, vision: 0 },
    245. 

  245.     inUsd: 0.42, outUsd: 0.84, cut: '0.60 / 1.20',
    246. 

  246.     rel: ['glm-5.2', 'deepseek-v4', 'qwen-max']
    247. 

  247.   },
    248. 

  248.   'qwen-max': {
    249. 

  249.     nameKey: 'm_qwen_name', descKey: 'm_qwen_desc', vendorKey: 'm_qwen_vendor', tagKey: 'tag_enterprise', tagCls: 'tag-gray',
    250. 

  250.     ctx: '256K', out: '64K', rate: '60 req/min',
    251. 

  251.     caps: { json: 1, tool: 1, stream: 1, think: 1, vision: 1 },
    252. 

  252.     inUsd: 1.96, outUsd: 7.84, cut: '2.80 / 11.20',
    253. 

  253.     rel: ['glm-5.2', 'deepseek-v4', 'deepseek-v4-pro']
    254. 

  254.   }
    255. 

  255. };
    256. 

  256. const capIds = { json: 'capJson', tool: 'capTool', stream: 'capStream', think: 'capThink', vision: 'capVision' };
    257. 

  257. 

  258. function curLang() { return document.documentElement.lang || 'vi'; }
    259. 

  259. function t(key) { return (I18N[curLang()] || {})[key] || key; }
    260. 

  260. 

  261. function renderModel(id) {
    262. 

  262.   const m = MODEL_DATA[id] || MODEL_DATA['glm-5.2'];
    263. 

  263.   document.getElementById('modelName').textContent = t(m.nameKey);
    264. 

  264.   document.getElementById('crumbModel').textContent = t(m.nameKey);
    265. 

  265.   document.getElementById('modelDesc').textContent = t(m.descKey);
    266. 

  266.   const tag = document.getElementById('modelTag');
    267. 

  267.   tag.className = 'tag ' + m.tagCls;
    268. 

  268.   tag.textContent = t(m.tagKey);
    269. 

  269.   document.getElementById('specVendor').textContent = t(m.vendorKey);
    270. 

  270.   document.getElementById('specCtx').textContent = m.ctx + ' tokens';
    271. 

  271.   document.getElementById('specOut').textContent = m.out + ' tokens';
    272. 

  272.   document.getElementById('specRate').textContent = m.rate;
    273. 

  273.   document.getElementById('codeModel').textContent = id;
    274. 

  274.   document.getElementById('codeModel2').textContent = id;
    275. 

  275.   Object.entries(capIds).forEach(([k, elId]) => {
    276. 

  276.     const el = document.getElementById(elId);
    277. 

  277.     el.innerHTML = m.caps[k]
    278. 

  278.       ? '<span class="save-tag">' + t('spec_ok') + '</span>'
    279. 

  279.       : '<span class="tag tag-gray">' + t('spec_no') + '</span>';
    280. 

  280.   });
    281. 

  281.   const pi = document.getElementById('priceIn').querySelector('[data-usd]');
    282. 

  282.   pi.dataset.usd = m.inUsd; pi.textContent = fmtPrice(m.inUsd);
    283. 

  283.   const po = document.getElementById('priceOut').querySelector('[data-usd]');
    284. 

  284.   po.dataset.usd = m.outUsd; po.textContent = fmtPrice(m.outUsd);
    285. 

  285.   document.getElementById('priceCut').textContent = '$' + m.cut;
    286. 

  286.   /* 相关模型（去重当前） */
    287. 

  287.   const rb = document.getElementById('relatedBox');
    288. 

  288.   rb.innerHTML = m.rel.map(rid => {
    289. 

  289.     const r = MODEL_DATA[rid];
    290. 

  290.     const cls = 'card hover-up';
    291. 

  291.     return '<a class="' + cls + '" href="model-detail.html?m=' + rid + '"><b>' + t(r.nameKey) + '</b><span class="tag ' + r.tagCls + '" style="margin-left:8px;">' + t(r.tagKey) + '</span><p style="font-size:12.5px;color:var(--muted);margin-top:6px;">' + t(r.descKey) + '</p><div style="margin-top:10px;font-size:12px;color:var(--muted);"><span class="price-usd" data-usd="' + r.inUsd + '">' + fmtPrice(r.inUsd) + '</span> / 1M in</div></a>';
    292. 

  292.   }).join('');
    293. 

  293.   applyCurrency();
    294. 

  294. }
    295. 

  295. 

  296. /* 初始化：读取 ?m= 参数 */
    297. 

  297. const param = new URLSearchParams(location.search).get('m') || 'glm-5.2';
    298. 

  298. renderModel(param);
    299. 

  299. 

  300. /* 语言切换后重渲染（拦截 lang-btn 点击，setLang 执行后渲染） */
    301. 

  301. document.querySelectorAll('.lang-btn').forEach(b => b.addEventListener('click', () => {
    302. 

  302.   setTimeout(() => renderModel(new URLSearchParams(location.search).get('m') || 'glm-5.2'), 0);
    303. 

  303. }));
    304. 

  304. </script>
    305. 

  305. </body>
    306. 

  306. </html>
    307.