Hugging Face's logo

Spaces:
ginigen
/
Sign-language
Building

App Files Community
Figea commited on
Commit
f8b7d96
·
1 Parent(s): 1ddf87a

Optimize html

Browse files
Files changed (2) hide show
  1. src/main.py +6 -6
  2. src/templates/translate.html +35 -34
src/main.py CHANGED
@@ -21,13 +21,13 @@ def index():
21
  def result():
22
  if request.method == 'POST':
23
  sentence = request.form['inputSentence']
24
- #eng_to_asl_translator = NlpSpacyBaseTranslator(sentence=sentence)
25
- #generated_gloss = eng_to_asl_translator.translate_to_gloss()
26
- #gloss_list_lower = [gloss.lower() for gloss in generated_gloss.split() if gloss.isalnum() ]
27
  #gloss_list = gloss_list_lower
28
- gloss_list = sentence.split()
29
  #print('gloss before synonym:', gloss_list_lower)
30
- #gloss_list = [sp.find_synonyms(gloss, nlp, dict_docs_spacy, dict_2000_tokens) for gloss in gloss_list_lower]
31
  #print('synonym list:', gloss_list)
32
  gloss_sentence = " ".join(gloss_list)
33
  return render_template('translate.html', sentence=sentence, gloss_sentence=gloss_sentence)#gloss_list=gloss_list)
@@ -35,7 +35,7 @@ def result():
35
  @app.route('/video_feed')
36
  def video_feed():
37
  #dataset, vocabulary_list = dg.load_data()
38
- sentence = request.args.get('gloss_sentence', '')
39
  gloss_list = sentence.split()
40
  return Response(dg.generate_video(gloss_list, dataset, vocabulary_list), mimetype='multipart/x-mixed-replace; boundary=frame')
41
 
 
21
  def result():
22
  if request.method == 'POST':
23
  sentence = request.form['inputSentence']
24
+ eng_to_asl_translator = NlpSpacyBaseTranslator(sentence=sentence)
25
+ generated_gloss = eng_to_asl_translator.translate_to_gloss()
26
+ gloss_list_lower = [gloss.lower() for gloss in generated_gloss.split() if gloss.isalnum() ]
27
  #gloss_list = gloss_list_lower
28
+ #gloss_list = sentence.split()
29
  #print('gloss before synonym:', gloss_list_lower)
30
+ gloss_list = [sp.find_synonyms(gloss, nlp, dict_docs_spacy, dict_2000_tokens) for gloss in gloss_list_lower]
31
  #print('synonym list:', gloss_list)
32
  gloss_sentence = " ".join(gloss_list)
33
  return render_template('translate.html', sentence=sentence, gloss_sentence=gloss_sentence)#gloss_list=gloss_list)
 
35
  @app.route('/video_feed')
36
  def video_feed():
37
  #dataset, vocabulary_list = dg.load_data()
38
+ sentence = request.args.get('gloss_sentence_to_display', '')
39
  gloss_list = sentence.split()
40
  return Response(dg.generate_video(gloss_list, dataset, vocabulary_list), mimetype='multipart/x-mixed-replace; boundary=frame')
41
 
src/templates/translate.html CHANGED
@@ -45,52 +45,53 @@
45
  </head>
46
  <body>
47
  <div class="container">
 
48
  <div class="header clearfix">
49
  <h3 class="text-muted"> American Sign Langage Translation - Flask Demo</h3>
50
- </div>
51
-
52
- <div class="jumbotron">
53
- <h1>Text to Sign Langage translator🏵️🌺🌸</h1>
54
- </div>
55
- <form action="{{ url_for('result') }}" method="post">
56
- <div class="form-group row">
57
  <label for="inputSentence" class="col-sm-3 col-form-label">Put your text to translate here</label>
58
  <div class="col-sm-8">
59
- <input type="text" class="form-control" id="inputSentence" name="inputSentence" placeholder="text to translate">
60
  </div>
61
- </div>
62
- <div class="form-group row">
63
  <div class="col-sm-5">
64
  <button type="submit" class="btn btn-primary">Translate</button>
65
  </div>
66
- </div>
67
- </form>
68
- <div class="container">
69
- <div class="row">
70
- <div class="col-8" style="background-color: lightblue;">
71
- This is the text you want to translate
72
- </div>
73
- <div class="col-4" style="background-color: lightgreen;">
74
- <div id="output" class="border p-2">
75
- {{ sentence }}
76
- </div>
77
  </div>
78
  </div>
79
  </div>
