Hast du eine Frage?

How-to: Text Generator

Willkommen zum How-to: Text Generator.
Hier lernst du, wie du ein Werkzeug programmierst
mit dem du Text generieren kannst.

Falls du etwas nicht verstehst, nutze den Chatbot auf der rechten Seite.
Kopiere den Teil vom Code, den du erklärt haben möchtest und stelle deine Frage dazu.

Was brauchen wir für das Werkzeug:
→ Ordnerstruktur & Dateien (siehe How to: Basic Setup)
→ OpenAI-API Key (siehe How to: API)
→ Browser (funktioniert am besten mit Chrome)
→ Text-Editor (zb. SublimeText)

HTML index.html

Die index.html beinhaltet u.A.:
→ <h1> Überschrift (optional)
→ <p> Anleitungstext (optional)
→ <input> Input zum Prompt eingeben und <button> zum Generieren
→ <p> Textfeld für den Output

1. Öffne die index.html

Du kannst den Code kopieren und in deine Datei einfügen:


                <!DOCTYPE html> 

                <html> 

                <head>

                <title>Headline</title>

                <link rel="stylesheet" type="text/css" href="css/style.css">

                </head>

                <body>

                

                <h1>Text Generator</h1>

                <p>Generiere Text in dem du einen Prompt eingibst. <br>

                Nach Texteingabe drücke auf den Button um die Antwort zu generieren.</p> 

                <input placeholder="Hier Prompt eingeben" />

                <button id="generateButton">Generieren</button>

                <p id="output"></p>
 

                <script src="js/script.js"></script>

                

                </body>

                </html>

2. Speicher die index.html

CSS style.css

1. Öffne die style.css

Die style.css beinhaltet:
→ *{} Zurücksetzen auf den Default Style
→ h1{}, p{}, input{} basic Styling (optinal)

Du kannst den Code kopieren und in deine style.css Datei einfügen:


                * { 

                margin: 0;

                padding: 0;

                box-sizing: border-box;

                }


                h1, p {

                margin: 20px;

                }


                input {

                margin-left: 20px;

                width: 200px;

                }

2. Speicher die style.css

JS script.js

Die script.js beinhaltet:
→ getMessages: Ruft generierten Text von einer API ab und fügt ihn der Seite hinzu
→ handleGenerateButtonClick: Wird beim Klick auf den "Generate"-Button aufgerufen und ruft getMessage auf

1. Öffne die script.js

Du kannst den Code kopieren und in deine script.js Datei einfügen:


            const API_KEY = "DEIN_API_KEY";

            const generateButton = document.querySelector('#generateButton');

            const outputElement = document.querySelector('#output');

            const inputElement = document.querySelector('input');

            
          
            function getMessage() {

            console.log('clicked');

            generateButton.textContent = "Laden...";

            

            const options = {

            method: "POST",

            headers: {

            "Authorization": `Bearer ${API_KEY}`,

            "Content-Type": 'application/json'

            },

            body: JSON.stringify({

            model: "gpt-3.5-turbo",

            messages: [{

            role: "user",

            content: inputElement.value

            }],

            max_tokens: 300

            })

            };

            

            fetch('https://api.openai.com/v1/chat/completions', options)

            .then(response => response.json())

            .then(data => {

            console.log(data);

            outputElement.textContent = data.choices[0].message.content;

            generateButton.textContent = "Generate";

            })

            .catch(error => {

            console.error(error);

            });

            }


              generateButton.addEventListener('click', getMessage);

2. Füge deinen API Key in dieses Feld ein: "DEIN_API_KEY"

3. Speicher die script.js