generic-github-user / tfjs-visual-editor

A visual interface for TensorFlow.js code

tfjs-visual-editor

A visual interface for TensorFlow.js code

Technology

The open-source technology used to build TensorFlow.js Visual Editor.

TensorFlow.js

TensorFlow.js is a machine learning library built with JavaScript to run in the browser or with Node.js. It is used in TensorFlow.js Visual Editor to run scripts created using the visual interface.

https://js.tensorflow.org/

Material Design Lite

Material Design Lite is a free library for adding Material Design elements to web pages. It was used for the design of TensorFlow.js Visual Editor alongside custom CSS styling to create a clean, organized, consistent user experience.

https://getmdl.io/

Notes

1

TensorFlow.js visual editor is a third-party application and is not recognized by or endorsed by the creators of TensorFlow.js.

2

Disclaimer for when TensorBoard for TensorFlow.js is released:

"Why did you make this when TensorBoard already exists, and it's so much better?" "I made this before TensorBoard for TensorFlow.js was released. Also, (at least for now), TensorBoard can't be used to edit data graphs, but only visualize them."

tfjs-visual-editor's Issues

Make CSS cross-browser compatible

Add Material Design Lite

https://getmdl.io/

Create node constructor

Add voice/speech recognition interface

Large menus overflow off of screen, causing a scroll bar to appear

• Separate (the) menus
• Reset menu position when selected

Add node editing

Nodes can be dragged outside of the editor div

Add ability to change type of node

Number of nodes in memory doubles each reload

Name change?

Node information button remains selected

Make nodes reorderable (layers)

Add code comments

Add multiple input types symbols

Add styling to bottom-level menu options

Fix center formatting

This was much more of an issue than it should have been . . .

Add site favicon

Make nodes draggable

Add shadow to node information button

Use MDL for error message pop-ups

Add node element removal and editing to update() function

Add code import option

Add input/output icon parameter name and data type labels

Remove intermediary JSON information structure

Create nodes straight from TensorFlow.js functions.

Add more console logs

Node element IDs not set properly

document.getElementById(nodeList[0].id)
--> null

Add editor zooming

Add frequently used operations list

On slower computers, the node elements are displayed before their positions are updated

Add model saving using web browser localStorage

I'm almost certain that I already opened this issue . . .

Add snackbar MDL notifications

Add persistent model storage with browser localStorage

Add "clear all nodes" button

This should include a "Are you sure?" confirmation message.

Add node connections

76 duplicate [Violation] warnings in developer console "Verbose" mode

Compressed:

[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

Expanded:

ripple.js:139 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

This appears to be a Material Design Lite issue, as "ripple" is a visual effect applied using JavaScript to the design of some buttons in TensorFlow.js Visual Editor using Material Design Lite.

Add tensor value displays on node elements

Node information button tooltip not displaying

Make nodes resizable

Clean up code

Link to tfjs docs from editor

Add links to editor

Unobtrusive

File reorganization broke relative file paths

Data type (input/output) icons not displaying on node elements

Add code snippet credits

Test cross-browser compatibility

Add node update function

This is needed for loading several nodes into the editor at once - currently they are added one at a time as the add() function is called. I originally planned to have a global update function that would remove all elements from the editor, and then replace them from the nodeList array, but this would be inefficient and not work well, as every time a change was made to one of the nodes, they would all need to be regenerated. Now, the existing elements will remain on the page and only be edited when needed. The nodes could either be cross-checked with the nodes in nodeList or edited with a function call.

Create live demo

Add ability to set node inputs

Add ability to remove nodes

Add repository topics/labels/tags