Hugging Face's logo

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

App Files Community
luulinh90s commited on
Commit
3b0faf1
·
1 Parent(s): 40cdf6a

update

Browse files
Files changed (2) hide show
  1. templates/experiment.html +32 -22
  2. templates/index.html +29 -2
templates/experiment.html CHANGED
@@ -42,13 +42,27 @@
42
  }
43
  .visualization {
44
  width: 48%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  }
46
  .buttons {
47
  display: flex;
48
  justify-content: space-between;
49
  }
50
  button {
51
- background-color: #4CAF50;
52
  color: white;
53
  padding: 15px 30px;
54
  border: none;
@@ -60,28 +74,22 @@
60
  transition: background-color 0.3s ease;
61
  }
62
  button:hover {
63
- background-color: #45a049;
64
  }
65
- iframe {
66
- width: 100%;
67
- height: calc(100vh - 250px);
68
- border: none;
 
 
 
 
 
 
 
69
  }
70
  </style>
71
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
72
- <script>
73
- window.onload = function() {
74
- var iframes = document.querySelectorAll('iframe');
75
- iframes.forEach(function(iframe) {
76
- iframe.onload = function() {
77
- var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
78
- var style = document.createElement('style');
79
- style.innerHTML = 'body { font-size: 14px; }';
80
- iframeDocument.head.appendChild(style);
81
- };
82
- });
83
- };
84
- </script>
85
  </head>
86
  <body>
87
  <div class="container">
@@ -90,14 +98,16 @@
90
  <div class="visualization-container">
91
  <div class="visualization">
92
  <h2>{{ method_a }}</h2>
93
- <iframe src="{{ visualization_a }}"></iframe>
94
  </div>
95
  <div class="visualization">
96
  <h2>{{ method_b }}</h2>
97
- <iframe src="{{ visualization_b }}"></iframe>
98
  </div>
99
  </div>
100
- <p>Which explanation provides a clearer and more accurate reasoning process?</p>
 
 
101
  <div class="buttons">
102
  <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
103
  <input type="hidden" name="username" value="{{ username }}">
 
42
  }
43
  .visualization {
44
  width: 48%;
45
+ height: calc(100vh - 300px);
46
+ border: 1px solid #ddd;
47
+ border-radius: 5px;
48
+ overflow: hidden;
49
+ }
50
+ .question-box {
51
+ background-color: #f0f0f0;
52
+ padding: 20px;
53
+ border-radius: 10px;
54
+ margin: 20px 0;
55
+ }
56
+ .question-text {
57
+ font-size: 22px;
58
+ font-weight: bold;
59
+ color: #333;
60
  }
61
  .buttons {
62
  display: flex;
63
  justify-content: space-between;
64
  }
65
  button {
 
66
  color: white;
67
  padding: 15px 30px;
68
  border: none;
 
74
  transition: background-color 0.3s ease;
75
  }
76
  button:hover {
77
+ opacity: 0.9;
78
  }
79
+ button[value="No-XAI"] {
80
+ background-color: gray;
81
+ }
82
+ button[value="Dater"] {
83
+ background-color: purple;
84
+ }
85
+ button[value="Chain-of-Table"] {
86
+ background-color: blue;
87
+ }
88
+ button[value="Plan-of-SQLs"] {
89
+ background-color: green;
90
  }
91
  </style>
92
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 
 
 
 
 
 
 
 
 
 
 
 
 
93
  </head>
94
  <body>
95
  <div class="container">
 
98
  <div class="visualization-container">
99
  <div class="visualization">
100
  <h2>{{ method_a }}</h2>
101
+ <iframe src="{{ visualization_a }}" width="100%" height="100%" frameborder="0"></iframe>
102
  </div>
103
  <div class="visualization">
104
  <h2>{{ method_b }}</h2>
105
+ <iframe src="{{ visualization_b }}" width="100%" height="100%" frameborder="0"></iframe>
106
  </div>
107
  </div>
108
+ <div class="question-box">
109
+ <p class="question-text">Which explanation provides a clearer and more accurate reasoning process?</p>
110
+ </div>
111
  <div class="buttons">
112
  <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
113
  <input type="hidden" name="username" value="{{ username }}">
templates/index.html CHANGED
@@ -53,15 +53,42 @@
53
  border-radius: 10px;
54
  cursor: pointer;
55
  transition: background-color 0.3s ease, border 0.3s ease;
56
- border: 2px solid transparent;
57
  font-weight: bold;
58
  text-align: center;
59
  margin-bottom: 10px;
60
  }
61
  .method-button.selected {
62
- border-color: #000000;
63
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
64
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  button {
66
  background-color: #4CAF50;
67
  color: white;
 
53
  border-radius: 10px;
54
  cursor: pointer;
55
  transition: background-color 0.3s ease, border 0.3s ease;
56
+ border: 2px solid;
57
  font-weight: bold;
58
  text-align: center;
59
  margin-bottom: 10px;
60
  }
61
  .method-button.selected {
 
62
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
63
  }
64
+ .method-button[data-method="No-XAI"] {
65
+ border-color: gray;
66
+ color: gray;
67
+ }
68
+ .method-button[data-method="Dater"] {
69
+ border-color: purple;
70
+ color: purple;
71
+ }
72
+ .method-button[data-method="Chain-of-Table"] {
73
+ border-color: blue;
74
+ color: blue;
75
+ }
76
+ .method-button[data-method="Plan-of-SQLs"] {
77
+ border-color: green;
78
+ color: green;
79
+ }
80
+ .method-button.selected[data-method="No-XAI"] {
81
+ background-color: rgba(128, 128, 128, 0.2);
82
+ }
83
+ .method-button.selected[data-method="Dater"] {
84
+ background-color: rgba(128, 0, 128, 0.2);
85
+ }
86
+ .method-button.selected[data-method="Chain-of-Table"] {
87
+ background-color: rgba(0, 0, 255, 0.2);
88
+ }
89
+ .method-button.selected[data-method="Plan-of-SQLs"] {
90
+ background-color: rgba(0, 128, 0, 0.2);
91
+ }
92
  button {
93
  background-color: #4CAF50;
94
  color: white;