Evan
/
DoTouchAI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Models — DoTouch.AI</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="dev-note" id="demoLoginBanner" style="bottom:56px;"></div>
<div class="dev-note">v1.1.0 · Models 列表页（下钻入口）</div>

<header>
  <div class="wrap nav">
    <a class="nav-logo" href="index.html">
      <svg viewBox="0 0 460 120" xmlns="http://www.w3.org/2000/svg">
        <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>
        <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>
        <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>
      </svg>
    </a>
        <nav class="nav-links">
      <a href="index.html" data-i18n="nav_home">Trang chủ</a>
      <a href="models.html" class="active" data-i18n="nav_models">Models</a>
      <a href="pricing.html" data-i18n="nav_pricing">Pricing</a>
      <a href="docs.html" data-i18n="nav_docs_ops">Hướng dẫn</a>
      <a href="../console-v1.0.0/user-console.html" data-i18n="nav_console">Console</a>
    </nav>
    <div class="nav-right">
      <div class="lang-switch">
        <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>
      </div>
      <a class="btn btn-sm" href="#" data-open-auth="login" data-i18n="nav_login">Đăng nhập</a>
      <a class="btn btn-primary btn-sm" href="#" data-open-auth="register" data-i18n="nav_signup">Bắt đầu</a>
    </div>
  </div>
</header>

<div class="wrap">
  <div class="crumbs"><a href="index.html" data-i18n="crumb_home">Trang chủ</a><span class="sep">/</span><span data-i18n="nav_models">Models</span></div>

  <div class="page-hero">
    <h1 data-i18n="nav_models">Models</h1>
    <p data-i18n="models_p">Tất cả mô hình được phục vụ qua Alibaba Cloud DashScope, tương thích hoàn toàn OpenAI. Xem chi tiết từng mô hình.</p>
  </div>

  <!-- 搜索 + 筛选 -->
  <div class="filter-bar">
    <input class="search-box" id="search" type="text" placeholder="" data-i18n="models_ph">
    <button class="filter-tag active" data-filter="all" data-i18n="filter_all">Tất cả</button>
    <button class="filter-tag" data-filter="flagship" data-i18n="filter_flagship">Cao cấp</button>
    <button class="filter-tag" data-filter="value" data-i18n="filter_value">Đáng giá</button>
    <button class="filter-tag" data-filter="reasoning" data-i18n="filter_reasoning">Suy luận</button>
    <button class="filter-tag" data-filter="enterprise" data-i18n="filter_enterprise">Doanh nghiệp</button>
  </div>

  <!-- 模型表格 -->
  <div class="table-wrap">
    <table class="data">
      <thead>
        <tr>
          <th data-i18n="m_col_model">Mô hình</th>
          <th data-i18n="m_col_vendor">Nhà cung cấp</th>
          <th data-i18n="m_col_ctx">Ngữ cảnh</th>
          <th data-i18n="m_col_in">Đầu vào / 1M</th>
          <th data-i18n="m_col_out">Đầu ra / 1M</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr data-cat="flagship">
          <td><b data-i18n="m_glm_name">GLM 5.2</b><br><span class="tag tag-purple" data-i18n="tag_flagship">Cao cấp</span></td>
          <td style="color:var(--muted);" data-i18n="m_glm_vendor">Zhipu AI</td>
          <td class="price" data-i18n="m_glm_ctx">128K</td>
          <td class="price"><span class="price-usd" data-usd="0.98">$0.98</span></td>
          <td class="price"><span class="price-usd" data-usd="3.08">$3.08</span></td>
          <td><a class="btn btn-sm" href="model-detail.html?m=glm-5.2" data-i18n="m_see_detail">Xem chi tiết →</a></td>
        </tr>
        <tr data-cat="value">
          <td><b data-i18n="m_dsv4_name">DeepSeek V4</b><br><span class="tag tag-green" data-i18n="tag_best">Đáng giá</span></td>
          <td style="color:var(--muted);" data-i18n="m_dsv4_vendor">DeepSeek</td>
          <td class="price" data-i18n="m_dsv4_ctx">1M</td>
          <td class="price"><span class="price-usd" data-usd="0.14">$0.14</span></td>
          <td class="price"><span class="price-usd" data-usd="0.28">$0.28</span></td>
          <td><a class="btn btn-sm" href="model-detail.html?m=deepseek-v4" data-i18n="m_see_detail">Xem chi tiết →</a></td>
        </tr>
        <tr data-cat="reasoning">
          <td><b data-i18n="m_dsv4p_name">DeepSeek V4 Pro</b><br><span class="tag tag-gold" data-i18n="tag_reasoning">Suy luận</span></td>
          <td style="color:var(--muted);" data-i18n="m_dsv4p_vendor">DeepSeek</td>
          <td class="price" data-i18n="m_dsv4p_ctx">1M</td>
          <td class="price"><span class="price-usd" data-usd="0.30">$0.30</span></td>
          <td class="price"><span class="price-usd" data-usd="0.60">$0.60</span></td>
          <td><a class="btn btn-sm" href="model-detail.html?m=deepseek-v4-pro" data-i18n="m_see_detail">Xem chi tiết →</a></td>
        </tr>
        <tr data-cat="enterprise">
          <td><b data-i18n="m_qwen_name">Qwen Max</b><br><span class="tag tag-gray" data-i18n="tag_enterprise">Doanh nghiệp</span></td>
          <td style="color:var(--muted);" data-i18n="m_qwen_vendor">Alibaba</td>
          <td class="price" data-i18n="m_qwen_ctx">256K</td>
          <td class="price"><span class="price-usd" data-usd="1.96">$1.96</span></td>
          <td class="price"><span class="price-usd" data-usd="7.84">$7.84</span></td>
          <td><a class="btn btn-sm" href="model-detail.html?m=qwen-max" data-i18n="m_see_detail">Xem chi tiết →</a></td>
        </tr>
      </tbody>
    </table>
  </div>
  <p style="color:var(--muted);font-size:12.5px;margin-top:10px;"><span id="visible-count">4</span> <span data-i18n="models_count">mô hình có sẵn</span></p>
  <div class="notice"><b>💡</b> <span data-i18n="detail_rel_view">Xem tất cả mô hình →</span> Mỗi mô hình có trang chi tiết riêng: thông số, khả năng, giá và ví dụ API.</div>
