Tvoříme GPT chatbota v PHP (díl 2 - typewriter)

Kategorie: Blog Zveřejněno: pátek 2. srpen 2024 Napsal Kamil Kopecký Vytisknout E-mail

Dnes se podíváme na to, jak našeho inteligentního chatbota naučit vypisovat odpověď tak, jak je běžné u nástrojů typu ChatGPT, tj. pěkně po písmenech, jako když píšeme na stroji. Využijeme k tomu jednoduchý Javascript, kterým doplníme kód, který jsme si vytvořili v předchozím díle. Tak pojďme na to.

Před začátkem čtení tohoto článku si nejdříve přečtete předchozí díl našeho seriálu, ve kterém vysvětlujeme, jak si vytvořit základní skript AI chatbota. Z něj totiž budeme vycházet. A pokud už máte vše pročteno a máte k dispozici základní skript, vrhněte se na čtení tohoto článku.

Naším cílem tedy bude naučit robota vypisovat svou odpověď tak, jako by byla psaná na stroji - tj. písmeno po písmenu. Vyjdeme přitom z našeho předchozího scriptu chatbota, který najdete zde.Nejprve si popíšeme princip našich úprav - do proměnné $response si nejdříve načteme celou odpověď našeho AI chatbota a poté nastartujeme jednoduchý Javascript, který si nejprve zjistí, jak je naše proměnná (=odpověď) dlouhá (tj. kolik má znaků), a poté spustí smyčku, který půjde postupně od začátku proměnné pozici po pozici, vypíše vždy konkrétní znak na dané pozici a chvilku počká,vypíše další znak a chviku počká… atd. až do posledního písmenka. Pro ty, kteří netuší, co popisuji, představme si tento příklad:

$response = “Petr jí buchty.”
$response.length = 15 (délka proměnné je 15 znaků včetně mezer)
Na první pozici je písmeno P, na druhé je písmeno e, na třetí je písmeno t, na čtvrté je písmeno r, na páté je mezera… atd.

(Poznámka: V programování je první pozice v proměnné 0, ne 1, poslední pozice je tedy délka proměnné-1. Jinak proměnné v jazyce PHP se označují symbolem $, v Javascriptu se tento symbol u proměnných nepíše.).

Nyní si vyrobíme smyčku, která postupně projde všechny pozice a vypíše písmenka za sebou, čímž dosáhneme požadovaného efektu. Do proměnné i v našem příkladu budeme postupně načítat pozice (tj. 0, 1, 2...).


<script>
i=0;
for (i < response.length) //zde je smyčka, která poběží od pozice 0 po délku proměnné
{
document.getElementById("response").innerHTML += text.charAt(i); //do našeho chatbota do divu response přidáme písmeno
i++; //posuneme se o pozici dál, tj. do i přičteme jedničku
}
</script>

Toto je hlavní část našeho kódu, která provádí vypisování na obrazovku. Tuto část si ještě doplníme o časové intervaly (=mezery) mezi jednotlivými písmeny a nesmíme zapomenout také na vymazání předchozího textu. Celý kód upravíme takto:


<script>
    function typeWriter(text, i, fnCallback) {
        if (i < text.length) {
            document.getElementById("response").innerHTML += text.charAt(i);
            i++;
            setTimeout(function() {
                typeWriter(text, i, fnCallback)
            }, 30); // Rychlost psaní (ms)
        } else if (typeof fnCallback == 'function') {
            setTimeout(fnCallback, 700);
        }
    }

    function startTypeWriter(text) {
        text = text.trim(); // Odstraní bílé znaky na začátku a konci textu
        document.getElementById("response").innerHTML = ''; // Vymaže starý text
        typeWriter(text, 0); //start naší smyčky od pozice 0
    }
</script>

Jak sami vidíte, kód je rozdělen na dvě části - na funkci startTypeWriter - toto je začátek našeho scriptu, ve kterém vymažeme starý text a nadbytečné znaky a nastartujeme naši smyčku. Smyčka je schovaná ve funkci typeWriter. Javascript je hotov, nyní ho integrujeme do našeho chatbota. Je to velmi snadné, stačí v našem původním kódu chatbota nahradit:


echo '<p>' . $response . '</p>';

za


echo "<script>startTypeWriter(" . json_encode($response) . ");</script>";

Místo abychom tedy vypisovali celý text naráz, spustíme náš script a ten se o vše postará. Takto pak vypadá celý kód:



<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>GPT Asistent Typewriter</title>

    <script>
        function typeWriter(text, i, fnCallback) {
            if (i < text.length) {
                document.getElementById("response").innerHTML += text.charAt(i);
                i++;
                setTimeout(function() {
                    typeWriter(text, i, fnCallback)
                }, 30); // Rychlost psaní (ms)
            } else if (typeof fnCallback == 'function') {
                setTimeout(fnCallback, 700);
            }
        }

        function startTypeWriter(text) {
            text = text.trim(); // Odstraní bílé znaky na začátku a konci textu
            document.getElementById("response").innerHTML = ''; // Vymaže starý text
            typeWriter(text, 0);
        }
    </script>
</head>
<body>
    <h1>GPT Asistent Typewriter</h1>
    <div id="response">Zadej svůj dotaz...</div>
        <?php
        if ($_SERVER['REQUEST_METHOD'] == 'POST') {
            $question = $_POST['question'];

            // Nastavení API klíče a modelu
            $api_key = 'sem napište svůj API klíč';
            $model_id = 'gpt-4'; // Specifikujte konkrétní model, např. gpt-4

            // Konfigurace HTTP požadavku
            $url = 'https://api.openai.com/v1/chat/completions';
            $data = [
                'model' => $model_id,
                'messages' => [
                    ['role' => 'system', 'content' => 'Jsi kamarádský robot.'],
                    ['role' => 'user', 'content' => $question]
                ],
                'max_tokens' => 150, // Maximální počet tokenů v odpovědi
                'temperature' => 0.7 // Kreativita odpovědi
            ];

            // Iniciace cURL
            $ch = curl_init($url);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($ch, CURLOPT_HTTPHEADER, [
                'Content-Type: application/json',
                'Authorization: Bearer ' . $api_key
            ]);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // Vypnutí ověřování SSL certifikátu
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // Vypnutí ověřování názvu serveru

            // Získání výsledku
            $result = curl_exec($ch);
            if (curl_errno($ch)) {
                echo 'Nastala chyba při komunikaci s API: ' . curl_error($ch);
            } else {
                $response_data = json_decode($result, true);
                $response = $response_data['choices'][0]['message']['content'];

                // Volání JavaScript funkce pro postupné vypisování
                echo "<script>startTypeWriter(" . json_encode($response) . ");</script>";
            }
            // Zavření cURL
            curl_close($ch);
        }
        ?>
    
    <br>
    <form method="post">
        <label for="question">Zadej otázku:</label><br>
        <input type="text" id="question" name="question" required><br>
        <input type="submit" value="Odeslat">
    </form>
</body>
</html>

Kdybyste chtěli psaní zrychlit či zpomalit, stačí upravit hodnotu 30 - to je prodleva mezi vypisováním znaků v milisekundách. Funkční výsledek je k dispozici zde. Zdrojový kód si můžete stáhnout zde. V příštím díle se podíváme na to, jak měnit osobost chatbota a jak ho naučit něco nového z našich vlastních dat.

Líbil se vám tento text? Tak mě podpořte - stačí koupit virtuální kafe. Díky!

Zobrazení: 778
Hodnocení článku:
Hodnocení: 5 z 5. Celkem 1 hlasů