Spaces:
Runtime error
Runtime error
File size: 3,844 Bytes
4000467 f8d6039 4000467 8d04fd0 f8d6039 4000467 69dd4c4 ce686de 69dd4c4 4000467 f8d6039 4000467 ce686de 4000467 ce686de 4000467 69dd4c4 4000467 ce686de 4000467 ce686de 8e5bbc6 4000467 ce686de 4000467 ce686de 4000467 ce686de 4000467 ce686de f8d6039 ce686de f8d6039 ce686de f8d6039 ce686de 4000467 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
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;
|