ai outpainting com
1.0.0
https://www.ai-outpainting.com
ホームページ
価格ページ
ブログ一覧
画像編集
1. nextjs 14とtailwindcss3をベースに開発したAI画像拡張サイト、サイトアドレス：https://www.ai-outpainting.com/
2. Web サイトはバックエンド AI モデルで使用する必要があります。バックエンド モデルは自分で構築する必要があります。
モデルアドレス: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint
3. 国際化は lingui を使用して実装されます。next-intl と比較した場合、コマンドを通じてコピーを抽出して多言語ファイルを生成する必要がないという利点があります。次に、多言語ファイルに基づいて翻訳を実行します
4. プロジェクトは、国際コンテンツの自動翻訳やブログ コンテンツの自動翻訳など、いくつかの自動スクリプトを作成しました。これらは必要に応じて手動で実行する必要があります
5. プロジェクトは、データベース、cloudfare r2 ストレージ、Google ログインに必要なパラメータ、および Paypal 支払いパラメータに依存します。これらのパラメータは、.env および .env.production ファイルで構成されます。
6. next-auth を使用して Google ログインを統合します。ローカル開発中に Google でログインする必要がある場合は、ソース コードを変更する必要があります。変更しないとエラーが報告されます。具体的な変更については、以下の説明を参照してください。
7. PayPal と Stripe 支払いの統合。サンドボックス環境はローカル開発に使用されます。正式な環境では、.env.production ファイルで正式な paypal パラメータを設定する必要があります。
8. 現在のプロジェクトでの AI モデルの呼び出し方はおおよそ次のとおりです。
処理結果をcloudfare r2ストレージにアップロードし、現在のWebサイトの注文状況更新コールバックアドレスを呼び出します。
処理結果は同時に MQ キューに送信され、MQ キュー マネージャー サービスによってフロント エンドにプッシュされ、フロント エンドが処理結果を受信した後、フロント エンド ページに結果が表示されます。
フロントエンドは注文を作成するリクエストを開始し、注文番号と現在の Web サイトの注文ステータス更新コールバック アドレスを伝え、MQ キュー マネージャー サービスを呼び出します (これは Python で開発されたマイクロサービスであり、私にはとりあえずのコード）
MQ キュー管理サービス バックエンドへの SSE リクエストを開始し、MQ キュー マネージャー サービスが完了するまで待機し続け、結果を返します。
リクエストを受信した後、バックエンド MQ キュー マネージャー サービスは注文情報を MQ キューに直接送信します。
GPU サーバーは、注文情報を取得した後、処理のために AI モデルの呼び出しを開始し、次の 2 つのことを行います。
プロセス全体には、Web サイトと GPU サーバー間の直接通信は含まれておらず、ファイルは R2 ストレージ経由で転送されます。注文量が多すぎる場合、GPU はいつでも追加できます。サーバーを Web サイトに調整する必要はありません。
9. 全体的なアーキテクチャ図は次のとおりです。 
10.別の実装ソリューション
処理結果をcloudfare r2ストレージにアップロードし、現在のWebサイトの注文状況更新コールバックアドレスを呼び出して注文状況を更新します。
フロントエンドが注文を作成した後、ページは注文が完了するまでポーリングを通じて注文ステータスを継続的にチェックします。
バックエンドには定期的にデータベースをスキャンして注文ステータスが保留中の注文を取得する他のプログラムがあり、注文情報を取得した後、処理が完了した後に AI モデルの呼び出しを開始します。完了する:
11. 予算に余裕がある場合は、MQ キュー マネージャー サーバーを自分で実装する必要はなく、SDK を統合するだけで、runpod の API サービスを直接使用することも検討できます。
参考コード
import runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } from 'runpod-sdk'async function fetchProcessByRunPod(data: any): Promise<EndpointIncompleteOutput> {
// const serverUrl = `${UE_PROCESS_API}/create_docker`
// https://docs.runpod.io/serverless/endpoints/job-operations
const runpod = runpodSdk("N5J×xxxxxxxxxxxx");
const エンドポイント = runpod.endpoint("1zgk5xi3ew77pv");
console.log("runpod エンドポイントの呼び出しを開始,data:",data)
エンドポイントを返す?.run({"入力": データ,
})}現在のプロジェクトのソース コードで AI 画像拡張機能を完全に使用する必要がある場合は、上記のソリューションを選択し、app/[lang]/(editor で注文の作成と注文ステータスの監視のロジックを変更する必要があります) )/editor/view.tsx ファイル! ！ ！
ページを変更して新しいコンテンツを追加するたびに、 yarn extractコマンドを実行して新しいコピーを国際ファイルに抽出し、 yarn translateコマンドを実行してコピーを対応する言語に翻訳する必要があります。
新しいブログ記事がある場合は、 yarn translateコマンドを実行して、新しいブログのコンテンツを対応する言語に翻訳する必要があります。
変換には API の呼び出しが含まれます。まず API キーを申請してから、scripts/openai-chat.js で API キーを変更する必要があります。
多言語コンテンツを追加または削減する必要がある場合は、次の 3 つのファイルを変更する必要があります: Framework/locale/locale.ts Framework/locale/localeConfig.js Framework/locale/messagesLoader.ts
node scripts/generator-website.js コマンドを直接使用して Web サイトのコンテンツを生成します (このコマンドは、指定されたキーワードに関連するコピーライティング、TDK、およびブログのタイトルを生成します)
まずキーワードと説明を変更してから、コマンドを実行する必要があります。
// ウェブサイトのキーワード const キーワード = '画像 AI を拡張' // Web サイトについて説明する必要があります const description = 'AI テクノロジーを使用して、元の画像を変更せずに画像を拡大し、周囲のコンテンツを拡大し、元の画像とのコンテンツの連続性を維持します。
config/site.ts の構成情報を変更します。
独自のロゴ favicon.ico を public/ ディレクトリに配置し、元のファイルを直接置き換えます
public/sitemap.xml のドメイン名を変更します。
.env および .env.production の構成情報を変更します。具体的な変更要件については、コメントを参照してください。
現在のプロジェクトでは ORM フレームワークとして prisma を使用しています。テーブル構造は schema.prisma ファイルで宣言されています。これを初めて使用するには、次のコマンドを実行する必要があります。
// このコマンドは、テーブル構造宣言に基づいてデータベース テーブルを生成し、テーブル データを初期化します。新しいテーブルフィールドの更新がある場合は、現在のコマンドyarn pg:maigrateを実行する必要があります。 // その他の操作コマンドについては、prisma の公式ドキュメントを直接読むことをお勧めします。
Web サイトのカラー マッチング情報は、tailwind.config.ts ファイルに保存されています。カラー マッチングを変更する必要がある場合は、tailwind.config.ts ファイルの内容を直接変更します。
コードを github.com に送信し、vercel を使用してコード ウェアハウスをデプロイメントに関連付けます。具体的なプロセスについては、関連ドキュメントを参照してください。
【2024-10-19】 Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json "@lingui/swc-plugin": "4.0.8" を修正して解決しました。 、バージョンは解決されました。ローカルのnode_modulesディレクトリを削除し、依存関係を再インストールして問題を解決します。
Google ログイン設定の参照スクリーンショットを追加
【2024-10-20】 webpack無視プラグインを追加することで、起動時にError: Cannot find module 'canvas'の問題を解決しました。多言語ファイルの読み込み方法を最適化します。
1. 純粋な tailwindcss コード コンポーネントの Web サイト
一部の既製のコンポーネント コードは Web サイトから直接コピーでき、2 つのベースに完全に実装されています。
2. コンポーネントベースの UI フレームワーク -nextui.org
カプセル化されたコンポーネントに基づいて直接使用できるようにする
3.icon コンポーネント-反応-アイコン
直接使用できるデフォルトのアイコンの複数のセットを提供します
4.価格ページの生成
シピセン
5.国際化
国際化ファイルを動的に生成する
6.MDXブログ
MDX に基づいてブログ コンテンツを生成する
7.Google認証設定センター
Googleログインに必要なパラメータを設定する
現在のプロジェクト開発環境では、ローカルで google.com を呼び出すことができない問題を解決するために、カスタム プロキシ アドレスが使用されています。特定の構成については、コード config/auth-config.ts を参照してください。実稼働環境には影響しません
https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/vercel-caching-issue
Google をクリックしてログインすると、 There is a problem with the server configuration.バックエンド プロンプト[auth][error] OperationProcessingError: "response" body "issuer" property does not match the expected valueメッセージが表示されます。次のように変更します。
node_modules/@auth/core/node_modules/oauth4webapi/build/index.js または node_modules/oauth4webapi/dist/index.js ファイルを変更します。
変更後は、.next ディレクトリを手動で削除して再コンパイルする必要があります。
1034 行、1003 行、または 1237 行 (バージョンが異なると異なる場合があります)、スローされた例外をコメント化します。 一部の新しいバージョンでは、この行が該当するとは限りません。次の点を参照してエラー メッセージを見つけ、コメント化してください。
function validateIssuer(expected, result) {
if (result.claims.iss !== Expected) {// throw new OPE('予期しない JWT "iss" (発行者) クレーム値');
}
結果を返します;}250 行目または 238 行目 (バージョンによって異なる場合があります)、スローされた例外に関するコメント
if (新しい URL(json.issuer).href !== ExpectedIssuerIdentifier.href) {
// throw new OPE('"response" body "issuer" が "expectedIssuer"');}変更後は、.next ディレクトリを手動で削除し、run dev を再度実行する必要があります。
scripts/add-word-locale.js で言語コードとターゲット単語を変更して単語の密度を調整します。
cd scripts/ ディレクトリでコマンドを実行します: bun run add-word-locale.jsまたはnode add-word-locale.js
本プロジェクトはMITオープンソースライセンスを採用していますので、契約内容に従ってください。
もしよろしければ、私のウェブサイトへのリンクを残してください: https://www.ai-outpainting.com/ ありがとうございます!
このプロジェクトが役に立った場合は、スターを付けてください。ありがとうございます。
技術的な質問がある場合は、WeChat を追加して連絡してください: fafafa-ai
小さな宣伝: 現在の ai-outpainting ウェブサイトでは外部リンクの有料提出を受け付けています。必要な友人は私に連絡してください。
