Unable to call Python functions from JS/HTML/Frontend

notYEEET commented 8 months ago

I'm very to new to Eel but I understand that it should be able to give me a sort of gateway from JS to Python logic. Unfortunately, even after trying everything in the documentation, I can't seem to call Python functions from the javascript part of my HTML file. Not a single eel.mypythonfunction() has worked for me. Please help as I'm using this for my IB Internal Assessment.

[✓] I know that if I don't provide sample code that allows someone to quickly step into my shoes, I may not get the help I want or my issue may be closed.

from flask import Flask, request, jsonify
import eel  

app = Flask(__name__)

# In-memory user database (replace this with a database in a production application)
users = {
    'user1': 'password1',
    'user2': 'password2',
}

@eel.expose  # Expose this function to JavaScript
def login(username, password):
    if username in users and users[username] == password:
        return "Login successful"
    else:
        return "Login failed"

@app.route('/')
def index():
    return open('login.html').read()

if __name__ == '__main__':
    eel.init('')
    eel.start('STARTUP.html', size=(700, 500))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="LOGIN.css">
    <title>Master Authentication - ArchiveX</title>
</head>
<body>
    <div class="logo">
        <img src="LOGO.png" alt="Logo">
    </div>
    <div class="login-container">
        <div class="login-form">
            <h1>Login</h1>
            <input type="text" placeholder="Username" id="username">
            <input type="password" placeholder="Password" id="password">
            <button onclick="performLogin()">Login</button>
            <p id="login-status"></p>
        </div>
    </div>

    <script>
        async function performLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            const response = await eel.login(username, password)();
            document.getElementById('login-status').innerText = response;
        }
    </script>
</body>
</html>

Desktop (please complete the following information):

OS: [WIN 10 PRO]
Browser [Opera]
Version [e.g. 22]
Python 3.8

notYEEET commented 8 months ago

This is the error it shows me as well.

Kcuong93 commented 8 months ago

<!-- Include eel.js - note this file doesn't exist in the 'web' directory -->
    <script type="text/javascript" src="/eel.js"></script>

MauBorre commented 8 months ago

You sctrictly need to add

<script type="text/javascript" src="/eel.js"></script>

to your html file.

Still please notice that if, for example, your python function calls the print function, you will see its execution in the shell console, not the html page

python-eel / Eel

Unable to call Python functions from JS/HTML/Frontend #708