| import gradio as gr
|
| import os
|
| import base64
|
|
|
| os.environ["KMP_DUPLICATE_LIB_OK"] = "TRUE"
|
|
|
| from handle_gradio import (
|
| process_video,
|
| process_video_stream,
|
| handle_file_upload,
|
| handle_remove_video,
|
| handle_select_example,
|
| open_record_modal,
|
| close_record_modal,
|
| save_record_direct,
|
| save_record_and_open_trim,
|
| open_preview_modal,
|
| close_preview_modal,
|
| save_preview_and_trim,
|
| open_keypoints_modal,
|
| close_keypoints_modal,
|
| )
|
|
|
|
|
| print("Checking for large model file...")
|
| local_model_path = os.path.join("Uni_Sign", "unisign_model", "best_checkpoint-wlasl.pth")
|
| if os.path.exists(local_model_path):
|
| model_path = local_model_path
|
| else:
|
| from huggingface_hub import hf_hub_download
|
| model_path = hf_hub_download(
|
| repo_id="plice13/sign-language-weights",
|
| filename="best_checkpoint-wlasl.pth"
|
| )
|
| print(f"File successfully loaded at: {model_path}")
|
| os.environ["UNISIGN_WEIGHTS"] = model_path
|
|
|
|
|
|
|
| logo_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), "logo")
|
|
|
| def _get_b64_logo(filename):
|
| p = os.path.join(logo_dir, filename)
|
| if os.path.exists(p):
|
| with open(p, "rb") as f:
|
| return f"data:image/png;base64,{base64.b64encode(f.read()).decode('utf-8')}"
|
| return ""
|
|
|
| logo_data = {
|
| "FAV_english_RGB": _get_b64_logo("FAV_english_RGB.png"),
|
| "fav_logo": _get_b64_logo("fav_logo.png"),
|
| "ZCU_logo_english_RGB": _get_b64_logo("ZCU_logo_english_RGB.png"),
|
| "zcu_logo": _get_b64_logo("zcu_logo.png"),
|
| }
|
|
|
| fav_logo_src = logo_data["FAV_english_RGB"]
|
| zcu_light_logo_src = logo_data["ZCU_logo_english_RGB"]
|
| zcu_dark_logo_src = logo_data["zcu_logo"]
|
|
|
|
|
| import json
|
|
|
| def load_examples_config():
|
| examples_json_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "examples.json")
|
| if os.path.exists(examples_json_path):
|
| try:
|
| with open(examples_json_path, "r", encoding="utf-8") as f:
|
| data = json.load(f)
|
| if isinstance(data, list):
|
| return data
|
| except Exception:
|
| pass
|
| example_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), "examples", "displayed")
|
| return [
|
| {"title": "Book", "video_path": os.path.join(example_dir, "book.mp4"), "keypoints_path": os.path.join(example_dir, "book_keypoints.json"), "keypoints_video_path": os.path.join(example_dir, "book_keypoints.mp4")},
|
| {"title": "Deaf", "video_path": os.path.join(example_dir, "deaf.mp4"), "keypoints_path": os.path.join(example_dir, "deaf_keypoints.json"), "keypoints_video_path": os.path.join(example_dir, "deaf_keypoints.mp4")},
|
| {"title": "Help", "video_path": os.path.join(example_dir, "help.mp4"), "keypoints_path": os.path.join(example_dir, "help_keypoints.json"), "keypoints_video_path": os.path.join(example_dir, "help_keypoints.mp4")},
|
| {"title": "Fine", "video_path": os.path.join(example_dir, "fine.mp4"), "keypoints_path": os.path.join(example_dir, "fine_keypoints.json"), "keypoints_video_path": os.path.join(example_dir, "fine_keypoints.mp4")},
|
| {"title": "Purple", "video_path": os.path.join(example_dir, "purple.mp4"), "keypoints_path": os.path.join(example_dir, "purple_keypoints.json"), "keypoints_video_path": os.path.join(example_dir, "purple_keypoints.mp4")},
|
| {"title": "No", "video_path": os.path.join(example_dir, "no.mp4"), "keypoints_path": os.path.join(example_dir, "no_keypoints.json"), "keypoints_video_path": os.path.join(example_dir, "no_keypoints.mp4")},
|
| ]
|
|
|
| examples_list = load_examples_config()
|
|
|
|
|
| css_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "style.css")
|
| with open(css_path, "r", encoding="utf-8") as f:
|
| custom_css = f.read()
|
|
|
|
|
| INFO_MARKDOWN = """## Sign Language Translation Demo
|
|
|
| This interactive demo showcases **automatic sign language recognition from video to text**.
|
|
|
| The current version demonstrates the processing of **American Sign Language (ASL)** using modern computer vision and deep learning methods.
|
|
|
| ## How to use the demo
|
|
|
| 1. **Upload a video** or select one of the provided examples.
|
| 2. Click **Submit** to process the video.
|
| 3. The predicted text will be displayed as the output.
|
|
|
| For best results, the signer should be clearly visible, including the upper body, hands, and face.
|
|
|
| > **Note:** This is a research demonstrator. Predictions may not always be accurate, especially for videos that differ significantly from the data used during training.
|
|
|
| ## How does it work?
|
|
|
| The system consists of two main stages: **pose preprocessing** and **sign language translation**.
|
|
|
| ### Pose preprocessing
|
|
|
| The input video is first converted into a structured pose representation. Keypoints describing the signer's **body, hands, and face** are extracted and normalized before being passed to the translation model.
|
|
|
| Body keypoints are normalized globally, while hand and facial keypoints are normalized locally to preserve detailed information about their shape and movement.
|
|
|
| More information about the preprocessing pipeline is available in the [PoseEstimation repository](https://github.com/JSALT2024/PoseEstimation).
|
|
|
| ### Sign language translation
|
|
|
| The extracted pose sequence is processed using a model based on **Uni-Sign**, a unified framework for sign language understanding.
|
|
|
| More information about the model and our implementation is available in the [Uni-Sign repository](https://github.com/zeleznyt/Uni-Sign).
|
|
|
| ## Resources
|
|
|
| - [Demo source code](https://github.com/JSALT2024/slt-demo/tree/uni-sign-EP)
|
| - [Pose estimation and preprocessing](https://github.com/JSALT2024/PoseEstimation)
|
| - [Uni-Sign implementation](https://github.com/zeleznyt/Uni-Sign)
|
| - **Uni-Sign:** *Uni-Sign: Toward Unified Sign Language Understanding at Scale*, Li et al., ICLR 2025
|
|
|
| ## Acknowledgements
|
|
|
| This demonstrator was developed at the **University of West Bohemia (ZČU), Department of Cybernetics, Computer Vision group**.
|
|
|
| Development was supported by the **2026 ZČU internal mini-project programme for the development and wider use of artificial intelligence**.
|
|
|
| The system builds upon the **Uni-Sign** framework. We thank its authors and the open-source sign language research community for making their work publicly available.
|
| """
|
|
|
|
|
|
|
| with gr.Blocks(title="Sign Language Translation", css=custom_css, theme=gr.themes.Default(primary_hue="amber", neutral_hue="neutral")) as app:
|
|
|
| current_video = gr.State("")
|
| keypoints_video_state = gr.State("")
|
|
|
| with gr.Column(elem_id="main-layout"):
|
|
|
| gr.HTML(f"""
|
| <style>{custom_css}</style>
|
| <script>
|
| (function() {{
|
| let isApplying = false;
|
|
|
| function getDesiredTheme() {{
|
| try {{
|
| const urlParams = new URLSearchParams(window.location.search);
|
| const themeParam = urlParams.get('__theme');
|
| if (themeParam === 'dark') return 'dark';
|
| if (themeParam === 'light') return 'light';
|
| }} catch(e) {{}}
|
|
|
| const appEl = document.querySelector('gradio-app');
|
| if (appEl && appEl.classList.contains('dark')) {{
|
| return 'dark';
|
| }}
|
|
|
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {{
|
| return 'light';
|
| }}
|
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {{
|
| return 'dark';
|
| }}
|
|
|
| return 'dark';
|
| }}
|
|
|
| function applyTheme() {{
|
| if (isApplying) return;
|
| isApplying = true;
|
| try {{
|
| const isLight = (getDesiredTheme() === 'light');
|
|
|
| document.documentElement.classList.toggle('light-theme', isLight);
|
| document.body.classList.toggle('light-theme', isLight);
|
|
|
| const appEl = document.querySelector('gradio-app');
|
| if (appEl) {{
|
| if (isLight) {{
|
| if (!appEl.classList.contains('light-theme')) appEl.classList.add('light-theme');
|
| }} else {{
|
| if (appEl.classList.contains('light-theme')) appEl.classList.remove('light-theme');
|
| }}
|
| }}
|
|
|
| const zcuImg = document.getElementById('zcu-header-logo');
|
| const favImg = document.getElementById('fav-header-logo');
|
| if (favImg && favImg.getAttribute('src') !== '{fav_logo_src}') {{
|
| favImg.setAttribute('src', '{fav_logo_src}');
|
| }}
|
| if (zcuImg) {{
|
| const targetZcu = isLight ? '{zcu_light_logo_src}' : '{zcu_dark_logo_src}';
|
| if (zcuImg.getAttribute('src') !== targetZcu) {{
|
| zcuImg.setAttribute('src', targetZcu);
|
| }}
|
| }}
|
| }} finally {{
|
| setTimeout(function() {{ isApplying = false; }}, 50);
|
| }}
|
| }}
|
|
|
| try {{ localStorage.removeItem('slt_demo_theme'); }} catch(e) {{}}
|
|
|
| applyTheme();
|
| document.addEventListener('DOMContentLoaded', applyTheme);
|
| setTimeout(applyTheme, 150);
|
| setTimeout(applyTheme, 500);
|
| setTimeout(applyTheme, 1200);
|
|
|
| if (window.matchMedia) {{
|
| try {{
|
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
|
| window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', applyTheme);
|
| }} catch(e) {{}}
|
| }}
|
|
|
| const observer = new MutationObserver(function(mutations) {{
|
| for (let i = 0; i < mutations.length; i++) {{
|
| if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'class') {{
|
| applyTheme();
|
| break;
|
| }}
|
| }}
|
| }});
|
|
|
| function setupObserver() {{
|
| const appEl = document.querySelector('gradio-app');
|
| if (appEl) {{
|
| observer.observe(appEl, {{ attributes: true, attributeFilter: ['class'] }});
|
| }} else {{
|
| setTimeout(setupObserver, 200);
|
| }}
|
| }}
|
| setupObserver();
|
|
|
| // WebM Chromium Infinity duration bug workaround
|
| function fixWebmDuration(v) {{
|
| if (!v || v._durationFixAttempted) return;
|
| if (!isFinite(v.duration) || isNaN(v.duration) || v.duration === Infinity) {{
|
| v._durationFixAttempted = true;
|
| const onSeekEnd = function() {{
|
| v.removeEventListener('timeupdate', onSeekEnd);
|
| v.currentTime = 0;
|
| }};
|
| v.addEventListener('timeupdate', onSeekEnd);
|
| v.currentTime = 1e101;
|
| }}
|
| }}
|
|
|
| // Sanitize any "Infinity:NaN:NaN" display text in video controls
|
| function sanitizeDurationText() {{
|
| const nodes = document.querySelectorAll('.controls, [class*="controls"], .time, [class*="time"], span');
|
| for (let i = 0; i < nodes.length; i++) {{
|
| const el = nodes[i];
|
| if (el.children.length === 0 && (el.textContent.includes('Infinity') || el.textContent.includes('NaN'))) {{
|
| el.textContent = el.textContent.replace(/Infinity:NaN:NaN/g, '0:00').replace(/NaN:NaN/g, '0:00');
|
| }}
|
| }}
|
| }}
|
|
|
| // Strictly detect when a recorded video is present (never live webcam)
|
| function checkRecordState() {{
|
| const recordFooter = document.getElementById('record-footer-row') || document.querySelector('.record-footer-row');
|
| if (!recordFooter) return;
|
|
|
| const recordModal = document.querySelector('.modal-dialog-card');
|
| if (!recordModal) return;
|
|
|
| const vids = recordModal.querySelectorAll('.modal-video-player video');
|
| let hasRecorded = false;
|
| let recordedVid = null;
|
|
|
| for (let i = 0; i < vids.length; i++) {{
|
| const v = vids[i];
|
| if (v && v.src && typeof v.src === 'string') {{
|
| const s = v.src.trim();
|
| // Live webcam uses srcObject; recorded video has blob:, http:, or file= URL
|
| if (s.startsWith('blob:') || s.startsWith('http://') || s.startsWith('https://') || s.includes('/file=')) {{
|
| if (s !== 'blob:' && !s.includes('null') && !s.includes('undefined')) {{
|
| hasRecorded = true;
|
| recordedVid = v;
|
| break;
|
| }}
|
| }}
|
| }}
|
| }}
|
|
|
| if (hasRecorded) {{
|
| if (!recordFooter.classList.contains('has-recording')) {{
|
| recordFooter.classList.add('has-recording');
|
| }}
|
| recordFooter.style.setProperty('display', 'flex', 'important');
|
| if (recordedVid) fixWebmDuration(recordedVid);
|
| }} else {{
|
| if (recordFooter.classList.contains('has-recording')) {{
|
| recordFooter.classList.remove('has-recording');
|
| }}
|
| recordFooter.style.setProperty('display', 'none', 'important');
|
| }}
|
| sanitizeDurationText();
|
| }}
|
|
|
| document.addEventListener('loadedmetadata', function(e) {{
|
| if (e.target && e.target.tagName === 'VIDEO') {{
|
| fixWebmDuration(e.target);
|
| checkRecordState();
|
| }}
|
| }}, true);
|
|
|
| document.addEventListener('durationchange', function(e) {{
|
| if (e.target && e.target.tagName === 'VIDEO') {{
|
| fixWebmDuration(e.target);
|
| sanitizeDurationText();
|
| checkRecordState();
|
| }}
|
| }}, true);
|
|
|
| const recordObserver = new MutationObserver(function() {{
|
| checkRecordState();
|
| }});
|
|
|
| function setupRecordObserver() {{
|
| const target = document.querySelector('.modal-overlay') || document.body;
|
| if (target) {{
|
| recordObserver.observe(target, {{ childList: true, subtree: true, attributes: true, attributeFilter: ['src'] }});
|
| }} else {{
|
| setTimeout(setupRecordObserver, 200);
|
| }}
|
| }}
|
| setupRecordObserver();
|
|
|
| setInterval(function() {{
|
| checkRecordState();
|
| sanitizeDurationText();
|
| const vids = document.querySelectorAll('video');
|
| vids.forEach(v => {{
|
| if (v.duration === Infinity) fixWebmDuration(v);
|
| }});
|
| }}, 200);
|
| }})();
|
| </script>
|
| <div class="app-header-container">
|
| <div class="header-badge header-badge-left">
|
| <a href="https://www.zcu.cz" target="_blank" rel="noopener noreferrer" title="Západočeská univerzita v Plzni">
|
| <img id="zcu-header-logo" src="{zcu_dark_logo_src}" alt="Západočeská univerzita v Plzni" class="header-badge-img" />
|
| </a>
|
| </div>
|
| <div class="header-titles">
|
| <h1 class="app-title">Sign Language to Text Translation</h1>
|
| <h2 class="app-subtitle">Upload an ASL video and get a text translation.</h2>
|
| </div>
|
| <div class="header-badge header-badge-right">
|
| <a href="https://fav.zcu.cz" target="_blank" rel="noopener noreferrer" title="Fakulta aplikovaných věd ZČU">
|
| <img id="fav-header-logo" src="{fav_logo_src}" alt="Fakulta aplikovaných věd ZČU" class="header-badge-img" />
|
| </a>
|
| </div>
|
| </div>
|
| """, elem_classes=["app-header-html"])
|
|
|
|
|
| with gr.Column(elem_classes=["ui-card"]):
|
| with gr.Row():
|
| with gr.Column(scale=1, min_width=0):
|
| gr.Markdown("<h3 class='card-title'>Upload video</h3>")
|
| with gr.Column(scale=0, min_width=160, elem_classes=["record-btn-col"]):
|
| record_yourself_btn = gr.Button(
|
| "📹 RECORD YOURSELF",
|
| variant="secondary",
|
| elem_classes=["record-yourself-btn"],
|
| visible=True,
|
| )
|
|
|
|
|
| upload_file = gr.File(
|
| label="Upload Video",
|
| file_types=["video"],
|
| file_count="single",
|
| show_label=False,
|
| elem_classes=["compact-dropzone"]
|
| )
|
|
|
|
|
| with gr.Row(visible=False, elem_classes=["video-info-row"]) as video_info_row:
|
| video_name_md = gr.Markdown("<div class='video-name-badge'><span>video.mp4</span></div>", elem_classes=["video-name-col"])
|
| preview_btn = gr.Button("🎬 Preview & Trim Video", variant="secondary", elem_classes=["preview-modal-btn"])
|
| change_video_btn = gr.Button("✕ Remove", variant="secondary", elem_classes=["change-vid-btn"])
|
|
|
|
|
| submit_btn = gr.Button("Translate", variant="primary", elem_classes=["translate-btn"], visible=False)
|
|
|
|
|
| with gr.Column(elem_classes=["ui-card", "translation-card"], elem_id="translation-card", visible=False) as translation_card:
|
| gr.Markdown("<h3 class='card-title'>Translation</h3>")
|
| translation_display = gr.HTML(value="", elem_id="translation-display", elem_classes=["translation-display-html"])
|
| show_keypoints_btn = gr.Button(
|
| "🎯 SHOW KEYPOINTS",
|
| variant="secondary",
|
| elem_classes=["show-keypoints-btn"],
|
| visible=False,
|
| )
|
|
|
|
|
| example_buttons = []
|
| with gr.Column(elem_classes=["ui-card"]):
|
| gr.Markdown("<h3 class='card-title'>Examples</h3>")
|
| for i in range(0, len(examples_list), 3):
|
| row_items = examples_list[i:i+3]
|
| with gr.Row(elem_classes=["examples-row"] if i == 0 else ["examples-row", "examples-row-second"]):
|
| for idx, ex in enumerate(row_items):
|
| item_num = i + idx + 1
|
| v_path = ex.get("video_path", "")
|
| title = ex.get("title", f"Example {item_num}")
|
| with gr.Column(scale=1):
|
| gr.HTML(f"<div class='example-title'>{title}</div>")
|
| gr.Video(value=v_path, interactive=False, show_label=False, autoplay=False, height=160, mirror_webcam=False)
|
| btn = gr.Button(f"Use Example {item_num}", variant="secondary", elem_classes=["example-btn"])
|
| example_buttons.append((btn, v_path))
|
|
|
|
|
| with gr.Column(elem_classes=["ui-card"]):
|
| gr.Markdown("<h3 class='card-title'>Information</h3>")
|
| gr.Markdown(INFO_MARKDOWN, elem_classes=["info-markdown"])
|
|
|
|
|
| with gr.Row(elem_classes=["restart-row"]):
|
| restart_btn = gr.Button("🔄 Restart session", variant="secondary", elem_classes=["restart-btn"], size="sm")
|
|
|
|
|
| with gr.Column(elem_classes=["modal-overlay"], scale=0, visible=False) as record_modal:
|
| with gr.Column(elem_classes=["modal-dialog-card"], scale=0):
|
| with gr.Row(elem_classes=["modal-header-row"]):
|
| with gr.Column(scale=1, min_width=0):
|
| gr.Markdown("<h3 class='modal-title'>📹 Webcam Video Recording</h3>")
|
| with gr.Column(scale=0, min_width=36, elem_classes=["modal-close-col"]):
|
| record_close_top = gr.Button("✕", size="sm", min_width=36, elem_classes=["modal-close-icon"])
|
|
|
| record_video = gr.Video(
|
| interactive=True,
|
| show_label=False,
|
| sources=["webcam"],
|
| mirror_webcam=False,
|
| elem_classes=["modal-video-player"],
|
| )
|
|
|
| with gr.Row(elem_id="record-footer-row", elem_classes=["modal-footer-row", "record-footer-row"]):
|
| record_direct_btn = gr.Button("✓ Use Directly", variant="secondary", elem_classes=["modal-use-direct-btn"])
|
| record_trim_btn = gr.Button("✂️ Trim", variant="primary", elem_classes=["modal-done-btn"])
|
|
|
|
|
| with gr.Column(elem_classes=["modal-overlay"], scale=0, visible=False) as preview_modal:
|
| with gr.Column(elem_classes=["modal-dialog-card"], scale=0):
|
| with gr.Row(elem_classes=["modal-header-row"]):
|
| with gr.Column(scale=1, min_width=0):
|
| gr.Markdown("<h3 class='modal-title'>🎬 Video Preview & Trimming</h3>")
|
| with gr.Column(scale=0, min_width=36, elem_classes=["modal-close-col"]):
|
| preview_close_top = gr.Button("✕", size="sm", min_width=36, elem_classes=["modal-close-icon"])
|
|
|
| preview_video = gr.Video(
|
| interactive=True,
|
| show_label=False,
|
| mirror_webcam=False,
|
| elem_classes=["modal-video-player"],
|
| )
|
|
|
| with gr.Row(elem_classes=["modal-footer-row"]):
|
| preview_close_bottom = gr.Button("✕ Cancel", variant="secondary", elem_classes=["modal-cancel-btn"])
|
| preview_save_btn = gr.Button("✓ Save & Use Video", variant="primary", elem_classes=["modal-done-btn"])
|
|
|
|
|
| with gr.Column(elem_classes=["modal-overlay", "keypoints-modal-overlay"], scale=0, visible=False) as keypoints_modal:
|
| with gr.Column(elem_classes=["modal-dialog-card"], scale=0):
|
| with gr.Row(elem_classes=["modal-header-row"]):
|
| with gr.Column(scale=1, min_width=0):
|
| gr.Markdown("<h3 class='modal-title'>🎯 Extracted Pose & Keypoints</h3>")
|
| with gr.Column(scale=0, min_width=36, elem_classes=["modal-close-col"]):
|
| keypoints_close_top = gr.Button("✕", size="sm", min_width=36, elem_classes=["modal-close-icon"])
|
|
|
| keypoints_modal_video = gr.Video(
|
| interactive=False,
|
| show_label=False,
|
| autoplay=True,
|
| loop=True,
|
| elem_classes=["modal-video-player", "keypoints-video-player"],
|
| )
|
|
|
| with gr.Column(elem_classes=["modal-footer-col"]):
|
| keypoints_close_bottom = gr.Button("Close", variant="secondary", elem_classes=["modal-done-btn"])
|
|
|
| def start_translating_ui():
|
| spinner_html = """<div class="translation-content-box"><div class="loading-container"><div class="pulse-spinner"></div><div class="queue-notice-text" style="margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--gold); text-align: center; letter-spacing: 0.3px;">Please wait, you are in queue...</div></div></div>"""
|
| return gr.update(visible=True), spinner_html, gr.update(visible=False), ""
|
|
|
| def finish_translating(video_path):
|
| yield from process_video_stream(video_path)
|
|
|
|
|
| upload_file.upload(
|
| fn=handle_file_upload,
|
| inputs=upload_file,
|
| outputs=[current_video, upload_file, record_yourself_btn, video_info_row, video_name_md, submit_btn, translation_card],
|
| )
|
|
|
|
|
| change_video_btn.click(
|
| fn=handle_remove_video,
|
| inputs=None,
|
| outputs=[current_video, upload_file, record_yourself_btn, video_info_row, video_name_md, submit_btn, translation_card],
|
| )
|
|
|
|
|
| scroll_top_js = "() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
|
|
|
|
|
| for btn_obj, v_path_val in example_buttons:
|
| btn_obj.click(
|
| fn=lambda p=v_path_val: handle_select_example(p),
|
| inputs=None,
|
| outputs=[current_video, upload_file, record_yourself_btn, video_info_row, video_name_md, submit_btn, translation_card],
|
| js=scroll_top_js,
|
| )
|
|
|
|
|
| restart_btn.click(
|
| fn=handle_remove_video,
|
| inputs=None,
|
| outputs=[current_video, upload_file, record_yourself_btn, video_info_row, video_name_md, submit_btn, translation_card],
|
| js="() => { window.location.href = window.location.href.split('#')[0]; }"
|
| )
|
|
|
| open_record_modal_js = "() => { window.scrollTo({ top: 0, behavior: 'smooth' }); const rf = document.getElementById('record-footer-row') || document.querySelector('.record-footer-row'); if (rf) { rf.classList.remove('has-recording'); rf.style.setProperty('display', 'none', 'important'); } }"
|
| close_record_modal_js = "() => { const rf = document.getElementById('record-footer-row') || document.querySelector('.record-footer-row'); if (rf) { rf.classList.remove('has-recording'); rf.style.setProperty('display', 'none', 'important'); } }"
|
|
|
|
|
| record_yourself_btn.click(
|
| fn=open_record_modal,
|
| inputs=None,
|
| outputs=[record_modal, record_video],
|
| js=open_record_modal_js,
|
| )
|
|
|
| record_close_top.click(
|
| fn=close_record_modal,
|
| inputs=None,
|
| outputs=[record_modal, record_video],
|
| js=close_record_modal_js,
|
| )
|
|
|
| record_direct_btn.click(
|
| fn=save_record_direct,
|
| inputs=record_video,
|
| outputs=[record_modal, record_video, current_video, upload_file, record_yourself_btn, video_info_row, video_name_md, submit_btn, translation_card],
|
| )
|
|
|
| record_trim_btn.click(
|
| fn=save_record_and_open_trim,
|
| inputs=record_video,
|
| outputs=[record_modal, record_video, current_video, upload_file, record_yourself_btn, video_info_row, video_name_md, submit_btn, translation_card, preview_modal, preview_video],
|
| )
|
|
|
|
|
| preview_btn.click(
|
| fn=open_preview_modal,
|
| inputs=current_video,
|
| outputs=[preview_modal, preview_video],
|
| js=scroll_top_js,
|
| )
|
|
|
| for btn in [preview_close_top, preview_close_bottom]:
|
| btn.click(
|
| fn=close_preview_modal,
|
| inputs=None,
|
| outputs=preview_modal,
|
| )
|
|
|
| preview_save_btn.click(
|
| fn=save_preview_and_trim,
|
| inputs=[preview_video, current_video],
|
| outputs=[preview_modal, current_video, video_name_md],
|
| )
|
|
|
|
|
| submit_btn.click(
|
| fn=start_translating_ui,
|
| inputs=None,
|
| outputs=[translation_card, translation_display, show_keypoints_btn, keypoints_video_state],
|
| ).then(
|
| fn=finish_translating,
|
| inputs=current_video,
|
| outputs=[translation_display, show_keypoints_btn, keypoints_video_state],
|
| )
|
|
|
|
|
| show_keypoints_btn.click(
|
| fn=open_keypoints_modal,
|
| inputs=keypoints_video_state,
|
| outputs=[keypoints_modal, keypoints_modal_video],
|
| js=scroll_top_js,
|
| )
|
|
|
|
|
| keypoints_close_top.click(
|
| fn=close_keypoints_modal,
|
| inputs=None,
|
| outputs=[keypoints_modal, keypoints_modal_video],
|
| )
|
| keypoints_close_bottom.click(
|
| fn=close_keypoints_modal,
|
| inputs=None,
|
| outputs=[keypoints_modal, keypoints_modal_video],
|
| )
|
|
|
|
|
|
|
| if __name__ == "__main__":
|
| app.queue(default_concurrency_limit=1).launch()
|
|
|
