POMOC NODE

replicate npm (Jak działa dla deweloperów)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Zaktualizowano:kwietnia 23, 2026

Pakiet NPM "replicate" to potężne narzędzie klienckie służące do integracji modeli uczenia maszynowego z aplikacjami React. Pozwala to programistom na łatwe korzystanie z wstępnie wytrenowanych modeli i przeprowadzanie wnioskowania bezpośrednio w ramach ich aplikacji bez konieczności zarządzania złożoną infrastrukturą zaplecza. Oto przegląd tego, jak można używać pakietu replicate NPM w projekcie React. Dodatkowo przyjrzymy się bibliotece IronPDF służącej do generowania plików PDF i pokażemy, jak połączyć obie biblioteki w celu stworzenia działającej aplikacji.

Wprowadzenie do Replicate

Replicate to platforma internetowa zapewniająca dostęp do modeli uczenia maszynowego za pośrednictwem prostego interfejsu API. Zawiera modele z różnych dziedzin, takich jak generowanie obrazów, analiza tekstu i inne. Korzystając z pakietu NPM "replicate", programiści mogą płynnie zintegrować te modele ze swoimi aplikacjami.

Pierwsze kroki

Instalacja

Aby użyć replicate w swojej aplikacji React, najpierw musisz zainstalować pakiet. Można to zrobić za pomocą npm lub yarn:

npm install replicate

npm install replicate

SHELL

yarn add replicate

yarn add replicate

SHELL

Klucz API

Do korzystania z API Replicate potrzebny jest klucz API. Klucz ten można uzyskać, rejestrując się na stronie internetowej Replicate i tworząc nowy token API.

Podstawowe zastosowanie

Oto przewodnik krok po kroku dotyczący używania pakietu replicate w aplikacji React.

1. Zaimportuj pakiet i zainicjuj klienta

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. Uruchom wnioskowanie

Zakładając, że chcesz użyć modelu do wygenerowania obrazu na podstawie tekstu, wystarczy kilka linii kodu, aby uzyskać wynik pokazany poniżej:

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

Przykładowe zastosowanie

Stwórzmy prostą aplikację React, która pozwala użytkownikom generować obrazy na podstawie podpowiedzi tekstowych, aby zademonstrować wykorzystanie pakietu replicate.

1. Skonfiguruj nowy projekt 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. Stwórz komponent do generowania obrazów:

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. Użyj komponentu w swojej aplikacji:

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

Postępowanie w przypadku błędów

Podczas pracy z interfejsami API kluczowe znaczenie ma eleganckie radzenie sobie z błędami. Możesz zmodyfikować funkcję generateImage, aby przechwytywać i wyświetlać błędy, jak pokazano w komponencie ImageGenerator powyżej.

Przedstawiamy IronPDF

IronPDF to wszechstronny pakiet npm zaprojektowany w celu uproszczenia generowania plików PDF w aplikacjach Node.js. Umożliwia tworzenie dokumentów PDF na podstawie treści HTML, adresów URL lub istniejących plików PDF. Niezależnie od tego, czy potrzebujesz generować faktury, raporty czy inne rodzaje dokumentów, IronPDF ułatwia ten proces dzięki intuicyjnemu API i kompleksowemu zestawowi funkcji.

Najważniejsze cechy IronPDF

1. Konwersja HTML do PDF

Łatwo konwertuj treści HTML na dokumenty PDF — idealne rozwiązanie do generowania dynamicznych plików PDF na podstawie treści internetowych.

2. Konwersja adresów URL do formatu PDF

Twórz pliki PDF bezpośrednio z adresów URL, co pozwala na programowe przechwytywanie treści stron internetowych i zapisywanie ich jako pliki PDF.

3. Manipulacja plikami PDF

Z łatwością scałaj, dziel i edytuj istniejące dokumenty PDF. IronPDF oferuje funkcje dodawania stron, dzielenia dokumentów, tworzenia formularzy PDF i wiele innych.

4. Zabezpieczenia plików PDF

Zabezpiecz swoje dokumenty PDF, szyfrując je hasłami lub stosując podpisy cyfrowe, chroniąc w ten sposób poufne dokumenty przed nieuprawnionym dostępem.

5. Wysoka jakość tłumaczenia

Należy tworzyć wysokiej jakości dokumenty PDF z dokładnym odwzorowaniem tekstu, obrazów i formatowania, zapewniając, że wygenerowane pliki PDF są wierne oryginalnej treści.

6. Kompatybilność międzyplatformowa

Kompatybilność IronPDF z systemami Windows, Linux i macOS sprawia, że nadaje się on do różnych środowisk programistycznych.

7. Prosta integracja

Zintegruj IronPDF z aplikacjami Node.js w prosty sposób, korzystając z pakietu npm. Dobrze udokumentowany interfejs API ułatwia włączenie funkcji generowania plików PDF do projektów.

Niezależnie od tego, czy tworzysz aplikację internetową, skrypt po stronie serwera czy narzędzie wiersza poleceń, IronPDF umożliwia wydajne i niezawodne tworzenie profesjonalnych dokumentów PDF.

Generowanie dokumentu PDF przy użyciu IronPDF i pakietu NPM Recharts

Zainstaluj zależności

Najpierw utwórz nowy projekt Next.js (jeśli jeszcze tego nie zrobiłeś) za pomocą poniższego polecenia. Zobacz tutaj:

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

