css

app.py

@@ -153,8 +153,8 @@ custom_css = """
 .submit-btn:hover {
     background-color: #3498db !important;
 }
-/* New styles for sliders */
-.gradio-slider input[type="range"] {
+/* Updated styles for sliders */
+.custom-slider input[type="range"] {
     -webkit-appearance: none;
     width: 100%;
     height: 10px;
@@ -164,10 +164,10 @@ custom_css = """
     opacity: 0.7;
     transition: opacity .2s;
 }
-.gradio-slider input[type="range"]:hover {
+.custom-slider input[type="range"]:hover {
     opacity: 1;
 }
-.gradio-slider input[type="range"]::-webkit-slider-thumb {
+.custom-slider input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
@@ -176,7 +176,7 @@ custom_css = """
     background: #2980b9;
     cursor: pointer;
 }
-.gradio-slider input[type="range"]::-moz-range-thumb {
+.custom-slider input[type="range"]::-moz-range-thumb {
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -194,11 +194,11 @@ with gr.Blocks(theme='bethecloud/storj_theme', css=custom_css) as demo:
                 input_image = gr.Image(label="Input Image (Florence-2 Captioner)", height=512)
             
             with gr.Accordion("Image Settings", open=False):
-                width = gr.Slider(label="Width", minimum=512, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
-                height = gr.Slider(label="Height", minimum=512, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
-                guidance_scale = gr.Slider(label="Guidance Scale", minimum=0.0, maximum=7.5, step=0.1, value=4.5)
-                num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=50, step=1, value=40)
-                seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
+                width = gr.Slider(label="Width", minimum=512, maximum=MAX_IMAGE_SIZE, step=32, value=1024, elem_classes="custom-slider")
+                height = gr.Slider(label="Height", minimum=512, maximum=MAX_IMAGE_SIZE, step=32, value=1024, elem_classes="custom-slider")
+                guidance_scale = gr.Slider(label="Guidance Scale", minimum=0.0, maximum=7.5, step=0.1, value=4.5, elem_classes="custom-slider")
+                num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=50, step=1, value=40, elem_classes="custom-slider")
+                seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0, elem_classes="custom-slider")
                 randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
                 negative_prompt = gr.Textbox(label="Negative Prompt")