Le package NPM 'replicate' est un outil client puissant pour intégrer des modèles d'apprentissage automatique dans les applications React. Il permet aux développeurs d'utiliser facilement des modèles pré-entraînés et d'exécuter des inférences directement dans leurs applications sans avoir à gérer une infrastructure backend complexe. Voici un aperçu de la façon dont vous pouvez utiliser le package NPM replicate dans votre projet React. Nous examinerons également IronPDF, une bibliothèque de génération de PDF pour créer des PDF et combiner les deux bibliothèques afin de créer une application fonctionnelle.

Introduction à Replicate

Replicate est une plateforme en ligne qui offre un accès à des modèles d'apprentissage automatique via une API simple. Il héberge des modèles de divers domaines, tels que la génération d'images, l'analyse de texte, et plus encore. En utilisant le package NPM 'replicate', les développeurs peuvent intégrer ces modèles dans leurs applications de manière transparente.

Pour commencer

Installation

Pour utiliser **replicate** dans votre application React, vous devez d'abord installer le package. Vous pouvez le faire en utilisant npm ou yarn :

npm install replicate

ou

yarn add replicate

Clé API

Vous aurez besoin d'une clé API pour interagir avec l'API Replicate. Vous pouvez obtenir cette clé en vous inscrivant sur le site web de Replicate et en créant un nouveau jeton API.

Utilisation de base

Voici un guide étape par étape pour utiliser le package `replicate` dans une application React.

1. Importez le package et initialisez le client

import Replicate from 'replicate';
const output = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});

js

2. Exécuter une inférence

En supposant que vous souhaitiez utiliser un modèle pour générer une image à partir de texte, avec seulement quelques lignes de code, vous obtenez le résultat comme ci-dessous :

const result = await replicate.run("stability-ai/stable-diffusion", {
  input: {
    prompt: "a futuristic cityscape"
  }
}); // identifier and prediction parameters
console.log(result);

js

Exemple d'application

Créons une application React simple qui permet aux utilisateurs de générer des images à partir de descriptions textuelles pour démontrer l'utilisation de la réplication Node.

Configurer un nouveau projet React :

npx create-react-app replicate-example
cd replicate-example
npm install replicate

2. Créer un composant pour la génération d'images :

import React, { useState } from 'react';
import Replicate from 'replicate';
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'
});
const ImageGenerator = () => {
  const [prompt, setPrompt] = useState('');
  const [image, setImage] = useState(null);
  const generateImage = async () => {
    const result = await replicate.run("stability-ai/stable-diffusion", {
      input: { prompt }
    });
    setImage(result.output[0]);
  };
  return (
    <div>
      <h1>Image Generator</h1>
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)} // const input
        placeholder="Enter a prompt"
      />
      <button onClick={generateImage}>Generate Image</button>
      {image && <img src={image} alt="Generated" />}// prediction object
    </div>
  );
};
export default ImageGenerator;

js

3. Utilisez le composant dans votre application :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ImageGenerator from './ImageGenerator';
ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGenerator />
  </React.StrictMode>,
  document.getElementById('root')
);

js

Gestion des erreurs

Lorsqu'on travaille avec des API, il est crucial de gérer les erreurs avec élégance. Vous pouvez modifier la fonction 'generateImage' pour intercepter et afficher les erreurs :

const generateImage = async () => {
  try {
    const result = await replicate.run("stability-ai/stable-diffusion", {
      input: { prompt }
    });
    setImage(result.output[0]);
  } catch (error) {
    console.error("Error generating image:", error);
    alert("Failed to generate image. Please try again.");
  }
};

js

Présentation d'IronPDF

IronPDF est un package npm polyvalent conçu pour simplifier la génération de PDF dans les applications Node.js. Il vous permet de créer des documents PDF à partir de contenu HTML, URLs, ou de fichiers PDF existants. Que vous ayez besoin de générer des factures, des rapports ou d'autres types de documents, IronPDF rend le processus facile grâce à son API intuitive et son ensemble de fonctionnalités complètes.

Principales caractéristiques d'IronPDF

1. Conversion de HTML en PDF

Convertissez facilement le contenu HTML en documents PDF, parfait pour générer des PDF dynamiques à partir de contenu web.

