GPTに画像構成をテキスト入力して、PHPソースコードを出力させる

「WebアプリからのHWの制御方法」について学んでいます。
raspberry Pi と Grove Base Hatを使って学習していました。
課題の中で「この画面構成で」ってのが出てきまして、ちょっと手間取ったのですが、なんとかこなせたので、その備忘録がてら。

画面とか画像を理解させるのって最初は難しいと思う(3.5はコードスニペットがないので)んですが、下の画面構成がうまくできたので、報告します。

![2023_08_17 13_34 Office Lens.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325761/7fabb863-f748-5560-efee-944f4d07b18d.jpeg)

この画面構成をブラウザ上で表現して、ボタン押下でraspberry上のLEDを点灯させたり、ブザー鳴らしたりできるようなphpファイルを作りましょうってやつでした。

まず、この表をそのまんまGoogle Lenseでキャプチャします。

それをひとまずエディタ（なんでもいいんですが、今回もまたSimplenote）に貼り付け。

![Screenshot_2023-08-17-14-00-38-10_dd6b2219cb0a90b8a293feeeaec0487a-fotor-2023081714411.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325761/702dbbb1-c3a0-5770-7e11-2b9003a8fbec.png)

訳わかんない羅列になりましたが、縦に貼り付けちゃってるので、成型します。
そのときに画面構成のままにテキストを並べなおします。
範囲選択して、選択部分をドラッグして移動したり、いろいろして、

    SW制御

    Update

    RED　　　: 1
    YELLOW    : 1
    BLUE         : 1

    LED+BUZZER制御

    ALL LED  ON OFF

    Red LED  ON OFF
    Yellow LED  ON OFF
    Blue LED  ON OFF

    Buzzer  1 sec ON

これだけだと、どれがボタンなのかテキストなのか解りません。なので、
以下のように編集します。

    SW制御(項目見出し)

    "Update"(ボタン)

    RED   : 1
    YELLOW    : 1
    BLUE         : 1

    LED+BUZZER制御（項目見出し）

    ALL LED  "ON"" OFF"(両方ボタン)

    Red LED  "ON"" OFF"(両方ボタン)
    Yellow LED  "ON"" OFF"(両方ボタン)
    Blue LED  "ON"" OFF"(両方ボタン)



    Buzzer  "1 sec ON"(ボタン)
    

:::note info

**今回はここが大事**

:::
このように、

:::note warn


**この（）内は説明ですよ、””で囲んだものは説明内に記載するものだよと書かなくても、記号で示すことができます。**
また、
**（）内で両方と書いて””を分けてるので、ごっちゃにもならないようになってます。**
:::


これを利用して、

    GPIO割り当て:

    A2 　距離センサ
    A0　光センサ
    l2C　湿度温度・気圧センサ（BME280）
    D5　赤LED
    D6　赤ボタン
    D16　黄LED
    D17　黄ボタン
    D18　青LED
    D19　青ボタン
    D12　ブザー

    ＃命令：下の構図の画面になるようにコードを出力してください


    SW制御(項目見出し)

    "Update"(ボタン)

    RED　　　: 1
    YELLOW    : 1
    BLUE         : 1

    LED+BUZZER制御（項目見出し）

    ALL LED  "ON"" OFF"(両方ボタン)

    Red LED  "ON"" OFF"(両方ボタン)

    Yellow LED  "ON"" OFF"(両方ボタン)

    Blue LED  "ON"" OFF"(両方ボタン)



    Buzzer  "1 sec ON"(ボタン)


