Spaces:
Runtime error
Runtime error
File size: 5,431 Bytes
4000467 8c2fd38 f8d6039 4000467 8c2fd38 4000467 8c2fd38 805d055 8c2fd38 ce686de 8c2fd38 563b0ac 8c2fd38 563b0ac 8c2fd38 ce686de 8c2fd38 4000467 8c2fd38 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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
import { HlList, HlLayerContainer, HlLayer } from 'react-transformer-qa-decode-visualize'
import 'react-transformer-qa-decode-visualize/dist/index.css'
import { useState, useEffect, useCallback } from 'react'
import _ from "lodash";
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).")
const [is_wait_for_data, set_is_wait_for_data] = useState(true)
let request_qa_data = (e, _question = question, _context = context) => {
set_is_wait_for_data(true)
const { REACT_APP_IN_DEV = 'false' } = process.env;
let api_url = 'https://p208p2002-transformer-qa-decode-visualize.hf.space/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)
set_is_wait_for_data(false)
})
}
useEffect(() => {
request_qa_data(undefined, question, context) // eslint-disable-next-line
}, [])
// eslint-disable-next-line
const debounce = useCallback(
_.debounce((e,q,c) => {
request_qa_data(e, q,c)
}, 250),
[]
);
return (
<div style={{ width: 800, padding: 20 }}>
<h4>Question</h4>
<input
style={{ width: 600 }}
type="text"
value={question}
onChange={(e) => {
set_is_wait_for_data(true)
set_question(e.target.value)
debounce(e,e.target.value,context)
}}
/>
<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 />
<div className="show-result" key={JSON.stringify(qa_data)}>
{
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>
{is_wait_for_data ? <p style={{height:100,margin:0}}>Loading...</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>
</div>
);
}
export default App;
|