
用于将Spokestack添加到任何React Native应用程序中的React Native组件。

与同行依赖关系安装此库
一个单线安装所有依赖项
npm install react-native-spokestack-tray react-native-spokestack @react-native-community/async-storage react-native-video react-native-haptic-feedback react-native-linear-gradient react-native-permissions$ npm install react-native-spokestack-tray react-native-spokestack
# Used for storing a simple boolean to turn on/off sound
$ npm install @react-native-community/async-storage
# Used to play TTS audio prompts.
# Despite its name, we think this is one of the best
# plugins (if not the best) for playing audio.
# In iOS, Audio and Video are intertwined anyway.
$ npm install react-native-video
# Used to show an animating gradient when Spokestack listens
$ npm install react-native-linear-gradient
# Used to check microphone and speech recognition permissions
$ npm install react-native-permissions
# Used to generate a haptic whenever Spokestack listens.
# This can be turned off, but the dependency is still needed.
$ npm install react-native-haptic-feedback然后按照每个平台的说明将React-Native-Spokestack链接到您的项目:
React-Native-Spokestack使用仅在iOS 13+中可用的相对较新的API。确保将部署目标设置为iOS 13。
首先,打开XCode并转到项目 - >信息以将iOS部署目标设置为13.0或更高。
另外,将部署设置为目标 - >一般 - >部署信息下的13.0。
当引入Flipper进行反应本地时,设置了一些库搜索路径以供Swift。 React Native Project中的默认搜索路径存在很长的问题,因为Swift 5.0添加了搜索路径,该搜索路径阻止了仅在Swift 5.2或更高版本中使用API的任何其他React本机库。 spokestack-ios,反应本地spokestack的依赖性使用这些API和Xcode将无法构建。
幸运的是,修复程序非常简单。转到您的目标 - >构建设置并搜索“库搜索路径”。
从列表中删除""$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)"" 。
在运行pod install之前,请确保进行以下编辑。
platform :ios , '13.0'我们还需要使用use_frameworks!在我们的podfile中,以支持用迅速编写的依赖项。
target 'SpokestackExample' do
use_frameworks!
#...暂时, use_frameworks!不与Flipper一起使用,因此我们还需要禁用Flipper。卸下豆荚纤维中的任何与脚钳相关的线条。在React Native 0.63.2中,它们看起来像这样:
# X Remove or comment out these lines X
# use_flipper!
# post_install do |installer|
# flipper_post_install(installer)
# end
# XX 我们使用React-native-permissions检查并请求麦克风许可(iOS和Android)以及语音识别许可(仅IOS)。该库将每个权限分为自己的POD,以避免使用不使用的代码将您的应用程序充气。将以下豆荚添加到您的豆荚中:
target 'SpokestackTrayExample' do
# ...
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Microphone' , :path => " #{ permissions_path } /Microphone.podspec"
pod 'Permission-SpeechRecognition' , :path => " #{ permissions_path } /SpeechRecognition.podspec" React Native 0.64.0使用use_frameworks!在他们的豆荚里。
有关此错误的更多信息,请参见Facebook/React-Native#31149。
要解决此问题,请将以下内容添加到您的podfile:
# Moves 'Generate Specs' build_phase to be first for FBReactNativeSpec
post_install do | installer |
installer . pods_project . targets . each do | target |
if ( target . name &. eql? ( 'FBReactNativeSpec' ) )
target . build_phases . each do | build_phase |
if ( build_phase . respond_to? ( :name ) && build_phase . name . eql? ( '[CP-User] Generate Specs' ) )
target . build_phases . move ( build_phase , 0 )
end
end
end
end
end 删除您现有的podfile.lock和pods文件夹,以确保没有冲突,然后安装吊舱:
$ npx pod-install将以下内容添加到您的info.plist中以启用权限。在XCode中,还要确保将iOS部署目标设置为13.0或更高。
< key >NSMicrophoneUsageDescription</ key >
< string >This app uses the microphone to hear voice commands</ string >
< key >NSSpeechRecognitionUsageDescription</ key >
< string >This app uses speech recognition to process voice commands</ string >弗里普(Flipper)致力于修复其pod for use_frameworks! ,我们必须禁用脚钳。我们已经从上面的豆荚中删除了脚依依赖,但是在appdelegate.m中仍然有一些代码导入flipper。有两种解决此问题的方法。
-DFB_SONARKIT_ENABLED=1 。在我们的示例应用程序中,我们完成了选项1,并保留在Flipper代码中,以便将来使其在将来工作,并且可以添加回去。
# import < AVFoundation/AVFoundation.h > 设置AudioSession类别。有几种可行的配置。
以下是适合大多数用例的建议:
- ( BOOL )application:(UIApplication *)application didFinishLaunchingWithOptions:( NSDictionary *)launchOptions
{
AVAudioSession *session = [AVAudioSession sharedInstance ];
[session setCategory: AVAudioSessionCategoryPlayAndRecord
mode: AVAudioSessionModeDefault
options: AVAudioSessionCategoryOptionDefaultToSpeaker | AVAudioSessionCategoryOptionAllowAirPlay | AVAudioSessionCategoryOptionAllowBluetoothA2DP | AVAudioSessionCategoryOptionAllowBluetooth
error: nil ];
[session setActive: YES error: nil ];
// ... 该示例使用使用系统提供的ASRS( AndroidSpeechRecognizer和AppleSpeechRecognizer )。但是,100%的设备无法使用AndroidSpeechRecognizer 。如果您的应用程序支持没有内置语音识别的设备,请使用配置文件道具将配置profile设置为Spokestack配置文件,以使用profile ASR。
有关更多信息,请参见我们的ASR文档。
// ...
ext {
// Minimum SDK is 21
minSdkVersion = 21
// ...
dependencies {
// Minimium gradle is 3.0.1+
// The latest React Native already has this
classpath( " com.android.tools.build:gradle:3.5.3 " )将必要的权限添加到您的AndroidManifest.xml 。第一个权限通常已经存在。使用麦克风需要第二个。
<!-- For TTS -->
< uses-permission android : name = " android.permission.INTERNET " />
<!-- For wakeword and ASR -->
< uses-permission android : name = " android.permission.RECORD_AUDIO " />
<!-- For ensuring no downloads happen over cellular, unless forced -->
< uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " /> import SpokestackTray , { listen } from 'react-native-spokestack-tray'
// ...
export default function ConversationHandler ( { navigation } ) {
return (
< SpokestackTray
clientId = { process . env . SPOKESTACK_CLIENT_ID }
clientSecret = { process . env . SPOKESTACK_CLIENT_SECRET }
handleIntent = { ( intent , slots , utterance ) => {
switch ( intent ) {
// These cases would be for all
// the possible intents defined in your NLU.
case 'request.select' :
// As an example, search with some service
// with the given value from the NLU
const recipe = SearchService . find ( slots . recipe ?. value )
// An example of navigating to some scene to show
// data, a recipe in our example.
navigation . navigate ( 'Recipe' , { recipe } )
return {
node : 'info.recipe' ,
prompt : 'We found your recipe!'
}
default :
return {
node : 'welcome' ,
prompt : 'Let us help you find a recipe.'
}
}
} }
// The NLU models are downloaded and then cached
// when the app is first installed.
// See https://spokestack.io/docs/concepts/nlu
// for more info on NLU.
nlu = { {
nlu : 'https://somecdn/nlu.tflite' ,
vocab : 'https://somecdn/vocab.txt' ,
metadata : 'https://somecdn/metadata.json'
} }
/>
)
} 要在您的应用中将模型文件包括在本地(而不是从CDN下载),您还需要添加必要的扩展名,以便Babel可以包含这些文件。为此,请编辑您的metro.config.js 。
const defaults = require ( 'metro-config/src/defaults/defaults' )
module . exports = {
resolver : {
// json is already in the list
assetExts : defaults . assetExts . concat ( [ 'tflite' , 'txt' , 'sjson' ] )
}
}然后使用源对象包括模型文件:
< SpokestackTray
clientId = { process . env . SPOKESTACK_CLIENT_ID }
clientSecret = { process . env . SPOKESTACK_CLIENT_SECRET }
handleIntent = { handleIntent }
wakeword = { {
filter : require ( './filter.tflite' ) ,
detect : require ( './detect.tflite' ) ,
encode : require ( './encode.tflite' )
} }
nlu = { {
model : require ( './nlu.tflite' ) ,
vocab : require ( './vocab.txt' ) ,
// Be sure not to use "json" here.
// We use a different extension (.sjson) so that the file is not
// immediately parsed as json and instead
// passes a require source object to Spokestack.
// The special extension is only necessary for local files.
metadata : require ( './metadata.sjson' )
} }
/>这不是必需的。将远程URL传递到相同的配置选项,并且首次调用initialize时将下载和缓存文件。
请参阅了解如何为存储库和开发工作流程贡献的贡献指南。
<SpokestackTray />组件道具• Optional按钮: number (默认值: 60 )
麦克风按钮的宽度(和高度)
src/spokestacktray.tsx:132
•客户端: string
您的Spokestack代币在您的Spokestack帐户中生成的,网址为https://spokestack.io/account。免费创建一个帐户,然后生成一个令牌。这是来自“ ID”字段。
src/spokestacktray.tsx:74
•客户端: string
您的Spokestack代币在您的Spokestack帐户中生成的,网址为https://spokestack.io/account。免费创建一个帐户,然后生成一个令牌。这是来自“秘密”领域。
src/spokestacktray.tsx:81
• Optional封闭式: number (默认值: 0 )
讲话后要等待要关闭托盘多长时间(MS)
src/spokestacktray.tsx:134
• Optional调试: boolean
显示来自React-Native Spokestack的调试消息
src/spokestacktray.tsx:136
• Optional持续时间: number (默认值: 500 )
托盘动画的持续时间(MS)
src/spokestacktray.tsx:138
• Optional宽松: EasingFunction (默认值:宽松。
托盘动画的宽松功能
src/spokestacktray.tsx:140
• Optional出口: string []
此数组中的所有节点都应结束对话并关闭托盘
src/spokestacktray.tsx:150
• Optional fontfamily : string
用于“听力...”,“加载...”和聊天气泡文本的字体。
src/spokestacktray.tsx:155
• Optional梯度颜色: string [](默认值: [“#61fae9”,“#2f5bea”] )
当收听时显示的线性梯度的颜色可能是任何数量的颜色(推荐:2-3)
src/spokestacktray.tsx:160
• Optional问候: boolean (默认: false )
托盘打开时,是否要通过欢迎消息向用户打招呼。注意: handleIntent必须响应“问候”意图。
src/spokestacktray.tsx:166
• Optional触觉: boolean (默认: true )
将其设置为错误,以禁用每当托盘开始聆听时会播放的触觉。
src/spokestacktray.tsx:171
• Optional关键字: KeywordConfig
关键字识别的配置
过滤器,检测,编码和元数据字段接受2种值类型。
require或import的源对象(例如model: require('./nlu.tflite') )请参阅https://www.spokestack.io/docs/concepts/keywords,以了解有关关键字识别的更多信息。
example
// ...
keyword = { {
detect : 'https://s.spokestack.io/u/UbMeX/detect.tflite' ,
encode : 'https://s.spokestack.io/u/UbMeX/encode.tflite' ,
filter : 'https://s.spokestack.io/u/UbMeX/filter.tflite' ,
metadata : 'https://s.spokestack.io/u/UbMeX/metadata.json'
} }您还可以提前下载模型,并将其从本地文件中包括在内。注意:这需要更改您的Metro.config.js。有关更多信息,请参阅readme.md中的“在应用程序捆绑包中包含模型文件”。
// ...
keyword = { {
detect : require ( './detect.tflite' ) ,
encode : require ( './encode.tflite' ) ,
filter : require ( './filter.tflite' ) ,
// IMPORTANT: a special extension is used for local metadata JSON files (`.sjson`) when using `require` or `import`
// so the file is not parsed when included but instead imported as a source object. This makes it so the
// file is read and parsed by the underlying native libraries instead.
metadata : require ( './metadata.sjson' )
} }关键字配置还接受一个类字段,用于未指定元数据时。
// ...
keyword = { {
detect : require ( './detect.tflite' ) ,
encode : require ( './encode.tflite' ) ,
filter : require ( './filter.tflite' ) ,
classes : [ 'one' , 'two' , 'three]
} } src/spokestacktray.tsx:221
• Optional minheight : number (默认值: 170 )
托盘的最小高度
src/spokestacktray.tsx:223
• nlu : NLUConfig
Nlu Tensorflow Lite模型(.tflite),JSON元数据和NLU词汇(.txt)
所有3个字段都接受2种值类型。
require或import的源对象(例如model: require('./nlu.tflite') )请参阅https://spokestack.io/docs/concepts/nlu了解有关NLU的更多信息。
// ...
nlu = { {
model : 'https://somecdn.com/nlu.tflite' ,
vocab : 'https://somecdn.com/vocab.txt' ,
metadata : 'https://somecdn.com/metadata.json'
} }您也可以传递本地文件。注意:这需要更改您的Metro.config.js。有关更多信息,请参阅readme.md中的“在应用程序捆绑包中包含模型文件”。
// ...
nlu = { {
model : require ( './nlu.tflite' ) ,
vocab : require ( './vocab.txt' ) ,
// IMPORTANT: a special extension is used for local metadata JSON files (`.sjson`) when using `require` or `import`
// so the file is not parsed when included but instead imported as a source object. This makes it so the
// file is read and parsed by the underlying native libraries instead.
metadata : require ( './metadata.sjson' )
} } src/spokestacktray.tsx:130
• Optional方向: "left" | "right" (默认: “左” )
托盘按钮可以定向在屏幕的两侧
src/spokestacktray.tsx:235
• Optional主彩色: string (默认值: “#2F5BEA” )
该颜色用于主题托盘,并用于麦克风按钮和语音气泡中。
src/spokestacktray.tsx:240
• Optional配置文件: PipelineProfile
Spokestack配置配置文件传递给React-Native-Spokestack。这些可从版本4.0.0始于React-Native-Spokestack获得。
如果指定了Wakeword配置文件,则默认为TFLITE_WAKEWORD_NATIVE_ASR 。否则,默认值为PTT_NATIVE_ASR 。
import SpokestackTray from 'react-native-spokestack-tray'
import { PipelineProfile } from 'react-native-spokestack'
// ...
< SpokestackTray
profile = { PipelineProfile . TFLITE_WAKEWORD_SPOKESTACK_ASR }
// ... src/spokestacktray.tsx:261
• Optional刷新模型: boolean
在设备(强制覆盖)上,很少使用此此功能来刷新唤醒字,关键字和NLU模型。 <SpokestackTray refreshModels={process.env.NODE_ENV !== 'production'} ... />
src/spokestacktray.tsx:268
• Optional Saygreeting : boolean (默认: true )
是说问候还是只显示带有问候消息的聊天泡沫,即使声音正在打开。
src/spokestacktray.tsx:274
• Optional soundoffimage : ReactNode (默认值: <<image source = {soundoffimage} style = {{width:30,高度:30}} />) )
通过传递React图像组件来替换映像的声音图像
src/spokestacktray.tsx:278
• Optional soundonimage : ReactNode (默认值: <<image source = {soundonimage} style = {{width:30,高度:30}} />) )
通过传递反应图像组件来替换图像上的声音
src/spokestacktray.tsx:276
• Optional SpokestackConfig : Partial SpokestackConfig
将选项直接传递到spokestack.initialize()函数,来自React-Native-Spokestack。有关可用选项,请参见https://github.com/spokestack/reaeact-native-spokestack。
src/spokestacktray.tsx:285
• Optional startheight : number (默认值: 220 )
托盘的起始高度
src/spokestacktray.tsx:287
• Optional样式: false | RegisteredStyle ViewStyle | Value | AnimatedInterpolation | WithAnimatedObject ViewStyle | WithAnimatedArray < false | ViewStyle | RegisteredStyle ViewStyle | RecursiveArray < false | ViewStyle | RegisteredStyle < ViewStyle >> | readonly( false | ViewStyle | RegisteredStyle ViewStyle )[]>
此样式道具传递给托盘的容器
src/spokestacktray.tsx:289
• Optional ttsformat : TTSFormat (默认: ttsformat.text )
文本传递给Spokestack.Synthesize的格式
src/spokestacktray.tsx:291
• Optional语音: string (默认: “演示 - 男性” )
Spokestack TTS中声音的钥匙,传递给Spokestack.Synthesize。仅当您使用Spokestack Maker帐户创建自定义语音时,才能更改。请参阅https://spokestack.io/pricing#maker。如果未指定,则使用Spokestack的免费“演示”语音。
src/spokestacktray.tsx:298
• Optional唤醒词: WakewordConfig
NLU Tensorflow Lite模型(.tflite)用于wawdword。
所有3个字段都接受2种值类型。
require或import的源对象(例如model: require('./nlu.tflite') )请参阅https://spokestack.io/docs/concepts/wakeword-models以了解有关Wakeword的更多信息
Spokestack提供示例WAVEWORD模型文件(“ Spokestack”):
// ...
wakeword = { {
detect : 'https://s.spokestack.io/u/hgmYb/detect.tflite' ,
encode : 'https://s.spokestack.io/u/hgmYb/encode.tflite' ,
filter : 'https://s.spokestack.io/u/hgmYb/filter.tflite'
} }您还可以提前下载这些模型,并将其包括在本地文件中。注意:这需要更改您的Metro.config.js。有关更多信息,请参阅readme.md中的“在应用程序捆绑包中包含模型文件”。
// ...
wakeword = { {
detect : require ( './detect.tflite' ) ,
encode : require ( './encode.tflite' ) ,
filter : require ( './filter.tflite' )
} } src/spokestacktray.tsx:332
▸ Optional Editranscript ( transcript ): string
在分类前和显示用户响应气泡之前编辑成绩单。
| 姓名 | 类型 |
|---|---|
transcript | string |
string
src/spokestacktray.tsx:145
▸handleintent ( intent , slots? , utterance? ): [IntentResult](#IntentResult)
此功能从NLU中呈现出意图,并返回具有唯一对话节点名称(您定义的)的对象,并通过TTS处理并说话提示。
注意:如果声音关闭,则提示仅在聊天气泡中显示。
| 姓名 | 类型 |
|---|---|
intent | string |
slots? | SpokestackNLUSlots |
utterance? | string |
[IntentResult](#IntentResult)
src/spokestacktray.tsx:91
▸ Optional Onclose (): void
每当托盘关闭时打电话
void
src/spokestacktray.tsx:227
▸ Optional OnError ( e ): void
每当spokestack出现错误时都打电话
| 姓名 | 类型 |
|---|---|
e | SpokestackErrorEvent |
void
src/spokestacktray.tsx:229
▸ Optional onopen (): void
每当托盘打开时打电话
void
src/spokestacktray.tsx:231
• Optional数据: any
您可能想添加的任何其他数据
src/spokestacktray.tsx:64
• Optional nointerrupt : boolean
设置为true以在提示播放期间停止唤醒识别器。
src/spokestacktray.tsx:62
•节点: string
用户定义的键指示用户在对话中的何处,如果Spokestack在说明提示后不应再次聆听,则将其包含在exitNodes Prop中。
src/spokestacktray.tsx:55
•提示: string
除非托盘处于静音模式,否则将处理到语音中
src/spokestacktray.tsx:57
<SpokestackTray />组件方法这些方法可从spokestacktray组件获得。使用React Ref访问这些方法。
const spokestackTray = useRef ( null )
// ...
< SpokestackTray ref = { spokestackTray }
// ...
spokestackTray . current . say ( 'Here is something for Spokestack to say' )注意:在大多数情况下,您应该调用listen而不是open 。
▸open (): void
打开托盘,问候(如果适用),然后听
void
src/spokestacktray.tsx:743
▸关闭(): void
关闭托盘,停止聆听并重新启动唤醒字
void
src/spokestacktray.tsx:754
▸说( input ): Promise void
将输入传递到spokestack.synthesize(),播放音频,并增加了语音泡沫。
| 姓名 | 类型 |
|---|---|
input | string |
Promise void
src/spokestacktray.tsx:766
▸addBubble ( bubble ): void
将气泡(系统或用户)添加到聊天接口
| 姓名 | 类型 |
|---|---|
bubble | Bubble |
void
src/spokestacktray.tsx:799
• Isleft : boolean
SRC/组件/Secembubbles.tsx:9
•文字: string
src/components/segingBubbles.tsx:8
▸togglesilent (): Promise boolean
切换静音模式
Promise boolean
src/spokestacktray.tsx:816
▸ISLENT (): boolean
返回托盘是否处于静音模式
boolean
src/spokestacktray.tsx:828
这些功能可作为来自React-Native-Spokestack-tray的出口
▸lining (): Promise void
告诉Spokestack语音管道开始聆听。还请求在必要时授予聆听的权限。如果尚未启动,它将尝试在激活之前开始管道。如果该应用在后台,此功能将无能为力。
import { listen } from 'react-native-spokestack-tray'
try {
await listen()
} catch (error) {
console.error(error)
}
Promise void
src/spokestack.ts:21
▸停止列表(): Promise void
Promise void
src/spokestack.ts:30
Const Islisting (): Promise boolean
返回Spokestack是否当前正在听
console . log ( `isListening: ${ await isListening ( ) } ` ) Promise boolean
src/index.ts:19
Const isInitialized (): Promise boolean
返回Spokestack是否已初始化
console . log ( `isInitialized: ${ await isInitialized ( ) } ` ) Promise boolean
src/index.ts:27
Const isstarted (): Promise boolean
返回语音管道是否已经开始
console . log ( `isStarted: ${ await isStarted ( ) } ` ) Promise boolean
src/index.ts:35
Const addEventListEner ( eventType , listener , context? ): EmitterSubscription
绑定到本机库发出的任何事件中,事件是:“识别”,“ partial_recognize”,“ error”,“激活”,“停用”和“超时”。有关事件的描述,请参见readme.md的底部。
useEffect ( ( ) => {
const listener = addEventListener ( 'recognize' , onRecognize )
// Unsubscribe by calling remove when components are unmounted
return ( ) => {
listener . remove ( )
}
} , [ ] ) | 姓名 | 类型 |
|---|---|
eventType | string |
listener | ( event : any )=> void |
context? | Object |
EmitterSubscription
src/index.ts:51
Const removeeventListener ( eventType , listener ): void
删除活动听众
removeEventListener ( 'recognize' , onRecognize ) | 姓名 | 类型 |
|---|---|
eventType | string |
listener | (... args : any [])= any |
void
src/index.ts:59
Const removeAlllisteners (): void
删除任何现有的听众
componentWillUnmount ( ) {
removeAllListeners ( )
} void
src/index.ts:69
使用addEventListener() , removeEventListener()和removeAllListeners()添加和删除事件处理程序。 iOS和Android都可以使用所有事件。
| 姓名 | 数据 | 描述 |
|---|---|---|
| 认出 | { transcript: string } | 每当能够成功完成语音识别时,就被解雇。 |
| partial_recognize | { transcript: string } | 每当笔录在语音识别过程中变化时被解雇。 |
| 开始 | null | 当语音管道开始时被解雇(开始聆听WakeWord或启动VAD)。 |
| 停止 | null | 当语音管道停止时被解雇。 |
| 激活 | null | 当语音管道通过VAD,WakeWord或调用.activate()激活时,被解雇。 |
| 停用 | null | 当语音管道停用时被解雇。 |
| 玩 | { playing: boolean } | 当TTS播放启动和停止时被解雇。请参阅speak()函数。 |
| 暂停 | null | 由于缺乏识别,当主动管道时间熄灭时被解雇。 |
| 痕迹 | { message: string } | 发射跟踪消息。冗长由traceLevel选项确定。 |
| 错误 | { error: string } | 当Spokestack发生错误时被解雇。 |
当触发错误事件时,任何现有承诺将被拒绝。
Spokestack使用这些实用程序功能来检查iOS和Android和iOS的语音识别许可的麦克风许可。
▸checkspeech (): Promise boolean
此功能可用于检查用户是否授予了语音的必要权限。在iOS上,这同时包括麦克风和语音再报表。在Android上,仅需要麦克风。
import { checkSpeech } from 'react-native-spokestack-tray'
// ...
const hasPermission = await checkSpeech ( ) Promise boolean
src/utils/permissions.ts:78
▸requestSpeech (): Promise boolean
此功能可用于实际请求语音的必要权限。在iOS上,这同时包括麦克风和语音再报表。在Android上,仅需要麦克风。
注意:如果用户过去在iOS上降低,则必须将用户发送到设置。
import { requestSpeech } from 'react-native-spokestack-tray'
// ...
const hasPermission = await requestSpeech ( ) Promise boolean
src/utils/permissions.ts:106
麻省理工学院