moved galleries

app.py

@@ -64,13 +64,14 @@ def show_id_images(cl_id_1, cl_id_2, cl_id_3):
 with gr.Blocks() as demo:
     gr.Markdown(
         """
-                ## Stable Bias:  Analyzing Societal Representations in Diffusion Models
-            """
-    )
-    gr.HTML(
+        ## Stable Bias:  Analyzing Societal Representations in Diffusion Models
+        
+        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 [Alexandra Sasha Luccioni (Hugging Face)](https://huggingface.co/sasha),
+        [Christopher Akiki (ScaDS.AI, Leipzig University)](https://huggingface.co/cakiki), [Margaret Mitchell (Hugging Face)](https://huggingface.co/meg),
+        and  [Yacine Jernite (Hugging Face)](https://huggingface.co/yjernite).
         """
-     <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>
-          """
     )
     gr.HTML(
         """<span style="color:red" font-size:smaller>⚠️ DISCLAIMER: the images displayed by this tool were generated by text-to-image systems and may depict offensive stereotypes or contain explicit content.</span>"""
@@ -84,12 +85,20 @@ with gr.Blocks() as demo:
     ).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>
+         <p style="margin-bottom: 14px; font-size: 100%">   </p>
           """
     )
 
     gr.Markdown(
         """
+        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: **Stable Diffusion v.1.4, Stable Diffusion v.2.**, and  **Dall-E 2**,
+        prompting them to produce images of different *professions* and *identity characteristics*.
+        <br/>
+        You can explore our findings in the sections below:
+        
         ### How do Diffusion Models Represent Identity?
 
         One of the goals of our study was to look at the ways in which pictures generated by text-to-image models depict different notions of gender and ethnicity.
@@ -249,7 +258,7 @@ with gr.Blocks() as demo:
 
     gr.Markdown(
         """
-        ### Quantifying Social Biases in Image Generations of Professions
+        ### Quantifying Social Biases in Image Generations: Professions
 
         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.
@@ -260,66 +269,124 @@ with gr.Blocks() as demo:
         Read more about our findings in the accordion below or directly via the [Diffusion Cluster Explorer](https://hf.co/spaces/society-ethics/DiffusionClustering) tool.
         """
     )
-    with gr.Accordion("Quantifying Social Biases in Image Generations of Professions", open=False):
+    with gr.Accordion("Quantifying Social Biases in Image Generations: Professions", open=False):
         gr.Markdown(
             """
             <br/>
             We also explore the correlations between the professions that use used in our prompts and the different identity clusters that we identified.
             
-            Using both the [Diffusion Cluster Explorer](https://hf.co/spaces/society-ethics/DiffusionClustering)
-            and the [Identity Representation Demo](https://hf.co/spaces/society-ethics/DiffusionFaceClustering),
+            Using the [Profession Bias Tool](https://hf.co/spaces/society-ethics/DiffusionClustering)
             we can see which clusters are most correlated with each profession and what identities are in these clusters.
             """
         )
+        impath = "images/bias"
         with gr.Row():
-            with gr.Column():
-                gr.HTML(
+            with gr.Column(scale=1):
+                gr.Markdown(
                     """
-             <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(
+                    #### [Diversity and Representation across Models](https://hf.co/spaces/society-ethics/DiffusionClustering "you can cycle through screenshots of the tool in use on the right, or go straight to the interactive demo")
+                    
+                    Using the **[Profession Bias Tool](https://hf.co/spaces/society-ethics/DiffusionClustering)**,
+                    we can see that the top cluster for the CEO and director professions is **Cluster 4**:
+                    
+                    We can see that the most represented gender term is *man* (56%  of the cluster) and *White* (29% of the cluster).
+                    This is consistent with common stereotypes regarding people in positions of power, who are predominantly male, according to the US Labor Bureau Statistics.
                     """
-         <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",
+            with gr.Column(scale=1):
+                bias_cl_id_1 = gr.Dropdown(
+                    choices=[
+                        "Results table: all models",
+                        "Results table: Stable Diffusion v1.4",
+                        "Results table: Stable Diffusion v2,",
+                        "Results table: Stable Diffusion Dall-E 2",
+                        "Comparison histogram: all professions",
+                    ],
+                    value="Results table: all models",
                     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,
+                bias_screenshot_1 = gr.Image(
+                    value=os.path.join(impath, "cluster_assign_24_all.png"),
+                    label="Screenshot of the Profession Bias Tool | Results table: all models",
                 )
         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> """
+                bias_cl_id_2 = gr.Dropdown(
+                    choices=[
+                        "Results table: mental health professions, all models",
+                        "Comparison histogram: psychologist",
+                        "Comparison histogram: social worker",
+                        "Comparison histogram: social assistant",
+                    ],
+                    value="Results table: mental health professions, all models",
+                    show_label=False,
+                )
+                bias_screenshot_2 = gr.Image(
+                    value=os.path.join(impath, "cluster_assign_mental_health_24_all.png"),
+                    label="Screenshot of the Profession Bias Tool | Results table: mental health professions, all models",
                 )
-            with gr.Column(scale=2):
-                cluster4 = gr.Image(
-                    Image.open("images/bias/Cluster2.png"),
-                    label="Cluster 2 Image",
+                mental_helth_examlpars = gr.Gallery(
+                    [
+                        (Image.open(os.path.join(impath, im)), name)
+                        for im, name in [
+                            ("social_assistant_0_of_24.png", "Generated images of 'social assistant' assigned to cluster 0 of 24"),
+                            ("social_assistant_2_of_24.png", "Generated images of 'social assistant' assigned to cluster 2 of 24"),
+                            ("social_assistant_5_of_24.png", "Generated images of 'social assistant' assigned to cluster 5 of 24"),
+                            ("social_assistant_0_of_24.png", "Generated images of 'social assistant' assigned to cluster 0 of 24"),
+                            ("social_assistant_0_of_24.png", "Generated images of 'social assistant' assigned to cluster 0 of 24"),
+                            ("social_worker_0_of_24.png", "Generated images of 'social worker' assigned to cluster 0 of 24"),
+                            ("social_worker_2_of_24.png", "Generated images of 'social worker' assigned to cluster 2 of 24"),
+                            ("social_worker_5_of_24.png", "Generated images of 'social worker' assigned to cluster 5 of 24"),
+                            ("social_worker_0_of_24.png", "Generated images of 'social worker' assigned to cluster 0 of 24"),
+                            ("social_worker_0_of_24.png", "Generated images of 'social worker' assigned to cluster 0 of 24"),
+                            ("psychologist_0_of_24.png", "Generated images of 'psychologists' assigned to cluster 0 of 24"),
+                            ("psychologist_2_of_24.png", "Generated images of 'psychologists' assigned to cluster 2 of 24"),
+                            ("psychologist_5_of_24.png", "Generated images of 'psychologists' assigned to cluster 5 of 24"),
+                            ("psychologist_0_of_24.png", "Generated images of 'psychologists' assigned to cluster 0 of 24"),
+                            ("psychologist_0_of_24.png", "Generated images of 'psychologists' assigned to cluster 0 of 24"),
+                        ]
+                    ],
+                    label="Example images generated by three text-to-image models (Dall-E 2, Stable Diffusion v1.4 and v.2).",
                     show_label=False,
+                ).style(grid=[3, 5], height="auto")
+            with gr.Column():
+                gr.Markdown(
+                    """
+                    #### [Focused Comparison: Mental Health Professions](https://hf.co/spaces/society-ethics/DiffusionClustering "you can cycle through screenshots of the tool in use on the left and example images below, or go straight to the interactive demo")
+                    
+                    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:
+                    
+                    Cluster 2 is best represented by the gender term is *woman* (81%) as well as *Latinx* (19%).
+                    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.
+                    """
                 )
+        if False:
+#        with gr.Row():
+            mental_helth_examlpars = gr.Gallery(
+                [
+                    (Image.open(os.path.join(impath, im)), name)
+                    for im, name in [
+                        ("social_assistant_0_of_24.png", "Generated images of 'social assistant' assigned to cluster 0 of 24"),
+                        ("social_assistant_2_of_24.png", "Generated images of 'social assistant' assigned to cluster 2 of 24"),
+                        ("social_assistant_5_of_24.png", "Generated images of 'social assistant' assigned to cluster 5 of 24"),
+                        ("social_assistant_0_of_24.png", "Generated images of 'social assistant' assigned to cluster 0 of 24"),
+                        ("social_assistant_0_of_24.png", "Generated images of 'social assistant' assigned to cluster 0 of 24"),
+                        ("social_worker_0_of_24.png", "Generated images of 'social worker' assigned to cluster 0 of 24"),
+                        ("social_worker_2_of_24.png", "Generated images of 'social worker' assigned to cluster 2 of 24"),
+                        ("social_worker_5_of_24.png", "Generated images of 'social worker' assigned to cluster 5 of 24"),
+                        ("social_worker_0_of_24.png", "Generated images of 'social worker' assigned to cluster 0 of 24"),
+                        ("social_worker_0_of_24.png", "Generated images of 'social worker' assigned to cluster 0 of 24"),
+                        ("psychologist_0_of_24.png", "Generated images of 'psychologists' assigned to cluster 0 of 24"),
+                        ("psychologist_2_of_24.png", "Generated images of 'psychologists' assigned to cluster 2 of 24"),
+                        ("psychologist_5_of_24.png", "Generated images of 'psychologists' assigned to cluster 5 of 24"),
+                        ("psychologist_0_of_24.png", "Generated images of 'psychologists' assigned to cluster 0 of 24"),
+                        ("psychologist_0_of_24.png", "Generated images of 'psychologists' assigned to cluster 0 of 24"),
+                    ]
+                ],
+                label="Example images generated by three text-to-image models (Dall-E 2, Stable Diffusion v1.4 and v.2).",
+                show_label=False,
+            ).style(grid=[3, 5], height="auto")
 
     gr.Markdown(
         """