Git Product home page Git Product logo

perspectiveapi-authorship-demo's Introduction

Travis CI npm version

An authorship experience demo for Perspective API

This repository contains example code for an authorship experience that provides feedback as you type using Perspective API. It is a web app written in Angular2/TypeScript and uses a Node Express server. This project shows how to have a development and a production build environment with deployment tools based on Docker. You can then deploy to cloud services such as Google Cloud's App Engine, as well as other cloud computing providers.

The app uses the Perspective API to score text, via perspectiveapi-simple-server.

This project was generated with Angular CLI version 1.0.0.

Requirements & Setup

To run code using your local machine (not via the Docker environment), you will need to install nodejs (e.g., by installing NVM). You'll also need some global packages, which you can install using the npm command:

npm install -g yarn typings typescript ts-node mocha protractor angular-cli karma-cli

Next, you will need to create a Google Cloud (GCS) project, and it will need to have access to Perspective API. Requests to the API will be authenticated using a Cloud project API key.

An example configuration file template is provided in config/server_config.template.json. If one is not present in build/config, then the config file will be copied there when you build or start a local server. The config file specifies your Google Cloud project API key, and some other details which you can learn more about in the documentation for perspectiveapi-simple-server.

To setup and install the local packages, use install yarn and then run:

yarn install

Adding reCAPTCHA v3 verification

The perspectiveapi-simple-server has an optional configuration for enabling reCAPTCHA verification. To enable it in this demo, add the requisite recaptchaConfig values to server_config.json. Then, provide ng-recaptcha's RecaptchaV3Service and RECAPTCHA_V3_SITE_KEY to the module importing this demo, like so:

providers: [ 
  ReCaptchaV3Service,
  {provide: RECAPTCHA_V3_SITE_KEY, useValue: 'your_site_key_for_reCAPTCHA_v3' },
]

Development server that watches the source code

