index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mood Prediction</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Include Chart.js -->
</head>
<body>
    <header>
        <h1>Mood Prediction Based on Demographics</h1>
    </header>
    <main>
        <!-- Form for inputting prediction parameters -->
        <form id="predictionForm">
            <label for="gender">Gender:</label>
            <input type="text" id="gender" name="gender"><br><br>
            <label for="age">Age:</label>
            <input type="number" id="age" name="age" min="0"><br><br>
            <label for="patterns">Common eating & sleeping patterns? (Yes/No):</label>
            <input type="text" id="patterns" name="patterns"><br><br>
            <button type="button" onclick="predictMood()">Predict Mood</button>
        </form>
        
        <!-- Canvas element where the Chart.js plot will be rendered -->
        <canvas id="moodChart" width="400" height="400"></canvas>
    </main>
    <footer>
        <p>© 2024 by Raida Shaik. Proudly created with GitHub Pages</p>
    </footer>
    <script>
function predictMood() {
    // Collect the form data
    const formData = new FormData(document.getElementById('predictionForm'));
    const data = {};
    formData.forEach((value, key) => { data[key] = value; });

    console.log('Sending data:', data); // Log data for debugging

    // Make an API request to your Flask server
    fetch('https://my-flask-app.com/predict', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
    .then(response => response.json())
    .then(data => {
        console.log('Received data:', data); // Log response for debugging
        // Check if the canvas is already initialized
        let moodChart = Chart.getChart("moodChart"); 
        if (moodChart) {
            moodChart.destroy();
        }

        // Use Chart.js to plot the data
        const ctx = document.getElementById('moodChart').getContext('2d');
        moodChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Wakefulness', 'Happiness', 'Energized-Drained', 'Active-Inactive', 'Attentiveness'],
                datasets: [{
                    label: 'Mood Score',
                    data: data.values, // Assuming the API returns an object with a 'values' array
                    backgroundColor: ['blue', 'green', 'red', 'purple', 'orange'],
                    borderColor: ['blue', 'green', 'red', 'purple', 'orange'],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}

    </script>
</body>
</html>