Origami
I have been working on Origami as a part of Google Summer of Code for the last 2 months. I recently passed my second evaluation. This post serves as a summary of the work that I have done so far.
Introduction
Origami intends to make research accessible to everyone. It allows you to build a web based demo of your Machine Learning / Computer Vision project. Users don't need to set up your code on their local machines, instead they can visit the demo page on Origami and test if your algorithm meets their need.
Origami also allows you to view all the demos of a user thus serving as a portfolio for ML researchers.
Project Details
After a few discussions with my mentors, we decided to implement the following features by the end of the GSoC period.
Features to be implemented
- Translate backend from NodeJS to Django
- Set up continuous integration with TravisCI
- Write tests for the APIs
- Completely change the UI
- Allowing users to search for demos and users
- Dockerize the application
- Unifying the component creation process
- Shifting the docs to read the docs
- Releasing origami-lib as a pip package
- Allowing mixing of components
- Creating demos using drag and drop
So far, I've completed everything but the last 2 features. Let's take a look at each of the implemented features
Translate backend from NodeJS to Django
This was the first feature I worked on and was by far the toughest and most time consuming. Origami's backend was written in NodeJS. We needed to translate it to Django as all the other projects of CloudCV were in Django and this would help with maintaining the code in the future.
Earlier Origami used NodeJS along with socket.io for socket communications with the hosted demo along with a Non relation database (MongoDB).
We decided to continue using MongoDB with Django with the help of DRF-Mongo. After a little over a week of using it, we realized it wasn't feasible as Mongoengine 0.9 was broken and wouldn't allow us to access the admin panel. The fix was in django-mongoengine which is an unstable project. We finally decided to switch to PostgreSQL.
The next step was to translate the socket communications. For that, I used Django Channels. This was my first time working with Django channels and after a couple of days of reading and discussing about it with my mentor, I was able to start the translation which took another 2 days.
Then, we moved to integrating React and Webpack with Django which again was a first for me. I used django-webpack-loader for this and it was done in under a week.
With that, the first major feature of my project was done.
Writing tests for APIs
At the start of GSoC, Origami had no tests. This was something we wanted to change.
Once I was done translating the APIs with the help of Django Rest Framework, I wrote a test for each API. It took about 2 days to complete.
Set up continuous integration with TravisCI
After writing the tests, the next step was to setup continuous integration to make reviewing Pull requests easier. This was again a very quick feature and didn't take more than a day to implement and merge.
Completely change the UI
The older UI was based on material-ui and semantic-ui . Both of these packages were heavy and incomplete. This lead to an increase in package size and inconsistent UI. Additionally, the navigation was in disarray. While the app worked, the user experience wasn't very good. So we decided to go with Ant Design. The goal was to rewrite the UI completely in Ant. This involved making mockups during and after the community bonding period.
I had no previous experience designing the UI so this was a difficult task. I would prepare a mockup for a page and post it on the channel where the mentors would give suggestions which I would later implement. We repeated this for all the pages. Once the mockups were ready, I would write the code for it using React and Antd. I have now integrated most of these pages into the main app.
Allowing users to search for demos and users
Earlier users were only able to access their demos through the app or the demos whose permalinks they had received. This restricted the users in the sense that they weren't able to search for demos of code they would be interested in. This was changed by creating a new "discover" page to allow searching for all demos. The users can also search for demos of a particular user.
Dockerize the application
Origami, after translation, had multiple dependencies including nginx, postgres, redis and the origami web app itself. Thus, deploying Origami to a server was a pain. We therefore decided to start using docker. I had last worked with Docker over a year ago so I had to brush up on a few things. Once I was done with that, I created a Dockerfile for the webapp and a docker-compose script for the other dependencies.
Unifying the component creation process
Creating new input and output components involved copy pasting a lot of code from the already created component. This lead to a lot of extra code. It also made the component creating process cumbersome as we needed to take care that changes made in one component were reflected in all the other components as well. We decided to tackle this by creating a base input/output component from which new components could inherit thus eliminating the need to copy paste code.
The bulk of the time was spent on identifying the blocks of code that needed to be added to the base components. This was followed by making sure the structure of the base component was easy to understand and use.
Shifting the docs to read the docs
Earlier the docs were a part of the app. This increased the bundle size and had no real advantage. We moved our docs to sphinx and it is now hosted on Read the docs.
Conclusion
Working as a part of GSoC over the last 2 months has been an amazing experience. Not only have I been learning a lot of tools, I have also learned a lot of other skills like following proper coding conventions and keeping the bundle size of the frontend as small as possible. I have been able to implement most of the decided features and I feel I should be able to complete the rest by the end of GSoC.