Run yarn run serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. API requests to the server (http://localhost:4200/check and http://localhost:4200/suggest_score) will be redirected to an underlying nodejs server, based on perspectiveapi-simple-server, which is started at http://localhost:8080/.

Development server that uses compiled sources

Builds the app in build/static:

yarn build:dev

Start the simple server at http://localhost:8080/ serving content from build/static:

yarn run start:dev-server

Production server that uses compiled sources

To build the production version of the app in build/static, which will compile the HTML, JS and CSS and do cool shakedown stuff to minimize the size, run:

yarn build:prod

You can now run the simple server at http://localhost:8080/ serving content from build/static:

yarn run start:dev-server

When run using the Dockerfile, e.g. on Google Cloud, the following command will be run:

yarn run start:prod-server

If you run this locally, you'll need to login to Google Cloud and set your project ID. If you run this locally, you'll need to login to Google Cloud and set your project ID.

Production server using docker file

Assuming you have Docker installed and setup, you can create a Docker image for the production server with:

docker build -t perspectiveapi-authorship-demo .

To start a shell in the Docker environment for debugging and to manually start the server there, you can run:

docker run -ti perspectiveapi-authorship-demo /bin/bash

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.

Build

Run yarn run build to build the project. The build artifacts will be stored in the build/ directory. Use the -prod flag for a production build.

Running unit tests

Run yarn run test to execute the unit tests via Karma.

Running end-to-end tests

Run yarn run e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Using convai-checker as a webcomponent

Angular Elements is a new experimental API that allows exporting Angular components as webcomponents. This repo includes a demo of this functionality with the convai-checker component. To see it, do the following:

  1. Build with the command yarn run build:dev-customElements.
  2. Run yarn run start:dev-server
  3. Open http://localhost:8080/index_with_elements.html.

TODO(rachelrosen): Document and demo how to add convai-checker webcomponent outside of the angular-cli build using the imported compiled javascript.

Publishing the webcomponent

To publish a new version of the convai-checker webcomponent, that can be used as a plugin in other websites (e.g. WordPress):

  1. Run yarn run build-plugin-js. This will concatenate all JavaScript files into one build/static/perspective_authorship_widget.js file.
  2. Copy the new JavaScript to GCS with gsutil cp build/static/perspective_authorship_widget.js gs://checker_source/
  3. Copy asset files (emoji images) to GCS with gsutil cp src/assets/* gs://checker_source/assets
  4. Open (https://pantheon.corp.google.com/storage/browser/checker_source) and ensure that perspective_authorship_widget.js and all files in the assets directory have "Public link" checked. TODO(dborkan): automate this step

Publishing to npm

To package the library for publication, we use ng-packagr.

Run yarn run packagr to build the javascript bundles, which will generate a dist/ directory. Then run npm publish dist to publish the contents of that directory.

Important note

When using this library in another package, in order to access the image assets for emoji mode, you must add the assets from this package to the assets in your angular.json:

"assets": [ { "glob": "*", "input": "node_modules/@conversationai/perspectiveapi-authorship-demo/src/assets", "output": "./assets" } ]

See angular/angular-cli#3555 (comment) and angular/angular-cli#4691 for more info.

Notes

This is example code to help experimentation with Perspective API; it is not an official Google product.

perspectiveapi-authorship-demo's People

Contributors

alexandrascript avatar dborkan avatar dependabot[bot] avatar dslucas avatar iislucas avatar rachelrosengoogle avatar sorensenjs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

perspectiveapi-authorship-demo's Issues

MPM package issues (version specification, and url)

The package.json file specified exact angular versions, but angular uses semantic versioning. This means that attempting to update angular breaks on projects that include the authorship npm package as a dependency.

Suggested fixes:

  • Use semantic versioning (e.g. "^6.0.0" instead of "6.0.0") for package dependencies.
  • Specify the github URL in the package.json file so that the source listing in NPM is correct.

If you can fix and cut a new release, that would be awesome and unblock some downstream projects I have using it.

Emoji image alt text

Currently the rendered image tag for the emoji has not alt attribute, please provide alt text of emoji type or emoji reaction.

Animation gets stuck sometimes

I was playing with the demo locally on my machine and noticed that the animation seems to get stuck and doesn't restart even if more requests are sent. This is possibly a dependency / local build issue as the tests are all still passing, but it needs further investigation.

Figure out why the javascript binary sizes are so large

Current binary sizes of code compiled with yarn build:prod :

Uncompressed:
-rw-r--r-- 1 rachelrosen primarygroup 5.7k 2018/04/18 15:14:03 build/static/inline.bundle.js
-rw-r--r-- 1 rachelrosen primarygroup 161k 2018/04/18 15:14:03 build/static/main.bundle.js
-rw-r--r-- 1 rachelrosen primarygroup 295k 2018/04/18 15:14:03 build/static/polyfills.bundle.js
-rw-r--r-- 1 rachelrosen primarygroup 57k 2018/04/18 15:14:03 build/static/styles.bundle.js
-rw-r--r-- 1 rachelrosen primarygroup 7.0M 2018/04/18 15:14:03 build/static/vendor.bundle.js

= 7.52 M

Using gzip:
-rw-r--r-- 1 rachelrosen primarygroup 1.6k 2018/04/18 15:14:03 build/static/inline.bundle.js.gz
-rw-r--r-- 1 rachelrosen primarygroup 28k 2018/04/18 15:14:03 build/static/main.bundle.js.gz
-rw-r--r-- 1 rachelrosen primarygroup 62k 2018/04/18 15:14:03 build/static/polyfills.bundle.js.gz
-rw-r--r-- 1 rachelrosen primarygroup 10k 2018/04/18 15:14:03 build/static/styles.bundle.js.gz
-rw-r--r-- 1 rachelrosen primarygroup 1.2M 2018/04/18 15:14:03 build/static/vendor.bundle.js.gz

= 1.3M

"Learn more" and "Seems wrong" links are not working on the Authorship Widget in the "elements" version

To make the issue happen:
Setup the Perspective Authorship Widget as a webcomponent plugin. Enter some toxic text to see the widget display a score. At this point clicking either the "Learn more" or "Seems wrong" buttons/links will result in an error.

Description of bad behavior observed:
As per Rachel: "The reason for this is because it's not actually a link, it just emits an event. The way this was used on the conversationai website was that the parent angular component would listen for the event and display a popup. We won't have that for the plugin case, so we'll need to add some custom logic to make it a link in that case."

Using aot compiler breaks the prod build

It gives the error: ERROR in : Type ConvaiChecker in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/convai-checker.component.ts is part of the declarations of 2 modules: ConvaiCheckerModule in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/convai-checker.module.ts and ElementDemoModule in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/element-demo.module.ts! Please consider moving ConvaiChecker in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/convai-checker.component.ts to a higher module that imports ConvaiCheckerModule in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/convai-checker.module.ts and ElementDemoModule in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/element-demo.module.ts. You can also create a new NgModule that exports and includes ConvaiChecker in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/convai-checker.component.ts then import that NgModule in ConvaiCheckerModule in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/convai-checker.module.ts and ElementDemoModule in /usr/local/google/home/rachelrosen/git/perspectiveapi-authorship-demo/src/app/element-demo.module.ts.

Add more tests

Test cases needed (this will be added to as I think of more):

-Checking layer state changes and giving feedback while in emoji mode.
-Updates to the gradient color (and checking that the gradient is correct at different positions given different score thresholds).

Need to document gapi requirements

When using gapi directly, the gapi library needs to be included in the top level page so that a global gapi object is defined. Probably need to document this.

That or, maybe have a few different ways to include things that bundle their dependencies with them.

Default use doesn't respect non-english

With default setup, entering:
"bonjour mon ami"

Results in "Error scoring text. Please try again." it should instead say that it only works in english.

We should also provide the component with a way to force language usage too.

Checker icon bug: "Cannot tween null target"

While testing, we've discovered a bug in a specific checker component journey on the Perspective API website.

Repro

  1. Type something into the authorship demo
  2. Click "Seem Wrong?"
  3. Click Yes or No
  4. Click the checker icon, and observe error core.es5.js:1020 ERROR Cannot tween a null target.

References

screenshot 2017-11-17 11 20 02
screenshot 2017-11-17 11 20 04
screenshot 2017-11-17 11 20 07
screenshot 2017-11-17 11 20 09

Provide a way to clear/reset the state

Sometimes an app that includes a convai-checker component wants to clear the text. If it does this by setting the text value to be empty, convai-checker doesn't know about it. It would be good to have some sensible programatic control of convai-checker from the external component.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.