luisoala commited on
Commit
24dca8a
Β·
1 Parent(s): 7fee061
Files changed (1) hide show
  1. app.py +82 -64
app.py CHANGED
@@ -61,70 +61,106 @@ def create_ui():
61
  with gr.Group():
62
  # Progress/status message
63
  upload_progress = gr.HTML(
64
- """<div class="progress-container">
65
- <div class="progress-status">Ready for validation</div>
66
- </div>""", visible=True)
67
 
68
  # Validation results
69
  validation_results = gr.HTML(visible=False)
70
 
71
- # Define CSS for the validation UI with extreme overrides
72
  gr.HTML("""
73
  <style>
74
- /* Force ALL elements to have the same background as the page */
75
- *, *::before, *::after,
76
- .gradio-container, .gradio-container *,
77
- .dark .gradio-container, .dark .gradio-container *,
78
- [class*="container"], [class*="panel"], [class*="box"], [class*="group"],
79
- .tab-nav, .tabitem, .tab-panel,
80
- .file-preview, .progress-container, .gr-form {
 
81
  background-color: var(--body-background-fill) !important;
82
- border-color: var(--border-color-primary) !important;
 
83
  }
84
 
85
- /* Only allow specific elements to have their own background */
86
- button.primary, .status-success, .status-error, .status-waiting {
87
- background-color: var(--primary-500) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  }
89
 
90
- /* Specific styling for status indicators */
91
  .status-success {
92
  background-color: #4caf50 !important;
93
  }
 
94
  .status-error {
95
  background-color: #f44336 !important;
96
  }
97
 
98
- /* Set max width and center the app */
99
- .gradio-container {
100
- max-width: 650px !important;
101
- margin: 0 auto !important;
102
  }
103
 
104
- /* Ensure borders for element definition */
105
- .file-preview, .gr-box, .progress-container, .validation-step {
106
- border: 1px solid var(--border-color-primary) !important;
107
- border-radius: 8px !important;
 
 
 
 
 
108
  }
109
 
110
- /* Ensure good spacing */
111
- .progress-container {
112
- min-height: 50px;
113
- padding: 12px;
114
- margin-bottom: 10px;
115
  }
116
 
117
- /* Override any other potential background settings */
118
- .gr-panel, .gr-box, .gr-form {
119
- background-image: none !important;
 
120
  }
121
 
122
- /* Tab styling */
123
- .tabs > .tab-nav > button {
124
- border-bottom: 2px solid transparent;
 
125
  }
126
- .tabs > .tab-nav > button.selected {
127
- border-bottom: 2px solid var(--primary-500);
128
  }
129
  </style>
130
  """)
@@ -133,29 +169,19 @@ def create_ui():
133
  def on_tab_change(evt: gr.SelectData):
134
  tab_id = evt.value
135
  if tab_id == "Upload File":
136
- return "upload", """<div class="progress-container">
137
- <div class="progress-status">Ready for upload</div>
138
- </div>""", gr.update(visible=False)
139
  else:
140
- return "url", """<div class="progress-container">
141
- <div class="progress-status">Enter a URL to fetch</div>
142
- </div>""", gr.update(visible=False)
143
 
144
  def on_file_upload(file):
145
  if file is None:
146
- return """<div class="progress-container">
147
- <div class="progress-status">Ready for upload</div>
148
- </div>""", gr.update(visible=False)
149
 
150
- return """<div class="progress-container">
151
- <div class="progress-status">βœ… File uploaded successfully</div>
152
- </div>""", gr.update(visible=False)
153
 
154
  def fetch_from_url(url):
155
  if not url:
156
- return """<div class="progress-container">
157
- <div class="progress-status">Please enter a URL</div>
158
- </div>""", gr.update(visible=False)
159
 
160
  try:
161
  # Fetch JSON from URL
@@ -164,9 +190,7 @@ def create_ui():
164
  json_data = response.json()
165
 
166
  # Show success message
167
- progress_html = """<div class="progress-container">
168
- <div class="progress-status">βœ… JSON fetched successfully from URL</div>
169
- </div>"""
170
 
171
  # Validate the fetched JSON
172
  results = []
@@ -185,19 +209,13 @@ def create_ui():
185
 
186
  except requests.exceptions.RequestException as e:
187
  error_message = f"❌ Error fetching URL: {str(e)}"
188
- return f"""<div class="progress-container">
189
- <div class="progress-status">{error_message}</div>
190
- </div>""", gr.update(visible=False)
191
  except json.JSONDecodeError as e:
192
  error_message = f"❌ URL did not return valid JSON: {str(e)}"
193
- return f"""<div class="progress-container">
194
- <div class="progress-status">{error_message}</div>
195
- </div>""", gr.update(visible=False)
196
  except Exception as e:
197
  error_message = f"❌ Unexpected error: {str(e)}"
