LoginSignup
0
0
100万人に伝えたい！失敗を乗り超えた話を共有しよう
@xtrmntr80

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

Posted at

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

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

2023_08_17 13_34 Office Lens.jpg

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

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

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

Screenshot_2023-08-17-14-00-38-10_dd6b2219cb0a90b8a293feeeaec0487a-fotor-2023081714411.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"(ボタン)

今回はここが大事

このように、

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

これを利用して、

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

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

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

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

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

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

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

できましたー！！！

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0