Spaces:
Running
Running
Update index.html
Browse files- index.html +4 -3
index.html
CHANGED
|
@@ -75,7 +75,7 @@
|
|
| 75 |
|
| 76 |
#gallery {
|
| 77 |
display: grid;
|
| 78 |
-
grid-template-columns: repeat(auto-fit, minmax(
|
| 79 |
gap: 1.5rem;
|
| 80 |
margin-top: 2rem;
|
| 81 |
}
|
|
@@ -89,6 +89,7 @@
|
|
| 89 |
|
| 90 |
.image-card img {
|
| 91 |
width: 100%;
|
|
|
|
| 92 |
border-radius: 8px;
|
| 93 |
object-fit: cover;
|
| 94 |
}
|
|
@@ -144,7 +145,7 @@
|
|
| 144 |
<body>
|
| 145 |
<div class="container">
|
| 146 |
<h1>DALL·E Mini by <a href="https://www.craiyon.com/" target="_blank">Craiyon</a></h1>
|
| 147 |
-
<p>Generate 4 AI images
|
| 148 |
|
| 149 |
<div class="input-area">
|
| 150 |
<input id="prompt" type="text" placeholder="E.g. astronaut riding a unicorn in space" />
|
|
@@ -184,7 +185,7 @@
|
|
| 184 |
});
|
| 185 |
|
| 186 |
const data = await res.json();
|
| 187 |
-
const images = (data.images || []).slice(0, 4);
|
| 188 |
|
| 189 |
if (images.length > 0) {
|
| 190 |
gallery.innerHTML = images.map((img, i) => `
|
|
|
|
| 75 |
|
| 76 |
#gallery {
|
| 77 |
display: grid;
|
| 78 |
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
| 79 |
gap: 1.5rem;
|
| 80 |
margin-top: 2rem;
|
| 81 |
}
|
|
|
|
| 89 |
|
| 90 |
.image-card img {
|
| 91 |
width: 100%;
|
| 92 |
+
aspect-ratio: 16 / 9;
|
| 93 |
border-radius: 8px;
|
| 94 |
object-fit: cover;
|
| 95 |
}
|
|
|
|
| 145 |
<body>
|
| 146 |
<div class="container">
|
| 147 |
<h1>DALL·E Mini by <a href="https://www.craiyon.com/" target="_blank">Craiyon</a></h1>
|
| 148 |
+
<p>Generate 4 AI images (YouTube-ready size) and download them</p>
|
| 149 |
|
| 150 |
<div class="input-area">
|
| 151 |
<input id="prompt" type="text" placeholder="E.g. astronaut riding a unicorn in space" />
|
|
|
|
| 185 |
});
|
| 186 |
|
| 187 |
const data = await res.json();
|
| 188 |
+
const images = (data.images || []).slice(0, 4);
|
| 189 |
|
| 190 |
if (images.length > 0) {
|
| 191 |
gallery.innerHTML = images.map((img, i) => `
|