Update app.py

app.py

@@ -15,17 +15,22 @@ examples = [
     ["Fantasy dragon", None]
 ]
 
-# Custom CSS for minimalist style, horizontal example layout, and styled prompt box
+# Custom CSS for minimalist style, horizontal example layout, and simple buttons
 custom_css = """
+/* Remove border and background color for the output image preview */
+.output-image {
+    border: none !important;
+    background: none !important;
+}
 
 /* Prompt textbox styling */
 input[type="text"] {
-    border: 2px solid #ddd; /* Default border */
+    border: 2px solid #ddd;
     border-radius: 8px;
     padding: 12px;
     font-size: 16px;
     width: 100%;
-    background-color: #f94925; /* Light gray background */
+    background-color: #f9f9f9;
 }
 
 /* Examples arranged in a single line, without buttons */
@@ -42,34 +47,34 @@ input[type="text"] {
     color: #333;
     cursor: pointer;
     padding: 5px;
-    background-color: white; /* Simple white background */
-    border: 1px solid #ddd; /* Light gray border */
-    border-radius: 5px; /* Rounded corners */
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 5px;
     transition: all 0.2s ease;
 }
 
 /* Hover effect on examples */
 .gr-examples span:hover {
-    background-color: #000000; /* Light gray on hover */
-    color: #007bff; /* Change text color on hover */
-    text-decoration: underline; /* Underline text on hover */
+    background-color: #e7e7e7;
+    color: #333;
 }
 
-/* Styling for the generate button */
+/* Styling for all buttons with simple design */
 button {
-    border-radius: 50px;
-    background: linear-gradient(90deg, #ff8a00, #e52e71);
-    color: white;
+    border-radius: 8px;
+    background-color: #f0f0f0; /* Simple gray background */
+    color: #333;
     font-weight: bold;
     padding: 10px 20px;
-    border: none;
+    border: 1px solid #ccc;
     cursor: pointer;
     font-size: 16px;
     margin-top: 10px;
 }
 
 button:hover {
-    background: #fafafa;
+    background-color: #e0e0e0; /* Slightly darker on hover */
+    color: #333;
 }
 """
 
@@ -77,13 +82,13 @@ button:hover {
 interface = gr.Interface(
     fn=generate_image,
     inputs=[
-        gr.Textbox(label="Imagine Your Dream:", placeholder="Describe the scene...", interactive=True),
+        gr.Textbox(label="Imagine anything:", placeholder="Describe the scene...", interactive=True),
         gr.Slider(minimum=0, maximum=10000, step=1, label="Seed (optional)")
     ],
     outputs=gr.Image(label="Generated Image", type="pil"),
     examples=examples,
     css=custom_css,  # Apply custom CSS
-    description="Enter a creative prompt or choose an example to generate your AI-powered image.",
+    description="Enter a creative prompt or choose an example to generate your AI-powered image. Model performance may vary due to CPU usage.",
 )
 
 interface.launch()