Update app.py

app.py

@@ -78,7 +78,8 @@ css = """
     font-family: 'IBM Plex Sans', sans-serif;
     max-width: 900px;
     margin: auto;
-    padding-top: 1.5rem;
+    padding: 1.5rem; /* Add padding for spacing */
+    border: 1px solid #ccc; /* Add a subtle border */
     border-radius: 15px; /* Add rounded corners */
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a box shadow for depth */
 }
@@ -86,9 +87,9 @@ css = """
 /* Button Styles */
 .gr-button {
     color: white;
-    border-color: black;
     background: black;
-    white-space: nowrap;
+    border: none; /* Remove the border */
+    padding: 10px 20px; /* Add padding for a more prominent button */
     border-radius: 8px; /* Rounded buttons */
     transition: background-color 0.3s, color 0.3s; /* Smooth hover effect transition */
 }
@@ -98,14 +99,11 @@ css = """
     color: #fff;
 }
 
-.gr-button:focus {
-    /* [Other focus styles] */
-}
-
 /* Textbox Styles */
 .gr-textbox {
     border-radius: 8px; /* Rounded corners for textboxes */
     border: 1px solid #ccc; /* Add a subtle border */
+    padding: 10px; /* Add padding for spacing */
     transition: border-color 0.3s; /* Transition for focus effect */
 }
 
@@ -114,39 +112,18 @@ css = """
     outline: none; /* Remove default outline */
 }
 
-/* Footer Styles */
-/* [No changes needed here unless you want rounded corners] */
-
-/* Share Button Styles */
-#share-btn-container {
-    /* [Existing styles] */
-    border-radius: 20px; /* More rounded edges for the share button container */
-}
-
-/* Animation Styles */
-/* [No changes needed here] */
-
 /* Gallery Styles */
 #gallery {
-    display: flex;
-    justify-content: center; /* Center horizontally */
-    align-items: center; /* Center vertically */
-    /* [Existing styles] */
-    border-radius: 5px; /* Rounded corners for the gallery */
+    text-align: center; /* Center the content horizontally */
+    margin-top: 20px; /* Add spacing between the gallery and other elements */
 }
 
 /* Automatically adjust photo size */
 #gallery img {
-    max-width: 50%; /* Images don't exceed 50% of the gallery's width */
+    max-width: 100%; /* Images scale to fit the gallery's width */
     height: auto; /* Maintain aspect ratio */
+    border-radius: 12px; /* Rounded corners for images */
 }
-
-/* Reduce image size */
-.gradio-container img {
-    max-width: 50%; /* Images don't exceed 50% of the gallery's width */
-    height: auto; /* Maintain aspect ratio */
-}
-
 """
 
 # Creating Gradio interface