AIDE SUR LES NœUDS

répliquer npm (Comment ça fonctionne pour les développeurs)

Publié septembre 29, 2024

Le 'répliquerLe package NPM 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 lerépliquer le package NPMdans votre projet React. Nous examinerons égalementIronPDF, une bibliothèque de génération de PDF pour générer des PDF et combiner les deux bibliothèques afin de créer une application fonctionnelle.

Introduction à Replicate

Reproduireest 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

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 leReproduire le site webet créer 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'    
});

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

JAVASCRIPT

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);

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

JAVASCRIPT

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.

1. 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;

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;

JAVASCRIPT

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')
);

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')
);

JAVASCRIPT

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.");
  }
};

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.");
  }
};

JAVASCRIPT

Présentation d'IronPDF

IronPDFest 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 deContenu HTML, URL, ou des 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 interface intuitive.APIet ensemble de fonctionnalités complet.

Principales caractéristiques d'IronPDF

1. Conversion de HTML en PDF

Facilementconvertir 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 en toute simplicité. IronPDF offre des fonctionnalités pour ajouter des pages, diviser des documents,création de formulaires PDFet bien d'autres choses encore.

4. Sécurité PDF

Protégez vos documents PDF enchiffrementles avecmots de passeou en appliquantsignatures numériques, protégeant vos documents sensibles contre tout 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 encore fait) à l'aide de la commande suivante : Référerici

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 exemple simple de génération d'un PDF en utilisant 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 });
    }
}

// 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 });
    }
}

JAVASCRIPT

IronPDF nécessite une clé de licence, que vous pouvez obtenir auprès de lpage de licenceet placez 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>
  );
}

'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>
  );
}

JAVASCRIPT

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" : C'est un composant fourni par Next.js pour un chargement d'image optimisé. La déclaration "use client" n'est pas une importation standard en JavaScript ou React. Il semble être spécifique à Next.js(un framework React)et indique que le composant qui l'utilise doit être rendu côté client. Il 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.('prédiction', 'erreur')géré à l'aide du crochet 'useState'.

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

La fonction 'handleSubmit' est une fonction asynchrone qui gère la soumission du 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 de terminaison API.(/api/pdf)en fonction de la dernière sortie dans l'état 'prédiction'.

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 un nom de projet ou un titre).
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

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

Entrez le texte à prédire comme "car", puis l'image ci-dessous est prédite.

répliquer npm(Comment cela fonctionne-t-il pour les développeurs ?): Figure 2 - Dans l'entrée de l'invite, ajoutez le texte voiture pour la prédiction et cliquez sur le bouton Aller. Une image d'une voiture serait prédite et générée en utilisant Replicate.

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

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

répliquer npm (Comment cela fonctionne pour les développeurs) : Figure 3 - Ensuite, vous pouvez cliquer sur le bouton Générer PDF pour convertir cette image en PDF en utilisant IronPDF.

Licence d'IronPDF

IronPDF page.

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";

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

JAVASCRIPT

Conclusion

La `répliquerLe package NPM offre un moyen pratique d'utiliser 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 leReproduireplateforme pour étendre encore plus les fonctionnalités de vos applications.

Aussi,IronPDFest une puissante bibliothèque PDF pour les fonctionnalités de génération et de manipulation de PDF, ainsi que la capacité derendre des graphiques réactifsdans les 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.

Regan Pun

Ingénieur logiciel

LinkedIn

Regan est diplômé de l'université de Reading, où il a obtenu une licence en ingénierie électronique. Avant de rejoindre Iron Software, il s'était concentré sur une seule tâche. Ce qu'il apprécie le plus chez Iron Software, c'est la diversité des tâches qu'il peut accomplir, qu'il s'agisse d'apporter une valeur ajoutée aux ventes, à l'assistance technique, au développement de produits ou à la commercialisation. Il aime comprendre comment les développeurs utilisent la bibliothèque d'Iron Software et utiliser ces connaissances pour améliorer continuellement la documentation et développer les produits.

< PRÉCÉDENT
xml2js npm (Comment cela fonctionne pour les développeurs)

SUIVANT >
toastify npm (Comment cela fonctionne pour les développeurs)

Sur cette page