2. Conversion d'URL en PDF

Créez des PDFs directement à partir d'URLs, vous permettant de capturer le contenu des pages web et de l'enregistrer sous forme de fichiers PDF de manière programmée.

3. Manipulation de PDF

Fusionner, diviser et manipuler des documents PDF existants avec facilité. IronPDF offre des fonctionnalités pour ajouter des pages, diviser des documents, créer des formulaires PDF, et plus encore.

4. Sécurité PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques, protégeant vos documents sensibles contre l'accès non autorisé.

5. Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et du formatage, en veillant à ce que les PDFs générés reflètent fidèlement le contenu original.

6. Compatibilité multiplateforme

La compatibilité d'IronPDF avec Windows, Linux et macOS le rend adapté à divers environnements de développement.

7. Intégration simple

Intégrez IronPDF dans vos applications Node.js facilement en utilisant son package npm. L'API bien documentée simplifie l'intégration des capacités de génération de PDF dans vos projets.

Que vous développiez une application web, un script côté serveur ou un outil en ligne de commande, IronPDF vous permet de créer des documents PDF de qualité professionnelle de manière efficace et fiable.

Générer un document PDF en utilisant IronPDF et utiliser le package NPM Recharts

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js (si vous ne l'avez pas déjà fait) en utilisant la commande suivante : Référez-vous ici

npx create-next-app@latest replicate-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Ensuite, accédez au répertoire de votre projet :

cd replicate-pdf

Installez les paquets nécessaires :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate

Créer un PDF : Maintenant, créons un simple exemple de génération de PDF à l'aide d'IronPDF. Dans votre composant Next.js (par exemple, pages/index.tsx), ajoutez le code suivant :

API de génération de PDF : La première étape consiste à créer une API backend pour générer le document PDF. Étant donné qu'IronPDF fonctionne uniquement côté serveur, nous devons créer une API à appeler lorsque les utilisateurs souhaitent générer un PDF. Créez un fichier dans le chemin pages/api/pdf/route.js et ajoutez le contenu ci-dessous :

// pages/api/pdf.js
import { NextRequest, NextResponse } from 'next/server';
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your key";
export const GET = async (req) => {
    const {searchParams} = new URL(req.url);
    const name = searchParams.get("url"); 
    try {
        const pdf = await PdfDocument.fromUrl(name);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        })
    } catch (error) {
        console.error('Error generating PDF:', error);
        return NextResponse.json({ detail: "error" }, { status: 500 });
    }
}

js

IronPDF nécessite une clé de licence, que vous pouvez obtenir depuis la page de licence et placer dans le code ci-dessus.

Ajoutez le code ci-dessous à index.js

'use client';
import { useState, useEffect, useRef } from "react";
import Image from "next/image";
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
export default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [error, setError] = useState(null);
  const promptInputRef = useRef(null);
  useEffect(() => {
    promptInputRef.current.focus();
  }, []);
  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch("/api/predictions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt: e.target.prompt.value,
      }),
    });
    let prediction = await response.json();
    if (response.status !== 201) {
      setError(prediction.detail);
      return;
    }
    setPrediction(prediction);
    while (
      prediction.status !== "succeeded" &&
      prediction.status !== "failed"
    ) {
      await sleep(1000);
      const response = await fetch(`/api/predictions/${prediction.id}`);
      prediction = await response.json();
      if (response.status !== 200) {
        setError(prediction.detail);
        return;
      }
      console.log({ prediction });
      setPrediction(prediction);
    }
  };
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + prediction.output[prediction.output.length - 1]);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  }
  return (
    <div className="container max-w-2xl mx-auto p-5">
      <h1 className="py-6 text-center font-bold text-2xl">
        IronPDF An Awesome Library for PDFs
      </h1>
      <p>Enter prompt to generate an image, Then click </p>
      <form className="w-full flex" onSubmit={handleSubmit}>
        <input
          type="text"
          className="flex-grow"
          name="prompt"
          placeholder="Enter a prompt to display an image"
          ref={promptInputRef}
        />
        <button className="button" type="submit">
          Go!
        </button>
        <button className="pdfButton" type="button" onClick={generatePdf}>
          Generate PDF
        </button>
      </form>
      {error && <div>{error}</div>}
      {prediction && (
        <>
          {prediction.output && (
            <div className="image-wrapper mt-5">
              <Image
                fill
                src={prediction.output[prediction.output.length - 1]}
                alt="output"
                sizes="100vw"
              />
            </div>
          )}
          <p className="py-3 text-sm opacity-50">status: {prediction.status}</p>
        </>
      )}
    </div>
  );
}

