conversationai / perspectiveapi-authorship-demo Goto Github PK

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

Merging into a single component will simplify data binding logic. To maintain conceptual differences, split the functionality into two different classes both used by the component.

Ways to strip out logs for prod builds:

• https://www.codementor.io/@brijmcq/angular-clear-all-of-your-console-logs-in-production-build-with-just-a-few-lines-of-code-cxcw30yqs
• https://www.codebyamir.com/blog/suppressing-console-log-messages-in-production

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

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.

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.

I logged out on our end to make sure the checker component was receiving the right props and it is so hoping you could look into this. the alwaysHideLoadingIcon and the hideLoadingIconAfterLoad does not always update with expected behavior. See two videos below.
https://cl.ly/2y2T3n0Q3x1f
https://cl.ly/1s1w3J2l3E2u

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.

We should add support for the underlying perspective-service to call specified models. Currently TOXICITY is hard-wired.

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

It seems there is a secret and tricky requirement to use this that a variable 'global' is globally defined, and assigned to window.

(window as any).global = window;

This seems pretty tricky.

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."

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.

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.

The "alwaysHideLoadingIcon" var starts in the position as if there was an icon there and moves over at the end over the place that it should be (see video to for reference) https://cl.ly/293S1v3F292N

The final two tests (run with yarn run test) seem to have a problem; when run alone they pass, but when run in context of other tests they fail.

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.

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).

Repro steps:

1. rm yarn.lock
2. remove -r node_modules
3. yarn install

The likely cause is that at some point package.json and yarn.lock became out of sync. We should get them back in sync.