Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Display</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 50px auto; | |
| padding: 0 20px; | |
| } | |
| .header { | |
| background-color: #e9ecef; | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .translation-form { | |
| background-color: white; | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| margin-bottom: 30px; | |
| } | |
| .instruction-box { | |
| background-color: #e7f3ff; | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| } | |
| .video-container { | |
| display: flex; | |
| justify-content: center; | |
| margin: 30px 0; | |
| } | |
| .result-box { | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 20px; | |
| color: #6c757d; | |
| } | |
| .example-text { | |
| color: #0d6efd; | |
| font-style: italic; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1 class="mb-3">Text to American Sign Language Translator</h1> | |
| <p class="text-muted">Translate text to ASL with proper noun handling</p> | |
| </div> | |
| <div class="translation-form"> | |
| <div class="instruction-box"> | |
| <h5>How to use:</h5> | |
| <p>For proper nouns (names, places, etc.), enclose them in single quotes (')</p> | |
| <p>Examples:</p> | |
| <ul> | |
| <li><span class="example-text">'한국'은 아름다운 나라입니다.</span></li> | |
| <li><span class="example-text">'John'이 'New York'에 갑니다.</span></li> | |
| </ul> | |
| </div> | |
| <form action="{{ url_for('result') }}" method="post"> | |
| <div class="mb-3"> | |
| <label for="inputSentence" class="form-label">Enter text to translate:</label> | |
| <input type="text" | |
| class="form-control" | |
| id="inputSentence" | |
| name="inputSentence" | |
| placeholder="Enter your text here..." | |
| required> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Translate</button> | |
| </form> | |
| </div> | |
| {% if sentence %} | |
| <div class="result-box"> | |
| <h4>Translation Results</h4> | |
| <div class="row mb-3"> | |
| <div class="col-4">Original Text:</div> | |
| <div class="col-8">{{ sentence }}</div> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-4">Gloss Before Synonyms:</div> | |
| <div class="col-8">{{ gloss_sentence_before_synonym }}</div> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-4">Gloss After Synonyms:</div> | |
| <div class="col-8">{{ gloss_sentence_after_synonym }}</div> | |
| </div> | |
| </div> | |
| <div class="video-container"> | |
| <img id="stream" | |
| data-gloss-sentence="{{ gloss_sentence_after_synonym }}" | |
| src="{{ url_for('video_feed', gloss_sentence_before_synonym=gloss_sentence_before_synonym, gloss_sentence_after_synonym=gloss_sentence_after_synonym) }}" | |
| alt="Sign language video stream" | |
| class="rounded"> | |
| </div> | |
| {% endif %} | |
| <div class="text-center mt-4"> | |
| <button onclick="window.history.back()" class="btn btn-secondary">Back</button> | |
| </div> | |
| <div class="footer"> | |
| <p>© 2024 Sign Language Translator. All rights reserved.</p> | |
| </div> | |
| </div> | |
| <script> | |
| var refresh = true; | |
| function refreshImage() { | |
| if (!refresh) return; | |
| var img = document.getElementById('stream'); | |
| var gloss_sentence_to_display = img.getAttribute('data-gloss-sentence'); | |
| img.src = "{{ url_for('video_feed') }}?gloss_sentence_to_display=" + | |
| encodeURIComponent(gloss_sentence_to_display) + "&t=" + new Date().getTime(); | |
| setTimeout(refreshImage, 40); | |
| } | |
| refreshImage(); | |
| </script> | |
| </body> | |
| </html> |