と、GPTに投げます。
これを出力させると、
> ご提供いただいた情報を基に、指定された構図の画面になるようにコードを生成します。
> 
    gpio_control.php:

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>GPIO制御</title>
        <link rel="stylesheet" type="text/css" href="./main.css">
    </head>

    <body>

        <h2>SW制御</h2>
        <form action="" method="GET">
            <button class="btn" type="submit" name="update_sw" value="1">Update</button>
        </form>

        <!-- Placeholder for Switch States -->
        <p>RED: 1</p>
        <p>YELLOW: 1</p>
        <p>BLUE: 1</p>

        <h2>LED + BUZZER制御</h2>
        <form action="" method="GET">
            <h3>ALL LED</h3>
            <button class="btn" type="submit" name="led_all" value="1">ON</button>
            <button class="btn" type="submit" name="led_all" value="0">OFF</button>

            <h3>Red LED</h3>
            <button class="btn" type="submit" name="led_red" value="1">ON</button>
            <button class="btn" type="submit" name="led_red" value="0">OFF</button>

            <h3>Yellow LED</h3>
            <button class="btn" type="submit" name="led_yellow" value="1">ON</button>
            <button class="btn" type="submit" name="led_yellow" value="0">OFF</button>

            <h3>Blue LED</h3>
            <button class="btn" type="submit" name="led_blue" value="1">ON</button>
            <button class="btn" type="submit" name="led_blue" value="0">OFF</button>

            <h3>Buzzer</h3>
            <button class="btn" type="submit" name="buzzer" value="1">1 sec ON</button>
        </form>

        <?php

        // Switch Update logic
        if (isset($_GET["update_sw"])) {
            // Placeholder: Insert command to update and fetch switch states
        }

        // LED + Buzzer Control logic
        if (isset($_GET["led_all"])) {
            $value = $_GET["led_all"];
            exec("pigs w 5 $value w 16 $value w 18 $value");
        }

        if (isset($_GET["led_red"])) {
            $value = $_GET["led_red"];
            exec("pigs w 5 $value");
        }

        if (isset($_GET["led_yellow"])) {
            $value = $_GET["led_yellow"];
            exec("pigs w 16 $value");
        }

        if (isset($_GET["led_blue"])) {
            $value = $_GET["led_blue"];
            exec("pigs w 18 $value");
        }

        if (isset($_GET["buzzer"])) {
            exec("pigs w 12 1");
            sleep(1);
            exec("pigs w 12 0");
        }

        ?>
    </body>

    </html>


> 上記のコードは、要求された構造を持つページを生成するものです。
> ボタンを押すと、それぞれのLEDやブザーの制御が行われます。
> スイッチの状態の更新はプレースホルダとして存在しており、実際のコマンドをそこに入れる必要があります。
  


と出力されました。
コード部分を
これを実行すると、

![スクリーンショット (44)-fotor-20230817134244.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325761/6ab5812e-039e-6449-237c-c977a0f2617f.png)

こんな風になっちゃいました。
これだと要件通りになってないので、

    LEDとブザー制御の、
    項目名とボタン配置を、
    例:ALL LED  ON OFF
    のように、項目の横にボタン配置してください。

    それぞれ色がある文字列の色を、その色にしてください。
    RED:1
    赤色でRED他は黒
    YELLOW:1
    黄色でyellow
    ＃どちらの制御項目でも同じように色分けすること

と、追加で命令を送ります。すると、

> 了解しました。指定されたフォーマットに従って、項目の名前とボタンを横に配置し、文字色を変更します。

### gpio_control.php:


    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>GPIO制御</title>
        <link rel="stylesheet" type="text/css" href="./main.css">
        <style>
            .red-text { color: red; }
            .yellow-text { color: yellow; }
            .blue-text { color: blue; }
        </style>
    </head>

    <body>

        <h2>SW制御</h2>
        <form action="" method="GET">
            <button class="btn" type="submit" name="update_sw" value="1">Update</button>
        </form>

        <!-- Placeholder for Switch States -->
        <p><span class="red-text">RED</span>: 1</p>
        <p><span class="yellow-text">YELLOW</span>: 1</p>
        <p><span class="blue-text">BLUE</span>: 1</p>

        <h2>LED + BUZZER制御</h2>
        <form action="" method="GET">
            <div>
                <span>ALL LED</span>
                <button class="btn" type="submit" name="led_all" value="1">ON</button>
                <button class="btn" type="submit" name="led_all" value="0">OFF</button>
            </div>

            <div>
                <span class="red-text">Red LED</span>
                <button class="btn" type="submit" name="led_red" value="1">ON</button>
                <button class="btn" type="submit" name="led_red" value="0">OFF</button>
            </div>

            <div>
                <span class="yellow-text">Yellow LED</span>
                <button class="btn" type="submit" name="led_yellow" value="1">ON</button>
                <button class="btn" type="submit" name="led_yellow" value="0">OFF</button>
            </div>

            <div>
                <span class="blue-text">Blue LED</span>
                <button class="btn" type="submit" name="led_blue" value="1">ON</button>
                <button class="btn" type="submit" name="led_blue" value="0">OFF</button>
            </div>

            <div>
                <span>Buzzer</span>
                <button class="btn" type="submit" name="buzzer" value="1">1 sec ON</button>
            </div>
        </form>

        <?php
        // ... (The PHP control logic remains the same.)
        ?>
    </body>

    </html>


