Create style.css

style.css

@@ -0,0 +1,57 @@
+/* custom_styles.css */
+
+/* Dark theme styles */
+body {
+    background-color: #1a1a1a; /* Dark background color */
+    color: #ffffff; /* Light text color */
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Custom font family */
+    margin: 0; /* Remove default body margin */
+}
+
+/* Container styles */
+.gradio-interface {
+    max-width: 800px; /* Limit interface width */
+    margin: auto; /* Center interface horizontally */
+    padding: 20px; /* Add padding around the interface */
+}
+
+/* Title and description styles */
+.gradio-title {
+    color: #ff5733; /* Custom title color */
+    font-size: 36px; /* Custom title font size */
+    margin-bottom: 20px; /* Add space below the title */
+}
+
+.gradio-description {
+    font-size: 18px; /* Custom description font size */
+    margin-bottom: 20px; /* Add space below the description */
+}
+
+/* Button styles */
+.gradio-interface input[type="file"] {
+    background-color: #ff5733; /* Custom button background color */
+    color: #ffffff; /* Button text color */
+    font-size: 16px; /* Custom button font size */
+    padding: 10px 20px; /* Add padding to the button */
+    border: none; /* Remove button border */
+    border-radius: 5px; /* Add button border radius */
+    cursor: pointer; /* Change cursor to pointer on hover */
+    transition: background-color 0.3s; /* Smooth transition for background color */
+}
+
+.gradio-interface input[type="file"]:hover {
+    background-color: #e64a19; /* Darker background color on hover */
+}
+
+/* Output text styles */
+.gr-output .gr-output-text {
+    font-size: 24px; /* Custom output text font size */
+    margin-top: 20px; /* Add space above the output text */
+}
+
+/* Image output styles */
+.gr-output .gr-output-image img {
+    border: 5px solid #ff5733; /* Custom border color for output images */
+    border-radius: 10px; /* Add border radius to images */
+    max-width: 100%; /* Ensure images don't exceed container width */
+}