Navbar and menu improvements

app.css

@@ -34,7 +34,7 @@
 }
 .gallery, .gallery .grid-wrap {
   height: calc(100vh - 360px);
-  max-height: calc(100vh - 360px);
+  max-height: none;
 }
 
 .icon-button {
@@ -45,6 +45,50 @@
   max-height: calc(100vh - 480px);
 }
 
+#intro {
+  margin-bottom: 8px !important;
+}
+#intro > div {
+  display: flex;
+}
+#intro > div > h1 > span {
+  font-style: italic;
+  color: #047857 !important;
+}
+#intro > div > h1 > span:is(.dark *) {
+  color: #10b981 !important;
+}
+#intro > div > svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  margin-left: 0.5rem;
+  align-self: center;
+  fill: #047857 !important;
+  animation: spin 3s linear infinite reverse;
+}
+#intro > div > svg:is(.dark *) {
+  fill: #10b981 !important;
+}
+#intro nav {
+  display: flex;
+  column-gap: 0.5rem;
+}
+#intro nav a, #intro nav span {
+  white-space: nowrap;
+  font-family: monospace;
+}
+#intro nav span {
+  font-weight: 500;
+  color: var(--body-text-color);
+}
+#intro nav a {
+  color: var(--body-text-color-subdued);
+}
+#intro nav a:hover {
+  color: var(--body-text-color);
+}
+
 .popover {
   position: relative;
 }
@@ -70,39 +114,9 @@
   content: 'Clear gallery';
 }
 .popover#refresh:hover::after {
-  /* see config.py for default seed */
   content: var(--seed, "-1");
 }
 
-#intro {
-  margin-bottom: 8px !important;
-}
-#intro > div {
-  display: flex;
-}
-#intro > div > h1 > span {
-  font-style: italic;
-  color: #047857 !important;
-}
-#intro > div > h1 > span:is(.dark *) {
-  color: #10b981 !important;
-}
-#intro > div > svg {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-top: 0.25rem;
-  margin-left: 0.5rem;
-  align-self: center;
-  fill: #047857 !important;
-  animation: spin 3s linear infinite reverse;
-}
-#intro > div > svg:is(.dark *) {
-  fill: #10b981 !important;
-}
-@keyframes spin {
-  100% { transform: rotate(360deg); }
-}
-
 .tabs, .tabitem, .tab-nav, .tab-nav > .selected {
   border-width: 0px;
 }
@@ -118,3 +132,7 @@
 .tab-nav > button {
   padding-bottom: 8px;
 }
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}

app.js

