Hermes Agent
969 lines
35 KiB
Python
969 lines
35 KiB
Python
"""
|
|
BSN Voice Chat — Browser-based voice dialog with DeepSeek v4 Flash.
|
|
|
|
Architecture:
|
|
Browser (Web Speech API + Audio) → Flask proxy → DeepSeek API
|
|
TTS via Piper (switchable DE/EN/ES voices)
|
|
|
|
Features:
|
|
- Language selector: Deutsch | English | Español
|
|
- DeepSeek v4 Flash as model (direct API, not OpenWebUI)
|
|
- Stop button to interrupt speech
|
|
- Thinking animation while AI processes
|
|
- Light/Dark mode toggle
|
|
- Mobile-responsive layout
|
|
- Design with #20228a primary color
|
|
"""
|
|
|
|
import os
|
|
import subprocess
|
|
import hashlib
|
|
import secrets
|
|
import time
|
|
import json
|
|
from pathlib import Path
|
|
|
|
from flask import Flask, request, jsonify, send_file, session, Response, stream_with_context
|
|
from flask_cors import CORS
|
|
from datetime import timedelta
|
|
|
|
app = Flask(__name__)
|
|
app.secret_key = secrets.token_hex(32)
|
|
app.config["PERMANENT_SESSION_LIFETIME"] = timedelta(hours=24)
|
|
CORS(app, supports_credentials=True)
|
|
|
|
# ── Config ──────────────────────────────────────────────────────────────────
|
|
DEEPSEEK_API_URL = "https://api.deepseek.com/v1/chat/completions"
|
|
# Try environment first, then Hermes .env, then fallback
|
|
_hermes_env = Path.home() / ".hermes" / ".env"
|
|
if not os.environ.get("DEEPSEEK_API_KEY") and _hermes_env.exists():
|
|
with open(_hermes_env) as _f:
|
|
for _line in _f:
|
|
_line = _line.strip()
|
|
if _line.startswith("DEEPSEEK_API_KEY="):
|
|
os.environ["DEEPSEEK_API_KEY"] = _line.split("=", 1)[1]
|
|
break
|
|
DEEPSEEK_API_KEY = os.environ.get("DEEPSEEK_API_KEY", "")
|
|
DEEPSEEK_MODEL = "deepseek-v4-flash"
|
|
APP_PASSWORD = os.environ.get("APP_PASSWORD", "hermes2026")
|
|
PIPER_BIN = "/home/hermes/.local/bin/piper"
|
|
PIPER_ENV = {
|
|
"LD_LIBRARY_PATH": "/home/hermes/.local/lib",
|
|
"ESPEAK_DATA_PATH": "/home/hermes/.local/share/espeak-ng-data",
|
|
"PATH": os.environ.get("PATH", "/usr/bin"),
|
|
}
|
|
TTS_OUTPUT_DIR = Path("/tmp/voice-webapp-tts")
|
|
TTS_OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
|
|
|
|
# ── Language Configuration ──────────────────────────────────────────────────
|
|
LANGUAGES = {
|
|
"de": {
|
|
"label": "Deutsch",
|
|
"flag": "🇩🇪",
|
|
"stt_lang": "de-DE",
|
|
"system_prompt": (
|
|
"Du bist ein hilfreicher Sprachassistent für die Brettspiel-Nachrichten-Website "
|
|
"brettspiel-news.de. Antworte auf Deutsch. Keine Emojis. Kurze, natürliche Sätze "
|
|
"(< 500 Zeichen). Du sprichst via Text-to-Speech, also verwende natürliche "
|
|
"gesprochene Sprache."
|
|
),
|
|
"piper_model": "/home/hermes/.hermes/cache/piper-voices/de_DE-thorsten-medium.onnx",
|
|
},
|
|
"en": {
|
|
"label": "English",
|
|
"flag": "🇬🇧",
|
|
"stt_lang": "en-US",
|
|
"system_prompt": (
|
|
"You are a helpful voice assistant for a board game news website called "
|
|
"brettspiel-news.de. Answer in English. No emojis. Short natural sentences "
|
|
"(< 500 characters). You are speaking via text-to-speech, so use natural "
|
|
"spoken language."
|
|
),
|
|
"piper_model": "/home/hermes/.hermes/cache/piper-voices/en_US-joe-medium.onnx",
|
|
},
|
|
"es": {
|
|
"label": "Español",
|
|
"flag": "🇪🇸",
|
|
"stt_lang": "es-ES",
|
|
"system_prompt": (
|
|
"Eres un asistente de voz útil para un sitio web de noticias de juegos de mesa "
|
|
"llamado brettspiel-news.de. Responde en español. Sin emojis. Frases cortas y "
|
|
"naturales (< 500 caracteres). Estás hablando mediante texto a voz, así que "
|
|
"usa lenguaje hablado natural."
|
|
),
|
|
"piper_model": "/home/hermes/.hermes/cache/piper-voices/es_ES-sharvard-medium.onnx",
|
|
},
|
|
}
|
|
|
|
# ── SPIEL 2025 Hallplan (OPTIONAL — set False to remove) ──────────────────────
|
|
USE_HALLPLAN = True
|
|
HALLPLAN_FILE = Path(__file__).parent / "data" / "spiel2025_aussteller.json"
|
|
|
|
# Load hallplan data (empty list if disabled or missing)
|
|
hallplan_data = []
|
|
if USE_HALLPLAN and HALLPLAN_FILE.exists():
|
|
try:
|
|
with open(HALLPLAN_FILE) as f:
|
|
hallplan_data = json.load(f)
|
|
print(f"[HALLPLAN] Loaded {len(hallplan_data)} exhibitors from SPIEL 2025", flush=True)
|
|
except Exception as e:
|
|
print(f"[HALLPLAN] Error loading: {e}", flush=True)
|
|
|
|
DEFAULT_LANG = "de"
|
|
|
|
|
|
def get_lang():
|
|
"""Return the current session language code (de|en|es)."""
|
|
lang = session.get("language", DEFAULT_LANG)
|
|
if lang not in LANGUAGES:
|
|
lang = DEFAULT_LANG
|
|
return lang
|
|
|
|
|
|
# ── Auth ────────────────────────────────────────────────────────────────────
|
|
|
|
def check_auth():
|
|
return session.get("authenticated", False)
|
|
|
|
|
|
# ── Routes ──────────────────────────────────────────────────────────────────
|
|
|
|
@app.route("/")
|
|
def index():
|
|
if not check_auth():
|
|
return LOGIN_PAGE
|
|
return CHAT_PAGE
|
|
|
|
|
|
@app.route("/login", methods=["POST"])
|
|
def login():
|
|
data = request.get_json(silent=True) or {}
|
|
pw = data.get("password", "")
|
|
if pw == APP_PASSWORD:
|
|
session.permanent = True
|
|
session["authenticated"] = True
|
|
return jsonify({"ok": True})
|
|
time.sleep(0.8)
|
|
return jsonify({"ok": False, "error": "Wrong password"}), 401
|
|
|
|
|
|
@app.route("/logout", methods=["POST"])
|
|
def logout():
|
|
session.clear()
|
|
return jsonify({"ok": True})
|
|
|
|
|
|
@app.route("/api/language", methods=["GET", "POST"])
|
|
def api_language():
|
|
if not check_auth():
|
|
return jsonify({"error": "Not authenticated"}), 401
|
|
|
|
if request.method == "POST":
|
|
data = request.get_json(silent=True) or {}
|
|
lang = data.get("language", DEFAULT_LANG)
|
|
if lang not in LANGUAGES:
|
|
return jsonify({"error": f"Unsupported language: {lang}"}), 400
|
|
session["language"] = lang
|
|
return jsonify({"ok": True, "language": lang})
|
|
|
|
# GET — return current language info
|
|
lang = get_lang()
|
|
return jsonify({
|
|
"ok": True,
|
|
"language": lang,
|
|
"languages": {k: {"label": v["label"], "flag": v["flag"], "stt_lang": v["stt_lang"]} for k, v in LANGUAGES.items()},
|
|
})
|
|
|
|
|
|
@app.route("/api/chat", methods=["POST"])
|
|
def chat():
|
|
if not check_auth():
|
|
return jsonify({"error": "Not authenticated"}), 401
|
|
|
|
data = request.get_json(silent=True) or {}
|
|
user_message = data.get("message", "").strip()
|
|
# Single source of truth: session language
|
|
lang = get_lang()
|
|
|
|
if not user_message:
|
|
return jsonify({"error": "No message provided"}), 400
|
|
|
|
config = LANGUAGES[lang]
|
|
|
|
# Optional: inject hallplan into system prompt for fair-related queries
|
|
system_prompt = config["system_prompt"]
|
|
|
|
# Hallplan data always injected when enabled
|
|
if hallplan_data:
|
|
hall_summary = "\n\nSPIEL 2025 Halle 1 — Aussteller und Stände (Referenzdaten):\n"
|
|
for ex in hallplan_data:
|
|
hall_summary += f"- {ex['name']}: Stand {ex['stand']}\n"
|
|
system_prompt += hall_summary + "\nWenn jemand nach einem Aussteller, Stand, Halle, Messe oder SPIEL fragt, nutze diese Liste für die Antwort."
|
|
|
|
import urllib.request
|
|
|
|
payload = json.dumps({
|
|
"model": DEEPSEEK_MODEL,
|
|
"messages": [
|
|
{"role": "system", "content": system_prompt},
|
|
{"role": "user", "content": user_message},
|
|
],
|
|
"max_tokens": 500,
|
|
"temperature": 0.7,
|
|
"stream": False,
|
|
}).encode("utf-8")
|
|
|
|
req = urllib.request.Request(
|
|
DEEPSEEK_API_URL,
|
|
data=payload,
|
|
headers={
|
|
"Authorization": f"Bearer {DEEPSEEK_API_KEY}",
|
|
"Content-Type": "application/json",
|
|
},
|
|
)
|
|
|
|
try:
|
|
with urllib.request.urlopen(req, timeout=120) as resp:
|
|
raw = resp.read().decode("utf-8")
|
|
result = json.loads(raw)
|
|
choices = result.get("choices", [])
|
|
if not choices:
|
|
print(f"[CHAT] No choices in response: {str(result)[:300]}", flush=True)
|
|
return jsonify({"error": "No response from model"}), 502
|
|
msg = choices[0].get("message", {})
|
|
reply = msg.get("content", "")
|
|
if not reply or not reply.strip():
|
|
print(f"[CHAT] Empty content. Finish reason: {choices[0].get('finish_reason')} Full: {str(result)[:300]}", flush=True)
|
|
fallback = {
|
|
"de": "Entschuldigung, ich konnte keine Antwort generieren. Bitte versuche es erneut.",
|
|
"en": "Sorry, I could not generate a response. Please try again.",
|
|
"es": "Lo siento, no pude generar una respuesta. Por favor, inténtalo de nuevo.",
|
|
}
|
|
return jsonify({"ok": True, "reply": fallback.get(lang, fallback["de"])})
|
|
print(f"[CHAT] Reply: {len(reply)} chars [lang={lang}]", flush=True)
|
|
return jsonify({"ok": True, "reply": reply, "language": lang})
|
|
except urllib.error.HTTPError as e:
|
|
err_body = e.read().decode("utf-8", errors="replace")
|
|
return jsonify({"error": f"API error: {err_body[:200]}"}), 502
|
|
except Exception as e:
|
|
return jsonify({"error": str(e)}), 500
|
|
|
|
|
|
@app.route("/api/tts", methods=["POST"])
|
|
def tts():
|
|
if not check_auth():
|
|
return jsonify({"error": "Not authenticated"}), 401
|
|
|
|
data = request.get_json(silent=True) or {}
|
|
text = data.get("text", "").strip()
|
|
# Single source of truth: session language
|
|
lang = get_lang()
|
|
|
|
if not text:
|
|
return jsonify({"error": "No text provided"}), 400
|
|
|
|
piper_model = LANGUAGES[lang]["piper_model"]
|
|
|
|
text_hash = hashlib.md5((lang + ":" + text).encode()).hexdigest()[:12]
|
|
out_path = TTS_OUTPUT_DIR / f"tts_{lang}_{text_hash}.wav"
|
|
|
|
# Check cache (cached per language + text)
|
|
if out_path.exists() and out_path.stat().st_size > 1000:
|
|
return send_file(str(out_path), mimetype="audio/wav")
|
|
|
|
text = text[:2000]
|
|
|
|
try:
|
|
result = subprocess.run(
|
|
[PIPER_BIN, "--model", piper_model, "--output_file", str(out_path)],
|
|
input=text.encode("utf-8"),
|
|
capture_output=True,
|
|
timeout=30,
|
|
env=PIPER_ENV,
|
|
)
|
|
if result.returncode != 0:
|
|
return jsonify({"error": f"TTS failed: {result.stderr.decode()[:200]}"}), 500
|
|
if out_path.exists() and out_path.stat().st_size > 1000:
|
|
return send_file(str(out_path), mimetype="audio/wav")
|
|
return jsonify({"error": "Generated file empty"}), 500
|
|
except subprocess.TimeoutExpired:
|
|
return jsonify({"error": "TTS timeout"}), 500
|
|
except Exception as e:
|
|
return jsonify({"error": str(e)}), 500
|
|
|
|
|
|
@app.route("/api/check")
|
|
def api_check():
|
|
return jsonify({"authenticated": check_auth()})
|
|
|
|
|
|
# ── Login Page ──────────────────────────────────────────────────────────────
|
|
|
|
LOGIN_PAGE = """<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BSN Voice Chat — Login</title>
|
|
<style>
|
|
:root { --bg: #0a0a14; --card: #13132a; --text: #e0e0e8; --muted: #8888a0;
|
|
--primary: #20228a; --primary-hover: #2a2cb0; --border: #2a2a44; }
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
|
background:var(--bg); color:var(--text); display:flex; justify-content:center;
|
|
align-items:center; min-height:100vh; padding:16px; }
|
|
.login-box { background:var(--card); padding:44px 36px; border-radius:16px;
|
|
width:100%; max-width:360px; box-shadow:0 12px 40px rgba(0,0,0,.5);
|
|
border:1px solid var(--border); }
|
|
h1 { font-size:26px; margin-bottom:6px; color:#fff; letter-spacing:-0.5px; }
|
|
h1 span { color:var(--primary); }
|
|
.sub { color:var(--muted); font-size:14px; margin-bottom:28px; line-height:1.5; }
|
|
input { width:100%; padding:14px; border:1px solid var(--border);
|
|
background:var(--bg); color:#fff; border-radius:8px; font-size:16px;
|
|
margin-bottom:18px; transition:border-color .2s; }
|
|
input:focus { outline:none; border-color:var(--primary); }
|
|
button { width:100%; padding:14px; background:var(--primary); color:#fff;
|
|
border:none; border-radius:8px; font-size:16px; font-weight:600;
|
|
cursor:pointer; transition:background .2s; }
|
|
button:hover { background:var(--primary-hover); }
|
|
.error { color:#ff6b6b; font-size:13px; margin-bottom:14px; display:none;
|
|
text-align:center; }
|
|
.brand { text-align:center; margin-top:24px; font-size:11px; color:var(--muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-box">
|
|
<h1>🎙 <span>BSN</span> Voice Chat</h1>
|
|
<p class="sub">Voice dialog with AI — speak naturally and get spoken responses.</p>
|
|
<p class="error" id="error">Wrong password</p>
|
|
<input type="password" id="pw" placeholder="Password" autofocus>
|
|
<button onclick="doLogin()">Log in</button>
|
|
<div class="brand">brettspiel-news.de</div>
|
|
</div>
|
|
<script>
|
|
document.getElementById('pw').addEventListener('keydown', e => { if(e.key==='Enter') doLogin(); });
|
|
async function doLogin() {
|
|
const r = await fetch('/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({password:document.getElementById('pw').value})});
|
|
if(r.ok) window.location.reload();
|
|
else document.getElementById('error').style.display='block';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>"""
|
|
|
|
|
|
# ── Chat Page ───────────────────────────────────────────────────────────────
|
|
|
|
CHAT_PAGE = """<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>BSN Voice Chat</title>
|
|
<style>
|
|
/* ── Theme Variables ── */
|
|
:root, [data-theme="dark"] {
|
|
--bg: #0a0a14; --surface: #111128; --card: #18183a; --card-agent: #151538;
|
|
--text: #e0e0e8; --text-dim: #a0a0b8; --muted: #707090;
|
|
--primary: #20228a; --primary-bright: #2e30b8; --primary-glow: rgba(32,34,138,.35);
|
|
--user-msg: #20228a; --agent-msg: #18183a; --agent-border: #2a2a50;
|
|
--input-bg: #0d0d20; --input-border: #2a2a50;
|
|
--header-bg: #0d0d22; --controls-bg: #0d0d22;
|
|
--stop-btn: #e74c3c; --shadow: rgba(0,0,0,.5);
|
|
}
|
|
[data-theme="light"] {
|
|
--bg: #f4f4f8; --surface: #ffffff; --card: #fafafe; --card-agent: #f0f0f8;
|
|
--text: #1a1a2e; --text-dim: #555570; --muted: #8888a0;
|
|
--primary: #20228a; --primary-bright: #2e30b8; --primary-glow: rgba(32,34,138,.15);
|
|
--user-msg: #20228a; --agent-msg: #f5f5fc; --agent-border: #d0d0e0;
|
|
--input-bg: #ffffff; --input-border: #d0d0e0;
|
|
--header-bg: #ffffff; --controls-bg: #ffffff;
|
|
--stop-btn: #e74c3c; --shadow: rgba(0,0,0,.1);
|
|
}
|
|
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
html, body { height:100%; overflow:hidden; }
|
|
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
|
background:var(--bg); color:var(--text); display:flex; flex-direction:column;
|
|
transition:background .3s,color .3s; }
|
|
|
|
/* ── Header ── */
|
|
.header { background:var(--header-bg); padding:8px 12px; display:flex;
|
|
flex-wrap:wrap; align-items:center; gap:6px;
|
|
border-bottom:1px solid var(--input-border); }
|
|
.header-left { display:flex; align-items:center; gap:8px; flex-shrink:0; }
|
|
.header h1 { font-size:15px; color:var(--text); white-space:nowrap; }
|
|
.header h1 span { color:var(--primary); font-weight:800; }
|
|
|
|
/* ── Language Dropdown ── */
|
|
.lang-select { background:var(--card); color:var(--text); border:1px solid var(--input-border);
|
|
border-radius:6px; padding:4px 6px; font-size:12px; cursor:pointer;
|
|
transition:border-color .2s; outline:none; }
|
|
.lang-select:hover, .lang-select:focus { border-color:var(--primary); }
|
|
|
|
/* ── Theme Toggle Switch ── */
|
|
.switch-wrap { display:flex; align-items:center; gap:4px; }
|
|
.switch-track { width:36px; height:20px; background:var(--card); border:1px solid var(--input-border);
|
|
border-radius:10px; cursor:pointer; position:relative; transition:all .3s; flex-shrink:0; }
|
|
.switch-track.active { background:var(--primary); border-color:var(--primary); }
|
|
.switch-knob { width:14px; height:14px; background:var(--text-dim); border-radius:50%;
|
|
position:absolute; top:2px; left:2px; transition:all .3s; }
|
|
.switch-track.active .switch-knob { background:#fff; left:18px; }
|
|
.switch-icon { font-size:12px; line-height:1; user-select:none; }
|
|
#status { font-size:10px; padding:2px 8px; border-radius:8px;
|
|
background:var(--card); color:var(--muted); font-weight:500; white-space:nowrap; }
|
|
#status.listening { background:var(--primary); color:#fff; animation:pulse 1.2s infinite; }
|
|
#status.thinking { background:#f39c12; color:#fff; }
|
|
#status.speaking { background:#27ae60; color:#fff; }
|
|
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
|
|
.header-right { display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-left:auto; }
|
|
|
|
/* ── Messages ── */
|
|
.messages { flex:1; overflow-y:auto; padding:12px; display:flex;
|
|
flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch;
|
|
min-height:0; }
|
|
.msg { max-width:85%; padding:10px 14px; border-radius:12px; line-height:1.5;
|
|
position:relative; word-wrap:break-word; font-size:15px; }
|
|
.msg.user { align-self:flex-end; background:var(--user-msg); color:#fff;
|
|
border-bottom-right-radius:4px; }
|
|
.msg.agent { align-self:flex-start; background:var(--agent-msg); color:var(--text);
|
|
border:1px solid var(--agent-border); border-bottom-left-radius:4px; }
|
|
.msg .time { font-size:9px; color:var(--muted); margin-top:4px; }
|
|
.interim { align-self:flex-end; color:var(--muted); font-style:italic;
|
|
padding:0 14px; max-width:85%; font-size:13px; }
|
|
|
|
/* ── Thinking Overlay ── */
|
|
.thinking-overlay {
|
|
display:none; position:fixed; top:0; left:0; right:0; bottom:0;
|
|
z-index:1000; background:rgba(255,255,255,0.75);
|
|
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
|
|
align-items:center; justify-content:center;
|
|
flex-direction:column; gap:36px;
|
|
}
|
|
.thinking-overlay.show { display:flex; }
|
|
[data-theme="light"] .thinking-overlay {
|
|
background:rgba(255,255,255,0.82);
|
|
}
|
|
|
|
/* Orb — rotating gradient ring */
|
|
.orb-ring {
|
|
position:relative; width:140px; height:140px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
}
|
|
.orb-ring svg {
|
|
width:140px; height:140px; animation:orb-spin 1.8s cubic-bezier(0.4,0.0,0.2,1) infinite;
|
|
}
|
|
.orb-ring circle {
|
|
fill:none; stroke-width:4; stroke-linecap:round;
|
|
stroke:url(#orbGrad);
|
|
stroke-dasharray:240; stroke-dashoffset:170;
|
|
animation:orb-dash 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes orb-spin {
|
|
100% { transform:rotate(360deg); }
|
|
}
|
|
@keyframes orb-dash {
|
|
0% { stroke-dashoffset:260; }
|
|
50% { stroke-dashoffset:60; }
|
|
100% { stroke-dashoffset:260; }
|
|
}
|
|
|
|
/* Inner pulsing glow */
|
|
.orb-glow {
|
|
position:absolute; width:70px; height:70px;
|
|
border-radius:50%;
|
|
background:radial-gradient(circle, rgba(32,34,138,0.4) 0%, rgba(32,34,138,0.1) 50%, transparent 70%);
|
|
animation:orb-pulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes orb-pulse {
|
|
0%,100% { transform:scale(0.7); opacity:0.4; }
|
|
50% { transform:scale(1.3); opacity:1; }
|
|
}
|
|
|
|
/* Floating particles */
|
|
.particles { position:absolute; width:140%; height:140%; pointer-events:none; }
|
|
.particle {
|
|
position:absolute; width:5px; height:5px;
|
|
border-radius:50%;
|
|
background:#5058d0;
|
|
opacity:0;
|
|
animation:particle-float 3.5s ease-in-out infinite;
|
|
}
|
|
.particle:nth-child(1) { left:10%; top:25%; animation-delay:0s; }
|
|
.particle:nth-child(2) { left:80%; top:15%; animation-delay:0.6s; width:4px; height:4px; }
|
|
.particle:nth-child(3) { left:20%; top:75%; animation-delay:1.2s; width:6px; height:6px; }
|
|
.particle:nth-child(4) { left:85%; top:70%; animation-delay:0.3s; }
|
|
.particle:nth-child(5) { left:50%; top:5%; animation-delay:1.5s; width:4px; height:4px; }
|
|
.particle:nth-child(6) { left:5%; top:50%; animation-delay:0.9s; }
|
|
@keyframes particle-float {
|
|
0% { transform:translateY(10px) scale(0.5); opacity:0; }
|
|
30% { opacity:0.9; }
|
|
70% { opacity:0.5; }
|
|
100% { transform:translateY(-60px) scale(1.2); opacity:0; }
|
|
}
|
|
|
|
/* Thinking label */
|
|
.thinking-label {
|
|
font-size:15px; color:#a0a8d0; letter-spacing:3px;
|
|
text-transform:uppercase; font-weight:600;
|
|
animation:label-pulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes label-pulse {
|
|
0%,100% { opacity:0.4; }
|
|
50% { opacity:1; }
|
|
}
|
|
|
|
/* ── Controls ── */
|
|
.controls { background:var(--controls-bg); padding:8px 12px; display:flex;
|
|
gap:8px; align-items:center; border-top:1px solid var(--input-border);
|
|
padding-bottom:env(safe-area-inset-bottom,8px); }
|
|
.mic-btn { width:44px; height:44px; border-radius:50%; border:2px solid var(--input-border);
|
|
background:var(--card); color:var(--text-dim); font-size:18px;
|
|
cursor:pointer; display:flex; align-items:center; justify-content:center;
|
|
transition:all .2s; flex-shrink:0; }
|
|
.mic-btn:hover { border-color:var(--primary); color:var(--primary-bright); }
|
|
.mic-btn.active { border-color:var(--stop-btn); background:var(--stop-btn);
|
|
color:#fff; box-shadow:0 0 14px rgba(231,76,60,.4);
|
|
animation:micPulse 1.5s infinite; }
|
|
@keyframes micPulse { 0%,100%{box-shadow:0 0 6px rgba(231,76,60,.3)}
|
|
50%{box-shadow:0 0 18px rgba(231,76,60,.5)} }
|
|
.text-input { flex:1; min-width:60px; padding:11px 14px; background:var(--input-bg);
|
|
border:1px solid var(--input-border); color:var(--text);
|
|
border-radius:8px; font-size:15px; }
|
|
.text-input:focus { outline:none; border-color:var(--primary); }
|
|
.text-input::placeholder { color:var(--muted); font-size:13px; }
|
|
.send-btn { padding:10px 16px; background:var(--primary); color:#fff;
|
|
border:none; border-radius:8px; cursor:pointer; font-size:14px;
|
|
font-weight:600; transition:background .2s; white-space:nowrap; }
|
|
.send-btn:hover { background:var(--primary-bright); }
|
|
.send-btn:disabled { background:var(--muted); cursor:not-allowed; opacity:.6; }
|
|
|
|
/* ── Stop Button ── */
|
|
.stop-btn { display:none; padding:10px 16px; background:var(--stop-btn); color:#fff;
|
|
border:none; border-radius:8px; cursor:pointer; font-size:14px;
|
|
font-weight:600; animation:pulse .8s infinite; white-space:nowrap; }
|
|
.stop-btn.show { display:block; }
|
|
.logout-btn { background:none; border:1px solid var(--input-border); color:var(--muted);
|
|
padding:3px 8px; border-radius:5px; cursor:pointer; font-size:11px;
|
|
line-height:1.2; }
|
|
.logout-btn:hover { border-color:var(--text-dim); color:var(--text); }
|
|
|
|
/* ── Placeholder ── */
|
|
.placeholder { flex:1; display:flex; flex-direction:column; align-items:center;
|
|
justify-content:center; color:var(--muted); font-size:14px;
|
|
gap:10px; user-select:none; padding:20px; }
|
|
.placeholder-big { font-size:36px; }
|
|
|
|
/* ── Mobile overrides ── */
|
|
@media (max-width:480px) {
|
|
.header { padding:6px 10px; gap:4px; }
|
|
.header h1 { font-size:13px; }
|
|
.lang-select { font-size:11px; padding:3px 5px; }
|
|
.switch-track { width:32px; height:18px; }
|
|
.switch-knob { width:12px; height:12px; }
|
|
.switch-track.active .switch-knob { left:16px; }
|
|
.header-right { gap:3px; }
|
|
.controls { padding:6px 10px; gap:6px; }
|
|
.mic-btn { width:40px; height:40px; font-size:16px; }
|
|
.text-input { font-size:14px; padding:9px 12px; }
|
|
.send-btn { padding:8px 14px; font-size:13px; }
|
|
.msg { max-width:90%; font-size:14px; }
|
|
.orb-ring { width:100px; height:100px; }
|
|
.orb-ring svg { width:100px; height:100px; }
|
|
.orb-ring circle { r:34; stroke-width:3.5; }
|
|
.orb-glow { width:50px; height:50px; }
|
|
.particle { width:4px; height:4px; }
|
|
.thinking-label { font-size:13px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<h1>🎙 <span>BSN</span> Chat</h1>
|
|
<span id="status">Ready</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<select class="lang-select" id="langSelect" onchange="switchLang(this.value)">
|
|
<option value="de">🇩🇪 Deutsch</option>
|
|
<option value="en">🇬🇧 English</option>
|
|
<option value="es">🇪🇸 Español</option>
|
|
</select>
|
|
<div class="switch-wrap">
|
|
<span class="switch-icon">☀️</span>
|
|
<div class="switch-track" id="themeSwitch" onclick="toggleTheme()">
|
|
<div class="switch-knob"></div>
|
|
</div>
|
|
<span class="switch-icon">🌙</span>
|
|
</div>
|
|
<button class="logout-btn" onclick="logout()">Logout</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="messages" id="messages">
|
|
<div class="placeholder" id="placeholder">
|
|
<div class="placeholder-big">🎙</div>
|
|
<div>Start speaking or type a message</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thinking Overlay -->
|
|
<div class="thinking-overlay" id="thinkingOverlay">
|
|
<svg width="0" height="0" style="position:absolute">
|
|
<defs>
|
|
<linearGradient id="orbGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#20228a"/>
|
|
<stop offset="40%" stop-color="#3a3db0"/>
|
|
<stop offset="100%" stop-color="#585cd0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<div class="orb-ring">
|
|
<svg viewBox="0 0 80 80">
|
|
<circle cx="40" cy="40" r="36"/>
|
|
</svg>
|
|
<div class="particles">
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
<div class="particle"></div>
|
|
</div>
|
|
<div class="orb-glow"></div>
|
|
</div>
|
|
<div class="thinking-label">Thinking</div>
|
|
</div>
|
|
|
|
<div id="interim" class="interim" style="display:none"></div>
|
|
|
|
<div class="controls">
|
|
<button class="mic-btn" id="micBtn" onclick="toggleMic()" title="Click to talk">🎤</button>
|
|
<input type="text" class="text-input" id="textInput" placeholder="Nachricht" autofocus>
|
|
<button class="send-btn" id="sendBtn" onclick="sendText()">Send</button>
|
|
<button class="stop-btn" id="stopBtn" onclick="stopAll()">⏹</button>
|
|
</div>
|
|
|
|
<audio id="player" preload="auto"></audio>
|
|
|
|
<script>
|
|
// ── State ──
|
|
let listening = false;
|
|
let recognition = null;
|
|
let abortController = null;
|
|
let currentLang = 'de';
|
|
let langNames = {de:'Deutsch', en:'English', es:'Español'};
|
|
let sttLangs = {de:'de-DE', en:'en-US', es:'es-ES'};
|
|
|
|
// ── Theme ──
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const current = html.getAttribute('data-theme');
|
|
const next = current === 'light' ? 'dark' : 'light';
|
|
html.setAttribute('data-theme', next);
|
|
document.getElementById('themeSwitch').classList.toggle('active', next === 'dark');
|
|
localStorage.setItem('theme', next);
|
|
}
|
|
|
|
(function initTheme() {
|
|
const saved = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', saved);
|
|
document.getElementById('themeSwitch').classList.toggle('active', saved === 'dark');
|
|
})();
|
|
|
|
// ── Language ──
|
|
async function loadLang() {
|
|
try {
|
|
const r = await fetch('/api/language');
|
|
const data = await r.json();
|
|
if (data.ok) {
|
|
currentLang = data.language;
|
|
// Store STT langs from server
|
|
sttLangs = {};
|
|
for (const [k, v] of Object.entries(data.languages)) {
|
|
sttLangs[k] = v.stt_lang;
|
|
}
|
|
updateLangUI(currentLang);
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
|
|
function updateLangUI(lang) {
|
|
currentLang = lang;
|
|
document.getElementById('langSelect').value = lang;
|
|
// Update STT language
|
|
if (recognition) {
|
|
recognition.lang = sttLangs[lang] || (lang === 'de' ? 'de-DE' : lang === 'es' ? 'es-ES' : 'en-US');
|
|
}
|
|
const input = document.getElementById('textInput');
|
|
const placeholders = {de:'Nachricht', en:'Message', es:'Mensaje'};
|
|
if (input) input.placeholder = placeholders[lang] || placeholders['de'];
|
|
}
|
|
|
|
async function switchLang(lang) {
|
|
try {
|
|
const r = await fetch('/api/language', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({language: lang}),
|
|
});
|
|
const data = await r.json();
|
|
if (data.ok) {
|
|
updateLangUI(lang);
|
|
const msgs = {de:'🇩🇪 Deutsch', en:'🇬🇧 English', es:'🇪🇸 Español'};
|
|
addMessage('agent', msgs[lang]);
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
|
|
// ── Web Speech API Init ──
|
|
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
|
|
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
recognition = new SR();
|
|
recognition.lang = 'de-DE';
|
|
recognition.interimResults = true;
|
|
recognition.continuous = false;
|
|
|
|
recognition.onresult = (e) => {
|
|
let interim = '', final = '';
|
|
for (let i = e.resultIndex; i < e.results.length; i++) {
|
|
if (e.results[i].isFinal) final += e.results[i][0].transcript;
|
|
else interim += e.results[i][0].transcript;
|
|
}
|
|
const interEl = document.getElementById('interim');
|
|
if (interim) {
|
|
interEl.style.display = 'block';
|
|
interEl.textContent = interim;
|
|
} else {
|
|
interEl.style.display = 'none';
|
|
}
|
|
if (final) {
|
|
interEl.style.display = 'none';
|
|
stopListening();
|
|
sendMessage(final.trim());
|
|
}
|
|
};
|
|
|
|
recognition.onerror = (e) => {
|
|
console.error('Speech error:', e.error);
|
|
stopListening();
|
|
setStatus('Ready');
|
|
};
|
|
|
|
recognition.onend = () => {
|
|
if (listening) {
|
|
try { recognition.start(); } catch(_) {}
|
|
} else {
|
|
setStatus('Ready');
|
|
}
|
|
};
|
|
} else {
|
|
document.getElementById('micBtn').style.display = 'none';
|
|
}
|
|
|
|
function toggleMic() {
|
|
if (!recognition) return;
|
|
listening ? stopListening() : startListening();
|
|
}
|
|
|
|
function startListening() {
|
|
listening = true;
|
|
const btn = document.getElementById('micBtn');
|
|
btn.classList.add('active');
|
|
btn.textContent = '⬤';
|
|
setStatus('Listening...', 'listening');
|
|
try { recognition.start(); } catch(_) {}
|
|
}
|
|
|
|
function stopListening() {
|
|
listening = false;
|
|
const btn = document.getElementById('micBtn');
|
|
btn.classList.remove('active');
|
|
btn.textContent = '🎤';
|
|
}
|
|
|
|
function setStatus(text, cls) {
|
|
const el = document.getElementById('status');
|
|
el.textContent = text;
|
|
el.className = cls || '';
|
|
}
|
|
|
|
function showThinking(show) {
|
|
document.getElementById('thinkingOverlay').classList.toggle('show', show);
|
|
}
|
|
|
|
function showStop(show) {
|
|
document.getElementById('stopBtn').classList.toggle('show', show);
|
|
if (show) {
|
|
document.getElementById('sendBtn').style.display = 'none';
|
|
} else {
|
|
document.getElementById('sendBtn').style.display = '';
|
|
}
|
|
}
|
|
|
|
function addMessage(role, text) {
|
|
const placeholder = document.getElementById('placeholder');
|
|
if (placeholder) placeholder.style.display = 'none';
|
|
const div = document.createElement('div');
|
|
div.className = 'msg ' + role;
|
|
const now = new Date();
|
|
const time = now.getHours().toString().padStart(2,'0') + ':' +
|
|
now.getMinutes().toString().padStart(2,'0');
|
|
div.innerHTML = text + '<div class="time">' + time + '</div>';
|
|
const msgs = document.getElementById('messages');
|
|
msgs.appendChild(div);
|
|
msgs.scrollTop = msgs.scrollHeight;
|
|
}
|
|
|
|
// ── Stop All ──
|
|
function stopAll() {
|
|
if (abortController) {
|
|
abortController.abort();
|
|
abortController = null;
|
|
}
|
|
const player = document.getElementById('player');
|
|
if (player) { player.pause(); player.src = ''; }
|
|
showThinking(false);
|
|
showStop(false);
|
|
setStatus('Ready');
|
|
document.getElementById('sendBtn').disabled = false;
|
|
}
|
|
|
|
// ── Send Message ──
|
|
async function sendMessage(text) {
|
|
if (!text) return;
|
|
addMessage('user', text);
|
|
showThinking(true);
|
|
showStop(true);
|
|
setStatus('Thinking...', 'thinking');
|
|
|
|
const sendBtn = document.getElementById('sendBtn');
|
|
sendBtn.disabled = true;
|
|
|
|
abortController = new AbortController();
|
|
|
|
try {
|
|
const r = await fetch('/api/chat', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ message: text }),
|
|
signal: abortController.signal,
|
|
});
|
|
|
|
showThinking(false);
|
|
|
|
if (!r.ok) {
|
|
const err = await r.json().catch(() => ({}));
|
|
addMessage('agent', '❌ Error: ' + (err.error || 'Request failed'));
|
|
return;
|
|
}
|
|
|
|
const data = await r.json();
|
|
if (data.ok && data.reply) {
|
|
// Sync language from server response
|
|
if (data.language) {
|
|
currentLang = data.language;
|
|
updateLangUI(data.language);
|
|
}
|
|
addMessage('agent', data.reply);
|
|
setStatus('Speaking...', 'speaking');
|
|
await playTTS(data.reply);
|
|
} else {
|
|
addMessage('agent', '❌ No reply received');
|
|
}
|
|
} catch(e) {
|
|
if (e.name === 'AbortError') {
|
|
addMessage('agent', '⏹ Stopped');
|
|
} else {
|
|
addMessage('agent', '❌ Connection error');
|
|
}
|
|
showThinking(false);
|
|
} finally {
|
|
setStatus('Ready');
|
|
sendBtn.disabled = false;
|
|
showStop(false);
|
|
if (abortController) abortController = null;
|
|
}
|
|
}
|
|
|
|
function sendText() {
|
|
const input = document.getElementById('textInput');
|
|
const text = input.value.trim();
|
|
if (!text) return;
|
|
input.value = '';
|
|
sendMessage(text);
|
|
}
|
|
|
|
document.getElementById('textInput').addEventListener('keydown', e => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendText();
|
|
}
|
|
});
|
|
|
|
// ── TTS ──
|
|
async function playTTS(text) {
|
|
try {
|
|
const r = await fetch('/api/tts', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ text }),
|
|
signal: abortController ? abortController.signal : undefined,
|
|
});
|
|
if (!r.ok) { console.error('TTS error:', r.status); return; }
|
|
const blob = await r.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const player = document.getElementById('player');
|
|
player.src = url;
|
|
showStop(true);
|
|
await player.play();
|
|
await new Promise((resolve) => {
|
|
player.onended = resolve;
|
|
player.onerror = resolve;
|
|
player.onabort = resolve;
|
|
|
|
const checkAbort = setInterval(() => {
|
|
if (abortController && abortController.signal.aborted) {
|
|
player.pause();
|
|
player.src = '';
|
|
resolve();
|
|
}
|
|
}, 200);
|
|
|
|
player.addEventListener('ended', () => clearInterval(checkAbort));
|
|
player.addEventListener('error', () => clearInterval(checkAbort));
|
|
});
|
|
URL.revokeObjectURL(url);
|
|
} catch(e) {}
|
|
}
|
|
|
|
// ── Logout ──
|
|
async function logout() {
|
|
await fetch('/logout', { method:'POST' });
|
|
window.location.reload();
|
|
}
|
|
|
|
// ── Init ──
|
|
// iOS Safari height fix: set body height on resize
|
|
function fixHeight() {
|
|
document.body.style.height = window.innerHeight + 'px';
|
|
}
|
|
window.addEventListener('resize', fixHeight);
|
|
window.addEventListener('orientationchange', function() { setTimeout(fixHeight, 200); });
|
|
|
|
loadLang();
|
|
fetch('/api/check').then(r => r.json()).then(d => {
|
|
if (!d.authenticated) window.location.reload();
|
|
});
|
|
fixHeight();
|
|
</script>
|
|
</body>
|
|
</html>"""
|
|
|
|
|
|
# ── Main ────────────────────────────────────────────────────────────────────
|
|
|
|
if __name__ == "__main__":
|
|
print("Starting BSN Voice Chat on port 5001 (DeepSeek v4 Flash)...")
|
|
app.run(host="::", port=5001, debug=False) |