ホームページ - EY-Office

2025-03-18

VSCodeにCopilot Vision機能が追加されたので、画像からReactコンポーネントを作ってもらった

カテゴリー：AI, ソフト開発

VS Code、Version 1.98のCopilot Visionで画像をAIチャットが渡せるようになったそうです。→ Publickeyの日本語記事

そこで、以前のブログで試した画面画像からのReactコンポーネント生成をCopilotで試してみました。

以前のブログは、

AIにReactコンポーネントを作ってもらいました、愉快愉快： Claude 3.5 Sonnetでの結果、今一つかな？
Claude 3.7 Sonnetがリリースされたので、前回と同じReactコンポーネントを作ってもらいました。これは良いですね： Claude 3.7 Sonnetではだいぶ良くなりました

AI-code-generate Bing Image Creatorが生成した画像を使っています

各AIの生成したReactコンポーネントの結果

元画像
Cursor + Claude 3.5
Cursor + Claude 3.7
Copilot Vision + GPT-4o

Copilot Visionの生成したReactコンポーネント

GitHub Copilot(VS Code Copilot Vision)はFreeバージョンを使っています、AIモデルはOpen AIのGPT-4oです。上の画像のように生成されたReactコンポーネントはClaude 3.5で生成した2つ目のコンポーネントと同じレベルですね。→以前のブログ

同じように、ボタン等がセンター合わせになっていません。またジャンケンの結果文字の色付けが変ですね。当然ですがジャンケンのコードはありません。

ただし、コンポーネントはヘッダー部分のHeader、ジャンケン表示のGameResultコンポーネント、それらを呼出すメインのAppコンポーネントに分かれています。ここは良いですね。

src/components/Header.tsx

import React from 'react';

const Header: React.FC = () => {
  return (
    <header className="bg-blue-500 text-white p-4">
      <h1 className="text-2xl">じゃんけん ポン！</h1>
      <nav className="mt-2">
        <ul className="flex space-x-4">
          <li><a href="#" className="hover:underline">対戦結果</a></li>
          <li><a href="#" className="hover:underline">対戦成績</a></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

src/components/GameResult.tsx

import React from 'react';

const GameResult: React.FC = () => {
  return (
    <div className="p-4">
      <h2 className="text-xl mb-4">対戦結果</h2>
      <div className="flex space-x-2 mb-4">
        <button className="bg-blue-500 text-white py-2 px-4 rounded">グー</button>
        <button className="bg-blue-500 text-white py-2 px-4 rounded">チョキ</button>
        <button className="bg-blue-500 text-white py-2 px-4 rounded">パー</button>
      </div>
      <table className="min-w-full bg-white">
        <thead>
          <tr>
            <th className="py-2 px-4 border">時間</th>
            <th className="py-2 px-4 border">人間</th>
            <th className="py-2 px-4 border">コンピュータ</th>
            <th className="py-2 px-4 border">結果</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="py-2 px-4 border text-blue-500">10:05:52</td>
            <td className="py-2 px-4 border">パー</td>
            <td className="py-2 px-4 border">グー</td>
            <td className="py-2 px-4 border text-blue-500">勝ち</td>
          </tr>
          <tr>
            <td className="py-2 px-4 border">10:05:51</td>
            <td className="py-2 px-4 border">チョキ</td>
            <td className="py-2 px-4 border">チョキ</td>
            <td className="py-2 px-4 border">引き分け</td>
          </tr>
          <tr>
            <td className="py-2 px-4 border text-red-500">10:05:50</td>
            <td className="py-2 px-4 border">グー</td>
            <td className="py-2 px-4 border">パー</td>
            <td className="py-2 px-4 border text-red-500">負け</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default GameResult;

src/App.tsx

import React from 'react';
import Header from './components/Header';
import GameResult from './components/GameResult';

const App: React.FC = () => {
  return (
    <div>
      <Header />
      <main className="container mx-auto mt-4">
        <GameResult />
      </main>
    </div>
  );
};

export default App;