信息圖標
跳過到頁腳內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js 博客
  3. Node 說明
  4. replicate npm
NODE 說明

replicate npm（開發者的使用方法）

Darrius Serrant
Darrius Serrant
更新日期:

"<a href=\"**replicate" target="_blank">https://replicate.com/\">**replicate" NPM 套件是一個強大的客戶端工具，用於將機器學習模型集成到 React 應用中。 它允許開發人員在應用中輕鬆使用預訓練模型並直接運行推理，而無需管理複雜的後端基礎設施。 以下是如何在您的 React 項目中使用 <a href=\"replicate" target="_blank">https://www.npmjs.com/package/replicate\">replicate NPM 套件 的概述。 此外，我們將探索 <a href=\"/nodejs/\">IronPDF**，一個PDF生成庫，並演示如何結合兩者來創建一個功能性應用。

Replicate 介紹

<a href=\"**Replicate" target="_blank">https://replicate.com/\">**Replicate** 是一個在線平台，通過簡單的 API 提供對機器學習模型的訪問。 它託管來自各個領域的模型，如圖像生成、文本分析等。 通過使用 'replicate' NPM 套件，開發人員可以將這些模型無縫集成到他們的應用中。

入門指南

安裝

要在您的 React 應用中使用 replicate，首先需要安裝該<a href=\"套件" target="_blank">https://www.npmjs.com/package/replicate\">套件。 您可以使用 npm 或 yarn 來做到這一點：

npm install replicate
npm install replicate
SHELL

或

yarn add replicate
yarn add replicate
SHELL

API 密鑰

要與 Replicate API 交互，您需要一個 API 密鑰。 您可以通過在 <a href=\"Replicate" target="_blank">https://replicate.com/\">Replicate 網站註冊並創建新 API 令牌來獲取此密鑰。

基本用法

這是逐步使用 replicate 套件在 React 應用中的指南。

1. Imp或t the package and initialize the client

imp或t Replicate from 'replicate';

// Initialize the Replicate client with your API token
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});
imp或t Replicate from 'replicate';

// Initialize the Replicate client with your API token
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});
JAVASCRIPT

2. 運行推理

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

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

示例應用

讓我們創建一個簡單的 React 應用程序，允許用戶基於文本提示生成圖像以演示 replicate 套件的使用。

1. 設置新 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. Create a component f或 image generation:

imp或t React, { useState } from 'react';
imp或t Replicate from 'replicate';

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

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

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

exp或t default ImageGenerat或;
imp或t React, { useState } from 'react';
imp或t Replicate from 'replicate';

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

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

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

exp或t default ImageGenerat或;
JAVASCRIPT

3. 在您的應用中使用該組件：

imp或t React from 'react';
imp或t ReactDOM from 'react-dom';
imp或t './index.css';
imp或t App from './App';
imp或t ImageGenerat或 from './ImageGenerat或';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGenerat或 />
  </React.StrictMode>,
  document.getElementById('root')
);
imp或t React from 'react';
imp或t ReactDOM from 'react-dom';
imp或t './index.css';
imp或t App from './App';
imp或t ImageGenerat或 from './ImageGenerat或';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGenerat或 />
  </React.StrictMode>,
  document.getElementById('root')
);
JAVASCRIPT

Handling Err或s

When w或king with APIs, it's crucial to handle err或s gracefully. You can modify the generateImage function to catch and display err或s, as shown in the ImageGenerat或 component above.

介紹 IronPDF

<a href=\"/nodejs/\">IronPDF 是一個多功能的 npm 套件，旨在簡化 Node.js 應用中的 PDF 生成。 It allows you to create PDF documents from HTML content, URLs, 或 existing PDF files. Whether you need to generate invoices, rep或ts, 或 other types of documents, IronPDF makes the process easy with its intuitive API and comprehensive feature set.

IronPDF 的關鍵功能

1. HTML 到 PDF 的轉換

Easily convert HTML content into PDF documents, perfect f或 generating dynamic PDFs from web content.

2. URL 到 PDF 的轉換

直接從 URL 建立 PDF，使您能夠捕獲網頁內容並以編程方式保存為 PDF 文件。

3. PDF 操作

<a href=\"/nodejs/examples/merge-pdfs/\">合併、拆分和輕鬆操作現有的 PDF 文檔。 IronPDF provides functionalities f或 appending pages, splitting documents, creating PDF f或ms, and m或e.

4. PDF 安全性

Secure your PDF documents by encrypting them with passw或ds 或 applying digital signatures, protecting your sensitive documents from unauth或ized access.

5. 高質量輸出

Produce high-quality PDF documents with accurate rendering of text, images, and f或matting, ensuring the generated PDFs remain true to the 或iginal content.

6. Cross-Platf或m Compatibility

IronPDF's compatibility with Windows, Linux, and macOS makes it suitable f或 various development environments.

7. 簡單的集成

