-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathintroduction.html
118 lines (86 loc) · 6.53 KB
/
introduction.html
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
<!DOCTYPE HTML>
<html>
<head>
<title>Automatic Translations</title>
<meta charset="utf-8" />
<link rel="icon" href="./images/icon.png" sizes="100x100" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<h1>Introduction</h1>
<p>Automatic Translations</p>
</header>
<!-- Main -->
<div id="main">
<!-- Content -->
<section id="content" class="main">
<span class="image main"><img src="images/Top1.png" alt="" /></span>
<h2>About Project</h2>
<p>This project is developed as a final presentation of 9 months of fundamentals at Holberton School, where we implement different mechanics to solve a specific problem regarding Design (architecture) and programming..</p>
<p>For this project we were working on a Skillshare client need, where we were for several sessions sharing and developing the product to the satisfaction of the client.</p>
<p>This project has a great purpose for the three members of the ZOMBLIECLI team (Carlos García, Leonardo Calderón and Iván Lasso), which allows them to put into practice their skills from what they have learned in fundamentals and to be able to be used as a productive sample in our personal portfolio.</p>
<h2>About Product</h2>
<p>The main objective of the project is to generate the translation of an existing transcription, which belongs to a video course on the Skillshare.com platform, by default the transcription is in the original language of the video (English), but will give the user the option to select a language and automatically generate the translation for transcription. And with this same transcript you can navigate between the subtitles and tracks of the video.</p>
<h2>MVP Architecture</h2>
<p style="text-align: center;"><img src="images/Architecture.jpg" alt="" style="padding-left: 12px; padding-right: 12px;"></p>
<h2>Technologies</h2>
<p style="text-align: center;">
<img src="images/ft.fw.png" width="313px" height="289px" alt="" style="padding-left: 12px; padding-right: 12px;"/>
<img src="images/ap.fw.png" width="313px" height="289px" alt="" style="padding-left: 12px; padding-right: 12px;"/>
<img src="images/bt.fw.png" width="313px" height="289px" alt="" style="padding-left: 12px; padding-right: 12px;"/>
</p>
<section>
<h2>Program Overview</h2>
<ol>
<li>The video is in native language (English), and it is stored in an S3 (Amazon simple storage service).</li>
<li>The transcript of the video is in the native language (English), and it is stored in an S3 (Amazon simple storage service).</li>
<li>The user from the Frontend will be able to define the language in which he wants to see the transcript using a language selector. (For this demo version, we only use 5 languages, but many more can be used).</li>
<li>The transcript has a link to the video tracks, which facilitates the interaction between its different sections, what is reproduced in the video and what is read in the transcript.</li>
<li>The transcript has two presentations, a stardard from each subtitle with its start time, and a paragraph where the subtitles are grouped into intervals according to the transcript.</li>
<li>The aesthetics and some elements of the demo are inspired by the skillshare.com platform, who is the client, and the integration is expected to be using that view.</li>
<li>The API that the Fronted communicates with the Backend is developed with another AWS technology called API Gateway, which manages the ideal integration for this demo.</li>
<li>In the Backend another AWS technology called Lambda is implemented, which allows creating functions that process frontend requests (Microservices) and that have been duly linked by the API Gateway. AWS Lambda processes the transcript, sends it to Translate using AWS translate, Stores the Translated Translation in a new File in an S3, which works as a cache type, and returns the response to the part frontend that is consumed by means of a JSON.</li>
<li>Originally The transcript file is an .srt (text) and but in the response it becomes a JSON.</li>
<li>In the Backend another AWS technology called Lambda is implemented, which allows creating functions that process frontend requests (Microservices) and that have been duly linked by the API Gateway. AWS Lambda processes the transcript, sends it to Translate using AWS translate, Stores the Translated Translation in a new File in an S3, which works as a cache type, and returns the response to the part frontend that is consumed by means of a JSON.</li>
</ol>
</section>
<section style="text-align: center;">
<ul class="actions">
<li><a href="index.html" class="button">Go Home</a></li>
</ul>
</section>
</section>
</div>
<!-- Footer -->
<footer id="footer" style="text-align: center;">
<section>
<h2>Automatic Translations</h2>
<p>Translating your transcripts automatically has never been easier
built by ZOMBIECLI Team..</p>
</section>
<section>
<h2>About Project</h2>
<ul class="icons">
<li><a href="https://transcriptions-translations.s3.amazonaws.com/landing/index.html" class="icon solid fas fa-globe alt" target="_blank"><span class="label">Dribbble</span></a></li>
<li><a href="https://transcriptions-translations.s3.amazonaws.com/index.html" class="icon solid fa-rocket alt" target="_blank"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/leocjj/transcriptions-translations-Skillshare" class="icon brands fa-github alt" target="_blank"><span class="label">GitHub</span></a></li>
</ul>
</section>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>