luulinh90s/Tabular-LLM-Study-Debugging

1<!DOCTYPE html>2<html>3<head>4    <title>Experiment</title>5    <style>6        body, html {7            margin: 0;8            padding: 0;9            height: 100%;10            font-family: 'Roboto', sans-serif;11        }12        .container {13            display: flex;14            flex-direction: column;15            height: 100vh;16            width: 100vw;17            background-color: #ffffff;18        }19        .header {20            padding: 10px;21            background-color: #f0f0f0;22            text-align: center;23        }24        h1 {25            margin: 0;26            font-size: 20px;27        }28        .task-description {29            padding: 10px;30            background-color: #e0e0e0;31            text-align: center;32        }33        .highlight {34            font-size: 1.1em;35            font-weight: bold;36            color: #0056b3;37            background-color: #e6e6e6;38            padding: 5px 10px;39            border-radius: 4px;40            display: inline-block;41            margin-top: 5px;42        }43        .visualization-container {44            flex-grow: 1;45            display: flex;46            justify-content: center;47            align-items: center;48            overflow: hidden;49        }50        iframe {51            width: 100%;52            height: 100%;53            border: none;54        }55        .buttons {56            display: flex;57            justify-content: space-around;58            padding: 10px;59            background-color: #f0f0f0;60        }61        button {62            background-color: #808080;63            color: white;64            padding: 10px 20px;65            border: none;66            border-radius: 5px;67            cursor: pointer;68            font-size: 16px;69            transition: background-color 0.3s ease;70        }71        button:hover {72            background-color: #707070;73        }74        .bottom-question {75            text-align: center;76            padding: 10px;77            background-color: #e0e0e0;78            font-weight: bold;79            font-size: 14px;80        }81        /* Loader styles */82        .overlay {83            position: fixed;84            top: 0;85            left: 0;86            width: 100%;87            height: 100%;88            background-color: rgba(0, 0, 0, 0.5);89            display: none;90            z-index: 1000;91        }92        .loader {93            border: 5px solid #f3f3f3;94            border-top: 5px solid #3498db;95            border-radius: 50%;96            width: 50px;97            height: 50px;98            animation: spin 1s linear infinite;99            position: fixed;100            top: 50%;101            left: 50%;102            margin-top: -25px;103            margin-left: -25px;104            display: none;105            z-index: 1001;106        }107        @keyframes spin {108            0% { transform: rotate(0deg); }109            100% { transform: rotate(360deg); }110        }111    </style>112    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">113</head>114<body>115    <div class="container">116        <div class="header">117            <h1>{{ sample_id + 1 }} / 10</h1>118        </div>119        <div class="task-description">120            <p><strong>Task:</strong> {{ statement | safe }}</p>121            <p class="highlight">You will not be given the model prediction. Based on the explanation below, will the AI model output a wrong prediction?</p>122        </div>123        <div class="visualization-container">124            <iframe src="{{ visualization }}"></iframe>125        </div>126        <div class="bottom-question">127            <h1>Will the model output a wrong prediction based on the provided explanation?</h1>128        </div>129        <div class="buttons">130            <form action="{{ url_for('feedback') }}" method="post" onsubmit="showLoader()">131                <input type="hidden" name="session_id" value="{{ session_id }}">132                <button type="submit" name="prediction" value="TRUE"><h1>Model will be Correct</h1></button>133            </form>134            <form action="{{ url_for('feedback') }}" method="post" onsubmit="showLoader()">135                <input type="hidden" name="session_id" value="{{ session_id }}">136                <button type="submit" name="prediction" value="FALSE"><h1>Model will be Wrong</h1></button>137            </form>138        </div>139    </div>140 141    <!-- Loader and overlay -->142    <div class="overlay" id="overlay"></div>143    <div class="loader" id="loader"></div>144 145    <script>146        function showLoader() {147            document.getElementById('overlay').style.display = 'block';148            document.getElementById('loader').style.display = 'block';149        }150    </script>151</body>152</html>