Guide étape par étape pour intégrer l'API Google Vertex PaLM avec monday.com

Introduction

monday.com est un système d'exploitation de travail basé sur le cloud qui permet aux utilisateurs de créer leurs propres applications et logiciels de gestion de projet. C'est une plateforme de gestion du travail tout-en-un qui aide les équipes à rationaliser leur flux de travail, à collaborer sans heurts et à gérer efficacement des projets complexes.

PaLM2, en revanche, est le modèle de langage avancé de Google qui excelle dans les tâches de raisonnement, telles que la compréhension de code, la classification, la réponse aux questions, la traduction et la génération de langage naturel. Il améliore les modèles précédents grâce à une mise à l'échelle optimisée, un mélange de jeux de données amélioré et une architecture de modèle améliorée. PaLM2 est rigoureusement évalué pour le déploiement d'IA responsable et est utilisé dans divers modèles de pointe et fonctionnalités d'IA générative chez Google.

Prérequis

Pour utiliser l'API Google Vertex PaLM, vous devez vous inscrire sur la liste d'attente.

Ce que vous apprendrez

Dans ce tutoriel, vous apprendrez à créer une application d'assistant alimentée par l'IA sur monday.com en utilisant l'API Google Vertex PaLM alimentée par le modèle PaLM2.

Objectifs d'apprentissage

• Comment créer une application React.
• Comment styliser votre application en utilisant Tailwind CSS.
• Comment créer une API personnalisée en utilisant FastAPI.
• Comment travailler avec GraphQL.
• Comment gérer les requêtes et les réponses.
• Comment travailler avec des fichiers PDF.
• Comment créer une application sur monday.com.
• Comment intégrer l'API Google Vertex PaLM avec monday.com.
• Comment publier une application sur monday.com.

Il est temps de coder et d'apprendre !

Créer un nouveau projet

Tout d'abord, créons un nouveau dossier pour notre projet. Ouvrez Visual Studio Code et créez un nouveau dossier nommé monday-palm-tutorial ou ce que vous souhaitez.

Créer une application React

Maintenant, créons une application React en utilisant la commande npx create-react-app. Ouvrez votre terminal et exécutez la commande suivante.

Installer Tailwind CSS

Ensuite, installons Tailwind CSS en utilisant la commande npm install. Ouvrez votre terminal et exécutez la commande suivante.

Configurer Tailwind CSS

Ensuite, configurons Tailwind CSS. Ouvrez le fichier tailwind.config.js et remplacez l'ancien code par le suivant :

Ajouter des directives Tailwind

Ajoutez les directives Tailwind à votre CSS en ouvrant le fichier src/index.css et remplacez l'ancien code par le suivant :

Créer l'interface utilisateur

Ensuite, créons l'interface utilisateur. Ouvrez le fichier src/App.js et supprimez tout le contenu à l'intérieur, puis copiez/collez les lignes de code suivantes :

Nous pouvons dire que nous avons terminé les premières étapes de l'interface utilisateur. Maintenant, mettons en œuvre la logique de notre application.

Mise en œuvre de la gestion d'état

À l'intérieur du composant App, nous utiliserons le hook useState pour stocker l'état de notre application. De plus, nous utiliserons le hook useEffect pour récupérer des données de l'API monday.com. En outre, nous créerons une fonction pour gérer la requête et la réponse de l'API monday.com.

Sélection de tableau et d'élément

Créez un menu déroulant pour sélectionner un tableau spécifique. Le gestionnaire d'événements onChange appellera la fonction handleBoardDropdownChange pour définir le tableau sélectionné, tandis que l'attribut value mettra à jour le tableau sélectionné.

Tester l'application

Testons notre application. Ouvrez votre terminal et exécutez la commande suivante. Si tout fonctionne bien, vous devriez voir les résultats attendus.

Gestion des fichiers du tableau sélectionné

Créez une fonction qui gère les fichiers du tableau sélectionné. Remarque : Si aucun tableau n'est sélectionné, la fonction sera vide car useEffect ne sera pas invoqué.

Sélection d'éléments et gestion des réponses

Créez des menus déroulants pour sélectionner des éléments et des fichiers, et implémentez les gestionnaires d'événements respectifs pour gérer les actions de l'utilisateur. Ensuite, créez une fonction pour traiter le texte et une zone de texte pour entrer du texte.

Créer un point de terminaison API personnalisé (FastAPI)

Dans cette section, nous créerons un point de terminaison API personnalisé en utilisant FastAPI. Ce point de terminaison enverra l'invite et le fichier à l'API Google Vertex PaLM et renverra la réponse.

Mise en place du backend

Tout d'abord, créez un nouveau dossier appelé backend à l'intérieur du dossier monday-palm-tutorial. Ouvrez le dossier backend dans votre éditeur de code et créez un nouveau fichier appelé api.py.

Derniers détails

Maintenant, testons notre point de terminaison API et assurons-nous que tout fonctionne comme prévu.

Conclusion

Félicitations ! Vous avez terminé l'application full-stack. Pour plus d'informations sur la publication de votre application sur monday.com, consultez notre tutoriel monday.com + Stable Diffusion.