From 5b78105212677c4c6f07d60a94296f7719ec7807 Mon Sep 17 00:00:00 2001
From: Xavier Fernandes <fernandes.praphat@gmail.com>
Date: Wed, 26 May 2021 10:41:39 -0700
Subject: [PATCH] Sorting and filtering with descending by default

---
 README.md                                     |  2 +-
 frontend/MainContainer.tsx                    |  3 +-
 .../components/PerspectiveScoresBarChart.tsx  | 40 ++++++--
 frontend/components/TextGenerationControl.tsx | 26 ++---
 frontend/components/TextGenerationResults.tsx | 94 ++++++++++++++-----
 transformerviz/helpers/utils.py               | 83 ++++++++++++++--
 transformerviz/server.py                      | 13 ++-
 7 files changed, 206 insertions(+), 55 deletions(-)

diff --git a/README.md b/README.md
index 54d6130..1c9cd73 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,6 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 
 ## Running
 
-- `PERSPECTIVE_API_KEY=<perspective-api-key> TRANSFORMERS_CACHE=<path-to-transformers-cache> FLASK_APP=transformerviz/server.py flask run --host 0.0.0.0 --port 5000` (The `TRANSFORMERS_CACHE` environment variable is optional).
+- `PERSPECTIVE_API_KEY=<perspective-api-key> GPT2_MODEL_VERSION=<gpt2-model-version> NUM_RETURN_SEQUENCES=<number-of-return-sequences> TRANSFORMERS_CACHE=<path-to-transformers-cache> FLASK_APP=transformerviz/server.py flask run --host 0.0.0.0 --port 5000` (The `TRANSFORMERS_CACHE` environment variable is optional).
 - Point your browser to port 5000 of the server on which the app is running.
 
