Hast du eine Frage?


How-to: Headline Tool


Willkommen zum How-to: Headline Tool.
Hier lernst du, wie du ein Werkzeug programmieren kannst, mit dem du
einzelne Buchtstaben im gewünschten Stil generieren lassen und diese Buchstaben
anschließend auf der Fläche anordnen 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
→ <div> image-section in der die generierten Bilder erscheinen

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>Headline Letter Generator</h1>
<p>Generiere Buchstaben im dem Stil deiner Wahl. <br>
Wenn der Buchstabe erscheint, kannst du ihn auf der Fläche hin und her ziehen.</p>
<input placeholder="Letter A in the style of XX" />
<button id="generateButton">Generieren</button>
<div class="image-section"></div>

<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
→ body{} Definieren der Größe der "Leinwand"
→ h1{}, p{}, .draggable{} basic Styling (optinal)
→ .image-section img{} Definieren des Filters für die Buchstaben (wichtig!)

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
width: 100vw;
height: 100vh;
}

h1 {
margin: 20px;
}

p {
margin: 0 20px 20px 20px;
}

input {
margin: 0 0 20px 20px;
}

.image-section img {
mix-blend-mode: multiply;
filter: grayscale(100%) brightness(93%) hue-rotate(360deg) saturate(1000%) contrast(1000%);
}

.draggable {
cursor: grab;
}

.draggable:active,
.draggable.dragging {
cursor: grabbing;
}

2. Speicher die style.css


JS script.js

Die script.js beinhaltet folgende Funktionen:
→ getImages: Ruft Bilder von einer API ab und fügt sie der Seite hinzu
→ handleGenerateButtonClick: Wird beim Klick auf den "Generate"-Button aufgerufen und ruft getImages auf
→ makeImagesDraggable: Macht die generierten Bilder per Drag & Drop verschiebbar

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 inputElement = document.querySelector('input');
const imageSection = document.querySelector(".image-section");

const getImages = async () => {
const options = {
method: "POST",
headers: {
"Authorization": `Bearer ${API_KEY}`,
"Content-Type": 'application/json'
},
body: JSON.stringify({
"prompt": inputElement.value + ", black and white, no shadows, extreme white background, 4k",
"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 image = new Image();
image.src = imageObject.url;
image.classList.add('draggable');
image.draggable = true;
imageSection.appendChild(image);
});

generateButton.textContent = "Generieren";
makeImagesDraggable();
} catch (error) {
console.error(error);
}
};

const handleGenerateButtonClick = () => {
generateButton.textContent = "Loading...";
getImages();
};

generateButton.addEventListener('click', handleGenerateButtonClick);

const imageSize = 256;
let draggableImage = null;
let dragOffsetX = 0;
let dragOffsetY = 0;

const makeImagesDraggable = () => {
document.body.addEventListener('dragstart', (e) => {
if (e.target.classList.contains('draggable')) {
draggableImage = e.target;
const boundingRect = draggableImage.getBoundingClientRect();
dragOffsetX = e.clientX - boundingRect.left;
dragOffsetY = e.clientY - boundingRect.top;
e.stopPropagation();
}
});

document.body.addEventListener('dragend', () => {
draggableImage = null;
});

document.body.addEventListener('dragover', (e) => {
e.preventDefault();
});

document.body.addEventListener('drop', (e) => {
e.preventDefault();
if (draggableImage) {
const x = e.clientX - dragOffsetX;
const y = e.clientY - dragOffsetY;
draggableImage.style.position = 'fixed';
draggableImage.style.width = `${imageSize}px`;
draggableImage.style.height = `${imageSize}px`;
draggableImage.style.left = `${x}px`;
draggableImage.style.top = `${y}px`;
}
});
};

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

3. Speicher die script.js


Du kannst jetzt die index.html in deinem Browser öffnen und das Tool testen :)