Update app.py

app.py

@@ -13,6 +13,7 @@ def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
 
     payload = {"input": {}}
     
+    
     base_url = "http://0.0.0.0:7860"
     for i, key in enumerate(names):
         value = args[i]
@@ -23,6 +24,7 @@ def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
 
     response = requests.post("http://0.0.0.0:5000/predictions", headers=headers, json=payload)
 
+    
     if response.status_code == 201:
         follow_up_url = response.json()["urls"]["get"]
         response = requests.get(follow_up_url, headers=headers)
@@ -33,6 +35,7 @@ def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
             time.sleep(1)
     if response.status_code == 200:
         json_response = response.json()
+        #If the output component is JSON return the entire output response 
         if(outputs[0].get_config()["name"] == "json"):
             return json_response["output"]
         predict_outputs = parse_outputs(json_response["output"])
@@ -48,23 +51,33 @@ def check_password(password):
     return password == "pixo"
 
 css = '''
+#top{position: fixed;}
+
 body {
     font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
+    transition: background-color 0.3s, color 0.3s;
 }
+
+body.dark-mode {
+    background-color: #1a1a1a;
+    color: #ffffff;
+}
+
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
-    background-color: white;
+    background-color: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
+
 .gradio-slider input[type="range"] {
-    accent-color: #3498db;
+    accent-color: #ff69b4;
 }
+
 .gradio-button {
-    background-color: #3498db;
+    background-color: #9370db;
     color: white;
     border: none;
     padding: 10px 20px;
@@ -72,16 +85,20 @@ body {
     cursor: pointer;
     transition: background-color 0.3s;
 }
+
 .gradio-button:hover {
-    background-color: #2980b9;
+    background-color: #8a2be2;
 }
-#top {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    max-width: 300px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1a1a1a;
+        color: #ffffff;
+    }
+    
+    .container {
+        background-color: rgba(255, 255, 255, 0.05);
+    }
 }
 '''