Spaces:
Sleeping
Sleeping
File size: 5,117 Bytes
c9f9492 f8b7d96 c9f9492 f8b7d96 a602f57 f8b7d96 c9f9492 f8b7d96 c9f9492 f8b7d96 c9f9492 f8b7d96 c9f9492 f8b7d96 0fa0230 f8b7d96 0fa0230 c115d30 c9f9492 f8b7d96 c9f9492 a602f57 c9f9492 0fa0230 c9f9492 c115d30 f8b7d96 c115d30 c9f9492 f8b7d96 c9f9492 |
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 |
<!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>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}
.container {
margin: 50px auto;
width: 80%;
}
.header {
background-color: #e9ecef;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
}
.header h1 {
font-size: 24px;
margin: 0;
}
.video-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
video {
width: 640px;
height: 480px;
border: 2px solid #dee2e6;
border-radius: 5px;
}
.footer {
font-size: 14px;
color: #6c757d;
}
</style>
</head>
<body>
<div class="container">
<!--
<div class="header clearfix">
<h3 class="text-muted"> American Sign Langage Translation - Flask Demo</h3>
</div>
-->
<div class="jumbotron">
<h1>Text to American Sign Langage translator - Flask Demo</h1>
</div>
<form action="{{ url_for('result') }}" method="post">
<div class="form-group row">
<label for="inputSentence" class="col-sm-3 col-form-label">Put your text to translate here</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputSentence" name="inputSentence" placeholder="text to translate">
</div>
</div>
<div class="form-group row">
<div class="col-sm-5">
<button type="submit" class="btn btn-primary">Translate</button>
</div>
</div>
</form>
<div class="container">
<div class="row">
<div class="col-8" style="background-color: lightblue;">
Text to translate
</div>
<div class="col-4" style="background-color: lightgreen;">
<div id="output" class="border p-2">
{{ sentence }}
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-8" style="background-color: lightblue;">
Text translation in gloss before synonyms:
</div>
<div class="col-4" style="background-color: lightgreen;">
<div id="output" class="border p-2">
{{ gloss_sentence_before_synonym }}
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-8" style="background-color: lightblue;">
Text translation in gloss after synonyms:
</div>
<div class="col-4" style="background-color: lightgreen;">
<div id="output" class="border p-2">
{{ gloss_sentence_after_synonym }}
</div>
</div>
</div>
</div>
<div class="header">
<h3> Sign Langage Translation </h3>
</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, loss_sentence_after_synonym=gloss_sentence_after_synonym) }}" alt="Streaming video">
</div>
<script>
// Variable globale pour contrôler le rafraîchissement de l'image
var refresh = true;
// Fonction pour rafraîchir l'image toutes les 40ms (25 FPS)
function refreshImage() {
if (!refresh) return; // Arrête le rafraîchissement si la variable est définie sur false
var img = document.getElementById('stream');
var gloss_sentence_to_display = img.getAttribute('data-gloss-sentence'); // Récupère la phrase depuis l'attribut data-sentence
img.src = "{{ url_for('video_feed') }}" + "?gloss_sentence_to_display=" + encodeURIComponent(gloss_sentence_to_display) + "&t=" + new Date().getTime(); // Ajoute un paramètre de requête unique pour forcer le rafraîchissement de l'image
setTimeout(refreshImage, 40); // Appel récursif pour rafraîchir l'image
}
// Démarrer le rafraîchissement de l'image
refreshImage();
</script>
<button onclick="window.history.back()">Back</button>
<div class="footer">
© Sign Language Project
</div>
</div>
</body>
</html>
|