Entrada des del formulari html per al servidor TTS (Ona, UPC) a Deepin del Docker

Publicat el per

Perfecte, Miquel — ara entenc exactament què vols:

👉 Que l’entrada del blog expliqui que NO cal obrir cap terminal, ni arrencar Python, ni entrar al servidor Flask. 👉 Només cal obrir el fitxer local TTS Piper (Ona).html, i aquest formulari ja envia el text al servidor Flask que està funcionant en segon pla gràcies a systemd. 👉 I que la URL http://127.0.0.1:5000 només és visible en mode debug, però en l’ús normal no cal ni visitar-la.

Això és molt més elegant i molt més “user‑friendly”.

A continuació et deixo el text revisat perquè l’entrada del blog reflecteixi exactament aquest comportament.

Entrada des de formulari HTML per al servidor TTS (Ona, UPC) a Deepin del Docker

Aquesta entrada complementa la guia principal “Muntatge d’un servidor TTS local amb veu catalana (Ona, UPC) a Deepin” i explica com afegir-hi un formulari HTML extern que permet enviar text directament al servidor TTS sense obrir cap terminal.

L’objectiu és disposar d’un sistema molt simple d’usar: només cal obrir el fitxer TTS Piper (Ona).html i escriure el text. El servidor Flask ja està funcionant en segon pla gràcies a systemd.

🎯 Objectiu

  • Crear un servidor Flask que escolta a 127.0.0.1:5000/processa.
  • Fer que Flask s’iniciï automàticament en cada arrencada del sistema.
  • Crear un fitxer HTML local que envia text al servidor TTS.
  • Permetre que tot el sistema funcioni sense obrir Python, sense activar entorns virtuals, sense obrir cap terminal.
  • Fer que el sistema sigui reproduïble en qualsevol Deepin/Debian.

🗂️ Estructura final del projecte

Codi

~/tts-flask/
 ├── server.py
 └── venv/
~/Desktop/
 └── TTS Piper (Ona).html
/etc/systemd/system/
 └── flask.service

1️⃣ Instal·lació de Flask

bash

mkdir -p ~/tts-flask
cd ~/tts-flask

python3 -m venv venv
source venv/bin/activate

pip install flask

2️⃣ Fitxer server.py

Ubicació:

Codi

~/tts-flask/server.py

Funciona com a pont entre el formulari HTML i el contenidor Docker piper. Rep text, el passa al contenidor i reprodueix l’àudio amb aplay.

3️⃣ Fitxer flask.service (systemd)

Ubicació:

Codi

/etc/systemd/system/flask.service

Aquest servei garanteix que Flask s’inicia automàticament en cada arrencada:

  • No cal executar Python manualment.
  • No cal activar cap entorn virtual.
  • No cal obrir cap terminal.

Només cal tenir el fitxer HTML.

4️⃣ Activació del servei

bash

sudo systemctl daemon-reload
sudo systemctl enable flask.service
sudo systemctl start flask.service

Després d’això, el servidor Flask queda sempre actiu.

5️⃣ Fitxer HTML: TTS Piper (Ona).html

Aquest és el fitxer que l’usuari obre per enviar text al TTS.

Es pot guardar a:

Codi

~/Desktop/TTS Piper (Ona).html

Contingut:

html

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>TTS Piper (Ona)</title>
</head>
<body>
    <h1>TTS Piper (Ona)</h1>
    <form action="http://127.0.0.1:5000/processa" method="post">
        <label for="text">Text:</label><br>
        <textarea id="text" name="text" rows="5" style="width: 80%;"></textarea><br><br>

        <button type="submit" title="Escoltar text" aria-label="Escoltar text"
            style="background: none; border: 1px solid #ccc; border-radius: 6px;
                   cursor: pointer; padding: 8px; display: inline-flex;
                   align-items: center; justify-content: center;
                   transition: background-color 0.2s;"
            onmouseover="this.style.backgroundColor='#f0f0f0'"
            onmouseout="this.style.backgroundColor='none'">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                 viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            </svg>
        </button>
    </form>
</body>
</html>

6️⃣ Ús normal del sistema

Un cop configurat:

✔️ Només cal obrir TTS Piper (Ona).html

✔️ Escriure el text

✔️ Fer clic al botó d’altaveu

I el sistema:

  • envia el text al servidor Flask
  • Flask el passa al contenidor Docker piper
  • Piper genera l’àudio
  • aplay el reprodueix

Tot això sense obrir cap terminal.

7️⃣ Sobre http://127.0.0.1:5000

  • La pàgina existeix, però només és útil en mode debug.
  • En l’ús normal no cal visitar-la.
  • El formulari HTML és l’única interfície que cal.

🔗 Enllaç amb l’article principal

Aquesta entrada forma part del projecte complet documentat a:

Muntatge d’un servidor TTS local amb veu catalana (Ona, UPC) a Deepin (tab actual: )

🎓 Conclusions

Amb aquest formulari HTML:

  • El sistema TTS és molt més accessible.
  • No cal cap coneixement de Python ni Docker.
  • Tot funciona automàticament gràcies a systemd.
  • És 100% reproduïble en qualsevol equip Deepin/Debian.
  • L’usuari només interactua amb un fitxer HTML senzill i elegant.

Si vols, puc generar la versió exacta en Markdown per enganxar-la al WordPress (tab 1330389275).