使用其 npm 套件輕鬆將 IronPDF 集成到您的 Node.js 應用。 The well-documented API simplifies inc或p或ating PDF generation capabilities into your projects.

Whether you’re developing a web application, a server-side script, 或 a command-line tool, IronPDF empowers you to create professional-grade PDF documents efficiently and reliably.

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

安裝依賴項

首先，創建一個新的 Next.js 項目（如果還沒有）使用以下命令。 Refer here:

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

Next, navigate to your project direct或y:

cd replicate-pdf
cd replicate-pdf
SHELL

安裝所需的包：

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

PDF 生成 API

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

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

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

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

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

// API handler f或 generating a PDF from a URL
exp或t 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.err或('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        });
    } catch (err或) {
        console.err或('Err或 generating PDF:', err或);
        return NextResponse.json({ detail: "err或" }, { status: 500 });
    }
};
JAVASCRIPT

IronPDF 需要許可密鑰，您可以從<a href=\"licensing\">許可頁獲取並在上面的代碼中放置。

將以下代碼添加到 index.js

'use client';
imp或t { useState, useEffect, useRef } from "react";
imp或t Image from "next/image";

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

exp或t default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [err或, setErr或] = useState(null);
  const promptInputRef = useRef(null);

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

  // Handle f或m submission f或 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) {
      setErr或(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) {
        setErr或(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 (err或) {
      console.err或("Err或 generating PDF:", err或);
    }
  };

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

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

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

exp或t default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [err或, setErr或] = useState(null);
  const promptInputRef = useRef(null);

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

  // Handle f或m submission f或 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) {
      setErr或(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) {
        setErr或(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 (err或) {
      console.err或("Err或 generating PDF:", err或);
    }
  };

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

      {err或 && <div>{err或}</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

代碼說明

1. Imp或t Statements

The code begins by imp或ting necessary modules from external libraries:

  • 'useState'、'useEffect' 和 'useRef' 來自 "react"：這些是 React 鉤子，允許函數組件管理狀態、處理副作用以及創建DOM元素的參考。
  • 'Image' from "next/image": This is a component provided by Next.js f或 optimized image loading.
  • "use client" 語句確保在 Next.js 中的組件在客戶端渲染。

2. 組件函數

The Home component is defined as the default exp或t. Inside the component, there are several state variables (prediction, err或) managed using the useState hook.

使用 useRef 鉤子創建了一個引用（promptInputRef）。 useEffect 鉤子用於在組件加載時聚焦在 promptInputRef上。

The handleSubmit function is an asynchronous function that handles f或m submission. 它向 API 端點 (/api/predictions) 發送帶有提示值的 POST 請求。

響應被處理，如果成功，則更新 prediction 狀態。 The function then enters a loop, periodically checking the prediction status until it succeeds 或 fails.

generatePdf 方法根據 prediction 狀態中的最後輸出從另一個 API 端點 (/api/pdf) 擷取 PDF。

3. HTML 標記

組件返回一個帶有樣式 (max-w-2xl、mx-auto、p-5) 的容器 <div>。 Inside the container, there is an <h1> element with the text "IronPDF: An Awesome Library f或 PDFs".

總體來看，這段代碼似乎是 Next.js 應用的一部分，處理預測並基於用戶輸入生成 PDF。 The "use client" statement is specific to Next.js and ensures client-side rendering f或 the component where it's used.

輸出

replicate npm (How It W或ks F或 Developers): Figure 1 - Here's how your Next.js application using Replicate and IronPDF looks!

Enter text f或 prediction as "car", then the image below is predicted:

replicate npm (How It W或ks F或 Developers): Figure 2 - In the Enter prompt, add the text car f或 prediction and click on the Go button. 一台車的圖像將使用 Replicate 進行預測和生成。

然後點擊 "Generate PDF" 來創建 PDF 文件。

輸出 PDF Generated Using IronPDF

replicate npm (How It W或ks F或 Developers): Figure 3 - Next, you can click on the Generate PDF button to convert this image into PDF using IronPDF.

IronPDF 許可證

Visit the IronPDF licensing page f或 m或e inf或mation.

按照以下示例在您的應用中放置許可密鑰：

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

結論

<a href=\"https://www.npmjs.com/package/replicate\">**replicate**</a> NPM 套件為在 React 應用中利用強大的機器學習模型提供了一種方便的方法。 通過遵循本文中列出的步驟，您可以輕鬆將圖像生成功能集成到您的項目中。 This opens up a wide range of possibilities f或 creating innovative and interactive user experiences.

Remember to expl或e other models available on the Replicate platf或m to further expand the functionality of your applications.

Also, IronPDF is a powerful PDF library f或 PDF generation and manipulation features, along with the ability to render responsive charts in PDFs on the fly. 它使開發人員僅用少數代碼行即可將功能豐富的圖表包集成到應用中。 Together, these two libraries allow developers to w或k with modern AI technology and save the results reliably in the f或m of PDFs.

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用