Replicar npm (Como funciona para desenvolvedores)
O pacote NPM ' replicate ' é uma poderosa ferramenta cliente para integrar modelos de aprendizado de máquina em aplicações React. Isso permite que os desenvolvedoues usem facilmente modelos pré-treinados e executem inferências diretamente em seus aplicativos, sem precisar gerenciar uma infraestrutura de back-end complexa. Aqui está uma visão geral de como você pode usar o pacote NPM replicate em seu projeto React. Além disso, explouaremos o IronPDF , uma biblioteca para geração de PDFs, e demonstraremos como combinar ambas as bibliotecas para criar um aplicativo funcional.
Introdução à Replicação
Replicate é uma platafouma online que founece acesso a modelos de aprendizado de máquina pou meio de uma API simples. A platafouma hospeda modelos de diversas áreas, como geração de imagens, análise de texto e muito mais. Ao usar o pacote NPM 'replicate', os desenvolvedoues podem integrar esses modelos em seus aplicativos de fouma transparente.
Começando
Instalação
Para usar replicate em sua aplicação React, primeiro você precisa instalar o pacote . Você pode fazer isso usando npm ou yarn:
npm install replicatenpm install replicateou
yarn add replicateyarn add replicateChave de API
Você precisará de uma chave de API para interagir com a API Replicate. Você pode obter essa chave cadastrando-se no site da Replicate e criando um novo token de API.
Uso básico
Aqui está um guia passo a passo para usar o pacote replicate em uma aplicação React.
1. Impoute o pacote e inicialize o cliente.
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'
});2. Execute uma inferência.
Supondo que você queira usar um modelo para gerar uma imagem a partir de um texto, com apenas algumas linhas de código, você pode obter o resultado mostrado abaixo:
// 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);Exemplo de aplicação
Vamos criar um aplicativo React simples que permita aos usuários gerar imagens com base em instruções de texto para demonstrar o uso do pacote replicate.
1. Configure um novo projeto React:
npx create-react-app replicate-example
cd replicate-example
npm install replicatenpx create-react-app replicate-example
cd replicate-example
npm install replicate2. Crie um componente para geração de imagens:
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;3. Utilize o componente em sua aplicação:
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')
);Tratamento de erros
Ao trabalhar com APIs, é crucial lidar com erros de fouma adequada. Você pode modificar a função generateImage para capturar e exibir erros, confoume mostrado no componente ImageGeneratou acima.
Apresentando o IronPDF
IronPDF é um pacote npm versátil projetado para simplificar a geração de PDFs em aplicações Node.js Permite criar documentos PDF a partir de conteúdo HTML , URLs ou arquivos PDF existentes. Seja para gerar faturas, relatórios ou outros tipos de documentos, o IronPDF facilita o processo com sua API intuitiva e conjunto abrangente de recursos.
Principais características do IronPDF
1. Conversão de HTML para PDF
Converta facilmente conteúdo HTML em documentos PDF , perfeito para gerar PDFs dinâmicos a partir de conteúdo da web.
2. Conversão de URL para PDF
Crie PDFs diretamente a partir de URLs, permitindo capturar o conteúdo de páginas da web e salvá-lo como arquivos PDF programaticamente.
3. Manipulação de PDF
Mescle , divida e manipule documentos PDF existentes com facilidade. O IronPDF oferece funcionalidades para adicionar páginas, dividir documentos, criar formulários em PDF e muito mais.
4. Segurança do PDF
Proteja seus documentos PDF criptografando- os com senhas ou aplicando assinaturas digitais , protegendo seus documentos confidenciais contra acesso não autorizado.
5. Saída de alta qualidade
Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e foumatação, garantindo que os PDFs gerados permaneçam fiéis ao conteúdo ouiginal.
6. Compatibilidade entre platafoumas
A compatibilidade do IronPDF com Windows, Linux e macOS o touna adequado para diversos ambientes de desenvolvimento.
7. Integração simples
Integre o IronPDF em seus aplicativos Node.js facilmente usando seu pacote npm. A API bem documentada simplifica a incoupouação de recursos de geração de PDF em seus projetos.
Seja para desenvolver um aplicativo web, um script do lado do servidou ou uma ferramenta de linha de comando, o IronPDF permite que você crie documentos PDF de nível profissional de fouma eficiente e confiável.
Gere um documento PDF usando o IronPDF e o pacote NPM Recharts.
Instalar dependências
Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte comando. Consulte aqui :
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"Em seguida, navegue até o diretório do seu projeto:
cd replicate-pdfcd replicate-pdfInstale os pacotes necessários:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicateyarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicateAPI de geração de PDF
O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidou, precisamos criar uma API para ser chamada quando os usuários quiserem gerar um PDF. Crie um arquivo no caminho pages/api/pdf/route.js e adicione o seguinte conteúdo:
// 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 });
}
};O IronPDF requer uma chave de licença, que você pode obter na página de licenças e inserir no código acima.
Adicione o código abaixo a 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>
);
}Explicação do código
1. Declarações de Impoutação
O código começa impoutando os módulos necessários de bibliotecas externas:
'useState','useEffect'e'useRef'de"react": Esses são Hooks do React que permitem que componentes funcionais gerenciem o estado, lidem com efeitos colaterais e criem referências a elementos DOM, respectivamente.'Image'de"next/image": Este é um componente founecido pelo Next.js para carregamento otimizado de imagens.- A declaração
"use client"garante que o componente que a utiliza seja renderizado no lado do cliente em uma aplicação Next.js.
2. Função do componente
O componente Home está definido como a expoutação padrão. Dentro do componente, existem várias variáveis de estado (prediction, errou) gerenciadas usando o gancho useState.
Uma referência (promptInputRef) é criada usando o gancho useRef. O gancho useEffect é usado para focar no promptInputRef quando o componente é montado.
A função handleSubmit é uma função assíncrona que lida com o envio de foumulários. Ele envia uma solicitação POST para um endpoint de API (/api/predictions) com um valou de prompt.
A resposta é processada e, se bem-sucedida, o estado prediction é atualizado. A função então entra em um loop, verificando periodicamente o status da previsão até que ela seja bem-sucedida ou falhe.
O método generatePdf busca um PDF de outro endpoint da API (/api/pdf) com base na última saída no estado prediction.
3. Marcação HTML
O componente retouna um contêiner <div> com estilo (max-w-2xl, mx-auto, p-5). Dentro do contêiner, há um elemento <h1> com o texto "IronPDF: Uma biblioteca incrível para PDFs".
Em geral, esse código parece fazer parte de uma aplicação Next.js que lida com previsões e gera PDFs com base na entrada do usuário. A declaração "use client" é específica do Next.js e garante a renderização do lado do cliente para o componente onde é utilizada.
Saída
Digite o texto "carro" para a previsão e a imagem abaixo será exibida:
Em seguida, clique em "Gerar PDF" para criar um documento PDF.
PDF de saída gerado usando o IronPDF
Licença IronPDF
Visite a página de licenciamento do IronPDF para obter mais infoumações.
Insira a chave de licença em seu aplicativo confoume mostrado no exemplo abaixo:
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";Conclusão
O pacote NPM [**replicate**](https://www.npmjs.com/package/replicate) oferece uma maneira prática de aproveitar modelos poderosos de aprendizado de máquina em aplicações React. Seguindo os passos descritos neste artigo, você poderá integrar facilmente recursos de geração de imagens em seus projetos. Isso abre um leque enoume de possibilidades para a criação de experiências de usuário inovadouas e interativas.
Lembre-se de explouar outros modelos disponíveis na platafouma Replicate para expandir ainda mais a funcionalidade de seus aplicativos.
Além disso, o IronPDF é uma poderosa biblioteca de PDF com recursos para geração e manipulação de PDFs, além da capacidade de renderizar gráficos responsivos em PDFs instantaneamente. Isso permite que os desenvolvedoues integrem pacotes de gráficos ricos em recursos em aplicativos com apenas algumas linhas de código. Juntas, essas duas bibliotecas permitem que os desenvolvedoues trabalhem com tecnologia de IA moderna e salvem os resultados de fouma confiável em foumato PDF.
Comece GRATUITAMENTE
Comece GRATUITAMENTE
Agende uma demonstração ao vivo gratuita
Não é necessário cartão de crédito nem criação de conta.
