Update app.py

app.py

@@ -3,7 +3,6 @@ import json
 import uuid
 from datetime import datetime
 import os
-import pandas as pd
 
 class LegalTechEvaluator:
     def __init__(self):
@@ -45,6 +44,7 @@ class LegalTechEvaluator:
             "responses": {},
             "completed": False
         }
+        self.current_index = 0
         return user_id
     
     def record_choice(self, sample_choice):
@@ -134,8 +134,8 @@ Generated: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
 """
         
         for idx in range(len(self.data)):
-            if str(idx) in question_stats:
-                stats = question_stats[str(idx)]
+            if idx in question_stats:
+                stats = question_stats[idx]
                 total_responses = sum(stats.values())
                 if total_responses > 0:
                     question = self.data[idx]
@@ -169,6 +169,13 @@ custom_css = """
     max-width: 1200px !important;
     margin: 0 auto !important;
     padding: 0 !important;
+    background: transparent !important;
+}
+
+/* Fix for input text visibility */
+input[type="text"] {
+    color: #1f2937 !important;
+    background-color: white !important;
 }
 
 #main-container {
@@ -201,26 +208,28 @@ custom_css = """
     line-height: 1.6;
 }
 
-#name-input {
+#name-input-container {
     max-width: 400px;
     margin: 0 auto 24px;
 }
 
-#name-input input {
+#name-input-container input {
     font-size: 16px;
     padding: 12px 20px;
     border: 2px solid #e0e0e0;
     border-radius: 8px;
     width: 100%;
     transition: all 0.3s ease;
+    color: #1f2937 !important;
+    background-color: white !important;
 }
 
-#name-input input:focus {
+#name-input-container input:focus {
     border-color: #4a90e2;
     outline: none;
 }
 
-#start-button {
+.start-button {
     background: #2563eb;
     color: white;
     border: none;
@@ -232,7 +241,7 @@ custom_css = """
     transition: all 0.3s ease;
 }
 
-#start-button:hover {
+.start-button:hover {
     background: #1d4ed8;
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
@@ -391,7 +400,7 @@ custom_css = """
     border-top: 2px solid #e5e7eb;
 }
 
-#export-button {
+.export-button {
     background: #6366f1;
     color: white;
     padding: 14px 40px;
@@ -403,7 +412,7 @@ custom_css = """
     transition: all 0.3s ease;
 }
 
