Spaces:

p208p2002
/

Transformer-QA-Decode-Visualize

Runtime error

App Files Files Community

p208p2002 commited on Oct 5, 2022

Commit

ce686de

•

1 Parent(s): 8e5bbc6

Update

Browse files

Files changed (9) hide show

react-qa/build/asset-manifest.json +3 -3
react-qa/build/index.html +1 -1
react-qa/build/static/js/{main.a8f287a8.js → main.2f618c79.js} +0 -0
react-qa/build/static/js/{main.a8f287a8.js.LICENSE.txt → main.2f618c79.js.LICENSE.txt} +0 -0
react-qa/build/static/js/{main.a8f287a8.js.map → main.2f618c79.js.map} +0 -0
react-qa/package.json +1 -1
react-qa/src/App.js +73 -44
react-qa/src/index.js +0 -2
server.py +1 -1

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

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.94510c01.css",
-    "main.js": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.a8f287a8.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.94510c01.css.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.94510c01.css.map",
-    "main.a8f287a8.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.a8f287a8.js.map",
     "787.e7ee5088.chunk.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/787.e7ee5088.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.94510c01.css",
-    "static/js/main.a8f287a8.js"
   ]
 }

 {
   "files": {
     "main.css": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.94510c01.css",
+    "main.js": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.2f618c79.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.94510c01.css.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.94510c01.css.map",
+    "main.2f618c79.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/main.2f618c79.js.map",
     "787.e7ee5088.chunk.js.map": "/embed/p208p2002/Transformer-QA-Decode-Visualize/static/js/787.e7ee5088.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.94510c01.css",
+    "static/js/main.2f618c79.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.~~a8f287a8~~.js"></script><link href="/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.94510c01.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.2f618c79.js"></script><link href="/embed/p208p2002/Transformer-QA-Decode-Visualize/static/css/main.94510c01.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.a8f287a8.js → main.2f618c79.js} RENAMED Viewed

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

react-qa/build/static/js/{main.a8f287a8.js.LICENSE.txt → main.2f618c79.js.LICENSE.txt} RENAMED Viewed

File without changes

react-qa/build/static/js/{main.a8f287a8.js.map → main.2f618c79.js.map} RENAMED Viewed

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

react-qa/package.json CHANGED Viewed

@@ -15,7 +15,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "start": "export REACT_APP_IN_DEV=true && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

react-qa/src/App.js CHANGED Viewed

@@ -1,15 +1,20 @@
 import { HlList, HlLayerContainer, HlLayer } from 'react-transformer-qa-decode-visualize'
 import 'react-transformer-qa-decode-visualize/dist/index.css'
-import { useEffect, 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 = () => {
-    axios.post('https://hf.space/embed/p208p2002/Transformer-QA-Decode-Visualize/question-answer',{
       question,
       context
     })
@@ -23,31 +28,35 @@ function App() {
     <div style={{ width: 800, padding: 20 }}>
       <h4>Question</h4>
-      <input
-        style={{ width: 600 }}
-        type="text"
         value={question}
-        onChange={(e)=>{
           set_question(e.target.value)
-          set_qa_data([[]])
         }}
-        />
       <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
@@ -55,36 +64,56 @@ function App() {
       <br />
       <hr />
-      <div>
-        <h4>Transformer QA Model</h4>
-        <p>{question}</p>
-        <HlList
-          data={{
-            result: qa_data[0].slice(0, 5)
-          }}
-          color='yellow' />
-        <hr />
-      </div>
-      <h4>Context</h4>
-      <HlLayerContainer
-        context={context}>
-        <HlLayer
-          data={{
-            result: qa_data[0].slice(0, 5),
-            context: context
-          }}
-          color='yellow'
-        />
-         <HlLayer
-          data={{
-            result: qa_data[0].slice(0, 1),
-            context: context
-          }}
-          color='orange'
-        />
-      </HlLayerContainer >
     </div>
   );

 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 = () => {
+    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,
       context
     })
     <div style={{ width: 800, padding: 20 }}>
       <h4>Question</h4>
+      <input
+        style={{ width: 600 }}
+        type="text"
         value={question}
+        onChange={(e) => {
           set_question(e.target.value)
+          // set_qa_data([[]])
+          setTimeout(() => {
+            request_qa_data()
+          }, 20);
         }}
+      />
       <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
       <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>
   );

react-qa/src/index.js CHANGED Viewed

@@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 // If you want to start measuring performance in your app, pass a function

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     <App />
 );
 // If you want to start measuring performance in your app, pass a function

server.py CHANGED Viewed

@@ -9,7 +9,7 @@ from pydantic import BaseModel
 tokenizer = AutoTokenizer.from_pretrained("deepset/roberta-base-squad2")
 model = AutoModelForQuestionAnswering.from_pretrained("deepset/roberta-base-squad2")
-qahl = TransformerQADecode(model=model, tokenizer=tokenizer)
 app = FastAPI()
 app.mount("/static", StaticFiles(directory="react-qa/build/static"), name="static")

 tokenizer = AutoTokenizer.from_pretrained("deepset/roberta-base-squad2")
 model = AutoModelForQuestionAnswering.from_pretrained("deepset/roberta-base-squad2")
+qahl = TransformerQADecode(model=model, tokenizer=tokenizer, is_squad_v2=True)
 app = FastAPI()
 app.mount("/static", StaticFiles(directory="react-qa/build/static"), name="static")