open-interpreter で Chrome の拡張機能を作る

Open-interpreter とは

open-interpreter とは LLM によるコード生成をローカルPCで実行できるようにしたオープンソースのソフトウェアです。公式のレポジトリ　は以下にあります。

コード生成がローカルでできるようになると何が嬉しいかというと、ファイルの作成からコーディングまでを一貫してLLMが行なってくれることです。

例えばこれまでのコーディング支援AIの代表格である、Github Copilot はすでに存在するファイルに対してコードの補完やエラーの修正を行なってくれますが、ディレクトリ構成やファイルの作成などはまだ人力で行う必要がありました。

また最近話題になっていた OpenAI の CodeInterpreter はクラウド上でコードの生成を実行を行うアプリケーションですが、こちらもファイルを生成したり移動したりといったローカルPCに影響のある操作を行わないため、用途としては主にデータ分析系の一回使い捨てのコードの生成に限定されていました。

しかし Open-interpreter であれば、LLMによって生成されたコードをローカルで実行することが可能なためファイルの作成からコーディングまでを一貫してLLMに任せることが可能になります。

その意味でopen-interpreterは日頃LLMの恩恵を受けている私からするとまさに痒いところに手が届くソフトウェアでした。

Open-interpreter の インストール

インストールは非常に簡単です。Python 3.10 以上がインストールされている必要がありますが、以下のコマンドで一発です。

pip install open-interpreter

インストールした後は以下のコマンドで起動できます。何も設定しなければ最初に Open AI の API キーを入力するプロンプトが出てきますが、環境変数に OPENAI_API_KEY を設定しておけば、そこに設定されているキーが自動的に読み込まれます

私の場合はまだ GPT-4 が使える状態になっていないので --fast オプションを指定して 3.5-turbo を使うように指定しています

interpreter --fast

プロンプトを受け付ける > がターミナル上に出てきたら準備完了です。

open-interpreter で Chrome の拡張機能を作る

公式のデモで open-interpreter を使ってポモドーロタイマーを作る動画がありましたので、せっかくなのでこの記事ではこれの Chrome の拡張機能版を作ってみたいと思います。

ちなみに私は chrome の拡張機能をどうやって作ればいいのか全く知りません。

さっそく open-interpreter に作り方を聞いてみましょう。

> Can you make me a simple pomodoro timer which runs on chrome extention?
                                                                                               
  Sure, I can help you create a simple Pomodoro timer as a Chrome extension. Here's the plan:  
                                                                                               
   1 Create a new Chrome extension project.                                                    
   2 Set up the basic structure of the extension.                                              
   3 Create the HTML and CSS for the timer interface.                                          
   4 Implement the timer functionality using JavaScript.                                       
   5 Test the extension in Chrome.                                                             
   6 Package the extension for distribution.                                                   
                                                                                               
  Let's start by creating a new Chrome extension project.                                      
                                                                                               

                                                                                               
  mkdir pomodoro-timer-chrome                                                                  
                                                                                               

  Would you like to run this code? (y/n)

このコードを実行していいですか？と聞かれているのではい（y）を入力します

続けてこのコードを実行していいですか？と聞かれるのでまたはい（y）を入力します

cd pomodoro-timer-chrome && touch manifest.json                                     
Would you like to run this code? (y/n)                                        

次はなんと echo コマンドで勝手にファイルに内容を書き込んでくれるようです

echo '{"manifest_version": 2, "name": "Pomodoro Timer", "version": "1.0", "description": "A simple Pomodoro timer Chrome extension"}' > pomodoro-timer-chrome/manifest.json

Would you like to run this code? (y/n)

もちろんこれもはい（y）

そんな感じでただ y を押すだけでcssやjsも作ってくれるので、気づいたら何もない状態から以下のようなツリー構造が出来上がっていました

% tree .
.
├── manifest.json
├── popup.css
├── popup.html
└── popup.js

途中ディレクトリを移動したことを忘れてファイルに書き込もうとしてパスエラーで怒られるお茶目な一面もありましたが、そういう時は いいえ（n） を選んで

> Move up by one level

のように指摘してあげると修正してくれます

また途中 echo コマンドの実行中に固まってしまったことがあったのですが、何度やっても固まるので echo コマンド以外を使ってくださいと命令したら、ご丁寧に popup.js を書き込む python スクリプトを生成して書き込んでくれました。

生成された python コードの一部

with open('./pomodoro-timer-chrome/popup.js', 'w') as file:                                                                            
      file.write('''let timerDisplay = document.getElementById("timer-display");                                                         
  let startButton = document.getElementById("start-button");                                                                             
  let resetButton = document.getElementById("reset-button"); 
...

なんというか、非常に丁寧な仕事だと言わざるを得ません(人間だったらブチギレてると思う)

全てのファイルの準備ができたので拡張機能として使うための手順を聞いてみたところ、以下のような返答が返ってきましたので、その手順通りに従います

> How do I see my app on chrome?
                                                                                                                                         
  To see your Chrome extension in action, you can follow these steps:                                                                    
   1 Open Google Chrome.                                                                                                                 
   2 Type chrome://extensions in the address bar and press Enter.                                                                        
   3 Enable the "Developer mode" toggle switch if it's not already enabled.                                                              
   4 You should see your extension listed among the installed extensions.                                                                
   5 Make sure the toggle switch next to your extension is enabled.                                                                      
   6 Open a new tab or navigate to a website.                                                                                            
   7 You should see your extension's icon in the Chrome toolbar.                                                                         
   8 Click on the extension's icon to interact with it or access its features.  

ふむふむ、拡張機能タブを開いてデベロッパーモードでディレクトリごと読みこめとな

そんなこんなであっという間にできました

pomodoro timer as chrome extention !!!

非常にかわいいタイマーですが、ちゃんと動くものができたというのは感動です

chrome-extension を作る上で必要になるファイルなど全く知らない状態でも、open-interpreter が生成したファイルとコードだけで動くものを作ることができました

生成されたコードはここに置いておきます

使ってみてわかったメリット・デメリット

今回私が試してみてわかった open-interpreter のメリット・デメリットは以下の通りです

メリット

• ファイルの生成からコードの生成までを一貫して行なってくれる
• コード生成の精度が高い

デメリット

• コードの書き込み時にフリーズすることが多い
• Open AI への課金額が跳ね上がる

open-interpreter のメリットについてはここまで記事を見ていただいた方ならわかると思いますが、デメリットについて軽く説明します

まずコードの書き込み時にフリーズする問題ですが、厄介なのはフリーズした時に open-interpreter ごと終了してしまうと、また一から目的をLLMに説明する必要があることです。

ただ open-interpreter では Ctrl+C を押してもアプリが終了せずに、直前のコード生成をキャンセルする場合もあるらしく、その場合は Do you remember what I said? と呼べば直前の命令をもう一度実行してくれます

やっていることは部下を激詰する上司と同じです

二番目の点についても少し

こちらは私の Open AI API キーの課金額ですが、アプリを作っていた土曜日に金額が跳ね上がっています

約 $2 なので日本円に直すと今のレートで 300円くらいでしょうか

これまで1日でこの量のリクエストを送ることはなかったので少々驚いていますが、他の高額なソフトや人を雇うことを考えるとはるかに安いという見方もありそうです

最後に

これまでも Copilot などのコーディング支援ツールに散々お世話になってきた私ですが、今回の open-interpreter はそれ以上にお世話になるかもしれません

とくにゼロからアプリを作るときに一番のボトルネックとなるファイルを作るという操作を自動化できるのはありがたすぎます

興味のある方はぜひ一度試してみてください