update layout and bug fix for temp file name length

app.py

@@ -17,7 +17,21 @@ pipe.enable_xformers_memory_efficient_attention()
 pipe.unet.to(memory_format=torch.channels_last)
 
 
-help_text = """ Some notes from the official [instruct-pix2pix](https://huggingface.co/spaces/timbrooks/instruct-pix2pix) Space by the authors and from the official [Diffusers docs](https://huggingface.co/docs/diffusers/main/en/api/pipelines/stable_diffusion/pix2pix) -
+
+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 
+    as a precautionary measure to protect all users. We appreciate your cooperation in 
+    maintaining a safe and appropriate environment for all members of our community.**
+    
+    New features and bug-fixes: 
+    
+    1. Chat style interface
+    2. Now use **'reverse'** as prompt to get back the previous image after an unwanted edit
+    3. Use **'restart'** as prompt to get back to original image and start over!
+    4. Now you can load larger image files (~5 mb) as well
+
+Some notes from the official [instruct-pix2pix](https://huggingface.co/spaces/timbrooks/instruct-pix2pix) Space by the authors and from the official [Diffusers docs](https://huggingface.co/docs/diffusers/main/en/api/pipelines/stable_diffusion/pix2pix) -
 
 If you're not getting what you want, there may be a few reasons:
 1. Is the image not changing enough? Your guidance_scale may be too low. It should be >1. Higher guidance scale encourages to generate images 
@@ -27,15 +41,48 @@ be to the input. This pipeline requires a value of at least `1`. It's possible y
 2. Alternatively, you can toggle image_guidance_scale. Image guidance scale is to push the generated image towards the inital image. Image guidance 
                 scale is enabled by setting `image_guidance_scale > 1`. Higher image guidance scale encourages to generate images that are closely 
                 linked to the source image `image`, usually at the expense of lower image quality.  
-
 3. I have observed that rephrasing the instruction sometimes improves results (e.g., "turn him into a dog" vs. "make him a dog" vs. "as a dog").
-
 4. Increasing the number of steps sometimes improves results.
-
 5. Do faces look weird? The Stable Diffusion autoencoder has a hard time with faces that are small in the image. Try:
     * Cropping the image so the face takes up a larger portion of the frame.
 """
 
+css = """
+#col-container {max-width: 580px; margin-left: auto; margin-right: auto;}
+a {text-decoration-line: underline; font-weight: 600;}
+.footer {
+        margin-bottom: 45px;
+        margin-top: 10px;
+        text-align: center;
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .footer>p {
+        font-size: .8rem;
+        display: inline-block;
+        padding: 0 10px;
+        transform: translateY(10px);
+        background: white;
+    }
+    .dark .footer {
+        border-color: #303030;
+    }
+    .dark .footer>p {
+        background: #0b0f19;
+    }
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+"""
+
+
 def previous(image):
     return image 
 
@@ -69,7 +116,7 @@ def chat(btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scal
       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()))+'.png' 
+      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
@@ -109,7 +156,7 @@ def chat(btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scal
       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()))+'.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)
@@ -123,25 +170,27 @@ def chat(btn_upload, image_in, in_steps, in_guidance_scale, in_img_guidance_scal
         
 
 #Blocks layout
-with gr.Blocks() as demo:
-    gr.Markdown("""<h1><center> Chat Interface with InstructPix2Pix: Give Image Editing Instructions</h1></center>
-    <p>For faster inference without waiting in the queue, you may duplicate the space and upgrade to GPU in settings.<br/>
-    <a href="https://huggingface.co/spaces/ysharma/InstructPix2Pix_Chatbot?duplicate=true">
-    <img style="margin-top: 0em; margin-bottom: 0em" src="https://bit.ly/3gLdBN6" alt="Duplicate Space"></a>
-    
-    **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 
-    as a precautionary measure to protect all users. We appreciate your cooperation in 
-    maintaining a safe and appropriate environment for all members of our community.**
-
-    New features and bug-fixes: 
-    
-    1. Now use 'reverse' as prompt to get back the previous image after an unwanted edit
-    2. Use 'restart' as prompt to get back to original image and start over!
-    3. Now you can load larger images (~5 mb) as well
-    
-    <p/>""")
-    with gr.Column():
+with gr.Blocks(css="style.css") as demo:
+    with gr.Column(elem_id="col-container"):
+        gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
+                <div
+                style="
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.8rem;
+                    font-size: 1.75rem;
+                "
+                >
+                <h1 style="font-weight: 900; margin-bottom: 7px; margin-top: 5px;">
+                    ChatPix2Pix: Image Editing by Instructions
+                </h1>
+                </div>
+                <p style="margin-bottom: 10px; font-size: 94%">
+                For faster inference without waiting in the queue, you may duplicate the space and upgrade to GPU in settings <a href="https://huggingface.co/spaces/ysharma/InstructPix2Pix_Chatbot?duplicate=true"><img style="margin-top: 0em; margin-bottom: 0em" src="https://bit.ly/3gLdBN6" alt="Duplicate Space"></a>
+                <a href="https://huggingface.co/timbrooks/instruct-pix2pix" target="_blank">Diffusers implementation of instruct-pix2pix</a> - InstructPix2Pix: Learning to Follow Image Editing Instructions!
+                </p>
+            </div>""")
+        #gr.Markdown("""<h1><center>dummy</h1></center> """)
         chatbot = gr.Chatbot()
         state_in = gr.State()
         with gr.Row():