メッセージアイコン
  1. Node.js 用 IronPDF
  2. IronPDF for Node.js ブログ
  3. ノードヘルプ
  4. npm を複製する
ノードヘルプ

npmを複製する（開発者向けの動作方法）

公開済み 2024年9月29日
共有:

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

Replicateの紹介

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

はじめに

インストール

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

npm install replicate

または

yarn add replicate

APIキー

Replicate APIとやり取りするには、APIキーが必要です。 このキーは、サインアップすることで取得できます。Webサイトを複製する新しいAPIトークンを作成する。

基本的な使用法

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

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

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

2. 推論を実行する

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

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

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

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

1. 新しい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;
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')
);
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.");
  }
};
JAVASCRIPT

IronPDFの紹介

IronPDFは、Node.jsアプリケーションでのPDF生成を簡素化するために設計された多用途のnpmパッケージです。 PDFドキュメントを作成することができますHTMLコンテンツ, URL、または既存の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コンポーネントで(例: ページ/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 });
    }
}
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>
  );
}
JAVASCRIPT

コードの説明

1. インポート文

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

「next/image」から「Image」： これは、Next.js によって提供される最適化された画像読み込み用のコンポーネントです。 "use client" ステートメントは、標準的なJavaScriptまたはReactのインポートではありません。 それはNext.jsに特有であるようです。(Reactフレームワーク)それを使用するコンポーネントがクライアント側でレンダリングされるべきであることを示します。これにより、そのコンポーネント用の必要なJavaScriptがクライアントに送信されます。

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

「Home」コンポーネントはデフォルトエクスポートとして定義されています。 コンポーネントの内部には、いくつかの状態変数があります。(「予測」、「エラー」)'useState' フックを使用して管理されています。

参照('promptInputRef')「useRef」フックを使用して作成されます。 'useEffect' フックは、コンポーネントがマウントされたときに 'promptInputRef' にフォーカスするために使用されます。

「handleSubmit」関数は、フォームの送信を処理する非同期関数です。 それはAPIエンドポイントにPOSTリクエストを送信します。(`/api/predictions`)プロンプト値を使用して。

応答が処理され、成功すると、「prediction」状態が更新されます。 その後、関数はループに入り、予測のステータスを定期的に確認し、成功または失敗するまで続けます。 「generatePdf」メソッドは、別のAPIエンドポイントからPDFを取得します。(`/api/pdf`)「予測」状態の最後の出力に基づいて。

3. HTMLマークアップ

コンポーネントは、一部のスタイリングを伴うコンテナのdivを返します。(「max-w-2xl」、「mx-auto」、「p-5」). コンテナの中には、テキスト「AwesomeIron」が含まれる '

' 要素があります。(プロジェクト名またはタイトルになる可能性があるもの).

全体として、このコードはNext.jsアプリケーションの一部であり、ユーザーの入力に基づいて予測を処理し、PDFを生成するものと思われます。 「use client」ステートメントはNext.jsに特有のもので、使用されているコンポーネントのクライアントサイドレンダリングを保証します。 コードの特定の部分について具体的な質問がある場合

出力

レプリケート npm (開発者向けの動作方法): 図1 - ReplicateとIronPDFを使用したあなたのNext.jsアプリケーションはこのようになります！

テキストを「car」として入力すると、以下の画像が予測されます。

npm を複製する(開発者向けの仕組み): 図2 - Enterプロンプトに予測用のテキスト「car」を追加し、Goボタンをクリックします。 車の画像は、Replicate を使用して予測および生成されます。

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

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

npm を複製する（開発者向けの仕組み）：図 3 - 次に、IronPDF を使用してこの画像を PDF に変換するために、[PDFを生成] ボタンをクリックできます。

IronPDFライセンス

IronPDFページ

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

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

結論

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

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

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

< 以前
xml2js npm（開発者向けの仕組み）
次へ >
toastify npm（開発者向けの仕組み）

npmでインストール

バージョン:2024.12

> npm i @ironsoftware/ironpdf

問題を報告

準備はできましたか？ バージョン: 2024.12 新発売

無料のnpmインストール
無料で始める
npm ダウンロード 無料トライアルを開始
ライセンスを表示 >
Experience the full power of IronPDF 無料トライアルを開始