見出し画像

いまさら聞けないDrawThingsのPresetsで生成AI ※ 購入特典あり（第4回 JavascriptAPI編）

ovOoOiod
割引あり

何するの？

Javascript入門編ではScriptの使い方とJavascript APIをみました。

今回は少し具体的にAPIを使用して画像生成してみましょう。

  • プロンプト生成を半自動化して複数ポーズの画像生成を一括処理する。

  • 連番画像を読み込んで、画像生成を一括処理する。

について生成画像サンプルとともに解説したいと思います。
画像のプロポーションは

APIを使用するとどうなるの？

DrawThingsをJavascriptから設定・制御できますので、制作中に効率的な利用が可能です。（自分好みに便利にカスタムする感じです。）
いきなりではよくわからないので、どのように動くのか少しみてから本題に入りましょう。

まず動かしてみる

下記のスクリプトをコピー＆ペーストしてDrawThingsで実行しましょう。
ここでできることは、プロンプト・ネガティブプロンプト（呪文）の反映です。
どのように動くのかをサンプルスクリプトとともに見てゆきましょう。

// 動かしてみた.js
// Drawthings　を使ってJavascriptで生成AI その１
// 設定を変数に代入
const config = pipeline.configuration
// プロンプト(反映させたい呪文)
let prompt = `Photo of Cute a girl with frilled dress　standing, white dress, long hair`;
// ネガティブプロンプト（反映したくない呪文）
let negative_prompt = `3d, sepia, painting, cartoons, sketch, (worst   quality:2), (low quality:2), (normal quality:2), lowres, bad anatomy,   bad hands, normal quality, ((monochrome)), (( grayscale)), collapsed   eyeshadow, multiple eyebrows, holes on breasts, paintings, sketches,   (worst quality:2), (low quality:2), (normal quality:2), skin spots,   acnes, skin blemishes, age spot, glans, nsfw, EasyNegativeV2,  ng_deepnegative_v1_75t`;

// プロンプトの実行
pipeline.run({prompt: prompt, negativePrompt: negative_prompt, 
              configuration: config});

コピペ後、DrawThingsのスクリプトに任意の名称で登録 ⇨ 実行します。
※ ここでは動かしてみた.jsという名称にします。（登録方法は、第3回 Javascript入門編で確認しましょう。）
下の画像は実行してできた画像です。

動かしてみた.jsで生成された画像（フリル付きのドレスを着た長い髪の女性）

もう少し動かしてみる

先ほどのサンプルはプロンプト周りが変更し、実行するだけのものだったので、以下のものを追記します。

  • ピクチャーディレクトリ以下に画像を保存する
    (※ 準備としてピクチャーディレクトリ(~/Pictures/)内にDrawthingsディレクトリを追加しておきます)
    (※ DrawThingsが利用するディレクトリはピクチャディレクトリ限定です。)
    サンプルでは、画像が~/Pictures/Drawthings/sample_001.png
    として保存されます。

  • 画像サイズを指定

  • Steps（ノイズ除去するステップ）を指定

を追記してみます。
追記したコードは以下の通りです。

// もう少し動かしてみた.js
// Drawthings　を使ってJavascriptで生成AI その１
canvas.clear();
// 設定を変数に代入
const config = pipeline.configuration;

// プロンプト(反映させたい呪文)
let prompt = `Photo of Cute a girl sitting with frilled dress, white dress, long hair, ((portrait))`;
// ネガティブプロンプト（反映したくない呪文）
let negative_prompt = `3d, sepia, painting, cartoons, sketch, (worst   quality:2), (low quality:2), (normal quality:2), lowres, bad anatomy,   bad hands, normal quality, ((monochrome)), (( grayscale)), collapsed   eyeshadow, multiple eyebrows, holes on breasts, paintings, sketches,   (worst quality:2), (low quality:2), (normal quality:2), skin spots,   acnes, skin blemishes, age spot, glans, nsfw, EasyNegativeV2,  ng_deepnegative_v1_75t`;

// 高解像度化 OFF(画像比率に応じて変更してください。)
config.hiresFix = false;

// 画像サイズの指定（幅・高さ）
const width = 1280, height = 1280
config.width = width;
config.height = height;

// ノイズ除去（数字が大きいほど精細にノイズ除去が行われます。）
config.steps = 36;

