Update app.py

app.py

@@ -12,20 +12,63 @@ sys.modules["torchvision.transforms.functional_tensor"] = functional
 # --- EMBEDDED CSS FOR STYLING ---
 CSS_STYLING = """
 :root {
-    --primary: #6a35ee; --primary-dark: #4a1dcc; --secondary: #00c9ff;
-    --accent: #ff6b6b; --light: #f8f9ff; --dark: #1a1f36; --text: #4a5568;
-    --input-background-fill: var(--light) !important;
-    --input-border-color: #e0e0e0 !important;
-    --input-label-color: var(--text) !important;
+    --primary: hsl(265, 100%, 61%); /* Accent Purple */
+    --secondary: hsl(327, 100%, 72%); /* Accent Pink */
+    --blue: hsl(204, 100%, 72%); /* Accent Blue */
+    --background-darker: hsl(240, 14%, 3%);
+    --background-dark: hsl(240, 14%, 5%);
+    --card-background: hsl(240, 10%, 7%);
+    --light-text: hsl(240, 5%, 90%);
+    --muted-text: hsl(240, 4%, 65%);
+    --error-text: hsl(0, 100%, 74%);
+    --card-border: hsl(253, 100%, 72%, 0.15);
+
+    --input-background-fill: var(--card-background) !important;
+    --input-border-color: var(--card-border) !important;
+    --input-label-color: var(--light-text) !important;
+}
+.gradio-container {
+    background: var(--background-dark);
+    font-family: 'Inter', sans-serif;
+}
+#main-title {
+    color: var(--light-text);
+    text-align: center;
+    font-size: 2.5rem !important;
+    font-weight: 900;
+}
+#main-subtitle {
+    color: var(--muted-text);
+    text-align: center;
+    font-size: 1rem !important;
+    margin-top: -15px;
+    margin-bottom: 20px;
+}
+#submit-button {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+    font-weight: bold;
+    border-radius: 8px !important;
+    transition: all 0.3s ease;
+}
+#submit-button:hover {
+    box-shadow: 0px 4px 15px rgba(124, 58, 237, 0.4); /* Subtle purple shadow */
+    transform: translateY(-2px);
+}
+.gr-image {
+    border: 1px solid var(--card-border) !important;
+    border-radius: 12px !important;
+    min-height: 300px;
+}
+input[type="range"]::-webkit-slider-thumb {
+    background: var(--primary) !important;
+}
+input[type="range"]::-moz-range-thumb {
+    background: var(--primary) !important;
+}
+.gr-radio > div {
+    color: var(--light-text) !important;
 }
-.gradio-container { background: var(--light); font-family: 'Inter', sans-serif; }
-#main-title { color: var(--dark); text-align: center; font-size: 2.5rem !important; font-weight: 900; }
-#main-subtitle { color: var(--text); text-align: center; font-size: 1rem !important; margin-top: -15px; margin-bottom: 20px; }
-#submit-button { background: var(--primary); color: white; font-weight: bold; border-radius: 8px !important; transition: all 0.3s ease; }
-#submit-button:hover { background: var(--primary-dark); box-shadow: 0px 4px 15px rgba(106, 53, 238, 0.4); transform: translateY(-2px); }
-.gr-image { border: 1px dashed var(--input-border-color) !important; border-radius: 12px !important; min-height: 300px; }
-input[type="range"]::-webkit-slider-thumb { background: var(--primary) !important; }
-input[type="range"]::-moz-range-thumb { background: var(--primary) !important; }
 """
 
 # --- DOWNLOAD HELPER FUNCTIONS ---
@@ -143,4 +186,4 @@ with gr.Blocks(css=CSS_STYLING, theme=gr.themes.Base()) as demo:
 
 if __name__ == "__main__":
     demo.queue()
-    demo.launch(share=True) # Set share=False if you don't need a public link
+    demo.launch(share=True)