Javascript 我试图在html中嵌入一些python代码，以提供一个gui，显示倾斜传感器触发倾斜的时间

这是倾斜传感器的代码：

@app.route("/")
def main():
    for button in buttons:
        buttons[button]['state'] = GPIO.input(button)

    for tilt in tilts:
        state = GPIO.input(tilt)
        if state == 1:
            message2 = "Tilt detected on " + tilts[tilt]['name']
        else:
            messsage2 = "No tilt detected on " + tilts[tilt]['name']
        time.sleep(1)

    templateData = {
        'buttons' : buttons,
        'tilts' : tilts
    }

    return render_template('magnet.html', **templateData)

这就是我如何在html中实现它的：

<h3 align="center">Alerts</h3>
    {% for tilt in tilts %}
    <h4>{{ tilts[tilt].name }}</h4>
    {% if state == true %}
        <p1>Tilt detected</p1>
    {% else %}
        <p2>No tilt detected</p2>
    {% endif %}
    {% endfor %}
</body>
</html>

警报
{%用于倾斜中的倾斜%}
{{tilts[tilt].name}
{%if state==true%}
检测到倾斜
{%else%}
未检测到倾斜
{%endif%}
{%endfor%}

我想要acclomplish的主要目标是，根据树莓pi的传感器信号，打印出倾斜是否被检测到。有人告诉我，我可能需要通过JavaScript将后端连接到前端，但我不确定，也没有JavaScript方面的经验