Update app.py

app.py

@@ -32,44 +32,59 @@ description_html = """
     </ul>
 </div>
 """
-
 css = """
+/* Existing CSS styles */
+.markdown-block {
+    background-color: #0b0f1a !important; /* Light gray background */
+    color: black !important;             /* Black text */
+    padding: 10px;            /* Padding around the text */
+    border-radius: 5px;       /* Rounded corners */
+    box-shadow: 0 0 10px rgba(11,15,26,1);
+    display: inline-flex;       /* Use inline-flex to shrink to content size */
+    flex-direction: column;
+    justify-content: center;    /* Vertically center content */
+    align-items: center;        /* Horizontally center items within */
+    margin: auto;               /* Center the block */
+}
 
-h1 {
-    text-align: center;
-    display: block;
+.markdown-block ul, .markdown-block ol {
+    background-color: #1e2936 !important;
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.3);
+    padding-left: 20px;         /* Adjust padding for bullet alignment */
+    text-align: left;           /* Ensure text within list is left-aligned */
+    list-style-position: inside;/* Ensures bullets/numbers are inside the content flow */
 }
 
-.gradio-container .styled-block {
-    background-color: #0b0f1a; 
-    color: white !important;   
-    padding: 10px;             
-    border-radius: 5px;        
+/* New custom CSS class for Gradio container */
+.gradiocontainer-custom {
+    background-color: #0b0f1a !important; /* Custom background color */
+    color: black !important;             /* Custom text color */
+    padding: 10px;                       /* Padding around the text */
+    border-radius: 5px;                  /* Rounded corners */
     box-shadow: 0 0 10px rgba(11,15,26,1);
-    display: inline-flex;      
+    display: inline-flex;                /* Use inline-flex to shrink to content size */
     flex-direction: column;
-    justify-content: center;   
-    align-items: center;       
-    margin: auto;              
+    justify-content: center;             /* Vertically center content */
+    align-items: center;                 /* Horizontally center items within */
+    margin: auto;                        /* Center the block */
 }
 
-.gradio-container .styled-block ul, 
-.gradio-container .styled-block ol {
-    background-color: #1e2936;
+.gradiocontainer-custom ul, .gradiocontainer-custom ol {
+    background-color: #1e2936 !important;
     border-radius: 5px;
-    color: white !important;    
     padding: 10px;
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
-    padding-left: 20px;         
-    text-align: left;           
-    list-style-position: inside;
+    padding-left: 20px;                  /* Adjust padding for bullet alignment */
+    text-align: left;                    /* Ensure text within list is left-aligned */
+    list-style-position: inside;         /* Ensures bullets/numbers are inside the content flow */
 }
 
 footer {
-    display: none !important;
+    display:none !important;
 }
 """
-
 @spaces.GPU(duration=20)
 def predict_image(input_image, input_file):
 
@@ -116,7 +131,7 @@ def predict_image(input_image, input_file):
 with gr.Blocks(title="Anatomy Aware axSpA") as iface:
 
     gr.Markdown("# Anatomy-Aware Image Classification for radiographic axSpA")
-    #gr.Markdown(description_markdown)
+    gr.Markdown(description_markdown, elem_classes="markdown-block")
     gr.HTML(description_html)