TECH BLOG

この記事では、OpenHandsの応用的な使い方として下記の3つを紹介します。

1. 画像のアップロード
2. Jupyterを使ったデータ分析
3. Webブラウジング

OpenHandsとは何なのか、導入手順や基本的な使い方については、過去の記事をご覧ください。

📎

OSS版Devin「OpenHands」とは？ - TECH BLOG

この記事は、OSS版Devin「OpenHands」の特徴と機能を紹介します。

https://blog.elcamy.com

チャットでは画像のアップロードをする機能があります。

今回はアップロードした画像をもとに、HTML/CSSを使ってフロンドエンドの作成を依頼してみました。

1. チャットで指示を出す際に、併せて画像をアップロードします。
   • 入力画面

     

     

   • アップロードした画像

     

2. タスクが完了するとWorkspaceにHTMLファイルとCSSファイルが作成されます。

   

3. 下記のような見た目のサイトになっていました。

   タイトル、記事バナー、記事タイトルなどのパーツは作成されていますが、レイアウトやデザインの元の画像とは異なる結果になりました。

   

Jupyterタブではデータ分析から可視化までを行うことができます。

今回はGitHubにアップしたこちらのCSVファイルを使用します。

1. CSVファイルをアップしたリポジトリを選択します。

   

2. チャットが開始できる状態になってから、まずはデータセットを読み込みます。
   • 指示文

     Jupyterタブで作業するように明確に指示しないと、WorkspaceタブでJupyterをインストールしてしまうことがあります。

     Copy

     Jupyterタブで作業をしてください。 
     sample_data_small.csv を読み込んで先頭の5行を表示してください。

   • 実行結果画面

     

3. グラフを指定して可視化します。

   今回は「Column 0」を使用するように指定したのですが、「Column 1」を使ってしまっています。

   

• GCPサービスアカウントのロール
  • BigQueryジョブユーザー
  • BiguQueryデータ閲覧者
  • BigQueryユーザー
• 指示文
  Copy

  Jupyterタブで作業してください。 
  このservice_accountを使用してBigQueryに接続してください。
  
  [ここにservice_accountのJSONをコピペ]

• 実行結果画面

  

OpenHandsはWebブラウジングの機能も備えています。

この機能を直接使うケースは殆ど無いと思いますが、これによって必要な場合にはWeb検索から最新の情報を得たうえでタスクを実行できるようになっています。

Googleニュースから注目ニュースの要約を依頼した例

ここまで読んでいただき、ありがとうございました。

OpenHandsによるタスクは失敗したり期待通りにならないことも少なくないですが、色んなことができることに可能性を感じられました。

最後に、今回OpenHandsを試すなかでLLMモデルとしてgpt-4o miniではなくgpt-4oを選んでしまい、予想外の料金が発生してしまいました。

想定どおりのLLMモデルが使用されていることを設定画面で確認してから使用した方が安心です。

GitHub - OpenHands/OpenHands: 🙌 OpenHands: Code Less, Make More

🙌 OpenHands: Code Less, Make More. Contribute to OpenHands/OpenHands development by creating an account on GitHub.

https://github.com