Update app.py

app.py

@@ -17,71 +17,78 @@ with gr.Blocks() as demo:
           ''')
     examples_path= "images/examples"
     examples_gallery = gr.Gallery(get_images(examples_path),
-            label="Example images", show_label=False, elem_id="gallery").style(grid=[1,6], height="auto")
+            label="Example images generated by three text-to-image models (Dall-E 2, Stable Diffusion v1.4 and v.2).", show_label=True, elem_id="gallery").style(grid=[1,6], height="auto")
     gr.HTML('''
-     <p style="margin-bottom: 10px; font-size: 94%"> Example images generated by three text-to-image models (Dall-E 2, Stable Diffusion v1.4 and v.2). </p>
-          ''')    
-    gr.HTML('''
-     <p style="margin-bottom: 14px; font-size: 100%">  As AI-enabled Text-to-Image systems are becoming increasingly used, characterizing the social biases they exhibit is a necessary first step to lowering their risk of discriminatory outcomes. <br> We propose a new method for exploring and quantifying social biases in these kinds of systems by directly comparing collections of generated images designed to showcase a system’s variation across social attributes — gender and ethnicity — and target attributes for bias evaluation — professions and gender-coded adjectives. <br> We compare three models: Stable Diffusion v.1.4, Stable Diffusion v.2., and Dall-E 2 and find <b> clear evidence of ethnicity and gender biases </b>. <br> You can explore these findings in the collapsed sections below, which present our findings: </p>
+         <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>
           ''')    
+    
+    
 
     with gr.Accordion("Identity group results (ethnicity and gender)", open=False):
          gr.HTML('''
          <p style="margin-bottom: 14px; font-size: 100%">  One of the approaches that we adopted in our work is hierarchical clustering of the images generated by the text-to-image systems in response to prompts that include identity terms with regards to ethnicity and gender. <br> We computed 3 different numbers of clusters (12, 24 and 48) and created an <a href='https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering' style='text-decoration: underline;' target='_blank'> Identity Representation Demo </a> that allows for the exploration of the different clusters and their contents. </p>
               ''')    
          with gr.Row():
-            impath = "images/identities"
-            identity_gallery = gr.Gallery([os.path.join(impath,im) for im in os.listdir(impath)],
-            label="Identity cluster images", show_label=False, elem_id="gallery"
-        ).style(grid=3, height="auto")
-         gr.HTML('''
-         <p style="margin-bottom: 14px; font-size: 100%"> TO DO: talk about what we see above. <br> Continue exploring the demo on your own to uncover other patterns!  </p>
+            with gr.Column(scale=2):
+                impath = "images/identities"
+                identity_gallery = gr.Gallery([os.path.join(impath,im) for im in os.listdir(impath)],
+                label="Identity cluster images", show_label=False, elem_id="gallery"
+            ).style(grid=3, height="auto")
+            with gr.Column(scale=1):
+                 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>
               ''')    
+        
 
     with gr.Accordion("Bias Exploration", open=False):
          gr.HTML('''
-         <p style="margin-bottom: 14px; font-size: 100%">  We queried our 3 systems with prompts that included names of professions, and one of our goals was to explore the social biases of these models. <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 <b> without </b> ascribing gender and ethnicity categories to the images generated. <b> We do this by calculating the correlations between the professions and the different identity clusters that we identified. <br> Using both the <a href='https://huggingface.co/spaces/society-ethics/DiffusionClustering' style='text-decoration: underline;' target='_blank'> Diffusion Cluster Explorer </a> and the <a href='https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering' style='text-decoration: underline;' target='_blank'> Identity Representation Demo </a>, we can see which clusters are most correlated with each profession and what identities are in these clusters.</p>
+         <p style="margin-bottom: 14px; font-size: 100%">  We also explore the correlations between the professions that use used in our prompts and the different identity clusters that we identified. <br> Using both the <a href='https://huggingface.co/spaces/society-ethics/DiffusionClustering' style='text-decoration: underline;' target='_blank'> Diffusion Cluster Explorer </a> and the <a href='https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering' style='text-decoration: underline;' target='_blank'> Identity Representation Demo </a>, we can see which clusters are most correlated with each profession and what identities are in these clusters.</p>
               ''')    
          with gr.Row():
-             gr.HTML('''
-         <p style="margin-bottom: 14px; font-size: 100%">  Using the <a href='https://huggingface.co/spaces/society-ethics/DiffusionClustering' style='text-decoration: underline;' target='_blank'> Diffusion Cluster Explorer </a>, we can see that the top cluster for the CEO and director professions is Cluster 4: </p> ''')    
-             ceo_img = gr.Image(Image.open("images/bias/ceo_dir.png"), label = "CEO Image", show_label=False)   
+            with gr.Column():
+                 gr.HTML('''
+             <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():
-             gr.HTML('''
-         <p style="margin-bottom: 14px; font-size: 100%"> Going back to the <a href='https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering' style='text-decoration: underline;' target='_blank'> Identity Representation Demo </a>, we can see that the most represented gender term is man (56%  of the cluster) and White (29% of the cluster).  </p> ''')    
-             cluster4 = gr.Image(Image.open("images/bias/Cluster4.png"), label = "Cluster 4 Image", show_label=False)             
+            with gr.Column():
+                gr.HTML('''
+         <p style="margin-bottom: 14px; font-size: 100%"> Going back to the <b><a href='https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering' style='text-decoration: underline;' target='_blank'> Identity Representation Demo </a></b>, we can see that the most represented gender term is <i> man </i> (56%  of the cluster) and <i> White </i> (29% of the cluster). <br> This is consistent with common stereotypes regarding people in positions of power, who are predominantly male, according to the US Labor Bureau Statistics. </p> ''')    
+            with gr.Column():
+                cluster4 = gr.Image(Image.open("images/bias/Cluster4.png"), label = "Cluster 4 Image", show_label=False)         
          with gr.Row():
