File size: 3,804 Bytes
8066b54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b15ca4d
8066b54
 
 
 
 
 
 
 
 
 
13cc174
 
 
8066b54
486165c
8066b54
b15ca4d
8066b54
 
 
 
b15ca4d
 
 
8066b54
 
 
b15ca4d
8066b54
 
 
 
 
 
 
 
 
 
 
 
 
 
b15ca4d
 
 
 
 
 
 
 
 
 
 
 
 
 
8066b54
 
b15ca4d
 
 
 
 
8066b54
486165c
8066b54
b15ca4d
8066b54
 
 
 
 
 
 
 
b15ca4d
 
 
 
 
 
 
 
13cc174
 
b15ca4d
 
 
 
 
 
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
let sessionId = null;

function setLoading(isLoading, action) {
    const button = document.getElementById(action === 'upload' ? 'uploadButton' : 'queryButton');
    const spinner = document.getElementById(action === 'upload' ? 'uploadSpinner' : 'querySpinner');
    
    if (isLoading) {
        button.classList.add('loading');
        spinner.style.display = 'inline';
        button.disabled = true;
    } else {
        button.classList.remove('loading');
        spinner.style.display = 'none';
        button.disabled = false;
    }
}

async function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const uploadSpinner = document.getElementById('uploadSpinner');
    
    if (!fileInput.files.length) {
        return;
    }

    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);

    setLoading(true, 'upload');
    
    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        sessionId = data.session_id;
        
        // Show the query section after successful upload
        document.querySelector('.query-section').style.display = 'block';
        
    } catch (error) {
        console.error('Error uploading file:', error);
    } finally {
        setLoading(false, 'upload');
    }
}

async function submitQuery() {
    const queryInput = document.getElementById('queryInput');
    
    if (!queryInput.value.trim()) {
        return;
    }

    setLoading(true, 'query');
    
    try {
        const response = await fetch('/query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                session_id: sessionId,
                query: queryInput.value
            })
        });
        
        const data = await response.json();
        
        // Show response section and its components
        const responseSection = document.querySelector('.response-section');
        responseSection.style.display = 'block';
        
        // Update and show answer
        const answerElement = document.getElementById('answer');
        answerElement.textContent = data.answer;
        answerElement.style.display = 'block';
        
        // Show switch container
        document.querySelector('.switch-container').style.display = 'block';
        
        // Update context
        document.getElementById('context').innerHTML = data.context.join('<br><br>');
        
        // Show context section if toggle is checked
        if (document.getElementById('contextToggle').checked) {
            document.getElementById('contextSection').style.display = 'block';
        }
        
    } catch (error) {
        console.error('Error submitting query:', error);
    } finally {
        setLoading(false, 'query');
    }
}

function toggleContext() {
    const contextSection = document.getElementById('contextSection');
    contextSection.style.display = document.getElementById('contextToggle').checked ? 'block' : 'none';
}

// Initialize UI state
document.addEventListener('DOMContentLoaded', function() {
    // Hide all spinners by default
    const spinners = document.querySelectorAll('.spinner');
    spinners.forEach(spinner => {
        spinner.style.display = 'none';
    });
    
    // Show all sections by default
    document.querySelector('.query-section').style.display = 'block';
    document.querySelector('.response-section').style.display = 'block';
    document.getElementById('contextSection').style.display = 'none';
    
    // Show switch container
    document.querySelector('.switch-container').style.display = 'block';
});