black

app.py

@@ -2,137 +2,220 @@ import gradio as gr
 from PIL import Image
 import os
 
+
 def get_images(path):
-    images = [Image.open(os.path.join(path,im)) for im in os.listdir(path)]
+    images = [Image.open(os.path.join(path, im)) for im in os.listdir(path)]
     paths = os.listdir(path)
-    return([(im, path) for im, path in zip(images,paths)])
+    return [(im, path) for im, path in zip(images, paths)]
 
 
 with gr.Blocks() as demo:
-    gr.Markdown("""
+    gr.Markdown(
+        """
                 ## Stable Bias:  Analyzing Societal Representations in Diffusion Models
-            """)
-    gr.HTML('''
+            """
+    )
+    gr.HTML(
+        """
      <p style="margin-bottom: 10px; font-size: 94%">This is the demo page for the "Stable Bias" paper, which aims to explore and quantify social biases in text-to-image systems. <br> This work was done by <a href='https://huggingface.co/sasha' style='text-decoration: underline;' target='_blank'> Alexandra Sasha Luccioni (Hugging Face) </a>, <a href='https://huggingface.co/cakiki' style='text-decoration: underline;' target='_blank'> Christopher Akiki (ScaDS.AI, Leipzig University)</a>, <a href='https://huggingface.co/meg' style='text-decoration: underline;' target='_blank'> Margaret Mitchell (Hugging Face) </a> and  <a href='https://huggingface.co/yjernite' style='text-decoration: underline;' target='_blank'> Yacine Jernite (Hugging Face) </a> .</p>
-          ''')
-    examples_path= "images/examples"
-    examples_gallery = gr.Gallery(get_images(examples_path),
-            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('''
+          """
+    )
+    examples_path = "images/examples"
+    examples_gallery = gr.Gallery(
+        get_images(examples_path),
+        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: 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> You explore our findings in the sections below: </p>
-          ''')    
-    
-    gr.Markdown("""
+          """
+    )
+
+    gr.Markdown(
+        """
                 ### Looking at Identity Groups
-            """)
-    
-    gr.Markdown("""
+            """
+    )
+
+    gr.Markdown(
+        """
                 One of the goals of our study was to look at the ways in which different identity groups (ethnicity and gender) are represented by text-to-image models. 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 identity categories to the images generated, using unsupervised techniques such as clustering. We find clear evidence of ethnicity and gender biases, which you can see by expanding the accordion below or directly via the [Identity Representation Demo](https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering).
-            """)
+            """
+    )
 
     with gr.Accordion("Looking at Identity Groups", open=False):
-         gr.HTML('''
+        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():
+              """
+        )
+        with gr.Row():
             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")
+                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('''
+                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> <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("""
+              """
+                )
+    gr.Markdown(
+        """
                 ### Exploring Biases
-            """)
-    gr.Markdown("""
+            """
+    )
+    gr.Markdown(
+        """
                  Machine Learning models encode and amplify biases that are represented in the data that they are trained on -this can include, for instance, stereotypes around the appearances of members of different professions. In our study, we prompted the 3 text-to-image models with texts pertaining to 150 different professions and analyzed the presence of different identity groups in the images generated. We found evidence of many societal stereotypes in the images generated, such as the fact that people in positions of power (e.g. director, CEO) are often White- and male-appearing, while the images generated for other professions are more diverse. Read more about our findings in the accordion below or directly via the [Diffusion Cluster Explorer](https://huggingface.co/spaces/society-ethics/DiffusionClustering) tool.
-              """) 
+              """
+    )
     with gr.Accordion("Exploring Biases", open=False):
-         gr.HTML('''
+        gr.HTML(
+            """
              <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():
+              """
+        )
+        with gr.Row():
             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> ''')    
+                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():
+                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('''
-         <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> ''')    
+                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():
+                cluster4 = gr.Image(
+                    Image.open("images/bias/Cluster4.png"),
+                    label="Cluster 4 Image",
+                    show_label=False,
+                )
+        with gr.Row():
             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> ''')    
+                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():
+                social_img = gr.Image(
+                    Image.open("images/bias/social.png"),
+                    label="social image",
+                    show_label=False,
+                )
+        with gr.Row():
             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> ''')    
+                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)  
+                cluster4 = gr.Image(
+                    Image.open("images/bias/Cluster2.png"),
+                    label="Cluster 2 Image",
+                    show_label=False,
+                )
 
