Update app.py

app.py

@@ -86,35 +86,42 @@ def generate_images(prompt, img_filepath,
     return [images[0], Image.fromarray(face_image[..., [2, 1, 0]])]
 
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=".title { color: #4CAF50; font-family: 'Trebuchet MS', Helvetica, sans-serif; }") as demo:
     gr.Markdown(
-    """
-    # IP-Adapter-FaceID-plus
-    Generate images conditioned on a image prompt and a text prompt. Learn more here: https://huggingface.co/h94/IP-Adapter-FaceID
-
-    This demo is intended to use on GPU. It will work also on CPU but generating one image could take 900 seconds compared to a few seconds on GPU.
-    """)
+        """
+        <div class="title">
+            # IP-Adapter-FaceID-plus
+        </div>
+        Generate images conditioned on an image prompt and a text prompt. Learn more here: [IP-Adapter-FaceID](https://huggingface.co/h94/IP-Adapter-FaceID).
+
+        This demo is intended to use on GPU. It will work also on CPU but generating one image could take 900 seconds compared to a few seconds on GPU.
+        """)
+    
     with gr.Row():
         with gr.Column():
             demo_inputs = []
-            demo_inputs.append(gr.Textbox(label='text prompt', value='Linkedin profile picture'))
-            demo_inputs.append(gr.Image(type='filepath', label='image prompt'))
-            with gr.Accordion(label='Advanced options', open=False):
-                demo_inputs.append(gr.Textbox(label='negative text prompt', value="monochrome, lowres, bad anatomy, worst quality, low quality, blurry"))
-                demo_inputs.append(gr.Slider(maximum=1, minimum=0, value=0.5, step=0.05, label='image prompt scale'))
+            demo_inputs.append(gr.Textbox(label='Text Prompt', value='Linkedin profile picture', placeholder="Enter a description for the image you want to generate", info="e.g., A professional profile picture, A singer on stage"))
+            demo_inputs.append(gr.Image(type='filepath', label='Image Prompt', source="upload", tool="editor", info="Upload an image to guide the generation"))
+            
+            with gr.Accordion(label='Advanced Options', open=False):
+                demo_inputs.append(gr.Textbox(label='Negative Text Prompt', value="monochrome, lowres, bad anatomy, worst quality, low quality, blurry", placeholder="Enter aspects to avoid in the generated image", info="e.g., blurry, low quality"))
+                demo_inputs.append(gr.Slider(maximum=1, minimum=0, value=0.5, step=0.05, label='Image Prompt Scale', info="Adjust the influence of the image prompt"))
+            
             btn = gr.Button("Generate")
 
         with gr.Column():
             demo_outputs = []
-            demo_outputs.append(gr.Image(label='generated image'))
-            demo_outputs.append(gr.Image(label='detected face', height=224, width=224))
+            demo_outputs.append(gr.Image(label='Generated Image', elem_id="generated-image"))
+            demo_outputs.append(gr.Image(label='Detected Face', height=224, width=224, elem_id="detected-face"))
+
     btn.click(generate_images, inputs=demo_inputs, outputs=demo_outputs)
+    
     sample_prompts = [
         'Linkedin profile picture',
         'A singer on stage',
         'A politician talking to the people',
         'An astronaut in space',
-        ]
-    gr.Examples(sample_prompts, inputs=demo_inputs[0], label='Sample prompts')
+    ]
+    gr.Examples(sample_prompts, inputs=demo_inputs[0], label='Sample Prompts')
 
-demo.launch(share=True, debug=True)
+demo.launch(share=True, debug=True)