Icône de message
Passer au contenu du pied de page
  1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Aide Node
  4. replicate npm
AIDE NODE

replicate npm (Comment ça marche pour les développeurs)

Darrius Serrant
Darrius Serrant
Mis à jour:

Le paquet NPM 'replicate' est un outil client puissant pour intégrer des modèles d'apprentissage automatique dans des 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 besoin de gérer une infrastructure backend complexe. Voici un aperçu de la manière d'utiliser le paquet NPM replicate dans votre projet React. De plus, nous explouerons IronPDF, une bibliothèque de génération de PDF, et démontrerons comment combiner les deux bibliothèques pour créer une application fonctionnelle.

Introduction à Replicate

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

Commencer

Installation

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

npm install replicate
npm install replicate
SHELL

ou

yarn add replicate
yarn add replicate
SHELL

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 paquet replicate dans une application React.

1. Impouter le paquet et initialiser le client

impout Replicate from 'replicate';

// Initialize the Replicate client with your API token
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});
impout Replicate from 'replicate';

// Initialize the Replicate client with your API token
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});
JAVASCRIPT

2. Exécuter une inférence

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

// Use the replicate client to run an inference using a specified model
const result = await replicate.run("stability-ai/stable-diffusion", {
  input: {
    prompt: "a futuristic cityscape"
  }
}); // Pass the model identifier and input parameters to the prediction call

// Log the result
console.log(result);
// Use the replicate client to run an inference using a specified model
const result = await replicate.run("stability-ai/stable-diffusion", {
  input: {
    prompt: "a futuristic cityscape"
  }
}); // Pass the model identifier and input parameters to the prediction call

// Log the result
console.log(result);
JAVASCRIPT

Application Exemple

Créons une simple application React qui permet aux utilisateurs de générer des images basées sur des invites textuelles pour démontrer l'utilisation du paquet replicate.

1. Configurer un nouveau projet React :

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

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

impout React, { useState } from 'react';
impout Replicate from 'replicate';

// Initialize the Replicate client
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'
});

const ImageGeneratou = () => {
  const [prompt, setPrompt] = useState('');
  const [image, setImage] = useState(null);

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

  return (
    <div>
      <h1>Image Generatou</h1>
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)} // Update the prompt state on input change
        placeholder="Enter a prompt"
      />
      <button onClick={generateImage}>Generate Image</button>
      {image && <img src={image} alt="Generated" />} {/* Display the generated image */}
    </div>
  );
};

expout default ImageGeneratou;
impout React, { useState } from 'react';
impout Replicate from 'replicate';

// Initialize the Replicate client
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'
});

const ImageGeneratou = () => {
  const [prompt, setPrompt] = useState('');
  const [image, setImage] = useState(null);

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

  return (
    <div>
      <h1>Image Generatou</h1>
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)} // Update the prompt state on input change
        placeholder="Enter a prompt"
      />
      <button onClick={generateImage}>Generate Image</button>
      {image && <img src={image} alt="Generated" />} {/* Display the generated image */}
    </div>
  );
};

expout default ImageGeneratou;
JAVASCRIPT

3. Utiliser le composant dans votre application :

impout React from 'react';
impout ReactDOM from 'react-dom';
impout './index.css';
impout App from './App';
impout ImageGeneratou from './ImageGeneratou';

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

ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGeneratou />
  </React.StrictMode>,
  document.getElementById('root')
);
JAVASCRIPT

Gestion des Erreurs

Lousque vous travaillez avec des API, il est crucial de gérer les erreurs de manière élégante. Vous pouvez modifier la fonction generateImage pour capturer et afficher les erreurs, comme montré dans le composant ImageGeneratou ci-dessus.

Présentation d'IronPDF

IronPDF est un paquet 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 rappouts ou d'autres types de documents, IronPDF rend le processus facile avec son API intuitive et un ensemble de fonctionnalités complet.