80
- <div class="container">
81
- <div class="row">
82
- <div class="col-8" style="background-color: lightblue;">
83
- This is the gloss list we have generated:
84
- </div>
85
- <div class="col-4" style="background-color: lightgreen;">
86
- <div id="output" class="border p-2">
87
- {{ gloss_sentence }}
88
- </div>
89
  </div>
90
  </div>
91
  </div>
 
92
  <div class="header">
93
- <h1>🌸🌺 Sign Langage Translation 🌺🌸</h1>
94
  </div>
95
  <div class="video-container">
96
  <img id="stream" data-gloss-sentence="{{ gloss_sentence }}" src="{{ url_for('video_feed', gloss_sentence=gloss_sentence) }}" alt="Streaming video">
@@ -102,8 +103,8 @@
102
  function refreshImage() {
103
  if (!refresh) return; // Arrête le rafraîchissement si la variable est définie sur false
104
  var img = document.getElementById('stream');
105
- var gloss_sentence = img.getAttribute('data-gloss-sentence'); // Récupère la phrase depuis l'attribut data-sentence
106
- img.src = "{{ url_for('video_feed') }}" + "?gloss_sentence=" + encodeURIComponent(gloss_sentence) + "&t=" + new Date().getTime(); // Ajoute un paramètre de requête unique pour forcer le rafraîchissement de l'image
107
  setTimeout(refreshImage, 40); // Appel récursif pour rafraîchir l'image
108
  }
109
  // Démarrer le rafraîchissement de l'image
@@ -111,7 +112,7 @@
111
  </script>
112
  <button onclick="window.history.back()">Back</button>
113
  <div class="footer">
114
- © team Chaima
115
  </div>
116
  </div>
117
  </body>
 
45
  </head>
46
  <body>
47
  <div class="container">
48
+ <!--
49
  <div class="header clearfix">
50
  <h3 class="text-muted"> American Sign Langage Translation - Flask Demo</h3>
51
+ </div>
52
+ -->
53
+ <div class="jumbotron">
54
+ <h1>Text to American Sign Langage translator - Flask Demo🏵️🌺🌸</h1>
55
+ </div>
56
+ <form action="{{ url_for('result') }}" method="post">
57
+ <div class="form-group row">
58
  <label for="inputSentence" class="col-sm-3 col-form-label">Put your text to translate here</label>
59
  <div class="col-sm-8">
60
+ <input type="text" class="form-control" id="inputSentence" name="inputSentence" placeholder="text to translate">
61
  </div>
62
+ </div>
63
+ <div class="form-group row">
64
  <div class="col-sm-5">
65
  <button type="submit" class="btn btn-primary">Translate</button>
66
  </div>
67
+ </div>
68
+ </form>
69
+ <div class="container">
70
+ <div class="row">
71
+ <div class="col-8" style="background-color: lightblue;">
72
+ Text to translate
73
+ </div>
74
+ <div class="col-4" style="background-color: lightgreen;">
75
+ <div id="output" class="border p-2">
76
+ {{ sentence }}
 
77
  </div>
78
  </div>
79
  </div>
80
+ </div>
81
+ <div class="container">
82
+ <div class="row">
83
+ <div class="col-8" style="background-color: lightblue;">
84
+ Text translation in gloss:
85
+ </div>
86
+ <div class="col-4" style="background-color: lightgreen;">
87
+ <div id="output" class="border p-2">
88
+ {{ gloss_sentence }}
89
  </div>
90
  </div>
91
  </div>
92
+ </div>
93
  <div class="header">
94
+ <h3>🌸🌺 Sign Langage Translation 🌺🌸</h3>
95
  </div>
96
  <div class="video-container">
97
  <img id="stream" data-gloss-sentence="{{ gloss_sentence }}" src="{{ url_for('video_feed', gloss_sentence=gloss_sentence) }}" alt="Streaming video">
 
103
  function refreshImage() {
104
  if (!refresh) return; // Arrête le rafraîchissement si la variable est définie sur false
105
  var img = document.getElementById('stream');
106
+ var gloss_sentence_to_display = img.getAttribute('data-gloss-sentence'); // Récupère la phrase depuis l'attribut data-sentence
107
+ 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
108
  setTimeout(refreshImage, 40); // Appel récursif pour rafraîchir l'image
109
  }
110
  // Démarrer le rafraîchissement de l'image
 
112
  </script>
113
  <button onclick="window.history.back()">Back</button>
114
  <div class="footer">
115
+ © Sign Language Project
116
  </div>
117
  </div>
118
  </body>