Jsmc boolean demo

src/applications/qa/index.js

@@ -63,6 +63,9 @@ async function ask(
           title: entry.document.title,
           url: entry.document.url,
           confidenceScore: entry.answer.confidence_score,
+          question_type_prediction: entry.answer.question_type_prediction,
+          boolean_answer_prediction: entry.answer.boolean_answer_prediction,
+          display_each_boolean_answer: true
         });
       });
     }

src/applications/reading/index.js

@@ -57,6 +57,9 @@ async function read(
           startCharOffset: answer.start_char_offset,
           endCharOffset: answer.end_char_offset,
           confidenceScore: answer.confidence_score,
+          question_type_prediction: answer.question_type_prediction,
+          boolean_answer_prediction: answer.boolean_answer_prediction,
+          display_each_boolean_answer: false
         });
       });
     }
@@ -124,7 +127,7 @@ function Reading({ application, showSettings }) {
           {application.description}
         </div>
         <div className="application__content">
-          <h4>What would you like to know?</h4>
+          <h4>What would you like to know? (boolean or factoid question)</h4>
           <div className="reading__input">
             <TextArea
               labelText="Context"

src/components/answers/index.js

@@ -252,6 +252,59 @@ async function postFeedback(
   }
 }
 
+/* allows us to control the highlighting of yes/no in both reading and qa
+   note that no_answer will be highlighted like no if it occurs */
+function YesNoAnswer({boolean_answer_prediction}) {
+  return (
+    <React.Fragment>
+      {boolean_answer_prediction.toLowerCase()=="yes" ?
+        <b className="answers--item__context--yesanswer">
+          {boolean_answer_prediction}
+        </b>
+        :
+        <b className="answers--item__context--noanswer">
+          {boolean_answer_prediction}
+        </b>
+      }
+    </React.Fragment>
+  )
+}
+
+function AnswersSummary({answersWithFeedback}) {
+  return (
+    <React.Fragment>
+      <div className="answers--details">
+        <h6>
+        {answersWithFeedback[0].question_type_prediction==null &&
+          <p>Found {answersWithFeedback.length} answers matching your question..</p>
+        }
+        {answersWithFeedback[0].question_type_prediction!=null &&
+          <div>
+            <p> Your question is a <b className="answers--item__context--highlight">
+              {answersWithFeedback[0].question_type_prediction}
+              </b> question
+            </p>
+            {answersWithFeedback[0].question_type_prediction!='boolean' &&
+              <p>Found {answersWithFeedback.length} answers matching your question..</p>
+            }
+            {answersWithFeedback[0].question_type_prediction=='boolean' &&
+              <div>
+                <p>Found {answersWithFeedback.length} evidence spans answering your question..</p>
+                <p>The best answer is {" "}
+                  {(<YesNoAnswer boolean_answer_prediction={answersWithFeedback[0].boolean_answer_prediction}>
+                  </YesNoAnswer>
+                  )} .
+                </p>
+              </div>
+            }
+          </div>
+        }
+        </h6>
+      </div>
+    </React.Fragment>
+  )
+}
+
 function Answers({ question, answers, loading, source }) {
   const [answersWithFeedback, setAnswersWithFeedback] = useState([]);
 
@@ -275,11 +328,10 @@ function Answers({ question, answers, loading, source }) {
     <React.Fragment>
       {!loading && !_.isEmpty(answersWithFeedback) ? (
         <React.Fragment>
-          <div className="answers--details">
-            <h6>
-              Found {answersWithFeedback.length} answers matching your question.
-            </h6>
-          </div>
+          {/* found 3 answers, your question is boolean etc */}
+          {(<AnswersSummary answersWithFeedback={answersWithFeedback}>
+          </AnswersSummary>
+          )}
           <div className="answers--items">
             {answersWithFeedback.map((answerWithFeedback, index) => {
               return (
@@ -288,7 +340,21 @@ function Answers({ question, answers, loading, source }) {
                   key={"answer--item-" + index}
                   className="answers--item"
                 >
-                  <h6>Answer</h6>
+                <h6>
+                  {answersWithFeedback[0].question_type_prediction=="boolean" &&
+                  <div>
+                    <p>Evidence span: {answerWithFeedback.display_each_boolean_answer &&
+                    <div>{(<YesNoAnswer boolean_answer_prediction={answerWithFeedback.boolean_answer_prediction}>
+                          </YesNoAnswer>
+                        )}
+                      </div>
+                    }</p>
+                  </div>
+                  }
+                  {answersWithFeedback[0].question_type_prediction!="boolean" && <div><p>Answer</p></div>}
+                </h6>
+
+
                   <div className="answers--item__content">
                     <div className="answers--item__content--left">
                       <span>{answerWithFeedback.text}</span>
@@ -322,11 +388,11 @@ function Answers({ question, answers, loading, source }) {
                     <div className="answers--item__content--right">
                       {!_.isNil(answerWithFeedback.confidenceScore) ? (
                         <div className="answers--item__confidence">
-                          Score (out of 100):
+                          Score:
                           <span>
                             {Math.round(
                               answerWithFeedback.confidenceScore * 100
-                            )}
+                            )} / 100
                           </span>
                         </div>
                       ) : null}

src/components/answers/styles.scss

@@ -126,6 +126,16 @@
         background-color: $blue-20;
       }
 
+      &--yesanswer {
+        font-weight: 600;
+        background-color: $green-20;
+      }
+
+      &--noanswer {
+        font-weight: 600;
+        background-color: $yellow-20;
+      }
+
       .cds--accordion__item {
         border-top: none;
         margin-top: 10px;