update layout, bug fixes

app.py

@@ -17,7 +17,6 @@ pipe.enable_xformers_memory_efficient_attention()
 pipe.unet.to(memory_format=torch.channels_last)
 
 
-
 help_text = """ 
 **Note: Please be advised that a safety checker has been implemented in this public space. 
     Any attempts to generate inappropriate or NSFW images will result in the display of a black screen 
@@ -88,6 +87,12 @@ def previous(image):
 
 def upload_image(file):
     return Image.open(file)
+
+def upload_button_config():
+    return gr.update(visible=False)
+
+def upload_textbox_config(text_in):
+    return gr.update(visible=True)
     
 def chat(btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scale, image_hid, img_name, counter_out, image_oneup, prompt, history, progress=gr.Progress(track_tqdm=True)):
     progress(0, desc="Starting...")
@@ -112,51 +117,41 @@ def chat(btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scal
         return history, history, image_in, temp_img_name, counter_out
     #adding supportive sample text
     add_text_list = ["There you go", "Enjoy your image!", "Nice work! Wonder what you gonna do next!", "Way to go!", "Does this work for you?", "Something like this?"]        
-    if counter_out > 1:
-      edited_image = pipe(prompt, image=image_hid, num_inference_steps=int(in_steps), guidance_scale=float(in_guidance_scale), image_guidance_scale=float(in_img_guidance_scale)).images[0]
-      if os.path.exists(img_name):
-        os.remove(img_name)
-      temp_img_name = img_name[:-4]+str(int(time.time()))[-4:]+'.png' 
-      # Create a file-like object
-      with open(temp_img_name, "wb") as fp:
-        # Save the image to the file-like object
-        edited_image.save(fp)
-      #Get the name of the saved image
-      saved_image_name2 = fp.name
-      #edited_image.save(temp_img_name) #, overwrite=True)
-      history = history or []
-      response = random.choice(add_text_list) + '<img src="/file=' + saved_image_name2 + '">'  
-      history.append((prompt, response))
-      counter_out += 1
-      return history, history, edited_image, temp_img_name, counter_out
-    elif counter_out == 0:
-      seed = random.randint(0, 1000000)
-      img_name = f"./edited_image_{seed}.png"
+    if counter_out == 0:
+      t1 = time.time()
+      print(f"Time at start = {t1}")
       #convert file object to image
       image_in = Image.open(btn_upload)
+      
       #Resizing the image
       basewidth = 512
       wpercent = (basewidth/float(image_in.size[0]))
       hsize = int((float(image_in.size[1])*float(wpercent)))
       image_in = image_in.resize((basewidth,hsize), Image.Resampling.LANCZOS)
-      if os.path.exists(img_name):
-        os.remove(img_name)
-      with open(img_name, "wb") as fp:
-        # Save the image to the file-like object
-        image_in.save(fp)
-      #Get the name of the saved image
-      saved_image_name0 = fp.name
+            
+      # Save the image to the file-like object
+      seed = random.randint(0, 1000000)
+      img_name = f"./edited_image_{seed}.png"
+      image_in.save(img_name)
+      
+      #add state
       history = history or []
-      response = '<img src="/file=' + img_name + '">'   #IMG_NAME
+      response = '<img src="/file=' + img_name + '">'
       history.append((prompt, response))
       counter_out += 1
+      
+      t2 = time.time()
+      print(f"Time at end = {t2}")
+      time_diff = t2-t1
+      print(f"Time taken = {time_diff}")
       return history, history, image_in, img_name, counter_out
+    
     elif counter_out == 1:        
       #instruct-pix2pix inference
       edited_image = pipe(prompt, image=image_in, num_inference_steps=int(in_steps), guidance_scale=float(in_guidance_scale), image_guidance_scale=float(in_img_guidance_scale)).images[0]
       if os.path.exists(img_name):
         os.remove(img_name)
-      temp_img_name = img_name[:-4]+str(int(time.time()))[-4:]+'.png' 
+      temp_img_name = img_name[:-4]+str(int(time.time()))[-4:] +'.png' 
       with open(temp_img_name, "wb") as fp:
         # Save the image to the file-like object
         edited_image.save(fp)
@@ -167,6 +162,24 @@ def chat(btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scal
       history.append((prompt, response))
       counter_out += 1
       return history, history, edited_image, temp_img_name, counter_out
+    
+    elif counter_out > 1:
+      edited_image = pipe(prompt, image=image_hid, num_inference_steps=int(in_steps), guidance_scale=float(in_guidance_scale), image_guidance_scale=float(in_img_guidance_scale)).images[0]
+      if os.path.exists(img_name):
+        os.remove(img_name)
+      temp_img_name = img_name[:-4]+str(int(time.time()))[-4:]+'.png' 
+      # Create a file-like object
+      with open(temp_img_name, "wb") as fp:
+        # Save the image to the file-like object
+        edited_image.save(fp)
+      #Get the name of the saved image
+      saved_image_name2 = fp.name
+      #edited_image.save(temp_img_name) #, overwrite=True)
+      history = history or []
+      response = random.choice(add_text_list) + '<img src="/file=' + saved_image_name2 + '">'  
+      history.append((prompt, response))
+      counter_out += 1
+      return history, history, edited_image, temp_img_name, counter_out
         
 
 #Blocks layout
@@ -191,12 +204,6 @@ with gr.Blocks(css="style.css") as demo:
                 Based on <a href="https://huggingface.co/timbrooks/instruct-pix2pix" target="_blank">Diffusers implementation</a> of InstructPix2Pix.
                 </p>
             </div>""")