// プロンプトの実行
pipeline.run({prompt: prompt, negativePrompt: negative_prompt, 
              configuration: config});

// 生成画像の保存(画像拡張子はpng形式)
// filesystem.pictures.path -> ユーザのピクチャディレクトリを取得
let file = `${filesystem.pictures.path}/Drawthings/sample_001.png`;
canvas.saveImage(file);

先ほどの動かしてみた.js内を上記に変更し実行してみましょう。
実行後、ピクチャディレクトリ > DrawThings内に
sample_001.png
というファイルが出来上がっていれば成功です。
ファイルの情報も見てみましょう。

動かしてみた.jsで書き出した画像

ここまでできたら、以下のサンプラー指定やレイヤーの操作なども追記してみてください。

サンプラーも指定してみる

// DPM++ 2M Karras
config.sampler = 0;

サンプラーは数字で指定します。（数値は2023年12月13日現在のものです、利用できるサンプラーが増えたようです。今後変更の可能性があります。）

サンプラーに指定する数値は以下の通りです。

  • DPM++ 2M Karras ⇨ 0

  • Euler Ancestral ⇨ 1

  • DDIM ⇨ 2

  • PLMS ⇨ 3

  • DPM++ SDE Karras ⇨ 4

  • UniPC ⇨ 5

  • LCM ⇨ 6

  • Euler A Substep ⇨ 7

  • DPM++ SDE Substep ⇨ 8

DrawThingsのレイヤーを操作する

レイヤーを操作する
// ファイルを読込
// 画像からポーズデータ(骨格座標)が生成されます。
canvas.loadPoseFromSrc(file)

// JSONデータから骨格座標の読込
canvas.loadPoseFromJson(JSON String)
/*
...
他のレイヤーの場合、
canvas.load[Layer Name]FromFiles(file)
[Layer Name]をレイヤー名に置き換えてください。
以下の通りです。

// マスク（マスク化した画像が別途必要です。）
canvas.loadMaskFromFiles(file)
...など
*/

/* ソースファイルとして読込む場合、
// マスク（マスク化した画像が別途必要です。）
canvas.loadMaskFromSrc(file)
...など
*/

/*
Photoアプリケーションから読み出す場合、

// マスク（マスク化した画像が別途必要です。）
canvas.loadMaskFromPhotos(file)
...など
*/

どのように動くのかを体験できたと思います。（APIの一部ですが・・・）
※ そのほかの設定もAPI仕様に沿って指定することでDrawthingsを快適に動かしながら画像生成可能です。

APIを指定することで値の変更ができます。
変更していないものは、Drawthingsの設定が反映されます。

それでは、本題のプロンプト生成（呪文）を半自動化のスクリプトをみてゆきましょう。

プロンプト生成（呪文）を半自動化して複数ポーズの画像生成を一括処理する。

準備 ①

  • ポーズの呪文（いくつかピックアップ）

  • 生成画像の保存ディレクトリ
    ~/Pictures/Drawthings/

  • 画像サイズ(768 / 1024px)　※ 好きなサイズに変更してください。

  • sampler: DPM++ 2M Karras ※ 好きなサンプラーに変更してください。

コード

canvas.clear()
// 設定を変数に代入
const config = pipeline.configuration
// 
let negative_prompt = `3d, sepia, painting, cartoons, sketch, (worst quality:2), (low quality:2), (normal quality:2), lowres, bad anatomy,   bad hands, normal quality, ((monochrome)), (( grayscale)), collapsed   eyeshadow, multiple eyebrows, holes on breasts, paintings, sketches,   (worst quality:2), (low quality:2), (normal quality:2), skin spots,   acnes, skin blemishes, age spot, glans, nsfw, EasyNegativeV2,  ng_deepnegative_v1_75t`;

config.width = 768;
config.height = 1024;
config.sampler = 0;

// 複数ポーズの指定
let pose = [`walking`, `squatting`];

for(let i=0;i<pose.length;i++){
    let prompt = `Photo of cute a 1girl ${pose[i]} with frilled dress, white dress, long hair, ((portrait))`;
    pipeline.run({prompt: prompt, negativePrompt: negative_prompt, 
              configuration: config});
    let file = `${filesystem.pictures.path}/DrawThings/sample_pose_${i}.png`;
    canvas.saveImage(file);
}

上記コードをスクリプトにコピー＆ペーストして、実行しましょう。

