Hugging Face's logo

Spaces:
sushintern01
/
ChartQA_FLASK
Runtime error

App Files Community
ChartQA_FLASK
File size: 5,146 Bytes 
e2a80d5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
document.addEventListener('DOMContentLoaded', function() {
    const uploadForm = document.getElementById('uploadForm');
    const uploadStatus = document.getElementById('uploadStatus');
    const imageSection = document.getElementById('imageSection');
    const chartPreview = document.getElementById('chartPreview');
    const analysisSection = document.getElementById('analysisSection');
    const analysisResults = document.getElementById('analysisResults');
    const analyzeButton = document.getElementById('analyzeButton');
    const queryInput = document.getElementById('query');
    const useCotCheckbox = document.getElementById('use_cot');
    const extractSection = document.getElementById('extractSection');
    const extractButton = document.getElementById('extractButton');
    const downloadSection = document.getElementById('downloadSection');
    const downloadLink = document.getElementById('downloadLink');
    const extractStatus = document.getElementById('extractStatus');

    // Function to show a message
    function showMessage(element, message, isError = false) {
        element.textContent = message;
        element.style.color = isError ? 'red' : 'green';
    }

    // Function to clear a message
    function clearMessage(element) {
        element.textContent = '';
    }

    // Handle image upload
    uploadForm.addEventListener('submit', async function(event) {
        event.preventDefault();
        clearMessage(uploadStatus);

        const formData = new FormData(uploadForm);

        try {
            const response = await fetch('/upload', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.error) {
                showMessage(uploadStatus, data.error, true);
                imageSection.style.display = 'none';
                analysisSection.style.display = 'none';
                extractSection.style.display = 'none';
                downloadSection.style.display = 'none';

            } else {
                chartPreview.src = data.image_url;
                imageSection.style.display = 'block';
                analysisSection.style.display = 'block';
                extractSection.style.display = 'block';
                downloadSection.style.display = 'none'; // Hide initially
                showMessage(uploadStatus, 'Image uploaded successfully!');

            }
        } catch (error) {
            showMessage(uploadStatus, 'An error occurred during upload.', true);
            console.error('Upload error:', error);
            imageSection.style.display = 'none';
            analysisSection.style.display = 'none';
            extractSection.style.display = 'none';
            downloadSection.style.display = 'none';
        }
    });

    // Handle analyze chart
    analyzeButton.addEventListener('click', async function() {
        clearMessage(analysisResults);

        const query = queryInput.value;
        const useCot = useCotCheckbox.checked;

        if (!query) {
            showMessage(analysisResults, 'Please enter a question.', true);
            return;
        }

        const formData = new FormData();
        formData.append('query', query);
        formData.append('use_cot', useCot);

        try {
            const response = await fetch('/analyze', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.error) {
                showMessage(analysisResults, data.error, true);
            } else {
                analysisResults.textContent = 'Answer: ' + data.answer;
                analysisResults.style.color = 'black';
            }
        } catch (error) {
            showMessage(analysisResults, 'An error occurred during analysis.', true);
            console.error('Analysis error:', error);
        }
    });

     // Handle extract data
    extractButton.addEventListener('click', async function() {
        clearMessage(extractStatus);
        downloadSection.style.display = 'none'; // Hide until data is ready

        try {
            const response = await fetch('/extract', {
                method: 'POST'
            });

            const data = await response.json();

            if (data.error) {
                showMessage(extractStatus, data.error, true);
            } else {
                // CSV data is in base64 format
                const csvData = atob(data.csv_data); // Decode base64
                const blob = new Blob([csvData], { type: 'text/csv' });
                const url = URL.createObjectURL(blob);

                downloadLink.href = url;
                downloadLink.style.display = 'inline';  // Show the download link
                downloadSection.style.display = 'block';  // Show the whole section

                showMessage(extractStatus, 'Data extracted successfully!');
            }
        } catch (error) {
            showMessage(extractStatus, 'An error occurred during extraction.', true);
            console.error('Extraction error:', error);
        }
    });

});