皆さんよく使用されているであろうChatGPT4の競合や性能が超えたと囁かれているチェットAIの「Claude 3」について触ってみたので、紹介したいと思います。
今回は、Claude 3の機能にあるUIデザインをフロントエンドコードに変換する機能を検証してみましたので気になる人は是非みてください。
Claudeとは、「Anthropic」が発表した大規模言語モデル群のことです。
アイデアのブレインストーミングや画像分析、長文のドキュメントの要約などが可能です。
APIを利用して自身のAIインフラストラクチャに直接組み込むこともできるようです。
Anthropicは2024年3月4日、生成AIサービスの最新版であるClaude 3をリリースしました。
Claude 3には、Claude 3 Haiku、Claude 3 SonnetとClaude 3 Opusとの3つのモデルがあります。
ベンチマークテストの結果によると、最も性能が高いモデルであるOpusは、複数の分野でGPT-4のスコアを上回っているということです。
学部レベルの専門知識(MMLU)、大学院レベルの専門家推論(GPQA)、基礎数学(GSM8K)など、様々な分野でClaudeが高い性能を示しました。
ただOpusは有料プランになります。
Claude公式サイト
Claude公式サイト Claude 3 発表ニュース
ChatGPTに比べてClaudeは、自然な日本語という意見が多いようです。
より人間味があって面白いことが話題になっています！
ここが一番面白いポイントかもしれないです。
自分の話し方を覚えさせて、文章作成を依頼できたりもできそうでした。
AIぽくない文章を作成できるのが良いですね。
Claude 3 Opusは、扱えるトークン数が200kとChatGPTのGPT-4の約10倍ほどあるようです。
大量の文章を要約したり、出力したりするようなことがあれば、注目するところかと思います。
ChatGPTの無料プランでは、画像やPDF等の入力できないですが、(有料プランにすると可能です)
Claude 3の無料プランでは入力可能で、認識してくれます。
今回紹介する「UIデザインをフロントエンドコードに変換する機能」も無料で試すことができます。
ChatGPTには、GPTsというAIの高度なカスタマイズ機能があり、ユーザーは自分専用のチャットボットを作成できます。
Claude 3には、無い機能です。
Claudeの新機能であるUIデザインをフロントエンドコードに変換する機能を使って、AIコーディングがどれだけ性能が高いのか検証してみました。
まず、簡単なTOPページまるまるのデザインを作りました。
あとはこの画像をClaude 3に送信するだけです。
画像と一緒にテキストが送信できるので、どのようにコーディングしてほしいかを書きます。
今回は「Convert this design into a html component using tailwind css」という指示を添えて送信しました。
tailwind CSS を使用して、このデザインを HTML コンポーネントに変換します。という意味です。
ここの指示の仕方でもっと性能が良くなるかもしれないです。
送信してすぐに、ソースコードを生成して返答してくれました。
このコードを実際にブラウザでみたいと思います。
今回はTailwindCSSを使用しているので、Tailwind Playで見てみようと思います。
やっぱり画像は、表示されないので別ファイルで設置する必要がありますね。
ヘッダーやフッターが無いのとお問い合わせコンテンツも完全には再現できていないように見えます。
ただ画面幅を変えてみると、自動でレスポンシブしてくれていることがわかります。
ここから修正依頼を出してみようと思います。
チャット形式なので、先程送信したチャットだと修正依頼が出せるのが良いですね。
画像はダミー画像を用意してくれるLorem Picsumを使用してダミー画像を入れてもらおうと思います。
その他再現できていないところの修正をお願いしようと思います。
修正指示は以下を送信してみました。
「ありがとうございます。
修正いただきたい箇所を以下に記載します。
画像は一旦ダミー画像のURLに差し替えてください。
ダミー画像のURL： https://picsum.photos/200/300
ヘッダーとフッターがソースコードに無いので追加お願いします。
ブログのタグがデザインと異なるので修正お願いします。
お問い合わせのコンテンツが、デザインと異なるので修正お願いします。
アイコンや背景が表現できない場合はダミー画像のURLで画像として表示してください。
宜しくお願い致します。」
マシになりましたが、やっぱり少し違いますね。
難しいコーディングや文字が小さい箇所は読み取るのが難しいのかもしれないです。
次は、デザインUI画像を変えて、ページ全体ではなく、一部のUIコンポーネントで検証してみようと思います。
今回はお問い合わせフォームのUIを試してみます。
先程までと同じチャットで
「tailwind CSS を使用して、このデザインを HTML コンポーネントに変換してください。余白や影もデザインに忠実に再現してみてください。」
という指示を添えて送信してみました。
良い感じに再現できてそうですね。
画像からフォームやボタンの認識もできていて、フォームの入力もできますし、ボタンのホバーも付けてくれています。
画像にあるプレースホルダのテキストから何の入力フォームか読み取って、inputタグのタイプ属性も合わせてくれています。
formタグで囲んでいて、ボタンのタイプ属性はsubmitに設定してくれているので、「Send Message」をクリックしてみると、送信もされます。
１ページまるまるのデザイン画像ではなく、一部のパーツ単位で変換指示をすると、性能が高く感じました。
複雑なデザイン画像は、再現が少し難しいかもしれないなと思います。
ただ、プロンプトで自由な指示が可能なのが良いところだなと感じました。
ReactやVueなどのコーディングも指示すれば可能だと思いますし、デザイン画像から色やテキストを変更して出力してもらうように指示することも可能だと思います。
また、チャット式なので返答から、修正や変更の指示ができるのも良いところだと思います。
プロンプト次第では、もっと面白い方法もあるのかもしれません。
気になる方は是非触ってみてくだださい。