実行結果①
実行結果②

複数画像を読み込んでポーズレイヤー（棒人間・骨格座標）を一括取得してみる

準備 ②

  • 読込用連番画像の用意
    (例：image_001.jpg, image_002.jpg … image_099.jpgに名称変更済にする)
    ピクチャ > Drawthings内に読込画像（load_image_0.jpeg〜load_image_2.jpeg）を用意。

コード

// 設定を変数に代入
const config = pipeline.configuration;

// 始まりから終わりの指定
const start = 0, end = 2;
for(let i=start;i<=end;i++){
    canvas.clear();
    // 画像読み込み後、ポーズデータに変換
    let load_file = `${filesystem.pictures.path}/Drawthings/load_image_${i}.jpeg`;
    canvas.loadPoseFromSrc(`file://${load_file}`);
    canvas.clear();
}
load_image_2.jpeg
// load_image_2.jpegのポーズデータ
{"width":1024,"height":1536,"people":[{"pose_keypoints_2d":[580.93597412109375,304.01513671875,1,662.56854248046875,439.38880920410156,1,502.27609252929688,452.69100952148438,1,572.4488525390625,699.96917724609375,1,627.56121826171875,957.78707885742188,1,822.86102294921875,426.08660888671875,1,763.62603759765625,679.90869140625,1,689.03228759765625,840.39093017578125,1,615.62725830078125,799.91436767578125,1,527.12200927734375,902.36837768554688,1,99.609550476074219,1183.3009643554688,1,784.503173828125,804.09017944335938,1,661.04559326171875,856.55044555664062,1,864.1015625,1254.3173217773438,1,533.681396484375,286.81210327148438,1,596.91619873046875,246.90142822265625,1,498.42086791992188,306.24417114257812,1,660.6895751953125,237.20333862304688,1]}]}
load_image_2.jpegから生成
load_image_1.jpeg
// load_image_1.jpegのポーズデータ
{"height":1536,"people":[{"pose_keypoints_2d":[418.50955200195312,554.53839111328125,1,471.270263671875,693.61468505859375,1,363.46255493164062,681.51846313476562,1,185.32279968261719,712.83682250976562,1,71.027175903320312,696.54071044921875,1,579.07794189453125,705.71090698242188,1,808.694580078125,835.24676513671875,1,-1,-1,0,476.47091674804688,1047.1078491210938,1,394.06649780273438,1319.7672729492188,1,307.90829467773438,1511.5204467773438,1,623.54638671875,1039.8495483398438,1,712.40496826171875,1391.0224914550781,1,-1,-1,0,390.84976196289062,520.92535400390625,1,463.86215209960938,525.41363525390625,1,355.494873046875,535.34381103515625,1,519.88671875,554.8590087890625,1]}],"width":1024}
load_image_1.jpegから生成
load_image_0.jpeg
// load_image_0.jpegの骨格座標
{"height":1536,"people":[{"pose_keypoints_2d":[406.81881713867188,277.61141967773438,1,421.768798828125,560.00724792480469,1,152.32626342773438,598.18927001953125,1,117.15186309814453,946.69290161132812,1,131.22964477539062,1258.3507690429688,1,691.21136474609375,521.82522583007812,1,841.59759521484375,848.01800537109375,1,-1,-1,0,303.13885498046875,1223.1573486328125,1,-1,-1,0,-1,-1,0,594.920166015625,1236.4421081542969,1,-1,-1,0,-1,-1,0,345.04806518554688,220.15283203125,1,454.64096069335938,210.39404296875,1,276.68899536132812,245.72021484375,1,518.2957763671875,224.52886962890625,1]}],"width":1024}
load_image_0.jpegから生成

コードを実行すると画像からポーズ（骨格座標）が作成されます。
また、ポーズ（骨格座標）はコピーができるのでテキストエディタなどに保存可能です。
（※ 現在ポーズ（骨格座標）を書き出すことはできません。）
これで、ポーズデータ（骨格座標）から生成することも可能になりました。
骨格座標はOpenPose形式で保存されます。

有料記事の紹介

有料記事の購入特典は、ユーティリティスクリプト（Draw ThingsのPresetsスクリプト）のダウンロードです。
スクリプトの利用手順を有料記事内に記載しています。
記事購入後、ライセンスをお読みの上ご自由にお使いください。

開発経緯

