んにちは。今回は画像からUIの実装を生成する試みとして、GPT-4oを使用してデモ画面の画像からHTMLを生成し、Chart.jsでグラフを作成する試みを解説していきます。

1. はじめに

GPT4oとは？

GPT4oは、OpenAIが開発した大規模な言語モデルで、自然言語処理のさまざまなタスクにおいて高い性能を発揮します。このモデルを使って、画像からHTMLコードの自動生成も可能です。

Chart.jsとは？

Chart.jsは、シンプルかつ柔軟なJavaScriptライブラリで、美しいグラフを簡単に作成することができます。今回は、これを使って実際のデモ画面を作成します。

2. 環境設定

必要なツールとライブラリ

テキストエディタ（VSCode, Sublime Textなど）
Webブラウザ
Chart.jsライブラリ

GPT-4oの利用方法

ChatGPT Plusに契約してGPT4oのモデルを選択して以下の手順を実施しました。

3. Chart.jsのデモ画面のビットマップを取得

まず、Chart.jsのデモ画面のスクリーンショットを撮ります。以下に、スクリーンショットを貼り付けます。

4. ChatGPTにスクリーンショットを貼り付けてGPT4oにHTMLを実装してもらう

次に、このスクリーンショットをChatGPTに貼り付け、GPT4oを使用してHTMLコードを生成してもらいます。以下のHTMLコードは、GPT-4が生成したものです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .title-align-buttons {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
        .title-align-buttons button {
            margin: 0 10px;
            padding: 10px;
            border: none;
            background-color: #f0f0f0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div style="width: 75%; margin: auto;">
        <canvas id="myChart"></canvas>
    </div>
    <div class="title-align-buttons">
        <button onclick="setTitleAlignment('start')">Title Alignment: start</button>
        <button onclick="setTitleAlignment('center')">Title Alignment: center (default)</button>
        <button onclick="setTitleAlignment('end')">Title Alignment: end</button>
    </div>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Dataset 1',
                    data: [0, 60, -70, 60, 20, 50, -70],
                    borderColor: 'rgba(255, 99, 132, 0.8)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderWidth: 2,
                    fill: false
                }]
            },
            options: {
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Chart Title',
                        align: 'center'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        function setTitleAlignment(alignment) {
            myChart.options.plugins.title.align = alignment;
            myChart.update();
        }
    </script>
</body>
</html>

5. 生成されたコードを確認してデモ画面と似ていることを確認

次に、生成されたHTMLコードをブラウザで開き、Chart.jsのデモ画面と似ていることを確認した。グラフの形状など全く一緒ではないが、期待するレベルのは生成できたので良しとする。

上記のHTMLコードをテキストエディタにコピーし、ファイル名を「chart_demo.html」として保存します。
保存したファイルをブラウザで開きます。
デモ画面と同じようにグラフが表示され、ボタンをクリックしてタイトルの位置を変更できることを確認します。

6. まとめ

この記事では、GPT4oを活用してHTMLとChart.jsの設定コードを生成し、デモ画面を再現する方法を紹介しました。GPT4oの強力な生成能力を活かして、効率的にコーディングができることを体感していただけたと思います。
まったく同じものでなくても、UIのたたき台づくりなど活用できそうだと思いました。

学んだこと

GPT4oを使用したHTMLの自動生成
Chart.jsの基本的な設定と統合方法
コードの再利用性と効率的な開発手法

この記事が皆さんの開発に役立つことを願っています。