claw/diarization-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: split diarization UI into separate project folder

Browse Source
This commit is contained in:
OpenClaw Bot
2026-03-21 13:14:54 +01:00
commit 66d681279e
6 changed files with 97 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example Normal file
View File

@@ -0,0 +1 @@
API_BASE=http://diarization-api:8093

8
Dockerfile Normal file
View File

@@ -0,0 +1,8 @@
FROM nginx:alpine
COPY index.html.template /usr/share/nginx/html/index.html.template
COPY docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh
EXPOSE 80
CMD ["/docker-entrypoint.sh"]

20
README.md Normal file
View File

@@ -0,0 +1,20 @@
# diarization-ui
Separate UI container for the diarization/transcription API.
## Run
```bash
docker compose up -d --build
```
UI will be available on `http://127.0.0.1:8094/`.
By default it calls API at `http://diarization-api:8093`.
Set `API_BASE` in `.env` if needed.
## .env
```env
API_BASE=http://diarization-api:8093
```

11
docker-compose.yml Normal file
View File

@@ -0,0 +1,11 @@
services:
diarization-ui:
build:
context: ./web-ui
dockerfile: Dockerfile
container_name: diarization-ui
restart: unless-stopped
ports:
- "8094:80"
environment:
- API_BASE=${API_BASE:-http://diarization-api:8093}

7
docker-entrypoint.sh Normal file
View File

@@ -0,0 +1,7 @@
#!/usr/bin/env sh
set -eu
API_BASE="${API_BASE:-http://diarization-api:8093}"
sed "s|__API_BASE__|${API_BASE}|g" /usr/share/nginx/html/index.html.template > /usr/share/nginx/html/index.html
exec nginx -g 'daemon off;'

50
index.html.template Normal file
View File

@@ -0,0 +1,50 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Diarization + Whisper UI</title>
<style>
body { font-family: Arial, sans-serif; max-width: 980px; margin: 24px auto; padding: 0 12px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
input[type=file] { padding:6px; }
button { padding:8px 14px; cursor:pointer; }
pre { white-space: pre-wrap; background:#111; color:#0f0; padding:12px; min-height:220px; border-radius:8px; }
.muted { color:#666; font-size:13px; }
</style>
</head>
<body>
<h2>Whisper + Sprechertrennung</h2>
<p class="muted">API: <span id="api"></span></p>
<div class="row">
<input id="f" type="file" accept="audio/*" />
<button onclick="go()">Verarbeiten</button>
</div>
<pre id="out"></pre>
<script>
const API_BASE = "__API_BASE__";
document.getElementById("api").textContent = API_BASE;
async function go() {
const fi = document.getElementById('f');
if (!fi.files.length) { alert('Bitte Datei wählen'); return; }
const fd = new FormData();
fd.append('file', fi.files[0]);
const out = document.getElementById('out');
out.textContent = 'Läuft...';
try {
const r = await fetch(`${API_BASE}/transcribe-diarize`, { method: 'POST', body: fd });
const j = await r.json();
if (!r.ok) {
out.textContent = `Fehler (${r.status}):\n` + JSON.stringify(j, null, 2);
return;
}
out.textContent = j.formatted_text || JSON.stringify(j, null, 2);
} catch (e) {
out.textContent = `Netzwerkfehler: ${e}`;
}
}
</script>
</body>
</html>