こんにちは！GMOメイクショップ コアグループエンジニアの大森です。
みなさん、AI触っていますか。
今日は、とても強力なAIサービスを紹介したいと思います!
その名も Create.xyz
Create.xyzは、テキストや画像からアプリケーションを開発することができる革新的なAIツールです。
このツールを用いることで、モックやプロトタイピングとしての活用。reactアプリケーションのコードの部分生成。社内ツールや開発補助ツールの作成など、様々な事ができるようになります!
Create.xyzの凄さって？
テキストベースのコーディング: 自然言語処理を活用し、ユーザーが書いた説明からコードを自動生成します。この機能は、具体的な機能やアプリの要件をテキストで説明するだけで、それに応じたコードを提供します。
画像からのアプリ作成: この革機能を使えば、画像ファイルをアップロードするだけで、その画像に基づいたウェブサイトやアプリのプロトタイプを生成できます。デザインのスケッチからデジタルプロダクトへの変換がこれまでになく簡単になります。
AI統合: Create.xyzは、ChatGPTやGPT VisionなどのAI技術と統合されており、これによりユーザーはより複雑で高度なアプリケーションの開発が可能になります。この統合機能は、ユーザーが直面するかもしれない様々な開発上の課題を解決するのに役立ちます。
料金: 無料で利用できるサービスですが、プレミアム機能や追加のリソースを利用するには、有料プランの選択が必要になります。利用者のニーズに合わせて、様々なプランが用意されています。具体的な価格やプランの詳細については、Create.xyzの公式ウェブサイトを参照してください。
さっそくCreate.xyzを使ってみる
アカウント作成
まずは無料アカウントを作成します。
アカウント登録に必要なものはメールアドレスだけです。
ページ作成
任意のプロジェクトを選択します。新規でプロジェクトを作成することも出来ます。
次に、ページ作成を選択します。
商品検索機能のプロトタイプを作成してみる
今回は、商品検索機能のプロトタイプを作成してみたいと思います。
画面右のテキストエリアの領域に、作成したいページのプロンプトを入れます。
プロンプトは日本語でも大丈夫🥰
画面右下の「Generate」ボタンをクリックします。
プロンプトの内容によってまちまちですが、およそ30秒 ~ 2分程度待つとページが作成されます。
初回プロンプトとしては中々いい出来ではないでしょうか。ソースコードを表示することも出来るので、このコードを元に react のページを作成することも出来ます。
今の状態だとまだ検索の動きが無いので、実際に絞り込めるようにしたいです。 プロンプトに、「サンプルデータを25件用意して、商品名やメーカー名で実際に絞り込めるようにしたい」という指示を追加します。
実際に画面を動かしてみます。
動画ではなく、画面のキャプチャーのため分かりづらいですが、商品一覧に表示する内容を絞り込むことが出来ています。
プロトタイプとしては十分な出来ではないでしょうか🎉
全くコーディングの知識が無くても、動くアプリケーションを作成することが出来るようになるとは、嬉しいような恐ろしいような、時の流れの速さを感じます🙀
他サービスとのコラボレーション
テキスト、画像ベースでページを作れるだけでも十分なのですが、 Create.xyz の真骨頂は他サービスとのコラボレーションにあります!
Xで Create.xyz 画像をアップロードして GPT-4 Vision に解析させるアプリを紹介していました。
Introducing: GPT-4 Vision Integration 👁️
— Create (@create_xyz) February 21, 2024
Make tools in minutes that use AI to understand your images.
Some examples:
1️⃣ An app for your team that turns photos of handwritten to-do lists into Kanban boards.
2️⃣ An office-friendly app that drafts a response to an email screenshot.… pic.twitter.com/Q8IW52F2ts
今回はこれを作成してみようと思います。
さらに、 Google Translate とも連携させて、解析結果を日本語で表示できるようにします🎉
プロンプトは Xの通りに入力します。
Allow a user to upload an image. Then show the image and use /GPT-4 Vision to describe the image. The explanation is translated into Japanese using /Google Translate and output to. Show loading.If the image failed to analyze, show the reason for the failure in the API response.
アプリを作成して、DALL-Eで作成した画像をアップロードします。
暫く待つと、画面の下に解説文が、ダーッと表示されます!
とてもオシャレな文章。完璧な解説ではないでしょうか。
色々と画像解析を試していると、途端に画像解析ができなくなりました。
エラーメッセージを確認したところ、APIの limit 超過とのことです。
翌日にリトライしたところ、画像解析出来る様になっていましたので、アカウントごとに APIの limit は設定されている模様です。
無料枠で利用しているので外部APIが利用できるだけでありがたいです🥰
また、 Google Image Search と連携するサービスを作成してみましたが、こちらも特に問題なく動きました。
失敗しても大丈夫、バージョン復元機能
プロンプトを変更して、「generate」を繰り返していると、意図せず急激にデザインがガッツリ変わることがあります。
そんな時は、画面上部の See history の機能から過去のバージョンに戻すことが出来ます。
この機能があるおかげで、大胆にプロンプトを変更して動作確認することが出来ます。
終わりに
これだけのサービスが無料枠でもある程度利用できてしまうのは改めてすごいことだなと感じました。
生成AIの進歩は凄まじく、追いかけるだけでも大変なことですが、それを追いかけることで、私たちはより良いサービスを提供できるようになると思います。
「常に変化し続ける」をモットーに、これからも新しいものを追い続けていきたいです。
Enjoy your AI life.
