Hast du eine Frage?

How-to: Text-to-Image Generator

Willkommen zum How-to: Text-to-Image Generator.
Hier lernst du, wie du ein Werkzeug programmierst mit dem
du Bilder auf einer Canvas 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)
→ Browser Erweiterung (siehe How-to: CORS Erweiterung)
→ Text-Editor (zb. SublimeText)

HTML index.html

Die index.html beinhaltet u.A.:
→ <h1> Überschrift (optional)
→ <p> Anleitungstext (optional)
→ <input> zum Prompt eingeben und <button> zum Generieren
→ <canvas> um das Bild anzuzeigen

1. Öffne die index.html

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


                <!DOCTYPE html> 

                <html> 

                <head>

                <title>Text-to-Image Genrator</title>

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

                </head>

                <body>

                

                <h1>Text-to-Image Generator</h1>

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

                Nach der Texteingabe drücke auf den Button um das Bild zu generieren. </p>

                

                <input placeholder="Hier Prompt eingeben" />

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

                <br> 

                <canvas></canvas>
 

                <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)
→ canvas{} Größe der Canvas festlegen

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;

                }

                

                canvas {

                margin: 20px;

                width: 600px;

                height: 600px;

                }

2. Speicher die style.css

JS script.js

Die script.js beinhaltet:
→ getImages: Ruft generierten Bilder von einer API ab
→ generateButton.addEventListener: Wird beim Klick auf den "Generate"-Button aufgerufen und ruft getImages auf
→ drawImageOnCanvas: Platziert das generierte Bild auf der Canvas

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 imageCanvas = document.querySelector('canvas');

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

            const generateButton = document.getElementById('generateButton');

            let generatedImage;

            

            generateButton.addEventListener('click', getImages);

            

            async function getImages() {

            generateButton.textContent = "Laden...";

            

            const options = {

            method: "POST",

            headers: {

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

            "Content-Type": 'application/json'

            },

            body: JSON.stringify({

            "prompt": inputElement.value,

            "n": 1,

            "size": "256x256"

            })

            };

            

            try {

            const response = await fetch('https://api.openai.com/v1/images/generations', options);

            const data = await response.json();

            

            data.data.forEach((imageObject) => {

            const img = new Image();

            

            const imageUrl = imageObject.url;

            img.crossOrigin = "Anonymous";

            img.src = imageUrl;

            

            img.onload = () => {

            generatedImage = img;

            drawImageOnCanvas();

            generateButton.textContent = "Generieren";

            };

            });

            } catch (error) {

            console.error(error);

            generateButton.textContent = "Generieren";

            }

            }

            

            function drawImageOnCanvas() {

            const canvas = imageCanvas;

            const canvasContext = canvas.getContext("2d");

            

            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

            

            canvasContext.drawImage(generatedImage, 0, 0, canvas.width, canvas.height);

            }

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

3. Speicher die script.js