chatgpt apiを使って、ユーザー入力の自然文からCSS自動生成するデモ

CSSだけ返して！と言っても、たまに`で囲って返したりする・・・。
あと、CSS全部を書かせると時間がかかるので、CSS追加(後出し優先)にした。
ん～、色を変えたり、文字の大きさを変えたりするくらいが限界？

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>エントリーページ</title>
    <style id="dynamic-styles">
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .entry-form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
        .entry-form h2 {
            text-align: center;
        }
        .entry-form label {
            display: block;
            margin-bottom: 8px;
        }
        .entry-form input[type="text"],
        .entry-form input[type="email"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 12px;
            border: 1px solid #ccc;
        }
        .entry-form button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #loading {
            display: none;
            text-align: center;
            font-size: 16px;
            color: #555;
        }

        #css-output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>

    <div class="entry-form">
        <h2>エントリーフォーム</h2>
        <label for="name">名前</label>
        <input type="text" id="name" name="name" placeholder="お名前を入力してください">
        
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" placeholder="メールアドレスを入力してください">
        
        <button type="submit">送信</button>
    </div>

    <h3>CSS変更の要望を入力してください:</h3>
    <input type="text" id="user-request" placeholder="例: ボタンの色を赤にしてほしい" />
    <button id="send-request">送信</button>

    <div id="loading">CSSを生成中...</div>

    <h3>追加されたCSS:</h3>
    <div id="css-output">まだCSSは追加されていません。</div>

    <script>
        // サーバーにユーザーのリクエストを送信してCSSを取得
        document.getElementById('send-request').addEventListener('click', async () => {
            const userRequest = document.getElementById('user-request').value;
            const currentCSS = document.getElementById('dynamic-styles').innerHTML;

            // ローディングメッセージの表示
            document.getElementById('loading').style.display = 'block';

            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer チャットGPTのAPI KEYを入力する`
                },
                body: JSON.stringify({
                    model: 'gpt-4',
                    messages: [
                        { role: 'system', content: 'ユーザーの要望に従って、追加するためのCSSコードのみ返してください。説明は不要です。' },
                        { role: 'user', content: `ユーザーの要望: ${userRequest}` }
                    ]
                })
            });

            const data = await response.json();
            const newCSS = data.choices[0].message.content;

            // 既存のCSSに変更点だけを追加
            document.getElementById('dynamic-styles').innerHTML += newCSS;

            // 画面に追加されたCSSを表示
            document.getElementById('css-output').textContent = newCSS;

            // ローディングメッセージの非表示
            document.getElementById('loading').style.display = 'none';
        });
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!DOCTYPE html>

<head>

<title>エントリーページ</title>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

}

.entry-form {

max-width: 400px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

background-color: #f9f9f9;

}

.entry-form h2 {

text-align: center;

}

.entry-form label {

display: block;

margin-bottom: 8px;

}

.entry-form input[type="text"],

.entry-form input[type="email"] {

width: 100%;

padding: 8px;

margin-bottom: 12px;

border: 1px solid #ccc;

}

.entry-form button {

width: 100%;

padding: 10px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

}

#loading {

display: none;

text-align: center;

font-size: 16px;

color: #555;

}

#css-output {

margin-top: 20px;

padding: 10px;

border: 1px solid #ccc;

background-color: #f1f1f1;

white-space: pre-wrap;

}

</style>

</head>

<body>

<h2>エントリーフォーム</h2>

<label for="email">メールアドレス</label>

</div>

<h3>CSS変更の要望を入力してください:</h3>

<div id="loading">CSSを生成中...</div>

<h3>追加されたCSS:</h3>

<div id="css-output">まだCSSは追加されていません。</div>

// サーバーにユーザーのリクエストを送信してCSSを取得

document.getElementById('send-request').addEventListener('click', async () => {

const userRequest = document.getElementById('user-request').value;

const currentCSS = document.getElementById('dynamic-styles').innerHTML;

// ローディングメッセージの表示

document.getElementById('loading').style.display = 'block';

const response = await fetch('https://api.openai.com/v1/chat/completions', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'Authorization': `Bearer チャットGPTのAPI KEYを入力する`

body: JSON.stringify({

model: 'gpt-4',

messages: [

{ role: 'system', content: 'ユーザーの要望に従って、追加するためのCSSコードのみ返してください。説明は不要です。' },

{ role: 'user', content: `ユーザーの要望: ${userRequest}` }

]

})

});

const data = await response.json();

const newCSS = data.choices[0].message.content;

// 既存のCSSに変更点だけを追加

document.getElementById('dynamic-styles').innerHTML += newCSS;

// 画面に追加されたCSSを表示

document.getElementById('css-output').textContent = newCSS;

// ローディングメッセージの非表示

document.getElementById('loading').style.display = 'none';

});

</script>

</body>

</html>

関連記事