198
- return f"""<div class="progress-container">
199
- <div class="progress-status">{error_message}</div>
200
- </div>""", gr.update(visible=False)
201
 
202
  def build_results_html(results):
203
  # Build validation results HTML
 
61
  with gr.Group():
62
  # Progress/status message
63
  upload_progress = gr.HTML(
64
+ """<div class="progress-status">Ready for validation</div>""",
65
+ visible=True)
 
66
 
67
  # Validation results
68
  validation_results = gr.HTML(visible=False)
69
 
70
+ # Define CSS for the validation UI with improved results fields and hints
71
  gr.HTML("""
72
  <style>
73
+ /* Set max width and center the app */
74
+ .gradio-container {
75
+ max-width: 650px !important;
76
+ margin: 0 auto !important;
77
+ }
78
+
79
+ /* Make basic containers transparent */
80
+ .gr-group, .gr-box, .gr-panel, .gradio-box, .gradio-group {
81
  background-color: var(--body-background-fill) !important;
82
+ border: none !important;
83
+ box-shadow: none !important;
84
  }
85
 
86
+ /* Style for expandable validation steps */
87
+ .validation-step {
88
+ margin-bottom: 12px;
89
+ border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.2));
90
+ border-radius: 8px;
91
+ overflow: hidden;
92
+ }
93
+
94
+ .step-header {
95
+ padding: 10px 15px;
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: space-between;
99
+ cursor: pointer;
100
+ background-color: rgba(0, 0, 0, 0.03) !important; /* Very subtle background */
101
+ }
102
+
103
+ .step-left {
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 10px;
107
+ }
108
+
109
+ .step-status {
110
+ width: 24px;
111
+ height: 24px;
112
+ border-radius: 50%;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ font-weight: bold;
117
+ color: white;
118
  }
119
 
 
120
  .status-success {
121
  background-color: #4caf50 !important;
122
  }
123
+
124
  .status-error {
125
  background-color: #f44336 !important;
126
  }
127
 
128
+ .step-details {
129
+ padding: 12px 15px;
130
+ border-top: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
131
+ background-color: var(--body-background-fill) !important;
132
  }
133
 
134
+ /* User hints styling - italic, smaller, no border */
135
+ .progress-status {
136
+ font-style: italic;
137
+ font-size: 0.9em;
138
+ color: var(--body-text-color-subdued);
139
+ padding: 8px 0;
140
+ width: 100%;
141
+ background: none !important;
142
+ border: none !important;
143
  }
144
 
145
+ /* Override input containers to match page background */
146
+ .gr-input-container, .gr-form, .gr-input, .gr-box, .gr-panel,
147
+ .file-preview, .file-preview > div {
148
+ background-color: var(--body-background-fill) !important;
 
149
  }
150
 
151
+ /* Ensure buttons have proper styling */
152
+ button.primary, button[data-testid="primary-button"] {
153
+ background-color: var(--primary-500) !important;
154
+ color: white !important;
155
  }
156
 
157
+ /* Arrow indicator for expandable sections */
158
+ .arrow-indicator {
159
+ font-size: 14px;
160
+ transition: transform 0.3s ease;
161
  }
162
+ .arrow-down {
163
+ transform: rotate(90deg);
164
  }
165
  </style>
166
  """)
 
169
  def on_tab_change(evt: gr.SelectData):
170
  tab_id = evt.value
171
  if tab_id == "Upload File":
172
+ return "upload", """<div class="progress-status">Ready for upload</div>""", gr.update(visible=False)
 
 
173
  else:
174
+ return "url", """<div class="progress-status">Enter a URL to fetch</div>""", gr.update(visible=False)
 
 
175
 
176
  def on_file_upload(file):
177
  if file is None:
178
+ return """<div class="progress-status">Ready for upload</div>""", gr.update(visible=False)
 
 
179
 
180
+ return """<div class="progress-status">βœ… File uploaded successfully</div>""", gr.update(visible=False)
 
 
181
 
182
  def fetch_from_url(url):
183
  if not url:
184
+ return """<div class="progress-status">Please enter a URL</div>""", gr.update(visible=False)
 
 
185
 
186
  try:
187
  # Fetch JSON from URL
 
190
  json_data = response.json()
191
 
192
  # Show success message
193
+ progress_html = """<div class="progress-status">βœ… JSON fetched successfully from URL</div>"""
 
 
194
 
195
  # Validate the fetched JSON
196
  results = []
 
209
 
210
  except requests.exceptions.RequestException as e:
211
  error_message = f"❌ Error fetching URL: {str(e)}"
212
+ return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
 
 
213
  except json.JSONDecodeError as e:
214
  error_message = f"❌ URL did not return valid JSON: {str(e)}"
215
+ return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
 
 
216
  except Exception as e:
217
  error_message = f"❌ Unexpected error: {str(e)}"
218
+ return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
 
 
219
 
220
  def build_results_html(results):
221
  # Build validation results HTML