HILFE ZUM KNOTENPUNKT

npm replizieren (Wie es für Entwickler funktioniert)

Kannapat Udonpant

29. September 2024

Teilen Sie:

Der 'replizierenDas NPM-Paket ist ein leistungsstarkes Client-Tool zur Integration von Machine-Learning-Modellen in React-Anwendungen. Es ermöglicht Entwicklern, vortrainierte Modelle einfach zu nutzen und Inferenzprozesse direkt innerhalb ihrer Anwendungen auszuführen, ohne komplexe Backend-Infrastruktur verwalten zu müssen. Hier ist ein Überblick darüber, wie Sie den Replizieren Sie NPM-Paketin Ihrem React-Projekt. Außerdem werden wir Folgendes prüfenIronPDF, eine PDF-Generierungsbibliothek zur Erzeugung von PDF-Dateien und zur Kombination beider Bibliotheken, um eine funktionierende Anwendung zu erstellen.

Einführung in Replicate

Replizierenist eine Online-Plattform, die Zugang zu Machine-Learning-Modellen über eine einfache API bietet. Es hostet Modelle aus verschiedenen Bereichen, wie Bildgenerierung, Textanalyse und mehr. Durch die Verwendung des 'replicate' NPM-Pakets können Entwickler diese Modelle nahtlos in ihre Anwendungen integrieren.

Erste Schritte

Einrichtung

Um **replicate** in Ihrer React-Anwendung zu verwenden, müssen Sie zuerst die Paket. Sie können dies mit npm oder yarn tun:

npm install replicate

oder

yarn add replicate

API-Schlüssel

Sie benötigen einen API-Schlüssel, um mit der Replicate-API zu interagieren. Sie können diesen Schlüssel erhalten, indem Sie sich auf der Website replizierenund erstellen eines neuen API-Tokens.

Grundlegende Verwendung

Hier ist eine Schritt-für-Schritt-Anleitung zur Verwendung des `replicate`-Pakets in einer React-Anwendung.

1. Importieren Sie das Paket und initialisieren Sie den Client.

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

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

JAVASCRIPT

2. Führen Sie eine Inferenz durch

Angenommen, Sie möchten ein Modell verwenden, um ein Bild aus Text zu generieren, erhalten Sie mit nur wenigen Codezeilen das folgende Ergebnis:

const result = await replicate.run("stability-ai/stable-diffusion", {
  input: {
    prompt: "a futuristic cityscape"
  }
}); // identifier and prediction parameters
console.log(result);

const result = await replicate.run("stability-ai/stable-diffusion", {
  input: {
    prompt: "a futuristic cityscape"
  }
}); // identifier and prediction parameters
console.log(result);

JAVASCRIPT

Beispielanwendung

Lassen Sie uns eine einfache React-Anwendung erstellen, die es Benutzern ermöglicht, Bilder basierend auf Texteingaben zu generieren, um die Verwendung von Node-Replicate zu demonstrieren.

1. Ein neues React-Projekt einrichten:

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

2. Erstellen Sie eine Komponente zur Bilderzeugung:

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;

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;

JAVASCRIPT

3. Verwenden Sie die Komponente in Ihrer Anwendung:

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

Fehlerbehandlung

Bei der Arbeit mit APIs ist es wichtig, Fehler elegant zu behandeln. Sie können die Funktion 'generateImage' ändern, um Fehler abzufangen und anzuzeigen:

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

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

JAVASCRIPT

Einführung in IronPDF

IronPDFist ein vielseitiges npm-Paket, das die PDF-Erstellung in Node.js-Anwendungen vereinfacht. Es ermöglicht Ihnen, PDF-Dokumente aus HTML-Inhalt, URLs, oder vorhandene PDF-Dateien. Egal, ob Sie Rechnungen, Berichte oder andere Arten von Dokumenten erstellen müssen, IronPDF erleichtert den Prozess mit seiner intuitiven APIund umfassender Funktionsumfang.

Hauptmerkmale von IronPDF

1. Konvertierung von HTML in PDF

EinfachHTML-Inhalte in PDF-Dokumente konvertieren, ideal für die Erstellung dynamischer PDFs aus Webinhalten.

2. URL-zu-PDF-Konvertierung

Erstellen Sie PDFs direkt aus URLs, sodass Sie Webseiteninhalte erfassen und programmgesteuert als PDF-Dateien speichern können.

