From c4bc9268a19cb67ddb78b7e2656e91ca8a483125 Mon Sep 17 00:00:00 2001 From: Nicholas King Date: Thu, 20 May 2021 17:10:13 -0700 Subject: [PATCH] Set up webpack dev server, start organizing layout --- development/index.html | 20 +++++ frontend/MainContainer.tsx | 6 +- frontend/actions.ts | 2 +- frontend/api.ts | 6 +- frontend/app.css | 48 ++++++++---- frontend/components/TextGenerationControl.tsx | 6 +- frontend/components/TextGenerationResults.tsx | 73 ++++++++++--------- frontend/index.tsx | 4 +- package-lock.json | 5 ++ package.json | 7 +- transformerviz/assets/index.html | 24 +++--- transformerviz/server.py | 3 +- tsconfig.json | 2 +- webpack.config.js | 18 ++--- 14 files changed, 138 insertions(+), 86 deletions(-) create mode 100644 development/index.html diff --git a/development/index.html b/development/index.html new file mode 100644 index 0000000..8420cfb --- /dev/null +++ b/development/index.html @@ -0,0 +1,20 @@ + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/frontend/MainContainer.tsx b/frontend/MainContainer.tsx index f7c91e3..96d70ec 100644 --- a/frontend/MainContainer.tsx +++ b/frontend/MainContainer.tsx @@ -7,9 +7,9 @@ import { setGeneratedTextResults, generateTextFailed, generateText -} from './actions.ts'; -import TextGenerationControl from "./components/TextGenerationControl.tsx"; -import TextGenerationResults from "./components/TextGenerationResults.tsx"; +} from './actions'; +import TextGenerationControl from "./components/TextGenerationControl"; +import TextGenerationResults from "./components/TextGenerationResults"; function Container({ diff --git a/frontend/actions.ts b/frontend/actions.ts index 4c21885..22e9237 100644 --- a/frontend/actions.ts +++ b/frontend/actions.ts @@ -1,4 +1,4 @@ -import { makeGetCall, makePostCall } from "./api.ts"; +import { makeGetCall, makePostCall } from "./api"; function requestGenerateText() { diff --git a/frontend/api.ts b/frontend/api.ts index 6b30b2b..ce03a09 100644 --- a/frontend/api.ts +++ b/frontend/api.ts @@ -1,10 +1,12 @@ import axios from 'axios'; -var port = null; +var apiServiceEnvironment = window["API_SERVICE_ENVIRONMENT"]; +var port = apiServiceEnvironment.port; +/* if (window.location.port != "") { port = window.location.port; -} +}*/ var apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:${port}`; diff --git a/frontend/app.css b/frontend/app.css index 81aad1b..5afc150 100644 --- a/frontend/app.css +++ b/frontend/app.css @@ -1,31 +1,47 @@ +html { + height: 100%; +} + +body { + min-height: 100%; +} + .button { position: relative; display: inline-block; } +.container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: 1fr; + padding-left: 24px; + padding-right: 24px; + padding-top: 36px; + padding-bottom: 36px; + background-color: #F3F6FD; +} + .text-result { - minHeight: 54; - padding: 10; - boxSizing: "border-box"; - borderBottom: "1px solid gray"; - display: "flex"; + padding: 10px; + background-color: #F3F6FD; } .text-result-content { - marginLeft: 10; - overflow: "hidden"; - flexGrow: 1; + margin-left: 10px; + overflow: hidden; + flex-grow: 1; } .text-result-content-score { - marginLeft: 10; - overflow: "hidden"; - flexGrow: 1; + margin-left: 10px; + overflow: hidden; + flex-grow: 1; } .text-result-content-generated-text { - marginLeft: 10; - overflow: "hidden"; - flexGrow: 1; - font-style: bold; -} \ No newline at end of file + margin-left: 10px; + overflow: hidden; + flex-grow: 1; + font-style: bold; +} diff --git a/frontend/components/TextGenerationControl.tsx b/frontend/components/TextGenerationControl.tsx index 86a6888..a8339d4 100644 --- a/frontend/components/TextGenerationControl.tsx +++ b/frontend/components/TextGenerationControl.tsx @@ -113,15 +113,15 @@ class TextGenerationControl extends React.Component + - - + + diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx index 36a6656..42de481 100644 --- a/frontend/components/TextGenerationResults.tsx +++ b/frontend/components/TextGenerationResults.tsx @@ -1,28 +1,12 @@ -import React, { FunctionComponent } from "react"; +import React, { FunctionComponent, useEffect, useState } from "react"; +import * as d3 from "d3"; +import * as _ from "lodash" 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 { List } from "office-ui-fabric-react/lib/List"; - -const onRenderCell = (item: any, index: number | undefined): JSX.Element => { - return ( -
-
Toxicity Score: {item.perspective.attributeScores.TOXICITY.summaryScore.value}
-
Severe Toxicity Score: {item.perspective.attributeScores.SEVERE_TOXICITY.summaryScore.value}
-
Identity Attack: {item.perspective.attributeScores.IDENTITY_ATTACK.summaryScore.value}
-
Insult Score: {item.perspective.attributeScores.INSULT.summaryScore.value}
-
Profanity Score: {item.perspective.attributeScores.PROFANITY.summaryScore.value}
-
Threat Score: {item.perspective.attributeScores.THREAT.summaryScore.value}
-
Sexually Explicit Score: {item.perspective.attributeScores.SEXUALLY_EXPLICIT.summaryScore.value}
-
Flirtation Score: {item.perspective.attributeScores.FLIRTATION.summaryScore.value}
-
{item.text}
-
- ); -}; - - type TextGenerationResultsProps = { generatedResults: any, loading?: boolean, @@ -39,30 +23,53 @@ class TextGenerationResults extends React.Component -
Error generating text.
- +
Error generating text.
); } else if (this.props.loading) { return ( - -
Loading...
- +
Loading...
); } else if (this.props.generatedResults.length == 0) { return ( - - + <> + ); } + const renderResult: React.FunctionComponent = (item: any) => { + const svgContainerId = _.uniqueId("svg-"); + console.log("svgContainerId", svgContainerId); + /* + useEffect(() => { + //const svg = d3.select(`#${svgContainerId}`).append("svg").attr("width", 700).attr("height", 300); + const svg = d3.select(`#${svgContainerId}`); + console.log(svg); + }) + */ + return ( +
+
+
{item.text}
+
+
+
Toxicity Score: {item.perspective.attributeScores.TOXICITY.summaryScore.value}
+
Severe Toxicity Score: {item.perspective.attributeScores.SEVERE_TOXICITY.summaryScore.value}
+
Identity Attack: {item.perspective.attributeScores.IDENTITY_ATTACK.summaryScore.value}
+
Insult Score: {item.perspective.attributeScores.INSULT.summaryScore.value}
+
Profanity Score: {item.perspective.attributeScores.PROFANITY.summaryScore.value}
+
Threat Score: {item.perspective.attributeScores.THREAT.summaryScore.value}
+
Sexually Explicit Score: {item.perspective.attributeScores.SEXUALLY_EXPLICIT.summaryScore.value}
+
Flirtation Score: {item.perspective.attributeScores.FLIRTATION.summaryScore.value}
+
+
+ ); + }; + return ( - -
-

Text Generation Results

- -
- +
+

Results analysis

+ {this.props.generatedResults.map(renderResult)} +
); } } diff --git a/frontend/index.tsx b/frontend/index.tsx index 8093b96..cf8457b 100644 --- a/frontend/index.tsx +++ b/frontend/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; -import rootReducer from './reducers.ts' -import MainContainer from "./MainContainer.tsx"; +import rootReducer from './reducers' +import MainContainer from "./MainContainer"; import { createLogger } from 'redux-logger'; import thunkMiddleware from 'redux-thunk'; import { initializeIcons } from 'office-ui-fabric-react/lib/Icons'; diff --git a/package-lock.json b/package-lock.json index 9c58d67..6d616a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2102,6 +2102,11 @@ "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==", "dev": true }, + "@types/lodash": { + "version": "4.14.169", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.169.tgz", + "integrity": "sha512-DvmZHoHTFJ8zhVYwCLWbQ7uAbYQEk52Ev2/ZiQ7Y7gQGeV9pjBqjnQpECMHfKS1rCYAhMI7LHVxwyZLZinJgdw==" + }, "@types/minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", diff --git a/package.json b/package.json index 087b56e..d7ded3c 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "dependencies": { + "@types/lodash": "^4.14.169", "axios": "^0.21.1", "d3": "^5.16.0", - "office-ui-fabric-react": "^7.117.0", "jquery": "^3.5.1", - "lodash": "^4.17.11", + "lodash": "^4.17.21", + "office-ui-fabric-react": "^7.117.0", "plotly.js-dist": "^1.54.7", "react": "^16.7.0", "react-dom": "^16.7.0", @@ -35,7 +36,7 @@ "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", - "cross-env": "^7.0.2", + "cross-env": "^7.0.3", "css-loader": "^4.3.0", "html-webpack-plugin": "^4.5.0", "jest": "^26.6.0", diff --git a/transformerviz/assets/index.html b/transformerviz/assets/index.html index 65877d2..b7deb36 100644 --- a/transformerviz/assets/index.html +++ b/transformerviz/assets/index.html @@ -6,19 +6,19 @@ -
-
-
- +
+ \ No newline at end of file diff --git a/transformerviz/server.py b/transformerviz/server.py index 1d01d2e..e44e227 100644 --- a/transformerviz/server.py +++ b/transformerviz/server.py @@ -3,12 +3,13 @@ from flask import ( Flask, request) +from flask_cors import CORS from transformerviz.helpers import utils import os app = Flask(__name__) - +CORS(app) text_generators = { "gpt2": utils.TextGenerator("gpt2") diff --git a/tsconfig.json b/tsconfig.json index e1b3e29..a0d3b67 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,7 @@ "jsx": "react", "baseUrl": ".", "paths": { - "@App/*": ["widgets/*"] + "@App/*": ["frontend/*"] } } } diff --git a/webpack.config.js b/webpack.config.js index f4249b5..67938cb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -22,10 +22,10 @@ module.exports = { new MiniCssExtractPlugin({ filename: 'app.css' }), - // isDevelopment && new HtmlWebpackPlugin({ - // template: './development/compatibility-analysis/index.html' - // }), - // isDevelopment && new ReactRefreshPlugin() + isDevelopment && new HtmlWebpackPlugin({ + template: './development/index.html' + }), + isDevelopment && new ReactRefreshPlugin() ].filter(Boolean), module: { rules: [ @@ -59,16 +59,16 @@ module.exports = { ] }, resolve: { - extensions: ['*', '.js', '.jsx', '*.ts', '*.tsx'] + extensions: ['*', '.ts', '.tsx', '.js', '.jsx'] }, output: { path: path.resolve(__dirname, 'transformerviz/assets'), publicPath: '/', filename: 'app-build.js' }, - // devServer: { - // contentBase: path.resolve(__dirname, "development"), - // port: 3000 - // } + devServer: { + contentBase: path.resolve(__dirname, "development"), + port: 3000 + } };