UI/UX touch-ups

README.md

@@ -4,7 +4,7 @@ emoji: 🌍
 colorFrom: indigo
 colorTo: red
 sdk: gradio
-sdk_version: 5.1.0
+sdk_version: 5.13.2
 app_file: app.py
 pinned: false
 license: mit

app.py

@@ -36,7 +36,7 @@ sr_model.load_weights(f'weights/RealESRGAN_x2.pth', download=False)
 @torch.inference_mode()
 @spaces.GPU(duration=120) 
 # Multimodal Understanding function
-def multimodal_understanding(image, question, seed, top_p, temperature):
+def multimodal_understanding(image, question, seed, top_p, temperature, progress=gr.Progress(track_tqdm=True)):
     # Clear CUDA cache before generating
     torch.cuda.empty_cache()
     
@@ -86,7 +86,8 @@ def generate(input_ids,
              parallel_size: int = 5,
              cfg_weight: float = 5,
              image_token_num_per_image: int = 576,
-             patch_size: int = 16):
+             patch_size: int = 16,
+             progress=gr.Progress(track_tqdm=True)):
     # Clear CUDA cache before generating
     torch.cuda.empty_cache()
     
@@ -141,7 +142,8 @@ def unpack(dec, width, height, parallel_size=5):
 def generate_image(prompt,
                    seed=None,
                    guidance=5,
-                   t2i_temperature=1.0):
+                   t2i_temperature=1.0,
+                   progress=gr.Progress(track_tqdm=True)):
     # Clear CUDA cache and avoid tracking gradients
     torch.cuda.empty_cache()
     # Set the seed for reproducible results
@@ -196,61 +198,66 @@ def image_upsample(img: Image.Image) -> Image.Image:
         
 
 # Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown(value="# Multimodal Understanding")
-    with gr.Row():
+css = '''
+.gradio-container {max-width: 960px !important}
+'''
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("# Janus Pro 7B")
+    with gr.Tab("Multimodal Understanding"):
+        gr.Markdown(value="## Multimodal Understanding")
         image_input = gr.Image()
         with gr.Column():
             question_input = gr.Textbox(label="Question")
-            und_seed_input = gr.Number(label="Seed", precision=0, value=42)
-            top_p = gr.Slider(minimum=0, maximum=1, value=0.95, step=0.05, label="top_p")
-            temperature = gr.Slider(minimum=0, maximum=1, value=0.1, step=0.05, label="temperature")
+            
+        understanding_button = gr.Button("Chat")
+        understanding_output = gr.Textbox(label="Response")
         
