<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wohnzimmer mit Sofas</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
padding: 30px;
max-width: 90%;
width: 100%;
text-align: center;
}
.loading-spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #3b82f6;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-2xl font-bold text-gray-800 mb-4">Dein generiertes Wohnzimmer</h1>
<p class="text-gray-600 mb-6">Hier ist ein Bild, das deine Beschreibung eines Wohnzimmers mit rechtwinklig angeordneten Sofas darstellt:</p>
<div id="image-container">
<div class="loading-spinner"></div>
<p class="text-gray-500 mt-2">Bild wird generiert...</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const imageContainer = document.getElementById('image-container');
const prompt = "Ein modernes Wohnzimmer mit zwei beigen Sofas, die rechtwinklig zueinander stehen. Ein Sofa steht an der Wand, das andere Sofa ist senkrecht dazu angeordnet und bildet eine L-Form. Der Raum ist hell und einladend, mit einem Teppich und einem Couchtisch.";
try {
// Generiere das Bild mit der Imagen API
const payload = { instances: { prompt: prompt }, parameters: { "sampleCount": 1} };
const apiKey = ""; // Wenn Sie andere Modelle als imagen-3.0-generate-002 verwenden möchten, geben Sie hier einen API-Schlüssel an. Andernfalls lassen Sie dies unverändert.
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const result = await response.json();
if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
const imageUrl = `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
imageContainer.innerHTML = `<img src="${imageUrl}" alt="Wohnzimmer mit rechtwinkligen Sofas">`;
} else {
imageContainer.innerHTML = `<p class="text-red-500">Fehler beim Generieren des Bildes. Bitte versuchen Sie es später erneut.</p>`;
console.error('Unerwartete Antwortstruktur:', result);
}
} catch (error) {
imageContainer.innerHTML = `<p class="text-red-500">Fehler beim Generieren des Bildes: ${error.message}</p>`;
console.error('Fehler bei der API-Anfrage:', error);
}
});
</script>
</body>
</html>
