'replicate' NPMパッケージは、機械学習モデルをReactアプリケーションに統合するための強力なクライアントツールです。 それにより、開発者は事前にトレーニングされたモデルを簡単に利用し、自分のアプリケーション内で直接推論を実行することができます。複雑なバックエンドインフラストラクチャを管理する必要はありません。 こちらは、Reactプロジェクトでreplicate NPMパッケージを使用する方法の概要です。 また、PDF生成ライブラリであるIronPDFを検討し、PDFを生成し、両方のライブラリを組み合わせて動作するアプリケーションを作成します。

Replicateの紹介

Replicate は、シンプルなAPIを通じて機械学習モデルにアクセスできるオンラインプラットフォームです。 さまざまな分野のモデルをホストしており、画像生成、テキスト分析などがあります。 開発者は'replicate' NPMパッケージを使用することで、これらのモデルをアプリケーションにシームレスに統合できます。

はじめに

インストール

Reactアプリケーションで`replicate`を使用するには、まずパッケージをインストールする必要があります。 npmまたはyarnを使用してこれを行うことができます。

npm install replicate

または

yarn add replicate

APIキー

Replicate APIとやり取りするには、APIキーが必要です。 このキーは、Replicateのウェブサイトに登録し、新しいAPIトークンを作成することで取得できます。

基本的な使用法

こちらは、Reactアプリケーションで`replicate`パッケージを使用するためのステップバイステップガイドです。

1. パッケージをインポートしてクライアントを初期化する

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

js

2. 推論を実行する

テキストから画像を生成するモデルを使用する場合、わずか数行のコードで以下のような結果を得ることができます。

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

js

サンプルアプリケーション

簡単なReactアプリケーションを作成し、ユーザーがテキストプロンプトに基づいて画像を生成できるようにして、Node Replicateの使用例を示しましょう。

新しい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

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

エラー処理

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

IronPDFの紹介

IronPDFは、Node.jsアプリケーションでPDF生成を簡素化するために設計された多用途なnpmパッケージです。 それは、HTMLコンテンツ、URL、または既存のPDFファイルからPDF文書を作成することを可能にします。 請求書、レポート、その他の種類のドキュメントを生成する必要がある場合でも、IronPDFは使いやすい直感的なAPIと包括的な機能セットでプロセスを簡単にします。

IronPDFの主な機能

1.HTMLからPDFへの変換

簡単にHTMLコンテンツをPDFドキュメントに変換し、ウェブコンテンツから動的PDFを生成するのに最適です。

2. URLからPDFへの変換

URLから直接PDFを作成し、ウェブページのコンテンツをプログラムでキャプチャしてPDFファイルとして保存します。

3. PDF操作

マージ、分割、および既存のPDFドキュメントを簡単に操作。 IronPDFは、ページの追加、ドキュメントの分割、PDFフォームの作成などの機能を提供します。

4. PDFセキュリティ

パスワードで暗号化したり、デジタル署名を適用したりしてPDFドキュメントを保護し、機密文書を不正アクセスから守りましょう。

5. 高品質な出力

テキスト、画像、フォーマットを正確にレンダリングし、生成されたPDFが元のコンテンツに忠実であることを保証しながら、高品質のPDFドキュメントを作成します。

6. クロスプラットフォーム互換性

IronPDFのWindows、Linux、macOSとの互換性により、さまざまな開発環境に適しています。

7. 簡単な統合

npmパッケージを使用して、Node.jsアプリケーションに簡単にIronPDFを統合できます。 十分に文書化された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: 最初のステップは、PDFドキュメントを生成するためのバックエンドAPIを作成することです。 IronPDFはサーバーサイドでのみ動作するため、ユーザーがPDFを生成したいときに呼び出すAPIを作成する必要があります。 パス 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

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

コードの説明

1. インポート文

コードは、まず外部ライブラリから必要なモジュールをインポートすることから始まります: "react" からの 'useState', 'useEffect', および 'useRef' です。これらは、それぞれ関数コンポーネントが状態を管理し、副作用を処理し、DOM要素への参照を作成できるようにするReactフックです。

'Image' from "next/image": これは、Next.js が提供するコンポーネントで、画像の最適化された読み込みを可能にします。 "use client" ステートメントは、標準のJavaScriptやReactのインポートではありません。 それはNext.js（Reactフレームワーク）に特有のものであり、それを使用するコンポーネントがクライアントサイドでレンダリングされるべきであることを示しています。そのコンポーネントに必要なJavaScriptがクライアントに送信されることを保証します。

2. コンポーネントの機能

「Home」コンポーネントはデフォルトエクスポートとして定義されています。 コンポーネント内で、'useState'フックを使用して管理されているいくつかの状態変数（「prediction」「error」）があります。

「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を生成するものと思われます。 「use client」ステートメントはNext.jsに特有のもので、使用されているコンポーネントのクライアントサイドレンダリングを保証します。 コードの特定の部分について具体的な質問がある場合

出力

車と予測するテキストを入力すると、下の画像が予測されます。

![replicate npm (開発者向け動作方法): 図2 - 入力プロンプトに「car」と入力して予測を行い、Goボタンをクリックします。] 車の画像は、Replicate を使用して予測および生成されます。](/static-assets/pdf/blog/replicate-npm/replicate-npm-2.webp)

その後、[PDFを生成] をクリックして、PDF文書を作成します。

IronPDFを使用して生成されたOUTPUT PDF

IronPDFライセンス

IronPDF ページ。

次の例に示すように、アプリにライセンスキーを配置してください。

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

js

結論

`replicate` NPMパッケージは、強力な機械学習モデルをReactアプリケーションに活用するための便利な方法を提供します。 この記事で説明されている手順に従うことで、プロジェクトに画像生成機能を簡単に統合できます。 これにより、革新的でインタラクティブなユーザー体験を創造するための幅広い可能性が開かれます。

あなたのアプリケーションの機能をさらに拡張するために、Replicate プラットフォームで利用可能な他のモデルも必ず探索してください。

また、IronPDFは、PDFの生成と操作機能を備えた強力なPDFライブラリであり、PDF内でレスポンシブチャートを即時にレンダリングすることができます。 それは、開発者が数行で豊富な機能を備えたチャートパッケージをアプリに統合することを可能にします。 これらの2つのライブラリと共に、開発者は現代のAI技術を利用して、結果をPDF形式で確実に保存することができます。