@@ -1,12 +1,10 @@
 () =>{
   const menu = document.querySelector("#menu");
   const menuButton = menu.querySelector("button");
-  const menuSpan = menuButton.querySelector("span:first-child");
   const content = document.querySelector("#content");
 
   const updateMenu = () => {
     const isOpen = menuButton.classList.contains("open");
-    menuSpan.textContent = isOpen ? "Hide menu" : "Show menu";
     content.style.display = isOpen ? "none" : "flex";
   };
 

app.py

@@ -128,7 +128,7 @@ with gr.Blocks(
     with gr.Accordion(
         elem_classes=["accordion"],
         elem_id="menu",
-        label="Show menu",
+        label="Menu",
         open=False,
     ):
         with gr.Tabs():
@@ -324,28 +324,26 @@ with gr.Blocks(
                             value=False,
                         )
 
-            with gr.TabItem("ℹ️ Usage"):
-                gr.Markdown(read_file("usage.md"), elem_classes=["markdown"])
-
     # Main content
     with gr.Column(elem_id="content"):
         with gr.Group():
             output_images = gr.Gallery(
                 elem_classes=["gallery"],
                 show_share_button=False,
+                object_fit="cover",
                 interactive=False,
                 show_label=False,
-                object_fit="cover",
                 label="Output",
                 format="png",
                 columns=2,
             )
             prompt = gr.Textbox(
                 placeholder="corgi, beach, 8k",
+                autoscroll=False,
                 show_label=False,
                 label="Prompt",
-                value=None,
-                lines=2,
+                max_lines=3,
+                lines=3,
             )
 
         # Buttons

partials/intro.html

@@ -7,14 +7,18 @@
       <path d="M7.48877 6.75C7.29015 6.75 7.09967 6.82902 6.95923 6.96967C6.81879 7.11032 6.73989 7.30109 6.73989 7.5C6.73989 7.69891 6.81879 7.88968 6.95923 8.03033C7.09967 8.17098 7.29015 8.25 7.48877 8.25C7.68738 8.25 7.87786 8.17098 8.0183 8.03033C8.15874 7.88968 8.23764 7.69891 8.23764 7.5C8.23764 7.30109 8.15874 7.11032 8.0183 6.96967C7.87786 6.82902 7.68738 6.75 7.48877 6.75ZM7.8632 0C11.2331 0 11.3155 2.6775 9.54818 3.5625C8.80679 3.93 8.47728 4.7175 8.335 5.415C8.69446 5.565 9.00899 5.7975 9.24863 6.0975C12.0195 4.5975 15 5.19 15 7.875C15 11.25 12.3265 11.325 11.4428 9.5475C11.0684 8.805 10.2746 8.475 9.57813 8.3325C9.42836 8.6925 9.19621 9 8.89665 9.255C10.3869 12.0225 9.79531 15 7.11433 15C3.74438 15 3.67698 12.315 5.44433 11.43C6.17823 11.0625 6.50774 10.2825 6.65751 9.5925C6.29056 9.4425 5.96855 9.2025 5.72891 8.9025C2.96555 10.3875 0 9.8025 0 7.125C0 3.75 2.666 3.6675 3.54967 5.445C3.92411 6.1875 4.71043 6.51 5.40689 6.6525C5.54918 6.2925 5.78882 5.9775 6.09586 5.7375C4.60559 2.97 5.1972 0 7.8632 0Z"></path>
     </svg>
   </div>
-  <p>
-    Image generation studio on 🤗
-    <a href="https://huggingface.co/spaces/zero-gpu-explorers/README" target="_blank" rel="noopener noreferrer">ZeroGPU</a>
-    <a href="https://adamelliotfields-diffusion.hf.space" target="_blank" rel="noopener noreferrer">
-      <svg style="display: inline-block" width="16px" height="16px" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 1.75H9.75C9.88807 1.75 10 1.86193 10 2V4.25C10 4.38807 9.88807 4.5 9.75 4.5C9.61193 4.5 9.5 4.38807 9.5 4.25V2.60355L6.42678 5.67678C6.32915 5.77441 6.17085 5.77441 6.07322 5.67678C5.97559 5.57915 5.97559 5.42085 6.07322 5.32322L9.14645 2.25H7.5C7.36193 2.25 7.25 2.13807 7.25 2C7.25 1.86193 7.36193 1.75 7.5 1.75Z" fill="currentColor"></path>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2.5C6 2.22386 5.77614 2 5.5 2H2.69388C2.50985 2 2.33336 2.07311 2.20323 2.20323C2.0731 2.33336 2 2.50986 2 2.69389V8.93885C2 9.12288 2.0731 9.29933 2.20323 9.42953C2.33336 9.55963 2.50985 9.63273 2.69388 9.63273H8.93884C9.12287 9.63273 9.29941 9.55963 9.42951 9.42953C9.55961 9.29933 9.63271 9.12288 9.63271 8.93885V6.5C9.63271 6.22386 9.40885 6 9.13271 6C8.85657 6 8.63271 6.22386 8.63271 6.5V8.63273H3V3H5.5C5.77614 3 6 2.77614 6 2.5Z" fill="currentColor" fill-opacity="0.3"></path>
-      </svg>
-    </a>
-  </p>
+  <div>
+    <nav>
+      <span>1.5</span>
+      <a href="https://huggingface.co/spaces/adamelliotfields/diffusion-xl" target="_blank" rel="noopener noreferrer">XL</a>
+      <a href="https://huggingface.co/spaces/adamelliotfields/diffusion-flux" target="_blank" rel="noopener noreferrer">FLUX.1</a>
+      <a href="https://huggingface.co/spaces/adamelliotfields/diffusion/blob/main/DOCS.md" target="_blank" rel="noopener noreferrer">Docs</a>
+      <a href="https://adamelliotfields-diffusion.hf.space" target="_blank" rel="noopener noreferrer">
+        <svg style="display: inline-block" width="14px" height="14px" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 1.75H9.75C9.88807 1.75 10 1.86193 10 2V4.25C10 4.38807 9.88807 4.5 9.75 4.5C9.61193 4.5 9.5 4.38807 9.5 4.25V2.60355L6.42678 5.67678C6.32915 5.77441 6.17085 5.77441 6.07322 5.67678C5.97559 5.57915 5.97559 5.42085 6.07322 5.32322L9.14645 2.25H7.5C7.36193 2.25 7.25 2.13807 7.25 2C7.25 1.86193 7.36193 1.75 7.5 1.75Z" fill="currentColor"></path>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2.5C6 2.22386 5.77614 2 5.5 2H2.69388C2.50985 2 2.33336 2.07311 2.20323 2.20323C2.0731 2.33336 2 2.50986 2 2.69389V8.93885C2 9.12288 2.0731 9.29933 2.20323 9.42953C2.33336 9.55963 2.50985 9.63273 2.69388 9.63273H8.93884C9.12287 9.63273 9.29941 9.55963 9.42951 9.42953C9.55961 9.29933 9.63271 9.12288 9.63271 8.93885V6.5C9.63271 6.22386 9.40885 6 9.13271 6C8.85657 6 8.63271 6.22386 8.63271 6.5V8.63273H3V3H5.5C5.77614 3 6 2.77614 6 2.5Z" fill="currentColor" fill-opacity="0.3"></path>
+        </svg>
+      </a>
+    </nav>
+  </div>
 </div>