Adapt to HF

app.py

@@ -29,8 +29,22 @@ ALLOWED_EXTENSIONS = {"txt", "npz", "xlsx", "xls"}
 app = Flask(__name__)
 app.config["MAX_CONTENT_LENGTH"] = 32 * 1024 * 1024  # 32MB max file size
 app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER
+app.config["SEND_FILE_MAX_AGE_DEFAULT"] = 0  # Disable caching
 file_lock = threading.Lock()
 
+# Configure for Hugging Face environment
+app.config["PREFERRED_URL_SCHEME"] = "https"
+app.config["SESSION_COOKIE_SECURE"] = True
+app.config["SESSION_COOKIE_SAMESITE"] = "None"
+
+# Set CORS headers for all responses
+@app.after_request
+def after_request(response):
+    response.headers.add('Access-Control-Allow-Origin', '*')
+    response.headers.add('Access-Control-Allow-Headers', 'Content-Type')
+    response.headers.add('Access-Control-Allow-Methods', 'GET,POST,OPTIONS')
+    return response
+
 # Ensure upload directory exists
 os.makedirs(app.config["UPLOAD_FOLDER"], exist_ok=True)
 
@@ -297,34 +311,50 @@ def upload_selection_file():
     """Handle file upload and process selection."""
     try:
         print("Debug - Starting upload_selection_file")
+        print("Debug - Request files:", request.files)
+        print("Debug - Request form:", request.form)
 
         if "file" not in request.files:
-            return create_json_response({"error": "No file provided"}, 400)
+            return create_json_response({"error": "No file provided", "debug": "file not in request.files"}, 400)
 
         file = request.files["file"]
         if file.filename == "":
-            return create_json_response({"error": "No file selected"}, 400)
+            return create_json_response({"error": "No file selected", "debug": "empty filename"}, 400)
 
         if not allowed_file(file.filename):
-            return create_json_response({"error": "File type not allowed"}, 400)
+            return create_json_response({"error": "File type not allowed", "debug": f"invalid file type: {file.filename}"}, 400)
 
-        # Get parameters
+        # Get parameters with debug logging
         algorithm = request.form.get("algorithm")
+        print("Debug - Algorithm:", algorithm)
         if not algorithm:
-            return create_json_response({"error": "No algorithm specified"}, 400)
+            return create_json_response({"error": "No algorithm specified", "debug": "algorithm not in form"}, 400)
 
         # Get size parameter
         size = request.form.get("size")
+        print("Debug - Size:", size)
         if not size:
-            return create_json_response({"error": "Subset size must be specified"}, 400)
+            return create_json_response({"error": "Subset size must be specified", "debug": "size not in form"}, 400)
+
+        try:
+            size = int(size)
+            if size < 1:
+                raise ValueError("Size must be positive")
+        except ValueError as e:
+            return create_json_response({"error": f"Invalid size value: {str(e)}", "debug": f"size validation failed: {size}"}, 400)
 
         # Get distance function
         dist_metric = request.form.get("func_dist", "")
+        print("Debug - Distance metric:", dist_metric)
 
         # Parse parameters
         try:
-            parameters = orjson.loads(request.form.get("parameters", "{}"))
+            parameters_str = request.form.get("parameters", "{}")
+            print("Debug - Parameters string:", parameters_str)
+            parameters = orjson.loads(parameters_str)
+            print("Debug - Parsed parameters:", parameters)
         except Exception as e:
+            print("Debug - Parameter parsing error:", str(e))
             parameters = {}
 
         # Add size to parameters
@@ -332,34 +362,43 @@ def upload_selection_file():
 
         # Create a unique directory for this upload
         upload_dir = get_unique_upload_dir()
+        print("Debug - Upload directory:", upload_dir)
 
         try:
             # Save file with unique name
