Spaces:
Runtime error
Runtime error
Commit
·
d904caa
1
Parent(s):
4e67a02
update
Browse files- templates/experiment.html +41 -3
- templates/index.html +11 -0
templates/experiment.html
CHANGED
|
@@ -90,11 +90,39 @@
|
|
| 90 |
button[value="Plan-of-SQLs"] {
|
| 91 |
background-color: green;
|
| 92 |
}
|
| 93 |
-
iframe {
|
| 94 |
width: 100%;
|
| 95 |
height: 100%;
|
| 96 |
border: none;
|
| 97 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 98 |
</style>
|
| 99 |
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
| 100 |
</head>
|
|
@@ -116,15 +144,25 @@
|
|
| 116 |
<p class="question-text">Which explanation provides a clearer and more accurate reasoning process?</p>
|
| 117 |
</div>
|
| 118 |
<div class="buttons">
|
| 119 |
-
<form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
|
| 120 |
<input type="hidden" name="username" value="{{ username }}">
|
| 121 |
<button type="submit" name="feedback" value="{{ method_a }}">{{ method_a }}</button>
|
| 122 |
</form>
|
| 123 |
-
<form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
|
| 124 |
<input type="hidden" name="username" value="{{ username }}">
|
| 125 |
<button type="submit" name="feedback" value="{{ method_b }}">{{ method_b }}</button>
|
| 126 |
</form>
|
| 127 |
</div>
|
| 128 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 129 |
</body>
|
| 130 |
</html>
|
|
|
|
| 90 |
button[value="Plan-of-SQLs"] {
|
| 91 |
background-color: green;
|
| 92 |
}
|
| 93 |
+
iframe {
|
| 94 |
width: 100%;
|
| 95 |
height: 100%;
|
| 96 |
border: none;
|
| 97 |
}
|
| 98 |
+
.loader {
|
| 99 |
+
border: 5px solid #f3f3f3;
|
| 100 |
+
border-top: 5px solid #3498db;
|
| 101 |
+
border-radius: 50%;
|
| 102 |
+
width: 50px;
|
| 103 |
+
height: 50px;
|
| 104 |
+
animation: spin 1s linear infinite;
|
| 105 |
+
position: fixed;
|
| 106 |
+
top: 50%;
|
| 107 |
+
left: 50%;
|
| 108 |
+
transform: translate(-50%, -50%);
|
| 109 |
+
display: none;
|
| 110 |
+
z-index: 1000;
|
| 111 |
+
}
|
| 112 |
+
@keyframes spin {
|
| 113 |
+
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
| 114 |
+
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
| 115 |
+
}
|
| 116 |
+
.overlay {
|
| 117 |
+
position: fixed;
|
| 118 |
+
top: 0;
|
| 119 |
+
left: 0;
|
| 120 |
+
width: 100%;
|
| 121 |
+
height: 100%;
|
| 122 |
+
background-color: rgba(0, 0, 0, 0.5);
|
| 123 |
+
display: none;
|
| 124 |
+
z-index: 999;
|
| 125 |
+
}
|
| 126 |
</style>
|
| 127 |
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
| 128 |
</head>
|
|
|
|
| 144 |
<p class="question-text">Which explanation provides a clearer and more accurate reasoning process?</p>
|
| 145 |
</div>
|
| 146 |
<div class="buttons">
|
| 147 |
+
<form action="{{ url_for('feedback') }}" method="post" style="width: 48%;" onsubmit="showLoader()">
|
| 148 |
<input type="hidden" name="username" value="{{ username }}">
|
| 149 |
<button type="submit" name="feedback" value="{{ method_a }}">{{ method_a }}</button>
|
| 150 |
</form>
|
| 151 |
+
<form action="{{ url_for('feedback') }}" method="post" style="width: 48%;" onsubmit="showLoader()">
|
| 152 |
<input type="hidden" name="username" value="{{ username }}">
|
| 153 |
<button type="submit" name="feedback" value="{{ method_b }}">{{ method_b }}</button>
|
| 154 |
</form>
|
| 155 |
</div>
|
| 156 |
</div>
|
| 157 |
+
|
| 158 |
+
<div class="overlay" id="overlay"></div>
|
| 159 |
+
<div class="loader" id="loader"></div>
|
| 160 |
+
|
| 161 |
+
<script>
|
| 162 |
+
function showLoader() {
|
| 163 |
+
document.getElementById('overlay').style.display = 'block';
|
| 164 |
+
document.getElementById('loader').style.display = 'block';
|
| 165 |
+
}
|
| 166 |
+
</script>
|
| 167 |
</body>
|
| 168 |
</html>
|
templates/index.html
CHANGED
|
@@ -26,6 +26,14 @@
|
|
| 26 |
font-size: 48px;
|
| 27 |
margin-bottom: 30px;
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 29 |
label {
|
| 30 |
display: block;
|
| 31 |
margin: 20px 0 10px;
|
|
@@ -144,6 +152,9 @@
|
|
| 144 |
<body>
|
| 145 |
<div class="container">
|
| 146 |
<h1>Trustworthy LLMs for Table QA</h1>
|
|
|
|
|
|
|
|
|
|
| 147 |
<form id="method-form" action="/" method="post" onsubmit="return validateForm();">
|
| 148 |
<label for="username">Hi there 👋👋👋 ! What is your name?</label>
|
| 149 |
<input type="text" id="username" name="username" required>
|
|
|
|
| 26 |
font-size: 48px;
|
| 27 |
margin-bottom: 30px;
|
| 28 |
}
|
| 29 |
+
.instruction {
|
| 30 |
+
font-size: 20px;
|
| 31 |
+
color: #333;
|
| 32 |
+
margin-bottom: 30px;
|
| 33 |
+
padding: 15px;
|
| 34 |
+
background-color: #f0f0f0;
|
| 35 |
+
border-radius: 5px;
|
| 36 |
+
}
|
| 37 |
label {
|
| 38 |
display: block;
|
| 39 |
margin: 20px 0 10px;
|
|
|
|
| 152 |
<body>
|
| 153 |
<div class="container">
|
| 154 |
<h1>Trustworthy LLMs for Table QA</h1>
|
| 155 |
+
<div class="instruction">
|
| 156 |
+
Let's get started! Please input your name, enter a random number as your seed, and select 2 methods for your experiment.
|
| 157 |
+
</div>
|
| 158 |
<form id="method-form" action="/" method="post" onsubmit="return validateForm();">
|
| 159 |
<label for="username">Hi there 👋👋👋 ! What is your name?</label>
|
| 160 |
<input type="text" id="username" name="username" required>
|