Project setup

.gitignore

@@ -0,0 +1,8 @@
+transformerviz.egg-info
+node_modules/
+__pycache__
+*.pyc
+
+transformerviz/assets/app-build.js
+transformerviz/assets/app.css
+

README.md

@@ -31,3 +31,19 @@ trademarks or logos is subject to and must follow
 [Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).
 Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
 Any use of third-party trademarks or logos are subject to those third-party's policies.
+
+
+## Development Environment Setup
+
+- `pip install pip upgrade`
+- `pip install -r requirements.txt --cache-dir <path-to-pip-cache-dir>` (The `cache-dir` parameter is optional).
+- `pip install -e .`
+- `npm install`
+- `npm run build`
+
+
+## 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).
+- Point your browser to port 5000 of the server on which the app is running.
+

frontend/MainContainer.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { bindActionCreators } from "redux";
+import { connect } from 'react-redux';
+import {
+  requestGenerateText,
+  setGeneratedTextResults,
+  generateTextFailed,
+  generateText
+} from './actions.ts';
+import TextGenerationControl from "./components/TextGenerationControl.tsx";
+import TextGenerationResults from "./components/TextGenerationResults.tsx";
+
+
+function Container({
+  text_generation_results,
+  error,
+  loading,
+  requestGenerateText,
+  setGeneratedTextResults,
+  generateTextFailed,
+  generateText
+  }) {
+
+    return (
+      <div className="container">
+        <TextGenerationControl generateText={generateText} />
+        <TextGenerationResults generatedResults={text_generation_results} loading={loading} error={error} />
+      </div>
+    );
+}
+
+function mapStateToProps (state) {
+  return {
+    text_generation_results: state.text_generation_results,
+    error: state.error,
+    loading: state.loading,
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    requestGenerateText: requestGenerateText,
+    setGeneratedTextResults: setGeneratedTextResults,
+    generateTextFailed: generateTextFailed,
+    generateText: generateText
+  }, dispatch);
+ }
+
+const MainContainer = connect(mapStateToProps, mapDispatchToProps)(Container)
+
+export default MainContainer;

frontend/actions.ts

@@ -0,0 +1,40 @@
+import { makeGetCall, makePostCall } from "./api.ts";
+
+
+function requestGenerateText() {
+  return {
+    type: "REQUEST_GENERATE_TEXT"
+  }
+}
+
+function setGeneratedTextResults(generateTextResults) {
+  return {
+    type: "SET_GENERATED_TEXT_RESULTS",
+    text_generation_results: generateTextResults
+  }
+}
+
+function generateTextFailed(error) {
+  return {
+    type: "REQUEST_GENERATE_TEXT_FAILED",
+    error: error
+  }
+}
+
+function generateText(config) {
+    return function(dispatch) {
+        dispatch(requestGenerateText());
+        makePostCall("api/v1/generate_text", config)
+          .then(response => dispatch(setGeneratedTextResults(response.data.text_generation_results)))
+          .catch(error => dispatch(generateTextFailed(error)));
+    }
+}
+
+
+
+export {
+  requestGenerateText,
+  setGeneratedTextResults,
+  generateTextFailed,
+  generateText,
+};

