Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF for Node.js
  2. Blog do IronPDF for Node.js
  3. Ajuda do Node
  4. replicate npm
AJUDA DO NODE

Replicar npm (Como funciona para desenvolvedores)

Darrius Serrant
Darrius Serrant
Atualizado:

O pacote NPM ' replicate ' é uma poderosa ferramenta cliente para integrar modelos de aprendizado de máquina em aplicações React. Isso permite que os desenvolvedores 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, exploraremos 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 plataforma online que fornece acesso a modelos de aprendizado de máquina por meio de uma API simples. A plataforma hospeda modelos de diversas áreas, como geração de imagens, análise de texto e muito mais. Ao usar o pacote NPM 'replicate', os desenvolvedores podem integrar esses modelos em seus aplicativos de forma 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 replicate
npm install replicate
SHELL

or

yarn add replicate
yarn add replicate
SHELL

Chave 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. Importe o pacote e inicialize o cliente.

import Replicate from 'replicate';

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

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

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

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 replicate
npx create-react-app replicate-example
cd replicate-example
npm install replicate
SHELL

2. Crie um componente para geração de imagens:

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

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

const ImageGenerator = () => {
  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 (error) {
      console.error("Error generating image:", error);
      alert("Failed to generate image. Please try again.");
    }
  };

  return (
    <div>
      <h1>Image Generator</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>
  );
};

export default ImageGenerator;
import React, { useState } from 'react';
import Replicate from 'replicate';

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

const ImageGenerator = () => {
  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 (error) {
      console.error("Error generating image:", error);
      alert("Failed to generate image. Please try again.");
    }
  };

  return (
    <div>
      <h1>Image Generator</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>
  );
};

export default ImageGenerator;
JAVASCRIPT

3. Utilize o componente em sua aplicação:

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

Tratamento de erros

Ao trabalhar com APIs, é crucial lidar com erros de forma adequada. Você pode modificar a função generateImage para capturar e exibir erros, conforme mostrado no componente ImageGenerator 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 formatação, garantindo que os PDFs gerados permaneçam fiéis ao conteúdo original.

6. Compatibilidade entre plataformas

A compatibilidade do IronPDF com Windows, Linux e macOS o torna 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 incorporação de recursos de geração de PDF em seus projetos.

Seja para desenvolver um aplicativo web, um script do lado do servidor ou uma ferramenta de linha de comando, o IronPDF permite que você crie documentos PDF de nível profissional de forma 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"
SHELL

Em seguida, navegue até o diretório do seu projeto:

cd replicate-pdf
cd replicate-pdf
SHELL

Instale os pacotes necessários:

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 geração de PDF

O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidor, 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 conteúdo abaixo:

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

// API handler for generating a PDF from a URL
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";

// API handler for generating a PDF from a URL
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

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 em index.js

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

// Utility function to create a delay
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);

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

  // Handle form submission for 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) {
      setError(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) {
        setError(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 (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 "Go" to generate:</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";

// Utility function to create a delay
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);

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

  // Handle form submission for 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) {
      setError(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) {
        setError(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 (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 "Go" to generate:</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

Explicação do código

1. Declarações de Importação

O código começa importando os módulos necessários de bibliotecas externas:

  • 'useState', 'useEffect', e 'useRef' de "react": Estes são React Hooks que permitem que componentes de função gerenciem estado, lidem com efeitos colaterais e criem referências a elementos DOM, respectivamente.
  • 'Image' de "next/image": Este é um componente fornecido pelo Next.js para carregamento otimizado de imagens.
  • A instrução "use client" garante que o componente que a utiliza seja renderizado no lado do cliente dentro de uma aplicação Next.js.

2. Função do componente

O componente Home é definido como a exportação padrão. Dentro do componente, existem várias variáveis de estado (prediction, error) gerenciadas usando o hook useState.

Uma referência (promptInputRef) é criada usando o hook useRef. O hook useEffect é usado para focar no promptInputRef quando o componente é montado.

A função handleSubmit é uma função assíncrona que lida com a submissão do formulário. Ela envia uma solicitação POST para um endpoint de API (/api/predictions) com um valor de prompt.

A resposta é processada e, se bem-sucedido, 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 de API (/api/pdf) com base na última saída no estado prediction.

3. Marcação HTML

O componente retorna 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

replicar npm (Como Funciona para Desenvolvedores): Figura 1 - Veja como sua aplicação Next.js usando Replicate e IronPDF se parece!

Digite o texto "carro" para a previsão e a imagem abaixo será exibida:

replicar npm (Como funciona para desenvolvedores): Figura 2 - No prompt Enter, adicione o texto carro para previsão e clique no botão Ir. Uma imagem de um carro seria prevista e gerada usando o Replicate.

Em seguida, clique em "Gerar PDF" para criar um documento PDF.

PDF de saída gerado usando o IronPDF

replicar npm (Como Funciona para Desenvolvedores): Figura 3 - Em seguida, você pode clicar no botão Gerar PDF para converter esta imagem em PDF usando IronPDF.

Licença IronPDF

Visite a página de licenciamento do IronPDF para obter mais informações.

Insira a chave de licença em seu aplicativo conforme mostrado no exemplo abaixo:

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

Conclusão

O pacote NPM [**replicate**](https://www.npmjs.com/package/replicate) fornece uma maneira conveniente de aproveitar poderosos modelos 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 enorme de possibilidades para a criação de experiências de usuário inovadoras e interativas.

Lembre-se de explorar outros modelos disponíveis na plataforma 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 desenvolvedores integrem pacotes de gráficos ricos em recursos em aplicativos com apenas algumas linhas de código. Juntas, essas duas bibliotecas permitem que os desenvolvedores trabalhem com tecnologia de IA moderna e salvem os resultados de forma confiável em formato PDF.

Darrius Serrant
Darrius Serrant
  Converse agora mesmo com a equipe de engenharia.
Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Equipe de Suporte Iron

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim