Test dans un environnement réel
Test en production sans filigrane.
Fonctionne partout où vous en avez besoin.
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.
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 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
npm install replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install replicate
ou
yarn add replicate
yarn add replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add replicate
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.
Voici un guide étape par étape pour utiliser le package `replicate` dans une application React.
import Replicate from 'replicate';
const output = new Replicate({
auth: 'YOUR_API_TOKEN'
});
import Replicate from 'replicate';
const output = new Replicate({
auth: 'YOUR_API_TOKEN'
});
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import Replicate from 'replicate'; const output = New Replicate({ auth: 'YOUR_API_TOKEN' });
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);
const result = Await replicate.run("stability-ai/stable-diffusion", {
input:= { prompt:= "a futuristic cityscape" }
}) ' identifier and prediction parameters
console.log(result)
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.
npx create-react-app replicate-example
cd replicate-example
npm install replicate
npx create-react-app replicate-example
cd replicate-example
npm install replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-react-app replicate-example cd replicate-example npm install replicate
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;
'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
useState
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from 'react'; import Replicate from 'replicate'; const replicate = New Replicate({ auth: 'YOUR_API_TOKEN' }); const ImageGenerator = () => { const [prompt, setPrompt] = useState(''); const [image, setImage] = useState(Nothing); 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)} placeholder="Enter a prompt" /> <button onClick={generateImage}> Generate Image</button> {image && <img src={image} alt="Generated" />} </div>); }; export default ImageGenerator;
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')
);
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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'));
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.");
}
};
const generateImage = Async Sub()
Try
const result = Await replicate.run("stability-ai/stable-diffusion", {
input:= { prompt }
})
setImage(result.output(0))
Catch e1 As [error]
console.error("Error generating image:", [error])
alert("Failed to generate image. Please try again.")
End Try
End Sub
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.
Facilementconvertir le contenu HTML en documents PDF, parfait pour générer des PDF dynamiques à partir de contenu web.
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.
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.
Protégez vos documents PDF enchiffrementles avecmots de passeou en appliquantsignatures numériques, protégeant vos documents sensibles contre tout accès non autorisé.
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.
La compatibilité d'IronPDF avec Windows, Linux et macOS le rend adapté à divers environnements de développement.
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.
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"
npx create-next-app@latest replicate-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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
cd replicate-pdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd replicate-pdf
Installez les paquets nécessaires :
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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 });
}
}
' pages/api/pdf.js
import
If True Then
NextRequest, NextResponse
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from '@next/server'; import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf"; 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 }); } }
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>
);
}
'INSTANT VB TODO TASK: The following line uses invalid syntax:
''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(Nothing); const [@error, setError] = useState(Nothing); const promptInputRef = useRef(Nothing); 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>); }
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.
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'.
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 '
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
Entrez le texte à prédire comme "car", puis l'image ci-dessous est prédite.
Ensuite, cliquez sur Générer PDF pour créer un document PDF.
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";
IRON VB CONVERTER ERROR developers@ironsoftware.com
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.
9 produits de l'API .NET pour vos documents de bureau