Слово пробуждения Porcupine не инициализируется в моем приложении React ⇐ Javascript

[Anonymous]

Я работал с Porcupine и пытаюсь его инициализировать. Я пробовал использовать версию моделей base64, а также прямой путь к файлам. Я пробовал изменить время запуска кода по отношению к другому коду, но ничего не работает. Он даже не выдает ошибку, когда я ввожу неверный ключ доступа или путь к файлу, поэтому я не совсем уверен, где я ошибся.
Приведенный мною код взят прямо из документации porcupine.
Я использовал модель base64 вместо прямой ссылки на путь к файлу, поскольку мое приложение будет запускаться только на локальном хосте.
import React, { useEffect } from "react";
import { usePorcupine } from "@picovoice/porcupine-react";
import modelParams from './porcupine_model';
import wakeWord from "./wakeWord";

function VoiceWidget() {
const {
keywordDetection,
isLoaded,
isListening,
error,
init,
start,
stop,
release,
} = usePorcupine();

const porcupineKeyword = {
base64: wakeWord,
label: "Hey Arthur"
}

const porcupineModel = {
base64: modelParams,
}

useEffect(() => {
async function initialize() {
await init(
"accessKeyGoesHere",
porcupineKeyword,
porcupineModel
);
}

async function startPorcupine() {
try {
await start();
} catch (err) {
console.log(err);
}
}

initialize()
.then(() => startPorcupine());

return () => {
release();
}
}, []);

useEffect(() => {
console.log("isLoaded: " + isLoaded);
}, [isLoaded]);

useEffect(() => {
if (keywordDetection !== null) {
console.log("It worked!");
}
}, [keywordDetection]);
}

export default VoiceWidget;

Вывод должен представлять собой активированный значок микрофона на Chrome, указывающий, что звук обрабатывается, и когда я говорю слова «Эй, Артур», на консоли должно выводиться сообщение «это сработало!» но в настоящее время он этого не делает. Мне было интересно, есть ли у кого-нибудь еще опыт использования этого и можете ли вы дать некоторое представление о том, что может происходить с моим кодом.
Это мой основной файл App.js:
import './App.css';
import { useEffect, React, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import WaveformVisualizer from './components/WaveFormVisualizer';
import { connectToAgent } from './functions/gptTools.mjs';
import Timer from './components/Timer';
import CurrentSong from './components/CurrentSong';
import VoiceWidget from './VoiceAgent';
import BloodGlucose from './components/BloodGlucose';
import VideoStream from './components/VideoStream';

function App() {
const MINUTE_MS = 180000;

const [timers, setTimers] = useState([]);
const [connected, isConnected] = useState(false);
const [glucoseLevels, updateLevels] = useState("No Readings");
const [glucoseTrend, updateTrend] = useState("");

function addTimer(hour, minute, second) {
var id = "balls";
const newTimer = { id, hour, minute, second };
setTimers(prev => [...prev, newTimer]);

}

function removeTimer(id) {
setTimers(prev => prev.filter(timer => timer.id !== id));
}

async function getGlucoseLevel() {
fetch("http://127.0.0.1:8000/glucose", {
method: "GET",
})
.then(res => res.json())
.then(data => {
updateLevels(data.value);
updateTrend(data.trend);
})
.catch(err => {
updateLevels("");
updateTrend("");
console.error(err);
});

}

useEffect(() => {

window.addTimer = addTimer;
window.removeTimer = removeTimer;
const init = async () => {
await fetch("https://localhost:8080/token")
.then(response => response.json())
.then(data => {
connectToAgent(data.value).then(
(resolvedValue) => {
isConnected(true);
}
);
})

}
try {
if (!connected) {
init();
}
} catch (error) {
console.log(error);

}
getGlucoseLevel();

const interval = setInterval(() => {
getGlucoseLevel();
}, MINUTE_MS);

return () => clearInterval(interval);

}, []);

return (





A.R.T.H.U.R.
A Robot That's Helpful Unless Rude







{timers.map(t => (


removeTimer(t.id)}
/>


))}







);
}

export default App;


Подробнее здесь: https://stackoverflow.com/questions/798 ... -react-app