nicola.leonardi
/
wcag_AI_validation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui per user test

This commit is contained in:
Nicola Leonardi 2026-03-31 10:58:11 +02:00
parent 9b1b310777
commit 56e5a5a1e5
1 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
UI/wcag_validator_ui.py
View File

@ -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="<p>Select the assigned images by clicking on the corresponding checkbox and start the evaluation.</p>"
html += """
<style>
.image-gallery {
display: grid;
@ -356,7 +357,7 @@ def load_images_from_json(json_input,user_assignment_current_status_df):
</style>
<div class="image-gallery">
"""
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="-<span style='font-weight: bold'>(Assigned)</span>"
is_assigned=True
if idx+1 in work_done:
is_work_done=True
assigned_text+="-><span style='font-weight: bold'>(Already managed)</span>"
if idx+1 in assigned and idx+1 in work_done:
is_work_done=True
is_assigned=True
assigned_text+="<span style='font-family: wingdings; font-size: large; font-weight: bold; color:green'>&#252;</span>"
html += f"""
<div class="image-card">
<div class="image-card">
{f'''<div style="background-color: {'#d4edda' if is_work_done else '#ffebcc'};
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
font-weight: bold;
margin-bottom: 8px;
color: {'#2d6a4f' if is_work_done else '#7d4e00'};">
{'✓ Done' if is_work_done else '⚠ Assigned'}
</div>''' if is_assigned else ''}
<img src="{url}" alt="{alt_text}" loading="lazy" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Crect fill=%22%23ddd%22 width=%22200%22 height=%22200%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 text-anchor=%22middle%22 dy=%22.3em%22 fill=%22%23999%22%3EImage not found%3C/text%3E%3C/svg%3E'">
<div class="image-info">
<label class="checkbox-label">
@ -394,7 +411,7 @@ def load_images_from_json(json_input,user_assignment_current_status_df):
">
Select #{idx + 1}<span>{assigned_text}</span>
</label>
<div class="alt-text">Current alt_text: {alt_text}</div>
<div class="alt-text"> <span style="font-weight:bold">Current alt-text:</span> {alt_text}</div>
<div id="panel-{idx}" class="assessment-panel">
<div class="form-group">
@ -423,16 +440,17 @@ def load_images_from_json(json_input,user_assignment_current_status_df):
</div>
</div>
<div class="form-group">
<label>New alt-text:</label>
<textarea class="new-alt-text" data-index="{idx}" rows="3" placeholder="Enter improved alt-text...">{alt_text}</textarea>
<label>Your alt-text proposal (leave blank for a <a href="https://www.w3.org/WAI/tutorials/images/decorative/" target="_blank">decorative image</a>):</label>
<textarea class="new-alt-text" data-index="{idx}" rows="3" placeholder="Enter your alt-text..."></textarea>
</div>
</div>
<input type="hidden" class="original-alt" data-index="{idx}" value="{alt_text}" />
</div>
</div>
"""
# info_text += f"✓ Image {idx+1} alt_text: {alt_text}\n"
html += "</div>"
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"""
<tr class="alttext-row" data-index="{imgnum}">
<td class="img-num">{imgnum}</td>
<td class="img-num">{imgnum}<br><a href="{imgurl}" target="_blank">Open image</a></td>
<td class="orig-alt">{orig}</td>
<td class="user-assessment">{user_ass}</td>
<td class="user-proposed">{user_prop}</td>
@ -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 || '';