Python mit HTML verbinden?

Hallo,

ich habe eine HTML- Datei und eine Python- Datei, welche ich mit Flask verbinden möchte. Mein Ziel ist es, dass wenn ich das Wort „Luna“ sage, ein div in der HTML- Datei eingefügt wird, doch bei mir funktioniert das nicht. Kann mir jemand erklären, wie ich die zwei Codes verbinden kann?

Freundliche Grüsse

2 Antworten

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, JavaScript

07.04.2024, 13:20

Mittels WebSocket wäre das möglich.

Ich würde dir dafür aber auch eher die Spracherkennungs-API von JavaScript empfehlen und das ganze komplett im Browser handeln. Aber Achtung, begrenzter Browser-Support: https://caniuse.com/speech-recognition

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

marcus09421

Beitragsersteller

07.04.2024, 13:21

Vielen Dank dir!

Suiram1

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Code

07.04.2024, 13:09

Da Python nicht im Browser ausgeführt werden kann geht das nicht direkt. Klar könntest die HTML Datei verändern wenn das Python Programm das Wort erkennt und danach die Seite neuladen (irgendwie). Meiner Meinung ist es allerdings besser wenn du dafür JavaScript nutzt, da es im Browser HTML verändern kann und auch viele Browser (außer Firefox) eine API für SpeechRecognition haben.

marcus09421

Beitragsersteller

07.04.2024, 13:12

Vielen Dank für deine Antwort! Das Problem ist, dass ich beide Dateien bereits habe und ich nicht mehr genug Zeit habe, den ganzen Python- Code zu JS zu machen. Aber könnte man denn nicht JS mit Python verbinden? Wäre das eine Möglichkeit?

Suiram1

07.04.2024, 13:14

@marcus09421

Im Thema Website kann man Python nur Serverseitig benutzen. Client seitig geht nur JS. Es gibt da noch die Ausnahme mit WebAssembly (WASM), allerdings ist es wahrscheinlich mehr aufwand nochmal alles so zu modifizieren das es mit WASM funktioniert als das nochmal in JS zu machen.

MrAmazing2

07.04.2024, 13:16

@marcus09421

Mittels Websocket kannst du deinen Python Backend-Code mit dem JavaScript Frontend-Code verbinden, und die Website dann live updaten, ja. Funktioniert so: Python-Code erkennt mittels Spracherkennung das Wort "Luna" -> Schickt Websocket-Signal an JavaScript -> Wird dort empfangen und entsprechendes Div wird eingeblendet. Aber wenn du nicht mehr viel Zeit hast wird es wohl etwas schwer sein, jetzt Websockets zu lernen ...

Ich denke, dass dir ChatGPT das aber relativ schnell zusammenbasteln kann, ist keine allzu komplexe Aufgabe, erfordert nur viel Wissen. Oder du kopierst dir ein paar Code-Schnipsel aus Stackoverflow, z.B. von hier https://stackoverflow.com/questions/74988529/how-to-send-messages-from-server-to-client-in-a-python-websockets-server-after

Suiram1

07.04.2024, 13:18

@marcus09421

Falls du es noch per SpeechRecognition in JS probieren möchtest findet sich hier neben der Dokumentation auch weiter unten ein Beispiel. Hoffe das hilft.

marcus09421

Beitragsersteller

07.04.2024, 13:21

@Suiram1

Vielen Dank!

marcus09421

Beitragsersteller

07.04.2024, 13:25

@MrAmazing2

Vielen Dank! Ich werde es mal anschauen.

Ähnliche Beiträge

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Warum wird meine Seite nicht aktualisiert?

Hallo,

ich wollte machen, dass, wenn ich in Python etwas sage, ein Div im HTML eingefügt wird. Das funktioniert auch ganz gut, aber, da ich kein Websockets verwende, muss ich die Seite immer manuell aktualisieren, wenn der Div eingefügt wurde, damit es ihn auch anzeigt. Diese Funktion wollte ich automatisieren, doch es funktioniert nicht, wieso?

// FLASK
function detectWakeWord() {
    var detectedWord = 'luna'; 
    
    if (detectedWord === 'luna') {
        if (!document.getElementById('luna_wake_word')) {
            var div = document.createElement('div');
            div.id = 'luna_wake_word';
            document.body.appendChild(div);
            showWakeWord();
            
            setTimeout(function() { 
                location.reload(); 
            }, 1000); 
        }
    }
}

detectWakeWord();

Freundliche Grüsse

...zum Beitrag

Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Login System mit Python?

