stableDiffusion4R_API

Warning

現在開発中です。

概要

backend

本番環境: backend/productionApi (plumber を使用)

• LICENSE Apache 2.0
• 使用言語: R
• IP address: 127.0.0.1
• port: 8000

本番のテスト環境: backend/preApi (plumber を使用)

• LICENSE Apache 2.0
• 使用言語: R
• IP address: 127.0.0.1
• port: 8000

開発環境: backend/developmentApi (Hono を使用)

• LICENSE MIT License
• 使用言語: TypeScript
• IP address: 127.0.0.1
• port: 8000

frontend

Next.js: frontend

• LICENSE MIT License
• 使用言語: TypeScript
• IP address: 127.0.0.1
• port: 3000

storybook: frontend

• コンポーネントのタカログを見るもの
• port: 6006

概略図

flowchart LR
    developmentApi<--開発時用--->Next.js
    preApi<--本番のテスト用--->Next.js
    productionApi<--本番用--->Next.js
    subgraph backend
    developmentApi
    preApi
    productionApi
    end
    subgraph frontend
    Next.js
    end

本番環境の概略図

flowchart LR
    backend<-->frontend
    frontend<--cloudflare tunnel--->client["Client PC"]
    subgraph Origin Server
    backend
    frontend
    end
    subgraph Client PC
    client
    end

Web API に関して

Tip

モデルを追加する際には、必ずお読みください。

Important

バックエンドのエンドポイントと modelType の要素名は一致させる必要があります。

バックエンドのエンドポイントを書くファイル -> /backend/productionApi/plumber.R

modelType が書いているファイル -> frontend/src/constants/api.ts

バックエンドのエンドポイントを/modelA/<prompt>としている場合、modelType: string[] = ["modelA"]とします。

Warning

以下の説明は、エンドポイントの名前をモデル名としているという設定で、説明しています。

フロントエンド側の Web API に関係する設定

frontend/src/constants/api.ts

const modelType: string[] = ["stableDiffusion4R", "modelA", "modelB", "modelC"];

export { modelType };

modelType ・・・ モデルの名前を書きます。

※ モデルを追加する場合は、modelType にモデル名を追加してください。

バックエンド側の Web API に関する設定 (plumber)

Note

エンドポイントは、/モデル名/<prompt>で設定する必要があります。

※フロントエンドでは以下の URL が組み立てられます。

[frontend/.env 内の NEXT_PUBLIC_API_URL]/[modelType]/[prompt]

example) http://127.0.0.1:8000/stableDiffusion4R/hello

想定しているバックエンドが返すデータの構造

※フロントエンドでは、このデータ構造でバックエンドがデータを返すことを想定して作成しています。

{
  "prompt": ["プロンプト"],
  "url": ["画像のURL"]
}

/backend/productionApi/plumber.R

以下のプログラムの場合は、モデル名が「stableDiffusion4R」になります。

library(plumber)
library(stableDiffusion4R)


#* @filter cors
cors <- function(req, res) {
  res$setHeader("Access-Control-Allow-Origin", "*")
  if (req$REQUEST_METHOD == "OPTIONS") {
    res$setHeader("Access-Control-Allow-Methods", "GET")
    res$setHeader(
      "Access-Control-Allow-Headers",
      req$HTTP_ACCESS_CONTROL_REQUEST_HEADERS
    )
    res$status <- 200
    return(list())
  } else {
    plumber::forward()
  }
}

#* Generate Dalle Image for R
#* @param prompt プロンプトを入力してください。
#* @get /dalle3/<prompt:character>
function(prompt) {
  #prompt = "cat"
  prompt <- prompt
  url <- stableDiffusion4R::generateDalleImage4R(prompt, Output_image = F)

  result <- list(prompt=url[1], url=url[2])
  return(result)
}

本番環境のセットアップ (Docker を利用しない場合)

Note

Node.js・npm・yarnが必要です。

Note

本番環境では、frontend を cloudflare tunnel を利用して配信することを想定しています。