-            file_path = os.path.join(
-                upload_dir, secure_filename(str(uuid.uuid4()) + "_" + file.filename)
-            )
+            filename = secure_filename(str(uuid.uuid4()) + "_" + file.filename)
+            file_path = os.path.join(upload_dir, filename)
+            print("Debug - File path:", file_path)
 
             with file_lock:
                 file.save(file_path)
-                # os.chmod(file_path, 0o666)  # Read/write for all
+                os.chmod(file_path, 0o666)  # Read/write for all
+                print("Debug - File saved successfully")
 
             # Load data
+            print("Debug - Loading data from file")
             array = load_data(file_path)
+            print("Debug - Data loaded, shape:", array.shape)
 
-            # Process the selection with separate dist_metric parameter
+            # Process the selection
+            print("Debug - Processing selection")
             result = process_selection(array, algorithm, parameters, dist_metric)
+            print("Debug - Selection processed")
 
             return create_json_response(result)
 
         except Exception as e:
-            return create_json_response({"error": str(e)}, 500)
+            print("Debug - Processing error:", str(e))
+            return create_json_response({"error": str(e), "debug": "processing error"}, 500)
 
         finally:
             # Clean up the unique upload directory
+            print("Debug - Cleaning up upload directory")
             clean_upload_dir(upload_dir)
 
     except Exception as e:
-        return create_json_response({"error": f"Error processing request: {str(e)}"}, 400)
+        print("Debug - Unexpected error:", str(e))
+        return create_json_response({"error": f"Error processing request: {str(e)}", "debug": "unexpected error"}, 400)
 
 
 @app.route("/download", methods=["POST"])
@@ -513,4 +552,3 @@ def health_check():
 
 if __name__ == "__main__":
     app.run(debug=False, host="0.0.0.0", port=7860)
-

templates/index.html

@@ -421,6 +421,8 @@
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"></script>
     <script>
+        let currentIndices = null;  // Store the current indices globally
+
         // Initialize layout on page load
         document.addEventListener('DOMContentLoaded', function() {
             // Handle iframe environment
@@ -430,25 +432,63 @@
                 document.body.style.height = '100%';
             }
 
+            // Initialize navigation
+            initializeNavigation();
+            
             // Show initial section
             showSection('selection');
-
+            
             // Update parameters for default algorithm
             updateDefaultParams();
-
+            
             // Load markdown content
             loadMarkdownContent();
 
-            // Ensure proper layout in iframe
-            window.addEventListener('resize', function() {
-                if (window.self !== window.top) {
-                    document.documentElement.style.height = '100%';
-                    document.body.style.height = '100%';
-                }
-            });
+            // Initialize form handlers
+            initializeFormHandlers();
         });
 
