app.py

import gradio as gr
import requests
import uuid
import func
WEBHOOK_URL = "https://script.google.com/macros/s/AKfycby_67Zh_ELOMcD9mLxf-nZYi_nNdsGb_C7E66uYdK924JKx2eps6nn8TizLYdtzqQvCAw/exec"

def submit_all(q1_choice, q1_feedback, q2_choice, q2_feedback, q3_choice, q3_feedback):
    # Check if any required choice is missing
    if not all([q1_choice, q2_choice, q3_choice]):
        return f"""# ⚠️ Submission Failed

### Please answer all three multiple-choice questions before submitting.
"""
    

    user_id = str(uuid.uuid4())

    payload = {
        "user_id": user_id,
        "q1_choice": q1_choice or "",
        "q1_feedback": q1_feedback or "",
        "q2_choice": q2_choice or "",
        "q2_feedback": q2_feedback or "",
        "q3_choice": q3_choice or "",
        "q3_feedback": q3_feedback or "",
    }

    try:
        res = requests.post(WEBHOOK_URL, json=payload)
        if res.status_code == 200:
            return f"""# ✅ Submission Complete!

Your **survey code**:

```
{user_id}
```

### Please copy and paste this code into the AMT submission form.
"""
        else:
            return f"""# ⚠️ Submission Failed

The server responded with status code: `{res.status_code}`.
Please try again later or contact the requester if the issue persists.
"""
    except Exception as e:
        return f"""# ⚠️ Submission Failed

An unexpected error occurred during submission:

```
{e}
```

Please try again later or report this error to the administrator.
"""
def replay(state):
   revid = "vid/output1.mp4" if state else "vid/output2.mp4"
   return revid, not state

css = """
h1 {
    text-align: center;
    margin-top: 20px;
}

.q1-radio-large .gr-radio label {
    font-size: 20px;
    line-height: 1.8;
    margin: 8px 0;
    padding: 12px;
    display: block;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f5f5f5;
    transition: all 0.2s ease;
}

.q1-radio-large .gr-radio input:checked + label {
    border-color: #333;
    background-color: #e0e0e0;
}
"""


