File size: 2,339 Bytes
4d610ee cbd4caf 4d610ee a4b4c50 4d610ee |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<style>
body {
background-color: #1a1a1a;
color: #ffffff;
font-family: Arial, sans-serif;
}
input {
background-color: #333;
color: #fff;
border: 1px solid #555;
padding: 5px;
}
button {
background-color: #ff0000;
color: #ffffff;
border: none;
padding: 10px 15px;
cursor: pointer;
}
button:disabled {
background-color: #800000;
cursor: not-allowed;
}
</style>
<h1>Lego-Man AI Image Generator</h1>
<div>
<input id="promptInput" placeholder="Enter image description..." style="width:300px;">
<button id="generateBtn" onclick="generateImages()">Generate 6 Lego-Man Images</button>
</div>
<div id="imageGrid" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:20px;">
<img id="img1" style="width:100%; aspect-ratio:1; object-fit:cover;">
<img id="img2" style="width:100%; aspect-ratio:1; object-fit:cover;">
<img id="img3" style="width:100%; aspect-ratio:1; object-fit:cover;">
<img id="img4" style="width:100%; aspect-ratio:1; object-fit:cover;">
<img id="img5" style="width:100%; aspect-ratio:1; object-fit:cover;">
<img id="img6" style="width:100%; aspect-ratio:1; object-fit:cover;">
</div>
<script>
async function generateImages() {
generateBtn.disabled = true;
generateBtn.textContent = "⏳ Generating...";
let prompt = promptInput.value + " in lego-man art style";
for (let i = 1; i <= 6; i++) {
let imgEl = document.getElementById(`img${i}`);
imgEl.src = "https://placehold.co/400x400?text=Generating...";
generateImage(prompt).then(dataUrl => {
imgEl.src = dataUrl;
});
}
generateBtn.disabled = false;
generateBtn.textContent = "Generate 6 Lego-Man Images";
}
</script>
<!-- For Hugging Face hosting, we need to add this script -->
<script src="https://cdn.jsdelivr.net/npm/@huggingface/inference@1.5.2/dist/index.min.js"></script>
<script>
// Initialize the Hugging Face Inference SDK
const HF = new HfInference(Process.env);
// Override the generateImage function to use Hugging Face's text-to-image model
async function generateImage(prompt) {
const result = await HF.textToImage({
inputs: prompt,
model: "stabilityai/stable-diffusion-2-1",
});
return URL.createObjectURL(result);
}
</script> |