Các mục xuất của gói

Orbz tách riêng việc truy cập API thuần, đăng ký có kiểm tra môi trường trình duyệt và gói trình duyệt độc lập. Mọi framework đều hiển thị phần tử gốc <orb-z>.

Bảng điểm vào

Các điểm vào trình duyệt và standalone được đánh dấu là có tác dụng phụ trong tệp khai báo gói, để công cụ đóng gói giữ lại lệnh gọi đăng ký.

react-types không chứa thành phần React hay bộ chuyển đổi khi chạy. Chỉ nhập mục này trong dự án TypeScript dùng React hoặc Next.js cần nhận biết <orb-z> trong JSX.

Điểm vào gốc

Dùng điểm vào gốc để đăng ký rõ ràng và sử dụng các kiểu miền có thể tái sử dụng:

import {
  DEFAULT_ORBZ_PRESET,
  defineOrbz,
  ORBZ_PRESETS,
  ORBZ_STATES,
  type OrbzElement,
  type OrbzPresetName,
  type OrbzState,
} from "@neongate-ai/orbz";
 
defineOrbz();
 
const nextState: OrbzState = "listening";
const preset: OrbzPresetName = DEFAULT_ORBZ_PRESET;
const colors = ORBZ_PRESETS[preset];
const orb = document.querySelector<OrbzElement>("orb-z");
 
if (orb) orb.state = nextState;

Chỉ nhập mô-đun gốc sẽ không bao giờ đăng ký orb-z. Gọi defineOrbz() hoặc nhập /browser khi trang cần kích hoạt thẻ thành phần tử tùy chỉnh.

Hằng số

Các mảng và bản ghi bộ màu giúp tạo bộ điều khiển với giá trị hợp lệ mà không cần sao chép các giá trị gói chấp nhận.

import { DEFAULT_ORBZ_PRESET, ORBZ_PRESET_NAMES, ORBZ_STATES } from "@neongate-ai/orbz";
 
for (const state of ORBZ_STATES) {
  stateSelect.add(new Option(state, state));
}
 
for (const preset of ORBZ_PRESET_NAMES) {
  const label = preset === DEFAULT_ORBZ_PRESET ? "Neongate" : preset;
  presetSelect.add(new Option(label, preset));
}

Kiểu

Bộ chuyển đổi giọng nói

OpenAISpeechAdapter mặc định dùng gpt-4o-mini-tts, marin và MP3. Khóa API OpenAI được giữ tại điểm cuối và không bao giờ được đưa vào mã trình duyệt.

Hàm kiểm tra và chuẩn hóa

Chuẩn hóa cấu hình không đáng tin cậy trước khi lưu:

import {
  normalizeOrbzPreset,
  normalizeOrbzSpeed,
  normalizeOrbzState,
} from "@neongate-ai/orbz";
 
const config = {
  preset: normalizeOrbzPreset(payload.preset),
  speed: normalizeOrbzSpeed(payload.speed),
  state: normalizeOrbzState(payload.state),
};

Hàm hỗ trợ đăng ký

defineOrbz() là API thông thường để đăng ký rõ ràng. API này an toàn với SSR và có tính lũy đẳng:

import { defineOrbz } from "@neongate-ai/orbz";
 
const constructor = defineOrbz();

orbzElementClassFactory() chỉ tạo và lưu lớp vào bộ nhớ đệm khi globalThis.HTMLElement tồn tại. Hàm này được xuất cho các tích hợp nâng cao; phần lớn ứng dụng nên gọi defineOrbz().

import { orbzElementClassFactory } from '@neongate-ai/orbz'
 
const constructor = orbzElementClassFactory()
// undefined on a server; an OrbzElementConstructor in a browser

Cả hai hàm đều tránh đánh giá lớp con của HTMLElement khi không có DOM.

• Gói trên npm 
• Mã nguồn trên GitHub