-#export-button:hover {
+.export-button:hover {
     background: #4f46e5;
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
@@ -428,6 +437,10 @@ custom_css = """
     display: none !important;
 }
 
+.show {
+    display: block !important;
+}
+
 .success-message {
     background: #d1fae5;
     color: #065f46;
@@ -450,19 +463,163 @@ custom_css = """
 }
 """
 
-# HTML Template
+# JavaScript code to handle interactions
+js_code = """
+function startEvaluation() {
+    const nameInput = document.querySelector('textarea[data-testid="textbox"]');
+    if (nameInput && nameInput.value.trim()) {
+        const hiddenNameInput = document.querySelector('#hidden-name textarea');
+        if (hiddenNameInput) {
+            hiddenNameInput.value = nameInput.value.trim();
+            hiddenNameInput.dispatchEvent(new Event('input', { bubbles: true }));
+            
+            setTimeout(() => {
+                const startBtn = document.querySelector('#start-session-btn button');
+                if (startBtn) {
+                    startBtn.click();
+                }
+            }, 100);
+        }
+    } else {
+        alert('Please enter your name');
+    }
+}
+
+function selectSample(sampleIndex) {
+    // Update hidden selection input
+    const selectionInput = document.querySelector('#hidden-selection textarea');
+    if (selectionInput) {
+        const sampleMap = ['sample_zero', 'sample_one', 'sample_two'];
+        selectionInput.value = sampleMap[sampleIndex];
+        selectionInput.dispatchEvent(new Event('input', { bubbles: true }));
+        
+        // Update visual selection
+        document.querySelectorAll('.sample-card').forEach(card => {
+            card.classList.remove('selected');
+        });
+        document.getElementById(`sample-${sampleIndex}`).classList.add('selected');
+        
+        // Enable confirm button
+        const confirmBtn = document.getElementById('confirm-button');
+        if (confirmBtn) {
+            confirmBtn.disabled = false;
+        }
+    }
+}
+
+function confirmSelection() {
+    const confirmBtn = document.querySelector('#confirm-btn button');
+    if (confirmBtn) {
+        confirmBtn.click();
+    }
+}
+
+function previousQuestion() {
+    const prevBtn = document.querySelector('#prev-btn button');
+    if (prevBtn) {
+        prevBtn.click();
+    }
+}
+
+function nextQuestion() {
+    const nextBtn = document.querySelector('#next-btn button');
+    if (nextBtn) {
+        nextBtn.click();
+    }
+}
+
+function exportResults() {
+    const exportBtn = document.querySelector('#export-btn button');
+    if (exportBtn) {
+        exportBtn.click();
+    }
+}
+
+// Update display based on state changes
+function updateDisplay() {
+    const stateElement = document.querySelector('#current-state textarea');
+    if (stateElement && stateElement.value) {
+        try {
+            const data = JSON.parse(stateElement.value);
+            
+            const welcomeScreen = document.getElementById('welcome-screen');
+            const evaluationContainer = document.getElementById('evaluation-container');
+            const fileUploadSection = document.getElementById('file-upload-section');
+            
+            if (data.showWelcome) {
+                welcomeScreen.style.display = 'block';
+                evaluationContainer.style.display = 'none';
+                fileUploadSection.style.display = 'none';
+            } else if (data.showFileUpload) {
+                welcomeScreen.style.display = 'none';
+                evaluationContainer.style.display = 'none';
+                fileUploadSection.style.display = 'block';
+            } else {
+                welcomeScreen.style.display = 'none';
+                evaluationContainer.style.display = 'block';
+                fileUploadSection.style.display = 'none';
+                
+                // Update content
+                if (data.userName) {
+                    const userInfo = document.getElementById('user-info');
+                    if (userInfo) userInfo.textContent = `Evaluator: ${data.userName}`;
+                }
+                
+                document.getElementById('current-question').textContent = data.currentIndex + 1;
+                document.getElementById('total-questions').textContent = data.totalQuestions;
+                document.getElementById('example-text').textContent = data.introductoryExample;
+                document.getElementById('sample-0-text').textContent = data.sampleZero;
+                document.getElementById('sample-1-text').textContent = data.sampleOne;
+                document.getElementById('sample-2-text').textContent = data.sampleTwo;
+                
+                // Update button states
+                document.getElementById('prev-button').disabled = data.currentIndex === 0;
+                document.getElementById('next-button').disabled = data.currentIndex >= data.totalQuestions - 1;
+                document.getElementById('confirm-button').disabled = true;
+                
+                // Clear selection
+                document.querySelectorAll('.sample-card').forEach(card => {
+                    card.classList.remove('selected');
+                });
+            }
+        } catch (e) {
+            console.error('Error parsing state:', e);
+        }
+    }
+}
+
+// Set up observer for state changes
+const observer = new MutationObserver(() => {
+    updateDisplay();
+});
+
+// Start observing when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    const stateElement = document.querySelector('#current-state textarea');
+    if (stateElement) {
+        observer.observe(stateElement, { 
+            attributes: true, 
+            childList: true, 
+            characterData: true,
+            subtree: true 
+        });
+        updateDisplay();
+    }
+});
+"""
+
+# HTML Template with onclick handlers
 html_template = """
 <div id="main-container">
     <div id="welcome-screen">
         <h1>Legal Tech Tool Evaluation</h1>
         <p>Compare and evaluate outputs from different legal technology tools to help us understand user preferences.</p>
-        <div id="name-input">
-            <input type="text" id="user-name" placeholder="Enter your name" />
+        <div id="name-input-container">
+            <!-- Gradio will inject the textbox here -->
         </div>
-        <button id="start-button" onclick="startEvaluation()">Start Evaluation</button>
     </div>
     
-    <div id="evaluation-container" class="hide">
+    <div id="evaluation-container">
         <div class="user-info" id="user-info"></div>
         
         <div id="question-header">
