Eden AI’s Front-End

The front-end part of our interface is the most important part for our users. As we manage several APIs on our interface, we needed to create something simple and easy to use. Here is what we used in order to manage the front-end part of Eden AI's platform.

Vuejs

As our service allows users to compare multiple AI providers with different features, we had complex requirements for our user interface, we needed the users to easily use our service and see a clear representation of the data we returned from the different AI providers. This obviously led us to the 3 most popular Javascript libraries/frameworks: React, Vuejs and Angular. We decided to use Vuejs after testing the 3 of them, mostly because of its ease of use, its performances and small footprint.

Bootstrap-vue

Writing a whole Design system and User Interface from scratch is no easy task, so we opted for a simpler and cleaner solution: using a component library. Bootsrap is very well known as a css framework, and the library boostrap-vue is built on top of that, providing bootstrap components for Vuejs.

‍

It allows us to save a great amount of time when developing frontend views and is a breeze to use. The only problem we encountered is that it is sometimes a pain to customize (say hello to !important in your css).

‍

Driver.js

Not wanting the users to feel lost when they first arrive on our home page, we wanted to show a small tutorial indicating the user on where to navigate and how to use our site. It is a great way to guide users who are not always expert in this area and are easy to feel lost. On top of that, we have some complex features that really need a tutorial like our Workflow page that allows us to combine different APIs into a single ready to use pipeline.

‍

For our use case we chose to use driver.js, it is a highly customizable library to show tours/tutorials to the user on your website. It is simple, works on all browsers and fits our use-case well.

Papaparse

During our frontend development we encountered the need to convert csv files to json & vice-versa. We found a great library called PapaParse, very simple to use and allowed us to show a user-friendly representation of csv data on our website

Here is an example of how easy to use PapaParse is:

‍

// Parse CSV string

var data = Papa.parse(csv);

// Convert back to CSV

var csv = Papa.unparse(data);

// Parse local CSV file

Papa.parse(file, {

   complete: function(results) {

       console.log("Finished:", results.data);

   }

});

‍

Here is what we are using at the moment for Eden AI’s front-end. This article will be updated if we think something new is worth mentioning. I would be thrilled to discuss it if it is a subject that you are interested in, or if you simply want to give me any feedback. You can email me kyrian.castel@edenai.co.

‍

‍