Interactive display

app.py

@@ -3,6 +3,7 @@ import gradio as gr
 import os
 from PIL import Image
 
+TITLE = "Diffusion Faces Cluster Explorer"
 clusters_12 = json.load(open("clusters/id_all_blip_clusters_12.json"))
 clusters_24 = json.load(open("clusters/id_all_blip_clusters_24.json"))
 clusters_48 = json.load(open("clusters/id_all_blip_clusters_48.json"))
@@ -29,26 +30,25 @@ def show_cluster(cl_id, num_clusters):
             dict(cl_dct["labels_ethnicity"]),
             images)
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Diffusion Faces Cluster Explorer")
-    gr.HTML("""<span><b>This Space lets you explore the data generated from <a href="https://huggingface.co/spaces/society-ethics/DiffusionBiasExplorer" target=_blank>DiffusionBiasExplorer</a></b></span>.""")
-    gr.HTML("""<span style="color:red">⚠️ DISCLAIMER: the images displayed by this tool were generated by text-to-image models and may depict offensive stereotypes or contain explicit content.</span>""")
-    with gr.Row():
-        num_clusters = gr.Radio([12, 24, 48], label="How many clusters do you want to make from the data?")
+with gr.Blocks(title=TITLE) as demo:
+    gr.Markdown(f"# {TITLE}")
+    gr.HTML("""<span font-size:smaller><b>This Space lets you explore the data generated from <a href="https://huggingface.co/spaces/society-ethics/DiffusionBiasExplorer" target=_blank>DiffusionBiasExplorer</a></b></span>.""")
+    gr.HTML("""<span style="color:red" font-size:smaller>⚠️ DISCLAIMER: the images displayed by this tool were generated by text-to-image models and may depict offensive stereotypes or contain explicit content.</span>""")
+    num_clusters = gr.Radio([12,24,48], value=12, label="How many clusters do you want to make from the data?")
+
     with gr.Row():
+        with gr.Column(scale=4):
+            gallery = gr.Gallery(label="Most representative images in cluster").style(grid=(3,3))
         with gr.Column():
-            button = gr.Button(value="Go!")
-        with gr.Column():
-            pass
-    with gr.Column():
-        gallery = gr.Gallery(label="Most representative images in cluster").style(grid=6)
-        with gr.Row():
-            with gr.Column():
-                cluster_id = gr.Slider(0, 20, step=1, label="Cluster number")
-                a = gr.Text(label="Number of images")
-        with gr.Row():
-            c = gr.Text(label="Model makeup of cluster")
-            b = gr.Text(label="Gender label makeup of cluster")
-            d = gr.Text(label="Ethnicity label makeup of cluster")
-    button.click(fn=show_cluster, inputs=[cluster_id, num_clusters], outputs=[a,b,c,d, gallery])
-demo.launch(debug=True)
+            cluster_id = gr.Slider(minimum=0, maximum=num_clusters.value-1, step=1, value=0, label="Click to move between clusters")
+            a = gr.Text(label="Number of images")
+    with gr.Row():
+        c = gr.Text(label="Model makeup of cluster")
+        b = gr.Text(label="Gender label makeup of cluster")
+        d = gr.Text(label="Ethnicity label makeup of cluster")
+    demo.load(fn=show_cluster, inputs=[cluster_id, num_clusters], outputs=[a,b,c,d, gallery])
+    num_clusters.change(fn=show_cluster, inputs=[cluster_id, num_clusters], outputs=[a,b,c,d, gallery])
+    cluster_id.change(fn=show_cluster, inputs=[cluster_id, num_clusters], outputs=[a,b,c,d, gallery])
+
+if __name__ == "__main__":
+    demo.queue().launch(debug=True)