Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
|
@@ -219,6 +219,40 @@ css_and_html = """
|
|
| 219 |
.gr-form {
|
| 220 |
background-color: transparent !important;
|
| 221 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 222 |
</style>
|
| 223 |
|
| 224 |
<div id="app-header">
|
|
@@ -229,19 +263,19 @@ css_and_html = """
|
|
| 229 |
<p>Unleash your imagination with AI-powered generative art</p>
|
| 230 |
<div class="concept-container">
|
| 231 |
<div class="concept">
|
| 232 |
-
<
|
| 233 |
<div class="concept-description">Illustration Style</div>
|
| 234 |
</div>
|
| 235 |
<div class="concept">
|
| 236 |
-
<
|
| 237 |
<div class="concept-description">Line Art</div>
|
| 238 |
</div>
|
| 239 |
<div class="concept">
|
| 240 |
-
<
|
| 241 |
<div class="concept-description">Midjourney Style</div>
|
| 242 |
</div>
|
| 243 |
<div class="concept">
|
| 244 |
-
<
|
| 245 |
<div class="concept-description">Hanfu Anime</div>
|
| 246 |
</div>
|
| 247 |
</div>
|
|
|
|
| 219 |
.gr-form {
|
| 220 |
background-color: transparent !important;
|
| 221 |
}
|
| 222 |
+
.concept {
|
| 223 |
+
position: relative;
|
| 224 |
+
transition: transform 0.3s, box-shadow 0.3s;
|
| 225 |
+
border-radius: 15px;
|
| 226 |
+
overflow: hidden;
|
| 227 |
+
background: rgba(255, 255, 255, 0.1);
|
| 228 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
| 229 |
+
width: 150px;
|
| 230 |
+
height: 150px;
|
| 231 |
+
display: flex;
|
| 232 |
+
flex-direction: column;
|
| 233 |
+
justify-content: center;
|
| 234 |
+
align-items: center;
|
| 235 |
+
}
|
| 236 |
+
.concept:hover {
|
| 237 |
+
transform: translateY(-10px) rotate(3deg);
|
| 238 |
+
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
|
| 239 |
+
}
|
| 240 |
+
.concept-emoji {
|
| 241 |
+
font-size: 60px;
|
| 242 |
+
margin-bottom: 10px;
|
| 243 |
+
}
|
| 244 |
+
.concept-description {
|
| 245 |
+
background-color: rgba(110, 72, 170, 0.8);
|
| 246 |
+
color: white;
|
| 247 |
+
padding: 10px;
|
| 248 |
+
font-size: 0.9em;
|
| 249 |
+
text-align: center;
|
| 250 |
+
width: 100%;
|
| 251 |
+
position: absolute;
|
| 252 |
+
bottom: 0;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
|
| 256 |
</style>
|
| 257 |
|
| 258 |
<div id="app-header">
|
|
|
|
| 263 |
<p>Unleash your imagination with AI-powered generative art</p>
|
| 264 |
<div class="concept-container">
|
| 265 |
<div class="concept">
|
| 266 |
+
<div class="concept-emoji">🎨</div>
|
| 267 |
<div class="concept-description">Illustration Style</div>
|
| 268 |
</div>
|
| 269 |
<div class="concept">
|
| 270 |
+
<div class="concept-emoji">✏️</div>
|
| 271 |
<div class="concept-description">Line Art</div>
|
| 272 |
</div>
|
| 273 |
<div class="concept">
|
| 274 |
+
<div class="concept-emoji">🌌</div>
|
| 275 |
<div class="concept-description">Midjourney Style</div>
|
| 276 |
</div>
|
| 277 |
<div class="concept">
|
| 278 |
+
<div class="concept-emoji">👘</div>
|
| 279 |
<div class="concept-description">Hanfu Anime</div>
|
| 280 |
</div>
|
| 281 |
</div>
|