生成AIで研究・制作している（遊びも半分）と、プロンプトが複雑になって大変だったり、思い通りのポーズにならないなど思い通りにならなかったので、「とにかくラクに画像生成したい！（生成AIライフ応援ツール）」というところから、スクリプト開発はじめました。
（外部モジュール化できるととても便利なんですが💦今のところは対応してないようなので、、、）

また、開発したJavascriptをChatGPT師匠にプログラム評価をお願いしてみたので、その記事も書いてみたいと思います。

※ 生成AIライフの応援ツール
※ スクリプト概要は、Drawthings設定の簡略化とプロンプト（呪文）の単純化がメインです。
※ 設定の一元簡略化・プロンプト登録・変更を減らし、一枚ずつ調整する手間を省けます。

スクリプトはDraw Things(Mac OS版)専用です。

※ iPhone OS版は動作保証対象外にしています。(2023.12.25)
※ 使用言語: Javascript (Draw Things Javascript API)

記事購入方法(単体記事購入/有料マガジン)

記事の購入方法は、単体記事購入と有料マガジンがあります。
単体記事購入では記事の拡散をお手伝いしていただくことで割引価格で購入可能です。
また、私の記事を定期的に読んでくださる方は、よりお得に購読できる有料マガジンでのご購入をおすすめします。

有料マガジン「いまさら聞けない生成AI、はじめ〼」

皆様の購入お待ちしてます。
ご協力よろしくお願いします☺️

- 魔法少女⭐️熟（oOevaOo）

楽しいAIライフを過ごしてね❤️

今回も読んでいただきありがとうございました。
Javascript APIを活用して画像生成の幅をひろげてみてくださいね⭐️

有料記事購入特典： Draw Things ユーティリティ(スクリプト)

ライセンスについて（コード記載あり）

/*
 *  MIT License
 *  
 *  [ DrawThings Compact ]
 *  
 *  Copyright (c) 2023 oO_eva_Oo
 *  
 *  本ソースコードは、著作権者によって提供されています。
 *  著作権者の許可なしに、ソースコードまたはその一部を使用、複製、変更、マージ、
 *  発行、配布、サブライセンス、および/または販売することは、著作権法に違反する可能性があります。
 *  
 *  また、明示的または黙示的ないかなる種類の保証もなく提供されています。
 *  ただし、商品性、特定の目的への適合性、および非侵害に関する黙示的な保証も含まれます。
 *  一切の責任を負わずに使用するか、またはその他の取引を行う場合でも、
 *  著作権者または著作権者の代理人はいかなる情報源においても責任を負わないものとします。
 *
 *  寄贈者・購入者向け許諾:
 *  このソースコードは、寄贈者・購入者に対しては個人利用に関して自由に使用することを許可します。
 *  商業利用や再配布などについては、著作権者に連絡してください。
 *
 *  開発支援のお願い:
 *  このソースコードは無料で提供されていますが、開発やサポートへの感謝として
 *  開発支援として有料記事の購入をお願いしています。開発者がより良いソフトウェアを提供できるよう、
 *  皆様のご協力をお待ちしております。詳細については、以下のリンクを参照してください。
 *  [有料記事購入リンク]: https://note.com/oo_eva_oo/n/n980dcd68fa5d
 *  有料マガジンは、個別購入よりもお得です↓
 *  [有料マガジン購入リンク]: https://note.com/oo_eva_oo/m/me6665220ac66
 *  
 *  [開発支援リンク]
 *  SNS:
 *  開発者の最新情報やプロジェクトのアップデートを得るには、以下のSNSアカウントをフォローしてください。
 *  Twitter: [https://twitter.com/poq_eva]
 *  Note: [https://note.com/oo_eva_oo]
 *  その他のProfile(Lit.link): [https://lit.link/oOevaOo]
 */

ユーティリティスクリプト

利用方法

  1. コードをダウンロード

  2. Presets（DrawThings）に任意の名称でスクリプト登録。

  3. 初期設定を行い、Presetsの実行。

  4. 必要に応じてスクリプトへ設定・プロンプトの編集/追記。

ユーティリティ スクリプトのダウンロードはこちらから

ここから先は

10,439字 / 3画像 / 1ファイル
この記事のみ ¥ 500〜

ログイン

この記事が参加している募集

#AIとやってみた

27,502件

この記事が気に入ったらサポートをしてみませんか？