Update app.py

adding headers

app.py

@@ -22,7 +22,9 @@ with gr.Blocks() as demo:
          <p style="margin-bottom: 14px; font-size: 100%">  As AI-enabled Text-to-Image models are becoming increasingly used, characterizing the social biases they exhibit is a necessary first step to lowering their risk of discriminatory outcomes. <br> We compare three such models: <b> Stable Diffusion v.1.4, Stable Diffusion v.2. </b>, and  <b> Dall-E 2  </b>, prompting them to produce images of different <i> professions </i> and <i> identity characteristics </i>. <br> Since artificial depictions of fictive humans have no inherent gender or ethnicity nor do they belong to socially-constructed groups, we pursued our analysis <i> without </i> ascribing gender and ethnicity categories to the images generated, still finding clear evidence of ethnicity and gender biases. You can explore these findings in the sections below: </p>
           ''')    
     
-    
+    gr.Markdown("""
+                ## Identity group results (ethnicity and gender)
+            """)
 
     with gr.Accordion("Identity group results (ethnicity and gender)", open=False):
          gr.HTML('''
@@ -38,7 +40,10 @@ with gr.Blocks() as demo:
                  gr.HTML('''
                  <p style="margin-bottom: 14px; font-size: 100%"> You can see that the models reflect many societal biases -- for instance representing Native Americans wearing traditional headdresses, non-binary people with stereotypical haircuts and glasses, and East Asian men with features that amplify ethnic stereotypes. <br> This is problematic because it reinforces existing cultural stereotypes and fails to represent the diversity that is present in all identity groups.</p>
               ''')    
-        
+    gr.Markdown("""
+                ## Bias Exploration
+            """)
+     
 
     with gr.Accordion("Bias Exploration", open=False):
          gr.HTML('''
@@ -50,7 +55,7 @@ with gr.Blocks() as demo:
              <p style="margin-bottom: 14px; font-size: 100%">  Using the <b><a href='https://huggingface.co/spaces/society-ethics/DiffusionClustering' style='text-decoration: underline;' target='_blank'> Diffusion Cluster Explorer</a></b>, we can see that the top cluster for the CEO and director professions is <b> Cluster 4</b>: </p> ''')    
             with gr.Column():
                 ceo_img = gr.Image(Image.open("images/bias/ceo_dir.png"), label = "CEO Image", show_label=False)   
-                
+       
          with gr.Row():
             with gr.Column():
                 gr.HTML('''
@@ -70,6 +75,10 @@ with gr.Blocks() as demo:
             with gr.Column(scale=2):
              cluster4 = gr.Image(Image.open("images/bias/Cluster2.png"), label = "Cluster 2 Image", show_label=False)  
 
+    gr.Markdown("""
+                ## Comparing model generations
+            """) 
+    
     with gr.Accordion("Comparing model generations", open=False):
          gr.HTML('''
          <p style="margin-bottom: 14px; font-size: 100%">  One of the goals of our study was allowing users to compare model generations across professions in an open-ended way, uncovering patterns and trends on their own. This is why we created the <a href='https://huggingface.co/spaces/society-ethics/DiffusionBiasExplorer' style='text-decoration: underline;' target='_blank'> Diffusion Bias Explorer </a> and the <a href='https://huggingface.co/spaces/society-ethics/Average_diffusion_faces' style='text-decoration: underline;' target='_blank'> Average Diffusion Faces </a> tools. We show some of their functionalities below:    </p> ''')    
@@ -90,6 +99,9 @@ with gr.Blocks() as demo:
                 gr.HTML('''
                  <p style="margin-bottom: 14px; font-size: 100%"> Looking at the average faces for a given profession across multiple models can help see the dominant characteristics of that profession, as well as how much variation there is (based on how fuzzy the image is). <br> In the images shown here, we can see that representations of these professions significantly differ across the three models, while sharing common characteristics, e.g. <i> postal workers </i> all wear caps. <br> Also, the average faces of <i> hairdressers </i> seem more fuzzy than the other professions, indicating a higher diversity among the generations compared to other professions. <br> Look at the <a href='https://huggingface.co/spaces/society-ethics/Average_diffusion_faces' style='text-decoration: underline;' target='_blank'> Average Diffusion Faces </a> tool for more examples! </p>''')                                              
 
+    gr.Markdown("""
+                ## Exploring the Pixel Space of Generated Images
+            """) 
     with gr.Accordion("Exploring the pixel space of generated images", open=False):
          gr.HTML('''
          <br>
@@ -104,7 +116,7 @@ with gr.Blocks() as demo:
                 ### All of the tools created as part of this project:
             """)
     gr.HTML('''
-     <p style="margin-bottom: 10px; font-size: 94%">
+     <p style="margin-bottom: 10px; font-size: 100%">
      <a href='https://huggingface.co/spaces/society-ethics/Average_diffusion_faces' style='text-decoration: underline;' target='_blank'> Average Diffusion Faces </a>  <br>
      <a href='https://huggingface.co/spaces/society-ethics/DiffusionBiasExplorer' style='text-decoration: underline;' target='_blank'> Diffusion Bias Explorer </a> <br> 
      <a href='https://huggingface.co/spaces/society-ethics/DiffusionClustering' style='text-decoration: underline;' target='_blank'> Diffusion Cluster Explorer </a> <br>