Następnie przejdź do katalogu projektu:

cd replicate-pdf

cd replicate-pdf

SHELL

Zainstaluj wymagane pakiety:

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 do generowania plików PDF

Pierwszym krokiem jest stworzenie backendowego API do generowania dokumentu PDF. Ponieważ IronPDF działa wyłącznie po stronie serwera, musimy stworzyć API, które będzie wywoływane, gdy użytkownicy będą chcieli wygenerować plik PDF. Utwórz plik na ścieżce pages/api/pdf/route.js i dodaj poniższą zawartość:

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

IronPDF wymaga klucza licencyjnego, który można uzyskać na stronie licencji i umieścić w powyższym kodzie.

Dodaj poniższy kod do `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

Wyjaśnienie kodu

1. Instrukcje importu

Kod rozpoczyna się od zaimportowania niezbędnych modułów z bibliotek zewnętrznych:

'useState', 'useEffect' i 'useRef' z "react": Są to React Hooks, które pozwalają komponentom funkcyjnym zarządzać stanem, obsługiwać efekty uboczne i tworzyć referencje do elementów DOM, odpowiednio.
'Image' z "next/image": Jest to komponent dostarczany przez Next.js dla zoptymalizowanego ładowania obrazów.
Instrukcja "use client" zapewnia, że komponent używający go jest renderowany po stronie klienta w aplikacji Next.js.

2. Funkcja komponentu

Komponent Home jest zdefiniowany jako domyślny eksport. Wewnątrz komponentu znajduje się kilka zmiennych stanu (prediction, error), którymi zarządza się za pomocą hooka useState.

Referencja (promptInputRef) jest tworzona za pomocą hooka useRef. Hook useEffect jest używany, aby skupić się na promptInputRef, gdy komponent jest zamontowany.

Funkcja handleSubmit jest asynchroniczną funkcją, która obsługuje przesyłanie formularza. Wysyła żądanie POST do punktu końcowego API (/api/predictions) z wartością prompt.

Odpowiedź jest przetwarzana, a jeśli jest udana, stan prediction jest aktualizowany. Następnie funkcja wchodzi w pętlę, okresowo sprawdzając status prognozy, aż do momentu jej powodzenia lub niepowodzenia.

Metoda generatePdf pobiera PDF z innego punktu końcowego API (/api/pdf) na podstawie ostatniego wyniku w stanie prediction.

3. Znaczniki HTML

Komponent zwraca kontener <div> z stylizacją (max-w-2xl, mx-auto, p-5). Wewnątrz kontenera znajduje się element <h1> z tekstem "IronPDF: An Awesome Library for PDFs".

Ogólnie rzecz biorąc, kod ten wydaje się być częścią aplikacji Next.js, która obsługuje prognozy i generuje pliki PDF na podstawie danych wprowadzonych przez użytkownika. Instrukcja "use client" jest specyficzna dla Next.js i zapewnia renderowanie po stronie klienta dla komponentu, w którym jest używana.

Wynik

replicate npm (Jak to działa dla deweloperów): Rysunek 1 - Tak wygląda twoja aplikacja Next.js używająca Replicate i IronPDF!

Wpisz tekst do przewidywania jako "samochód", a następnie zostanie wygenerowany poniższy obraz:

replicate npm (Jak to działa dla programistów): Rysunek 2 – W polu Enter wpisz tekst car, aby wyświetlić podpowiedzi, a następnie kliknij przycisk Go. Obraz samochodu zostałby przewidziany i wygenerowany przy użyciu Replicate.

Następnie kliknij "Generuj PDF", aby utworzyć dokument PDF.

Plik PDF wygenerowany przy użyciu IronPDF

replicate npm (Jak to działa dla deweloperów): Rysunek 3 - Następnie możesz kliknąć przycisk Generuj PDF, aby przekonwertować ten obraz na PDF przy użyciu IronPDF.

Licencja IronPDF

Więcej informacji można znaleźć na stronie licencyjnej IronPDF.

Umieść klucz licencyjny w swojej aplikacji zgodnie z poniższym przykładem:

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

Wnioski

Pakiet NPM [**replicate**](https://www.npmjs.com/package/replicate) zapewnia wygodny sposób na wykorzystanie potężnych modeli uczenia maszynowego w aplikacjach React. Postępując zgodnie z instrukcjami zawartymi w tym artykułe, można łatwo zintegrować funkcje generowania obrazów ze swoimi projektami. Otworzy to szeroki wachlarz możliwości tworzenia innowacyjnych i interaktywnych doświadczeń użytkownika.

Pamiętaj, aby zapoznać się z innymi modelami dostępnymi na platformie Replicate, aby jeszcze bardziej rozszerzyć funkcjonalność swoich aplikacji.

Ponadto IronPDF to potężna biblioteka PDF oferująca funkcje generowania i edycji plików PDF, a także możliwość renderowania responsywnych wykresów w plikach PDF w locie. Umożliwia to programistom integrację bogatych w funkcje pakietów wykresów z aplikacjami za pomocą zaledwie kilku linii kodu. W połączeniu te dwie biblioteki pozwalają programistom pracować z nowoczesną technologią AI i niezawodnie zapisywać wyniki w formacie PDF.

Darrius Serrant

Czat z zespołem inżynierów teraz

Inżynier oprogramowania Full Stack (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej