CDN

Điểm vào @neongate-ai/orbz/standalone là mô-đun ES độc lập dành cho trang không dùng trình quản lý gói hay công cụ đóng gói. Nó tự đăng ký <orb-z> và cung cấp cùng API thành phần gốc như /browser.

Các URL này cố định bản phát hành 1.0.2, tránh việc thẻ latest sau này bất ngờ thay đổi hợp đồng thành phần.

jsDelivr


<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

unpkg


<script
  type="module"
  src="https://unpkg.com/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

Tệp kê khai gói cung cấp cùng tệp qua siêu dữ liệu unpkg và jsdelivr. URL tệp tường minh ở trên giúp xác định rõ bản dựng và phiên bản.

Trang hoàn chỉnh

index.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Orbz voice assistant</title>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
    ></script>
  </head>
  <body>
    <main>
      <div role="status" aria-live="polite">
        <orb-z
          state="idle"
          size="300px"
          speed="1"
          reduced-motion="system"
          elevated
        ></orb-z>
        <p id="assistant-status">Assistant is idle</p>
      </div>
 
      <button id="listen" type="button">Listen</button>
    </main>
 
    <script type="module">
      await customElements.whenDefined("orb-z");
 
      const orb = document.querySelector("orb-z");
      const status = document.querySelector("#assistant-status");
      const listen = document.querySelector("#listen");
 
      listen?.addEventListener("click", () => {
        if (orb) orb.state = "listening";
        if (status) status.textContent = "Assistant is listening";
      });
    </script>
  </body>
</html>

Trình duyệt nâng cấp thẻ hiện có khi mô-đun tải xong. Chỉ cần chờ customElements.whenDefined("orb-z") khi mã phải truy cập thuộc tính hoặc gọi phương thức Orbz ngay.

Cố định phiên bản

Dùng phiên bản gói chính xác trong môi trường production:


@neongate-ai/orbz@1.0.2

Tránh URL không có phiên bản hoặc thẻ latest thay đổi liên tục. Cố định phiên bản giữ hợp đồng và hình ảnh ổn định giữa các lần triển khai. Chủ động cập nhật sau khi đọc lịch sử thay đổi.

Khi nào nên dùng npm

Dùng bản CDN cho trang độc lập, nội dung nhúng, nguyên mẫu hoặc microfrontend chủ động quản lý phụ thuộc trình duyệt. Chọn npm khi hệ thống dựng cần loại bỏ phụ thuộc trùng, kiểm tra kiểu cấu hình hoặc khóa toàn bộ đồ thị phụ thuộc.