Hallo, ich habe bereits Kenntnisse in Html css und einigermaßen js. Nun will ich ein Login System einbauen in meine Webseite. Ich will eigentlich nur den User erlauben zu kommentieren und ich will bestimmte Sachen begrenzen auf Leute mit einem Abo. Also ich will bestimmte Seiten und Div-Blocks nur für Premium Nutzer freigeben. Ich will die Bezahlung mit Stripe machen und die Sachen die ich lernen will dafür sind Python und halt MySQL. Würden dir zwei Sachen reichen und wie lange würde ich brauchen um diese Funktionen die ich genannt habe zu lernen und das auf der höchstmöglichsten Sicherheitsstufe? Darüber hinaus würde ich eigentlich auch gerne so ein Forum System machen wie gutefrage mit Profilen und co. aber ich glaube das würde viel länger dauern und erst später umsetzbar

...zum Beitrag

Ä's, Ö's und Ü's werden zu �?

Hallo,

ich habe ein meinem Python. Code eine Funktion "generate_html()", die ein HTML- Dokument öffnet, sobald ich den Python- Code starte. Das Problem ist aber, dass in dieser HTML- Datei in Texten und zum Teil auch in IDs Ä's, Ö's und Ü's habe, welche dann zu diesem Zeichen werden: "�". Dadurch wird mein Code falsch angezeigt. Kann ich das irgendwie ändern?

Freundliche Grüsse

...zum Beitrag

Python speichert nur source datei?

Hallo,

ich lerne gerade python und habe eine frage wenn ich mein Projekt speichere speichert er immer nur die Python source file datei im Tutorial speichert er aber die Python File was bedeutet wenn ich die datei öffne lande ich immer wieder nur auf dem code und es öffnet sich nicht das programm was kann ich tun

...zum Beitrag

Schnelle Wake-Word detection in Python?

Hallo,

ich programmiere gerade einen Sprachassistenten und wollte nun eine schnelle Wake-Word detection einbauen, also wenn man das Wake-Word "Luna" sagt, soll es innerhal einer Sekunde in die Hauptschleife gehen. Das ist mein Code:

def wait_for_wake_word(recognizer, source):
    while True:
        print("Warte auf Wake-Word...")
        try:
            audio = recognizer.listen(source, phrase_time_limit=1)
            text = recognizer.recognize_google(audio, language="de-DE")
            if hey_luna_in_q(text):
                print("Wake-Word erkannt!")
                return
        except sr.UnknownValueError:
            pass
        except sr.RequestError as e:
            print(f"Fehler bei der Anfrage an die Google Web Speech API: {e}")

def hey_luna_in_q(q):
    return "luna" in q.lower()

Wenn man das Programm startet und dann direkt das Wake-Word sagt, funktioniert auch allles gut, aber sobal ich etwas warte bevor ich das Wake-Word sage (was bei einem Sprachassistenten ja meistens so ist), dauert es sehr lange, bevor es in die Hauptschleife geht und manchmal passiert überhaupt nichts, wieso?

Freundliche Grüsse

...zum Beitrag

Python Script hört einfach auf?

Um Python zu lernen hab ich ein Skript geschrieben welches alle meine Urlaubs Fotos aus einem Ordner "scannt" und den Dateinamen in eine Datenbank schreibt. Der Code funktioniert soweit auch gut, aber nach ca. 1400 Fotos hört das Python script einfach auf, ohne Fehlermeldung. Ich hab auch schon den Garbage Collector integriert, kann mir einer weiterhelfen?

...zum Beitrag

Python mit HTML verbinden?

Hallo Leute.

Kann ich eine Python Datei mit einer HTML Datei verbinden also das was Python z.b Wetter API das ich das auf einer Webseite machen kann. Oder geht das nicht also ich meine so verbinden wie man CSS und HTML verbindet.

...zum Beitrag

Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed:

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

...zum Beitrag

flask: jinja2.exceptions.TemplateNotFound: index.html | Wie fixen?

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>

...zum Beitrag

Programmier blockade?

Hallo zusammen,

Ich bin Programmierer, bzw. kann mit Python und HTML programmieren,

und habe gerade eine Blokade, also ich weis nicht was ich coden soll.

Habt ihr ne Idee?

Danke im vorraus.

...zum Beitrag

.exe zu apk konvertieren?

Heyho, ich müsste dringend eine exe zu einer apk Datei konvertieren. Wie mache ich das jetzt am besten? Ich hätte den Code dafür, der ist in python geschrieben mit der tkinter library. Ehrlich gesagt hab ich keine Ahnung wie ich das jetzt machen soll..

...zum Beitrag

Python Flask?

Ich versuche, mit Abfragen in Flask zu arbeiten. Ich habe eine Seite choose.html wo man Buttons anklicken kann. Diese sollen in einem query dann an Seite 2 gesendet werden. Seite 2 soll also von Flask mit dem query gerendert werden, z.B.

127.0.0.1/login?username=test&color=3

Wenn man es in html einbaut mit Flask geht es nicht:

<a href="{{ url_for('login?user=lol') }}"><button class="continue" id="submit" name="submit">Continue</button></a>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen