app.py

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)]
    paths = os.listdir(path)
    return([(im, path) for im, path in zip(images,paths)])


with gr.Blocks() as demo:
    gr.Markdown("""
                ## Stable Bias:  Analyzing Societal Representations in Diffusion Models
            """)
    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('''
         <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("""
                ### Looking at Identity Groups
            """)
    
    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('''
         <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.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> <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("""
                ### Exploring Biases
            """)
     

    with gr.Accordion("Exploring Biases", open=False):
         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.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():
            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():
            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():
            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)  

    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> ''')    
         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])
            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():
            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)
            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.Markdown("""
                ### Exploring the Pixel Space of Generated Images
            """) 
    with gr.Accordion("Exploring the Pixel Space of Generated Images", open=False):
         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>
         <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.  </p>
         <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.</p>
         ''')               
                            
    gr.Markdown("""
                ### All of the tools created as part of this project:
            """)
    gr.HTML('''
     <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>
     <a href='https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering' style='text-decoration: underline;' target='_blank'> Identity Representation Demo </a> <br>
     <a href='https://huggingface.co/spaces/tti-bias/identities-bovw-knn' style='text-decoration: underline;' target='_blank'> BoVW Nearest Neighbors Explorer </a> <br> 
     <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)