initial update

app.py

@@ -355,7 +355,7 @@ custom_css = """
     border-width: 0 !important;
 }
 hr {
-    margin: 2rem 0 0 0 !important;
+    margin: 1.5rem 0 0 0 !important;
     padding-bottom: 10px !important;
 }
 .input-choices {
@@ -368,6 +368,9 @@ hr {
     border-width: 0 !important;
     box-shadow: none !important;
 }
+.bold {
+    font-weight: 600 !important;
+}
 </style>
 """
 
@@ -380,15 +383,14 @@ with gr.Blocks() as demo:
 
     gr.Markdown('<div class="h-1">Step 1. Upload images</div>')
     gr.Markdown('<div class="h-2">You may upload one or two files depending on your use case.</div>')
-    gr.Markdown('<div class="h-2">Case 1: &nbsp; Upload a single file</div>')
+    gr.Markdown('<div class="h-2 bold">Case 1: &nbsp; Upload a single file</div>')
     gr.Markdown('<div class="h-2"><ul><li>upload a TXT or CSV file that contains information about antibodies, rare heavy metal isotopes, and image channel names.</li>'
     '<li>files are following the CyTOF, IMC, or multiplex data convention.</li>'
     '</ul></div>')
-    gr.Markdown('<div class="h-2">Case 2: &nbsp; Upload multiple files</div>')
+    gr.Markdown('<div class="h-2 bold">Case 2: &nbsp; Upload multiple files</div>')
     gr.Markdown('<div class="h-2"><ul><li>upload a TIFF file containing Regions of Interest (ROIs) stored as multiplexed images. <a href="https://qbrc.swmed.edu/labs/xiaoxie/download/multiplex/example_image.tiff" download target="_blank">Example ROI</a></li>'
     '<li>upload a Marker File listing the channels to identify the antibodies. <a href="https://github.com/QBRC/multiTAP/blob/main/example_data/markers_labels.txt" download target="_blank">Example Marker File</a></li>'
     '</ul></div><hr>')
-
     
     gr.Markdown('<div class="h-2">Select Input Case:</div>')
     
@@ -428,8 +430,7 @@ with gr.Blocks() as demo:
     gr.Markdown('<div class="h-1">Step 2. Modify Existing Channels</div>')
     gr.Markdown('<div class="h-2">(Required) Define channels designed to visualize nuclei. </div>')
     gr.Markdown('<div class="h-2">(Optional) Remove unwanted channel after visualizing the individual channels. </div>')
-    gr.Markdown('<div class="h-2">(Optional) Define channels degisned to visualize membranes.</div>')
-    
+    gr.Markdown('<div class="h-2">(Optional) Define channels degisned to visualize membranes.</div><hr>')
     
     with gr.Row(equal_height=True): # third row selects nuclei channels
         with gr.Column(scale=2):
@@ -457,7 +458,8 @@ with gr.Blocks() as demo:
 
     gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 3. Perform Cell Segmentation</div>')
-    gr.Markdown('<div class="h-2">In this step, we perform cell segmentation based on the defined nuclei and membrane channels</div>')
+    gr.Markdown('<div class="h-2">In this step, we perform cell segmentation based on the defined nuclei and membrane channels</div><hr>')
+
     with gr.Row(): # This row defines cell radius and performs segmentation
         with gr.Column(scale=2):
             gr.Markdown('<div class="h-2">Cell Size:</div>')
@@ -471,8 +473,7 @@ with gr.Blocks() as demo:
     
     gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 4. Extract cell features</div>')
-    gr.Markdown('<div class="h-2">Note: This step will take significantly longer than the previous ones. A 300MB IMC file takes about 7 minutes to compute.</div>')
-    
+    gr.Markdown('<div class="h-2"><span class="bold">Note</span>: This step will take significantly longer than the previous ones. (A 300MB IMC file takes about 7 minutes to compute.)</div><hr>')
 
     cohort_state = gr.State(CytofCohort())
     with gr.Row(): # feature extraction related functinos
@@ -487,10 +488,9 @@ with gr.Blocks() as demo:
         outputs=[cytof_state, cohort_state, feat_df])
     
     gr.Markdown('<br>')
-    gr.Markdown('<div class="h-1">Step 5. Downstream analysis</div>')
+    gr.Markdown('<div class="h-1">Step 5. Downstream analysis</div><hr>')
     
-
-    gr.Markdown('<div class="h-2">(1) Co-expression Analysis</div>')
+    gr.Markdown('<div class="h-2 bold">(1) Co-expression Analysis</div>')
     with gr.Row(): # show co-expression and spatial analysis
         with gr.Column(scale=2):
             gr.Markdown('<div class="h-2">This analysis measures the level of co-expression for each pair of biomarkers by calculating the odds ratio between the observed co-occurrence and the expected expressing even</div>')
@@ -500,7 +500,7 @@ with gr.Blocks() as demo:
             with gr.Accordion("", open=True):
                 co_exp_viz = gr.Plot(elem_classes='no-label no-border')
 
-    gr.Markdown('<div class="h-2">(2) Spatial Interactoin Analysis</div>')
+    gr.Markdown('<div class="h-2 bold">(2) Spatial Interactoin Analysis</div>')
 
     def update_info_text(choice):
         if choice == "k-neighbor":
@@ -528,8 +528,8 @@ with gr.Blocks() as demo:
     gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 6. Visualize positive markers</div>')
     gr.Markdown('<div class="h-2">Select two markers for side-by-side comparison to visualize their positive states in cells. This serves two purposes: </div>')
-    gr.Markdown('<div class="h-2">(1) Validate the co-expression analysis results.</div>')
-    gr.Markdown('<div class="h-2">(2) Validate teh spatial interaction analysis results.</div>')
+    gr.Markdown('<div class="h-2 bold">(1) Validate the co-expression analysis results.</div>')
+    gr.Markdown('<div class="h-2 bold">(2) Validate teh spatial interaction analysis results.</div>')
     
     
     with gr.Row(): # two marker positive visualization - dropdown options
@@ -551,9 +551,7 @@ with gr.Blocks() as demo:
 
     gr.Markdown('<br>')
     gr.Markdown('<div class="h-1">Step 7. Phenogrpah Clustering</div>')
-    gr.Markdown('<div class="h-2">Cells can be clustered into sub-groups based on the extracted single-cell data.</div>')
-    gr.Markdown('<div class="h-2">Time reference: a 300MB IMC file takes about 2 minutes to compute.</div>')
-    
+    gr.Markdown('<div class="h-2">Cells can be clustered into sub-groups based on the extracted single-cell data. (A 300MB IMC file takes about 2 minutes to compute.)</div><hr>')    
 
     with gr.Row(): # add two plots to visualize phenograph results
         with gr.Column(scale=2):
@@ -575,7 +573,7 @@ with gr.Blocks() as demo:
         cluster_interact_btn.click(cluster_interaction_fn, inputs=[cytof_state, cohort_state], outputs=[cluster_interaction, cytof_state, cohort_state])
 
     gr.Markdown('<br>')
-    gr.Markdown('<div class="h-2">In additional, you could visualizing the cluster assignments against the positive markers to oberve any patterns:</div>')
+    gr.Markdown('<div class="h-2">In additional, you could visualizing the cluster assignments against the positive markers to oberve any patterns:</div><hr>')
     
     with gr.Row():
         with gr.Column(scale=2):