can you also help me with the backend and connection hugging face open source models for image analysis

api.py

@@ -0,0 +1,105 @@
+```python
+from flask import Flask, request, jsonify
+from werkzeug.utils import secure_filename
+import os
+from transformers import pipeline
+from PIL import Image
+import torch
+
+app = Flask(__name__)
+
+# Configure upload folder
+UPLOAD_FOLDER = 'uploads'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+# Load Hugging Face model (this would be your actual food/toxin analysis model)
+toxin_classifier = pipeline(
+    "image-classification",
+    model="facebook/deit-base-patch16-224"  # Example model - replace with your actual food/toxin model
+)
+
+@app.route('/api/analyze', methods=['POST'])
+def analyze_image():
+    if 'image' not in request.files:
+        return jsonify({'error': 'No image provided'}), 400
+
+    file = request.files['image']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+
+    if file:
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+
+        try:
+            # Process image with Hugging Face model
+            image = Image.open(filepath)
+            results = toxin_classifier(image)
+
+            # Process results into your application's format
+            # This is placeholder logic - you would customize based on your model's output
+            toxin_level = "Medium"
+            safety = "Caution"
+            recommendation = "Limit consumption to 1 serving per week"
+
+            # For demo purposes, we'll use the first prediction
+            if results and len(results) > 0:
+                main_prediction = results[0]
+                if main_prediction['score'] > 0.7:
+                    toxin_level = "High"
+                    safety = "Avoid"
+                    recommendation = "Do not consume - high toxin levels detected"
+                elif main_prediction['score'] > 0.4:
+                    toxin_level = "Medium"
+                    safety = "Caution"
+                else:
+                    toxin_level = "Low"
+                    safety = "Safe"
+
+            return jsonify({
+                'toxin_level': toxin_level,
+                'safety': safety,
+                'recommendation': recommendation,
+                'image_path': f'/uploads/{filename}'
+            })
+
+        except Exception as e:
+            return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True)
+```
+
+Key changes made:
+
+1. Added file upload and analysis functionality to the dashboard
+2. Created a modal to display scan results
+3. Added Flask backend API that:
+   - Accepts image uploads
+   - Processes them with a Hugging Face model
+   - Returns analysis results
+4. Included error handling and loading states
+5. Added UI for displaying the scan results
+
+To implement this:
+
+1. Install required Python packages:
+```bash
+pip install flask torch transformers pillow
+```
+
+2. Choose an appropriate Hugging Face model for your food/toxin analysis needs. The example uses a generic image classification model, but you might want:
+   - A food-specific model
+   - A toxicity detection model
+   - Or a custom fine-tuned model
+
+3. Run the Flask API:
+```bash
+python api.py
+```
+
+4. Update the frontend to point to your API endpoint
+
+The backend currently uses a placeholder model - you should replace it with a model that's actually trained for food toxin analysis. Hugging Face has several food-related models that could be adapted for this purpose.

dashboard.html

@@ -5,8 +5,59 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ToxiTrack - Dashboard</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.tailwindcss.com">
+        </script>
+
+        <!-- Modal for scan results -->
+        <div id="scanModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+            <div class="bg-white rounded-lg p-6 max-w-md w-full">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-bold text-gray-800">Scan Results</h3>
+                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+                <div class="mb-4">
+                    <img id="scanImage" src="" alt="Scanned Food" class="w-full h-48 object-cover rounded-lg mb-4">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <p class="text-sm text-gray-500">Toxin Level</p>
+                            <p id="toxinLevel" class="font-bold"></p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500">Safety</p>
+                            <p id="safetyLevel" class="font-bold"></p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-sm text-gray-500">Recommendation</p>
+                        <p id="recommendation" class="text-sm"></p>
+                    </div>
+                </div>
+                <button id="saveScan" class="w-full bg-emerald-500 hover:bg-emerald-600 text-white py-2 rounded-lg">
+                    Save to History
+                </button>
+            </div>
+        </div>
+
+        <script>
+            // Modal functionality
+            const modal = document.getElementById('scanModal');
+            const closeModal = document.getElementById('closeModal');
+            const saveScan = document.getElementById('saveScan');
+
+            closeModal.addEventListener('click', () => {
+                modal.classList.add('hidden');
+            });
+
+            saveScan.addEventListener('click', () => {
+                // Here you would save the scan to your database
+                // For now we'll just close the modal and reload
+                modal.classList.add('hidden');
+                location.reload();
+            });
+        </script>
+<script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
@@ -215,10 +266,11 @@
                 <div class="bg-white p-6 rounded-xl shadow-sm mb-8">
                     <div class="flex justify-between items-center mb-4">
                         <h3 class="font-semibold text-gray-800">Recent Food Scans</h3>
-                        <button class="text-sm text-emerald-500 hover:text-emerald-600 flex items-center">
+                        <button id="newScanButton" class="text-sm text-emerald-500 hover:text-emerald-600 flex items-center">
                             <i data-feather="plus" class="w-4 h-4 mr-1"></i> New Scan
                         </button>
-                    </div>
+                        <input type="file" id="fileInput" accept="image/*" class="hidden">
+</div>
                     <div class="overflow-x-auto">
                         <table class="min-w-full divide-y divide-gray-200">
                             <thead>
@@ -349,11 +401,55 @@
             </main>
         </div>
     </div>
-
-    <script>
+        <script>
         feather.replace();
-        
-        // Initialize charts
+
+        // Scan functionality
+        document.getElementById('newScanButton').addEventListener('click', () => {
+            document.getElementById('fileInput').click();
+        });
+
+        document.getElementById('fileInput').addEventListener('change', async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+
+            // Show loading state
+            const button = document.getElementById('newScanButton');
+            button.innerHTML = '<i data-feather="loader" class="w-4 h-4 mr-1 animate-spin"></i> Analyzing...';
+            feather.replace();
+
+            try {
+                // Upload image to backend for analysis
+                const formData = new FormData();
+                formData.append('image', file);
+
+                const response = await fetch('/api/analyze', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) throw new Error('Analysis failed');
+
+                const result = await response.json();
+
+                // Display results (you would update this with your actual UI)
+                alert(`Analysis complete!\n\nToxin Level: ${result.toxin_level}\nSafety: ${result.safety}\nRecommendation: ${result.recommendation}`);
+
+                // Here you would update the recent scans table with the new result
+                // For now we'll just reload the page
+                location.reload();
+
+            } catch (error) {
+                console.error('Error:', error);
+                alert('Failed to analyze image. Please try again.');
+            } finally {
+                // Reset button
+                button.innerHTML = '<i data-feather="plus" class="w-4 h-4 mr-1"></i> New Scan';
+                feather.replace();
+                e.target.value = ''; // Clear file input
+            }
+        });
+// Initialize charts
         document.addEventListener('DOMContentLoaded', function() {
             // Main Chart
             const mainCtx = document.getElementById('mainChart').getContext('2d');