ข้ามไปยังเนื้อหา

คอมโพเนนต์เดียว ได้พนักงานต้อนรับที่มีชีวิต

@khaveeai/react เรนเดอร์อวตาร VRM พร้อมท่าทางยามว่าง lip-sync และท่าทางประกอบ แล้วเปิดบทสนทนาให้ใช้ผ่าน hooks เชื่อม realtime provider ตัวไหนก็ได้ เว็บไซต์นี้ทั้งเว็บสร้างจากมัน

อ่านเอกสารดูบน npm
$ npm install @khaveeai/react @khaveeai/core

สามขั้นตอนสู่อวตารที่พูดได้

1

ครอบแอปของคุณ

KhaveeProvider เก็บสถานะของอวตาร: อินสแตนซ์ VRM สีหน้า แอนิเมชันปัจจุบัน และสถานะการสนทนา

2

เรนเดอร์อวตาร

วาง VRMAvatar ใน Canvas ของ react-three-fiber ส่งไฟล์ .vrm และแมปของคลิปแอนิเมชันเข้าไป

3

เชื่อมต่อ provider

ส่ง RealtimeProvider เข้าไปใน config แล้ว useRealtime() จะให้ connect, sendMessage, บทสนทนา และสถานะสด

โค้ดด้านล่างคือสิ่งที่เรนเดอร์น้องกวีบนหน้านี้ ต่างกันแค่มุมกล้อง

reception.tsx
import { KhaveeProvider, VRMAvatar, useRealtime } from '@khaveeai/react'
import { Canvas } from '@react-three/fiber'

export function Reception({ provider }) {
  return (
    <KhaveeProvider config={{ realtime: provider }}>
      <Canvas camera={{ position: [0, 1.3, 3], fov: 30 }}>
        <VRMAvatar
          src="/models/nongkhavee.vrm"
          animations={{ base: '/animations/idle.fbx', talk_1: '/animations/talk.fbx' }}
        />
      </Canvas>
      <Desk />
    </KhaveeProvider>
  )
}

function Desk() {
  const { connect, sendMessage, chatStatus } = useRealtime()
  return <button onClick={connect}>{chatStatus}</button>
}
provider.ts
// Swap the brain, keep the JSX.
import { OpenAIRealtimeProvider } from '@khaveeai/providers-openai-realtime'

const provider = new OpenAIRealtimeProvider({
  useProxy: true,
  proxyEndpoint: 'https://api.platform.khavee.ai/api/v1/projects/PROJECT_ID/chat/token',
  voice: 'coral',
  language: 'th',
})

แพ็กเกจเล็ก ๆ อินเทอร์เฟซเดียว

@khaveeai/react

VRMAvatar, GLBAvatar, KhaveeProvider, useRealtime, useVRMExpressions, useAnimations, AvatarPostFX, ShadowFloor

@khaveeai/core

อินเทอร์เฟซ RealtimeProvider และ pipeline, tool calling ที่ไม่ผูกกับผู้ให้บริการ, ชนิดข้อมูลโปรเจกต์จากแพลตฟอร์ม

@khaveeai/providers-openai-realtime

เสียงสองทางผ่าน WebRTC พร้อม lip-sync และ tool call อัตโนมัติ มี token proxy ให้คีย์อยู่ฝั่งเซิร์ฟเวอร์

@khaveeai/providers-mock

คลาส LLM และ TTS จำลองสำหรับเทสต์และเดโม ไม่ต้องใช้คีย์ ไม่ต้องต่อเน็ต

UI ของคุณไม่ต้องรู้เลยว่าใครเป็นคนพูด

ทุกอย่างเหนือเส้น provider ขึ้นกับอินเทอร์เฟซ RealtimeProvider เท่านั้น สลับ OpenAI Realtime API เป็น pipeline STT, LLM, TTS ที่ประกอบเอง หรือเป็น provider แบบสคริปต์อย่างที่รันอยู่บนหน้านี้ JSX ก็ยังเหมือนเดิม

แอปของคุณ

UI แชท เชลล์คีออสก์ หน้าจองคิว

@khaveeai/react

VRMAvatar · KhaveeProvider · useRealtime

อินเทอร์เฟซ RealtimeProvider

connect · sendMessage · chatStatus · getAudioAnalyser

Providers

OpenAI Realtime · Generic STT/LLM/TTS · Scripted (หน้านี้)

ส่วนที่คุณไม่อยากเขียนซ้ำสองรอบ

รีทาร์เก็ต Mixamo

วางคลิป FBX จาก Mixamo ลงในแมป animations กระดูกจะถูกแมปเข้ากับ humanoid ของ VRM ให้อัตโนมัติ

คลิปตามสถานะ

ตั้งชื่อคลิปว่า talk, think, listen หรือ greet แล้วมันจะเล่นตามสถานะการสนทนานั้น พร้อม crossfade ที่รู้จักท่าทาง

ชีวิตยามว่าง

การหายใจ การถ่ายน้ำหนัก การกะพริบตา สีหน้าที่เปลี่ยนเบา ๆ และการมองตามกล้อง ทั้งหมดเป็น procedural

Lip-sync

วิเคราะห์หน่วยเสียงแบบ MFCC จากเสียงของ provider แล้วแมปเป็นรูปปาก aa, ih, ou, ee, oh

Tool calling

ลงทะเบียนฟังก์ชันครั้งเดียว provider แต่ละตัวแปลงรูปแบบของตัวเองให้เป็น ToolCall กลางแบบเดียว

คุณภาพการเรนเดอร์

เงา anisotropy tone mapping และ bloom + SMAA แบบเลือกเปิดได้ ปรับจูนมาสำหรับวัสดุ MToon

ส่งมอบพนักงานต้อนรับได้ในสปรินต์นี้

รับ API key จากแพลตฟอร์ม ติดตั้งแพ็กเกจ แล้วใช้ VRM ของคุณเองหรือของเราก็ได้

รับ API keyคุยกับวิศวกร