Rhino - Vue Quick Start

npm install @picovoice/rhino-web-vue @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

<script lang="ts">
import rhinoMixin from "@picovoice/rhino-web-vue";
import { RhinoWorkerFactoryEn } from "@picovoice/rhino-web-en-worker";

const RHN_CONTEXT_CLOCK_64 = ${RHN_MODEL_B64}; /* Base64 representation of English language clock_wasm.rhn, omitted for brevity */

const rhinoFactoryArgs = {
  accessKey: '${ACCESS_KEY}',
  context: { 
    base64: RHN_CONTEXT_CLOCK_64 
  },
  start: true,
};

export default {
  name: "App",
  mixins: [rhinoMixin],
  data: function() {
    return {
      factory: RhinoWorkerFactoryEn,
      factoryArgs: rhinoFactoryArgs
    };
  },
  async created() {
    await this.$rhino.init(
      this.factoryArgs,
      this.factory,
      this.rhnInferenceFn,
      this.rhnInfoFn,
      this.rhnReadyFn,
      this.rhnErrorFn
    );
  },
  methods: {
    rhnReadyFn: function() {
      // do something after load
    },
    rhnInferenceFn: function(inference) {
      if (inference.isUnderstood) {
        const intent = inference.intent
        const slots = inference.slots
        // take action based on inferred intent and slot values
      } else {
        // handle unsupported commands
      }
    },
    rhnInfoFn: function(info) {
      // do something with info
    },
    rhnErrorFn: function(error) {
      // handle error
    },
  },
};
</script>

this.$rhino.pushToTalk()

const CUSTOM_CONTEXT_64 = "${CUSTOM_CONTEXT_MODEL_B64}"

const rhinoFactoryArgs = {
  accessKey: '${ACCESS_KEY}',
  context: { 
    base64: CUSTOM_CONTEXT_64
  },
  start: true,
};

import { RhinoWorkerFactory } from "@picovoice/rhino-web-xx-worker";

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

cd rhino/demo/vue
npm install
npm run start