done with subsection 1.1

app.py

@@ -2,6 +2,36 @@ import gradio as gr
 from PIL import Image
 import os
 
+_ID_CLUSTER_SCREEN_SHOTS = {
+    19: ("cluster_19_of_24_unmarked_white_unmarked_man.JPG", "Cluster 19 of 24"),
+    2: ("cluster_2_of_24_latinx_woman.JPG", "Cluster 2 of 24"),
+    18: ("cluster_18_of_24_hispanic_nonbinary.JPG", "Cluster 18 of 24"),
+    0: ("cluster_0_of_24_black_woman.JPG", "Cluster 0 of 24"),
+    6: ("cluster_6_of_24_black_man.JPG", "Cluster 6 of 24"),
+    7: ("cluster_7_of_24_pacific_indigenous_man_nonbinary.JPG", "Cluster 7 of 24"),
+    3: (
+        "cluster_3_of_24_native_american_stereetotypical.JPG",
+        "Cluster 3 of 24",
+    ),
+    8: (
+        "cluster_8_of_24_indigenous_nonbinary.JPG",
+        "Cluster 8 of 24",
+    ),
+    23: (
+        "cluster_23_of_24_woman_nonbinbary_indigenous.JPG",
+        "Cluster 23 of 24",
+    ),
+    12: (
+        "cluster_12_of_24_white_nonbinary.JPG",
+        "Cluster 12 of 24",
+    ),
+    13: (
+        "cluster_13_of_24_nonbinary_woman_black.JPG",
+        "Cluster 13 of 24",
+    ),
+    15: ("cluster_15_of_24_woman_white.JPG", "Cluster 15 of 24"),
+}
+
 
 def get_images(path):
     images = [Image.open(os.path.join(path, im)) for im in os.listdir(path)]
@@ -9,6 +39,26 @@ def get_images(path):
     return [(im, path) for im, path in zip(images, paths)]
 
 
