update

app.py

@@ -6,6 +6,7 @@ import string
 import logging
 from datetime import datetime
 from huggingface_hub import login, HfApi, hf_hub_download
+from bs4 import BeautifulSoup
 
 # Set up logging
 logging.basicConfig(level=logging.INFO,
@@ -134,11 +135,29 @@ def index():
             return "An error occurred", 500
     return render_template('index.html')
 
+
+def modify_plan_of_sqls_html(html_content):
+    soup = BeautifulSoup(html_content, 'html.parser')
+
+    # Remove the final table
+    final_table = soup.find('table', {'class': 'table-auto'})
+    if final_table:
+        final_table.decompose()
+
+    # Remove the Prediction line
+    prediction_p = soup.find('p', string=lambda text: 'Prediction:' in text if text else False)
+    if prediction_p:
+        prediction_p.decompose()
+
+    return str(soup)
+
+
 @app.route('/experiment/<username>', methods=['GET', 'POST'])
 def experiment(username):
     try:
         session_data = load_session_data(username)
         if not session_data:
+            logger.error(f"Failed to load session data for user: {username}")
             return redirect(url_for('index'))
 
         selected_samples = session_data['selected_samples']
@@ -149,8 +168,18 @@ def experiment(username):
             return redirect(url_for('completed', username=username))
 
         sample = selected_samples[current_index]
-        visualization_dir = VISUALIZATION_DIRS[method]
-        visualization_path = f"{visualization_dir}/{sample['category']}/{sample['file']}"
+        visualization_path = f"{VISUALIZATION_DIRS[method]}/{sample['category']}/{sample['file']}"
+
+        # Modify the HTML content for Plan-of-SQLs
+        if method == 'Plan-of-SQLs':
+            with open(visualization_path, 'r') as file:
+                html_content = file.read()
+            modified_html = modify_plan_of_sqls_html(html_content)
+            # Save the modified HTML to a temporary file
+            temp_path = f"/tmp/{sample['file']}"
+            with open(temp_path, 'w') as file:
+                file.write(modified_html)
+            visualization_path = temp_path
 
         statement = """
 Based on the explanation provided, what do you think the AI model will predict?

requirements.txt

@@ -6,4 +6,5 @@ jinja2==3.1.4
 numpy==1.23.3
 scipy==1.9.3
 flask_session==0.8.0
-redis
+redis
+beautifulsoup4

templates/index.html

@@ -58,19 +58,19 @@
             font-weight: bold;
             text-align: center;
         }
-        .method-button.cot {
+        .method-button.Chain-of-Table {
             background-color: #e0f0ff;
             color: #1e90ff;
         }
-        .method-button.pos {
+        .method-button.Plan-of-SQLs {
             background-color: #ffcc80;
             color: #e65100;
         }
-        .method-button.dater {
+        .method-button.Dater {
             background-color: #e8f5e9;
             color: #4caf50;
         }
-        .method-button.no-xai {
+        .method-button.No-XAI {
             background-color: #fff3e0;
             color: #ff9800;
         }
@@ -81,6 +81,12 @@
             border-color: #000000;
             box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
             transform: scale(1.05);
+            animation: borderPulse 0.5s ease-in-out;
+        }
+        @keyframes borderPulse {
+            0% { border-color: transparent; }
+            50% { border-color: #000000; }
+            100% { border-color: #000000; }
         }
         button[type="submit"] {
             background-color: #4CAF50;
@@ -106,7 +112,7 @@
                 buttons[i].classList.remove('selected');
             }
 
-            var selectedButton = document.querySelector(`.${method.toLowerCase().replace('-', '-')}`);
+            var selectedButton = document.querySelector(`.method-button.${method}`);
             if (selectedButton) {
                 selectedButton.classList.add('selected');
             }
@@ -137,16 +143,16 @@
             <input type="hidden" id="method" name="method" required>
 
             <div class="method-buttons">
-                <div class="method-button cot" onclick="selectMethod('Chain-of-Table')">
+                <div class="method-button Chain-of-Table" onclick="selectMethod('Chain-of-Table')">
                     Chain-of-Table
                 </div>
-                <div class="method-button pos" onclick="selectMethod('Plan-of-SQLs')">
+                <div class="method-button Plan-of-SQLs" onclick="selectMethod('Plan-of-SQLs')">
                     Plan-of-SQLs
                 </div>
-                <div class="method-button dater" onclick="selectMethod('Dater')">
+                <div class="method-button Dater" onclick="selectMethod('Dater')">
                     Dater
                 </div>
-                <div class="method-button no-xai" onclick="selectMethod('No-XAI')">
+                <div class="method-button No-XAI" onclick="selectMethod('No-XAI')">
                     No-XAI
                 </div>
             </div>