> 上記のコードで、`<style>`タグを用いて、指定された色に対応する
> CSSクラス（`red-text`、`yellow-text`、`blue-text`）を追加しました。
> そして、これらのクラスを適切な文字列に適用することで、文字色を変更しました。

![スクリーンショット (45)-fotor-2023081715048.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325761/68345ac0-6ac4-4eba-9868-53cd83937a16.png)

これで出来上がってくれたらよかったんですが、ボタンが…ってことで、
最後の命令!!

    ボタンと項目の間にスペースを入れ、ボタンの頭をそろえてください。

> 了解しました。ボタンと項目の間にスペースを追加し、ボタンの開始位置を修正いたします。
> 
> html

    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>GPIO制御</title>
        <link rel="stylesheet" type="text/css" href="./main.css">
        <style>
            .red-text { color: red; }
            .yellow-text { color: yellow; }
            .blue-text { color: blue; }
            .label {
                display: inline-block;
                width: 150px; /* ラベルの幅を固定 */
            }
        </style>
    </head>

    <body>

        <h2>SW制御</h2>
        <form action="" method="GET">
            <div class="label">Update</div>
            <button class="btn" type="submit" name="update_sw" value="1">Update</button>
        </form>

        <!-- Placeholder for Switch States -->
        <p><span class="red-text">RED</span>: 1</p>
        <p><span class="yellow-text">YELLOW</span>: 1</p>
        <p><span class="blue-text">BLUE</span>: 1</p>

        <h2>LED + BUZZER制御</h2>
        <form action="" method="GET">
            <div>
                <span class="label">ALL LED</span>
                <button class="btn" type="submit" name="led_all" value="1">ON</button>
                <button class="btn" type="submit" name="led_all" value="0">OFF</button>
            </div>

            <div>
                <span class="label red-text">Red LED</span>
                <button class="btn" type="submit" name="led_red" value="1">ON</button>
                <button class="btn" type="submit" name="led_red" value="0">OFF</button>
            </div>

            <div>
                <span class="label yellow-text">Yellow LED</span>
                <button class="btn" type="submit" name="led_yellow" value="1">ON</button>
                <button class="btn" type="submit" name="led_yellow" value="0">OFF</button>
            </div>

            <div>
                <span class="label blue-text">Blue LED</span>
                <button class="btn" type="submit" name="led_blue" value="1">ON</button>
                <button class="btn" type="submit" name="led_blue" value="0">OFF</button>
            </div>

            <div>
                <span class="label">Buzzer</span>
                <button class="btn" type="submit" name="buzzer" value="1">1 sec ON</button>
            </div>
        </form>

        <?php
        // ... (The PHP control logic remains the same.)
        ?>
    </body>

    </html>


> この変更により、項目名とボタンの間にスペースが確保され、
> すべてのボタンが揃って表示されるはずです。



さて・・・どうでしょうか・・・


![スクリーンショット (46)-fotor-20230817152030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325761/d270a4bd-ec24-3fb1-ea3d-6d4ce15e777c.png)


できましたー！！！

もう時間がないので、今日はこれまで!!

Qiita用のマークダウンで装飾ができるようになりましたｗｗ