streamer-tools/local-transcription
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add user-configurable colors for transcription display

Browse Source 
- Add color settings (user_color, text_color, background_color) to config
- Add color picker buttons in Settings dialog with alpha support for backgrounds
- Update local web display to use configurable colors
- Send per-user colors with transcriptions to multi-user server
- Update Node.js server to apply per-user colors on display page
- Improve server landing page: replace tech details with display options reference
- Bump version to 1.3.2

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jknapp
2026-01-20 20:59:13 -08:00
parent ff067b3368
commit 89819f5d1b
7 changed files with 322 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
server/web_display.py
View File

@@ -16,7 +16,9 @@ class TranscriptionWebServer:
fade_after_seconds: int = 10, max_lines: int = 50, font_family: str = "Arial",
font_size: int = 16, fonts_dir: Optional[Path] = None,
font_source: str = "System Font", websafe_font: str = "Arial",
google_font: str = "Roboto"):
google_font: str = "Roboto",
user_color: str = "#4CAF50", text_color: str = "#FFFFFF",
background_color: str = "#000000B3"):
"""
Initialize web server.
@@ -32,6 +34,9 @@ class TranscriptionWebServer:
font_source: Font source type ("System Font", "Web-Safe", "Google Font")
websafe_font: Web-safe font name
google_font: Google Font name
user_color: User name color (hex format)
text_color: Text color (hex format)
background_color: Background color (hex format with optional alpha, e.g., #RRGGBBAA)
"""
self.host = host
self.port = port
@@ -44,6 +49,9 @@ class TranscriptionWebServer:
self.font_source = font_source
self.websafe_font = websafe_font
self.google_font = google_font
self.user_color = user_color
self.text_color = text_color
self.background_color = background_color
self.app = FastAPI()
self.active_connections: List[WebSocket] = []
self.transcriptions = [] # Store recent transcriptions
@@ -138,6 +146,25 @@ class TranscriptionWebServer:
return f'<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={font_name}&display=swap">'
return ""
def _hex_to_rgba(self, hex_color: str) -> str:
"""Convert hex color (optionally with alpha) to CSS rgba() format."""
# Remove # if present
hex_color = hex_color.lstrip('#')
if len(hex_color) == 8: # RRGGBBAA
r = int(hex_color[0:2], 16)
g = int(hex_color[2:4], 16)
b = int(hex_color[4:6], 16)
a = int(hex_color[6:8], 16) / 255
return f"rgba({r}, {g}, {b}, {a:.2f})"
elif len(hex_color) == 6: # RRGGBB
r = int(hex_color[0:2], 16)
g = int(hex_color[2:4], 16)
b = int(hex_color[4:6], 16)
return f"rgb({r}, {g}, {b})"
else:
return hex_color # Return as-is if format is unknown
def _get_html(self) -> str:
"""Generate HTML for transcription display."""
# Generate custom font CSS
@@ -145,6 +172,9 @@ class TranscriptionWebServer:
google_font_link = self._get_google_font_link()
effective_font = self._get_effective_font()
# Convert background color to rgba for CSS
bg_color_css = self._hex_to_rgba(self.background_color)
return f"""
<!DOCTYPE html>
<html>
@@ -168,7 +198,7 @@ class TranscriptionWebServer:
.transcription {{
margin: 10px 0;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
background: {bg_color_css};
border-radius: 5px;
animation: slideIn 0.3s ease-out;
transition: opacity 1s ease-out;
@@ -182,12 +212,12 @@ class TranscriptionWebServer:
margin-right: 10px;
}}
.user {{
color: #4CAF50;
color: {self.user_color};
font-weight: bold;
margin-right: 10px;
}}
.text {{
color: white;
color: {self.text_color};
}}
.transcription.preview {{
font-style: italic;