Picovoice Wordmark
Start Building
Introduction
Introduction
AndroidC.NETFlutterlink to GoiOSJavaNVIDIA JetsonLinuxmacOSNodejsPythonRaspberry PiReact NativeRustWebWindows
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
SummaryPicovoice LeopardAmazon TranscribeAzure Speech-to-TextGoogle ASRGoogle ASR (Enhanced)IBM Watson Speech-to-Text
FAQ
Introduction
AndroidC.NETFlutterlink to GoiOSJavaNVIDIA JetsonLinuxmacOSNodejsPythonRaspberry PiReact NativeRustWebWindows
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
FAQ
Introduction
AndroidCiOSLinuxmacOSPythonWebWindows
AndroidCiOSPythonWeb
SummaryOctopus Speech-to-IndexGoogle Speech-to-TextMozilla DeepSpeech
FAQ
Introduction
AndroidAngularArduinoBeagleBoneCChrome.NETEdgeFirefoxFlutterlink to GoiOSJavaNVIDIA JetsonLinuxmacOSMicrocontrollerNodejsPythonRaspberry PiReactReact NativeRustSafariUnityVueWebWindows
AndroidAngularC.NETFlutterlink to GoiOSJavaMicrocontrollerNodejsPythonReactReact NativeRustUnityVueWeb
SummaryPorcupineSnowboyPocketSphinx
Wake Word TipsFAQ
Introduction
AndroidAngularBeagleBoneCChrome.NETEdgeFirefoxFlutterlink to GoiOSJavaNVIDIA JetsonLinuxmacOSNodejsPythonRaspberry PiReactReact NativeRustSafariUnityVueWebWindows
AndroidAngularC.NETFlutterlink to GoiOSJavaNodejsPythonReactReact NativeRustUnityVueWeb
SummaryPicovoice RhinoGoogle DialogflowAmazon LexIBM WatsonMicrosoft LUIS
Expression SyntaxFAQ
Introduction
AndroidBeagleboneCiOSNVIDIA JetsonLinuxmacOSPythonRaspberry PiRustWebWindows
AndroidCiOSPythonRustWeb
SummaryPicovoice CobraWebRTC VAD
FAQ
Introduction
AndroidCiOSNVIDIA JetsonLinuxmacOSPythonRaspberry PiWebWindows
AndroidCiOSPythonWeb
SummaryPicovoice KoalaMozilla RNNoise
Introduction
AndroidCiOSNVIDIA JetsonLinuxmacOSPythonRaspberry PiWebWindows
AndroidCPythoniOSWeb
Introduction
AndroidAngularArduinoBeagleBoneC.NETFlutterlink to GoiOSJavaNVIDIA JetsonMicrocontrollerNodejsPythonRaspberry PiReactReact NativeRustUnityVueWeb
AndroidAngularCMicrocontroller.NETFlutterlink to GoiOSJavaNodejsPythonReactReact NativeRustUnityVueWeb
Picovoice SDK - FAQ
IntroductionSTM32F407G-DISC1 (Arm Cortex-M4)STM32F411E-DISCO (Arm Cortex-M4)STM32F769I-DISCO (Arm Cortex-M7)IMXRT1050-EVKB (Arm Cortex-M7)
Introduction
AndroidC.NETFlutterlink to GoiOSNodejsPythonReact NativeRustUnityWeb
AndroidC.NETFlutterlink to GoiOSNodejsPythonReact NativeRustUnityWeb
FAQGlossary

Rhino Speech-to-Intent
Vue Quick Start

Platforms

  • Chrome & Chromium-based browsers
  • Edge
  • Firefox
  • Safari

Requirements

  • Picovoice Account and AccessKey
  • Node.js 14+
  • Vue 2.6.11+, 3.0.0+
  • npm

Picovoice Account & AccessKey

Signup or Login to Picovoice Console to get your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

  1. Install Node.js .

  2. Install the npm packages:

    • @picovoice/rhino-vue
    • @picovoice/web-voice-processor
npm install @picovoice/rhino-vue @picovoice/web-voice-processor

Usage

To initialize Rhino you'll need a Rhino context file (.rhn) as well as a model file (.pv). Place these files in the project's public directory or generate a base64 representation of the file using the built-in script:

npx pvbase64 -i ${RHINO_INIT_FILE} -o ${BASE64_OUTPUT_FILE}

Pass the path to the file (relative to the public directory) or use the base64 string:

const rhinoFile = {
publicPath: "${FILE_RELATIVE_PATH}",
// or
base64: "${FILE_BASE64_STRING}",
}

Create a Vue Component with useRhino and initialize instance of Rhino:

