Error using @tensorflow-models/qna: TypeError: context.trim is not a function

Question

I am working on a React app that uses the TensorFlow QnA model to generate study cards based on user input. I have implemented a form in which the user can enter a question, and upon submission, the app should use the QnA model to generate an answer and create a new study card with the question and answer.

However, when I try to submit the form, I am getting the following error: “TypeError: context.trim is not a function”. After some investigation, I determined that this error is occurring in the QnA model’s process function, which is called by the findAnswers function.

Here is the relevant code for the form submission and the use of the QnA model:

import * as qna from "@tensorflow-models/qna";
import * as tf from "@tensorflow/tfjs";

//...

const [qnaModel, setQnAModel] = useState(null);

//...

const handleInputChange = (event) => {
    setInput(event.target.value.toString());
  };

// ...

 const handleInputSubmit = async (event) => {
    event.preventDefault();
    if (qnaModel) {
      // Make sure that the `context` parameter is a string
      let context = String(input).trim();

      // model => ready
      console.log(typeof context);
      const answers = await qnaModel.findAnswers(context, 1);
      console.log(answers[0].question); 
      console.log(answers[0].answer); 

      setCards([
        ...cards,
        { question: answers[0].question, answer: answers[0].answer },
      ]);
    } else {
      // The qnaModel is not ready yet, so you should not try to use it
      console.error("qnaModel is not ready yet");
    }
  };

I have verified that the context variable is indeed a string by logging its type to the console. However, the error is still occurring.

Has anyone else encountered this error or have any ideas on how to fix it? Any help would be greatly appreciated!

Thanks in advance.

Answer 1

According to the documentation, the reason you're seeing that error is because you're not passing the right parameters to findAnswers. The format should be the following:

const answers = await model.findAnswers(question, passage);

where there first parameter is the question being asked and the second parameter is the passage from which the question is based. Right now you're passing just the number 1 as the passage.

The documentation provides the following example:

const passage = "Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple, and Facebook. Google was founded in September 1998 by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University in California. Together they own about 14 percent of its shares and control 56 percent of the stockholder voting power through supervoting stock. They incorporated Google as a California privately held company on September 4, 1998, in California. Google was then reincorporated in Delaware on October 22, 2002. An initial public offering (IPO) took place on August 19, 2004, and Google moved to its headquarters in Mountain View, California, nicknamed the Googleplex. In August 2015, Google announced plans to reorganize its various interests as a conglomerate called Alphabet Inc. Google is Alphabet's leading subsidiary and will continue to be the umbrella company for Alphabet's Internet interests. Sundar Pichai was appointed CEO of Google, replacing Larry Page who became the CEO of Alphabet."
const question = "Who is the CEO of Google?"
const model = await qna.load();
const answers = await model.findAnswers(question, passage);
console.log(answers);

Also note that the format in which you're trying to access the answer (answers[0].question) doesn't alight to the result you will get. The above documentation example logs the following result:

[{
  text: "Sundar Pichai",
  startIndex: 1143,
  endIndex: 1156,
  score: 0.8380282521247864
}]

Based on the way your code is written, if you want to access the answer, you would use answers[0].text.