AndroidアプリのUIをGeminiで生成する: Google I/OはFake???
はじめに
こちらがこの記事の元となるスライドになります！ぜひご覧ください。
Google I/O 2024
今年の5月にGoogle I/O 2024が開催されました。Google I/Oは、Googleが毎年開催する開発者向けの大規模な技術カンファレンスです。このイベントでは、Googleの最新の技術や製品が発表され、開発者がGoogleのプラットフォームやツールについて学ぶ機会が提供されます。
気になる発表がたくさんありましたが、Android開発においてはAndroid Studioに実装されたGeminiが、Androidプロジェクトの内容を理解し、開発を助けてくれるという機能が個人的に特に大きなニュースでした。
以下の画像のように、Android Studioに搭載されたGeminiにはプロジェクトの内容をGeminiにシェアすることができ、それに基づいてより良いアドバイスをもらえるようです。すごいですね。
ただ、シェアしたプロジェクトの内容は学習に使われる可能性もあるようなので、セキュリティ的な観点も考えた上で使うかどうか検討する必要がありそうです。
Jetpack ComposeのCodeを自動生成する能力を披露
この発表の中でも特に注目したいのが、Jetpack Composeのコードをデザイン画像から生成する能力でした。
https://www.youtube.com/watch?v=ddcZnW1HKUY
上記の画像のように、Geminiに対して
- デザインの画像
- デザインからJetpack Composeのコードを生成して欲しい旨を伝えるPrompt文章
これらを与えるだけで、Geminiがデザイン通りにUIを作ってくれてしまう、という内容のものです。
プロンプト内容
Googleの発表内で使われたデザイン画像はこちら。シンプルなワイヤーフレームのデザインですね。
プロンプトは以下の文章でした。
For the image provided, use Jetpack Compose to build the screen so that the Compose Preview is as close to this image as possible. Also make sure to include imports, use Material 3.
簡単に和訳すると、"画像になるべく近い結果になるようにJetpack ComposeとMaterial 3のコードを書いてね。Previewやimport文も忘れないでね。"と言った内容です。
結果は...驚くべきものでした！
上記のプロンプトから生成されたGeminiのコードはこちらの動画をご覧ください。
生成されたコードをそのまま貼り付けて、出来上がったUIがこちら。
✅ 生成されたコードを丸ごと貼り付けてもコンパイルが通る時点ですごい
✅ それぞれのアイテムの特徴を理解している。TextFieldやButtonなどの適切なUI Componentをちゃんと使えている
❌ 細部のデザインには若干の違いはある
このような結果になりました。これだけの生成能力があれば、Androidの開発生産性向上間違いなしですよね！
実際にやってみよう
さあ、実際に試してみましょう。まず、Android StudioでGeminiタブを開こうとしたのですが...あれ？Googleのプレゼンで見せられていたような画像を入れるオプションがないじゃないですか。Android Studio Ladybugでも画像を入れるオプションを確認できず。。。
まだリリースされていないようなので、とりあえずWeb版のGeminiを使うことにしました。
エントリーナンバー1
最初に試す画像はこちら。Googleで見せられたものよりもアイテム数が少なく、単純なデザインを用意しました。
同じプロンプトを入力して、結果を待ちます。そして出てきたのは...
...Java？しかも、複数のコンパイルエラーがあります。これはちょっと予想外でした。
でも、コンパイルエラーについてはGeminiに伝えたらすぐに修正してくれました。よし、UIの結果を見てみましょう。
結果はこちら
...え？
Googleのショーケースと比べると、現実はかなり酷いものでした。
❌ コンパイルできない
❌ テキストを正確に捉えていない
❌ 画像が消えている
❌ デザインが全然違う
コードを比較してみても、Googleのショーケースでは200行程度のコードが生成されていたのに対し、実際に生成されたのは50行程度。構造も全然違います。
他にもいくつかの画像とショーケースと同じPromptを使って試してみましたが、結果は期待外れでした。
なぜこんなに違うの？
もしかして、違うAIモデルを使っているのかな？と思って確認しましたが、私が使ったのは有料プランであるGemini Advanced, つまり Gemini 1.5 Proです。
Googleの発表で使われているモデルは。。。
https://www.youtube.com/watch?v=ddcZnW1HKUY
全く同じGemini 1.5 Pro。
🤔
このショーケースでGeminiが生成したとされるコードは、本当にGeminiが生成したものなのか。
それとも事前に用意された "Fake" なのか...？
いや、そんなはずはないですよね！😅😅😅😅😅😅😅😅
きっと、まだ開発中の最先端AIモデルを使用したのかもしれません。
Googleからのアップデートを楽しみに待ちましょう！！！
Discussion