地平線まで行ってくる。

記録あるいは忘備録。時には検討事項。

VS Code+ClineとGeminiで楽々コーディングをやってみる。

コーディングとLLMの相性は良いようで、道具として使えるレベルに来ているようです。ChatGPTやCopilot等々で関数作成やエラー解決にお世話になることもしばしば。VS Code+Clineで楽できそうだったのでチャレンジしました。Claudeを使いたいですけれども、無料のGemini Flash枠でどれくらいできるのかでお試しです。Qwen2.5 coder 34Bとの組み合わせでは、なかなか楽できたので、使いこなしも意識して試してみます。LLMが頑張って動いている間は、動画見てました。中断もありつつ3時間ほどで簡単なアプリケーションが完成しました。素人知見で感じたことを書いてみます。趣味のプログラムでも活躍します。

方針

  • 自分でコードは出来るだけ書かない。
  • READMEもLLMに生成させる。

結論

  • 仮想環境程度は自分で作っていた方が安心。ぼーっとしてたら、想定外のことやらかす。
  • 概要は出来るだけ詳しく書いて保存し引用する形でLLMに投入。時々、方針も書き出して活用。
  • 怪しいときは自分で調べた情報を投入。
    • 大きな更新があったライブラリは最新の情報を与える。
    • ループし始めたら、検索や別のサービス調べて別の解法を与える。

 

Colabに付属のGeminiのように最新のリファレンスをサクッと連携してくれるともっと楽になりそう。ただ、まったく経験のない分野のコーディングはちょっと怖い。解法がなさそうな方向に行っても立ち止まる判断ができないからだ。これって、普通のプロジェクトと一緒?

 

github.com

 

 

概要作成

PDFの改訂差分を閲覧するStreamlitアプリケーションを作成します。ソフトウエアの概要はあらかじめCopilotを使って会話しつつ作成しました。

 

requirements_definition.md

# PDF Diff Viewer

## 概要

このアプリケーションは、2つのPDFファイルを比較し、テキストと画像の差分を検出・表示するStreamlitアプリケーションです。

## 機能

- 2つのPDFファイルのアップロード
- テキストの差分をHTMLで表示
- 差分を画像で表示
- 差分箇所を四角で囲んでハイライト
- ハイライトの色、四角の色、線の太さのカスタマイズ
- 削除された部分の四角の色をカスタマイズ
- HTML表示の有無を選択
- 差分画像表示の有無を選択
- 各ページのHTMLと差分画像を個別にダウンロード
- すべてのページのHTMLと差分画像をzipファイルでダウンロード
- Streamlitの表示をデフォルトでWide modeにする

## 使い方

1. 2つのPDFファイルをアップロードします。
2. サイドバーでハイライトオプションを設定します。
3. 各ページの差分がHTMLと画像で表示されます。
4. 各ページのHTMLと差分画像を個別にダウンロードしたり、すべてのページのHTMLと差分画像をzipファイルでダウンロードしたりできます。

 

コーディング

「requirements_definition.mdを参考にしてアプリケーションを作成してください」から初めてコーディングを開始。一番の面倒なのは仮想環境を作成させようとすると、pipだったりpipenvだったり、標準ライブラリにあるものをインストールしようとしたり。

 

次の問題は今回利用したpymupdfは以前はfitzという名前だった。また、機能向上に伴い実装状況も変わっています。しかし、学習されたコードは以前のfitzのコードが多かったのだろうか、昔のの方法で実装を続けてエラーがループする。そこで、公式ドキュメントや別途調べてドキュメントを逐次投入。方向性を修正した。

 

改良を続けていくと、明後日の方法に行き、にっちもさっちもいかなくなるケースが出てくる。PDFの画像差分の比較の結果表示が正しく行われないのだ。そこで、gitで時々そこそこ素直な時点まで巻き戻して手順を整理して指示をする。何度か繰り返したが、そのうちにうまくいった。

 

また、時々、プログラムの説明を記述させて、全体を整理しつつ、リファクタリングも挟むとこちらの指示も出しやすくなった。

 

調子に乗ってくると、機能追加もできる。ポイントは破綻しそうだったら後戻りをする。フィードバックは丁寧にする。

 

最後に説明もClineに書いてもらって終わりです。ほぼほぼコードも書くことなく(書いたのはimport文だけです)終了です。ながらで3時間。私にしては上出来です。

 

github.com