luulinh90s/Tabular-LLM-Study-Debugging

1<!DOCTYPE html>2<html>3<head>4    <title>Trustworthy LLMs for Table QA</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            display: flex;11            justify-content: center;12            align-items: center;13            height: 100vh;14            margin: 0;15        }16        .container {17            text-align: center;18            background-color: #ffffff;19            padding: 60px;20            border-radius: 10px;21            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);22            width: 60%;23        }24        h1 {25            color: #000000;26            font-size: 48px;27            margin-bottom: 30px;28        }29        label {30            display: block;31            margin: 20px 0 10px;32            color: #000000;33            font-size: 24px;34        }35        input[type="text"], input[type="number"] {36            width: 80%;37            padding: 15px;38            margin-bottom: 20px;39            border: 1px solid #ddd;40            border-radius: 5px;41            font-size: 18px;42        }43        .method-buttons {44            display: flex;45            flex-wrap: wrap;46            justify-content: center;47            margin-bottom: 20px;48            gap: 20px;49        }50        .method-button {51            width: calc(45% - 10px);52            padding: 15px;53            font-size: 20px;54            border-radius: 10px;55            cursor: pointer;56            transition: all 0.3s ease;57            border: 2px solid transparent;58            font-weight: bold;59            text-align: center;60        }61        .method-button.Chain-of-Table {62            background-color: #e0f0ff;63            color: #1e90ff;64        }65        .method-button.Plan-of-SQLs {66            background-color: #ffcc80;67            color: #e65100;68        }69        .method-button.Dater {70            background-color: #e8f5e9;71            color: #4caf50;72        }73        .method-button.No-XAI {74            background-color: #fff3e0;75            color: #ff9800;76        }77        .task-instruction {78            background-color: #f0f8ff;79            border-left: 5px solid #4CAF50;80            padding: 20px;81            margin-bottom: 30px;82            border-radius: 5px;83            text-align: left;84        }85        .task-instruction h2 {86            color: #4CAF50;87            margin-top: 0;88        }89        .task-step {90            display: flex;91            align-items: center;92            margin-bottom: 15px;93        }94        .task-icon {95            font-size: 24px;96            margin-right: 15px;97            color: #4CAF50;98        }99        .task-text {100            font-size: 18px;101            color: #333;102        }103        .method-button:hover {104            opacity: 0.8;105        }106        .method-button.selected {107            border-color: #000000;108            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);109            transform: scale(1.05);110            animation: borderPulse 0.5s ease-in-out;111        }112        @keyframes borderPulse {113            0% { border-color: transparent; }114            50% { border-color: #000000; }115            100% { border-color: #000000; }116        }117        button {118            background-color: #4CAF50;119            color: white;120            padding: 15px 30px;121            border: none;122            border-radius: 5px;123            cursor: pointer;124            font-size: 24px;125            transition: background-color 0.3s ease;126            margin-top: 20px;127        }128        button:hover {129            background-color: #45a049;130        }131        .error-message {132            color: red;133            margin-bottom: 10px;134            font-size: 18px;135        }136    </style>137    <script>138        function selectMethod(method) {139            document.getElementById('method').value = method;140 141            var buttons = document.getElementsByClassName('method-button');142            for (var i = 0; i < buttons.length; i++) {143                buttons[i].classList.remove('selected');144            }145 146            var selectedButton = document.querySelector(`.method-button.${method}`);147            if (selectedButton) {148                selectedButton.classList.add('selected');149            }150        }151 152        function validateForm() {153            var username = document.getElementById('username').value;154            var seed = document.getElementById('seed').value;155            var method = document.getElementById('method').value;156            if (!username || !seed || !method) {157                alert("Please fill in all fields and select a method.");158                return false;159            }160            return true;161        }162    </script>163    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">164</head>165<body>166    <div class="container">167        <div class="task-instruction">168            <h2>Let's Get Started! 🚀</h2>169            <div class="task-step">170                <span class="task-icon">👤</span>171                <span class="task-text">Enter your name</span>172            </div>173            <div class="task-step">174                <span class="task-icon">🔢</span>175                <span class="task-text">Choose a lucky number</span>176            </div>177            <div class="task-step">178                <span class="task-icon">📊</span>179                <span class="task-text">Select an explanation method</span>180            </div>181            <div class="task-step">182                <span class="task-icon">🎯</span>183                <span class="task-text">Complete 10 samples in the experiment</span>184            </div>185        </div>186 187        {% if error %}188        <div class="error-message">189            {{ error }}190        </div>191        {% endif %}192 193        <form id="method-form" action="{{ url_for('index') }}" method="post" onsubmit="return validateForm();">194            <label for="username">Hi there 👋👋👋 ! What is your name?</label>195            <input type="text" id="username" name="username" required>196            <label for="seed">What is your lucky number? 🍀🍀🍀 </label>197            <input type="number" id="seed" name="seed" required>198 199            <input type="hidden" id="method" name="method" required>200 201            <h2 style="color: #333; margin-top: 30px; margin-bottom: 20px;">Explanation Methods</h2>202 203            <div class="method-buttons">204                <div class="method-button Chain-of-Table" onclick="selectMethod('Chain-of-Table')">205                    Chain-of-Table206                </div>207                <div class="method-button Plan-of-SQLs" onclick="selectMethod('Plan-of-SQLs')">208                    Plan-of-SQLs209                </div>210                <div class="method-button Dater" onclick="selectMethod('Dater')">211                    Dater212                </div>213                {% if show_no_xai %}214                <div class="method-button No-XAI" onclick="selectMethod('No-XAI')">215                    No-XAI216                </div>217                {% endif %}218            </div>219 220            <button type="submit">Next</button>221        </form>222    </div>223</body>224</html>