@@ -497,136 +654,22 @@ html_template = """
         
         <div id="action-buttons">
             <button class="nav-button" id="prev-button" onclick="previousQuestion()">← Previous</button>
-            <button class="nav-button" id="confirm-button" onclick="confirmSelection()">Confirm Selection</button>
+            <button class="nav-button" id="confirm-button" onclick="confirmSelection()" disabled>Confirm Selection</button>
             <button class="nav-button" id="next-button" onclick="nextQuestion()">Next →</button>
         </div>
         
         <div id="export-section">
-            <button id="export-button" onclick="exportResults()">Export Results</button>
+            <button class="export-button" onclick="exportResults()">Export Results</button>
             <div id="export-status"></div>
         </div>
     </div>
     
-    <div id="file-upload-section" class="hide">
+    <div id="file-upload-section">
         <h3>No data file found</h3>
         <p>Please upload a JSONL file to begin the evaluation</p>
-        <input type="file" id="file-input" accept=".jsonl" onchange="uploadFile()" />
+        <!-- File upload will be handled by Gradio -->
     </div>
 </div>
-
-<script>
-let currentSelection = null;
-let evaluationStarted = false;
-
-function startEvaluation() {
-    const name = document.getElementById('user-name').value.trim();
-    if (!name) {
-        alert('Please enter your name');
-        return;
-    }
-    
-    // Call Gradio function to start session
-    window.gradioApp().querySelector('#start-session-btn').click();
-}
-
-function selectSample(sampleIndex) {
-    // Clear previous selections
-    document.querySelectorAll('.sample-card').forEach(card => {
-        card.classList.remove('selected');
-    });
-    
-    // Add selection to clicked sample
-    document.getElementById(`sample-${sampleIndex}`).classList.add('selected');
-    currentSelection = sampleIndex;
-    
-    // Enable confirm button
-    document.getElementById('confirm-button').disabled = false;
-}
-
-function updateDisplay(data) {
-    if (!data) return;
-    
-    // Parse the data
-    const questionData = JSON.parse(data);
-    
-    if (questionData.showWelcome) {
-        document.getElementById('welcome-screen').classList.remove('hide');
-        document.getElementById('evaluation-container').classList.add('hide');
-        document.getElementById('file-upload-section').classList.add('hide');
-    } else if (questionData.showFileUpload) {
-        document.getElementById('welcome-screen').classList.add('hide');
-        document.getElementById('evaluation-container').classList.add('hide');
-        document.getElementById('file-upload-section').classList.remove('hide');
-    } else {
-        document.getElementById('welcome-screen').classList.add('hide');
-        document.getElementById('evaluation-container').classList.remove('hide');
-        document.getElementById('file-upload-section').classList.add('hide');
-        
-        // Update user info
-        if (questionData.userName) {
-            document.getElementById('user-info').textContent = `Evaluator: ${questionData.userName}`;
-        }
-        
-        // Update question info
-        document.getElementById('current-question').textContent = questionData.currentIndex + 1;
-        document.getElementById('total-questions').textContent = questionData.totalQuestions;
-        
-        // Update example and samples
-        document.getElementById('example-text').textContent = questionData.introductoryExample;
-        document.getElementById('sample-0-text').textContent = questionData.sampleZero;
-        document.getElementById('sample-1-text').textContent = questionData.sampleOne;
-        document.getElementById('sample-2-text').textContent = questionData.sampleTwo;
-        
-        // Update button states
-        document.getElementById('prev-button').disabled = questionData.currentIndex === 0;
-        document.getElementById('next-button').disabled = questionData.currentIndex >= questionData.totalQuestions - 1;
-        document.getElementById('confirm-button').disabled = true;
-        
-        // Clear selection
-        document.querySelectorAll('.sample-card').forEach(card => {
-            card.classList.remove('selected');
-        });
-        currentSelection = null;
-    }
-}
-
-function confirmSelection() {
-    if (currentSelection === null) return;
-    
-    const sampleMap = ['sample_zero', 'sample_one', 'sample_two'];
-    // Trigger Gradio function with selection
-    window.gradioApp().querySelector('#hidden-selection').value = sampleMap[currentSelection];
-    window.gradioApp().querySelector('#confirm-btn').click();
-}
-
-function previousQuestion() {
-    window.gradioApp().querySelector('#prev-btn').click();
-}
-
-function nextQuestion() {
-    window.gradioApp().querySelector('#next-btn').click();
-}
-
-function exportResults() {
-    window.gradioApp().querySelector('#export-btn').click();
-}
-
-function uploadFile() {
-    const fileInput = document.getElementById('file-input');
-    if (fileInput.files.length > 0) {
-        // Trigger Gradio file upload
-        window.gradioApp().querySelector('#file-upload-btn').click();
-    }
-}
-
-// Listen for Gradio updates
-setInterval(() => {
-    const stateElement = window.gradioApp().querySelector('#current-state');
-    if (stateElement && stateElement.value) {
-        updateDisplay(stateElement.value);
-    }
-}, 100);
-</script>
 """
 
 def start_session(name):
@@ -644,9 +687,12 @@ def get_current_state():
     """Get current state as JSON"""
     question = evaluator.get_current_question()
     
-    if not question:
+    if not evaluator.current_user_name:
         return json.dumps({"showWelcome": True})
     
