Créer un éditeur de publications de blog alimenté par l'IA avec AI21 Labs et ReactJS

Introduction to AI21 Labs

AI21 Labs est un laboratoire d'IA innovant dédié à transformer notre manière d'interagir avec la technologie, en particulier dans les domaines de l'écriture et de la compréhension. Avec pour objectif de redéfinir la technologie d'assistance par machine, AI21 Labs vise à faire des machines de véritables partenaires de réflexion. Cet accent sur le traitement du langage naturel (NLP) permet une compréhension et une génération fluides du langage humain, donnant naissance à des solutions puissantes telles que des assistants d'écriture pilotés par IA et des outils de résumé.

Parmi ses offres se trouve l'AI21 Studio polyvalent, qui comprend un éventail d'API de modèles de langage de grande taille, facilement personnalisables pour répondre à des besoins d'application spécifiques. En tirant parti d'AI21 Labs, les entreprises peuvent améliorer l'expérience utilisateur grâce à des fonctionnalités dynamiques alimentées par l'IA.

Introduction à ReactJS

ReactJS, souvent abrégé en React, est une bibliothèque JavaScript largement utilisée pour la construction d'interfaces utilisateur, en particulier pour les applications monopage. Elle gère efficacement la couche de vue dans les applications web et mobiles, permettant aux développeurs de créer des interfaces utilisateurs interactives avec facilité.

En permettant des modifications des données sans avoir besoin de recharger la page, React assure des applications web plus rapides, évolutives et simples. Son principe de conception se concentre uniquement sur les interfaces utilisateur, le rendant compatible avec d'autres bibliothèques ou frameworks de programmation.

Dans ce tutoriel, nous allons explorer la construction d'un frontend de site web utilisant ReactJS aux côtés des capacités IA d'AI21 Labs, offrant un guide complet adapté aux développeurs expérimentés comme aux novices.

Prérequis

• Connaissances de base en Typescript et/ou React
• Accès à l'API AI21 Labs

Plan

1. Initialisation du projet
2. Écriture des fichiers du projet
3. Test de l'application d'éditeur de blog alimentée par l'IA
4. Discussion

Initialisation du projet

Installation de Create React App

Pour créer efficacement une nouvelle application React.js, nous utilisons Create React App (CRA) en l'installant globalement via npm :

npm install -g create-react-app

Création d'un nouveau projet React avec Typescript

Exécutez la commande suivante pour configurer un nouveau projet nommé ai21-blog-editor en utilisant CRA avec un modèle Typescript :

npx create-react-app ai21-blog-editor --template typescript

Cela initialise un nouveau répertoire nommé ai21-blog-editor avec une application React pleinement fonctionnelle qui prend en charge Typescript.

Intégration de TailwindCSS

Installation de TailwindCSS

Conformément à la documentation officielle de Tailwind CSS, nous commencerons par installer TailwindCSS et initialiser la bibliothèque :

npm install -D tailwindcss postcss autoprefixer

Après installation, nous pouvons initialiser Tailwind avec la commande :

npx tailwindcss init -p

Configuration des chemins de modèles

Nous ajoutons ensuite nos chemins de modèles dans le fichier tailwind.config.js. Localisez le fichier et ajoutez les lignes respectives :

content: ["./src/**/*.{js,jsx,ts,tsx}"]

Ajout des directives Tailwind

Ensuite, nous incluons les directives Tailwind dans notre fichier ./src/index.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

Maintenant, Tailwind CSS s'intègre parfaitement dans notre projet !

Installation des bibliothèques requises

Avant de continuer, finalisons notre préparation en installant des bibliothèques telles que dotenv pour la gestion des variables d'environnement :

npm install dotenv

Écriture des fichiers du projet

App.tsx

Commençons par mettre à jour le fichier App.tsx pour établir la structure de base de l'application, en supprimant les imports inutilisés :

import React from 'react';
import './App.css';

function App() {
  return (
Application d'édition de blog
);
}

export default App;

BlogEditor.tsx

Maintenant, créez un nouveau fichier nommé BlogEditor.tsx à l'intérieur du dossier src avec la structure de base suivante :

import React, { useState } from 'react';

const BlogEditor = () => {
const [text, setText] = useState('');
const [link, setLink] = useState('');
const [loading, setLoading] = useState(false);

const API_KEY = process.env.REACT_APP_AI21_API_KEY;

return (
   

     
   
);
};

export default BlogEditor;

Variables d'état et constantes

Nous allons maintenir les variables d'état suivantes :

• text : Texte actuel du post de blog.
• link : URL à résumer (facultatif).
• loading : Indique le statut de la demande API.
• API_KEY : Utilisé pour la clé API AI21.

Gestionnaires d'événements

• handleChangeText : Fonction pour mettre à jour la variable d'état du texte.
• handleChangeLink : Fonction pour mettre à jour la variable d'état du lien.

Fonctions d'aide API

• handleGenerateCompletion : Appelle l'API AI21 pour la complétion de texte.
• handleFixGrammar : Envoie une demande pour corriger les erreurs grammaticales.
• handleParaphrase : Demande la reformulation du texte d'entrée.
• handleImproveText : Suggère des améliorations pour le texte actuel.
• handleSummarizeLink : Extrait un résumé d'un lien fourni.

.env

Ce fichier est nécessaire pour le stockage des variables d'environnement, qui inclut les clés API et d'autres données confidentielles :

REACT_APP_AI21_API_KEY=your_api_key_here

index.css

Ajoutez des styles pour l'indicateur de chargement et d'autres éléments de l'interface utilisateur selon les besoins dans ce fichier.

index.html

Personnalisez le fichier index.html pour personnaliser le titre de votre application :

<title>Application d'édition de blog</title>

Test de l'application d'édition de blog alimentée par l'IA

Vous pouvez exécuter l'application en utilisant :

npm start

L'application devrait être accessible via localhost:3000. Testez les fonctionnalités, telles que la génération de complétions de texte, la correction grammaticale, la reformulation, l'amélioration du texte et la synthèse des liens, pour voir comment elles fonctionnent.

Conclusion

En résumé, nous avons exploré les fonctionnalités multifonctionnelles fournies par AI21 Labs et comment les exploiter dans une application d'édition de blog utilisant ReactJS. En intégrant des fonctionnalités IA de pointe comme la complétion de texte, la correction grammaticale, la reformulation, les suggestions d'amélioration et la synthèse de lien, nous permettons aux utilisateurs d'améliorer considérablement leur expérience d'écriture. Commencez à construire vos applications alimentées par l'IA dès aujourd'hui !