diff --git a/frontend/MainContainer.tsx b/frontend/MainContainer.tsx
index 5f5b466..c729e0d 100644
--- a/frontend/MainContainer.tsx
+++ b/frontend/MainContainer.tsx
@@ -69,7 +69,8 @@ const Container: React.FunctionComponent<ContainerProps> = ({
             loading={loading}
             error={error}
             onSelectTextId={selectText}
-            selectedTextIds={selectedTextIds} />
+            selectedTextIds={selectedTextIds}
+          />
           {getDetailedAnalysisComponent()}
         </div>
       </div>
diff --git a/frontend/components/PerspectiveScoresBarChart.tsx b/frontend/components/PerspectiveScoresBarChart.tsx
index 1eadd10..b31350a 100644
--- a/frontend/components/PerspectiveScoresBarChart.tsx
+++ b/frontend/components/PerspectiveScoresBarChart.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import * as d3 from "d3";
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import AnalyzedText from "../models/AnalyzedText";
 
 
 type PerspectiveScoresBarChartState = {
@@ -12,8 +13,8 @@ type PerspectiveScoresBarChartState = {
 type PerspectiveScoresBarChartProps = {
   id: number,
   width: number,
-  scores: any,
-  defaultSelectedScore: string
+  defaultSelectedScore: string,
+  analyzedText: AnalyzedText
 }
 
 class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps, PerspectiveScoresBarChartState> {
@@ -41,6 +42,12 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
     this.createDistributionBarChart();
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      selectedScore: nextProps.defaultSelectedScore
+    });
+  }
+
   setSelectedScore = (selectedScore: string) => {
     this.setState({
       selectedScore: selectedScore
@@ -51,6 +58,23 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
     var _this = this;
     var body = d3.select(this.node.current);
 
+    const getResultScoreObj: any = (item: any) => {
+      let resultScores = [
+        {label: "toxicity", value: item.toxicity, scoreName: "Toxicity"},
+        {label: "severeToxicity", value: item.severeToxicity, scoreName: "Severe Toxicity"},
+        {label: "identityAttack", value: item.identityAttack, scoreName: "Identity Attack"},
+        {label: "insult", value: item.insult, scoreName: "Insult"},
+        {label: "profanity", value: item.profanity, scoreName: "Profanity"},
+        {label: "threat", value: item.threat, scoreName: "Threat"},
+        {label: "sexuallyExplicit", value: item.sexuallyExplicit, scoreName: "Sexually Explicit"},
+        {label: "flirtation", value: item.flirtation, scoreName: "Flirtation"}
+      ];
+
+      return resultScores;
+    }
+
+    var scores = getResultScoreObj(this.props.analyzedText);
+
     var margin = { top: 5, right: 15, bottom: 50, left: 55 }
     var h = 111 - margin.top - margin.bottom
     var w = this.props.width;
@@ -69,10 +93,10 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
     var g = svg.append("g")
                .attr("transform", "translate(0," + margin.top + ")");
 
-    xScale.domain(this.props.scores.map(function(d) { return d.score; }));
+    xScale.domain(scores.map(function(d) { return d.label; }));
     yScale.domain([0.0, 1.0]);
 
-    var selectedScoreObj = this.props.scores.filter(scoreObj => (scoreObj.score == this.state.selectedScore))[0];
+    var selectedScoreObj = scores.filter(scoreObj => (scoreObj.label == this.state.selectedScore))[0];
     var selectedScoreMessage = `${selectedScoreObj.scoreName}: ${selectedScoreObj.value.toFixed(2)}`;
 
     g.append("g")
@@ -86,16 +110,16 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
      .text(selectedScoreMessage);
 
     g.selectAll(".bar")
-     .data(this.props.scores)
+     .data(scores)
      .enter().append("rect")
      .attr("class", "bar")
-     .attr("x", function(d) { return xScale(d.score); })
+     .attr("x", function(d) { return xScale(d.label); })
      .attr("y", function(d) { return yScale(d.value); })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return h - yScale(d.value); })
-     .classed("highlighted-bar", function(d) { return d.score == _this.state.selectedScore })
+     .classed("highlighted-bar", function(d) { return d.label == _this.state.selectedScore })
      .on("click", function(d) {
-       _this.setSelectedScore(d.score);
+       _this.setSelectedScore(d.label);
      });
   }
 
diff --git a/frontend/components/TextGenerationControl.tsx b/frontend/components/TextGenerationControl.tsx
index 7146a9b..8612b86 100644
--- a/frontend/components/TextGenerationControl.tsx
+++ b/frontend/components/TextGenerationControl.tsx
@@ -47,18 +47,20 @@ class TextGenerationControl extends React.Component<
   }
 
   generateTextClickHandler = () => {
-    this.props.generateText({
-      prompt: this.state.textGenerationPrompt,
-      model: this.state.model,
-      do_sample: this.state.doSample,
-      early_stopping: this.state.earlyStopping,
-      min_length: this.state.minLength,
-      max_length: this.state.maxLength,
-      top_k: this.state.topK,
-      top_p: this.state.topP,
-      temperature: this.state.temperature,
-      num_beams: this.state.numBeams,
-    });
+    if (this.state.textGenerationPrompt.trim().length != 0) {
+      this.props.generateText({
+        prompt: this.state.textGenerationPrompt,
+        model: this.state.model,
+        do_sample: this.state.doSample,
+        early_stopping: this.state.earlyStopping,
+        min_length: this.state.minLength,
+        max_length: this.state.maxLength,
+        top_k: this.state.topK,
+        top_p: this.state.topP,
+        temperature: this.state.temperature,
+        num_beams: this.state.numBeams,
+      });
+    }
   };
 
   onTextPromptChange = (evt) => {
diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index 4cc0812..f1f5d0d 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -11,13 +11,66 @@ type TextGenerationResultsProps = {
   error?: any
 }
 
-class TextGenerationResults extends React.Component<TextGenerationResultsProps, null> {
+type TextGenerationResultsState = {
+  analysisResults: AnalyzedText[],
+  highlightScoreLabel: string,
+  sortByLabel: string
+}
+
+class TextGenerationResults extends React.Component<TextGenerationResultsProps, TextGenerationResultsState> {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      analysisResults: props.analysisResults,
+      highlightScoreLabel: "toxicity",
+      sortByLabel: "none"
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      analysisResults: nextProps.analysisResults
+    });
+  }
+
+  sortGeneratedTextResults(scoreLabel) {
+    if (scoreLabel == "none") {
+      this.setState({
+        sortByLabel: scoreLabel,
+        analysisResults: this.props.analysisResults
+      });
+    } else {
+      const sortedAnalysisResults = this.state.analysisResults.map((result) => result).sort((resultA, resultB) => {
+        if (resultA[scoreLabel] < resultB[scoreLabel]) {
+          return -1;
+        } else if (resultA[scoreLabel] == resultB[scoreLabel]) {
+          return 0;
+        } else {
+          return 1;
+        }
+      });
+
+      this.setState({
+        sortByLabel: scoreLabel,
+        analysisResults: sortedAnalysisResults
+      });
+    }
+  }
+
+  setHighlightedScoreLabel(scoreLabel) {
+    if (scoreLabel != this.state.highlightScoreLabel) {
+      this.setState({
+        analysisResults: this.props.analysisResults,
+        highlightScoreLabel: scoreLabel,
+        sortByLabel: "none"
+      });
+    }
   }
 
   render() {
+    console.log(this.state);
 
     if (this.props.error != null) {
       return (
@@ -34,41 +87,26 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       );
     }
 
-    const getResultScoreObj: any = (item: any) => {
-      let resultScores = [
-        {score: "TOXICITY", value: item.toxicity, scoreName: "Toxicity"},
-        {score: "SEVERE_TOXICITY", value: item.severeToxicity, scoreName: "Severe Toxicity"},
-        {score: "IDENTITY_ATTACK", value: item.identityAttack, scoreName: "Identity Attack"},
-        {score: "INSULT", value: item.insult, scoreName: "Insult"},
-        {score: "PROFANITY", value: item.profanity, scoreName: "Profanity"},
-        {score: "THREAT", value: item.threat, scoreName: "Threat"},
-        {score: "SEXUALLY_EXPLICIT", value: item.sexuallyExplicit, scoreName: "Sexually Explicit"},
-        {score: "FLIRTATION", value: item.flirtation, scoreName: "Flirtation"}
-      ];
-
-      return resultScores;
-    }
-
     const sortOptions: IComboBoxOption[] = [
+      { key: 'none', text: 'None'},
       { key: 'toxicity', text: 'Toxicity' },
-      { key: 'severe', text: 'Severe Toxicity' },
+      { key: 'severeToxicity', text: 'Severe Toxicity' },
       { key: 'identity', text: 'Identity Attack' },
       { key: 'insult', text: 'Insult' },
       { key: 'profanity', text: 'Profanity' },
       { key: 'threat', text: 'Threat' },
-      { key: 'sexually', text: 'Sexually Explicit' },
+      { key: 'sexuallyExplicit', text: 'Sexually Explicit' },
       { key: 'flirtation', text: 'Flirtation' },
     ];
 
     const scoreOptions: IComboBoxOption[] = [
-      { key: 'all', text: 'All Scores' },
       { key: 'toxicity', text: 'Toxicity' },
-      { key: 'severe', text: 'Severe Toxicity' },
-      { key: 'identity', text: 'Identity Attack' },
+      { key: 'severeToxicity', text: 'Severe Toxicity' },
+      { key: 'identityAttack', text: 'Identity Attack' },
       { key: 'insult', text: 'Insult' },
       { key: 'profanity', text: 'Profanity' },
       { key: 'threat', text: 'Threat' },
-      { key: 'sexually', text: 'Sexually Explicit' },
+      { key: 'sexuallyExplicit', text: 'Sexually Explicit' },
       { key: 'flirtation', text: 'Flirtation' },
     ];
 
@@ -83,20 +121,28 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
             label="Sort by"
             options={sortOptions}
             styles={{root: {maxWidth: 160}}}
+            selectedKey={this.state.sortByLabel}
+            onChange={(evt, option) => {
+              this.sortGeneratedTextResults(option.key);
+            }}
           />
           <ComboBox
             label="Show score"
             options={scoreOptions}
             styles={{root: {maxWidth: 160}}}
+            selectedKey={this.state.highlightScoreLabel}
+            onChange={(evt, option) => {
+              this.setHighlightedScoreLabel(option.key);
+            }}
           />
         </Stack>
-        {this.props.analysisResults.map((item) => 
+        {this.state.analysisResults.map((item) => 
           <div className="flex items-stretch mb-4" style={{minHeight: "110px", border: this.props.selectedTextIds.includes(item.id) ? "solid #167DF5 2px" : "none"}}>
             <div className="flex items-center flex-none px-1" style={{backgroundColor: "#8894B1", color: "white", fontSize: "18px", lineHeight: "20px"}}>
               {item.id}
             </div>
             <div className="flex-none" style={{width: `${chartWidth}px`, border: "solid #E7E7E7 1px"}}>
-              <PerspectiveScoresBarChart id={item.id} width={chartWidth} scores={getResultScoreObj(item)} defaultSelectedScore="TOXICITY" />
+              <PerspectiveScoresBarChart id={item.id} width={chartWidth} analyzedText={item} defaultSelectedScore={this.state.highlightScoreLabel} />
             </div>
             <button 
               className="flex items-center flex-auto text-left px-4"
diff --git a/transformerviz/helpers/utils.py b/transformerviz/helpers/utils.py
index 6d2538f..75dd892 100644
--- a/transformerviz/helpers/utils.py
+++ b/transformerviz/helpers/utils.py
@@ -12,7 +12,6 @@ def generate_sentences_hf(tokenizer, model, context,
                           num_return_sequences=10):
     context = context.strip()
     input_ids = tokenizer.encode(context, return_tensors='pt')
-    input_tokenized_length = input_ids.size(1)
 
     # If num_beams is greater than 1, then the number of return sequences
     # needs to be lesser than or equal to the number of beams.
@@ -46,11 +45,12 @@ def generate_sentences_hf(tokenizer, model, context,
 
 class TextGenerator(object):
 
-    def __init__(self, model_name):
+    def __init__(self, model_name, num_return_sequences=10):
         self.tokenizer = AutoTokenizer.from_pretrained(model_name)
         self.model = AutoModelForCausalLM.from_pretrained(
             model_name,
             pad_token_id=self.tokenizer.eos_token_id)
+        self.num_return_sequences = num_return_sequences
 
     def generate_text(self, prompt,
                       do_sample=False, early_stopping=False,
@@ -61,7 +61,8 @@ def generate_text(self, prompt,
             do_sample=do_sample, early_stopping=early_stopping,
             min_length=min_length, max_length=max_length,
             top_k=top_k, top_p=top_p,
-            temperature=temperature, num_beams=num_beams)
+            temperature=temperature, num_beams=num_beams,
+            num_return_sequences=self.num_return_sequences)
 
         return results
 
@@ -89,10 +90,76 @@ def analyze_sentences(self, sentences):
                 "comment": {"text": sentence},
                 "requestedAttributes": self.requested_attributes
             }
-            response = self.client.comments().analyze(body=analyze_request).execute()
-            results.append({
-                "text": sentence,
-                "perspective": response
-            })
+            try:
+                response = self.client.comments().analyze(body=analyze_request).execute()
+                results.append({
+                    "text": sentence,
+                    "perspective": response
+                })
+            except Exception:
+                default_perspective_response = {
+                    "attributeScores": {
+                        "THREAT": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        },
+                        "IDENTITY_ATTACK": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        },
+                        "SEXUALLY_EXPLICIT": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        },
+                        "SEVERE_TOXICITY": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        },
+                        "TOXICITY": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        },
+                        "INSULT": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        },
+                        "FLIRTATION": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        },
+                        "PROFANITY": {
+                            "spanScores": [],
+                            "summaryScore": {
+                                "value": 0.0,
+                                "type": "PROBABILITY"
+                            }
+                        }
+                    }
+                }
+                results.append({
+                    "text": sentence,
+                    "perspective": default_perspective_response
+                })
 
         return results
