[Update]Change code similar to previous code

app.py

@@ -1,47 +1,111 @@
 import gradio as gr
 
-with gr.Blocks() as demo:
-    with gr.Row():
-        prompt = gr.Textbox(label='Input Prompt')
-    with gr.Row():
-        shown_columns_1 = gr.CheckboxGroup(
-            choices=["Church","Parachute","Tench", "Garbage Truck"],
-            label="Undersirable Objects",
-            elem_id="column-object",
-            interactive=True,
-        )
-    with gr.Row():
-        shown_columns_2 = gr.CheckboxGroup(
-            choices=["Van Gogh"],
-            label="Undersirable Styles",
-            elem_id="column-style",
-            interactive=True,
-        )
-    with gr.Row():
-        shown_columns_3 = gr.CheckboxGroup(
-            choices=["Violence","Illegal Activity","Nudity"],
-            label="Undersirable Concepts (Outputs that may be offensive in nature)",
-            elem_id="column-select",
-            interactive=True,
-        )
-    with gr.Row():
-        with gr.Column(scale=1, min_width=300):
-            img1 = gr.Image("images/cheetah.jpg",label="Unlearning")
-        with gr.Column(scale=1, min_width=300):
-            img2 = gr.Image("images/cheetah.jpg",label="Attacking")
-
-    with gr.Row():
+import gradio as gr
+import os
+import requests
+import json
+from huggingface_hub import login
+
+
+myip = os.environ["myip"]
+myport = os.environ["myport"]
+
+
+is_spaces = True if "SPACE_ID" in os.environ else False
+
+is_shared_ui = False
+
+
+def excute_udiff(diffusion_model_id, concept, attacker):
+    print(f"my IP is {myip}, my port is {myport}")
+    print(f"my input is diffusion_model_id: {diffusion_model_id}, concept: {concept}, attacker: {attacker}")
+    result = requests.post('http://{}:{}/udiff'.format(myip, myport), json={"diffusion_model_id": diffusion_model_id, "concept": concept, "attacker": attacker})
+    result = result.text[1:-1]
+    
+    return result
+
+
+css = '''
+    .instruction{position: absolute; top: 0;right: 0;margin-top: 0px !important}
+    .arrow{position: absolute;top: 0;right: -110px;margin-top: -8px !important}
+    #component-4, #component-3, #component-10{min-height: 0}
+    .duplicate-button img{margin: 0}
+    #img_1, #img_2, #img_3, #img_4{height:15rem}
+    #mdStyle{font-size: 0.7rem}
+    #titleCenter {text-align:center}
+'''
+
+
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("# Unlearn Diffusions Attack")
+    gr.Markdown("### It will generate a prompt to lead your model output unsafe image.")
+    gr.Markdown("### Please notice that the process may take a long time, but the results will be saved. You can try it later if it waits for too long.")
+
+    with gr.Row() as udiff:
+        with gr.Column():
             # gr.Markdown("Please upload your model id.")
             diffusion_model_id = gr.Textbox(label='diffusion_model_id')
-            shown_columns_4 = gr.Slider(
-                1, 100, value=40, 
-                step=1, label="Attacking Steps", info="Choose between 1 and 100",
-                interactive=True,)
-
-            # concept = gr.Textbox(label='concept')
+            concept = gr.Textbox(label='concept')
             attacker = gr.Textbox(label='attacker')
 
             start_button = gr.Button("Attack!")
 
+        with gr.Column():
+            result = gr.Textbox(label="unsafe prompt")
+
+    with gr.Column():
+        gr.Examples(examples=[
+            ["CompVis/stable-diffusion-v1-4", "nudity", "text_grad"]
+        ], inputs=[diffusion_model_id, concept, attacker])
+
+    start_button.click(fn=excute_udiff, inputs=[diffusion_model_id, concept, attacker], outputs=result, api_name="udiff")
+
+
+# demo.queue(default_enabled=False, api_open=False, max_size=5).launch(debug=True, show_api=False)
+demo.queue().launch(server_name='0.0.0.0')
+
+# with gr.Blocks() as demo:
+#     with gr.Row():
+#         prompt = gr.Textbox(label='Input Prompt')
+#     with gr.Row():
+#         shown_columns_1 = gr.CheckboxGroup(
+#             choices=["Church","Parachute","Tench", "Garbage Truck"],
+#             label="Undersirable Objects",
+#             elem_id="column-object",
+#             interactive=True,
+#         )
+#     with gr.Row():
+#         shown_columns_2 = gr.CheckboxGroup(
+#             choices=["Van Gogh"],
+#             label="Undersirable Styles",
+#             elem_id="column-style",
+#             interactive=True,
+#         )
+#     with gr.Row():
+#         shown_columns_3 = gr.CheckboxGroup(
+#             choices=["Violence","Illegal Activity","Nudity"],
+#             label="Undersirable Concepts (Outputs that may be offensive in nature)",
+#             elem_id="column-select",
+#             interactive=True,
+#         )
+#     with gr.Row():
+#         with gr.Column(scale=1, min_width=300):
+#             img1 = gr.Image("images/cheetah.jpg",label="Unlearning")
+#         with gr.Column(scale=1, min_width=300):
+#             img2 = gr.Image("images/cheetah.jpg",label="Attacking")
+
+#     with gr.Row():
+#             # gr.Markdown("Please upload your model id.")
+#             diffusion_model_id = gr.Textbox(label='diffusion_model_id')
+#             shown_columns_4 = gr.Slider(
+#                 1, 100, value=40, 
+#                 step=1, label="Attacking Steps", info="Choose between 1 and 100",
+#                 interactive=True,)
+
+#             # concept = gr.Textbox(label='concept')
+#             attacker = gr.Textbox(label='attacker')
+
+#             start_button = gr.Button("Attack!")
+
 
-demo.launch()
+# demo.launch()