React.js中Bert QnA模型无法返回回答的问题求助

基于React.js搭建基础问答应用，按教程完成代码编写后，输入段落Internet is good和问题How is internet?，调用model.findAnswers()后返回结果始终为空数组[]，相关代码如下：

import { useRef, useEffect, useState } from 'react';
import * as tf from '@tensorflow/tfjs';
import * as qna from '@tensorflow-models/qna';

function App() {
  const [model, setModel] = useState(null);
  const [answer, setAnswer] = useState([]);

  const [passage, setPassage] = useState('');
  const [question, setQuestion] = useState('');

  const loadModel = async () => {
    const loadedModel = await qna.load();
    setModel(loadedModel);
  };

  useEffect(() => {
    loadModel();
  }, []);

  const answerQuestions = async (e) => {
    if (e.which === 13 && model !== null) {
      const answers = await model.findAnswers(passage, question);
      setAnswer(answers);
      console.log(answers); // Always []
    }
  };

  return (
    <div className='App'>
      <header className='App-header'>
        {model !== null ? (
          <div>
            <div>
              <div>Passage</div>
              <textarea
                onChange={(e) => {
                  setPassage(e.target.value);
                }}
                className='border border-black'
                row='30'
                cols='100'
              ></textarea>
            </div>
            <div>
              <div>Ask question</div>
              <input
                onChange={(e) => {
                  setQuestion(e.target.value);
                }}
                type='text'
                className='border border-black'
                onKeyPress={answerQuestions}
              />
            </div>
          </div>
        ) : (
          <div>Loading..</div>
        )}
        {answer.length > 0 && (
          <div>
            {answer.map((e) => {
              return <div>{e.text}</div>;
            })}
          </div>
        )}
      </header>
    </div>
  );
}

export default App;

1. 降低模型置信度阈值 #

TensorFlow QnA模型默认的置信度阈值较高，短段落的匹配结果容易因置信度不足被过滤。调用findAnswers时手动设置threshold参数降低阈值，比如设为0.1：

const answers = await model.findAnswers(passage, question, { threshold: 0.1 });

2. 优化问题表述 #

模型更擅长匹配能从段落中提取精确片段的提问，将原问题How is internet?调整为更贴合段落内容的表述，比如：

• What is the internet like?
• Is the internet good?

3. 修正textarea属性错误 #

代码中textarea的row属性应为复数rows，否则可能导致输入区域显示异常，影响内容输入：

<textarea
  onChange={(e) => {
    setPassage(e.target.value);
  }}
  className='border border-black'
  rows='30'
  cols='100'
></textarea>

修复后的完整代码 #

import { useEffect, useState } from 'react';
import * as tf from '@tensorflow/tfjs';
import * as qna from '@tensorflow-models/qna';

function App() {
  const [model, setModel] = useState(null);
  const [answer, setAnswer] = useState([]);

  const [passage, setPassage] = useState('');
  const [question, setQuestion] = useState('');

  const loadModel = async () => {
    const loadedModel = await qna.load();
    setModel(loadedModel);
  };

  useEffect(() => {
    loadModel();
  }, []);

  const answerQuestions = async (e) => {
    if (e.which === 13 && model !== null) {
      const answers = await model.findAnswers(passage, question, { threshold: 0.1 });
      setAnswer(answers);
      console.log(answers);
    }
  };

  return (
    <div className='App'>
      <header className='App-header'>
        {model !== null ? (
          <div>
            <div>
              <div>Passage</div>
              <textarea
                onChange={(e) => setPassage(e.target.value)}
                className='border border-black'
                rows='30'
                cols='100'
              ></textarea>
            </div>
            <div>
              <div>Ask question</div>
              <input
                onChange={(e) => setQuestion(e.target.value)}
                type='text'
                className='border border-black'
                onKeyPress={answerQuestions}
              />
            </div>
          </div>
        ) : (
          <div>Loading..</div>
        )}
        {answer.length > 0 && (
          <div>
            {answer.map((item, index) => (
              <div key={index}>{item.text}</div>
            ))}
          </div>
        )}
      </header>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Mateja