index.html

<!DOCTYPE html>
<html>
<head>
    <title>Emotion Detection Project</title>
    <style>
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
    <script>
        function runPythonCode() {
            // Replace this with your actual AJAX or fetch call to execute the Python code on the server
            // Example using AJAX:
            
            $.ajax({
                type: 'POST',
                url: 'Code/Testing_file.py',
                success: function(response) {
                    // Display the response on the webpage
                    document.getElementById('output').textContent = response;
                },
                error: function(error) {
                    console.error(error);
                }
            });
            
            
            // Placeholder response for demonstration
            const response = "Emotion detected: Happy";
            document.getElementById('output').textContent = response;
        }
    </script>
</head>
<body>
    <h1>Welcome to Emotion Detection Project!</h1>
    <p>This is the homepage of your emotion detection project.</p>
    
    <h2>Python Code</h2>
    <p>Click the button below to run the Python code:</p>
    <button onclick="runPythonCode()">Run Python Code</button>
    
    <h2>Output</h2>
    <pre id="output"></pre>
</body>
</html>