GitHub Copilotでローカル画像検索アプリをつくる

環境：Visual Studio Code, GitHub Copilot

だいぶ昔ですがWPFで画像管理アプリを作成したことがあります。同じようなアプリを生成AIを使って作成してみたくなりました。同じものを作っても仕方がないので、時代に合わせてニューラルネットワークを使った画像検索アプリをGitHub Copilot(Claude Sonnet 4.5)につくってもらうことにしました。

昨今の流行りの作り方をしてみたい、というのも動機でしたが、結果的に本当に指示するだけで終わって驚きました。

画像フォルダにはかつて資料目的で集めた自分の好きな油彩画家の絵がたくさん入っている。

作業の流れ
仕様
1. OpenAI CLIP
2. 立ち上げ方
感想

作業の流れ

最初は軽い気持ちでウェブ版Claudeに作れるかどうか聞いてみたところから始まりました。まずは大まかに作りたいものを説明。画像の入ったフォルダがあり、ウェブページUIで画像検索したい、という感じ。すると・・

project/
│
├── images/                          # 既存の画像フォルダ
│   ├── image1.jpg
│   ├── image2.png
│   └── ...
│
├── vector_db/                       # ベクトルデータベース（自動生成）
│   └── index.faiss
│
├── metadata/                        # メタデータ保存用（自動生成）
│   └── image_paths.json
│
├── static/                          # 静的ファイル
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── search.js
│
├── templates/                       # HTMLテンプレート
│   └── index.html
│
├── scripts/
│   ├── build_index.py              # インデックス構築
│   └── search_engine.py            # 検索エンジンのコアロジック
│
├── app.py                          # Flaskサーバー
├── requirements.txt
└── README.md

こんな構成で作れますよ、と図を返してくれた。ファイル数も8つほどと、それほど多くもなかったので、それぞれのコードを作成してもらいました。怒涛の勢いでコードを書いてくれたので、ここでVisual Studio Codeを立ち上げて、GitHub CopilotのClaudeにバトンタッチして続きを書いてもらうことにしました。

こちらがいろいろ修正しなきゃいけないのかなと思ってたら、目の前でどんどんコードが書き変わっていっていきます。見ているだけ。一通り終わると、実行してみてください、と言われるので、ビルドして、様子を伺う。エラーが出たらエラー文を貼り付ければClaudeが原因を見つけてまたコードを書き変え、再度実行を促される。これを繰り返しているうちに、まともに動くものが出来上がりました。

知らないうちにすごい時代になっていたー・・・。

CSSやHTMLを手修正することもできるけど、ここまで来ると、もう全部お願いしてしまうことに。UIのデザインや使い勝手も注文すれば直してくれます。デザインはダークモードな感じで、サムネールのサイズは小さめで、ファイルのフォルダを開くボタンを置いて、拡大された画像は画像以外の場所をクリックすることで閉じて等々・・。