ライブ環境でテストする
ウォーターマークなしで本番環境でテストしてください。
必要な場所でいつでも動作します。
「複製するNPMパッケージは、Reactアプリケーションに機械学習モデルを統合するための強力なクライアントツールです。 それにより、開発者は事前にトレーニングされたモデルを簡単に利用し、自分のアプリケーション内で直接推論を実行することができます。複雑なバックエンドインフラストラクチャを管理する必要はありません。 こちらは、使用方法の概要です。replicate NPMパッケージあなたのReactプロジェクトで。 また、次のことも検討する。IronPDF、PDF生成ライブラリでPDFを生成し、両方のライブラリを組み合わせて動作するアプリケーションを作成します。
複製オンラインプラットフォームで、シンプルなAPIを介して機械学習モデルへのアクセスを提供します。 さまざまな分野のモデルをホストしており、画像生成、テキスト分析などがあります。 開発者は'replicate' NPMパッケージを使用することで、これらのモデルをアプリケーションにシームレスに統合できます。
Reactアプリケーションで`replicate`を使用するには、まずインストールする必要があります。パッケージ. npmまたはyarnを使用してこれを行うことができます。
npm install replicate
npm install replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install replicate
または
yarn add replicate
yarn add replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add replicate
Replicate APIとやり取りするには、APIキーが必要です。 このキーは、サインアップすることで取得できます。Webサイトを複製する新しいAPIトークンを作成する。
以下は、Reactアプリケーションで`replicate`パッケージを使用するためのステップバイステップガイドです。
import Replicate from 'replicate';
const output = new Replicate({
auth: 'YOUR_API_TOKEN'
});
import Replicate from 'replicate';
const output = new Replicate({
auth: 'YOUR_API_TOKEN'
});
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import Replicate from 'replicate'; const output = New Replicate({ auth: 'YOUR_API_TOKEN' });
テキストから画像を生成するモデルを使用する場合、わずか数行のコードで以下のような結果を得ることができます。
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);
const result = Await replicate.run("stability-ai/stable-diffusion", {
input:= { prompt:= "a futuristic cityscape" }
}) ' identifier and prediction parameters
console.log(result)
簡単なReactアプリケーションを作成し、ユーザーがテキストプロンプトに基づいて画像を生成できるようにして、Node Replicateの使用例を示しましょう。
npx create-react-app replicate-example
cd replicate-example
npm install replicate
npx create-react-app replicate-example
cd replicate-example
npm install replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-react-app replicate-example cd replicate-example npm install replicate
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;
'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
useState
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from 'react'; import Replicate from 'replicate'; const replicate = New Replicate({ auth: 'YOUR_API_TOKEN' }); const ImageGenerator = () => { const [prompt, setPrompt] = useState(''); const [image, setImage] = useState(Nothing); 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)} placeholder="Enter a prompt" /> <button onClick={generateImage}> Generate Image</button> {image && <img src={image} alt="Generated" />} </div>); }; export default ImageGenerator;
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')
);
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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'));
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.");
}
};
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 Sub()
Try
const result = Await replicate.run("stability-ai/stable-diffusion", {
input:= { prompt }
})
setImage(result.output(0))
Catch e1 As [error]
console.error("Error generating image:", [error])
alert("Failed to generate image. Please try again.")
End Try
End Sub
IronPDFは、Node.jsアプリケーションでのPDF生成を簡素化するために設計された多用途のnpmパッケージです。 PDFドキュメントを作成することができますHTMLコンテンツ, URL、または既存のPDFファイル。 請求書、レポート、その他の種類の文書を生成する必要がある場合でも、IronPDFはその直感的な機能でプロセスを簡単にします。API包括的な機能セット。
簡単にHTMLコンテンツをPDFドキュメントに変換するウェブコンテンツから動的PDFを生成するのに最適です。
URLから直接PDFを作成し、ウェブページのコンテンツをプログラムでキャプチャしてPDFファイルとして保存します。
マージ既存のPDFドキュメントを簡単に分割し、操作します。 IronPDFは、ページの追加やドキュメントの分割の機能を提供します。PDFフォームの作成など。
PDF文書を保護して暗号化それらとともにパスワードまたは適用するデジタル署名、機密文書を不正アクセスから保護します。
テキスト、画像、フォーマットを正確にレンダリングし、生成されたPDFが元のコンテンツに忠実であることを保証しながら、高品質のPDFドキュメントを作成します。
IronPDFのWindows、Linux、macOSとの互換性により、さまざまな開発環境に適しています。
npmパッケージを使用して、Node.jsアプリケーションに簡単にIronPDFを統合できます。 十分に文書化されたAPIは、プロジェクトにPDF生成機能を組み込むことを簡単にします。
ウェブアプリケーション、サーバーサイドスクリプト、またはコマンドラインツールを開発している場合でも、IronPDFを使用すれば、プロフェッショナルグレードのPDFドキュメントを効率的かつ信頼性で作成することができます。
**依存関係のインストールまず、新しいNext.jsプロジェクトを作成します。(まだなら)以下のコマンドを使用する:参照これ
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"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-@next-app@latest replicate-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
次に、プロジェクト・ディレクトリに移動する:
cd replicate-pdf
cd replicate-pdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd replicate-pdf
必要なパッケージをインストールする:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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 });
}
}
// 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
If True Then
NextRequest, NextResponse
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from '@next/server'; import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf"; 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 }); } }
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>
);
}
'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>
);
}
'INSTANT VB TODO TASK: The following line uses invalid syntax:
''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(Nothing); const [@error, setError] = useState(Nothing); const promptInputRef = useRef(Nothing); 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>); }
コードは、まず外部ライブラリから必要なモジュールをインポートすることから始まります: "react" からの 'useState', 'useEffect', および 'useRef' です。これらは、それぞれ関数コンポーネントが状態を管理し、副作用を処理し、DOM要素への参照を作成できるようにするReactフックです。
「next/image」から「Image」: これは、Next.js によって提供される最適化された画像読み込み用のコンポーネントです。 "use client" ステートメントは、標準的なJavaScriptまたはReactのインポートではありません。 それはNext.jsに特有であるようです。(Reactフレームワーク)それを使用するコンポーネントがクライアント側でレンダリングされるべきであることを示します。これにより、そのコンポーネント用の必要なJavaScriptがクライアントに送信されます。
「Home」コンポーネントはデフォルトエクスポートとして定義されています。 コンポーネントの内部には、いくつかの状態変数があります。(「予測」、「エラー」)'useState' フックを使用して管理されています。
参照('promptInputRef')「useRef」フックを使用して作成されます。 'useEffect' フックは、コンポーネントがマウントされたときに 'promptInputRef' にフォーカスするために使用されます。
「handleSubmit」関数は、フォームの送信を処理する非同期関数です。 それはAPIエンドポイントにPOSTリクエストを送信します。(`/api/predictions`)プロンプト値を使用して。
応答が処理され、成功すると、「prediction」状態が更新されます。 その後、関数はループに入り、予測のステータスを定期的に確認し、成功または失敗するまで続けます。 「generatePdf」メソッドは、別のAPIエンドポイントからPDFを取得します。(`/api/pdf`)「予測」状態の最後の出力に基づいて。
コンポーネントは、一部のスタイリングを伴うコンテナのdivを返します。(「max-w-2xl」、「mx-auto」、「p-5」). コンテナの中には、テキスト「AwesomeIron」が含まれる '
全体として、このコードはNext.jsアプリケーションの一部であり、ユーザーの入力に基づいて予測を処理し、PDFを生成するものと思われます。 「use client」ステートメントはNext.jsに特有のもので、使用されているコンポーネントのクライアントサイドレンダリングを保証します。 コードの特定の部分について具体的な質問がある場合
テキストを「car」として入力すると、以下の画像が予測されます。
その後、[PDFを生成] をクリックして、PDF文書を作成します。
IronPDFページ
次の例に示すように、アプリにライセンスキーを配置してください。
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";
IRON VB CONVERTER ERROR developers@ironsoftware.com
ザ `複製する` NPMパッケージは、強力な機械学習モデルをReactアプリケーションに活用するための便利な方法を提供します。 この記事で説明されている手順に従うことで、プロジェクトに画像生成機能を簡単に統合できます。 これにより、革新的でインタラクティブなユーザー体験を創造するための幅広い可能性が開かれます。
他のモデルも必ず探索してください。複製アプリケーションの機能をさらに拡張するためのプラットフォーム。
また、IronPDFは、PDF生成および操作機能を備えた強力なPDFライブラリであり、さらに能力を持っています。レスポンシブチャートをレンダリングするPDFでその場で。 それは、開発者が数行で豊富な機能を備えたチャートパッケージをアプリに統合することを可能にします。 これらの2つのライブラリと共に、開発者は現代のAI技術を利用して、結果をPDF形式で確実に保存することができます。
9つの .NET API製品 オフィス文書用