<script lang='ts'>
import { useRhino } from '@picovoice/rhino-vue';
const contextFileBase64 = // base64 of Rhino context file (.rhn)
const modelFileBase64 = // base64 of Rhino model file (.pv)
export default {
data() {
const {
state,
init,
process,
release
} = useRhino();
init(
${ACCESS_KEY},
{ base64: contextFileBase64 },
{ base64: modelFileBase64 },
);
return {
state,
process,
release
}
},
watch: {
"state.inference": function(inference) {
if (inference !== null) {
console.log(inference)
}
},
"state.contextInfo": function(contextInfo) {
if (contextInfo !== null) {
console.log(contextInfo)
}
},
"state.isLoaded": function(isLoaded) {
console.log(isLoaded)
},
"state.isListening": function(isListening) {
console.log(isListening)
},
"state.error": function(error) {
console.error(error)
},
},
onBeforeDestroy() {
this.release();
},
};
</script>

To learn how to use RhinoVue with Vue's Composition API, check Rhino Vue GitHub Repo .

To start detecting an inference, run the process function:

this.process()

The process function initializes WebVoiceProcessor. Rhino will then listen and process frames of microphone audio until it reaches a conclusion, then return the result via the state.inference variable. Once a conclusion is reached Rhino will enter a paused state. From the paused state Rhino call process again to detect another inference.

Custom Contexts

Create custom contexts in the Picovoice Console using the Rhino Grammar. Train and download a Rhino context file (.rhn) for the target platform Web (WASM). This model file can be used directly with publicPath, but, if base64 is preferable, convert the .rhn file to a base64 JavaScript variable using the built-in pvbase64 script:

npx pvbase64 -i ${CONTEXT_FILE}.rhn -o ${CONTEXT_BASE64}.js -n ${CONTEXT_BASE64_VAR_NAME}

Similar to the model file (.pv), context files (.rhn) are saved in IndexedDB to be used by Web Assembly. Either base64 or publicPath must be set for the context to instantiate Rhino. If both are set, Rhino will use the base64 model.

const contextModel = {
publicPath: "${CONTEXT_RELATIVE_PATH}",
// or
base64: "${CONTEXT_BASE64_STRING}",
}

Switching Languages

In order to use Rhino with different languages you need to use the corresponding model file (.pv) for the desired language. The model files for all supported languages are available in the Rhino GitHub repository.

Demo

For the Rhino Vue SDK, there is a Vue demo project available on the Rhino GitHub repository .

Setup

Clone the Rhino repository from GitHub:

git clone --recurse-submodules https://github.com/Picovoice/rhino.git

Usage

  1. Install the dependencies, and use the start script with a language code to start a local web server hosting the demo in the language of your choice (e.g. pl -> Polish, ko -> Korean). To see a list of available languages, run start without a language code.
cd rhino/demo/vue
npm install
npm run start ${LANGUAGE}
  1. Click the link output from the command line to launch the demo in your browser

  2. Enter your AccessKey and click Init Rhino to start the demo

Resources

Packages

  • @picovoice/rhino-vue on the npm registry
  • @picovoice/web-voice-processor on the npm registry

API

  • @picovoice/rhino-vue API Docs

GitHub

  • Rhino Vue SDK on GitHub
  • Rhino Vue Demo on GitHub

Benchmark

  • Speech-to-Intent Benchmark

Was this doc helpful?

Issue with this doc?

Report a GitHub Issue
Rhino Speech-to-Intent Vue Quick Start
  • Platforms
  • Requirements
  • Picovoice Account & AccessKey
  • Quick Start
  • Setup
  • Usage
  • Custom Contexts
  • Switching Languages
  • Demo
  • Setup
  • Usage
  • Resources
Platform
  • Leopard Speech-to-Text
  • Cheetah Streaming Speech-to-Text
  • Koala Noise Suppression
  • Eagle Speaker RecognitionBETA
  • Octopus Speech-to-Index
  • Porcupine Wake Word
  • Rhino Speech-to-Intent
  • Cobra Voice Activity Detection
  • Orca Text-to-SpeechWAITLIST
  • Falcon Speaker DiarizationWAITLIST
Resources
  • Docs
  • Console
  • Blog
  • Use Cases
Sales & Services
  • Consulting
  • Developer Plan
  • Enterprise Plan
  • Support Add-on
Company
  • About us
  • Careers
Follow Picovoice
  • LinkedIn
  • GitHub
  • Twitter
  • Medium
  • YouTube
  • AngelList
Subscribe to our newsletter
Terms of Use
Privacy Policy
© 2019-2022 Picovoice Inc.