back to white

app.py

@@ -71,10 +71,10 @@ div align="center" style="padding: 20px 0; background-color: black; color: white
     </div>
 </div>
     <div>
-   <p style="font-size: 1.4em; line-height: 1.5; margin: 15px 0; text-align: left; color: #ffffff;">
-       This demo integrates BiomedParse, a foundation model for joint segmentation, detection, and recognition across 9 biomedical imaging modalities. 
-       The model supports <span style="color: #FF4500;">CT</span>, <span style="color: #4169E1;">MRI</span>, <span style="color: #32CD32;">X-Ray</span>, <span style="color: #9370DB;">Pathology</span>, <span style="color: #FFD700;">Ultrasound</span>, <span style="color: #FF69B4;">Endoscope</span>, <span style="color: #20B2AA;">Fundus</span>, <span style="color: #FF8C00;">Dermoscopy</span>, and <span style="color: #8B008B;">OCT</span>.
-   </p>
+        <p style="font-size: 1.4em; line-height: 1.5; margin: 15px 0; text-align: left;">
+            This demo integrates BiomedParse, a foundation model for joint segmentation, detection, and recognition across 9 biomedical imaging modalities. 
+            The model supports <span style="color: #FF4500;">CT</span>, <span style="color: #4169E1;">MRI</span>, <span style="color: #32CD32;">X-Ray</span>, <span style="color: #9370DB;">Pathology</span>, <span style="color: #FFD700;">Ultrasound</span>, <span style="color: #FF69B4;">Endoscope</span>, <span style="color: #20B2AA;">Fundus</span>, <span style="color: #FF8C00;">Dermoscopy</span>, and <span style="color: #8B008B;">OCT</span>.
+        </p>
     </div>
 
 """
@@ -153,82 +153,23 @@ MODALITY_PROMPTS = {
    "OCT": ["edema"] }
 
 CUSTOM_CSS = """
-/* Main container and general text */
-.gradio-container {
-    background-color: black !important;
-}
-.gradio-container, .gradio-container input, .gradio-container textarea, .gradio-container label, .gradio-container p {
-    color: #ffffff !important;
-}
-
-/* Input boxes and textareas */
-.gradio-container input[type="text"],
-.gradio-container textarea,
-.gradio-container .gr-box,
-.gradio-container .gr-input,
-.gradio-container .gr-textarea {
-    background-color: #1a1a1a !important;
-    border: 1px solid #333 !important;
-    color: #ffffff !important;
-}
-
-/* Dropdowns */
-.gradio-container select,
-.gradio-container .gr-dropdown {
-    background-color: #1a1a1a !important;
-    border: 1px solid #333 !important;
-    color: #ffffff !important;
-}
-
-/* Buttons */
-.gradio-container button,
-.gradio-container .gr-button {
-    background-color: #32CD32 !important;
-    color: white !important;
-    border: none !important;
-}
+        gradio-container {
+        background-color: black !important;
 
-/* Image upload box */
-.gradio-container .image-upload-box,
-.gradio-container .gr-image-input {
-    background-color: #1a1a1a !important;
-    border: 2px dashed #333 !important;
-}
-
-/* Gallery */
-.gradio-container .output-gallery,
-.gradio-container .gr-gallery {
-    background-color: #1a1a1a !important;
-}
+        gradio-container, .gradio-container input, .gradio-container textarea, .gradio-container label {
+        color: #ffffff !important;
 
-/* Accordion */
-.gradio-container .accordion {
-    background-color: #1a1a1a !important;
-    border: 1px solid #333 !important;
-}
-.gradio-container .accordion-text {
-    color: #ffffff !important;
-}
+        gradio-container button {
+        background-color: #32CD32 !important;
+        color: white !important;
 
-/* Results box */
-.gradio-container .output-text,
-.gradio-container .gr-text-output {
-    background-color: #1a1a1a !important;
-    color: #ffffff !important;
-    border: 1px solid #333 !important;
-}
+        gradio-container .accordion {
+        background-color: #1a1a1a !important;
+        border: 1px solid #333 !important;
 
-/* Hover states */
-.gradio-container button:hover,
-.gradio-container .gr-button:hover {
-    background-color: #28a745 !important;
-}
+        gradio-container .output-gallery {
+        background-color: #1a1a1a !important;
 
-/* Placeholder text */
-.gradio-container input::placeholder,
-.gradio-container textarea::placeholder {
-    color: #888888 !important;
-}
 """
 
 def on_mode_dropdown_change(selected_mode):
@@ -325,7 +266,7 @@ def process_image(image_path, text_prompts, modality):
         return None, error_msg
 
 # Define Gradio interface
-with gr.Blocks() as demo:
+with gr.Blocks(css=CUSTOM_CSS) as demo:
     gr.HTML(MARKDOWN)    
     with gr.Row():
         with gr.Column():