マルチモーダル化されたChatGPTで電卓をスクショからプログラム

2023年11月18日
AI BLOG Technology

アップデートし、完全にマルチモーダル化したChatGPT。今まで機能ごとにモードを選択する必要がありましたが、全てが統合され一つのモードで様々なタスクを扱えるようになりました。今回はマルチモーダル化したChatGPTを使ってスクリーンショットを解析してもらい、電卓をプログラムしてみました。

Macの電卓をスクショしてChatGPTへ

電卓の部分だけに絞りスクリーンショットは取得し、ドロップ&ドラックでChatGPTに読み込ませつつ「こちらの電卓をHTMLとCSSとJavascriptで再現したい。」と指示。

生成されたコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <div id="display">
            <div id="result">0</div>
        </div>
        <div id="keys">
            <!-- 行 1 -->
            <button class="key-function">AC</button>
            <button class="key-function">+/-</button>
            <button class="key-function">%</button>
            <button class="key-operator">÷</button>
            <!-- 行 2 -->
            <button class="key-number">7</button>
            <button class="key-number">8</button>
            <button class="key-number">9</button>
            <button class="key-operator">×</button>
            <!-- 行 3 -->
            <button class="key-number">4</button>
            <button class="key-number">5</button>
            <button class="key-number">6</button>
            <button class="key-operator">-</button>
            <!-- 行 4 -->
            <button class="key-number">1</button>
            <button class="key-number">2</button>
            <button class="key-number">3</button>
            <button class="key-operator">+</button>
            <!-- 行 5 -->
            <button class="key-number" id="zero">0</button>
            <button class="key-number">.</button>
            <button class="key-operator">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f4f4f4;
    margin: 0;
    font-family: Arial, sans-serif;
}

#calculator {
    background: #777;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#display {
    background: #555;
    color: white;
    padding: 15px;
    text-align: right;
    border-radius: 5px;
    margin-bottom: 20px;
}

#result {
    font-size: 2em;
}

#keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.key-number, .key-operator, .key-function {
    background: #333;
    border: none;
    color: white;
    padding: 20px;
    font-size: 1.5em;
    border-radius: 5px;
    cursor: pointer;
}

.key-operator {
    background: #fa8231;
}

.key-number#zero {
    grid-column: span 2;
}

.key-number, .key-function {
    background: #a6a6a6;
}

.key-number:active, .key-operator:active, .key-function:active {
    transform: scale(0.9);
}

JS

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const keys = document.querySelector('#keys');
    const display = document.querySelector('#result');

    keys.addEventListener('click', e => {
        if (e.target.matches('button')) {
            const key = e.target;
            const action = key.dataset.action;
            const keyContent = key.textContent;
            const displayedNum = display.textContent;
            // ここに計算機能を追加します
            // 例：数字が押された場合、それを表示に追加する
            if (!action) {
                if (displayedNum === '0') {
                    display.textContent = keyContent;
                } else {
                    display.textContent = displayedNum + keyContent;
                }
            }
            // 他のボタン（オペレータや機能ボタン）に対する処理を追加する
        }
    });
});

javascript見る限りでは計算はできないと思いながら、サーバーに設置してみましたが、HTMLとCSSはそれなりですが、やはり正常には動作しません。ここから自然言語で修正していきます。

「入力はできましたが、計算結果が出力されません。」
「続けて計算ができません。」

最終のコードは以下の通り

修正したjavascript

// script.js
let currentInput = '';
let previousInput = '';
let operation = null;
let isCalculated = false;

function updateDisplay(value) {
    const display = document.querySelector('#result');
    display.textContent = value;
}

function appendNumber(number) {
    if (currentInput === '0' || isCalculated) {
        currentInput = number;
        isCalculated = false;
    } else {
        currentInput += number;
    }
    updateDisplay(currentInput);
}

function chooseOperation(op) {
    if (currentInput === '' && op !== '-') {
        // 数字がまだないが、マイナスの場合は負の数を許容
        if (op === '-' && previousInput === '') {
            currentInput = op;
            updateDisplay(currentInput);
        }
        return;
    }

    if (previousInput !== '') {
        calculate();
    }
    
    operation = op;
    previousInput = currentInput;
    currentInput = '';
}

function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    if (isNaN(prev) || isNaN(current)) return;

    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '×':
            result = prev * current;
            break;
        case '÷':
            if (current === 0) {
                alert("0で割ることはできません。");
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    isCalculated = true;
    operation = undefined;
    previousInput = '';
    currentInput = result.toString();
    updateDisplay(currentInput);
}

function clearAll() {
    currentInput = '';
    previousInput = '';
    operation = null;
    isCalculated = false;
    updateDisplay('0');
}

document.addEventListener('DOMContentLoaded', () => {
    const keys = document.querySelector('#keys');
    keys.addEventListener('click', e => {
        if (e.target.matches('button')) {
            const key = e.target;
            const keyContent = key.textContent;

            if (key.classList.contains('key-number')) {
                appendNumber(keyContent);
            } else if (key.classList.contains('key-operator')) {
                chooseOperation(keyContent);
            } else if (key.textContent === 'AC') {
                clearAll();
            } else if (key.textContent === '=') {
                if (operation != null) calculate();
            }
        }
    });
});

appendNumberは数字を現在の入力に追加します。計算が完了した後で数字を押すと、新しい計算が始まります。

chooseOperationは選択された演算子をセットします。計算が完了している場合は、その結果を前の入力として使用します。

calculateは前の入力と現在の入力に基づいて計算を行い、結果を表示します。計算後は、isCalculatedをtrueに設定して、新しい計算を開始できるようにします。

clearAllはすべての状態をリセットし、表示を0に戻します。

と関数の説明も付与してくれました。