ocomojiのナレッジ

ChatGPT Advanced Data Analysisで、ocomojiのロゴ画像を動かしてみた

logo_demo.gif

自己紹介

はじめまして、ocomojiのエンジニア、たくあんです
最近話題のChatGPTのプラグイン、Code Interpreterを利用してみたので、記事にしてみたいと思います。
※2023年9月12日追記:Code Interpreterは、2023年8月31日にAdvanced Data Analysisに改名されたため、記事内の呼称も修正しています。

やりたかったこと

Advanced Data Analysisを使って、ChatGPTへの自然言語の指示でocomojiのロゴ画像を動きのあるgif画像へ変換する。

Advanced Data Analysisとは?

ChatGPTのプラグインの一つ(2023年8月現在はChatGPT Plusユーザーのみ、ベータ版として提供中)で、 ChatGPT上でPythonのコードを実行できる仕組みです。
大きな特徴として、アップロードしたCSVや画像ファイル、PDFファイルのデータを解釈し利用することが可能です。

事前準備

ChatGPT Plusユーザーアカウント(月額20ドル)が必要となります。

開発目次

  1. Advanced Data Analysisプラグインのインストール
  2. 利用したいファイルを読み込ませる
  3. 自然言語で画像への変更を依頼(1)~まずやってみる~
  4. 自然言語で画像への変更を依頼(2)~回転部分を指定~
  5. 自然言語で画像への変更を依頼(3)~画像へのいろいろな変更を指示~
  6. 自然言語で画像への変更を依頼(4)~リテイクの嵐~
  7. 利用してみての感想など



1.Advanced Data Analysisプラグインのインストール

まずはプラグインをインストールします。
ChatGPTのブラウザ画面を開き、左下のアカウント名をクリックするとメニュータブが開きます。

menu_tab.jpg

ここでSettings & Betaタブを開き、Beta featuresタブ内のPluginsとAdvanced Data Analysisを有効にします。

settings.jpg

New chatを開く際に、Advanced Data Analysisにチェックをいれたら利用準備完了です。

New_chat.jpg



2.利用したいファイルを読み込ませる

いつものChatGPTに質問を投げるフォーム欄に、ファイルをアップロードする為のボタンが追加されています。

upload_form.jpg

今回は、このWebサイトでも使われている弊社のロゴ画像を読み込ませてみることにしました。

ocomoji.png




3.自然言語で画像への変更を依頼(1)~まずやってみる~

ここからは、プロンプトを指定して画像への変更を実装してもらいます。まずやりたいことを伝えてみました。

prompt1.jpg

するとこちらの依頼要件について掘り下げるような質問を返してきました。

ans1.jpg

PythonでChatGPT_APIを利用した、AutoGPTというフレームワークがありますが、そのブラウザ版といった感じですね。
次に行う動作についてこちらの許可や意見を抽出しながら対話形式で開発を進めていくようです。
尚、Show workの部分を開くと、


  from PIL import Image
  import matplotlib.pyplot as plt

  # 画像を読み込む
  image_path = "/mnt/data/logo.png"
  image = Image.open(image_path)

  # 画像を表示
  plt.imshow(image)
  plt.axis('off')
  plt.show()
							

という内容のPythonコードが表示されます。基本的に全てPythonで実装してくれるようです。
なかなか頼もしい回答が返ってきたため、これはすぐに完成させてくれそうかな、と思い、 まずはデフォルト設定でお願いすることにしました。すると、、、

ans2.jpg

なにやら我々には見えない場所に円の概念を見出してくれているようです。出来上がったファイルを確認してみます。

rotating_logo.gif

うん。失敗。とはいえ、gifファイルをサクッと作ってくれるところはすごいです。


4.自然言語で画像への変更を依頼(2)~回転部分を指定~

ここからは対話しながら要件を詰めていきます。

prompt2.jpg


とのことなので、まずは回したい部分の画像を切り出して与えてみました。

ans3.jpg


解像度が異なるため一致部分が測れないとのこと。なるほど、PILあるあるです。
座標を与える方法で試してみました。

ans4.jpg


今度は上手く伝わったようです。gifを確認してみます。

rotating_circle_logo.gif

いい感じに回転してくれてます。

5.自然言語で画像への変更を依頼(3)~画像へのいろいろな変更を指示~

せっかくなので、いろいろな画像への変更を指示してみました。以下、指示プロンプトとその結果出来たgifを紹介します。

指示:ゆっくり回転し始めて、次第に高速回転し、いずれまたゆっくりに戻るという仕様に変更できますか。

rotating_circle_logo_variable_speed.gif


指示:もう少しアニメーションを滑らかにお願いします。

rotating_circle_logo_smooth.gif


指示:円形部分を回転に加えて、2秒ごとに色を反転させて表示できますか。

rotating_circle_logo_fixed_color_inversion.gif


円形部分のみ回転させていたはずですが、何故か背景の正方形も反転しています。
というか、ここで大事なことを見落としていたことに気づきました。
元画像はPNG形式で背景が透過になっているのですが、その部分が黒になってしまっています。

6.自然言語で画像への変更を依頼(4)~リテイクの嵐~

ChatGPTのことを、
「どれだけリテイクを出しても嫌な顔をせずにすぐ修正してくれる部下」
という例えを時々見かけますが、この後のやり取りで自分もしみじみそう思いました。
何にハマっているかは何となくわかるので、もっと具体的な指示を出せば解決は早かったのかもしれませんが、 今回は部下の成長を阻害しないよう、心を鬼にしてただただ修正依頼を投げ続けてみました(笑)。

retake1.jpg rotating_circle_logo_white_bg.gif


うーむ。

retake2.jpg rotating_circle_logo_white_bg_rotation_only.gif


うーむ。。。

retake3.jpg rotating_circle_logo_fixed_white_bg_rotation_only.gif


回転部分はどうやら良くなったようだが、今度は文字部分が。

retake4.jpg rotating_circle_logo_final_fixed_white_bg.gif


一つ前に戻った T_T
冒頭から数えるとリテイク11回目。
何も言ってないのに「最終修正版」を名乗ってくる辺りに、「嫌な顔をしない部下」のささやかな抵抗を感じます(笑)

retake5.jpg rotating_circle_logo_final.gif


これはこれで面白いかも。。。

retake6.jpg rotating_circle_logo_improved_final.gif


過去最悪の出来。。。

retake7.jpg rotating_circle_logo_re_improved_final.gif


頑張れ!!

retake8.jpg logo_final.gif


ついに完成!!リテイク15回目。お疲れ様でした。

7.利用してみての感想など

自然言語から精度高くPythonプログラムを実装してくれます。上手く使えばエンジニアの生産性を高めてくれること間違いないです。 もともとPythonで何が出来るかのイメージが湧く方はとくに面白く使えると思います。
今回は実験も兼ねてだらだらと指示を出しましたが 、プロンプトをきっちり入れればよりタイトにやりたいことを実装してくれると思います。
画像以外にcsvやpdfも読み込ませて見ましたが、こちらもかなりいい感じに処理してくれます。また面白いネタがあればこちらで記事にしたいと思います。

読んでいただきありがとうございました。弊社のサイトも是非ご覧になってください。