3. PDF-Bearbeitung

Zusammenführen, vorhandene PDF-Dokumente einfach aufteilen und bearbeiten. IronPDF bietet Funktionen zum Anhängen von Seiten und zum Aufteilen von Dokumenten,Erstellen von PDF-Formularenund mehr.

4. PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sieverschlüsselungihnen mitpasswörteroder anwendendigitale Signaturen, um Ihre sensiblen Dokumente vor unbefugtem Zugriff zu schützen.

5. Hochwertige Ausgabe

Erstellen Sie hochwertige PDF-Dokumente mit einer präzisen Wiedergabe von Texten, Bildern und Formatierungen, um sicherzustellen, dass die erstellten PDFs dem Originalinhalt treu bleiben.

6. Plattformübergreifende Kompatibilität

Die Kompatibilität von IronPDF mit Windows, Linux und macOS macht es für verschiedene Entwicklungsumgebungen geeignet.

7. Einfache Integration

Integrieren Sie IronPDF mühelos in Ihre Node.js-Anwendungen mithilfe des npm-Pakets. Die gut dokumentierte API vereinfacht die Integration von PDF-Generierungsfunktionen in Ihre Projekte.

Egal, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilentool entwickeln, IronPDF gibt Ihnen die Möglichkeit, professionelle PDF-Dokumente effizient und zuverlässig zu erstellen.

PDF-Dokument mit IronPDF erstellen und Recharts NPM-Paket verwenden

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben) mit Hilfe des folgenden Befehls: Siehehier

npx create-next-app@latest replicate-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd replicate-pdf

Installieren Sie die erforderlichen Pakete:

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

PDF erstellen: Lassen Sie uns nun ein einfaches Beispiel zur Erstellung eines PDFs mit IronPDF erstellen. In Ihrer Next.js-Komponente(z.B. Seiten/index.tsx)fügen Sie den folgenden Code hinzu:

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer ein PDF generieren möchten. Erstelle eine Datei im Pfad pages/api/pdf/route.js und füge den folgenden Inhalt hinzu:

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

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

JAVASCRIPT

IronPDF benötigt einen Lizenzschlüssel, den Sie von derlizenzseiteund im obigen Code einfügen

Fügen Sie den untenstehenden Code zu index.js hinzu.

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

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

JAVASCRIPT

Code Erläuterung

1. Importanweisungen

Der Code beginnt mit dem Import notwendiger Module aus externen Bibliotheken: 'useState', 'useEffect' und 'useRef' von "react": Diese sind React Hooks, die es Funktionskomponenten ermöglichen, den Status zu verwalten, Nebeneffekte zu behandeln und Referenzen zu DOM-Elementen zu erstellen, jeweils.

'Image' von "next/image": Dies ist eine Komponente, die von Next.js für optimiertes Laden von Bildern bereitgestellt wird. Die "use client" Anweisung ist kein standardmäßiger JavaScript- oder React-Import. Es scheint spezifisch für Next.js zu sein.(ein React-Framework)und zeigt an, dass die Komponente, die es verwendet, auf der Client-Seite gerendert werden soll. Es stellt sicher, dass das notwendige JavaScript für diese Komponente an den Client gesendet wird.

2. Komponentenfunktion

Die 'Home'-Komponente ist als Standardexport definiert. Innerhalb der Komponente gibt es mehrere Zustandsvariablen.('Vorhersage', 'Fehler')verwaltet mit dem 'useState'-Hook.

Eine Referenz('promptInputRef')wird mit dem 'useRef'-Hook erstellt. Der 'useEffect'-Hook wird verwendet, um beim Laden der Komponente den Fokus auf 'promptInputRef' zu setzen.

Die Funktion 'handleSubmit' ist eine asynchrone Funktion, die die Formularübermittlung verarbeitet. Es sendet eine POST-Anfrage an einen API-Endpunkt.(/api/predictions)mit einem Eingabewert.

Die Antwort wird verarbeitet, und bei Erfolg wird der 'prediction'-Status aktualisiert. Die Funktion betritt dann eine Schleife und überprüft regelmäßig den Vorhersagestatus, bis sie erfolgreich ist oder fehlschlägt. Die Methode 'generatePdf' ruft ein PDF von einem anderen API-Endpunkt ab.(/api/pdf)basierend auf dem letzten Ausgabestatus im 'Vorhersage'-Zustand.