+    if not question:
+        return json.dumps({"showFileUpload": True})
+    
     return json.dumps({
         "showWelcome": False,
         "showFileUpload": False,
@@ -683,26 +729,19 @@ def export_results_handler():
     """Export results and return status"""
     try:
         jsonl_file, md_file, json_file, md_content = evaluator.export_results()
-        
-        # Read files for download
-        with open(jsonl_file, 'r') as f:
-            jsonl_content = f.read()
-        with open(md_file, 'r') as f:
-            md_download = f.read()
-            
         return (
             get_current_state(),
-            gr.update(value="✅ Results exported successfully!"),
-            gr.File.update(value=jsonl_file, visible=True),
-            gr.File.update(value=md_file, visible=True),
+            "✅ Results exported successfully!",
+            jsonl_file,
+            md_file,
             md_content
         )
     except Exception as e:
         return (
             get_current_state(),
-            gr.update(value=f"❌ Export failed: {str(e)}"),
-            gr.File.update(visible=False),
-            gr.File.update(visible=False),
+            f"❌ Export failed: {str(e)}",
+            None,
+            None,
             ""
         )
 
@@ -713,19 +752,29 @@ def load_file(file):
     return get_current_state()
 
 # Create Gradio interface
-with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
+with gr.Blocks(css=custom_css, js=js_code, theme=gr.themes.Base()) as demo:
+    gr.HTML(html_template)
+    
+    # Visible name input in welcome screen
+    with gr.Column(elem_id="name-input-wrapper", visible=True):
+        user_name_input = gr.Textbox(
+            label="",
+            placeholder="Enter your name",
+            elem_id="user-name-field"
+        )
+        start_button = gr.Button("Start Evaluation", elem_classes=["start-button"])
+    
     # Hidden components for JavaScript interaction
     with gr.Column(visible=False):
-        name_input = gr.Textbox(elem_id="hidden-name")
+        hidden_name = gr.Textbox(elem_id="hidden-name")
         start_btn = gr.Button("Start", elem_id="start-session-btn")
-        current_state = gr.Textbox(elem_id="current-state")
+        current_state = gr.Textbox(value=json.dumps({"showWelcome": True}), elem_id="current-state")
         selection_input = gr.Textbox(elem_id="hidden-selection")
         confirm_btn = gr.Button("Confirm", elem_id="confirm-btn")
         prev_btn = gr.Button("Previous", elem_id="prev-btn")
         next_btn = gr.Button("Next", elem_id="next-btn")
         export_btn = gr.Button("Export", elem_id="export-btn")
-        file_upload = gr.File(elem_id="file-upload-input")
-        file_upload_btn = gr.Button("Upload", elem_id="file-upload-btn")
+        file_upload = gr.File(elem_id="file-upload-input", file_types=[".jsonl"])
     
     # Output components (hidden)
     with gr.Column(visible=False):
@@ -734,13 +783,16 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
         download_md = gr.File(label="Download Summary")
         summary_display = gr.Markdown()
     
-    # Main HTML interface
-    gr.HTML(html_template)
-    
     # Event handlers
+    start_button.click(
+        fn=start_session,
+        inputs=[user_name_input],
+        outputs=[current_state]
+    )
+    
     start_btn.click(
-        fn=lambda name: start_session(name),
-        inputs=[name_input],
+        fn=start_session,
+        inputs=[hidden_name],
         outputs=[current_state]
     )
     
@@ -765,16 +817,41 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
         outputs=[current_state, export_status, download_jsonl, download_md, summary_display]
     )
     
-    file_upload_btn.click(
+    file_upload.change(
         fn=load_file,
         inputs=[file_upload],
         outputs=[current_state]
     )
     
-    # Initial state
+    # Move name input to welcome screen on load
     demo.load(
-        fn=lambda: json.dumps({"showWelcome": True}) if not evaluator.data else get_current_state(),
-        outputs=[current_state]
+        fn=None,
+        js="""
+        () => {
+            // Move the name input to the welcome screen
+            const nameWrapper = document.querySelector('#name-input-wrapper');
+            const nameContainer = document.querySelector('#name-input-container');
+            if (nameWrapper && nameContainer) {
+                const nameField = nameWrapper.querySelector('.wrap');
+                if (nameField) {
+                    nameContainer.appendChild(nameField);
+                }
+                nameWrapper.style.display = 'none';
+            }
+            
+            // Style the start button
+            const startBtn = document.querySelector('#name-input-wrapper').nextElementSibling;
+            if (startBtn) {
+                const btn = startBtn.querySelector('button');
+                if (btn) {
+                    btn.className = 'start-button';
+                    btn.onclick = () => startEvaluation();
+                }
+                document.querySelector('#welcome-screen').appendChild(btn);
+                startBtn.style.display = 'none';
+            }
+        }
+        """
     )
 
 # Create sample data if no file exists