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)
Die index.html beinhaltet u.A.:
→ <h1> Überschrift (optional)
→ <p> Anleitungstext (optional)
→ <input> zum Prompt eingeben und <button> zum Generieren
→ <button> zum togglen des Default Cursors
1. Öffne die index.html
Du kannst den Code kopieren und in deine Datei einfügen:
<!DOCTYPE html>
<html>
<head>
<title>Reime</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Reim Generator</h1>
<p>Lasse deine Texte als Reime generieren.<br>
Füge für jeden Schritt deinen Text ein und klicke auf Generieren.</p>
<div id="inputsContainer">
<div/>
<textarea class="inputField" placeholder="Schritt 1"></textarea>
<button class="generateButton">Generieren</button>
<p class="output"></p>
</div>
</div>
<button id="addButton">Nächster Schritt</button>
<script src="js/script.js"></script>
</body>
</html>
2. Speicher die index.html
1. Öffne die style.css
Die style.css beinhaltet:
→ *{} Zücksetzen auf den Default Style
→ h1{}, p{}, textarea{}, button{} 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;
}
textarea {
margin-left: 20px;
width: 200px;
height: 18px;
}
button {
margin-left: 20px;
}
2. Speicher die style.css
Die script.js beinhaltet:
→ generateMessage: Ruft generierten Text von einer API ab und fügt ihn der Seite hinzu
→ createInput & addInput: Dupliziert das Input-Feld, den Generieren-Button und den Output-Tag wenn auf den Hinzufügen-Button gedrückt wird.
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 generateButtons = document.querySelectorAll('.generateButton');
const outputElements = document.querySelectorAll('.output');
const inputFields = document.querySelectorAll('.inputField');
const addButton = document.querySelector('#addButton');
const inputsContainer = document.querySelector('#inputsContainer');
function setLoadingState(button) {
button.textContent = "Lädt...";
}
function resetButtonState(button, text) {
button.textContent = text;
}
async function generateMessage(outputElement, inputElement, generateButton) {
setLoadingState(generateButton);
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: 'mache einen kurzen Kreuzreim aus folgenden Wörtern:' +
inputElement.value
}],
max_tokens: 200
})
};
try {
const response = await fetch('https://api.openai.com/v1/chat/completions', options);
const data = await response.json();
console.log(data);
outputElement.textContent = data.choices[0].message.content;
document.body.style.backgroundColor = outputElement.textContent;
resetButtonState(generateButton, "Generieren");
} catch (error) {
console.error(error);
resetButtonState(generateButton, "Generieren");
}
}
function createInput() {
const newInputDiv = document.createElement('div');
newInputDiv.innerHTML = `
<textarea class="inputField"></textarea>
<br class="newSpace">
<button class="generateButton">Generieren</button>
<p class="output"></p>
`;
const newInput = newInputDiv.querySelector('.inputField');
const newGenerateButton = newInputDiv.querySelector('.generateButton');
const newOutput = newInputDiv.querySelector('.output');
newGenerateButton.addEventListener('click', function() {
generateMessage(newOutput, newInput, newGenerateButton);
});
return newInputDiv;
}
function addInput() {
const newInputDiv = createInput();
inputsContainer.appendChild(newInputDiv);
}
generateButtons.forEach(function(button, index) {
button.addEventListener('click', function() {
generateMessage(outputElements[index], inputFields[index], button);
});
});
addButton.addEventListener('click', addInput);
2. Füge deinen API Key in dieses Feld ein: "DEIN_API_KEY"
3. Speicher die script.js