ai_museum誕生の記録
ai_museum誕生の記録
ゲーミングPC(Windows)のWSLで動かしてるんだけど、ホストOSにDropboxを入れて生成された画像がDropboxに入るようにしましたnishio.icon
プロンプトもDropboxにおいたファイルから読むようにしてある
シードをインクリメントするタイミングで自動でリロードするので適当にプロンプトを書いて放置しておくと絵が生えてくる農業みたいなスタイル
生えてきたものをタイル表示にして選抜しやすくするアプリを書くかどうか迷ってる
正確に言うとPythonで書くかNodeで書くかを迷ってる
1:00
AIが生成した画像の一覧を表示したいnishio.icon
Next.jsでやることにした
TypeScriptでサーバサイドのコードを書くのとPythonでクライアントサイドのコードを書く(ことはできないのでJSと併用する)のでは前者の方がノウハウが今後有益そうと判断した
Nodeからファイルシステムを見る方法を調べてる
fs.readdirSync
ファイル一覧がとれた
画像を静的サーブする方法を調べる
ローカル専用だからpublicの中でDropboxにシンボリックリンクするか
できた
ではAPIを叩いた結果で画像一覧を…
あっ、fetchは非同期だからPromiseになるのか
useEffectで叩いて更新するか
3:00
続き
1フォルダー内の画像一覧は出るようになった
なぜか縦にならぶ…
flex-direction: columnのせいだった
みっちり並べるのはどうするんだったかなー
flex-wrapか
クリックして拡大縮小できるようになった
次は「フォルダの中にフォルダがある」時の展開表示
APIにパラメータを渡すのは…
code:ts
fetch("/api/get_images", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ folder }),
})
ってしたらreq.body.folderに入るのか便利
あーこれ、非同期にAPIを叩くのを繰り返さないといけないのか、どうしようかな
Promise.allで解決
23:00
nishio.iconクリックした画像がモーダルダイアログで拡大表示されるようにした
ここにプロンプトの情報などを表示したい
データの保存の仕方を何度か変えているのでどうするか…
fs.existsがあるな、これで判定するか
deprecated
fs.existsSync(path)がある
できた
レビューした画像を移動させる機能をつける
fs.rename
クライアントサイドでonClickに書いて動かなかった、そりゃそうだ
APIをつければいいのね
できた
こんな感じでサブフォルダ内の画像がタイル表示されて
https://scrapbox.io/files/633e55151b49e40022b16ccc.png
クリックするとモーダルで詳しい情報が表示され、ここで「excellent!」を押すと良い画像を集めたフォルダにファイルを移動する
https://scrapbox.io/files/633e551c36081a00237100f0.png
テストユーザ(妻)が寝てしまったので続きはまた明日
雑談
Today I learnednishio.icon
ローカルで動かして画像の選別を助けるツールを、ファイル処理とか慣れてるPythonで書いてUIをHTML+JSで頑張るか、TypeScriptでNext.jsをするか迷ったが、結論Next.jsは超便利だった
UI部分はReactのJSXで手軽に作れる
API部分もAPIフォルダにあるサンプルファイルをコピーして増やすだけ
ルーティングとか書かなくても動く
ファイル操作系、PythonにあるやつはだいたいNodeにもある、Syncって名前になってる