<!DOCTYPE
html>
<
html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bildgenerator-Spielerei</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#image {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<button onclick="generateImage()">Generieren</button>
<img id="image" src="" alt="Generiertes Bild">
<script>
async function generateImage() {
const apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
try {
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`, {
mode: 'no-cors', method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
'key' : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
body: JSON.stringify({
prompt: "Testbild mit einer Sonneblume",
model: 'gemini-1.5-flash',
aspect_ratio: '16:9',
style: 'photorealistic'
}),
});
if (response.ok) {
const result = await response.json();
document.getElementById('image').src = result.image_url;
} else {
console.error('Fehler bei der
API-Anfrage:', response.statusText);
}
} catch (error) {
console.error('Fehler bei der Bilderzeugung:', error);
}
}
</script>
</body>
</
html>