📝 Rebotar un missatge de text enviat per l’entrada d’un navegador sobre un navegador virtual

Publicat el per

En aquesta entrada veurem com crear un petit servidor local en Python capaç de rebre text enviat des d’un navegador i retornar-lo immediatament al mateix navegador. És un exemple senzill però molt útil per entendre com funcionen les peticions HTTP, els formularis HTML i la comunicació amb un servidor local.

Formulari per enviar el text:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Enviar text al servidor Python</title>
</head>
<body>
    <h1>Enviar text al servidor local Python</h1>
    <form action="http://127.0.0.1:5000/processa" method="post">
        <label for="text">Text:</label>
        <input type="text" id="text" name="text">
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

1️⃣ Preparar l’entorn: Python i Flask

A Deepin 25 (o qualsevol distribució basada en Debian), pip no permet instal·lar paquets directament al sistema. Per això cal crear un entorn virtual.

Instal·lar venv (si cal)

bash

sudo apt install python3-venv

Crear l’entorn virtual

bash

python3 -m venv ~/flask-env

Activar-lo

bash

source ~/flask-env/bin/activate

El terminal hauria de mostrar:

Codi

((flask-env))

Instal·lar Flask dins l’entorn

bash

pip install flask

2️⃣ Crear el servidor local en Python

Creem un fitxer anomenat server.py amb (nano server.py) i enganxa:

python

from flask import Flask, request

app = Flask(__name__)

@app.route('/processa', methods=['POST'])
def processa():
    text = request.form.get('text', '')
    return f"<h1>Text rebut:</h1><p>{text}</p>"

@app.route('/')
def index():
    return """
    <form action="/processa" method="post">
        <input type="text" name="text">
        <button type="submit">Enviar</button>
    </form>
    """

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

Aquest servidor fa dues coses:

  • Serveix un formulari HTML senzill a /
  • Rep el text enviat a /processa i el retorna dins d’una pàgina HTML

3️⃣ Executar el servidor

Amb l’entorn virtual activat:

bash

python server.py

Si tot va bé, apareixerà:

Codi

 * Running on http://127.0.0.1:5000

4️⃣ Enviar text des del navegador

Ara només cal obrir:

Codi

http://127.0.0.1:5000/

Escrius un text (per exemple, bon dia) i prems Enviar.

El navegador fa:

  1. Una petició POST a /processa
  2. Flask rep el text
  3. Flask genera una resposta HTML amb el text rebut
  4. El navegador mostra la resposta

5️⃣ Diagrama del flux

Codi

┌──────────────────────────┐
│        Navegador         │
│  Usuari escriu "bon dia" │
└─────────────┬────────────┘
              │ POST /processa
              ▼
┌──────────────────────────┐
│        Flask (Python)    │
│  processa() rep el text  │
└─────────────┬────────────┘
              │ Genera HTML
              ▼
┌──────────────────────────┐
│        Navegador         │
│  Mostra "Text rebut:     │
│          bon dia"        │
└──────────────────────────┘

6️⃣ Què hem aconseguit?

  • Crear un entorn Python aïllat
  • Instal·lar Flask correctament
  • Crear un servidor local funcional
  • Enviar text des d’un navegador
  • Rebotar el text i mostrar-lo al navegador
  • Validar el flux complet amb un exemple real

Aquest és el primer pas per integrar funcionalitats més avançades, com enviar el text a un sistema TTS (Piper) i reproduir-lo automàticament.

Si vols, puc preparar la segona part del post: 👉 “Enviar el text del navegador a Piper (Docker) i reproduir-lo com a veu Ona”

Només cal que m’ho diguis.