Schritt-für-Schritt-Anleitung zur Integration der Google Vertex PaLM API mit monday.com

Einführung

monday.com ist ein cloud-basiertes Arbeitsbetriebsystem, das Benutzern ermöglicht, ihre eigenen Anwendungen und Projektmanagementsoftware zu erstellen. Es ist eine All-in-One-Arbeitsmanagementplattform, die Teams hilft, ihren Arbeitsablauf zu optimieren, nahtlos zusammenzuarbeiten und komplexe Projekte effektiv zu verwalten.

PaLM2 hingegen ist Googles fortschrittliches Sprachmodell, das in Aufgaben des Denkens, wie Codeverständnis, Klassifikation, Fragenbeantwortung, Übersetzung und natürliche Sprachgenerierung, hervorragende Leistungen erbringt. Es verbessert sich im Vergleich zu früheren Modellen durch optimierte Skalierung, eine verbesserte Datenmischung und eine verbesserte Modellarchitektur. PaLM2 wird rigoros bewertet, um einen verantwortungsvollen Einsatz von KI zu gewährleisten, und wird in verschiedenen hochmodernen Modellen und generativen KI-Funktionen bei Google eingesetzt.

Voraussetzungen

Um die Google Vertex PaLM API nutzen zu können, sollten Sie der Warteliste beitreten.

Was Sie Lernen Werden

In diesem Tutorial lernen Sie, wie Sie eine KI-gesteuerte Assistant-App auf monday.com unter Verwendung der Google Vertex PaLM API, die vom PaLM2-Modell unterstützt wird, erstellen.

Lernziele

• Wie man eine React-App erstellt.
• Wie man die App mit Tailwind CSS stylt.
• Wie man eine benutzerdefinierte API mit FastAPI erstellt.
• Wie man mit GraphQL arbeitet.
• Wie man Anfragen und Antworten verarbeitet.
• Wie man mit PDF-Dateien arbeitet.
• Wie man eine App auf monday.com erstellt.
• Wie man die Google Vertex PaLM API mit monday.com integriert.
• Wie man eine App auf monday.com veröffentlicht.

Zeit zum Codieren und Lernen!

Ein Neues Projekt Erstellen

Als erstes erstellen wir einen neuen Ordner für unser Projekt. Öffnen Sie Visual Studio Code und erstellen Sie einen neuen Ordner mit dem Namen monday-palm-tutorial oder wie auch immer Sie möchten.

React-App Erstellen

Jetzt erstellen wir eine React-App mit dem Befehl npx create-react-app. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus.

Tailwind CSS Installieren

Als nächstes installieren wir Tailwind CSS mit dem Befehl npm install. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus.

Tailwind CSS Konfigurieren

Als nächstes konfigurieren wir Tailwind CSS. Öffnen Sie die Datei tailwind.config.js und ersetzen Sie den alten Code durch den folgenden:

Tailwind-Direktiven Hinzufügen

Fügen Sie die Tailwind-Direktiven zu Ihrem CSS hinzu, indem Sie die Datei src/index.css öffnen und den alten Code durch den folgenden ersetzen:

UI-Schnittstelle Erstellen

Als nächstes erstellen wir die UI-Schnittstelle. Öffnen Sie die Datei src/App.js und entfernen Sie alles darin, kopieren Sie stattdessen die folgenden Zeilen Code:

Wir können sagen, dass wir die ersten Schritte der UI-Schnittstelle abgeschlossen haben. Lassen Sie uns nun die Logik unserer App implementieren.

Implementierung des Zustandsmanagements

Innerhalb der App-Komponente verwenden wir den useState-Hook, um den Zustand unserer App zu speichern. Darüber hinaus nutzen wir den useEffect-Hook, um Daten von der monday.com API abzurufen. Außerdem erstellen wir eine Funktion, um die Anfrage und Antwort von der monday.com API zu verarbeiten.

Board- und Item-Auswahl

Erstellen Sie ein Dropdown-Menü, um ein bestimmtes Board auszuwählen. Der onChange-Ereignishandler ruft die Funktion handleBoardDropdownChange auf, um das ausgewählte Board festzulegen, während das Attribut value das ausgewählte Board aktualisiert.

Die App Testen

Testen wir unsere App. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus. Wenn alles funktioniert, sollten Sie die erwarteten Ergebnisse sehen.

Verarbeiten von Dateien vom Ausgewählten Board

Erstellen Sie eine Funktion, die Dateien vom ausgewählten Board verarbeitet. Hinweis: Wenn kein Board ausgewählt ist, bleibt die Funktion leer, da useEffect nicht aufgerufen wird.

Auswahl von Elementen und Bearbeitung von Antworten

Erstellen Sie Dropdown-Menüs zur Auswahl von Elementen und Dateien, und implementieren Sie entsprechende Ereignishandler zur Verwaltung von Benutzeraktionen. Erstellen Sie dann eine Funktion zur Verarbeitung von Text und ein Textfeld zum Eingeben von Text.

Erstellen eines Benutzerdefinierten API-Endpunkts (FastAPI)

In diesem Abschnitt werden wir einen benutzerdefinierten API-Endpunkt mit FastAPI erstellen. Dieser Endpunkt sendet das Eingabeaufforderungs- und Dateiobjekt an die Google Vertex PaLM API und gibt die Antwort zurück.

Backend Einrichten

Zuerst erstellen Sie einen neuen Ordner namens backend im Ordner monday-palm-tutorial. Öffnen Sie den Backend-Ordner in Ihrem Code-Editor und erstellen Sie eine neue Datei namens api.py.

Letzte Schliffe

Jetzt testen wir unseren API-Endpunkt und stellen sicher, dass alles wie erwartet funktioniert.

Fazit

Herzlichen Glückwunsch! Sie haben die vollständige Full-Stack-App abgeschlossen. Für weitere Informationen zur Veröffentlichung Ihrer App auf monday.com, schauen Sie sich unser monday.com + Stable Diffusion Tutorial an.