節點幫助

複製 npm（開發者如何運作）

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

Darrius Serrant

2024年9月29日

「replicate」NPM 套件是一個強大的客戶端工具，用於將機器學習模型集成到 React 應用程式中。它使開發人員能夠輕鬆使用預先訓練的模型，並可在他們的應用程式內直接運行推論，無需管理複雜的後端基礎設施。以下是如何在您的 React 項目中使用 replicate NPM package 的概述。此外，我們還將研究 IronPDF，這是一個用於生成 PDF 的庫，以生成 PDF 並結合這兩個庫來創建一個可運行的應用程式。

複製的介紹

Replicate 是一個線上平台，透過簡單的 API 提供對機器學習模型的訪問。它托管來自各種領域的模型，例如圖像生成、文本分析等。透過使用 'replicate' NPM 套件，開發人員可以無縫地將這些模型整合到他們的應用程式中。

入門

安裝

要在您的 React 應用程式中使用 `replicate`，您首先需要安裝這個套件。您可以使用 npm 或 yarn 來完成此操作：

npm install replicate

或

yarn add replicate

API 金鑰

您需要一個 API 金鑰才能與 Replicate API 互動。您可以透過在Replicate 網站註冊並創建新的 API 令牌來獲取此密鑰。

基本用法

以下是如何在 React 應用程式中使用`replicate`套件的逐步指南。

1. 匯入套件並初始化客戶端

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

js

JAVASCRIPT

2. 執行推斷

假設您想要使用模型從文本生成圖像，只需幾行代碼即可獲得如下結果：

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

js

JAVASCRIPT

範例應用程式

讓我們創建一個簡單的 React 應用程式，允許用戶根據文字提示生成圖像，以展示節點複製使用。

設置一個新的 React 項目：

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

2. 創建一個圖像生成的組件：

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

JAVASCRIPT

3. 在您的應用程式中使用該元件：

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

JAVASCRIPT

處理錯誤

在使用 API 時，妥善處理錯誤是至關重要的。您可以修改 'generateImage' 函數來捕捉和顯示錯誤：

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

JAVASCRIPT

介紹 IronPDF

IronPDF 是一個通用的 npm 套件，旨在簡化 Node.js 應用程式中的 PDF 生成。它允許您從HTML 內容、URL或現有 PDF 文件創建 PDF 文檔。無論您需要生成發票、報告或其他類型的文件，IronPDF 都能通過其直觀的API和全面的功能集使過程變得簡單。

IronPDF 的主要功能

HTML 轉換為 PDF

輕鬆將HTML內容轉換為PDF文件，非常適合從網頁內容生成動態PDF。

2. 將 URL 轉換為 PDF

直接從 URL 建立 PDF，讓您能夠擷取網頁內容並以程式化方式將其儲存為 PDF 文件。

3. PDF 操作

合併、拆分和輕鬆操控現有的 PDF 文件。 IronPDF 提供附加頁面、分割文件、建立 PDF 表單等功能。

4. PDF 安全性

透過使用加密和密碼來保護您的PDF文件，或應用數位簽名，以防止未經授權的存取保護您的敏感文件。

5. 高品質輸出

生成高品質的 PDF 文件，精確呈現文字、圖像和格式，確保生成的 PDF 檔案保持原始內容的真實性。

跨平台相容性

IronPDF 與 Windows、Linux 和 macOS 的相容性，使其適合各種開發環境。

7. 簡單整合

透過 npm 包將 IronPDF 輕鬆整合到您的 Node.js 應用程式中。文檔齊全的 API 簡化了將 PDF 生成功能納入您的項目。

無論您是在開發網頁應用程式、伺服器端腳本，還是命令列工具，IronPDF 都能讓您高效且可靠地創建專業級的 PDF 文件。

使用 IronPDF 生成 PDF 文件並使用 Recharts NPM 套件

安裝依賴項：首先，使用以下命令創建一個新的 Next.js 專案（如果尚未創建）：參考這裡

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

接著，導航至您的專案目錄：

cd replicate-pdf

安裝所需的軟體包：

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

創建 PDF：現在，讓我們創建一個使用 IronPDF 生成 PDF 的簡單示例。在您的 Next.js 組件 (例如，pages/index.tsx) 中，新增以下代碼：

PDF 生成 API：第一步是創建一個後端 API 來生成 PDF 文件。由於IronPDF僅在伺服器端運行，我們需要創建一個API，以便用戶在需要生成PDF時進行調用。在路徑 pages/api/pdf/route.js 中創建一個文件，並添加以下內容：

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

JAVASCRIPT

IronPDF 需要授權金鑰，您可以從授權頁面獲取，並將其放置在上述代碼中

將以下代碼添加到 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

JAVASCRIPT

程式碼說明

1. 匯入陳述式

程式碼先從外部庫匯入必要的模組：從「react」匯入的 'useState'、'useEffect' 和 'useRef'：這些是 React Hooks，允許函式組件管理狀態、處理副作用及創建對 DOM 元素的引用。

'Image' 從 "next/image": 這是 Next.js 提供的一個用於優化圖片加載的元件。 "use client" 語句不是標準的 JavaScript 或 React 匯入。這似乎是特定於 Next.js（一個 React 框架），並指示使用它的組件應在用戶端渲染。這確保了該組件所需的 JavaScript 被傳送到用戶端。

2. 元件功能

'Home' 元件被定義為預設匯出。在組件內，有幾個狀態變量（'prediction', 'error'）使用 'useState' 掛鉤進行管理。

使用 'useRef' 鉤子創建了一個參考（'promptInputRef'）。在元件掛載時使用 'useEffect' 鉤子來聚焦於 'promptInputRef'。

「handleSubmit」函式是一個處理表單提交的非同步函式。它向 API 端點（`/api/predictions`）發送帶有提示值的 POST 請求。

回應得到處理後，如果成功，'prediction' 狀態將被更新。然後，該函式進入迴圈，定期檢查預測狀態，直到其成功或失敗。「generatePdf」方法根據「prediction」狀態中的最後輸出，從另一個 API 端點（`/api/pdf`）獲取 PDF。

3. HTML 標記分析

該元件返回一個包含一些樣式（'max-w-2xl'，'mx-auto'，'p-5'）的容器 div。在容器內，有一個'

'元素，文本是"AwesomeIron"（這可能是一個專案名稱或標題）。
整體而言，這段程式碼似乎是 Next.js 應用程式的一部分，用於處理預測並根據使用者輸入生成 PDF。 "使用用戶端"語句是 Next.js 特有的，它確保在使用的元件進行用戶端渲染。如果您對程式碼的特定部分有任何具體問題

輸出

replicate npm (對開發人員的運作方式)：圖1 - 這是您的 Next.js 應用程式使用 Replicate 和 IronPDF 的樣子！

輸入用於預測的文字為「car」然後下面的圖像被預測

replicate npm (開發者如何運作): 圖 2 - 在輸入提示中，加入文字「車」進行預測，然後點擊 Go 按鈕。使用 Replicate 預測並生成汽車的圖像。

然後點擊生成 PDF 以創建 PDF 文件

使用 IronPDF 生成的輸出 PDF

複製 npm（開發者如何使用）：圖 3 - 接下來，您可以點擊生成 PDF 按鈕，使用 IronPDF 將此圖像轉換為 PDF。

IronPDF 授權

IronPDF 頁面。

將授權密鑰放置在應用程式中，如以下示例所示：

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