Update app.py

app.py

@@ -160,7 +160,7 @@ class GradioInterface:
     background: white;
     position: relative;
     width: 100% !important;
-   # max-width: 800px !important;
+    max-width: 800px !important;
     margin: 0 auto 20px auto !important;
 }
 
@@ -175,25 +175,10 @@ class GradioInterface:
     font-size: 1.2em;
 }
 
-.container::after {
-    content: '' !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    background-image: url('your-image-url.jpg') !important;
-    background-size: cover !important;
-    background-position: center !important;
-    opacity: 0.05 !important;
-    z-index: -1 !important;
-    border-radius: 10px !important;
-}
-
 .title-container {
     width: fit-content !important;
     margin: 0 auto !important;
-    padding: 2px 10px !important;
+    padding: 2px 40px !important;
     border: 1px solid #0066cc !important;
     border-radius: 10px !important;
     background-color: rgba(0, 102, 204, 0.05) !important;
@@ -236,30 +221,43 @@ class GradioInterface:
     content: 'EXAMPLES';
 }
 
-.container2 {
-    border: 1px solid #CBDCEB !important;
-    border-radius: 8px !important;
-    padding: 8px !important;
-    margin: 6px 0 !important;
-    background: white !important;
-}
-
+/* Resizable textbox */
 .input-container textarea {
-    height: 200px !important;
+    resize: vertical !important;
+    min-height: 100px !important;
+    max-height: 500px !important;
+    width: 100% !important;
+    border: 1px solid #ddd !important;
+    border-radius: 4px !important;
+    padding: 8px !important;
+    transition: all 0.3s ease !important;
 }
 
-.no-background {
-    background: transparent !important;
+.input-container textarea:focus {
+    border-color: #2196F3 !important;
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important;
 }
 
-/* Update radio container background color */
-.input-container .gradio-radio {
+/* Radio group styling */
+.radio-group {
     background-color: rgba(0, 102, 204, 0.05) !important;
-    border-radius: 8px !important;
     padding: 10px !important;
+    border-radius: 8px !important;
+    border: 1px solid rgba(0, 102, 204, 0.1) !important;
+    display: flex !important;
+    justify-content: center !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+    width: 100% !important;
+}
+
+.gradio-radio {
+    display: flex !important;
+    justify-content: center !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
 }
 
-/* Style for radio button labels */
 .gradio-radio label {
     display: flex !important;
     align-items: center !important;
@@ -268,9 +266,9 @@ class GradioInterface:
     border-radius: 4px !important;
     cursor: pointer !important;
     background: white !important;
+    margin: 4px !important;
 }
 
-/* Style for selected radio button */
 .gradio-radio input[type="radio"]:checked + label {
     background: rgba(0, 102, 204, 0.1) !important;
     border-color: #0066cc !important;
@@ -278,29 +276,22 @@ class GradioInterface:
     font-weight: bold !important;
 }
 
-/* Radio group container */
-.radio-group {
-    background-color: rgb(203, 220, 235) !important;
-    padding: 10px !important;
-    border-radius: 8px !important;
-    border: 1px solid #0066cc !important;
-}
-
-/* Textbox styling */
-.gradio-textbox textarea {
-    border: 1px solid #ddd !important;
-    border-radius: 4px !important;
-    padding: 8px !important;
-    min-height: 100px !important;
-}
-
 /* Button styling */
 .gradio-button {
-    background-color: #2196F3 !important;
-    color: white !important;
+    background-color: white !important;
+    color: #2196F3 !important;
+    border: 2px solid #2196F3 !important;
     border-radius: 4px !important;
     padding: 8px 16px !important;
     margin: 10px 0 !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease !important;
+}
+
+.gradio-button:hover {
+    background-color: #2196F3 !important;
+    color: white !important;
+    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important;
 }
 
 /* Accordion styling */
@@ -309,43 +300,28 @@ class GradioInterface:
     border: none !important;
 }
 
-/* Fix container alignment */
+/* Container alignment */
 .gradio-container {
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     width: 100% !important;
-    #max-width: 800px !important;
+    max-width: 800px !important;
     margin: 0 auto !important;
 }
-/* Button styling - updated */
-.gradio-button {
-    background-color: white !important;
-    color: #2196F3 !important;
-    border: 2px solid #2196F3 !important;
-    border-radius: 4px !important;
-    padding: 8px 16px !important;
-    margin: 10px 0 !important;
-    font-weight: bold !important;
-    transition: all 0.3s ease !important;
-}
-
-.gradio-button:hover {
-    background-color: #2196F3 !important;
-    color: white !important;
-    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important;
-}
 
-/* Specific button styling if needed */
-#refine-button, #apply-button {
-    background-color: white !important;
-    color: #2196F3 !important;
-    border: 2px solid #2196F3 !important;
+/* Dropdown styling */
+.gradio-dropdown {
+    width: 100% !important;
+    max-width: 300px !important;
 }
 
-#refine-button:hover, #apply-button:hover {
-    background-color: #2196F3 !important;
-    color: white !important;
+/* JSON container */
+.full-response-json {
+    margin-top: 20px !important;
+    padding: 10px !important;
+    background-color: rgba(0, 102, 204, 0.05) !important;
+    border-radius: 8px !important;
 }
 """