-    understanding_button = gr.Button("Chat")
-    understanding_output = gr.Textbox(label="Response")
-
-    examples_inpainting = gr.Examples(
-        label="Multimodal Understanding examples",
-        examples=[
-            [
-                "explain this meme",
-                "doge.png",
-            ],
-            [
-                "Convert the formula into latex code.",
-                "equation.png",
+        with gr.Accordion("Advanced options", open=False):
+                und_seed_input = gr.Number(label="Seed", precision=0, value=42)
+                top_p = gr.Slider(minimum=0, maximum=1, value=0.95, step=0.05, label="top_p")
+                temperature = gr.Slider(minimum=0, maximum=1, value=0.1, step=0.05, label="temperature")
+            
+        examples_inpainting = gr.Examples(
+            label="Multimodal Understanding examples",
+            examples=[
+                [
+                    "explain this meme",
+                    "doge.png",
+                ],
+                [
+                    "Convert the formula into latex code.",
+                    "equation.png",
+                ],
             ],
-        ],
-        inputs=[question_input, image_input],
-    )
+            inputs=[question_input, image_input],
+        )
     
-        
-    gr.Markdown(value="# Text-to-Image Generation")
+    with gr.Tab("Text-to-Image Generation"):
+        gr.Markdown(value="## Text-to-Image Generation")
 
+        prompt_input = gr.Textbox(label="Prompt. (Prompt in more detail can help produce better images!")
     
+        generation_button = gr.Button("Generate Images")
     
-    with gr.Row():
-        cfg_weight_input = gr.Slider(minimum=1, maximum=10, value=5, step=0.5, label="CFG Weight")
-        t2i_temperature = gr.Slider(minimum=0, maximum=1, value=1.0, step=0.05, label="temperature")
-
-    prompt_input = gr.Textbox(label="Prompt. (Prompt in more detail can help produce better images!")
-    seed_input = gr.Number(label="Seed (Optional)", precision=0, value=1234)
+        image_output = gr.Gallery(label="Generated Images", columns=2, rows=2)
 
-    generation_button = gr.Button("Generate Images")
-
-    image_output = gr.Gallery(label="Generated Images", columns=2, rows=2, height=300)
-
-    examples_t2i = gr.Examples(
-        label="Text to image generation examples.",
-        examples=[
-            "Master shifu racoon wearing drip attire as a street gangster.",
-            "The face of a beautiful girl",
-            "Astronaut in a jungle, cold color palette, muted colors, detailed, 8k",
-            "A cute and adorable baby fox with big brown eyes, autumn leaves in the background enchanting,immortal,fluffy, shiny mane,Petals,fairyism,unreal engine 5 and Octane Render,highly detailed, photorealistic, cinematic, natural colors.",
-            "The image features an intricately designed eye set against a circular backdrop adorned with ornate swirl patterns that evoke both realism and surrealism. At the center of attention is a strikingly vivid blue iris surrounded by delicate veins radiating outward from the pupil to create depth and intensity. The eyelashes are long and dark, casting subtle shadows on the skin around them which appears smooth yet slightly textured as if aged or weathered over time.\n\nAbove the eye, there's a stone-like structure resembling part of classical architecture, adding layers of mystery and timeless elegance to the composition. This architectural element contrasts sharply but harmoniously with the organic curves surrounding it. Below the eye lies another decorative motif reminiscent of baroque artistry, further enhancing the overall sense of eternity encapsulated within each meticulously crafted detail. \n\nOverall, the atmosphere exudes a mysterious aura intertwined seamlessly with elements suggesting timelessness, achieved through the juxtaposition of realistic textures and surreal artistic flourishes. Each component\u2014from the intricate designs framing the eye to the ancient-looking stone piece above\u2014contributes uniquely towards creating a visually captivating tableau imbued with enigmatic allure.",
-        ],
-        inputs=prompt_input,
-    )
+        with gr.Accordion("Advanced options", open=False):
+            with gr.Row():
+                cfg_weight_input = gr.Slider(minimum=1, maximum=10, value=5, step=0.5, label="CFG Weight")
+                t2i_temperature = gr.Slider(minimum=0, maximum=1, value=1.0, step=0.05, label="temperature")
+            seed_input = gr.Number(label="Seed (Optional)", precision=0, value=1234)
+    
+        examples_t2i = gr.Examples(
+            label="Text to image generation examples.",
+            examples=[
+                "Master shifu racoon wearing drip attire as a street gangster.",
+                "The face of a beautiful girl",
+                "Astronaut in a jungle, cold color palette, muted colors, detailed, 8k",
+                "A cute and adorable baby fox with big brown eyes, autumn leaves in the background enchanting,immortal,fluffy, shiny mane,Petals,fairyism,unreal engine 5 and Octane Render,highly detailed, photorealistic, cinematic, natural colors.",
+                "The image features an intricately designed eye set against a circular backdrop adorned with ornate swirl patterns that evoke both realism and surrealism. At the center of attention is a strikingly vivid blue iris surrounded by delicate veins radiating outward from the pupil to create depth and intensity. The eyelashes are long and dark, casting subtle shadows on the skin around them which appears smooth yet slightly textured as if aged or weathered over time.\n\nAbove the eye, there's a stone-like structure resembling part of classical architecture, adding layers of mystery and timeless elegance to the composition. This architectural element contrasts sharply but harmoniously with the organic curves surrounding it. Below the eye lies another decorative motif reminiscent of baroque artistry, further enhancing the overall sense of eternity encapsulated within each meticulously crafted detail. \n\nOverall, the atmosphere exudes a mysterious aura intertwined seamlessly with elements suggesting timelessness, achieved through the juxtaposition of realistic textures and surreal artistic flourishes. Each component\u2014from the intricate designs framing the eye to the ancient-looking stone piece above\u2014contributes uniquely towards creating a visually captivating tableau imbued with enigmatic allure.",
+            ],
+            inputs=prompt_input,
+        )
     
     understanding_button.click(
         multimodal_understanding,