Introducing Tf.js Playground

Say hello to tf.js Playground - a client-side codepen.io-like application that loads Tf.js models into your browser and allows you to experiment with them.

Live 🌐: tf.js Playground
Source Code 💻: tf.js Playground

The idea behind the project 💡

Last year, one of the projects I was interested in for the Outreachy Internship program was the 'Create reusable technical demos for Tensorflow.js' project. At the time, to try out the models, I had to clone the repos locally, install the required dependencies and run the demos. There was a lot of setup involved and by the time I was done getting my local environment setup, my creative juices were all dried out. Some of the demos were also not visual enough for me to see what was possible to achieve with these models. So I struck out and with my move for school and whatnot, there was not enough time to come up with something for the final application.

While I was brainstorming for this hackathon, I remembered my experience and I figured I could make something that removes that setup time and allows people dive right in to experimenting with the models. Also, I started learning Vue at the time so this project was a way to validate and reinforce the knowledge I had gotten from following some beginner tutorials. Finally, I like to visualize what I can achieve with any libraries I try to use. Seeing things illustrated makes a lot of difference for me. Therefore, I thought it would not hurt to create visualized use cases of some of the models as well.

How Does tf.js Playground Work? 🤔

The playground features a 3-tabbed code editor built with a Vue Ace Editor component and a preview rendered in an iFrame. The models are loaded into the JavaScript editor and the combined HTML, CSS and JavaScript code are set as the src tag of the iFrame element. The application listens for changes on all the language editors with a de-bounced event handler and updates the content of the iFrame element. The application also saves any code changes to the content of the editors to the user's browser localstorage.

Building The Playground 🛠️

Defining The Requirements

Given the time constraint, my busy schedule and the fact that I was new to the ecosystem of my chosen front-end framework, I fleshed out a basic set of requirements for the application to limit the scope I took on.

• Provide a 3-tabbed editor with 3 languages - HTML, CSS, JavaScript and a Preview screen or Window
• Load the playground with the libraries and models needed for each model.
• Utilize the browser's localstorage to store any changes to the content of the editors.
• Include visualized samples wherever possible.

Choosing a Design

I am not particularly great at making my own interface designs so I went on Figma to search for a design that would fit the theme of what I was building. I ended up choosing this AI Text Generator Website Design file and tweaked it in my project to make it my own. I also took some inspiration from the awwwards website itself. As for the logo, I designed it myself on Canva. It's pretty amazing what you can do with that tool. Finally for the code editors, I drew inspiration from Code Playground.

Tech Stack

The application is a client-side application with no interactions with a server. It is built with Vue 3, Vue Router 4 and Vuex 4. As I mentioned earlier, I was starting out with Vue and this project provided me with an opportunity to flex my beginner muscles.

For the code editor, I used the Vue3 Ace Editor which is a provides a Vue3 wrapper around the popular Ace Editor. I also used Split.js to make the editor resizable and display live code output in a preview pane. Lastly, I used localstorage to provide persistence and temporary storage if the user makes changes to the default code provided in the editor.

Gathering The Data

The models are stored as an array of objects containing information like the name, description, GitHub URL, slug and aliases for the models. These objects also include HTML, CSS and JavaScript code that will be displayed on the editors.

Challenges

When implementing the code editor, I started out with Monaco-Editor. However, I kept facing issues integrating it with my code and even when I got it to show up, it increased the load time of the page drastically. Eventually, I exhausted all suggestions after living for days on StackOverflow and GitHub issue pages and removed it. I made the switch to the Ace Editor which is not as fancy but is functional and serves the purposed for which I needed an editor.

I also had to make some decisions on how I wanted to serve the model libraries within the playground. The first option was to embed it as a script tag within the HTML that will be passed to the preview frame. The second option was to include it as part of the code that will be displayed on the JavaScript editor tab. I found this really cool tool Skypack which is a CDN that preoptimizes packages for browser use. With this tool, choosing the second option for most of the models was a no-brainer for me. However, for the speech-command model, I had to take the first approach since the URL for the library was broken somehow.

Iterative Development, Continuous Integration and Deployment

I wanted to take a professional approach to working on this project so right from the beginning, I added version control to my source code. I separated my work into branches with the Master branch hosting only changes that were not breaking anything. I also created a development branch and worked locally using feature branches.

I have had a Netlify account for a while. However, I had only hosted one project on it and it was ages ago. However, I did find the preview feature that shows a preview of the application whenever I made PRs to the master branch very useful. It was a pretty nice way to check that even in production nothing had broken.

Future Ideas for tf.js Playground ⌚

I think it would be great to have a way to share your playgrounds with others. That would most likely involve user and playground management on a server. It would also be nice to have more visualized samples for complete beginners who want to know what is possible.

Concluding Thoughts 👋

tf.js Playground was my take on how to address the issue I faced with working with Tensorflow.js last year. Now I do understand that there are Glitch starter projects for Tensorflow.js. However, I found them a bit to heavy for me use and they were not without their own issues. Additionally, I really wanted to see more visuals on using these models which they did not provide.

Therefore, it was really nice to take on a challenge I faced and solve it while learning so a new front-end framework and other new things at the same time. tf.js Playground is an open-source project hosted on GitHub licensed under the MIT license terms. I am open to suggestions on how to make it better and contributions.

Let me know what you think about tf.js Playground in the comment section. I can't wait to see your feedback.

PS: This is also my first post on Hashnode 😀. While this is not my first technical writing stint, I finally got around to writing something here after having the account for a few months now and the user experience is amazing! I am looking forward to doing more of this in the future.

Resources 🧰

Tensorflow.js Models Page - The official website for TensorFlow.js models. Skypack - CDN for browser optimized package imports Vue3 Ace Editor - A Vue3 wrapper for Ace Editor Configure Vue Router history mode on Netlify

Links 🔗