環境：Visual Studio Code, GitHub Copilot
だいぶ昔ですがWPFで画像管理プログラムを作成したことがあります。アップデートも兼ねてニューラルネットワークを使った画像検索アプリをGitHub Copilot(Claude Sonnet 4.5)につくってもらうことにしました。昨今の流行りの作り方をしてみたい、というのも動機でした。
結果的に本当に指示するだけで終わって驚きました。
今回作成した（してもらった）リポジトリはこちら
作業の流れ
最初は軽い気持ちでウェブ版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のデザインや使い勝手も注文すれば直してくれます。デザインはダークモードな感じで、サムネールのサイズは小さめで、ファイルのフォルダを開くボタンを置いて、拡大された画像は画像以外の場所をクリックすることで閉じて等々・・。
仕様
中身について軽く解説していきます。
OpenAI CLIP
最初はQwenなどの新しいモデルを使ってみたかったのですが、Claudeのおすすめに従ってOpenAI CLIP（CLIP ViT-L/14, 1.59GB）を使うことにしました。
CLIP = Contrastive Language–Image Pretraining
画像と言葉の意味を“対比”で学習した事前モデル
OpenAIが2021年に発表したもの。まあまあ古いけど、いまだに現役で広く使われているらしい。Stable DiffusionもCLIPがテキストエンコーダーとして利用されている。
立ち上げ方
Pythonモジュールのインストール
pip install -r requirements.txtWebサーバーを起動し、
python app.pyブラウザでアクセスする
http://localhost:5000左下の「インデックス再構築」ボタンを押すと、更新される。
感想
自分の業界はツール構造が複雑なのでまだ部分的にしかAIが入り込んでないのですが、ウェブ業界なんかは大変なことになってそうですね。今までのように、どうセンスよくコードを書くかではなく、どうAIに仕事させるか、というフェーズに変わったんだなと感じました。
長年コードを書いてきた身としては何か寂しい気持ちにもなりますが、逆に面倒くさいことをしなくてよくなったと喜ぶべきかもしれませんね。
