Update app.py

app.py

@@ -66,7 +66,7 @@ class CustomTheme(gr.themes.Base):
         self.input_background_fill = "#17181B"  # Set input background color
         self.input_text_color = "#AEB3B8"       # Set input text color
 
-# Custom CSS to hide the footer and set fonts
+# Custom CSS to hide the footer, set fonts, and adjust font weights
 css = """
 /* Hide the footer */
 footer {
@@ -76,31 +76,50 @@ footer {
     padding: 0;
     overflow: hidden;
 }
-/* Target only the Generate button */
-#generate-button, #generate-button .gr-button {
-    font-weight: normal !important;
-}
 
 /* Import Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@500;700&display=swap');
 
-/* Target only the Prompt text */
-#prompt-text {
-    font-weight: bold;
-}
-
 /* Apply fonts to different elements */
 body, input, button, textarea, select, .gr-button {
     font-family: 'Roboto', sans-serif;
 }
+
+/* Make button text normal weight */
+.generate-button, .generate-button .gr-button {
+    font-weight: normal !important;
+}
+
+/* Ensure headings use Montserrat */
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+}
+
+/* Additional styling for sliders and checkboxes if needed */
+input[type="range"]::-webkit-slider-thumb {
+    background: #5271FF;
+}
+input[type="range"]::-moz-range-thumb {
+    background: #5271FF;
+}
+input[type="range"]::-ms-thumb {
+    background: #5271FF;
+}
+input[type="checkbox"]:checked {
+    background-color: #5271FF;
+}
+
+/* Make Prompt text bold */
+.prompt-text {
+    font-weight: bold;
 }
 """
 
 with gr.Blocks(theme=CustomTheme(), css=css) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.Markdown("**Prompt**", elem_id="prompt-text")
+        # Make "Prompt" bold using Markdown syntax and assign a class
+        gr.Markdown("**Prompt**", elem_classes="prompt-text")
 
         with gr.Row():
             prompt = gr.Text(
@@ -111,8 +130,12 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 container=False,
             )
 
-           run_button = gr.Button("Generate", scale=0, variant="primary", elem_id="generate-button")
-
+            run_button = gr.Button(
+                "Generate",
+                scale=0,
+                variant="primary",
+                elem_classes="generate-button"
+            )
 
         result = gr.Image(label="Result", show_label=False)
 
@@ -213,4 +236,4 @@ if __name__ == "__main__":
         server_port=7860,
         share=True,
         show_api=False
-    ) 
+    )