Zenn
👋

AIイラスト専用投稿サイトをDeno.jsで自作した話

2023/04/22に公開
Deno
wasabi
aiイラスト
tech

ご挨拶

みなさん、こんにちわ。
普段、Deno.js + Oakでいろんなサービスの開発をしているミヤガワユウと申します。
最近、AIイラストの生成にハマってしまいオリジナルのマージモデルを作成したりして遊びまくってます。
いやぁ、クオリティを上げるの結構楽しいです！

作ったもの


「人工知能」から「知能」を拾って「Chinooo」というサービス名にしました。
今回は、試作したものになりますが https://chinooo.com として公開しておりますので、ご興味のある方はお試しください。

今回の構成

  • WEBサーバー
    • Nginx
  • DBサーバー
    • ConohaVPS DBサーバー
  • 画像ファイル保存
    • wasabi（※注意点あり）
  • 開発言語
    • javascript
  • 動作環境
    • Conoha VPS 4GB Ubuntu 22.04
    • Deno.js
    • Oak

AIイラストからのプロンプト情報の取得方法

AIイラストの画像ファイルにはプロンプト情報が含まれていることがあります。
このプロンプト情報を投稿ページ内でjavascriptで完璧に取得する方法で何十回も試行錯誤を繰り返してました。
実際には

//プロンプト情報の取得
var file = e.target.files[0];
var Promptreader = new FileReader();
Promptreader.onload = () =>{
var result = Promptreader.result;
var _result = result.split('tEXtparameters');
var prompts = _result[1].replace("tEXtparameters","").match(/([-\{\}\,a-z0-9A-Z\:\(\)\+( | ).]+)/g);
var Prompt = prompts[0];
var NegativePrompt = prompts[1];
var Settings = prompts[2];
}
Promptreader.readAsText(file);

で取得が可能です。
（※StableDiffusionでしか試してません。）

ストレージ問題

AI画像ファイル1枚1枚はそんなに大きくないのですが枚数が結構多くなることも考え、VPS内ではなく別個にストレージサーバーを借りたほうがいいと判断しました。
最初はConohaのオブジェクトストレージを利用しようと思ったのですが使いづらかったので安いストレージサーバーで知られている「Wasabi」を使用することにしました。
Deno.jsではS3用のライブラリがサードパーティー提供されているので少ないコードですぐにアップロードできました。

そんなWasabiは今年3月からパブリック公開（アクセスキーなし）ができない...

直面した問題が、パブリック公開ができない点でした。
他のAI画像投稿サイトさんで使われているImgixを経由させて画像を表示できるようにしようと思ったのですが、容量制限があることからDeno.js内部でオブジェクトを取得して表示させるようにしました。

//oakでやる方法
router.get("/publics/image/:postid/:filename", async (ctx) => {
    var file_type = 'png';
    if (ctx.params.filename.indexOf('.png') != -1) {
        file_type = 'png';
    }else if(ctx.params.filename.indexOf('.jpeg') != -1){
        file_type = 'jpeg';
    }
    const { body } = await bucket.getObject(`publics/image/${ctx.params.postid}/${ctx.params.filename}`,{ContentType:`image/${file_type}`});
    const data = await new Response(body).blob();
    ctx.response.headers.set("Content-Type", `image/${file_type}`);
    ctx.response.body = data;  
})

routerのところだけのコードですがこのようにすることで画像ファイルとして表示させることができます。

今後追加していきたい機能

  • ブックマーク
  • コメント（独自のやつ）現在はDisqus使用
  • ノート（ノウハウなどを書けるブログ的なやつ）
  • できればAIイラスト生成機能

AIイラスト関連で...

最近、プロンプトを英文で書くやり方を始めました。
単語プロンプトだと拾ってくれる確立などがあいまいで少しやりづらかったので描いてほしい内容をGoogle翻訳で英語に翻訳してからプロンプトにコピペするといい感じに生成してくれます。

例：「とても可愛い、Gカップサイズの胸にショートヘア姿の銀髪の18歳の笑顔の美少女が普段着で買い物をしている」

このように普段着姿で買い物をしている銀髪の少女が描かれます。
サングラスをかけさせたければ
「とても可愛い、Gカップサイズの胸にショートヘア姿の銀髪の18歳の笑顔の美少女が普段着でサングラスをかけて買い物をしている」
とすればそのように生成されます。

Discussion