admin-valentin/WhisperLiveKit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

get_web_interface_html to get_inline_ui_html for embedded web interface HTML

Browse source
This commit is contained in:
Quentin Fuxa 2025-08-30 13:44:06 +02:00
parent 057a1026d7
commit 4a71a391b8
2 changed files with 5 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -128,7 +128,7 @@ async def websocket_endpoint(websocket: WebSocket):
await audio_processor.process_audio(message) await audio_processor.process_audio(message)
``` ```
**Frontend Implementation**: The package includes an HTML/JavaScript implementation [here](https://github.com/QuentinFuxa/WhisperLiveKit/blob/main/whisperlivekit/web/live_transcription.html). You can also import it using `from whisperlivekit import get_web_interface_html` & `page = get_web_interface_html()` **Frontend Implementation**: The package includes an HTML/JavaScript implementation [here](https://github.com/QuentinFuxa/WhisperLiveKit/blob/main/whisperlivekit/web/live_transcription.html). You can also import it using `from whisperlivekit import get_inline_ui_html` & `page = get_inline_ui_html()`
## Parameters & Configuration ## Parameters & Configuration

15
whisperlivekit/web/web_interface.py
View file

@ -16,32 +16,25 @@ def get_web_interface_html():
def get_inline_ui_html(): def get_inline_ui_html():
"""Returns the complete web interface HTML with all assets embedded in a single call.""" """Returns the complete web interface HTML with all assets embedded in a single call."""
try: try:
# Load HTML template
with resources.files('whisperlivekit.web').joinpath('live_transcription.html').open('r', encoding='utf-8') as f: with resources.files('whisperlivekit.web').joinpath('live_transcription.html').open('r', encoding='utf-8') as f:
html_content = f.read() html_content = f.read()
# Load CSS and embed it
with resources.files('whisperlivekit.web').joinpath('live_transcription.css').open('r', encoding='utf-8') as f: with resources.files('whisperlivekit.web').joinpath('live_transcription.css').open('r', encoding='utf-8') as f:
css_content = f.read() css_content = f.read()
# Load JS and embed it
with resources.files('whisperlivekit.web').joinpath('live_transcription.js').open('r', encoding='utf-8') as f: with resources.files('whisperlivekit.web').joinpath('live_transcription.js').open('r', encoding='utf-8') as f:
js_content = f.read() js_content = f.read()
# Load SVG files and convert to data URIs # SVG files
with resources.files('whisperlivekit.web').joinpath('src', 'system_mode.svg').open('r', encoding='utf-8') as f: with resources.files('whisperlivekit.web').joinpath('src', 'system_mode.svg').open('r', encoding='utf-8') as f:
system_svg = f.read() system_svg = f.read()
system_data_uri = f"data:image/svg+xml;base64,{base64.b64encode(system_svg.encode('utf-8')).decode('utf-8')}" system_data_uri = f"data:image/svg+xml;base64,{base64.b64encode(system_svg.encode('utf-8')).decode('utf-8')}"
with resources.files('whisperlivekit.web').joinpath('src', 'light_mode.svg').open('r', encoding='utf-8') as f: with resources.files('whisperlivekit.web').joinpath('src', 'light_mode.svg').open('r', encoding='utf-8') as f:
light_svg = f.read() light_svg = f.read()
light_data_uri = f"data:image/svg+xml;base64,{base64.b64encode(light_svg.encode('utf-8')).decode('utf-8')}" light_data_uri = f"data:image/svg+xml;base64,{base64.b64encode(light_svg.encode('utf-8')).decode('utf-8')}"
with resources.files('whisperlivekit.web').joinpath('src', 'dark_mode.svg').open('r', encoding='utf-8') as f: with resources.files('whisperlivekit.web').joinpath('src', 'dark_mode.svg').open('r', encoding='utf-8') as f:
dark_svg = f.read() dark_svg = f.read()
dark_data_uri = f"data:image/svg+xml;base64,{base64.b64encode(dark_svg.encode('utf-8')).decode('utf-8')}" dark_data_uri = f"data:image/svg+xml;base64,{base64.b64encode(dark_svg.encode('utf-8')).decode('utf-8')}"
# Replace external references with embedded content # Replace external references
html_content = html_content.replace( html_content = html_content.replace(
'<link rel="stylesheet" href="/web/live_transcription.css" />', '<link rel="stylesheet" href="/web/live_transcription.css" />',
f'<style>\n{css_content}\n</style>' f'<style>\n{css_content}\n</style>'
@ -52,7 +45,7 @@ def get_inline_ui_html():
f'<script>\n{js_content}\n</script>' f'<script>\n{js_content}\n</script>'
) )
# Replace SVG references with data URIs # Replace SVG references
html_content = html_content.replace( html_content = html_content.replace(
'<img src="/web/src/system_mode.svg" alt="" />', '<img src="/web/src/system_mode.svg" alt="" />',
f'<img src="{system_data_uri}" alt="" />' f'<img src="{system_data_uri}" alt="" />'