with gr.Blocks() as demo:
    gr.Markdown("# Explainable Action Recognition Survey")
    gr.HTML('''<style>
#top1_box textarea,
#top2_box textarea,
#top3_box textarea {
    height: 100px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
    color: #222;
    border: 2px solid #aaa;
    border-radius: 12px;
    background-color: #f9f9f9;
    padding: 0;
    resize: none;
    overflow: hidden;
}
#q1_radio_box label {
    font-size: 20px;
    line-height: 1.8;
    margin: 8px 0;
    padding: 12px;
    display: block;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f5f5f5;
    transition: all 0.2s ease;
}

#q1_radio_box input:checked + label {
    border-color: #333;
    background-color: #e0e0e0;
}
</style>''')
    with gr.Tabs():
        with gr.Tab(" Question 1"):
            gr.Video("assets/golfswing_1.mp4",width=640,height=480,label="")
            # gr.Markdown("<hr>")
            gr.Markdown("<div style='height:4px; background-color:#ccc; margin:20px 0;'></div>")
            gr.Markdown("# Explanation A")
            gr.Markdown("<br>")
            # with gr.Row():
                # gr.Markdown("# G.T.: GolfSwing")
                # gr.Markdown("# Prediction: GolfSwing")
            with gr.Row():
                with gr.Column(scale=2):
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Concept Contributions</div>")
                    # gr.Markdown("## **Concept Contributions**")
                    gr.Image("assets/ucf_ours/A_contri.png")
                
                with gr.Column():
                    # gr.Markdown("## Top-1 Concept")
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Top-1 Concept</div>")
                    
                    gr.Video("assets/ucf_ours/A_Top1.mp4", width=320, height=320,
                            container=True, autoplay=True, loop=True,
                            show_share_button=False, show_download_button=False)
                with gr.Column():
                    # gr.Markdown("## Top-2 Concept")
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Top-2 Concept</div>")
                    
                    gr.Video("assets/ucf_ours/A_Top2.mp4", width=320, height=320,
                            container=True, autoplay=True, loop=True,
                            show_share_button=False, show_download_button=False)
                with gr.Column():
                    # gr.Markdown("## Top-3 Concept")
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Top-3 Concept</div>")
                    
                    gr.Video("assets/ucf_ours/A_Top3.mp4", width=320, height=320,
                            container=True, autoplay=True, loop=True,
                            show_share_button=False, show_download_button=False)
            gr.Markdown("<div style='height:4px; background-color:#ccc; margin:20px 0;'></div>")
            gr.Markdown("# Explanation B")
            gr.Markdown("<br>")
            with gr.Row():
                with gr.Column(scale=2):
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Concept Contributions</div>")
                    # gr.Markdown("## **Concept Contributions**")
                    gr.Image("assets/ucf_ours/B_contri.png")
                with gr.Column():
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Top-1 Concept</div>")
                    gr.Markdown("<br>")
                    gr.Markdown("<br>")
                    gr.Textbox(value="Two_Arms_Swinging", interactive=False, 
                            label="", 
                            show_label=False,
                            container=False,
                            elem_id="top1_box")

                with gr.Column():
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Top-2 Concept</div>")
                    gr.Markdown("<br>")
                    gr.Markdown("<br>")
                    gr.Textbox(value="Alternate_Leg_Motion", interactive=False, 
                            label="", 
                            show_label=False,
                            container=False,
                            elem_id="top2_box")

                with gr.Column():
                    gr.Markdown("<div style='text-align: center; font-size: 20px; font-weight: bold; color: black;'>Top-3 Concept</div>")
                    gr.Markdown("<br>")
                    gr.Markdown("<br>")
                    gr.Textbox(value="Straight_Position", interactive=False, 
                            label="", 
                            show_label=False,
                            container=False,
                            elem_id="top3_box")
            gr.Markdown("<hr>")
            gr.Markdown("<br>")
            # gr.Image("assets/ex2.png")
            # gr.Markdown("# Q1. Which explanation was easier to understand?")
            # q1_choice = gr.Radio(["Explanation A", "Explanation B"])
            gr.Markdown("# Q1. Which explanation was easier to understand?<br>")
            gr.Markdown("## Consider which explanation helped you understand the model's decision better.")
            q1_choice = gr.Radio(
                [
                    "A was *much easier* to understand",
                    "A was *somewhat easier* to understand",
                    "Both were *about the same*",
                    "B was *somewhat easier* to understand",
                    "B was *much easier* to understand",
                ],
                label="",
                show_label=False,
                elem_id="q1_radio_box"
            )
            # q1_choice= func.convert_q1_choice(q1_choice)
            q1_feedback = gr.Textbox(placeholder="e.g., Explanation A was clearer")

        with gr.Tab(" Question 2"):
            gr.Video("assets/640320_video.mp4",width=640,height=480,label="")
            gr.Markdown("## Explanation A")
            gr.Image("assets/ex1.png")
            gr.Markdown("## Explanation B")
            gr.Image("assets/ex2.png")
            gr.Markdown("## Q2. Which explanation was easier to understand?")
            q2_choice = gr.Radio(["Explanation A", "Explanation B"])
            q2_feedback = gr.Textbox()

        with gr.Tab(" Question 3"):
            gr.Video("assets/640320_video.mp4",width=640,height=480,label="")
            gr.Markdown("## Explanation A")
            gr.Image("assets/ex1.png")
            gr.Markdown("## Explanation B")
            gr.Image("assets/ex2.png")
            gr.Markdown("## Q3. Which explanation was easier to understand?")
            q3_choice = gr.Radio(["Explanation A", "Explanation B"])
            q3_feedback = gr.Textbox()

    submit_btn = gr.Button("Submit All Responses")
    result = gr.Markdown()

    submit_btn.click(
        fn=submit_all,
        inputs=[q1_choice, q1_feedback, q2_choice, q2_feedback, q3_choice, q3_feedback],
        outputs=result
    )

demo.launch()
# with gr.Blocks() as demo:
#     gr.Markdown("# Explainable Action Recognition Survey")

#     gr.Markdown("# Question 1")
#     gr.Video("assets/video.mp4")
#     gr.Image("assets/ex1.png")
#     gr.Image("assets/ex2.png")
#     gr.Markdown("## Q1. Which explanation was easier to understand?")
#     q1_choice = gr.Radio(["Explanation A", "Explanation B"])
#     q1_feedback = gr.Textbox(placeholder="e.g., Explanation A was clearer")

#     gr.Markdown("# Question 2")
#     gr.Video("assets/video.mp4")
#     gr.Image("assets/ex1.png")
#     gr.Image("assets/ex2.png")
#     gr.Markdown("## Q2. Which explanation was easier to understand?")
#     q2_choice = gr.Radio(["Explanation A", "Explanation B"])
#     q2_feedback = gr.Textbox()

#     gr.Markdown("# Question 3")
#     gr.Video("assets/video.mp4")
#     gr.Image("assets/ex1.png")
#     gr.Image("assets/ex2.png")
#     gr.Markdown("## Q3. Which explanation was easier to understand?")
#     q3_choice = gr.Radio(["Explanation A", "Explanation B"])
#     q3_feedback = gr.Textbox()

#     submit_btn = gr.Button("Submit All Responses")
#     result = gr.Markdown()

#     submit_btn.click(
#         fn=submit_all,
#         inputs=[q1_choice, q1_feedback, q2_choice, q2_feedback, q3_choice, q3_feedback],
#         outputs=result
#     )

#     demo.launch()