Getting 'INVALID_ARGUMENT' in React binding

DukeFerdinand commented 1 year ago

Make sure you have read the documentation, and have put forth a reasonable effort to find an existing answer.

Expected behaviour

usePorcupine hook's init should properly initialize porcupine on the frontend and allow me to use this service.

Actual behaviour

The WASM module throws an INVALID_ARGUMENT error every single way I've tried to initialize when calling init(). I was initially using Sveltekit with the generic Web SDK, but I switched to React because Pico officially supports React.

The actual error is pretty vague, so I can't give you more detail on what exactly is going wrong, but please read the "Notes/already tried" section below as I can tell you what's probably not going wrong.

[ERROR] loading parameters failed with 'INVALID_ARGUMENT'

Notes / already tried solutions

[x] The PPN is freshly generated as of a few minutes ago (roughly 11:15 Pacific, Fri Apr 21, 2023), and is confirmed to be accessible from /hey-bot-suero_en_wasm_v2_2_0.ppn
[x] Using an invalid API key gave me something about an invalid key
[x] Adding/removing forceWrite does nothing/does not fix the error
[x] Using an invalid keyword config complains about an invalid keyword
[x] NOT including a PPN or base64 model breaks the init as well, but no INVALID_ARGUMENT
[x] Using Web SDK or React SDK yields the same error, given the same API key or PPN (neither SDK works)
[x] Pico React SDK and web-voice-processor packages are the latest available versions: ^2.2.0 and ^4.0.6 respectively

My full package.json:

{
  "name": "twitch-vox",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  },
  "dependencies": {
    "@picovoice/porcupine-react": "^2.2.0",
    "@picovoice/web-voice-processor": "^4.0.6",
    "@tauri-apps/api": "^1.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.2.3",
    "@types/node": "^18.7.10",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^3.0.0",
    "typescript": "^4.9.5",
    "vite": "^4.2.1"
  }
}

Steps to reproduce the behaviour

Create a new WASM-target PPN model file with the English language trigger word hey bot suero (it's functionally used as hey botsuro but custom words aren't allowed)
Creat a Vite/Create-React-App project, or whatever modern React project that lets you serve stuff automatically from /public/<file>
Put your PPN in the /public dir or use base64 in the configs below
Literally just follow the React docs and create a component like the below:

Click the dropdown(s) to see code snippets

VoiceTest.tsx

```typescript import React, { useEffect } from "react"; import { usePorcupine } from "@picovoice/porcupine-react"; export function VoiceWidget() { const { keywordDetection, isLoaded, isListening, error, init, start, stop, release, } = usePorcupine(); const porcupineModel = { publicPath: "hey-bot-suero_en_wasm_v2_2_0.ppn", forceWrite: true, }; useEffect(() => { init( "YOUR OWN API KEY :)", [ { publicPath: "hey-bot-suero_en_wasm_v2_2_0.ppn", label: "Hey botsuro", }, ], porcupineModel ); }, []); useEffect(() => { if (keywordDetection !== null) { // ... use keyword detection result console.log(keywordDetection); } }, [keywordDetection]); // ... render component return (

{isLoaded &&

loaded

} {error &&

{error?.message}

}

); } ```

App.tsx

```typescript // Note: this import {VoiceWidget} from "./VoiceWidget" function App() { return (

{/* ...redacted for brevity ... */}

); } export default App; ```

Please let me know if you need any more details, or need a copy of my PPN file and I'll help as I'm able to! I really need this to work for a client of mine, and there don't seem to be any helpful tips for this in the FAQ. :)

mrrostam commented 1 year ago

@DukeFerdinand Could you please consider starting with our React demo project and modifying it to accept a custom keyword model, as explained in our documentation, instead of us attempting to replicate your project? This way we can identify any potential issues with our React binding more quickly and easily.

DukeFerdinand commented 1 year ago

Sure! I'll try out the official solution just to make sure it's not on me. I'll update this issue when I've done that :)

DukeFerdinand commented 1 year ago

I was not able to reproduce the INVALID_ARGUMENT problem using the official React demo. The official React demo code also works when copy-pasting the VoiceWidget into an unrelated standard Next.js app, so any issues here are not caused by Porcupine :)

Are PRs welcome in the off chance I can get a Tauri (Rust + React) app working for a native desktop app project? I feel like that could be a good demo for future users.

Also as a stretch goal would it be possible to identify permission problems when calling the init function from Porcupine? I'm not 100% sure, but that INVALID_ARGUMENT feels like it's caused by incorrect permissions or missing window properties when running React in a "native" window.

mrrostam commented 1 year ago

We always welcome PRs here. To ensure consistency, we request that you refer to our existing demos and follow the same format. Additionally, for each demo, we do have Github actions that build and test it after every release or any updates to maintain their quality.

Picovoice / porcupine