ginipick commited on
Commit
0426e08
·
verified ·
1 Parent(s): 836b0d2

Update src/templates/result.html

Browse files
Files changed (1) hide show
  1. src/templates/result.html +31 -23
src/templates/result.html CHANGED
@@ -24,33 +24,42 @@
24
  </div>
25
  </div>
26
  </nav>
27
-
28
  <main class="container mx-auto px-6 py-8">
29
  <div class="result-box rounded-xl shadow-2xl p-8 mb-8">
30
  <h2 class="text-2xl font-bold mb-6 text-gray-800">Translation Results / 번역 결과</h2>
31
 
32
- <div class="space-y-6">
33
- <div class="p-4 bg-white/50 rounded-lg">
34
- <h3 class="font-medium text-gray-700 mb-2">Original Text / 원문</h3>
35
- <p class="text-lg">{{ original_sentence }}</p>
36
- </div>
37
-
38
- <div class="p-4 bg-white/50 rounded-lg">
39
- <h3 class="font-medium text-gray-700 mb-2">English Translation / 영어 번역</h3>
40
- <p class="text-lg">{{ english_translation }}</p>
41
- </div>
42
-
43
- <div class="p-4 bg-white/50 rounded-lg">
44
- <h3 class="font-medium text-gray-700 mb-2">Sign Language Gloss / 수화 표기</h3>
45
- <p class="text-lg">{{ gloss_sentence_after_synonym }}</p>
 
46
  </div>
47
-
48
- <div class="p-4 bg-white/50 rounded-lg">
49
- <h3 class="font-medium text-gray-700 mb-2">Sign Language Video / 수화 영상</h3>
50
- <div class="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
51
- <img src="{{ url_for('video_feed', gloss_sentence_to_display=gloss_sentence_after_synonym) }}"
52
- alt="Sign language video stream"
53
- class="w-full h-full object-contain">
 
 
 
 
 
 
 
 
 
54
  </div>
55
  </div>
56
  </div>
@@ -63,7 +72,6 @@
63
  </div>
64
  </div>
65
  </main>
66
-
67
  <footer class="fixed bottom-0 w-full bg-white/80 backdrop-blur-md py-4">
68
  <div class="container mx-auto px-6 text-center text-gray-600">
69
  &copy; 2025 {{ title }}. All rights reserved.
 
24
  </div>
25
  </div>
26
  </nav>
 
27
  <main class="container mx-auto px-6 py-8">
28
  <div class="result-box rounded-xl shadow-2xl p-8 mb-8">
29
  <h2 class="text-2xl font-bold mb-6 text-gray-800">Translation Results / 번역 결과</h2>
30
 
31
+ <div class="flex">
32
+ <!-- 좌측: 번역 결과 -->
33
+ <div class="w-1/2 pr-4 space-y-6">
34
+ <div class="p-4 bg-white/50 rounded-lg">
35
+ <h3 class="font-medium text-gray-700 mb-2">Original Text / 원문</h3>
36
+ <p class="text-lg">{{ original_sentence }}</p>
37
+ </div>
38
+ <div class="p-4 bg-white/50 rounded-lg">
39
+ <h3 class="font-medium text-gray-700 mb-2">English Translation / 영어 번역</h3>
40
+ <p class="text-lg">{{ english_translation }}</p>
41
+ </div>
42
+ <div class="p-4 bg-white/50 rounded-lg">
43
+ <h3 class="font-medium text-gray-700 mb-2">Sign Language Gloss / 수화 표기</h3>
44
+ <p class="text-lg">{{ gloss_sentence_after_synonym }}</p>
45
+ </div>
46
  </div>
47
+
48
+ <!-- 우측: 비디오 -->
49
+ <div class="w-1/2 pl-4">
50
+ <div class="p-4 bg-white/50 rounded-lg">
51
+ <h3 class="font-medium text-gray-700 mb-2">Sign Language Video / 수화 영상</h3>
52
+ <div class="bg-gray-100 rounded-lg overflow-hidden">
53
+ <img src="{{ url_for('video_feed', gloss_sentence_to_display=gloss_sentence_after_synonym) }}"
54
+ alt="Sign language video stream"
55
+ style="width: 288px; height: 192px; margin: 0 auto;">
56
+ </div>
57
+ <div class="mt-4 text-center">
58
+ <a href="{{ url_for('download_video', gloss_sentence=gloss_sentence_after_synonym) }}"
59
+ class="bg-green-600 text-white py-2 px-4 rounded hover:bg-green-700 transition-colors">
60
+ Download Video
61
+ </a>
62
+ </div>
63
  </div>
64
  </div>
65
  </div>
 
72
  </div>
73
  </div>
74
  </main>
 
75
  <footer class="fixed bottom-0 w-full bg-white/80 backdrop-blur-md py-4">
76
  <div class="container mx-auto px-6 text-center text-gray-600">
77
  &copy; 2025 {{ title }}. All rights reserved.