-        #gr.Markdown("""<h1><center>dummy</h1></center> """)
-        chatbot = gr.Chatbot()
-        state_in = gr.State()
-        with gr.Row():
-            text_in = gr.Textbox(value='', placeholder="Type your instructions here and press Enter", label="Type and press Enter")
-            btn_upload = gr.UploadButton("Upload image", file_types=["image"], file_count="single")
         with gr.Accordion("Advance settings for Training and Inference", open=False):
           image_in = gr.Image(visible=False,type='pil', label="Original Image")
           gr.Markdown("Advance settings for - Number of Inference steps, Guidanace scale, and Image guidance scale.")
@@ -207,13 +214,28 @@ with gr.Blocks(css="style.css") as demo:
           image_oneup = gr.Image(type='pil', visible=False)
           img_name_temp_out = gr.Textbox(visible=False)
           counter_out = gr.Number(visible=False, value=0, precision=0)
+            
+        #with gr.Row():
+        text_in = gr.Textbox(value='', Placeholder="Type your instructions here and press enter", elem_id = "input_prompt", visible=False, label='Great! Now you can edit your image with Instructions')
+        btn_upload = gr.UploadButton("Upload image", file_types=["image"], file_count="single", elem_id="upload_button")
+        
+        chatbot = gr.Chatbot(elem_id = 'chatbot-component')
+        state_in = gr.State()
 
+    #Using Event Listeners
     btn_upload.upload(chat,
                       [btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scale, image_hid, img_name_temp_out,counter_out, image_oneup,  text_in, state_in], 
                       [chatbot, state_in, image_in, img_name_temp_out, counter_out])
+    btn_upload.upload(fn = upload_textbox_config, inputs=text_in, outputs = text_in)
+
     text_in.submit(chat,[btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scale, image_hid, img_name_temp_out,counter_out, image_oneup,  text_in, state_in], [chatbot, state_in, image_hid, img_name_temp_out, counter_out])
     text_in.submit(previous, [image_hid], [image_oneup])
-    gr.Markdown(help_text)
+    
+    chatbot.change(fn = upload_button_config, outputs=btn_upload) #, scroll_to_output = True)
+    text_in.submit(None, [], [], _js = "() => document.getElementById('#chatbot-component').scrollTop = document.getElementById('#chatbot-component').scrollHeight")
+
+    with gr.Accordion("Release Notes", open=False):
+        gr.Markdown(help_text)
     
 demo.queue(concurrency_count=10)
 demo.launch(debug=True, width="80%", height=2000)