Front-end d'Eden AI

La partie frontale de notre interface est la partie la plus importante pour nos utilisateurs. Comme nous gérons plusieurs API sur notre interface, nous avions besoin de créer quelque chose de simple et facile à utiliser. Voici ce que nous avons utilisé pour gérer la partie frontale de la plateforme Eden AI.

Vuejs

Comme notre service permet aux utilisateurs de comparer plusieurs fournisseurs d'IA dotés de fonctionnalités différentes, nous avions des exigences complexes pour notre interface utilisateur. Nous avions besoin que les utilisateurs utilisent facilement notre service et voient une représentation claire des données que nous avons renvoyées par les différents fournisseurs d'IA. Cela nous a évidemment conduits aux 3 libraires/frameworks Javascript les plus populaires : Réagir, Vuejs et Angulaire. Nous avons décidé d'utiliser Vuejs après avoir testé les 3 d'entre eux, principalement en raison de sa facilité d'utilisation, de ses performances et de son faible encombrement.

Bootstrap Vue

L'écriture d'un système de conception complet et d'une interface utilisateur à partir de zéro n'est pas une tâche facile. Nous avons donc opté pour une solution plus simple et plus propre : utiliser une bibliothèque de composants. Bootsrap est très connu en tant que framework CSS, et la bibliothèque boostrap-vue est construite sur cette base, fournissant des composants de bootstrap pour Vuejs.

‍

Cela nous permet de gagner beaucoup de temps lors du développement de vues frontales et c'est un jeu d'enfant à utiliser. Le seul problème que nous avons rencontré est qu'il est parfois pénible de le personnaliser. (dites bonjour à ! important dans votre CSS).

‍

Driver.js

Pour ne pas que les utilisateurs se sentent perdus lorsqu'ils arrivent pour la première fois sur notre page d'accueil, nous avons voulu montrer un petit tutoriel indiquant à l'utilisateur où naviguer et comment utiliser notre site. C'est un excellent moyen de guider les utilisateurs qui ne sont pas toujours experts dans ce domaine et qui se sentent facilement perdus. En plus de cela, nous disposons de fonctionnalités complexes qui nécessitent vraiment un didacticiel, comme notre page Workflow qui nous permet de combiner différentes API en un seul pipeline prêt à l'emploi.

‍

Pour notre cas d'utilisation, nous avons choisi d'utiliser driver.js, une bibliothèque hautement personnalisable pour montrer des visites/tutoriels à l'utilisateur sur votre site Web. C'est simple, fonctionne sur tous les navigateurs et s'adapte bien à notre cas d'utilisation.

Papaparse

Au cours de notre développement frontend, nous avons rencontré le besoin de convertir des fichiers csv en json et vice-versa. Nous avons trouvé une excellente bibliothèque appelée PapaParse, très simple à utiliser et qui nous a permis d'afficher une représentation conviviale des données CSV sur notre site Web

Voici un exemple de la facilité d'utilisation de PapaParse :

‍

//Analyse une chaîne CSV

var data = PAPA.parse (csv) ;

//Reconvertir au format CSV

var csv = PAPA.unparse (données) ;

//Analyse le fichier CSV local

PAPA.parse (fichier, {

complet : fonction (résultats) {

console.log (« Terminé : », results.data) ;

}

}) ;

‍

Voici ce que nous utilisons actuellement pour le front-end d'Eden AI. Cet article sera mis à jour si nous pensons que quelque chose de nouveau mérite d'être mentionné. Je serais ravie d'en discuter si c'est un sujet qui vous intéresse ou si vous souhaitez simplement me faire part de vos commentaires. Vous pouvez m'envoyer un e-mail kyrian.castel@edenai.co.

‍

‍