El paquete NPM 'replicate' 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 una visión general de cómo puedes usar el paquete NPM replicate en tu proyecto React. Además, analizaremos IronPDF, una biblioteca de generación de PDF para generar PDF y combinar ambas bibliotecas para crear una aplicación funcional.

Introducción a Replicate

Replicate 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.

Primeros pasos

Instalación

Para utilizar `replicate` en tu aplicación React, primero necesitas instalar el paquete. Puedes hacer esto usando npm o yarn:

npm install replicate

o

yarn add replicate

Clave API

Necesitarás una clave API para interactuar con la API de Replicate. Puedes obtener esta clave registrándote en el sitio web de Replicate y creando un nuevo token de API.

Uso básico

A continuación, se presenta una guía paso a paso para usar el paquete **replicate**\ en una aplicación React.

1. Importa el paquete e inicializa el cliente

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

js

2. Ejecutar una inferencia

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

js

Aplicación de ejemplo

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.

Configurar un nuevo proyecto de React:

npx create-react-app replicate-example
cd replicate-example
npm install replicate

2. Crear un componente para la generación de imágenes:

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;

js

3. Utilice el componente en su aplicación:

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

js

Manejo de errores

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

js

Presentación de IronPDF

IronPDF es un paquete npm versátil diseñado para simplificar la generación de PDF en aplicaciones Node.js. Le permite crear documentos PDF a partir de contenido HTML, URLs o archivos PDF existentes. Ya sea que necesite generar facturas, informes u otros tipos de documentos, IronPDF hace que el proceso sea fácil con su API intuitiva y conjunto de características integral.

Características principales de IronPDF

1. Conversión de HTML a PDF

Convierte fácilmente contenido HTML en documentos PDF, perfecto para generar PDFs dinámicos a partir de contenido web.

2. Conversión de URL a PDF

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.

3. Manipulación de PDF

Fusiona, divide y manipula documentos PDF existentes con facilidad. IronPDF proporciona funcionalidades para agregar páginas, dividir documentos, crear formularios PDF y más.

4. Seguridad PDF

Proteja sus documentos PDF cifrando con contraseñas o aplicando firmas digitales, protegiendo sus documentos sensibles del acceso no autorizado.

5. Salida de alta calidad

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.

6. Compatibilidad multiplataforma

La compatibilidad de IronPDF con Windows, Linux y macOS lo hace adecuado para varios entornos de desarrollo.

7. Integración sencilla

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.

Generar documento PDF usando IronPDF y usar el paquete NPM Recharts

Instalar dependencias: Primero, crea un nuevo proyecto Next.js (si aún no lo has hecho) utilizando el siguiente comando: Consulta aquí

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

Instale los paquetes necesarios:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate

Crear un PDF: Ahora, vamos a crear un ejemplo simple de generación de un PDF utilizando IronPDF. En tu componente de Next.js (por ejemplo, pages/index.tsx), agrega 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 });
    }
}

js

IronPDF requiere una clave de licencia, que puedes obtener de la página de licencias y colocar 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>
  );
}

js

Código Explicación

1. Sentencias de Importación

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 framework de React) e indica que el componente que lo utiliza debe ser renderizado en el lado del cliente. Garantiza que el JavaScript necesario para ese componente se envíe al cliente.

2. Función del componente

El componente 'Home' se define como la exportación predeterminada. Dentro del componente, hay varias variables de estado ('prediction', 'error') gestionadas utilizando el hook 'useState'.

Se crea una referencia ('promptInputRef') utilizando 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 gestiona el envío del formulario. Envía una solicitud POST a un punto final de API (/api/predictions) con un valor de prompt.

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 'prediction'.

3. Marcado HTML

El componente devuelve un div contenedor con algo de estilo ('max-w-2xl', 'mx-auto', 'p-5'). Dentro del contenedor, hay un elemento '

' con el texto "AwesomeIron" (que podría ser un nombre de proyecto o título).

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

SALIDA

Ingrese el texto para predicción como "car" y luego se predice la imagen abajo

Luego haga clic en Generar PDF para crear un documento PDF.

PDF DE SALIDA generado usando IronPDF

Licencia IronPDF

Página de IronPDF.

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

js

Conclusión

El paquete NPM [**replicate**](https://www.npmjs.com/package/replicate) ofrece una manera conveniente de utilizar 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 la plataforma de Replicate para ampliar aún más la funcionalidad de tus aplicaciones.

Además, IronPDF es una potente biblioteca PDF para funciones de generación y manipulación de PDF, junto con la capacidad de renderizar gráficos responsivos en PDFs al instante. 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.