</div>

<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-brand">
        <svg viewBox="0 0 460 120" width="140" xmlns="http://www.w3.org/2000/svg">
          <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>
          <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>
          <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>
        </svg>
        <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>
      </div>
      <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="#" data-i18n="foot_console">Console</a><a href="#" data-i18n="foot_status">Trạng thái</a></div>
      <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>
      <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>
    </div>
    <div class="foot-bottom"><span>© 2026 DoTouch.AI — doTouch.ai</span><span data-i18n="foot_made">Tạo cho Việt Nam & thế giới · 算力普惠</span></div>
  </div>
</footer>

<div class="support-panel" id="supportPanel">
  <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>
  <div class="support-body">
    <p data-i18n="chat_hello">Xin chào! Chúng tôi có thể giúp gì cho bạn?</p>
    <div class="chat-sugg">
      <button data-i18n="chat_q_balance">Làm sao để nạp tiền?</button>
      <button data-i18n="chat_q_key">Tạo API key thế nào?</button>
      <button data-i18n="chat_q_model">Nên chọn mô hình nào?</button>
    </div>
    <div class="chat-input"><input placeholder="Nhập tin nhắn..." data-i18n="chat_input"><button>➤</button></div>
    <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>
  </div>
</div>
<button class="support-fab" id="supportFab" aria-label="Support">
  <span class="pulse-ring"></span>
  <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>
</button>

<div class="modal-mask" id="authModal">
  <div class="modal">
    <button class="modal-close" aria-label="Close">✕</button>

    <div id="viewLogin">
      <h3 data-i18n="auth_login_title">Đăng nhập</h3>
      <div class="auth-error" data-i18n="auth_err_email">Email không hợp lệ</div>
      <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
      <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
      <button class="btn btn-primary btn-block" data-i18n="auth_login_btn">Đăng nhập</button>
      <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>
    </div>

    <div id="viewRegister" hidden>
      <h3 data-i18n="auth_register_title">Tạo tài khoản</h3>
      <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
      <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
      <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
      <div class="field"><label data-i18n="auth_confirm">Xác nhận mật khẩu</label><input type="password"></div>
      <div class="field">
        <label data-i18n="auth_code_label">Mã xác minh</label>
        <div class="code-row">
          <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">
          <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
        </div>
        <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>
      </div>
      <button class="btn btn-primary btn-block" data-i18n="auth_register_btn">Đăng ký</button>
      <div class="auth-links"><a data-auth-view="login" data-i18n="auth_to_login">Đã có tài khoản? Đăng nhập</a></div>
    </div>

    <div id="viewReset" hidden>
      <h3 data-i18n="auth_reset_title">Đặt lại mật khẩu</h3>
      <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
      <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
      <div class="field">
        <label data-i18n="auth_code_label">Mã xác minh</label>
        <div class="code-row">
          <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">
          <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
        </div>
        <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>
      </div>
      <div class="field"><label data-i18n="auth_new_pwd">Mật khẩu mới</label><input type="password"></div>
      <div class="field"><label data-i18n="auth_confirm_new">Xác nhận mật khẩu mới</label><input type="password"></div>
      <button class="btn btn-primary btn-block" data-i18n="auth_reset_btn">Đặt lại mật khẩu</button>
      <div class="auth-links"><a data-auth-view="login" data-i18n="auth_back_login">Quay lại đăng nhập</a></div>
    </div>
  </div>
</div>

<script src="i18n.js"></script>
<script>
/* 列表页搜索/筛选（简单实现） */
const search = document.getElementById('search');
const rows = [...document.querySelectorAll('tbody tr')];
const count = document.getElementById('visible-count');
document.querySelectorAll('.filter-tag').forEach(btn => btn.addEventListener('click', () => {
  document.querySelectorAll('.filter-tag').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  applyFilter();
}));
function applyFilter() {
  const f = document.querySelector('.filter-tag.active').dataset.filter;
  const q = search.value.toLowerCase();
  let n = 0;
  rows.forEach(r => {
    const okCat = f === 'all' || r.dataset.cat === f;
    const okQ = !q || r.textContent.toLowerCase().includes(q);
    r.style.display = okCat && okQ ? '' : 'none';
    if (okCat && okQ) n++;
  });
  count.textContent = n;
}
search.addEventListener('input', applyFilter);
</script>
</body>
</html>