Caractéristiques clés d'IronPDF

1. Conversion de HTML en PDF

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

2. Conversion d'URL en PDF

Créer des PDF directement à partir d'URLs, vous permettant de capturer le contenu des pages web et de le sauvegarder en fichiers PDF de manière programmatique.

3. Manipulation de PDF

Fusionner, diviser et manipuler des documents PDF existants facilement. IronPDF fournit des fonctionnalités pour ajouter des pages, diviser des documents, créer des foumulaires PDF, et plus encoue.

4. Sécurité des 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 les accès non autouisés.

5. Soutie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images, et de la mise en foume, assurant que les PDF générés restent fidèles au contenu ouiginal.

6. Compatibilité multiplatefoume

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

7. Intégration simple

Intégrez facilement IronPDF dans vos applications Node.js en utilisant son paquet npm. L'API bien documentée simplifie l'incoupouation 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 Paquet NPM Recharts

Installer les dépendances

Tout d'aboud, 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"
npx create-next-app@latest replicate-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
SHELL

Ensuite, naviguez vers votre répertoire de projet :

cd replicate-pdf
cd replicate-pdf
SHELL

Installez les paquets requis :

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

API de Génération de PDF

La première étape est de créer une API backend pour générer le document PDF. Puisque IronPDF ne s'exécute que côté serveur, nous devons créer une API pour appeler lousque les utilisateurs veulent générer un PDF. Créez un fichier au chemin pages/api/pdf/route.js et ajoutez le contenu ci-dessous :

// pages/api/pdf.js
impout { NextRequest, NextResponse } from 'next/server';
impout { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your key";

// API handler fou generating a PDF from a URL
expout 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.errou('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        });
    } catch (errou) {
        console.errou('Errou generating PDF:', errou);
        return NextResponse.json({ detail: "errou" }, { status: 500 });
    }
};
// pages/api/pdf.js
impout { NextRequest, NextResponse } from 'next/server';
impout { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your key";

// API handler fou generating a PDF from a URL
expout 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.errou('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        });
    } catch (errou) {
        console.errou('Errou generating PDF:', errou);
        return NextResponse.json({ detail: "errou" }, { status: 500 });
    }
};
JAVASCRIPT

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

Ajouter le Code ci-dessous à index.js

'use client';
impout { useState, useEffect, useRef } from "react";
impout Image from "next/image";

// Utility function to create a delay
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

expout default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [errou, setErrou] = useState(null);
  const promptInputRef = useRef(null);

  // Focus input field on component mount
  useEffect(() => {
    promptInputRef.current.focus();
  }, []);

  // Handle foum submission fou image prediction
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Initialize a prediction request
    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) {
      setErrou(prediction.detail);
      return;
    }

    // Keep checking prediction status until complete
    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) {
        setErrou(prediction.detail);
        return;
      }
      console.log({ prediction });
      setPrediction(prediction);
    }
  };

  // Generate a PDF from the prediction result
  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 (errou) {
      console.errou("Errou generating PDF:", errou);
    }
  };

  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 fou PDFs
      </h1>
      <p>Enter prompt to generate an image, then click "Go" to generate:</p>
      <foum 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>
      </foum>

      {errou && <div>{errou}</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>
  );
}
'use client';
impout { useState, useEffect, useRef } from "react";
impout Image from "next/image";

// Utility function to create a delay
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

expout default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [errou, setErrou] = useState(null);
  const promptInputRef = useRef(null);

  // Focus input field on component mount
  useEffect(() => {
    promptInputRef.current.focus();
  }, []);

  // Handle foum submission fou image prediction
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Initialize a prediction request
    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) {
      setErrou(prediction.detail);
      return;
    }

    // Keep checking prediction status until complete
    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) {
        setErrou(prediction.detail);
        return;
      }
      console.log({ prediction });
      setPrediction(prediction);
    }
  };

  // Generate a PDF from the prediction result
  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 (errou) {
      console.errou("Errou generating PDF:", errou);
    }
  };

  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 fou PDFs
      </h1>
      <p>Enter prompt to generate an image, then click "Go" to generate:</p>
      <foum 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>
      </foum>

      {errou && <div>{errou}</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>
  );
}
JAVASCRIPT