-             gr.HTML('''
-         <p style="margin-bottom: 14px; font-size: 100%">  If we look at the cluster representation of professions such as social assistant and social worker, we can observe that the former is best represented by Cluster 2, whereas the latter has a more uniform representation across multiple clusters:   </p> ''')    
-             social_img = gr.Image(Image.open("images/bias/social.png"), label = "social image", show_label=False)   
-                
+            with gr.Column():
+                gr.HTML('''
+         <p style="margin-bottom: 14px; font-size: 100%">  If we look at the cluster representation of professions such as social assistant and social worker, we can observe that the former is best represented by <b>Cluster 2</b>, whereas the latter has a more uniform representation across multiple clusters:   </p> ''')    
+            with gr.Column():
+                social_img = gr.Image(Image.open("images/bias/social.png"), label = "social image", show_label=False)        
          with gr.Row():
-             gr.HTML('''
-         <p style="margin-bottom: 14px; font-size: 100%"> Cluster 2 is best represented by the gender term is woman (81%) as well as Latinx (19%). </p> ''')    
+            with gr.Column(scale=1):
+                gr.HTML('''
+         <p style="margin-bottom: 14px; font-size: 100%"> Cluster 2 is best represented by the gender term is <i> woman </i> (81%) as well as <i> Latinx </i> (19%) <br> This gender proportion is exactly the same as the one provided by the United States Labor Bureau (which you can see in the table above), with 81% of social assistants identifying as women. </p> ''')    
+            with gr.Column(scale=2):
              cluster4 = gr.Image(Image.open("images/bias/Cluster2.png"), label = "Cluster 2 Image", show_label=False)  
-         with gr.Row():
-             gr.HTML('''
-             <p style="margin-bottom: 14px; font-size: 100%"> TO DO: talk about what we see above. <br> Continue exploring the demo on your own to uncover other patterns!  </p>''')
 
     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. <br> We show some of their functionalities below:    </p> ''')    
-         with gr.Row():
-            with gr.Column():
-                impath = "images/biasexplorer"
-                biasexplorer_gallery = gr.Gallery([os.path.join(impath,im) for im in os.listdir(impath)],
-                label="Bias explorer images", show_label=False, elem_id="gallery").style(grid=2, height="auto")
-            with gr.Column():
+         <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> ''')    
+         with gr.Row():           
+            with gr.Column(scale=2):
+                explorerpath = "images/biasexplorer"
+                biasexplorer_gallery = gr.Gallery(get_images(explorerpath),
+                label="Bias explorer images", show_label=False, elem_id="gallery").style(grid=[2])
+            with gr.Column(scale=1):
                 gr.HTML('''
-                 <p style="margin-bottom: 14px; font-size: 100%"> Comparing generations both between two models and within a single model can help uncover trends and patterns that are hard to measure using quantitative approaches. </p>''')
+                 <p style="margin-bottom: 14px; font-size: 100%"> Comparing generations both between two models and within a single model can help uncover trends and patterns that are hard to measure using quantitative approaches. <br> For instance, we can observe that both Dall-E 2 and Stable Diffusion 2 represent both <i> CEOs </i> and <i> nurses </i> as homogenous groups with distinct characteristics, such as ties and scrubs (which makes sense given the results of our clustering, shown above. <br> We can also see that the images of <i> waitresses </i> generated by  Dall-E 2 and Stable Diffusion v.1.4. have different characteristics, both in terms of their clothes as well as their appearance. <br> It's also possible to see harder to describe phenomena, like the fact that portraits of <i> painters </i> often look like paintings themselves. <br> We encourage you to use the <a href='https://huggingface.co/spaces/society-ethics/DiffusionBiasExplorer' style='text-decoration: underline;' target='_blank'> Diffusion Bias Explorer </a> tool to explore these phenomena further! </p>''')
          with gr.Row():
-            impath = "images/averagefaces"
-            average_gallery = gr.Gallery([os.path.join(impath,im) for im in os.listdir(impath)],
-            label="Average Face images", show_label=False, elem_id="gallery").style(grid=3, height="auto")
-            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). </p>''')                                              
+            with gr.Column(scale=2):
+                averagepath = "images/averagefaces"
+                average_gallery = gr.Gallery(get_images(averagepath),
+                label="Average Face images", show_label=False, elem_id="gallery").style(grid=[2])
+            with gr.Column(scale=1):
+                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.</p>''')                                              
 
     with gr.Accordion("Exploring the color space of generated images", open=False):
          gr.HTML('''
@@ -105,6 +112,6 @@ humans have no inherent gender or ethnicity nor do they belong to socially-const
      <a href='https://huggingface.co/spaces/tti-bias/identities-colorfulness-knn' style='text-decoration: underline;' target='_blank'> Colorfulness Profession Explorer </a> <br>      
      <a href='https://huggingface.co/spaces/tti-bias/professions-colorfulness-knn' style='text-decoration: underline;' target='_blank'> Colorfulness Identities Explorer </a> <br> </p>
           ''')
-    gr.Interface.load("spaces/society-ethics/DiffusionBiasExplorer")
+#    gr.Interface.load("spaces/society-ethics/DiffusionBiasExplorer")
                                               
 demo.launch(debug=True)