-    gr.Markdown("""
+    gr.Markdown(
+        """
                 ### Comparing Model Generations
-            """) 
-    gr.Markdown("""
+            """
+    )
+    gr.Markdown(
+        """
                 Above and beyond quantitative analyses, one of the main goals of our project was to create accessible ways for the users to explore the generated images themselves, based on their own interests. For this purpose, we created two interactive tools: the [Diffusion Bias Explorer](https://huggingface.co/spaces/society-ethics/DiffusionBiasExplorer), which can be used to compare two models and the images they generate for a given profession or for a given model across two professions, and the [Average Diffusion Faces Tool](https://huggingface.co/spaces/society-ethics/Average_diffusion_faces), which shows an 'average' representation of faces across professions, based on the images generated by the 3 models.
-              """)     
+              """
+    )
     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> ''')    
-         with gr.Row():           
+        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> """
+        )
+        with gr.Row():
             with gr.Column():
                 explorerpath = "images/biasexplorer"
-                biasexplorer_gallery = gr.Gallery(get_images(explorerpath),
-                label="Bias explorer images", show_label=False, elem_id="gallery").style(grid=[2,2])
+                biasexplorer_gallery = gr.Gallery(
+                    get_images(explorerpath),
+                    label="Bias explorer images",
+                    show_label=False,
+                    elem_id="gallery",
+                ).style(grid=[2, 2])
             with gr.Column():
-                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. <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():
+                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. <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():
             with gr.Column():
                 averagepath = "images/averagefaces"
-                average_gallery = gr.Gallery(get_images(averagepath),
-                label="Average Face images", show_label=False, elem_id="gallery").style(grid=[1,3], height=560)
+                average_gallery = gr.Gallery(
+                    get_images(averagepath),
+                    label="Average Face images",
+                    show_label=False,
+                    elem_id="gallery",
+                ).style(grid=[1, 3], height=560)
             with gr.Column():
-                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.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("""
+    gr.Markdown(
+        """
                 ### Exploring the Pixel Space of Generated Images
-            """) 
-    gr.Markdown("""
+            """
+    )
+    gr.Markdown(
+        """
                 Finally, an interesting aspect of the generations of the 3 models are the images themselves, which can be analyzed from different angles on a pixel-level. We explore the images in terms of their colorfulness using the [Colorfulness Profession Explorer](https://huggingface.co/spaces/tti-bias/identities-colorfulness-knn) and the [Colorfulness Identities Explorer](https://huggingface.co/spaces/tti-bias/professions-colorfulness-knn), which allow users to hone in on patterns in terms of colors and shades within the images generated. We also allow exploration of the images in terms of their visual features using the bag-of-visual-words approach (BoVW), which allows users to hone in on visual stereotypical content such as professions that have uniforms of a given color, of elements like glasses and hair styles -- this can be done via the [BoVW Nearest Neighbors Explorer](https://huggingface.co/spaces/tti-bias/identities-bovw-knn) and the [BoVW Professions Explorer](https://huggingface.co/spaces/tti-bias/professions-bovw-knn) -- we also present some of our salient findings in the accordion below.  
-              """)   
+              """
+    )
     with gr.Accordion("Exploring the Pixel Space of Generated Images", open=False):
-        gr.HTML('''
+        gr.HTML(
+            """
          <br>
          <p style="margin-bottom: 14px; font-size: 100%">  With thousands of generated images, we found it useful to provide ways to explore the data in a structured way that did not depend on any external dataset or model. We provide two such tools, one based on <b>colorfulness</b> and one based on a <b>bag-of-visual words</b> model computed using SIFT features.</p>
-        ''') 
-        with gr.Row(): 
-            gr.HTML('''
+        """
+        )
+        with gr.Row():
+            gr.HTML(
+                """
          <h4>Colorfulness</h4>
          <p style="margin-bottom: 14px; font-size: 100%"> We compute an image's "colorfulness" following <a href="https://doi.org/10.1117/12.477378">this work</a> by David Hasler and Sabine E. Suesstrunk and allow the user to choose a specific prompt and model and explore the neighborhood of that chosen starting point. One interesting orthogonal insight is that images generated by DALL·E 2 are on average the most colorful. Images of men are on average less colorful than all other gender labels, consistently across all three models. Patterns revealed using this explorer include for example the exoticizing depiction of native Americans as can be seen in the very stereotypical gallery of images generated in the example on the right.</p>
-        ''')
+        """
+            )
             gr.Image("images/colorfulness/nativeamerican_man.png")
         with gr.Row():
-            gr.HTML('''
+            gr.HTML(
+                """
          <h4>Bag of Visual Words</h4>
          <p style="margin-bottom: 14px; font-size: 100%">  Another way of providing the means for a structured traversal of the dataset is a nearest-neighbor explorer based on visual features provided by an image's SIFT features, which we quantize into a visual vocabulary to represent the entire image dataset as a TF-IDF matrix. These tools are especially useful in honing in on stereotypical content that is often encoded visually, but also failure modes of the model such as the misinterpetation of the "stocker" profession as an imagined dog-breed. The screenshot to the right shows how SIFT visual patterns tend to cluster together, namely in this instance the bookshelf in the background. </p>
-        ''')    
+        """
+            )
             gr.Image("images/bovw/librarians.png")
-    gr.Markdown("""
+    gr.Markdown(
+        """
                 ### All of the tools created as part of this project:
-            """)
-    gr.HTML('''
+            """
+    )
+    gr.HTML(
+        """
      <p style="margin-bottom: 10px; font-size: 110%">
      <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> 
@@ -142,7 +225,8 @@ with gr.Blocks() as demo:
      <a href='https://huggingface.co/spaces/tti-bias/professions-bovw-knn' style='text-decoration: underline;' target='_blank'> BoVW Professions Explorer </a> <br>    
      <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")
-                                              
+
 demo.launch(debug=True)