1. cloudflare tunnel を作成します。

• Service は、http://127.0.0.1:3000にします。

• ホストマシンの環境に合わせて、cloudflare tunnel をセットアップしてください。

2. .envファイルを作成し、frontend/.env.prod.exampleを参考に適切に環境変数を設定します。

• .envファイルは、gen_dotenv.cmd(Windows 環境の場合)かsh gen_dotenv.sh(Linux 環境の場合)を実行することで生成できます。(初回時のみ実行してください。)

• NEXT_PUBLIC_API_URLは、frontend/.env.prod.exampleに書いている情報をそのまま使ってください。

以下のようになっていれば、OK です。

frontend/.env

#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

3. backend/productionApiで以下のコマンドを実行します。

※ローカルサーバーが起動します。

Windows

plumber.cmd

Mac

plumber.commndをダブルクリックします。

4. frontendで以下のコマンドを実行します。

• フロントエンドで使用するパッケージマネージャー: npm

npm i

5. frontendで以下のコマンドを実行します。

※npm startで Web App をローカルサーバーで起動します。

[!TIP] > frontend配下にあるプログラムに変更を加えた場合は、npm run buildとnpm startをnpm run build -> npm run startの順で実行してください。

npm run build
npm start

本番環境のセットアップ (Docker を利用する場合)

Note

本番環境では、frontend を cloudflare tunnel を利用して配信することを想定しています。

1. cloudflare tunnel を作成します。

• cloudflare tunnel を作成する際に、token を控えておきます。 ※Overview の Choose your environment で Docker を選択して表示される「Run the following command: 」の--token以降が token です。

• Service は、http://stablediffusion4r_api-frontend:3000にします。

2. .envファイルを作成し、.env.prod.exampleを参考に適切に環境変数を設定します。

• .envファイルは、gen_dotenv.cmd(Windows 環境の場合)かsh gen_dotenv.sh(Linux 環境の場合)を実行することで生成できます。(初回時のみ実行してください。)

• NEXT_PUBLIC_API_URLは、.env.prod.exampleに書いている情報をそのまま使ってください。

• CLOUDFLARE_TUNNEL_TOKENは、1. で控えておいた token を書いてください。

以下のようになっていれば、OK です。

.env

#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
CLOUDFLARE_TUNNEL_TOKEN=<控えておいたtokenを書きます。>

frontend/.env

#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

3. docker compose -f prod.docker-compose.yaml up -dを実行します。

• このコマンドで、コンテナのビルドから起動までします。

• cloudflare tunnel のコンテナ・バックエンドのコンテナ・フロントエンドのコンテナの計 3 つが起動します。

Finish！

本番のテスト用の環境のセットアップ

1. .envファイルを作成し、.env.pre.exampleを参考に適切に環境変数を設定します。

• .envファイルは、gen_dotenv.cmd(Windows 環境の場合)かgen_dotenv.sh(Linux 環境の場合)を実行することで生成できます。

• NEXT_PUBLIC_API_URLは、.env.pre.exampleに書いている情報をそのまま使ってください。

以下のようになっていれば、OK です。

.env

#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
# CLOUDFLARE_TUNNEL_TOKEN=

frontend/.env

#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

2. CORS に関する適切な設定をします。

productionApi(本番環境で使う Web API)の設定には、不十分な設定の状態の箇所があります。

Caution

Access-Control-Allow-Origin の設定を、"*"からフロントエンドを配信するのに使用しているオリジンに変更してください。

オリジン名を「https://gen-img.example.hogehoge」とした場合は、以下のように設定します。

res$setHeader("Access-Control-Allow-Origin", "https://gen-img.example.hogehoge")

現在の CORS の設定は、以下のようになっています。

/backend/productionApi/plumber.R

