Spaces:

p208p2002
/

Transformer-QA-Decode-Visualize

Runtime error

App Files Files Community

p208p2002 commited on Oct 26, 2022

Commit

8c2fd38

1 Parent(s): 20a2635

debounce

Browse files

Files changed (8) hide show

react-qa/build/asset-manifest.json +3 -3
react-qa/build/index.html +1 -1
react-qa/build/static/js/main.3fe1a009.js +0 -0
react-qa/build/static/js/{main.564be008.js.LICENSE.txt → main.3fe1a009.js.LICENSE.txt} +9 -0
react-qa/build/static/js/main.3fe1a009.js.map +0 -0
react-qa/build/static/js/main.564be008.js +0 -0
react-qa/build/static/js/main.564be008.js.map +0 -0
react-qa/src/App.js +126 -109

react-qa/build/asset-manifest.json CHANGED Viewed

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.572222cd.css",
-    "main.js": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.564be008.js",
     "static/js/787.e7ee5088.chunk.js": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/787.e7ee5088.chunk.js",
     "index.html": "/embed/p208p2002/Transformer-QA-Decode-Visualize/index.html",
     "main.572222cd.css.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.572222cd.css.map",
-    "main.564be008.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.564be008.js.map",
     "787.e7ee5088.chunk.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/787.e7ee5088.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.572222cd.css",
-    "static/js/main.564be008.js"
   ]
 }

 {
   "files": {
     "main.css": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.572222cd.css",
+    "main.js": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.3fe1a009.js",
     "static/js/787.e7ee5088.chunk.js": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/787.e7ee5088.chunk.js",
     "index.html": "/embed/p208p2002/Transformer-QA-Decode-Visualize/index.html",
     "main.572222cd.css.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.572222cd.css.map",
+    "main.3fe1a009.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.3fe1a009.js.map",
     "787.e7ee5088.chunk.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/787.e7ee5088.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.572222cd.css",
+    "static/js/main.3fe1a009.js"
   ]
 }

react-qa/build/index.html CHANGED Viewed

@@ -1 +1 @@

- <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/embed/p208p2002/Transformer-QA-Decode-Visualize/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/embed/p208p2002/Transformer-QA-Decode-Visualize/logo192.png"/><link rel="manifest" href="/embed/p208p2002/Transformer-QA-Decode-Visualize/manifest.json"/><title>React App</title><script defer="defer" src="/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.~~564be008~~.js"></script><link href="/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.572222cd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

+ <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/embed/p208p2002/Transformer-QA-Decode-Visualize/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/embed/p208p2002/Transformer-QA-Decode-Visualize/logo192.png"/><link rel="manifest" href="/embed/p208p2002/Transformer-QA-Decode-Visualize/manifest.json"/><title>React App</title><script defer="defer" src="/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.3fe1a009.js"></script><link href="/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.572222cd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

react-qa/build/static/js/main.3fe1a009.js ADDED Viewed

The diff for this file is too large to render. See raw diff

react-qa/build/static/js/{main.564be008.js.LICENSE.txt → main.3fe1a009.js.LICENSE.txt} RENAMED Viewed

@@ -4,6 +4,15 @@ object-assign
 @license MIT
 */
 /**
  * @license React
  * react-dom.production.min.js

 @license MIT
 */
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
 /**
  * @license React
  * react-dom.production.min.js

react-qa/build/static/js/main.3fe1a009.js.map ADDED Viewed

The diff for this file is too large to render. See raw diff

react-qa/build/static/js/main.564be008.js DELETED Viewed

The diff for this file is too large to render. See raw diff

react-qa/build/static/js/main.564be008.js.map DELETED Viewed

The diff for this file is too large to render. See raw diff

react-qa/src/App.js CHANGED Viewed

@@ -1,124 +1,141 @@
 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;

 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://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)
+                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) => {
+            request_qa_data(e, e.target.value)
+        }, 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)
+                }}
+            />
+            <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;