gradio 5.21.0

README.md

@@ -5,7 +5,7 @@ colorFrom: yellow
 colorTo: purple
 sdk: gradio
 python_version: 3.10.13
-sdk_version: 5.20.1
+sdk_version: 5.21.0
 app_file: app.py
 pinned: false
 short_description: Transform Your Images into Mesmerizing Hexagon Grids

app.py

@@ -641,7 +641,7 @@ def getVersions():
 run_lora.zerogpu = True
 gr.set_static_paths(paths=["images/","images/images","images/prerendered","LUT/","fonts/", "assets/"])
 title = "Hex Game Maker"
-with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty', delete_cache=(43200, 43200), head_paths="head.htm") as app:
+with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty', delete_cache=(43200, 43200), head_paths="head.htm") as app:
     with gr.Row():
         gr.Markdown("""
         # Hex Game Maker Development Features

style_20250128.css → style_20250314.css

@@ -1,128 +1,128 @@
-.interface-wrapper {
-    max-width: 1024px;
-    margin: 0 auto;
-}
-
-.centered {
-    margin: 0 auto;
-    display: block;
-}
-
-.solid {
-    opacity: 1.0 !important;
-    height: auto !important;
-}
-
-.intro {
-    font-size: 1.2em !important;
-    font-weight: bold;
-    text-align: center;
-    background-color: rgba(242, 218, 163, 0.62);
-}
-
-.dark .gradio-container.gradio-container-5-20-1 .contain .intro {
-    background-color: rgba(41, 18, 5, 0.38) !important;
-}
-
-.small {
-    font-size: smaller !important;
-    text-align: center;
-}
-
-.imgcontainer img {
-    object-fit: contain !important;
-}
-
-#examples {
-    font-weight: bolder;
-}
-
---background-fill-primary: #FBCE50 !important;
-#col-container {
-    max-width: 1024px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-a {
-    text-decoration-line: underline;
-    font-weight: 600;
-}
-
-#btn-generate {
-    background-image: linear-gradient(to right bottom, rgb(157, 255, 157), rgb(229, 255, 235));
-    color: var(--block-background-fill);
-}
-
-    #btn-generate:hover {
-        background-image: linear-gradient(to right bottom, rgb(229, 255, 229), rgb(255, 255, 255));
-    }
-
-    #btn-generate:active {
-        background-image: linear-gradient(to right bottom, rgb(229, 255, 235), rgb(157, 255, 157));
-    }
-
-#versions {
-    margin-top: 1em;
-    width: 100%;
-    text-align: center;
-}
-
-.small-btn {
-    max-width: 75px;
-}
-
-#gallery .thumbnails {
-    flex-direction: column !important;
-    display: inline-flex !important;
-    flex-wrap: wrap !important;
-    position: relative !important;
-}
-
-#gallery caption.caption {
-    flex-direction: row !important;
-    display: inline-flex !important;
-    flex-wrap: wrap;
-    white-space: unset !important;
-}
-
-#gallery .image-button img.with-caption {
-    object-fit: cover !important;
-    object-position: center !important;
-}
-
-#gallery button.preview {
-    position: relative !important;
-}
-
-.gradio-container::before {
-    content: ' ';
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.25;
-    background-image: url('gradio_api/file=./images/logo.png');
-    background-repeat: no-repeat;
-    background-position: 50% 0;
-    background-size: cover;
-    background-color: rgba(0,0,0,0.9);
-}
-
-#component-0, #component-1 {
-    opacity: 0.9;
-}
-
-#excluded_colors {
-    width: 95%;
-    margin: 0 auto;
-    font-size: smaller;
-}
-
-@media only screen and (min-width: 1920px) {
-    .gradio-container, .gradio-container::before {
-        max-width: 1920px !important;
-    }
+.interface-wrapper {
+    max-width: 1024px;
+    margin: 0 auto;
+}
+
+.centered {
+    margin: 0 auto;
+    display: block;
+}
+
+.solid {
+    opacity: 1.0 !important;
+    height: auto !important;
+}
+
+.intro {
+    font-size: 1.2em !important;
+    font-weight: bold;
+    text-align: center;
+    background-color: rgba(242, 218, 163, 0.62);
+}
+
+.dark .gradio-container.gradio-container-5-21.0 .contain .intro {
+    background-color: rgba(41, 18, 5, 0.38) !important;
+}
+
+.small {
+    font-size: smaller !important;
+    text-align: center;
+}
+
+.imgcontainer img {
+    object-fit: contain !important;
+}
+
+#examples {
+    font-weight: bolder;
+}
+
+--background-fill-primary: #FBCE50 !important;
+#col-container {
+    max-width: 1024px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+a {
+    text-decoration-line: underline;
+    font-weight: 600;
+}
+
+#btn-generate {
+    background-image: linear-gradient(to right bottom, rgb(157, 255, 157), rgb(229, 255, 235));
+    color: var(--block-background-fill);
+}
+
+    #btn-generate:hover {
+        background-image: linear-gradient(to right bottom, rgb(229, 255, 229), rgb(255, 255, 255));
+    }
+
+    #btn-generate:active {
+        background-image: linear-gradient(to right bottom, rgb(229, 255, 235), rgb(157, 255, 157));
+    }
+
+#versions {
+    margin-top: 1em;
+    width: 100%;
+    text-align: center;
+}
+
+.small-btn {
+    max-width: 75px;
+}
+
+#gallery .thumbnails {
+    flex-direction: column !important;
+    display: inline-flex !important;
+    flex-wrap: wrap !important;
+    position: relative !important;
+}
+
+#gallery caption.caption {
+    flex-direction: row !important;
+    display: inline-flex !important;
+    flex-wrap: wrap;
+    white-space: unset !important;
+}
+
+#gallery .image-button img.with-caption {
+    object-fit: cover !important;
+    object-position: center !important;
+}
+
+#gallery button.preview {
+    position: relative !important;
+}
+
+.gradio-container::before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.25;
+    background-image: url('gradio_api/file=./images/logo.png');
+    background-repeat: no-repeat;
+    background-position: 50% 0;
+    background-size: cover;
+    background-color: rgba(0,0,0,0.9);
+}
+
+#component-0, #component-1 {
+    opacity: 0.9;
+}
+
+#excluded_colors {
+    width: 95%;
+    margin: 0 auto;
+    font-size: smaller;
+}
+
+@media only screen and (min-width: 1920px) {
+    .gradio-container, .gradio-container::before {
+        max-width: 1920px !important;
+    }
 }