File size: 4,762 Bytes
8ea4c8e
 
 
 
 
3d45f83
8ea4c8e
 
 
3d45f83
 
8ea4c8e
 
 
 
3d45f83
 
 
 
 
 
8ea4c8e
 
40cdf6a
db380b4
 
8ea4c8e
 
40cdf6a
db380b4
 
8ea4c8e
 
40cdf6a
 
8ea4c8e
db380b4
3d45f83
8ea4c8e
40cdf6a
db380b4
3d45f83
3b0faf1
 
 
3d45f83
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b0faf1
 
 
db380b4
3b0faf1
7a134e8
 
 
3b0faf1
7a134e8
3b0faf1
db380b4
3b0faf1
 
7a134e8
40cdf6a
8ea4c8e
 
 
 
 
 
db380b4
8ea4c8e
 
 
db380b4
8ea4c8e
 
 
 
3b0faf1
8ea4c8e
3d45f83
 
 
 
 
 
ff51625
8ea4c8e
 
 
 
 
3d45f83
 
 
 
8ea4c8e
40cdf6a
 
db380b4
40cdf6a
 
 
db380b4
40cdf6a
8ea4c8e
3d45f83
 
 
 
 
 
 
 
 
 
 
 
 
 
8ea4c8e
 
ff51625
 
 
 
 
 
 
 
 
 
8ea4c8e
59259da
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
    <title>Experiment</title>
    <style>
        body, html {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            padding: 10px;
            box-sizing: border-box;
        }
        .header {
            flex: 0 0 auto;
        }
        h1, h2 {
            color: #000000;
            font-size: 20px;
            margin: 10px 0;
        }
        p {
            color: #000000;
            font-size: 16px;
            margin: 5px 0;
        }
        .visualization-container {
            display: flex;
            justify-content: space-between;
            flex: 1;
            margin: 10px 0;
            overflow: hidden;
        }
        .visualization {
            width: 49%;
            height: 100%;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .visualization h2 {
            margin: 0;
            padding: 10px;
            background-color: #f0f0f0;
        }
        iframe {
            flex: 1;
            width: 100%;
            border: none;
        }
        .footer {
            flex: 0 0 auto;
            margin-top: 10px;
        }
        .question-box {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 10px;
            margin: 10px auto; /* Changed from '10px 0' to '10px auto' */
            max-width: 80%; /* Adjust this value as needed */
            text-align: center; /* Center the text inside the box */
        }

        .question-text {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin: 0; /* Remove default margins */
        }
        .buttons {
            display: flex;
            justify-content: space-between;
        }
        button {
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            width: 48%;
            transition: background-color 0.3s ease;
        }
        button:hover {
            opacity: 0.9;
        }
        button[value="No-XAI"] { background-color: gray; }
        button[value="Dater"] { background-color: purple; }
        button[value="Chain-of-Table"] { background-color: blue; }
        button[value="Plan-of-SQLs"] { background-color: green; }
        .loader, .overlay {
            /* ... (keep these styles as they were) ... */
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>{{ sample_id + 1 }} / 10</h1>
            <p><strong>Task description:</strong> {{ statement }}</p>
        </div>
        <div class="visualization-container">
            <div class="visualization">
                <h2>{{ method_a }}</h2>
                <iframe src="{{ visualization_a }}" frameborder="0"></iframe>
            </div>
            <div class="visualization">
                <h2>{{ method_b }}</h2>
                <iframe src="{{ visualization_b }}" frameborder="0"></iframe>
            </div>
        </div>
        <div class="footer">
            <div class="question-box">
                <p class="question-text">Which explanation provides a clearer and more accurate reasoning process?</p>
            </div>
            <div class="buttons">
                <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;" onsubmit="showLoader()">
                    <input type="hidden" name="session_id" value="{{ session_id }}">
                    <button type="submit" name="feedback" value="{{ method_a }}">{{ method_a }}</button>
                </form>
                <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;" onsubmit="showLoader()">
                    <input type="hidden" name="session_id" value="{{ session_id }}">
                    <button type="submit" name="feedback" value="{{ method_b }}">{{ method_b }}</button>
                </form>
            </div>
        </div>
    </div>

    <div class="overlay" id="overlay"></div>
    <div class="loader" id="loader"></div>

    <script>
        function showLoader() {
            document.getElementById('overlay').style.display = 'block';
            document.getElementById('loader').style.display = 'block';
        }
    </script>
</body>
</html>