nice ui

local_app.py

@@ -28,11 +28,10 @@ API_KEY = os.environ.get("API_KEY", None)
 print("CUDA version:", torch.version.cuda)
 print("loading pipe")
 compiled = False
-    
-preprocessor = Preprocessor()
-preprocessor.load("NormalBae")
 
 if gr.NO_RELOAD:
+    preprocessor = Preprocessor()
+    preprocessor.load("NormalBae")
     torch.cuda.max_memory_allocated(device="cuda")
 
     # Controlnet Normal
@@ -66,16 +65,7 @@ if gr.NO_RELOAD:
     
     vae = AutoencoderKL.from_single_file(vae_url, torch_dtype=torch.float16).to("cuda")
     vae.to(memory_format=torch.channels_last) 
-    
-    # pipe = StableDiffusionControlNetPipeline.from_pretrained(
-    #     base_model_id,
-    #     safety_checker=None,
-    #     controlnet=controlnet,
-    #     scheduler=scheduler,
-    #     vae=vae,
-    #     torch_dtype=torch.float16,
-    # ).to("cuda")
-    
+
     pipe = StableDiffusionControlNetPipeline.from_single_file(
         base_model_url,
         controlnet=controlnet,
@@ -96,15 +86,9 @@ if gr.NO_RELOAD:
     pipe.load_textual_inversion("broyang/hentaidigitalart_v20", weight_name="HDA_Shibari.pt", token="HDA_Shibari")
     pipe.to("cuda")
     
-    # experimental speedup?
-    # pipe.compile()
-    # torch.cuda.empty_cache()
-    # gc.collect()
     print("---------------Loaded controlnet pipeline---------------") 
 
     # @spaces.GPU(duration=12)
-    # pipe.enable_xformers_memory_efficient_attention()
-    # pipe.unet = torch.compile(pipe.unet, mode="reduce-overhead", fullgraph=True)
     pipe.unet.set_attn_processor(AttnProcessor2_0())
     torch.cuda.empty_cache()
     gc.collect()
@@ -161,7 +145,7 @@ style_list = [
         "prompt": ""
     },
     {
-        "name": "Minimalistic",
+        "name": "Minimal",
         "prompt": "Minimalist interior design, clean lines, neutral colors, uncluttered space, functional furniture, lots of natural light"
     },
     {
@@ -169,12 +153,12 @@ style_list = [
         "prompt": "Bohemian chic interior, eclectic mix of patterns and textures, vintage furniture, plants, woven textiles, warm earthy colors"
     },
     {
-        "name": "Saudi Prince Gold",
-        "prompt": "Opulent gold interior, luxurious ornate furniture, crystal chandeliers, rich fabrics, marble floors, intricate Arabic patterns"
+        "name": "Farmhouse",
+        "prompt": "Modern farmhouse interior, rustic wood elements, shiplap walls, neutral color palette, industrial accents, cozy textiles"
     },
     {
-        "name": "Modern Farmhouse",
-        "prompt": "Modern farmhouse interior, rustic wood elements, shiplap walls, neutral color palette, industrial accents, cozy textiles"
+        "name": "Saudi Prince",
+        "prompt": "Opulent gold interior, luxurious ornate furniture, crystal chandeliers, rich fabrics, marble floors, intricate Arabic patterns"
     },
     {
         "name": "Neoclassical",
@@ -185,11 +169,11 @@ style_list = [
         "prompt": "Eclectic interior design, mix of styles and eras, bold color combinations, diverse furniture pieces, unique art objects"
     },
     {
-        "name": "Parisian White",
+        "name": "Parisian",
         "prompt": "Parisian apartment interior, all-white color scheme, ornate moldings, herringbone wood floors, elegant furniture, large windows"
     },
     {
-        "name": "Hollywood Glam",
+        "name": "Hollywood",
         "prompt": "Hollywood Regency interior, glamorous and luxurious, bold colors, mirrored surfaces, velvet upholstery, gold accents"
     },
     {
@@ -197,27 +181,27 @@ style_list = [
         "prompt": "Scandinavian interior design, light wood tones, white walls, minimalist furniture, cozy textiles, hygge atmosphere"
     },
     {
-        "name": "Japanese",
-        "prompt": "Traditional Japanese interior, tatami mats, shoji screens, low furniture, zen garden view, minimalist decor, natural materials"
+        "name": "Beach",
+        "prompt": "Coastal beach house interior, light blue and white color scheme, weathered wood, nautical accents, sheer curtains, ocean view"
     },
     {
-        "name": "Texas Cowboy",
-        "prompt": "Western cowboy interior, rustic wood beams, leather furniture, cowhide rugs, antler chandeliers, southwestern patterns"
+        "name": "Japanese",
+        "prompt": "Traditional Japanese interior, tatami mats, shoji screens, low furniture, zen garden view, minimalist decor, natural materials"
     },
-    {
+    { 
         "name": "Midcentury Modern",
         "prompt": "Mid-century modern interior, 1950s-60s style furniture, organic shapes, warm wood tones, bold accent colors, large windows"
     },
-    {
-        "name": "Beach",
-        "prompt": "Coastal beach house interior, light blue and white color scheme, weathered wood, nautical accents, sheer curtains, ocean view"
-    },
     {
         "name": "Retro Futurism",
         "prompt": "Neon (atompunk world) retro cyberpunk background",
     },
     {
-        "name": "The Matrix",
+        "name": "Texan",
+        "prompt": "Western cowboy interior, rustic wood beams, leather furniture, cowhide rugs, antler chandeliers, southwestern patterns"
+    },
+    {
+        "name": "Matrix",
         "prompt": "Futuristic cyberpunk interior, neon accent lighting, holographic plants, sleek black surfaces, advanced gaming setup, transparent screens, Blade Runner inspired decor, high-tech minimalist furniture"
     }
 ] 
@@ -229,27 +213,40 @@ def apply_style(style_name):
     if style_name in styles:
         p = styles.get(style_name, "boho chic")
     return p
-
-    
+        
 css = """
-h1 {
+h1, h2, h3 {
     text-align: center;
-    display:block;
+    display: block;
 }
-h2 {
-    text-align: center;
-    display:block;
+
+.gradio-container {
+    max-width: 1200px !important;
 }
-h3 {
-    text-align: center;
-    display:block;
+
+footer {
+    visibility: hidden;
+}
+
+.gr-image {
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    width: 100%;
+    height: 512px;
+    overflow: hidden;
+}
+
+.gr-image img {
+    width: 100%;
+    height: 100%; 
+    object-fit: cover;
+    object-position: center;
 }
-.gradio-container{max-width: 1800px !important}
-footer {visibility: hidden}
 """
 with gr.Blocks(theme="bethecloud/storj_theme", css=css) as demo:
     #############################################################################
-    with gr.Row():
+    with gr.Row(): 
         with gr.Accordion("Advanced options", open=show_options, visible=show_options):
             num_images = gr.Slider(
                 label="Images", minimum=1, maximum=4, value=1, step=1
@@ -290,11 +287,11 @@ with gr.Blocks(theme="bethecloud/storj_theme", css=css) as demo:
     #     gr.Text(label="Interior Design Style Examples", value="Eclectic, Maximalist, Bohemian, Scandinavian, Minimalist, Rustic, Modern Farmhouse, Contemporary, Luxury, Airbnb, Boho Chic, Midcentury Modern, Art Deco, Zen, Beach, Neoclassical, Industrial, Biophilic, Eco-friendly, Hollywood Glam, Parisian White, Saudi Prince Gold, French Country, Monster Energy Drink, Cyberpunk, Vaporwave, Baroque, etc.\n\nPro tip: add a color to customize it! You can also describe the furniture type.")
     with gr.Column():
         prompt = gr.Textbox(
-            label="Custom Prompt",
-            placeholder="boho chic",
+            label="Custom Prompt (optional)",
+            placeholder="use your imagination 👀",
         )
-    with gr.Row(visible=True):
-        style_selection = gr.Radio(
+    with gr.Column(visible=True):
+        style_selection = gr.Dropdown(
             show_label=True,
             container=True,
             interactive=True,
@@ -302,9 +299,8 @@ with gr.Blocks(theme="bethecloud/storj_theme", css=css) as demo:
             value="None",
             label="Design Styles",
         )
-    # input image
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1, min_width=300):
+    with gr.Row(equal_height=True, variant="panel"): 
+        with gr.Column(min_width=300):
             image = gr.Image(
                 label="Input",
                 sources=["upload"],
@@ -312,20 +308,17 @@ with gr.Blocks(theme="bethecloud/storj_theme", css=css) as demo:
                 mirror_webcam=True,
                 format="webp",
             )
-            # run button
             with gr.Column():
-                run_button = gr.Button(value="Use this one", size="lg", visible=False)
-        # output image
-        with gr.Column(scale=1, min_width=300):
+                run_button = gr.Button(value="Use this one", size="sm", visible=False)
+        with gr.Column(min_width=300):
             result = gr.Image(  
                 label="Output",
                 interactive=False,
                 format="webp",
                 show_share_button= False,
             )
-            # Use this image button
             with gr.Column():
-                use_ai_button = gr.Button(value="Use this one", size="lg", visible=False)
+                use_ai_button = gr.Button(value="Use this one", size="sm", visible=False)
     config = [
         image,
         style_selection,

web.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gradio App Embed</title>
+    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.37.2/gradio.js"></script>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .gradio-container {
+            width: 100%;
+            min-height: 600px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        gradio-app {
+            width: 100%;
+            max-width: 1024px;
+            height: auto;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            overflow: visible;
+        }
+        gradio-app::part(root) {
+            max-width: 100% !important;
+        }
+        gradio-app::part(root) h1, 
+        gradio-app::part(root) h2, 
+        gradio-app::part(root) h3 {
+            text-align: center;
+            display: block;
+        }
+        gradio-app::part(root) .gr-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 512px;
+            overflow: hidden;
+        }
+        gradio-app::part(root) .gr-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+        gradio-app::part(root) footer {
+            display: none !important;
+        }
+        gradio-app::part(root) .gr-button-row {
+            justify-content: center;
+        }
+        gradio-app::part(root) .gr-form.gr-box {
+            max-width: 100% !important;
+        }
+        gradio-app::part(root) #style_selection {
+            width: 100%;
+            max-width: 300px;
+            margin: 0 auto;
+        }
+        gradio-app::part(root) .gr-form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #mobile-dropdown {
+            display: none;
+            width: 100%;
+            max-width: 300px;
+            margin: 10px auto;
+            padding: 10px;
+            font-size: 16px;
+        }
+        @media (max-width: 768px) {
+            #mobile-dropdown {
+                display: block;
+            }
+            gradio-app::part(root) #style_selection {
+                display: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="gradio-container">
+        <gradio-app src="https://app.skybrowse.co"></gradio-app>
+    </div>
+    <select id="mobile-dropdown"></select>
+    <script>
+        document.addEventListener('DOMContentLoaded', (event) => {
+            const gradioApp = document.querySelector('gradio-app');
+            const container = document.querySelector('.gradio-container');
+            const mobileDropdown = document.getElementById('mobile-dropdown');
+
+            const adjustLayout = () => {
+                const shadowRoot = gradioApp.shadowRoot;
+                if (shadowRoot) {
+                    const appContent = shadowRoot.querySelector('#root');
+                    if (appContent) {
+                        container.style.minHeight = `${window.innerHeight}px`;
+                        appContent.style.minHeight = `${window.innerHeight}px`;
+                        
+                        // Create mobile dropdown
+                        const radioGroup = shadowRoot.querySelector('#style_selection');
+                        if (radioGroup) {
+                            const radioButtons = radioGroup.querySelectorAll('input[type="radio"]');
+                            mobileDropdown.innerHTML = '';
+                            radioButtons.forEach(radio => {
+                                const option = document.createElement('option');
+                                option.value = radio.value;
+                                option.textContent = radio.nextElementSibling.textContent;
+                                mobileDropdown.appendChild(option);
+                            });
+
+                            // Sync dropdown with radio buttons
+                            mobileDropdown.addEventListener('change', (e) => {
+                                const selectedRadio = radioGroup.querySelector(`input[value="${e.target.value}"]`);
+                                if (selectedRadio) selectedRadio.click();
+                            });
+
+                            // Position the dropdown
+                            const radioGroupRect = radioGroup.getBoundingClientRect();
+                            mobileDropdown.style.position = 'absolute';
+                            mobileDropdown.style.top = `${radioGroupRect.top}px`;
+                            mobileDropdown.style.left = `${radioGroupRect.left}px`;
+                            mobileDropdown.style.width = `${radioGroupRect.width}px`;
+                        }
+
+                        // Force layout recalculation
+                        appContent.style.display = 'none';
+                        appContent.offsetHeight; // Trigger reflow
+                        appContent.style.display = '';
+                    }
+                }
+            };
+
+            const observer = new MutationObserver((mutations) => {
+                adjustLayout();
+            });
+
+            gradioApp.addEventListener('load', () => {
+                observer.observe(gradioApp.shadowRoot, { childList: true, subtree: true });
+                adjustLayout();
+            });
+
+            window.addEventListener('resize', adjustLayout);
+        });
+    </script>
+</body>
+</html>