diff --git a/UI/wcag_validator_ui.py b/UI/wcag_validator_ui.py index 39e097b..b402b68 100644 --- a/UI/wcag_validator_ui.py +++ b/UI/wcag_validator_ui.py @@ -262,7 +262,8 @@ def load_images_from_json(json_input,user_assignment_current_status_df): # Create HTML gallery with checkboxes and assessment forms - html = """ + html="

Select the assigned images by clicking on the corresponding checkbox and start the evaluation.

" + html += """
""" - + for idx, img_data in enumerate(images): url = img_data.get("url", "") alt_text = img_data.get("alt_text", "No description") @@ -365,15 +366,31 @@ def load_images_from_json(json_input,user_assignment_current_status_df): assigned=user_assignments.get(page_url,{}).get("assigned",[]) work_done=user_assignments.get(page_url,{}).get("work_done",[]) assigned_text="" + is_assigned=False + is_work_done=False if idx+1 in assigned: assigned_text="-(Assigned)" + is_assigned=True if idx+1 in work_done: + is_work_done=True assigned_text+="->(Already managed)" if idx+1 in assigned and idx+1 in work_done: + is_work_done=True + is_assigned=True assigned_text+="ü" html += f""" -
+ +
+ {f'''
+ {'✓ Done' if is_work_done else '⚠ Assigned'} +
''' if is_assigned else ''} {alt_text}
-
Current alt_text: {alt_text}
+
Current alt-text: {alt_text}
@@ -423,16 +440,17 @@ def load_images_from_json(json_input,user_assignment_current_status_df):
- - + +
+
""" - # info_text += f"✓ Image {idx+1} alt_text: {alt_text}\n" + html += "
" return info_text, html @@ -622,9 +640,12 @@ def make_alttext_llm_assessment_api_call( info_dataframe.insert( 0, "Image #", selected_image_id ) # add the UI ids from to api response - info_dataframe.insert(2, "User Assessment", user_assessments) + info_dataframe.insert( + 1, "Image url", selected_urls + ) # add the image_url from to api response + info_dataframe.insert(3, "User Assessment", user_assessments) - info_dataframe.insert(3, "User Proposed Alt Text", user_new_alt_texts) + info_dataframe.insert(4, "User Proposed Alt Text", user_new_alt_texts) info_dataframe["User Assessment for LLM Proposal 1"] = ( user_assessments_llm_proposal_1 ) @@ -726,6 +747,7 @@ def render_alttext_form(df): for _, row in df.iterrows(): imgnum = row.get("Image #", "") + imgurl = row.get("Image url", "") orig = row.get("Original Alt Text", "") user_ass = row.get("User Assessment", "") user_prop = row.get("User Proposed Alt Text", "") @@ -739,7 +761,7 @@ def render_alttext_form(df): html += f""" - {imgnum} + {imgnum}
Open image {orig} {user_ass} {user_prop} @@ -948,6 +970,11 @@ with gr.Blocks(theme=gr.themes.Glass(), title="WCAG AI Validator") as demo: gallery_html = gr.HTML(label="Image Gallery") + url_input.change( + fn=lambda: ("", "", gr.Button(interactive=False)), #disable the button until the new images are loaded + inputs=[], + outputs=[image_info_output,gallery_html,alttext_api_call_btn], + ) image_extraction_api_call_btn.click( fn=lambda: ("", "", gr.update(visible=False), gr.Button(interactive=False)), @@ -1064,7 +1091,8 @@ with gr.Blocks(theme=gr.themes.Glass(), title="WCAG AI Validator") as demo: return [db_path_state, url_input, [], user_state, llm_response_output];} rows.forEach(row => { - const imgNum = row.querySelector('.img-num')?.innerText || ''; + //const imgNum = row.querySelector('.img-num')?.innerText || ''; + const imgNum = parseInt(row.querySelector('.img-num')?.firstChild?.textContent.trim() || '0', 10);// avoid extract the image url const origAlt = row.querySelector('.orig-alt')?.innerText || ''; const userAssessment = row.querySelector('.user-assessment')?.innerText || '3'; const userProposed = row.querySelector('.user-proposed')?.innerText || '';