add placeholders for gradio

app.py

@@ -86,7 +86,7 @@ def prompt_to_layout(user_prompt, fpath=None):
     
     _, im = draw_polygons(geom, colors, fpath=fpath)
     
-    legend = Image.open(r"C:\\Users\\user\\Desktop\\legend3.png")
+    legend = Image.open("legend.png")
     
     im = np.array(im)
     im[:40, :] = np.array(legend)
@@ -111,7 +111,7 @@ def mut_txt2layout(mut_output):
     colors = [housegan_colors[housegan_labels[space]] for space in spaces]
     _, im = draw_polygons(geom, colors, fpath=None)
 
-    legend = Image.open(r"C:\\Users\\user\\Desktop\\legend3.png")
+    legend = Image.open("legend.png")
 
     im = np.array(im)
     im[:40, :] = np.array(legend)
@@ -138,13 +138,81 @@ def prompt_with_mutation(user_prompt, fpath=None):
     
 # Gradio App
 
+custom_css="""
+@import url("https://use.typekit.net/nid3pfr.css");
+.gradio_page {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0px;
+  max-width: 100vw;
+  background: #FFFFFF;
+}
+.gradio_interface {
+  width: 100vw;
+  max-width: 1500px;
+}
+.gradio_interface[theme=default] .panel_buttons {
+  justify-content: flex-end;
+}
+.gradio_interface[theme=default] .panel_button {
+  flex: 0 0 0;
+  min-width: 150px;
+}
+.gradio_interface[theme=default] .panel_button.submit { 
+  background: #11213A;
+  border-radius: 5px;
+  color: #FFFFFF;
+  text-transform: uppercase;
+  min-width: 150px;
+  height: 4em;
+  letter-spacing: 0.15em;
+  flex: 0 0 0;
+}
+.gradio_interface[theme=default] .panel_button.submit:hover { 
+  background: #000000;
+}
+.input_text {
+  font: 200 50px garamond-premier-pro-display, serif;
+  line-height: 115%;
+  color: #11213A;
+  border-radius: 0px;
+  border: 3px solid #11213A;
+}
+.input_text:focus {
+  border-color: #FA7880;
+}
+.gradio_interface[theme=default] .input_text input, 
+.gradio_interface[theme=default] .input_text textarea {
+  padding: 30px;
+}
+.input_text textarea:focus-visible { 
+  outline: none;
+}
+.panel:nth-child(1) {
+  margin-left: 50px;
+  margin-right: 50px;
+  margin-top: 80px;
+  margin-bottom: 80px;
+  max-width: 750px;
+}
+.panel:nth-child(2) {
+  background: #D3ECF5;
+}
+.gradio_interface[theme=default] .component_set  {
+  background: transparent;
+}"""
+
 def gen_and_mutate(user_prompt, mutate=False):    
     if(mutate):
         im, mut_im = None, None
         while (mut_im is None):
             im, mut_im, output, mut_output = prompt_with_mutation(user_prompt)
     else:
-        mut_im=Image.open(r"C:\\Users\\user\\Desktop\\empty.png")
+        mut_im=Image.open("empty.png")
         im, _ = prompt_to_layout(user_prompt)
 
     return im, mut_im
@@ -156,7 +224,8 @@ generated = gr.outputs.Image(label='Generated Layout')
 mutated = gr.outputs.Image(label='Mutated Layout')
 
 iface = gr.Interface(fn=gen_and_mutate, inputs=[textbox, checkbox], outputs=[generated, mutated],
-                      thumbnail=r"E:\Datasets\MyFloorplans\text2text\thumbnail_gradio.PNG",
+                      css=custom_css,
+                      thumbnail="thumbnail_gradio.PNG",
                       description='Demo of Semantic Generation of Residential Layouts \n',
                       article='''<div>
     <p> This app allows users the use of natural language prompts for appartment layout generation, using a variety of semantic information:</p>