facets
facets copied to clipboard
PAIR-code
Make facets npm available
Hi, I'm trying to embed facets into a node.js application. I realized that facets cannot be npm installed yet, which makes the embedding process difficult. Is there a plan for this?
Would it be reasonable to just have an npm package that contains the pre-compiled facets html file from the facets-dist directory? That html file contains the compiled polymer elements along with all dependencies, so once imported the elements can be used. That file is what drives the demo page (https://pair-code.github.io/facets/ - from the code on the gh_pages branch).
Because facets is built in typescript and uses protocol buffers and ES6 style imports, there is some compilation that has to occur to get it in a browser-usable state.
(some other related bits about using Facets as a library are in https://github.com/PAIR-code/facets/issues/129 and https://github.com/PAIR-code/facets/issues/121 and https://github.com/PAIR-code/facets/issues/84)
Would it be reasonable to just have an npm package that contains the pre-compiled facets html file from the facets-dist directory?
@jameswex That would be amazing! I suspect that will be writing bazel build code, so not sure how to help with that. In the meantime, here's some code trying to get a minimal working example in a plain HTML webapp, and share how to do that for other folks unfamiliar with Polymer, but working towards a npm package that can be imported and used in non-Polymer apps would be even better :)
I didn't see the facets-dist/facets.html file in the repo anymore, so I tried what would happen with facets-jupyter.html, hoping that this there aren't a lot of Jupyter-specific bits in there. Here's what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
<!-- load the element -->
<link rel="import" href="./facets-jupyter.html">
</head>
<body>
<h1>hello!</h1>
<!-- mount the element -->
<facets-dive width="800" height="600" />
<!-- set values on the component's element: -->
<script>
function loadData() {
return Promise.resolve([{
"name": "apple",
"category": "fruit",
"calories": 95
},{
"name": "broccoli",
"category": "vegetable",
"calories": 50
}]);
}
loadData().then(data => document.querySelector('facets-dive').data = data);
</script>
</body>
</html>
This generally works:
But has has some deprecations and warnings:
I'm assuming the first are related to how this file imports the Polymer components, that the missing fonts maybe aren't because those included in the Jupyter build, and not sure about the nan :)
Anyway, thanks for sharing your awesome work! 👍
I tried adding a build task using https://github.com/bazelbuild/rules_nodejs, but that seemed like it involved updating WORKSPACE which I assume is sensitive since shared across the project. Since just trying to yolo it didn't work, and then the readme directions on that repo didn't exactly map 1:1 to this project's existing setup, I didn't investigate further.
FWIW I used this approach in another project, where Facets Dive is embedded to visualize the results of an image classifier model created in Teachable Machines. You load your model, then use keywords to search online for images to see how well your model generalizes to data in the wild. The results are visualized in Facets Dive with a spritemap created in JS. If you're curious it's at https://glitch.com/edit/#!/agreeable-pisces
I used the same method to embed as above, but unfortunately it only seems to work in Chrome (the version of https://raw.githubusercontent.com/PAIR-code/facets/master/facets-dist/facets-jupyter.html build ~22 days ago).
Does https://github.com/PAIR-code/facets/pull/185 mean there's a better way to use Facets Dive as a library from JS (ie, in projects that don't build with Bazel or use Polymer otherwise)? Thanks for sharing your work! 👍
The update from Polymer 1 to Polymer 2 didn't make using Facets Dive as a library any easier than it was before, unfortunately. It was just minimal updates to move to that version of Polymer to get off of the old/unsupported version (along with TensorBoard also moving to Polymer 2, as we share their build rules).
We'll be looking into getting Facets working easily outside of Chrome. Our Facets webpage demos (https://pair-code.github.io/facets/) do this by loading the webcomponents polyfill first, then waiting for WebComponentsReady event, and only then loading the facets-jupyter.html, and only after that load completes does it create the facets-dive element and provide data to it.
See this in the following demo file: https://github.com/PAIR-code/facets/blob/gh-pages/quickdraw.html which renders at https://pair-code.github.io/facets/quickdraw.html
@jameswex Thanks! This and your related comment over in https://github.com/PAIR-code/what-if-tool/issues/7 are both super helpful. 👍
I had been using:
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
<link rel="import" href="./facets-jupyter.html">
And then later adding in <facets-dive /> on user interaction, which only worked on Chrome.
I tried sequencing this to instead wait for WebComponentsReady, but that still only works on Chrome - the onload for the import tag never fires on other browsers. If I swap the polyfill to use the one in QuickDraw (https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js), then it loads the component across browsers, but the styling of the toolbar only looks right in Chrome.
After trying to understand the various polyfills at https://github.com/webcomponents/webcomponentsjs, swappingin this one and sequencing the loading like you suggested in https://github.com/PAIR-code/what-if-tool/issues/7#issuecomment-514660444 made this approach work across Chrome, Firefox and Safari on OSX. Thanks for your help in working around!
@jameswex With HTML imports removed from M80 including chrome. How can we import this facets into our webpage?
You can load the webcomponents polyfill and then import facets and use it, as our facets.dev webpage does. The code for this webpage can be found here: https://github.com/PAIR-code/facets/blob/gh-pages/index.html
See specifically https://github.com/PAIR-code/facets/blob/gh-pages/index.html#L43 and https://github.com/PAIR-code/facets/blob/gh-pages/index.html#L292