+        function initializeNavigation() {
+            // Handle navigation clicks
+            document.querySelectorAll('.nav-link').forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const sectionId = this.getAttribute('data-section');
+                    if (sectionId) {
+                        showSection(sectionId);
+                    }
+                });
+            });
+        }
+
+        function initializeFormHandlers() {
+            // Selection form handler
+            const selectionForm = document.getElementById('selectionForm');
+            if (selectionForm) {
+                selectionForm.addEventListener('submit', handleSelectionSubmit);
+            }
+
+            // Diversity form handler
+            const diversityForm = document.getElementById('diversity-form');
+            if (diversityForm) {
+                diversityForm.addEventListener('submit', handleDiversitySubmit);
+            }
+
+            // Algorithm change handler
+            const algorithmSelect = document.getElementById('algorithm');
+            if (algorithmSelect) {
+                algorithmSelect.addEventListener('change', handleAlgorithmChange);
+            }
+
+            // nbins_axis change handler
+            const nbinsInput = document.getElementById('nbins_axis');
+            if (nbinsInput) {
+                nbinsInput.addEventListener('input', handleNbinsChange);
+            }
+        }
+
         function showSection(sectionId) {
+            console.log('Showing section:', sectionId);
             // Hide all sections
             document.querySelectorAll('.section').forEach(section => {
                 section.style.display = 'none';
@@ -458,160 +498,24 @@
             const selectedSection = document.getElementById(sectionId);
             if (selectedSection) {
                 selectedSection.style.display = 'block';
+                console.log('Section displayed:', sectionId);
 
                 // Update active nav link
                 document.querySelectorAll('.nav-link').forEach(link => {
                     link.classList.remove('active');
-                    if (link.getAttribute('href') === '#' + sectionId) {
+                    if (link.getAttribute('data-section') === sectionId) {
                         link.classList.add('active');
                     }
                 });
 
                 // Reset scroll position
-                if (selectedSection.scrollTo) {
-                    selectedSection.scrollTo(0, 0);
-                }
-
-                // Force layout recalculation in iframe
-                if (window.self !== window.top) {
-                    selectedSection.style.height = '100%';
-                    selectedSection.style.overflow = 'auto';
-                }
+                selectedSection.scrollTop = 0;
             }
         }
 
-        // Sidebar toggle functionality
-        const sidebar = document.getElementById('sidebar');
-        const content = document.getElementById('content');
-        const sidebarCollapse = document.getElementById('sidebarCollapse');
-        const showSidebarBtn = document.getElementById('showSidebarBtn');
-
-        function toggleSidebar() {
-            sidebar.classList.toggle('active');
-            content.classList.toggle('active');
-            showSidebarBtn.classList.toggle('show', sidebar.classList.contains('active'));
-        }
-
-        sidebarCollapse.addEventListener('click', toggleSidebar);
-        showSidebarBtn.addEventListener('click', toggleSidebar);
-
-        // Handle navigation clicks
-        document.querySelectorAll('.nav-link').forEach(link => {
-            link.addEventListener('click', (e) => {
-                e.preventDefault();
-                const sectionId = link.getAttribute('data-section');
-                showSection(sectionId);
-            });
-        });
-
-        async function updateDefaultParams() {
-            const algorithm = document.getElementById('algorithm').value;
-            const parametersTextarea = document.getElementById('parameters');
-            const nbinsInput = document.getElementById('nbins_axis');
-
-            try {
-                const response = await fetch(`/get_default_params/${algorithm}`);
-                const data = await response.json();
-
-                if (response.ok) {
-                    // Get base parameters
-                    const params = data;
-
-                    // Add nbins_axis for GridPartition
-                    if (algorithm === 'GridPartition') {
-                        params.nbins_axis = parseInt(nbinsInput.value) || 5;
-                    }
-
-                    // Format the parameters nicely
-                    parametersTextarea.value = JSON.stringify(params, null, 2);
-                } else {
-                    console.error('Error getting default parameters:', data.error);
-                    parametersTextarea.value = '{}';
-                }
-            } catch (error) {
-                console.error('Error:', error);
-                parametersTextarea.value = '{}';
-            }
-        }
-
-        // Update parameters when algorithm changes
-        document.getElementById('algorithm').addEventListener('change', function() {
-            const algorithm = this.value;
-            const nbinsContainer = document.getElementById('nbins_axis_container');
-
-            // Show/hide nbins_axis input based on algorithm
-            if (algorithm === 'GridPartition') {
-                nbinsContainer.style.display = 'block';
-            } else {
-                nbinsContainer.style.display = 'none';
-            }
-
-            updateDefaultParams();
-        });
-
-        // Update parameters when nbins_axis changes
-        document.getElementById('nbins_axis').addEventListener('input', function() {
-            if (document.getElementById('algorithm').value === 'GridPartition') {
-                const params = JSON.parse(document.getElementById('parameters').value || '{}');
-                params.nbins_axis = parseInt(this.value) || 5;
-                document.getElementById('parameters').value = JSON.stringify(params, null, 2);
-            }
-        });
-
-        // Update parameters when page loads
-        document.addEventListener('DOMContentLoaded', function() {
-            updateDefaultParams();
-            // Also trigger algorithm change to show/hide nbins_axis input
-            const algorithmSelect = document.getElementById('algorithm');
-            algorithmSelect.dispatchEvent(new Event('change'));
-        });
-
-        async function downloadIndices() {
-            if (!currentIndices) {
-                console.error('No indices available for download');
-                return;
-            }
-
-            const format = document.getElementById('download-format').value;
-            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-
-            try {
-                const response = await fetch('/download', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        indices: currentIndices,
-                        format: format,
-                        timestamp: timestamp
-                    })
-                });
-
-                if (response.ok) {
-                    // Create a download link
-                    const blob = await response.blob();
-                    const url = window.URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = `selected_indices_${timestamp}.${format}`;
-                    document.body.appendChild(a);
-                    a.click();
-                    window.URL.revokeObjectURL(url);
-                    a.remove();
-                } else {
-                    const error = await response.json();
-                    console.error('Download failed:', error);
-                    alert('Failed to download results: ' + (error.error || 'Unknown error'));
-                }
-            } catch (error) {
-                console.error('Download error:', error);
-                alert('Error downloading results: ' + error.message);
-            }
-        }
-
-        document.getElementById('selectionForm').addEventListener('submit', async (e) => {
+        async function handleSelectionSubmit(e) {
             e.preventDefault();
+            console.log('Selection form submitted');
 
             const formData = new FormData(e.target);
             const resultSection = document.getElementById('resultSection');
@@ -620,40 +524,30 @@
             const successContent = document.getElementById('success-content');
             const indicesDiv = document.getElementById('indices');
 
-            // Validate size is an integer
-            const size = parseInt(formData.get('size'));
-            if (isNaN(size) || size < 1 || size !== parseFloat(formData.get('size'))) {
-                errorDiv.textContent = 'Size must be a positive integer';
-                resultSection.style.display = 'block';
-                return;
-            }
-
+            // Show loading state
+            resultSection.style.display = 'block';
+            warningsDiv.style.display = 'none';
+            errorDiv.style.display = 'none';
+            successContent.style.display = 'none';
+            
             try {
+                console.log('Sending selection request...');
                 const response = await fetch('/upload_selection', {
                     method: 'POST',
                     body: formData
                 });
 
                 const data = await response.json();
-                console.log('Response data:', data);
-
-                // Reset display
-                resultSection.style.display = 'block';
-                warningsDiv.style.display = 'none';
-                errorDiv.style.display = 'none';
-                successContent.style.display = 'none';
+                console.log('Selection response:', data);
 
                 if (response.ok && data.success) {
-                    // Store the indices globally
                     currentIndices = data.indices;
-
-                    // Show warnings if any
+                    
                     if (data.warnings && data.warnings.length > 0) {
                         warningsDiv.textContent = 'Warnings: ' + data.warnings.join(', ');
                         warningsDiv.style.display = 'block';
                     }
 
-                    // Show results
                     indicesDiv.textContent = JSON.stringify(data.indices, null, 2);
                     successContent.style.display = 'block';
                 } else {
@@ -661,42 +555,20 @@
                     errorDiv.style.display = 'block';
                 }
             } catch (error) {
-                console.error('Error:', error);
+                console.error('Selection error:', error);
                 errorDiv.textContent = 'Error processing request: ' + error.message;
                 errorDiv.style.display = 'block';
             }
-        });
-
-        // Load markdown content and add MathJax support
-        async function loadMarkdownContent() {
-            try {
-                // Load about content
-                const aboutResponse = await fetch('/md/about.md');
-                const aboutData = await aboutResponse.json();
-                document.getElementById('about-content').innerHTML = aboutData.html;
-
-                // Load contact content
-                const contactResponse = await fetch('/md/contacts.md');
-                const contactData = await contactResponse.json();
-                document.getElementById('contact-content').innerHTML = contactData.html;
-
-                // Retypeset math
-                if (window.MathJax && window.MathJax.Hub) {
-                    window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub]);
-                }
-            } catch (error) {
-                console.error('Error loading markdown content:', error);
-            }
         }
 
