TECH BLOG

エルカミーの技術ブログです

🤲 OpenHandsの応用的な使い方

はじめに


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

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

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

1. 画像のアップロード


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

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

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

    • アップロードした画像
      image block

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

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

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

    image block

2. Jupyterを使ったデータ分析


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

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

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

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

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

      Jupyterタブで作業をしてください。 
      sample_data_small.csv を読み込んで先頭の5行を表示してください。
    • 実行結果画面
      image block

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

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

    image block

外部のデータセットを読み込むことも可能です。

例えば、BigQueryに接続した結果は下記のとおりになります。

  • GCPサービスアカウントのロール
    • BigQueryジョブユーザー
    • BiguQueryデータ閲覧者
    • BigQueryユーザー
  • 指示文
    Jupyterタブで作業してください。 
    このservice_accountを使用してBigQueryに接続してください。
    
    [ここにservice_accountのJSONをコピペ]
  • 実行結果画面
    image block

3. Webブラウジング


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

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

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

image block

おわりに


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

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

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

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

参考