js

Explication du code

1. Instructions d'importation

Le code commence par importer les modules nécessaires à partir de bibliothèques externes : 'useState', 'useEffect' et 'useRef' depuis "react" : Ce sont des Hooks React qui permettent aux composants fonctionnels de gérer l'état, de gérer les effets secondaires, et de créer des références aux éléments du DOM, respectivement.

'Image' de "next/image" : Il s'agit d'un composant fourni par Next.js pour un chargement d'images optimisé. L'instruction "use client" n'est pas une importation standard en JavaScript ou React. Il semble que cela soit spécifique à Next.js (un framework React) et indique que le composant qui l'utilise doit être rendu côté client. Cela garantit que le JavaScript nécessaire pour ce composant est envoyé au client.

2. Fonction du composant

Le composant 'Home' est défini comme l'exportation par défaut. À l'intérieur du composant, il y a plusieurs variables d'état ('prediction', 'error') gérées à l'aide du hook 'useState'.

Une référence ('promptInputRef') est créée en utilisant le hook 'useRef'. Le hook 'useEffect' est utilisé pour se concentrer sur le 'promptInputRef' lorsque le composant est monté.

La fonction 'handleSubmit' est une fonction asynchrone qui gère la soumission de formulaire. Il envoie une requête POST à un point de terminaison API (/api/predictions) avec une valeur d'invite.

La réponse est traitée, et si elle réussit, l'état de 'prédiction' est mis à jour. La fonction entre ensuite dans une boucle, vérifiant périodiquement l'état de la prédiction jusqu'à ce qu'elle réussisse ou échoue. La méthode 'generatePdf' récupère un PDF à partir d'un autre point d'extrémité API (`/api/pdf`) basé sur le dernier résultat dans l'état 'prediction'.

3. Balises HTML

Le composant retourne un div conteneur avec un certain style ('max-w-2xl', 'mx-auto', 'p-5'). À l'intérieur du conteneur, il y a un élément '

' avec le texte "AwesomeIron" (qui pourrait être le nom ou le titre d'un projet).

Dans l'ensemble, ce code semble faire partie d'une application Next.js qui gère des prédictions et génère des PDFs en fonction des saisies de l'utilisateur. La déclaration "use client" est spécifique à Next.js et garantit le rendu côté client pour le composant où elle est utilisée. Si vous avez des questions spécifiques concernant une partie particulière du code

SORTIE

Entrez le texte pour la prédiction comme "car", puis l'image ci-dessous est prédite

Ensuite, cliquez sur Générer PDF pour créer un document PDF.

PDF DE SORTIE généré à l'aide de IronPDF

Licence d'IronPDF

Page IronPDF.

Placez la clé de licence dans l'application comme indiqué dans l'exemple suivant :

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

Conclusion

Le package NPM `replicate` offre un moyen pratique d'intégrer des modèles d'apprentissage automatique puissants dans les applications React. En suivant les étapes décrites dans cet article, vous pouvez facilement intégrer des capacités de génération d'images dans vos projets. Cela ouvre un large éventail de possibilités pour créer des expériences utilisateur innovantes et interactives.

N'oubliez pas d'explorer les autres modèles disponibles sur la plateforme Replicate pour enrichir davantage les fonctionnalités de vos applications.

De plus, IronPDF est une bibliothèque PDF puissante pour les fonctionnalités de génération et de manipulation de PDF, ainsi que la possibilité de rendre des graphiques réactifs dans des PDFs à la volée. Il permet aux développeurs d'intégrer des packs de graphiques riches en fonctionnalités dans des applications en seulement quelques lignes. Avec ces deux bibliothèques, les développeurs peuvent travailler avec la technologie d'intelligence artificielle moderne et enregistrer les résultats de manière fiable sous forme de PDF.