-        document.getElementById('diversity-form').addEventListener('submit', async function(e) {
+        async function handleDiversitySubmit(e) {
             e.preventDefault();
+            console.log('Diversity form submitted');
 
-            const formData = new FormData(this);
+            const formData = new FormData(e.target);
             const parameters = document.getElementById('div_parameters').value;
 
             try {
-                // Parse and add JSON parameters
                 const params = JSON.parse(parameters || '{}');
                 formData.set('div_parameters', JSON.stringify(params));
 
@@ -706,39 +578,87 @@
                 });
 
                 const result = await response.json();
+                console.log('Diversity response:', result);
 
                 if (response.ok) {
-                    // Show results
                     document.getElementById('diversity-results').style.display = 'block';
                     document.getElementById('diversity-score').textContent = result.diversity_score;
                 } else {
                     alert('Error: ' + result.error);
                 }
             } catch (error) {
-                console.error('Error:', error);
+                console.error('Diversity error:', error);
                 alert('Error calculating diversity: ' + error.message);
             }
-        });
+        }
 
-        // Set default parameters when diversity type changes
-        document.getElementById('div_type').addEventListener('change', function() {
-            const defaultParams = {
-                normalize: false,
-                truncation: false,
-                cs: null
-            };
-            document.getElementById('div_parameters').value = JSON.stringify(defaultParams, null, 2);
-        });
+        function handleAlgorithmChange() {
+            const algorithm = this.value;
+            const nbinsContainer = document.getElementById('nbins_axis_container');
 
-        // Initialize default parameters
-        document.addEventListener('DOMContentLoaded', function() {
-            const defaultParams = {
-                normalize: false,
-                truncation: false,
-                cs: null
-            };
-            document.getElementById('div_parameters').value = JSON.stringify(defaultParams, null, 2);
-        });
+            console.log('Algorithm changed to:', algorithm);
+
+            if (algorithm === 'GridPartition') {
+                nbinsContainer.style.display = 'block';
+            } else {
+                nbinsContainer.style.display = 'none';
+            }
+
+            updateDefaultParams();
+        }
+
+        function handleNbinsChange() {
+            if (document.getElementById('algorithm').value === 'GridPartition') {
+                const params = JSON.parse(document.getElementById('parameters').value || '{}');
+                params.nbins_axis = parseInt(this.value) || 5;
+                document.getElementById('parameters').value = JSON.stringify(params, null, 2);
+            }
+        }
+
+        async function updateDefaultParams() {
+            const algorithm = document.getElementById('algorithm').value;
+            const parametersTextarea = document.getElementById('parameters');
+            const nbinsInput = document.getElementById('nbins_axis');
+
+            try {
+                console.log('Fetching default params for:', algorithm);
+                const response = await fetch(`/get_default_params/${algorithm}`);
+                const data = await response.json();
+
+                if (response.ok) {
+                    const params = data;
+                    if (algorithm === 'GridPartition') {
+                        params.nbins_axis = parseInt(nbinsInput.value) || 5;
+                    }
+                    parametersTextarea.value = JSON.stringify(params, null, 2);
+                } else {
+                    console.error('Error getting default parameters:', data.error);
+                    parametersTextarea.value = '{}';
+                }
+            } catch (error) {
+                console.error('Default params error:', error);
+                parametersTextarea.value = '{}';
+            }
+        }
+
+        async function loadMarkdownContent() {
+            try {
+                console.log('Loading markdown content...');
+                const aboutResponse = await fetch('/md/about.md');
+                const aboutData = await aboutResponse.json();
+                document.getElementById('about-content').innerHTML = aboutData.html;
+
+                const contactResponse = await fetch('/md/contacts.md');
+                const contactData = await contactResponse.json();
+                document.getElementById('contact-content').innerHTML = contactData.html;
+
+                if (window.MathJax && window.MathJax.Hub) {
+                    window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub]);
+                }
+            } catch (error) {
+                console.error('Markdown loading error:', error);
+            }
+        }
     </script>
 </head>
 <body>