3. HTML-Markup

Die Komponente gibt ein Container-Div mit etwas Styling zurück.('max-w-2xl', 'mx-auto', 'p-5'). Im Container befindet sich ein '

'-Element mit dem Text "AwesomeIron".(was ein Projektname oder -titel sein könnte).
Insgesamt scheint dieser Code Teil einer Next.js-Anwendung zu sein, die Vorhersagen bearbeitet und PDFs basierend auf Benutzereingaben erstellt. Der Befehl "use client" ist spezifisch für Next.js und sorgt dafür, dass die Client-seitige Darstellung für die Komponente, in der er verwendet wird, gewährleistet ist. Wenn Sie spezielle Fragen zu einem bestimmten Teil des Codes haben

AUSGABE

Replizieren von npm (Funktionsweise für Entwickler): Abbildung 1 - So sieht Ihre Next.js-Anwendung aus, die Replicate und IronPDF verwendet!

Geben Sie den Text für die Vorhersage als "car" ein, dann wird das unten stehende Bild vorhergesagt.

npm replizieren(Wie es für Entwickler funktioniert): Abbildung 2 - Geben Sie im Eingabefeld den Text "car" für die Vorhersage ein und klicken Sie auf die Schaltfläche Go. Ein Bild eines Autos würde mit Replicate vorhergesagt und generiert werden.

Klicken Sie dann auf PDF generieren, um ein PDF-Dokument zu erstellen.

AUSGABEPDF generiert mit IronPDF

replizierte npm (Wie es für Entwickler funktioniert): Abbildung 3 - Als Nächstes können Sie auf die Generate PDF-Schaltfläche klicken, um dieses Bild mithilfe von IronPDF in eine PDF-Datei zu konvertieren.

IronPDF-Lizenz

IronPDF seite.

Platzieren Sie den Lizenzschlüssel in der App, wie im folgenden Beispiel gezeigt:

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

Schlussfolgerung

Der `replizieren` NPM-Paket bietet eine bequeme Möglichkeit, leistungsstarke maschinelle Lernmodelle in React-Anwendungen zu integrieren. Indem Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie ganz einfach Bildgenerierungsfunktionen in Ihre Projekte integrieren. Dies eröffnet eine Vielzahl von Möglichkeiten zur Schaffung innovativer und interaktiver Nutzererlebnisse.

Denken Sie daran, andere verfügbare Modelle zu erkunden auf derReplizierenPlattform zur Erweiterung der Funktionalität Ihrer Anwendungen.

Auch,IronPDFist eine leistungsstarke PDF-Bibliothek für die Erstellung und Bearbeitung von PDFs sowie die Fähigkeit zuResponsive Diagramme rendernin PDFs im Handumdrehen. Es ermöglicht Entwicklern, funktionsreiche Diagrammpakete mit nur wenigen Codezeilen in Apps zu integrieren. Zusammen mit diesen beiden Bibliotheken können Entwickler mit moderner KI-Technologie arbeiten und die Ergebnisse zuverlässig in Form von PDFs speichern.

Kannapat Udonpant

Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Bevor er Software-Ingenieur wurde, promovierte Kannapat an der Universität Hokkaido in Japan im Bereich Umweltressourcen. Während seines Studiums wurde Kannapat auch Mitglied des Vehicle Robotics Laboratory, das Teil der Abteilung für Bioproduktionstechnik ist. Im Jahr 2022 wechselte er mit seinen C#-Kenntnissen zum Engineering-Team von Iron Software, wo er sich auf IronPDF konzentriert. Kannapat schätzt an seiner Arbeit, dass er direkt von dem Entwickler lernt, der den Großteil des in IronPDF verwendeten Codes schreibt. Neben dem kollegialen Lernen genießt Kannapat auch den sozialen Aspekt der Arbeit bei Iron Software. Wenn er nicht gerade Code oder Dokumentationen schreibt, kann man Kannapat normalerweise beim Spielen auf seiner PS5 oder beim Wiedersehen mit The Last of Us antreffen.

< PREVIOUS
xml2js npm (Wie es für Entwickler funktioniert)

NÄCHSTES >
toastify npm (Wie es für Entwickler funktioniert)