colors
Browse files
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-
|
65 |
-
|
66 |
-
</div>""", visible=True)
|
67 |
|
68 |
# Validation results
|
69 |
validation_results = gr.HTML(visible=False)
|
70 |
|
71 |
-
# Define CSS for the validation UI with
|
72 |
gr.HTML("""
|
73 |
<style>
|
74 |
-
/*
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
|
80 |
-
|
|
|
81 |
background-color: var(--body-background-fill) !important;
|
82 |
-
border
|
|
|
83 |
}
|
84 |
|
85 |
-
/*
|
86 |
-
|
87 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
|
99 |
-
|
100 |
-
|
101 |
-
|
102 |
}
|
103 |
|
104 |
-
/*
|
105 |
-
.
|
106 |
-
|
107 |
-
|
|
|
|
|
|
|
|
|
|
|
108 |
}
|
109 |
|
110 |
-
/*
|
111 |
-
.
|
112 |
-
|
113 |
-
|
114 |
-
margin-bottom: 10px;
|
115 |
}
|
116 |
|
117 |
-
/*
|
118 |
-
.
|
119 |
-
background-
|
|
|
120 |
}
|
121 |
|
122 |
-
/*
|
123 |
-
.
|
124 |
-
|
|
|
125 |
}
|
126 |
-
.
|
127 |
-
|
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-
|
137 |
-
<div class="progress-status">Ready for upload</div>
|
138 |
-
</div>""", gr.update(visible=False)
|
139 |
else:
|
140 |
-
return "url", """<div class="progress-
|
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-
|
147 |
-
<div class="progress-status">Ready for upload</div>
|
148 |
-
</div>""", gr.update(visible=False)
|
149 |
|
150 |
-
return """<div class="progress-
|
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-
|
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-
|
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-
|
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-
|
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-
|
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
|