Hugging Face's logo

Spaces:
luulinh90s
/
Tabular-LLM-Study-Preference
Runtime error

App Files Community
luulinh90s commited on
Commit
3d45f83
·
1 Parent(s): 16f4777

update

Browse files
Files changed (1) hide show
  1. templates/experiment.html +51 -75
templates/experiment.html CHANGED
@@ -3,28 +3,22 @@
3
  <head>
4
  <title>Experiment</title>
5
  <style>
6
- body {
7
  font-family: 'Roboto', sans-serif;
8
- background: url('/static/images/background.jpg') no-repeat center center fixed;
9
- background-size: cover;
10
  margin: 0;
11
  padding: 0;
12
- display: flex;
13
- justify-content: center;
14
- align-items: center;
15
- min-height: 100vh;
16
  }
17
  .container {
18
- background-color: #ffffff;
19
- padding: 20px;
20
- border-radius: 10px;
21
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
22
- width: 98%;
23
- height: 98vh;
24
- margin: 0;
25
- text-align: center;
26
  display: flex;
27
  flex-direction: column;
 
 
 
 
 
 
28
  }
29
  h1, h2 {
30
  color: #000000;
@@ -41,13 +35,30 @@
41
  justify-content: space-between;
42
  flex: 1;
43
  margin: 10px 0;
 
44
  }
45
  .visualization {
46
  width: 49%;
47
- height: calc(100vh - 250px);
48
  border: 1px solid #ddd;
49
  border-radius: 5px;
50
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  }
52
  .question-box {
53
  background-color: #f0f0f0;
@@ -71,65 +82,28 @@
71
  border-radius: 5px;
72
  cursor: pointer;
73
  font-size: 16px;
74
- margin-top: 10px;
75
  width: 48%;
76
  transition: background-color 0.3s ease;
77
  }
78
  button:hover {
79
  opacity: 0.9;
80
  }
81
- button[value="No-XAI"] {
82
- background-color: gray;
83
- }
84
- button[value="Dater"] {
85
- background-color: purple;
86
- }
87
- button[value="Chain-of-Table"] {
88
- background-color: blue;
89
- }
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>
129
  <body>
130
  <div class="container">
131
- <h1>{{ sample_id + 1 }} / 10</h1>
132
- <p><strong>Task description:</strong> {{ statement }}</p>
 
 
133
  <div class="visualization-container">
134
  <div class="visualization">
135
  <h2>{{ method_a }}</h2>
@@ -140,18 +114,20 @@
140
  <iframe src="{{ visualization_b }}" frameborder="0"></iframe>
141
  </div>
142
  </div>
143
- <div class="question-box">
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="session_id" value="{{ session_id }}">
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="session_id" value="{{ session_id }}">
153
- <button type="submit" name="feedback" value="{{ method_b }}">{{ method_b }}</button>
154
- </form>
 
 
155
  </div>
156
  </div>
157
 
 
3
  <head>
4
  <title>Experiment</title>
5
  <style>
6
+ body, html {
7
  font-family: 'Roboto', sans-serif;
 
 
8
  margin: 0;
9
  padding: 0;
10
+ height: 100%;
11
+ overflow: hidden;
 
 
12
  }
13
  .container {
 
 
 
 
 
 
 
 
14
  display: flex;
15
  flex-direction: column;
16
+ height: 100vh;
17
+ padding: 10px;
18
+ box-sizing: border-box;
19
+ }
20
+ .header {
21
+ flex: 0 0 auto;
22
  }
23
  h1, h2 {
24
  color: #000000;
 
35
  justify-content: space-between;
36
  flex: 1;
37
  margin: 10px 0;
38
+ overflow: hidden;
39
  }
40
  .visualization {
41
  width: 49%;
42
+ height: 100%;
43
  border: 1px solid #ddd;
44
  border-radius: 5px;
45
  overflow: hidden;
46
+ display: flex;
47
+ flex-direction: column;
48
+ }
49
+ .visualization h2 {
50
+ margin: 0;
51
+ padding: 10px;
52
+ background-color: #f0f0f0;
53
+ }
54
+ iframe {
55
+ flex: 1;
56
+ width: 100%;
57
+ border: none;
58
+ }
59
+ .footer {
60
+ flex: 0 0 auto;
61
+ margin-top: 10px;
62
  }
63
  .question-box {
64
  background-color: #f0f0f0;
 
82
  border-radius: 5px;
83
  cursor: pointer;
84
  font-size: 16px;
 
85
  width: 48%;
86
  transition: background-color 0.3s ease;
87
  }
88
  button:hover {
89
  opacity: 0.9;
90
  }
91
+ button[value="No-XAI"] { background-color: gray; }
92
+ button[value="Dater"] { background-color: purple; }
93
+ button[value="Chain-of-Table"] { background-color: blue; }
94
+ button[value="Plan-of-SQLs"] { background-color: green; }
95
+ .loader, .overlay {
96
+ /* ... (keep these styles as they were) ... */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  }
98
  </style>
99
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
100
  </head>
101
  <body>
102
  <div class="container">
103
+ <div class="header">
104
+ <h1>{{ sample_id + 1 }} / 10</h1>
105
+ <p><strong>Task description:</strong> {{ statement }}</p>
106
+ </div>
107
  <div class="visualization-container">
108
  <div class="visualization">
109
  <h2>{{ method_a }}</h2>
 
114
  <iframe src="{{ visualization_b }}" frameborder="0"></iframe>
115
  </div>
116
  </div>
117
+ <div class="footer">
118
+ <div class="question-box">
119
+ <p class="question-text">Which explanation provides a clearer and more accurate reasoning process?</p>
120
+ </div>
121
+ <div class="buttons">
122
+ <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;" onsubmit="showLoader()">
123
+ <input type="hidden" name="session_id" value="{{ session_id }}">
124
+ <button type="submit" name="feedback" value="{{ method_a }}">{{ method_a }}</button>
125
+ </form>
126
+ <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;" onsubmit="showLoader()">
127
+ <input type="hidden" name="session_id" value="{{ session_id }}">
128
+ <button type="submit" name="feedback" value="{{ method_b }}">{{ method_b }}</button>
129
+ </form>
130
+ </div>
131
  </div>
132
  </div>
133