Spaces:
Runtime error
Runtime error
File size: 3,245 Bytes
4000467 ce686de 4000467 ce686de 4000467 69dd4c4 ce686de 69dd4c4 4000467 ce686de 4000467 ce686de 4000467 69dd4c4 4000467 ce686de 4000467 ce686de 8e5bbc6 4000467 ce686de 4000467 ce686de 4000467 ce686de 4000467 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 |
import { HlList, HlLayerContainer, HlLayer } from 'react-transformer-qa-decode-visualize'
import 'react-transformer-qa-decode-visualize/dist/index.css'
import { useState } from 'react'
const axios = require('axios').default;
function App() {
const [qa_data, set_qa_data] = useState([[]])
const [question, set_question] = useState("What's my name?")
const [context, set_context] = useState("My name is Clara and I live in Berkeley.")
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)
})
}
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='yellow' />
<hr />
</div>
<h4>Context</h4>
<HlLayerContainer
context={context}>
<HlLayer
data={{
result: stride_qa_data,
context: context
}}
color='yellow'
/>
<HlLayer
data={{
result: stride_qa_data.slice(0, 1),
context: context
}}
color='orange'
/>
</HlLayerContainer >
</div>
)
})
}
</div>
);
}
export default App;
|