diff --git a/transformerviz/server.py b/transformerviz/server.py
index 23bd867..b776059 100644
--- a/transformerviz/server.py
+++ b/transformerviz/server.py
@@ -12,7 +12,9 @@
 CORS(app)
 
 text_generators = {
-    "gpt2": utils.TextGenerator("gpt2")
+    "gpt2": utils.TextGenerator(
+        os.environ.get("GPT2_MODEL_VERSION", "gpt2"),
+        num_return_sequences=int(os.environ.get("NUM_RETURN_SEQUENCES", 10)))
 }
 
 perspective_api_client = utils.PerspectiveAPIClient(
@@ -95,3 +97,12 @@ def generate_text():
         lambda analyzed_sentence_id_tuple: {"id": analyzed_sentence_id_tuple[0] + 1, "text": analyzed_sentence_id_tuple[1]["text"], "perspective": analyzed_sentence_id_tuple[1]["perspective"]},
         enumerate(analyzed_sentences)))
     return {"text_generation_results": analyzed_sentences_with_ids}
+
+
+@app.route("/api/v1/analyze_text", methods=["POST"])
+def analyze_text():
+    request_json = request.json
+    text = request_json.get("text", "")
+    analyzed_sentence = perspective_api_client.analyze_sentences(text).pop()
+
+    return {"text_analysis_result": analyzed_sentence}