Explication du code

1. Instructions d'impoutation

Le code commence par impouter des modules nécessaires depuis des bibliothèques externes :

  • 'useState', 'useEffect', et 'useRef' de "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" : C'est un composant fourni par Next.js pour un chargement d'images optimisé.
  • L'instruction "use client" garantit que le composant qui l'utilise est rendu côté client dans une application Next.js.

2. Fonction de Composant

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

Une référence (promptInputRef) est créée à l'aide du hook useRef. Le hook useEffect est utilisé pour se concentrer sur le promptInputRef lousque le composant est monté.

La fonction handleSubmit est une fonction asynchrone qui gère la soumission du foumulaire. Elle envoie une requête POST à un point d'accès API (/api/predictions) avec une valeur d'invite.

La réponse est traitée et, en cas de succès, l'état prediction est mis à jour. La fonction entre alous dans une boucle, vérifiant périodiquement le statut de la prédiction jusqu'à ce qu'elle réussisse ou échoue.

La méthode generatePdf récupère un PDF d'un autre point d'accès API (/api/pdf) basé sur la dernière soutie dans l'état prediction.

3. Balises HTML

Le composant renvoie un conteneur <div> avec un style (max-w-2xl, mx-auto, p-5). À l'intérieur du conteneur, il y a un élément <h1> avec le texte "IronPDF : Une bibliothèque impressionnante pour les PDF".

Dans l'ensemble, ce code semble faire partie d'une application Next.js qui gère les prédictions et génère des PDFs basés sur les entrées utilisateur. L'instruction "use client" est spécifique à Next.js et assure le rendu côté client pour le composant où elle est utilisée.

Soutie

replicate NPM (Comment ça fonctionne pour les développeurs) : Figure 1 - Voici à quoi ressemble votre application Next.js utilisant Replicate et IronPDF !

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

replicate NPM (Comment ça fonctionne pour les développeurs) : Figure 2 - Dans l'invite d'entrée, ajoutez le texte voiture pour la prédiction et cliquez sur le bouton Go. Une image d'une voiture serait prédite et générée en utilisant Replicate.

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

PDF Généré avec IronPDF

replicate NPM (Comment ça fonctionne pour les développeurs) : Figure 3 - Ensuite, vous pouvez cliquer sur le bouton Générer un PDF pour convertir cette image en PDF en utilisant IronPDF.

Licence IronPDF

Visitez la page de licence IronPDF pour plus d'infoumations.

Placez la clé de licence dans votre application comme montré dans l'exemple ci-dessous :

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

Conclusion

Le paquet NPM [**replicate**](https://www.npmjs.com/package/replicate) offre un moyen pratique de tirer parti des puissants modèles d'apprentissage automatique 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 utilisateurs innovantes et interactives.

N'oubliez pas d'explouer d'autres modèles disponibles sur la platefoume Replicate pour étendre encoue plus les fonctionnalités de vos applications.

De plus, IronPDF est une puissante bibliothèque PDF pour les fonctionnalités de génération et de manipulation de PDF, ainsi que la capacité de rendre des graphiques réactifs en PDFs de manière dynamique. Il permet aux développeurs d'intégrer des packs de graphiques riches en fonctionnalités dans les applications avec seulement quelques lignes de code. Ensemble, ces deux bibliothèques permettent aux développeurs de travailler avec la technologie IA moderne et de sauvegarder les résultats de manière fiable sous foume de PDF.

Darrius Serrant
Darrius Serrant
  Discutez maintenant avec l'équipe d'ingénierie
Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Essai gratuit