Commit ·
4e5d32e
1
Parent(s): 1eb73db
app.py
CHANGED
|
@@ -62,7 +62,24 @@ def replay(state):
|
|
| 62 |
css = """
|
| 63 |
h1 {
|
| 64 |
text-align: center;
|
| 65 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
}
|
| 67 |
"""
|
| 68 |
|
|
@@ -87,7 +104,22 @@ with gr.Blocks() as demo:
|
|
| 87 |
resize: none;
|
| 88 |
overflow: hidden;
|
| 89 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 90 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 91 |
</style>''')
|
| 92 |
with gr.Tabs():
|
| 93 |
with gr.Tab(" Question 1"):
|
|
@@ -168,8 +200,8 @@ with gr.Blocks() as demo:
|
|
| 168 |
# gr.Image("assets/ex2.png")
|
| 169 |
# gr.Markdown("# Q1. Which explanation was easier to understand?")
|
| 170 |
# q1_choice = gr.Radio(["Explanation A", "Explanation B"])
|
| 171 |
-
gr.Markdown("#
|
| 172 |
-
|
| 173 |
q1_choice = gr.Radio(
|
| 174 |
[
|
| 175 |
"A was *much easier* to understand",
|
|
@@ -179,8 +211,8 @@ with gr.Blocks() as demo:
|
|
| 179 |
"B was *much easier* to understand",
|
| 180 |
],
|
| 181 |
label="",
|
| 182 |
-
info="Consider which explanation helped you understand the model's decision better.",
|
| 183 |
show_label=False,
|
|
|
|
| 184 |
)
|
| 185 |
# q1_choice= func.convert_q1_choice(q1_choice)
|
| 186 |
q1_feedback = gr.Textbox(placeholder="e.g., Explanation A was clearer")
|
|
|
|
| 62 |
css = """
|
| 63 |
h1 {
|
| 64 |
text-align: center;
|
| 65 |
+
margin-top: 20px;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
.q1-radio-large .gr-radio label {
|
| 69 |
+
font-size: 20px;
|
| 70 |
+
line-height: 1.8;
|
| 71 |
+
margin: 8px 0;
|
| 72 |
+
padding: 12px;
|
| 73 |
+
display: block;
|
| 74 |
+
border: 1px solid #ccc;
|
| 75 |
+
border-radius: 10px;
|
| 76 |
+
background-color: #f5f5f5;
|
| 77 |
+
transition: all 0.2s ease;
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.q1-radio-large .gr-radio input:checked + label {
|
| 81 |
+
border-color: #333;
|
| 82 |
+
background-color: #e0e0e0;
|
| 83 |
}
|
| 84 |
"""
|
| 85 |
|
|
|
|
| 104 |
resize: none;
|
| 105 |
overflow: hidden;
|
| 106 |
}
|
| 107 |
+
#q1_radio_box label {
|
| 108 |
+
font-size: 20px;
|
| 109 |
+
line-height: 1.8;
|
| 110 |
+
margin: 8px 0;
|
| 111 |
+
padding: 12px;
|
| 112 |
+
display: block;
|
| 113 |
+
border: 1px solid #ccc;
|
| 114 |
+
border-radius: 10px;
|
| 115 |
+
background-color: #f5f5f5;
|
| 116 |
+
transition: all 0.2s ease;
|
| 117 |
+
}
|
| 118 |
|
| 119 |
+
#q1_radio_box input:checked + label {
|
| 120 |
+
border-color: #333;
|
| 121 |
+
background-color: #e0e0e0;
|
| 122 |
+
}
|
| 123 |
</style>''')
|
| 124 |
with gr.Tabs():
|
| 125 |
with gr.Tab(" Question 1"):
|
|
|
|
| 200 |
# gr.Image("assets/ex2.png")
|
| 201 |
# gr.Markdown("# Q1. Which explanation was easier to understand?")
|
| 202 |
# q1_choice = gr.Radio(["Explanation A", "Explanation B"])
|
| 203 |
+
gr.Markdown("# Q1. Which explanation was easier to understand?<br>")
|
| 204 |
+
gr.Markdown("## Consider which explanation helped you understand the model's decision better.")
|
| 205 |
q1_choice = gr.Radio(
|
| 206 |
[
|
| 207 |
"A was *much easier* to understand",
|
|
|
|
| 211 |
"B was *much easier* to understand",
|
| 212 |
],
|
| 213 |
label="",
|
|
|
|
| 214 |
show_label=False,
|
| 215 |
+
elem_id="q1_radio_box"
|
| 216 |
)
|
| 217 |
# q1_choice= func.convert_q1_choice(q1_choice)
|
| 218 |
q1_feedback = gr.Textbox(placeholder="e.g., Explanation A was clearer")
|