はじめに

NRIデジタル DXエンジニアリング2の林健太郎です！
今回は、「イノベ活動」という、新しい技術・知見を獲得し、新たなビジネス創出につなげることを目的とした社内活動での取り組みを紹介します。

「イノベ活動」についての詳しい説明はこちら！

今回取り組んだテーマ

2022年の冬にChatGPTが公開されて以降、そのコーディングとの相性の良さから、生成AIはすでに多くのソフトウェア開発の現場で活用されています。

2023年10月頃にChatGPTに画像入力機能が実装されたときには、電卓アプリのスクリーンショットから、電卓アプリの実装コードが生成される様子が話題になりました。

生成AIを使用する際は、チャット形式のユーザーインターフェース（UI）を使用する方法が一般的ですが、今回はあえて、生成AIの画像入力機能を活用した新たなコード生成UIのアイデアの一つを実装し、検証してみました。

開発物「画像フィードバックによるコード生成機能」のご紹介

開発のモチベーション

生成AIの画像入力機能を使うことで、アプリ画面のスクリーンショットや手書きのUI画像から、ある程度はイメージ通りに動くコードが生成されます。

しかし、エラーがなく要望通りのコードが得られるまでには繰り返しフィードバックを行い、コードの再生成が必要になります。

そこで、フィードバック→コード再生成のサイクルを速めるために、コードのプレビュー画面に描き込んだフィードバックをもとにすぐにコードの再生成ができるようなエディタの開発を行いました。

機能概要

開発したエディタの画面は

• コードエディタ

• プレビュー画面

• プロンプト入力

の3つの部分から構成されています。

エディタに書かれたコードのレンダリングされた結果がプレビュー画面に表示されます。
プレビュー画面は、ペンツールでの描きこみが可能になっています。
プロンプト入力部分には、生成AIへの指示文を追加します。

ボタンを押すと、プロンプト入力部分に入力したテキストと、ペンツールで描き込んだプレビュー画面をもとにコードが再生成されます。

このように、テキストの位置を手書きの矢印で指示した場所に移動させることができました。

この機能を使って、いろんなパターンのコード生成を試してみましたが、特に相性が良かったのが、d3.jsのような可視化に関わるライブラリでした。

d3.jsで書かれたグラフに、このような手書きの塗りつぶしと「図の部分を塗りつぶしたい」というプロンプト文で指示をすると、、

ペンで指定した部分が塗りつぶすようなコードが生成されています。

このように簡単に描いたベン図も、「d3.jsでこんな図を書きたい」と指示をすると、、

厳密には文字位置や色は違いますが、おおよそ指示通りにベン図が作成されています。

最後に、three.jsというjavascriptの3DCGライブラリを使った例です。
このように簡単な手書きのイラストと「three.jsでキューブを描いて、図のように動くようにして」というプロンプトを入力すると、、、

緑色のキューブと矢印の軌道に沿って動くアニメーションが作成されました！

残念ながらアニメーションの回転方向は逆でしたが、軌道の大きさは描いた通りになっています。

システム構成

システム構成はシンプルで、HTML、javascriptのソースコードからAzure OpenAIのAPIを呼び出して、結果を表示しています。

コードエディタの部分には、CodeMirrorというブラウザにコードエディタを組み込むためのjavascriptライブラリを使用しています。

プレビュー画面は、HTMLの<iframe>タグで、コードのプレビュー表示をしています。

プレビュー画面への描きこみ機能は、プレビュー画面の<iframe>要素に重ね合わせた<canvas>要素で実現しています。

プレビュー画面と描き込みの画面キャプチャは、html2canvasというJavaScriptライブラリを使用して実装しています。

LLMには、Azure OpenAIのgpt-4vを使用しました。

おわりに

今回の取り組みを通して、生成AIへの画像フィードバック機能について分かったことは、

• 直感的にスタイリングの修正ができる。

• ピクセルレベルで情報を読み取ってくれるわけではないので、厳密なスタイリングを行うには、Figmaなどのデザインツールのコード出力機能の方が優位。

• 使い慣れていない描画系のライブラリを使うときに便利。

生成AIの分野は日進月歩で進化しており、この活動から本記事の執筆までの間にもCognition社による完全自立型AIソフトウェアエンジニア「Devin」やMicrosoft社によるAI駆動の自動開発に関する論文「AutoDev」が発表され、話題となっていました。

生成AIによってシステム開発の生産性がどのように向上されるのか、今後も益々目が離せませんね。

▼執筆社員の紹介