+def show_id_images(cl_id_1, cl_id_2, cl_id_3):
+    img_path_1, cluster_name_1 = _ID_CLUSTER_SCREEN_SHOTS[cl_id_1]
+    img_path_2, cluster_name_2 = _ID_CLUSTER_SCREEN_SHOTS[cl_id_2]
+    img_path_3, cluster_name_3 = _ID_CLUSTER_SCREEN_SHOTS[cl_id_3]
+    return (
+        gr.update(
+            value=os.path.join(impath, img_path_1),
+            label=f"Screenshot of the Identity Exploration tool for: {cluster_name_1}",
+        ),
+        gr.update(
+            value=os.path.join(impath, img_path_2),
+            label=f"Screenshot of the Identity Exploration tool for: {cluster_name_2}",
+        ),
+        gr.update(
+            value=os.path.join(impath, img_path_3),
+            label=f"Screenshot of the Identity Exploration tool for: {cluster_name_3}",
+        ),
+    )
+
+
 with gr.Blocks() as demo:
     gr.Markdown(
         """
@@ -20,6 +70,9 @@ with gr.Blocks() as demo:
      <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>"""
+    )
     examples_path = "images/examples"
     examples_gallery = gr.Gallery(
         get_images(examples_path),
@@ -35,37 +88,150 @@ with gr.Blocks() as demo:
 
     gr.Markdown(
         """
-                ### Looking at Identity Groups
-            """
-    )
+        ### How do Diffusion Models Represent Identity?
 
-    gr.Markdown(
+        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.
+        These concepts are inherently difficult to describe, however: gender and identity are multi-dimensional, inter-related, and, most importantly, socially constructed:
+        they cannot (and should not) be predicted based on appearance features alone.
+        Since we are working with depictions of fictive humans when analyzing text-to-image model behaviors,
+        we cannot rely on self-identification either to assign identity categories to individual data points.
+        Instead, we develop a clustering-based method to identify relevant dataset-level trends in the generated images, as described in our companion
+        [Identity Representation Demo](https://huggingface.co/spaces/society-ethics/DiffusionFaceClustering).
+        You can read about how this tool helps us delineate **relevant regions** in the models' generation space, outline **stereotypical associations**,
+        and understand what **markedness** has to do with biases by expanding the accordion below:
         """
-                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(
+    with gr.Accordion("How do Diffusion Models Represent Identity?", open=False):
+        gr.Markdown(
+            """
+            <br/>
+            
+            Diffusion Models are commonly used in text-conditioned image generation systems, such as Stable Diffusion or Dall-E 2.
+            In those systems, a user writes a "*prompt*" as input, and receives an image that corresponds to what the prompt is describing as output.
+            For example, if the user asks for a "*Photo protrait of a **scientist***", they expect to get an image that looks photorealistic,
+            prominently features at least one person, and this person might be wearing a lab coat or safety goggles.
+            A "*Photo portrait of a **carpenter***", on the other other hand, might be set against a background depicting wooden scaffolding or a workshop (see pictures above).
+            
+            At the start of this project, we found that while systems do make good use of background and context cues to represent different professions,
+            there were also some concerning trends about the perceived genders and ethnicities of the people depicted in these professional situations.
+            After trying a few such prompts, we were left asking: why do all the people depicted in these pictures **look like white men**?
+            Why do the only exceptions appear to be fast food workers and other lower wage professions?
+            And finally, what could be the **consequences of such a lack of diversity** in the system outputs?
+
+            **Look like** is the operative phrase here, however, as the people depicted in the pictures do not exist, nor do they belong to socially-constructed groups.
+            This means that we cannot assign a gender or ethnicity label to each data point to support traditional measures of social diversity or fairness -
+            we instead focus on dataset-level trends in visual features that are correlated with social variation in the text prompts.            
+            We do this through *controlled prompting* and *hierarchical clustering*: for each system,
+            we obtain a dataset of generations for prompts of the format "*Photo portrait of a **(identity terms)** person at work*",
+            where ***(identity terms)*** jointly enumerate phrases describing ethnicities and phrases denoting gender.
+            We then cluster these images by similarity and create an [Identity Representation Demo](https://hf.co/spaces/society-ethics/DiffusionFaceClustering)
+            to showcase the visual trends encoded in these clusters - as well as their relation to the social variables under consideration.
             """
-         <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>
-              """
         )
+        impath = "images/identities"
         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",
+            with gr.Column(scale=1):
+                gr.Markdown(
+                    """
+                    #### [Clusters, Gender, and Ethnicity](https://hf.co/spaces/society-ethics/DiffusionFaceClustering "Select cluster to visualize to the right or go straight to the interactive demo")
+                    
+                    Our goal with this strategy is to trigger variation in the images that viewers will associate with social markers.
+                    We use three phrases denoting genders (*man*, *woman*, *non-binary*), and 18 phrases describing ethnicities -
+                    some of which are sometimes understood as similar in the US context, such as First Nations and Indigenous American.
+                    We also left the gender and ethnicity phrases unspecified in some prompts.
+                    
+                    This approach places visual features on a multidimensional spectrum without ascribing a prior number of distinct values for social categories or their intersection.
+                    It is also limited by the training data of the models under consideration and the set of identity terms use,
+                    which in our application are more relevant to the North American context than to other regions.
+                    
+                    How then can we use these clusters in practice?
+                    Let's look for example at **cluster 2 in the 24-cluster setting**:
+                    we see that most prompts for images in the cluster used the word *woman* and one of the words denoting *Hispanic* origin.
+                    This tells us that images that are similar to the ones in this cluster will **likely look like** Hispanic women to viewers.
+                    You can cycle through [a few other examples right](https://hf.co/spaces/society-ethics/DiffusionFaceClustering "or even better, visualize them in the app"),
+                    such as cluster 19 which mostly features the words *Caucasian* and *man*, different gender term distributions for *African American* in 0 and 6,
+                    as well as clusters like 7 that showcase the limitations of mapping visual features to ethnicity by grouping together *Pacific Islander*, *Indigenous American*, and *Latino*.
+                    """
+                )
+            with gr.Column(scale=1):
+                id_cl_id_1 = gr.Dropdown(
+                    choices=[2, 19, 0, 6, 7],
+                    value=2,
                     show_label=False,
-                    elem_id="gallery",
-                ).style(grid=3, height="auto")
+                )
+                identity_screenshot_1 = gr.Image(
+                    value=os.path.join(impath, "cluster_2_of_24_latinx_woman.JPG"),
+                    label="Screenshot of the Identity Exploration tool for: Cluster 2 of 24",
+                )
+        with gr.Row():
             with gr.Column(scale=1):
-                gr.HTML(
+                id_cl_id_2 = gr.Dropdown(
+                    choices=[3, 8, 23, 12, 13, 7],
+                    value=3,
+                    show_label=False,
+                )
+                identity_screenshot_2 = gr.Image(
+                    value=os.path.join(
+                        impath, "cluster_3_of_24_native_american_stereetotypical.JPG"
+                    ),
+                    label="Screenshot of the Identity Exploration tool for: Cluster 3 of 24",
+                )
+            with gr.Column(scale=1):
+                gr.Markdown(
+                    """
+                    #### [Stereotypical Representations and Associations](https://hf.co/spaces/society-ethics/DiffusionFaceClustering "Select cluster to visualize to the left or go straight to the interactive demo")
+                    - Native american:
+                        - stereotypical (man 3) vs modern and salient (8) vs less stereotypical (23 woman + nonbinary)
+                        - shows the importance of flexibe categories!!!
+                    - Non-binary: stereotype "depends on ethnicity" - associated with only "woman" + haircut + glasses for caucasian, more diverse for others
+                        - different stereotype and power dynamics, but still all the same haircut and glasses (down to the collar!) in cluster 12 - also only associated with women + white
+                        - compare to clusters 13 (black, also +woman), 8 (native american, gender diversity!). Other clusters with NB mostly + visually diverse, + women, except 7 +men
+
+                    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.
+                
+                    This is problematic because it reinforces existing cultural stereotypes and fails to represent the diversity that is present in all identity groups.
                     """
-                 <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>
-              """
                 )
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown(
+                    """
+                    #### [Specification, Markedness, and Bias](https://hf.co/spaces/society-ethics/DiffusionFaceClustering "Select cluster to visualize to the right or go straight to the interactive demo")
+                    - Cluster 19: both axes
+                    - Unmarked gender across ethnicity: 6 and 0 have the most AfrAm, 36% vs 18%
+                    - Unmarked ethnicity across genders: 15 has the most unmarked ethnicity of woman>man clusters
+                    """
+                )
+            with gr.Column(scale=1):
+                id_cl_id_3 = gr.Dropdown(
+                    choices=[19, 0, 6, 15],
+                    value=6,
+                    show_label=False,
+                )
+                identity_screenshot_3 = gr.Image(
+                    value=os.path.join(
+                        impath, "cluster_19_of_24_unmarked_white_unmarked_man.JPG"
+                    ),
+                    label="Screenshot of the Identity Exploration tool for: Cluster 19 of 24",
+                )
+        gr.Markdown(
+            """
+            Conclusion: let's use those to measure other outputs of the model that represent people!!!
+            """
+        )
+        for var in [id_cl_id_1, id_cl_id_2, id_cl_id_3]:
+            var.change(
+                show_id_images,
+                inputs=[id_cl_id_1, id_cl_id_2, id_cl_id_3],
+                outputs=[
+                    identity_screenshot_1,
+                    identity_screenshot_2,
+                    identity_screenshot_3,
+                ],
+            )
+
     gr.Markdown(
         """
                 ### Exploring Biases
@@ -206,11 +372,13 @@ with gr.Blocks() as demo:
                 """
          <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 booksheves in the background, or the gibberish pseudo-English text that often plagues TTI systems. </p>
-        """)    
+        """
+            )
             with gr.Column():
                 gr.Image("images/bovw/bookshelves.png")
                 gr.Image("images/bovw/gibberish.png")
-    gr.Markdown("""
+    gr.Markdown(
+        """
                 ### All of the tools created as part of this project:
             """
     )