#* @filter cors
cors <- function(req, res) {
  res$setHeader("Access-Control-Allow-Origin", "*")
  if (req$REQUEST_METHOD == "OPTIONS") {
    res$setHeader("Access-Control-Allow-Methods", "GET")
    res$setHeader(
      "Access-Control-Allow-Headers",
      req$HTTP_ACCESS_CONTROL_REQUEST_HEADERS
    )
    res$status <- 200
    return(list())
  } else {
    plumber::forward()
  }
}

3. docker compose -f pre.docker-compose.yaml up -dを実行します。

• このコマンドで、コンテナのビルドから起動までします。

• バックエンドのコンテナ・フロントエンドのコンテナの計 2 つが起動します。

Finish！

ウェブアプリへのアクセス

http://127.0.0.1:3000/

storybook が生成したカタログへのアクセス

http://127.0.0.1:6006/

開発環境のセットアップ (Docker を利用しない場合)

[!NOTE] > Node.js・npm・yarnが必要です。

1. .envファイルを作成し、.env.dev.exampleを参考に適切に環境変数を設定します。

• .envファイルは、gen_dotenv.cmd(Windows 環境の場合)かgen_dotenv.sh(Linux 環境の場合)を実行することで生成できます。

• NEXT_PUBLIC_API_URLは、.env.dev.exampleに書いている情報をそのまま使ってください。

以下のようになっていれば、OK です。

.env

#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
# CLOUDFLARE_TUNNEL_TOKEN=

frontend/.env

#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

2. backend/developmentApiで以下のコマンドを実行します。

※yarn devで Web API をローカルサーバーで起動します。

• バックエンドで使用するパッケージマネージャー: yarn

※ バックエンドのローカルサーバーも起動しておかないと、画像生成の機能がうまく動作しません。

(現在はポートが 8000 で、ダミーのデータを返すようにしています。)

yarn
yarn dev

3. frontendで以下のコマンドを実行します。

• フロントエンドで使用するパッケージマネージャー: npm

npm i

→ Web App を起動する場合、frontendで以下のコマンドを実行します。

※npm run devで Web App をローカルサーバーで起動します。

npm run dev

ウェブアプリへのアクセス

http://127.0.0.1:3000/

→ Storybook のカタログを見る場合、frontendで以下のコマンドを実行します。

※npm run devで Storybook のカタログを起動します。

npm run storybook

storybook が生成したカタログへのアクセス

http://127.0.0.1:6006/

開発環境でテストを実行するためのコマンド

Note

モデルを追加した際にテストを実行して、テストが通ることを確認してください。

テストを実行する前に、以下の部分を適宜変えてください。

frontend/src/__test__/generateImg.test.tsx

//*Web APIのURLを書く
const setCorrectUrl = "http://127.0.0.1:8000";

テストの実行コマンド

# frontendディレクトリで
npm test

or

# frontendディレクトリで
npm run test:watch

開発環境でフロントエンドをビルドし、ビルド後のもので起動するコマンド

• フロントエンドのビルド

# frontendディレクトリで
npm run build

• ビルド後のものでローカルサーバーの起動

# frontendディレクトリで
npm start

Storybook

以下のように、コンポーネントのカタログを見ることができます。

開発環境のセットアップ (Docker を利用した場合)

1. .envファイルを作成し、.env.dev.exampleを参考に適切に環境変数を設定します。

• .envファイルは、gen_dotenv.cmd(Windows 環境の場合)かgen_dotenv.sh(Linux 環境の場合)を実行することで生成できます。

• NEXT_PUBLIC_API_URLは、.env.dev.exampleに書いている情報をそのまま使ってください。

以下のようになっていれば、OK です。

.env

#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
# CLOUDFLARE_TUNNEL_TOKEN=

frontend/.env

#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

2. docker compose -f dev.docker-compose.yaml up -dを実行します。

• このコマンドで、コンテナのビルドから起動までします。

• storybook のためのコンテナ・バックエンドのコンテナ・フロントエンドのコンテナの計 3 つが起動します。

Finish！

ウェブアプリへのアクセス

http://127.0.0.1:3000/

storybook が生成したカタログへのアクセス

http://127.0.0.1:6006/