Pruebas en un entorno real
Pruebe en producción sin marcas de agua.
Funciona donde lo necesites.
El 'replicarEl paquete NPM es una herramienta cliente poderosa para integrar modelos de aprendizaje automático en aplicaciones React. Permite a los desarrolladores utilizar modelos preentrenados fácilmente y ejecutar inferencias directamente dentro de sus aplicaciones sin necesidad de gestionar una infraestructura de backend compleja. Aquí tienes un resumen de cómo puedes usar el paquete NPM replicate en tu proyecto React. Además, estudiaremos IronPDF, una biblioteca de generación de PDF para generar PDF y combinar ambas bibliotecas para crear una aplicación funcional.
Replicar es una plataforma en línea que proporciona acceso a modelos de aprendizaje automático a través de una API sencilla. Aloja modelos de varios dominios, como generación de imágenes, análisis de texto y más. Al utilizar el paquete NPM 'replicate', los desarrolladores pueden integrar estos modelos sin problemas en sus aplicaciones.
Para usar `replicate` en su aplicación React, primero necesita instalar el paquete. Puedes hacer esto usando npm o yarn:
npm install replicate
npm install replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install replicate
o
yarn add replicate
yarn add replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add replicate
Necesitarás una clave API para interactuar con la API de Replicate. Puede obtener esta clave registrándose en el Replicar sitio web y crear un nuevo token de API.
Aquí tienes una guía paso a paso para usar el paquete `replicate` en una aplicación 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' });
Suponiendo que desea utilizar un modelo para generar una imagen a partir de texto, con solo unas pocas líneas de código obtiene el resultado como se muestra a continuación:
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)
Vamos a crear una aplicación simple de React que permita a los usuarios generar imágenes basadas en indicaciones de texto para demostrar el uso de replica de 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'));
Al trabajar con API, es crucial manejar los errores de manera elegante. Puedes modificar la función 'generateImage' para capturar y mostrar errores:
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
IronPDF es un paquete npm versátil diseñado para simplificar la generación de PDF en aplicaciones de Node.js. Permite crear documentos PDF desde contenido HTML, URL, o archivos PDF existentes. Ya sea que necesites generar facturas, informes u otros tipos de documentos, IronPDF facilita el proceso con su interfaz intuitiva. API y conjunto de características completo.
Fácilmente convertir contenido HTML en documentos PDF, perfecto para generar PDFs dinámicos a partir de contenido web.
Crea PDFs directamente desde URLs, lo que te permite capturar el contenido de páginas web y guardarlo como archivos PDF de forma programática.
Fusión, dividir y manipular documentos PDF existentes con facilidad. IronPDF proporciona funcionalidades para adjuntar páginas, dividir documentos, creando formularios PDFy mucho más.
Asegure sus documentos PDF mediante encriptación ellos con contraseñas o aplicando firmas digitales, protegiendo sus documentos confidenciales del acceso no autorizado.
Produzca documentos PDF de alta calidad con un renderizado preciso de texto, imágenes y formato, asegurando que los PDF generados se mantengan fieles al contenido original.
La compatibilidad de IronPDF con Windows, Linux y macOS lo hace adecuado para varios entornos de desarrollo.
Integra IronPDF en tus aplicaciones Node.js fácilmente usando su paquete npm. La API bien documentada simplifica la incorporación de capacidades de generación de PDF en tus proyectos.
Ya sea que esté desarrollando una aplicación web, un script del lado del servidor o una herramienta de línea de comandos, IronPDF le permite crear documentos PDF de calidad profesional de manera eficiente y confiable.
Instalar dependencias: Primero, crea un nuevo proyecto Next.js (si aún no lo ha hecho) utilizando el siguiente comando: Consulte aquí
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"
A continuación, vaya al directorio de su proyecto:
cd replicate-pdf
cd replicate-pdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd replicate-pdf
Instale los paquetes necesarios:
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
Crear un PDF: Ahora, vamos a crear un ejemplo sencillo de cómo generar un PDF usando IronPDF. En tu componente de Next.js (por ejemplo, páginas/index.tsx)añade el siguiente código:
API de generación de PDF: El primer paso es crear una API de backend para generar el documento PDF. Dado que IronPDF solo se ejecuta del lado del servidor, necesitamos crear una API a la que se pueda llamar cuando los usuarios quieran generar un PDF. Crea un archivo en la ruta pages/api/pdf/route.js y agrega el siguiente contenido:
// 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 requiere una clave de licencia, que puedes obtener desde el página de licencia y coloca en el código anterior
Agrega el siguiente código a 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>); }
El código comienza importando módulos necesarios de bibliotecas externas: 'useState', 'useEffect' y 'useRef' de "react". Estos son Hooks de React que permiten a los componentes de función gestionar el estado, manejar efectos secundarios y crear referencias a elementos del DOM, respectivamente.
'Image' de "next/image": Este es un componente proporcionado por Next.js para la carga optimizada de imágenes. La declaración "use client" no es una importación estándar de JavaScript o React. Parece ser específico de Next.js (un marco de React) e indica que el componente que lo utiliza debe renderizarse en el lado del cliente. Garantiza que el JavaScript necesario para ese componente se envíe al cliente.
El componente 'Home' se define como la exportación predeterminada. Dentro del componente, hay varias variables de estado. ('predicción', 'error') gestionado usando el hook 'useState'.
Una referencia ('promptInputRef') se crea usando el hook 'useRef'. El hook 'useEffect' se utiliza para enfocar en 'promptInputRef' cuando el componente se monta.
La función 'handleSubmit' es una función asíncrona que maneja el envío del formulario. Envía una solicitud POST a un punto final de API (/api/predictions
) con un valor de solicitud.
La respuesta se procesa y, si tiene éxito, se actualiza el estado de 'predicción'. La función luego entra en un bucle, comprobando periódicamente el estado de la predicción hasta que esta tenga éxito o falle. El método 'generatePdf' obtiene un PDF de otro punto final de API (/api/pdf
) basado en la última salida en el estado de 'predicción'.
El componente devuelve un div contenedor con algo de estilo. ('max-w-2xl', 'mx-auto', 'p-5'). Dentro del contenedor, hay un elemento '
En general, este código parece ser parte de una aplicación Next.js que maneja predicciones y genera PDFs basados en la entrada del usuario. La declaración "use client" es específica de Next.js y asegura el renderizado del lado del cliente para el componente donde se utiliza. Si tienes alguna pregunta específica sobre una parte particular del código
Introduzca el texto para la predicción como "car" y a continuación se predice la imagen.
Luego haga clic en Generar PDF para crear un documento PDF.
IronPDF página.
Coloque la clave de licencia en la aplicación como se muestra en el siguiente ejemplo:
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
El `replicarEl paquete NPM proporciona una manera conveniente de aprovechar modelos de aprendizaje automático potentes en aplicaciones React. Siguiendo los pasos descritos en este artículo, podrás integrar fácilmente capacidades de generación de imágenes en tus proyectos. Esto abre una amplia gama de posibilidades para crear experiencias de usuario innovadoras e interactivas.
Recuerda explorar otros modelos disponibles en el Replicar plataforma para ampliar aún más la funcionalidad de tus aplicaciones.
También, IronPDF es una poderosa biblioteca de PDF para funciones de generación y manipulación de PDF, junto con la capacidad de renderizar gráficos responsivos en PDFs al vuelo. Permite a los desarrolladores integrar paquetes de gráficos con muchas funciones en aplicaciones con solo unas pocas líneas. Junto con estas dos bibliotecas, los desarrolladores pueden trabajar con tecnología de IA moderna y guardar los resultados de forma fiable en formato PDF.
9 productos API .NET para sus documentos de oficina