Spaces:
Building
Building
File size: 4,979 Bytes
c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 f8b7d96 5e91f68 f8b7d96 5e91f68 c9f9492 5e91f68 f8b7d96 5e91f68 0fa0230 5e91f68 c9f9492 f8b7d96 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 c9f9492 5e91f68 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html>
<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> |