frontend/api.ts

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+var port = null;
+
+if (window.location.port != "") {
+  port = window.location.port;
+}
+
+var apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:${port}`;
+
+
+function makeGetCall(endpoint: string) {
+  return axios.get<any>(`${apiBaseUrl}/${endpoint}`);
+}
+
+function makePostCall(endpoint: string, payload: any) {
+  return axios.post(`${apiBaseUrl}/${endpoint}`, payload);
+}
+
+export {
+  apiBaseUrl,
+  makeGetCall,
+  makePostCall
+};

frontend/app.css

@@ -0,0 +1,31 @@
+.button {
+  position: relative;
+  display: inline-block;
+}
+
+.text-result {
+    minHeight: 54;
+    padding: 10;
+    boxSizing: "border-box";
+    borderBottom: "1px solid gray";
+    display: "flex";
+}
+
+.text-result-content {
+    marginLeft: 10;
+    overflow: "hidden";
+    flexGrow: 1;
+}
+
+.text-result-content-score {
+    marginLeft: 10;
+    overflow: "hidden";
+    flexGrow: 1;
+}
+
+.text-result-content-generated-text {
+    marginLeft: 10;
+    overflow: "hidden";
+    flexGrow: 1;
+    font-style: bold;
+}

frontend/components/TextGenerationControl.tsx

@@ -0,0 +1,173 @@
+import React, { FunctionComponent } from "react";
+import ReactDOM from "react-dom";
+import { Fabric } from "office-ui-fabric-react/lib/Fabric";
+import { TextField } from "office-ui-fabric-react/lib/TextField";
+import { DefaultButton } from "office-ui-fabric-react/lib/Button";
+import { Checkbox, Stack, Slider } from "office-ui-fabric-react";
+
+
+type TextGenerationControlProps = {
+  generateText: Function
+}
+
+type TextGenerationControlState = {
+  textGenerationPrompt: string,
+  model: string,
+  doSample: boolean,
+  earlyStopping: boolean,
+  minLength: number,
+  maxLength: number,
+  topK: number,
+  topP: number,
+  temperature: number,
+  numBeams: number
+}
+
+class TextGenerationControl extends React.Component<TextGenerationControlProps, TextGenerationControlState> {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      textGenerationPrompt: "",
+      model: "gpt2",
+      doSample: false,
+      earlyStopping: false,
+      minLength: 10,
+      maxLength: 20,
+      topK: 50,
+      topP: 1.0,
+      temperature: 1.0,
+      numBeams: 1
+    }
+  }
+
+  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
+    })
+  }
+
+  onTextPromptChange = (evt) => {
+    this.setState({
+      textGenerationPrompt: evt.target.value
+    });
+  }
+
+  onSampleChange = (evt?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
+    this.setState({
+      doSample: isChecked
+    })
+  }
+
+  onEarlyStoppingChange = (evt?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
+    this.setState({
+      earlyStopping: isChecked
+    })
+  }
+
+  onMaxLengthChange = (evt: any) => {
+    this.setState({
+      maxLength: parseInt(evt.target.value)
+    })
+  }
+
+  onMinLengthChange = (evt: any) => {
+    this.setState({
+      minLength: parseInt(evt.target.value)
+    })
+  }
+
+  onTopKChange = (evt: any) => {
+    this.setState({
+      topK: parseInt(evt.target.value)
+    })
+  }
+
+  onNumBeamsChange = (evt: any) => {
+    this.setState({
+      numBeams: parseInt(evt.target.value)
+    })
+  }
+
+  onTemperatureChange = (value: number) => {
+    this.setState({
+      temperature: value
+    });
+  }
+
+  onTopPChange = (value: number) => {
+    this.setState({
+      topP: value
+    })
+  }
+
+  render() {
+
+    return (
+      <Fabric styles={{root: {width: 700}}}>
+        <TextField
+          label="Text Generation Prompt"
+          name="prompt"
+          value={this.state.textGenerationPrompt}
+          onChange={this.onTextPromptChange}
+        />
+        <Stack>
+          <Checkbox label="Sample" onChange={this.onSampleChange} />
+          <Checkbox label="Early Stopping" onChange={this.onEarlyStoppingChange} />
+        </Stack>
+        <Stack>
+          <TextField
+            label="Max Length"
+            defaultValue="20"
+            onChange={this.onMaxLengthChange}
+          />
+          <TextField
+            label="Min Length"
+            defaultValue="10"
+            onChange={this.onMinLengthChange}
+          />
+          <TextField
+            label="Top k"
+            defaultValue="50"
+            onChange={this.onTopKChange}
+          />
+          <TextField
+            label="Num. Beams"
+            defaultValue="1"
+            onChange={this.onNumBeamsChange}
+          />
+        </Stack>
+        <Stack>
+          <Slider
+            label="Temperature"
+            min={0.0}
+            max={1.0}
+            step={0.1}
+            onChange={this.onTemperatureChange}
+          />
+          <Slider
+            label="Top p"
+            min={0.0}
+            max={1.0}
+            step={0.1}
+            onChange={this.onTopPChange}
+          />
+        </Stack>
+        <div className="text-generation-control-row">
+          <DefaultButton type="primary" onClick={this.generateTextClickHandler}>Generate</DefaultButton>
+        </div>
+      </Fabric>
+    );
+  }
+}
+
+export default TextGenerationControl;