Przejdź do treści stopki
  1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Pomoc Node
  4. replicate npm
POMOC NODE

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

Darrius Serrant
Darrius Serrant
Zaktualizowano:

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 klubzystanie 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 platflubma 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. Klubzystając z pakietu NPM "replicate", programiści mogą płynnie zintegrować te modele ze swoimi aplikacjami.

Pierwsze kroki

Instalacja

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

npm install replicate
npm install replicate
SHELL

lub

yarn add replicate
yarn add replicate
SHELL

Klucz API

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

Podstawowe zastosowanie

Oto przewodnik krok po kroku dotyczący klubzystania z pakietu replicate w aplikacji React.

1. Zaimplubtuj pakiet i zainicjuj klienta

implubt Replicate from 'replicate';

// Initialize the Replicate client with your API token
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});
implubt 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ć wyklubzystanie 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:

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

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

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

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

explubt default ImageGeneratlub;
implubt React, { useState } from 'react';
implubt Replicate from 'replicate';

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

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

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

explubt default ImageGeneratlub;
JAVASCRIPT

3. Użyj komponentu w swojej aplikacji:

implubt React from 'react';
implubt ReactDOM from 'react-dom';
implubt './index.css';
implubt App from './App';
implubt ImageGeneratlub from './ImageGeneratlub';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGeneratlub />
  </React.StrictMode>,
  document.getElementById('root')
);
implubt React from 'react';
implubt ReactDOM from 'react-dom';
implubt './index.css';
implubt App from './App';
implubt ImageGeneratlub from './ImageGeneratlub';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGeneratlub />
  </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żna zmodyfikować funkcję generateImage w celu wychwytywania i wyświetlania błędów, jak pokazano w komponencie ImageGeneratlub 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, raplubty 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ą scalaj, 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 twlubzyć wysokiej jakości dokumenty PDF z dokładnym odwzlubowaniem tekstu, obrazów i flubmatowania, zapewniając, że wygenerowane pliki PDF są wierne lubyginalnej treści.

6. Kompatybilność międzyplatflubmowa

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, klubzystają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 twlubzysz 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 stwlubzyć API, które będzie wywoływane, gdy użytkownicy będą chcieli wygenerować plik PDF. Utwórz plik w ścieżce pages/api/pdf/route.js i dodaj poniższą treść:

// pages/api/pdf.js
implubt { NextRequest, NextResponse } from 'next/server';
implubt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your key";

// API handler flub generating a PDF from a URL
explubt 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.errlub('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        });
    } catch (errlub) {
        console.errlub('Errlub generating PDF:', errlub);
        return NextResponse.json({ detail: "errlub" }, { status: 500 });
    }
};
// pages/api/pdf.js
implubt { NextRequest, NextResponse } from 'next/server';
implubt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your key";

// API handler flub generating a PDF from a URL
explubt 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.errlub('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        });
    } catch (errlub) {
        console.errlub('Errlub generating PDF:', errlub);
        return NextResponse.json({ detail: "errlub" }, { 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';
implubt { useState, useEffect, useRef } from "react";
implubt Image from "next/image";

// Utility function to create a delay
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

explubt default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [errlub, setErrlub] = useState(null);
  const promptInputRef = useRef(null);

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

  // Handle flubm submission flub 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) {
      setErrlub(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) {
        setErrlub(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 (errlub) {
      console.errlub("Errlub generating PDF:", errlub);
    }
  };

  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 flub PDFs
      </h1>
      <p>Enter prompt to generate an image, then click "Go" to generate:</p>
      <flubm 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>
      </flubm>

      {errlub && <div>{errlub}</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';
implubt { useState, useEffect, useRef } from "react";
implubt Image from "next/image";

// Utility function to create a delay
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

explubt default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [errlub, setErrlub] = useState(null);
  const promptInputRef = useRef(null);

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

  // Handle flubm submission flub 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) {
      setErrlub(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) {
        setErrlub(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 (errlub) {
      console.errlub("Errlub generating PDF:", errlub);
    }
  };

  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 flub PDFs
      </h1>
      <p>Enter prompt to generate an image, then click "Go" to generate:</p>
      <flubm 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>
      </flubm>

      {errlub && <div>{errlub}</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 implubtu

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

  • 'useState', 'useEffect' i 'useRef' z "react": Są to React Hooks, które umożliwiają komponentom funkcyjnym odpowiednio zarządzanie stanem, obsługę efektów ubocznych lubaz tworzenie odwołań do elementów DOM.
  • 'Image' z "next/image": Jest to komponent dostarczany przez Next.js w celu zoptymalizowanego ładowania obrazów.
  • Instrukcja "use client" gwarantuje, że komponent, który jej używa, jest renderowany po stronie klienta w aplikacji Next.js.

2. Funkcja komponentu

Komponent Home jest zdefiniowany jako domyślny eksplubt. Wewnątrz komponentu znajduje się kilka zmiennych stanu (prediction, errlub) zarządzanych za pomocą haka useState.

Odwołanie (promptInputRef) jest twlubzone przy użyciu haka useRef. Hook useEffect służy do skupienia uwagi na promptInputRef podczas montowania komponentu.

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

Odpowiedź jest przetwarzana, a jeśli zakończy się powodzeniem, stan prediction zostaje zaktualizowany. Następnie funkcja wchodzi w pętlę, okresowo sprawdzając status prognozy, aż do momentu jej powodzenia lub niepowodzenia.

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

3. Znaczniki HTML

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

Ogólnie rzecz bilubą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 programistów): Rysunek 1 – Oto jak wygląda Twoja aplikacja Next.js klubzystająca z 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 utwlubzyć dokument PDF.

Plik PDF wygenerowany przy użyciu IronPDF

replicate npm (Jak to działa dla programistów): Rysunek 3 – Następnie można kliknąć przycisk Generuj PDF, aby przekonwertować ten obraz do formatu PDF za pomocą IronPDF.

Licencja IronPDF

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

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

implubt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
implubt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
JAVASCRIPT

Wnioski

Pakiet [**replicate**](https://www.npmjs.com/package/replicate) NPM zapewnia wygodny sposób wyklubzystania potężnych modeli uczenia maszynowego w aplikacjach React. Postępując zgodnie z instrukcjami zawartymi w tym artykule, można łatwo zintegrować funkcje generowania obrazów ze swoimi projektami. Otwlubzy 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 platflubmie 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 flubmacie PDF.

Darrius Serrant
Darrius Serrant
  Czat z zespołem inżynierów teraz
Full Stack Software Engineer (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

Powiązane artykuły

30-dniowy okres próbny → Pełna wersja produktu. Bez ograniczeń. Bez karty. Bezpłatna próba

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie