@animated-waffle/react
用于嵌入已出版的"纳里亚会说话"代理机的反钩和"神通"渲染器.
此套件依赖于并再导出整个
@animated-waffle/client,因此 React 应用程序安装
只有这个包裹.
安装当前 npm 发布而不复制可变注册版本 :
pnpm add @animated-waffle/react@latest
管理下的会期特性和 sessionContext 这里描述的API是
在0.3.1.版本中引入。 工作空间 package.json 实值
此寄存器版本的真相来源; @latest 决定
当前 npm 发布.
特工拥有它的外形,声音,和迅速。 媒体运行时间、API路线和
avatar 资产 URL 是 SDK 执行细节 。 制造器装入
Avatar 绑定到代理会话;呼叫者不会通过 avatarUrl。 。 。 .
生产是默认的 API 来源 。 试验和非生产结合
可能通过 apiOrigin; SDK 仍然拥有代理会话路由.
使用
将永久的工作空间 API 密钥保留在您的服务器上 。 换一个 短暂的代理会话符, 并给钩子一个获取一个的回调 每个连接 :
import {
AvatarStage,
WaffleDeveloperFeedback,
WaffleDiagnosticsPanel,
useWaffle,
} from '@animated-waffle/react'
const waffle = useWaffle({
agentId,
inputAudioEnabled: false, // Text-triggered, output-only application.
sessionContext: {
userName: ' Space é ',
timeZone: 'Asia/Shanghai',
},
sessionToken: () => getSessionToken(agentId),
// Optional creator-only dev BFF. It returns the public snake_case grant.
developerFeedback: ({ agentId, sourceSessionId, signal }) =>
fetch('/api/narya-developer-feedback-grant', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ agentId, sourceSessionId }),
signal,
}),
})
return (
<>
<AvatarStage {...waffle.avatar} style={{ width: 480, height: 480 }} />
<WaffleDeveloperFeedback waffle={waffle} />
<WaffleDiagnosticsPanel waffle={waffle} />
</>
)
使用回调,反馈组件只授权在 a 之后保存 连接会话存在 。 没有它,服务器作者 Studio 链接仍然 可供继续使用。 每一个都保存到一个私人的回合草稿的附件和 可区分保留/更改、整个会话/永久的助理答复, 首选答复,以及Persona/行为/记忆/Avatar/Voice/runtime维度. 它从未启动即时生成或发布; 服务器授权的 Dashboard 链接继续该工作流程。 组件保存一个项目 UUID 横跨一个 模糊失败的重试 .
sessionContext?: { userName?: string; timeZone?: string } 仅属于
默认 sessionToken 发起者. 非空白值的发送精确于
提供了空白值。 它相互排斥
高级 startSession 重新调用,所以信使路径 消费者不会重新创建
原始的管理会话请求.
钩子返回 App- face 客户端表面(status, (中文(简体) ), session, (中文(简体) ), transcript, (中文(简体) ),
transcriptProgress, (中文(简体) ),
agentSpeaking, (中文(简体) ), decline, (中文(简体) ), error, (中文(简体) ), connect, (中文(简体) ), disconnect, (中文(简体) ), sendText, (中文(简体) ), muted 编号 :
setMuted)加上不透明 avatar 约束
AvatarStage 财务报告和审定财务报表
页:1 avatarLoad 预测。 传输音频音轨不属于此
默认反应 API. 其行动功能保持稳定身份,
所以效果和事件订阅可以直接依赖于它们.
error 是一个 WaffleError 输入 stage。钩子是单反射
错误所有者: 连接失败保留他们的客户端阶段, 而 Avatar 模式
和制造器失败的使用 avatar-load 财务报告和审定财务报表 avatar-renderer 不更改
连接状态。 钩子也接受客户端的可选性
reportedSource; 它默认为 SDK。 。 。 .
AvatarStage 拥有渲染器的寿命。 会话断开、重新连接和
替换仅重置性能信号; 它们不会去除可见的
画布 模型重置重用舞台,所以前相机会留下
可见,直到替换模型准备好。 舞台被摧毁了
当主机组件卸载时.
waffle.avatarLoad 报告Avatar探员的装载状态:
const label = waffle.avatarLoad.fromCache
? 'Loading cached avatar…'
: waffle.avatarLoad.progress === null
? 'Downloading avatar…'
: `Downloading avatar… ${Math.round(waffle.avatarLoad.progress * 100)}%`
首个VRM下载以字节进度流出. SDK验证 模型与代理会话提供的内容散列相对并存储于 浏览器缓存存储 。 以后的会话会重新使用该内容,即使它们 短寿命资产URL不同.
setMuted 让特工的声音安静下来 一边继续表演 获取
回放完全是一个 @animated-waffle/client 选项: 此钩状手
返回没有音频音轨,所以应用程序不会播放.
对于一个故意沉默的特工来说, decline 包含最新的
{ reason }。用它来调节当前序列化反应.
神通的口音同步 运行一个音频工作 包裹携带
操作浏览器作为对象 URL,所以没有构建步骤需要复制资产
没有一个捆绑者能失去他们。 包含内容-安全政策的应用程序
需求 blob: 内 script-src。 。 。 .
见 SDK 文档 联 合 国 完整的整合指南.
发展诊断
useWaffle 自动显示已崩溃 Aniwaffle 诊断 按钮
发展权利底线建设。 点击它扩展; 再次点击或按 Escape
里面会倒塌 生产建筑把它藏起来。 设定 diagnostics: false 或者说 true
在钩子选项中覆盖。 默认遵循应用程序捆绑器 process.env.NODE_ENV。 。 。 .
读取 client.diagnostics 并订阅 client.on('diagnostics', render)。 。 。 .
反应返回相同的快照 waffle.diagnostics; 渲染
<WaffleDiagnosticsPanel waffle={waffle} /> 从 @animated-waffle/react 用于内置
视图,与 diagnostics: false 以避免同时显示覆盖.
其他浏览器应用 mountWaffleDiagnostics(host, client) 从
@animated-waffle/web搭载面板从不启动连接或麦克风.
面板显示连接/ 媒体/ Avatar 状态, 连接阶段, 最新的客户端 输入端回放估计,安全出错和当前会话工作室链接. 更新的工人还报告使用ASR、LLM、TTS和工人-产出计时 工作室的减员。 客户端和服务器行有单独的关联ID和时钟; 不对阶段进行总和,也不将工人输出作为浏览器回放。 缺少数据 仍然无法使用。 语音输入活动和RTC/paired输出时间是估计数, 没有校正声学测量。 抓图不包括文本、音频、符号和原始 错误消息 。 面板是可选的;现有的计时遥测独立于面板.
微型手机计数器和设备选择器
import { useWaffle, WaffleMicrophoneControls, WaffleInputMeter } from '@animated-waffle/react'
const waffle = useWaffle({ agentId, sessionToken })
// Includes the current input name, live meter, in-call device switch and input notices.
<WaffleMicrophoneControls waffle={waffle} />
// Or render your own controls around these primitives:
<WaffleInputMeter level={waffle.inputLevel} />
// waffle.microphone.devices, waffle.microphone.deviceId, waffle.setInputDevice(id)
这些组件不要求在挂载时捕获 。 首先连接以获取设备
标签和活的能量。 仪表显示的是麦克风能量 而不是ASR或证明
用户正在发言. waffle.inputIssue 单独包含非致命输入反馈
从连接出错。 设备开关错误留在选择器旁边 .
地区
使用 useWaffle({ agentId, sessionToken, region: 'jp' }) 选择日本 API 和代理,或 region: 'us' 为美国. connect({ region: 'jp' }) 覆盖新连接的默认值。 对于DEV, 也设定 apiOrigin: 'https://dev.aniwaffle.com';自定义 API 来源保持不变。 见 区域指南。 。 。 .