ChatGPTのCanvasを試す
kun432ChatGPTのCanvas機能がリリースされてるけども、ただまだその使い方がよくわかってないので、公式の記事などを見ながら試してみる。
kun432公式のXのポスト
私たちは、チャットの枠を超えたライティングやコーディングのプロジェクトでChatGPTと連携する新しい方法であるCanvasの初期バージョンを展開しています。
本日より、PlusおよびTeamユーザーは、モデルピッカーで「GPT-4o with canvas」を選択することで、お試しいただけます。
Canvasは別のウィンドウで開き、あなたとChatGPTが並行してアイデアに取り組むことができます。
Canvasでは、ChatGPTが編集を提案したり、文字数を調整したり、読みやすさを変更したり、インラインフィードバックを提供したりすることができます。また、キャンバスに直接書き込んだり編集したりすることもできます。
コードを記述する際、Canvasを使用すると、ChatGPTによる変更を追跡し、理解しやすくなります。
また、コードのレビュー、ログやコメントの追加、バグの修正、JavaScriptやPythonなどの他のコーディング言語への移植も可能です。
Canvasを使用している場合、「変更を表示」アイコンを選択すると、自分の文章やコードで変更された箇所を確認できるようになりました。
お楽しみください！
kun432公式の記事
kun432公式の記事を見ながら試してみるが、Canvasで扱う内容が
- ライティング
- コーディング
のどちらかによって、少し挙動が変わるようなので、それぞれ別々に試してみる。
ライティングの場合
まずChatGPTで新しいチャットを開いて、モデルから"ChatGPT 4o with canvas"を選択する。
とりあえずシンプルにこんなテーマでブログ記事を書いてもらうことにする。
競馬初心者に、競馬の楽しみ方を伝えるブログ記事を書いて。
ユーザの入力に対して、Canvasが役に立ちそうか？をChatGPTは判断して、役に立ちそうであれば以下のようにCanvasがトリガーされ・・・
これまでのチャットが左に、Canvas部分が右に拡大されるような感じで、画面レイアウトが変更される
まずは、これまでと同様に追加でチャットで変更を投げてみる。
タイトルをもっとキャッチーに変更して欲しい。
右の画面が上から変更されていって・・・
最終的にタイトルが更新される。他の箇所をざっと見てみた感じ、タイトル以外は変更されていなさそう。
変更前のバージョンに戻すには右上のアイコンをクリックする。
以前のバージョンが表示されるので、ここで確定する
変更前の内容に戻っている。
kun432上記のように、チャットでも生成内容を更新することはできるが、Canvasにはショートカットが用意されている。右下のアイコン。
各アイコンはそれぞれ以下の用途となっている。
絵文字の追加
絵文字追加アイコンをクリック
アイコンが矢印になるので再度クリック。
絵文字が追加された。
チャットのコメントも追加される。
編集の提案
編集提案アイコンをクリック。上と同じように矢印アイコンに変わるので再度クリックする。
Wordなどのコメントと同じような形で、編集すべき点についてコメントしてくれる。
編集すべき箇所の提案を反映する。
該当箇所の文章が修正されている。
提案コメント及び反映についてもチャットのコメントに記載されている
読解レベル
読解レベルアイコンをクリック。
スライダーが表示される。
上下にずらすことで、「幼稚園児」「中学生」「高校生」「大学生」「大学院生」という感じで設定ができる。
「幼稚園児」にしてみるとこんな感じで書き換えられた。
チャットのコメントでもそのように記載されている。
長さの調整
長さ調整アイコンをクリック
これもスライダーになる。
上下で全体の長さが変わる。
最短にしてみるとこんな感じになった。
チャットのコメントでは元から75％にしたみたい。
最終仕上げの追加
最終仕上げの追加アイコンをクリック。一度クリックすると矢印アイコンになるので再度クリック。
こんな感じで修正された。
チャットのコメントを見る限り、フォーマット、全体の流れ、文法、などを修正している様子。
kun432出力された文章を直接修正することもできる。
該当の段落をホバーすると、右に「＋」アイコンが表示されるのでクリック。
編集したい内容の説明などを入力する。
以下のように変更された。
段落ではなく、文などの箇所を選択して修正することもできる。文を選択すると以下のように表示されるので、「ChatGPTに質問する」をクリック。
編集したい内容などを入力
内容が修正された。
kun432コーディングの場合
とりあえずシンプルな例で、指定された数値以下のフィボナッチ数列を計算する関数を書いてもらった。
で、右下のメニューが、ライティングの場合と異なっている。
順番にやってみる。
コメントの追加
コメント追加アイコンをクリック。
各業にコメントが追加された
ログの追加
ログ追加アイコンをクリック
printデバッグ文がいくつか追加された
バグの修正
バグ修正アイコンをクリック
今回のコードにバグはないと思うのだけど、try〜except文が追加された。
コードレビュー
コードレビューアイコンをクリック
いくつかコメントが追加された。コメントをクリックしてみる。
デバッグ用のprint文を消して本番環境だとログを取るようにしたほうがいいという提案。適用してみる。
該当箇所以外も含めて修正された。まあロギングを追加するとそれはそうという感じ。
言語に移植
他の言語に書き換えてもらう。言語移植アイコンをクリック。
言語を選択。今回はTypeScriptにしてみる。
すべて書き変わっている。
差分表示
コーディングならではの機能として差分を表示することができる。一旦チャット履歴をさかのぼって、最初のPythonコードを表示する。
元のPythonコード、ただし、いろいろ修正指示を出した状態のものが表示される。
右上の時計マークのアイコンをクリックする。
以下のようにdiffっぽい表示になる。ただしこの状態では編集はできないようなので、履歴を前に戻すなり、diff表示を解除して編集するなり、という感じっぽい。
その他
ライティングのときの段落みたいな指定はできないが、コードを部分選択して、直接編集内容等を指示できるのはライティングと同じ。
指示通りに修正されている。
kun432まとめ
とりあえずできることは一通りやってみて、使い方が概ねわかったように思う。試してみた限りでは結構差分的に更新されるように思えるので、かなりコントロールしやすくなっているように思える。
公式ドキュメントではCanvasを使った・使っていない場合の評価やトレーニングなどについても書かれている。
日本語ならば、npaka先生の記事が参考になる。