react-qa/src/App.js

import { HlList, HlLayerContainer, HlLayer } from 'react-transformer-qa-decode-visualize'
import 'react-transformer-qa-decode-visualize/dist/index.css'
import { useState,useEffect } from 'react'

const axios = require('axios').default;
function App() {

  const [qa_data, set_qa_data] = useState([[]])
  const [question, set_question] = useState("Who is the bad guy ?")
  const [context, set_context] = useState("Harry Potter is a series of seven fantasy novels written by British author J. K. Rowling. The novels chronicle the lives of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's struggle against Lord Voldemort, a dark wizard who intends to become immortal, overthrow the wizard governing body known as the Ministry of Magic and subjugate all wizards and Muggles (non-magical people).")

  let request_qa_data = (e,_question=question,_context=context) => {
    const { REACT_APP_IN_DEV = 'false' } = process.env;
    let api_url = 'https://hf.space/embed/p208p2002/Transformer-QA-Decode-Visualize/question-answer'
    if (REACT_APP_IN_DEV === 'true') {
      api_url = 'http://127.0.0.1:7860/question-answer'
    }
    axios.post(api_url, {
      question:_question,
      context:_context
    })
      .then(function (response) {
        console.log(response.data)
        set_qa_data(response.data)
      })
  }

  
  useEffect(()=>{
    request_qa_data(undefined,question,context)  // eslint-disable-next-line
  },[])

  return (
    <div style={{ width: 800, padding: 20 }}>

      <h4>Question</h4>
      <input
        style={{ width: 600 }}
        type="text"
        value={question}
        onChange={(e) => {
          set_question(e.target.value)
          request_qa_data(e,e.target.value)
        }}
      />
      <br />
      <h4>Context</h4>
      <textarea
        name=""
        id=""
        cols="80"
        rows="8"
        value={context}
        onChange={(e) => {
          set_context(e.target.value)
          set_qa_data([[]])
        }}
      />

      <br /><br />
      <button
        type="submit"
        onClick={request_qa_data}
      >Submit
      </button>

      <br />
      <hr />
      {
        qa_data.map((stride_qa_data, i) => {
          stride_qa_data = stride_qa_data.slice(0, 5)
          stride_qa_data = stride_qa_data.map((data) => {
            
            if (data.global_context_start === 0 && data.global_context_end === 0) {
              data.answer_span = "** NO_ANSWER **"
            }
            const answer_text = data.answer_span 
            data.answer_span = `logit:${data.start_logit.toFixed(2)},  ${data.end_logit.toFixed(2).padStart(4)} - ${answer_text}`
          
            return data
          })
          return (
            <div key={i}>
              <div>
                <h4>Transformer QA Model <small>(stride: {i + 1})</small></h4>
                <p>{question}</p>

                <HlList
                  data={{
                    result: stride_qa_data
                  }}
                  color='#fc7703' />
                <hr />
              </div>

              <h4>Context</h4>
              <HlLayerContainer
                context={context}>
                <HlLayer
                  data={{
                    result: stride_qa_data,
                    context: context
                  }}
                  color='#fc7703'
                />
                <HlLayer
                  data={{
                    result: stride_qa_data.slice(0, 1),
                    context: context
                  }}
                  color='red'
                />
              </HlLayerContainer >
            </div>
          )
        })
      }


    </div>
  );
}

export default App;