チェ・ゲバラ風写真加工プログラム

ローカルに保存したファイルを選択すると、チェ・ゲバラ風の写真にリアルタイムで加工してくれるプログラムです。

2つのパラメーターは、できあがりを見ながら調整してください。

使用する写真の背景は、読み込ませる前に消去してから使うとできあがりがきれいになります。このへんも今後の宿題です。

生成AIをもちいた制作

なお、このプログラムはHTML・CSS・JSを生成AIをもちいて制作しました。

最終的に細部の修正は、わたしが手作業で修正をしています。

ちなみに、書いたプロンプトは以下のような感じです。

1回目

javascriptで、ローカルの写真ファイルを読み込んで表示するプログラムを書いてください。詳細仕様は以下によります。
・読み込むファイルは、jpg、pngの2種類のみとする。
・ファイルは、ダイアログで選択するものとする。
・ファイルの選択は、必ず1つのみとする。
・間違ったファイルが読み込まれた場合は、その旨をダイアログで示す。
・周辺のHTML・CSSも記述すること。

2回目

下のコードをベースに機能追加してください。読み込んだ画像をチェ・ゲバラ風に加工して表示してください。2階調化のしきい値は、スライダーで0～100%の間で自由に設定できるものとします。

～コード省略～

3回目

以下のコードをベースに機能追加して下さい。
・2値化の前に、カットアウトフィルタをかけてください。
・カットアウトフィルタの強度は、スライダーで自由に設定できるものとします。
・元の画像と、加工後の画像は縦に並べてください。上が加工後、下が元の画像としてください。

～コード省略～

4回目

写真をチェ・ゲバラ風に加工する方法を詳細に教えて下さい。

5回目

以下のコードをベースに、チェ・ゲバラ風の画像が出力されるように調整してください。

～コード省略～

6回目（失敗して破棄）

以下のコードを改良してください。
・エッジ部分が白くならないようにしてください。
・人物だけを抜き出して、背景を削除する機能をつけてください。

7回目

以下のコードをベースに改良してください。
・エッジ部分に白い線がでてくるので、出ないように改良してください。全体で使える色は、赤と黒のみです。

当サイトに移植するときに、HTML・CSSを調整しています。完全にうまく行っていませんが、写真変換のロジック自体は問題なく動いています。

スライダーの表示など、ユーザーインターフェースのところは今後の宿題とします。