-
Notifications
You must be signed in to change notification settings - Fork 0
/
msc_project_template_html_version.html
304 lines (259 loc) · 13.3 KB
/
msc_project_template_html_version.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
---
title: "Sampling Based MPC for Motion Planning of Autonomous Vehicles"
authors:
- name: "John Doe"
url: "https://andreumatoses.github.io/"
superscript: "*1"
- name: "Luzia Knödler"
url: "https://andreumatoses.github.io/"
superscript: "1"
- name: "Ludwig van Beethoven"
url: "https://andreumatoses.github.io/"
superscript: "†"
affiliations:
- name: "Equal contribution"
superscript: "*"
- name: "TU Delft"
superscript: "1"
url: "https://tudelft.nl"
- name: "Wien Opera House"
superscript: "†"
end_date: 2022-01-01 # end date if ended, approximated if not sure. Just for display purposes and ordering.
# This is the short project description, displayed in the project's card"
description: "This project explores the use of Model Predictive Path Integral (MPPI) control algorithm to enable autonomous robots to navigate complex environments. MPPI is a sampling-based control method that combines path planning and control into a single optimization problem. By iteratively sampling and optimizing trajectories, the algorithm generates control inputs that minimize a cost function while satisfying system dynamics and constraints. The project aims to implement and evaluate the performance of MPPI on a robot platform, showcasing its effectiveness in real-world scenarios."
cover_image: /assets/images/msc_projects/msc_project_template/jackal.jpg # Image displayed in the project's card, make it aspect ratio 1x1 (square) for best results, and keep it a reasonable size (like 1-2MB). Can also be a gif
links: # If you have other website for the project, github repos, datasets, etc. put it here. You can also add an icon from https://icons.getbootstrap.com/
- name: Paper
icon: bi-file-earmark-pdf
url: "/"
- name: arXiv
url: "/"
- name: Code
icon: bi-github
url: "/"
- name: Video
icon: bi-youtube
url: "/"
---
<!-- THESE IS THE HEAD, WHERE ALL THE BASIC CSS , JS etc, IS LOADED-->
<!-- ONLY HERE SO YOU CAN RENDER IT LOCALLY -->
<!-- ONCE DONE, DELETE FROM HERE TO THE NEXT DELETE COMMENT !!!! -->
<!DOCTYPE html>
<html lang="en-us" class="h-100">
<head>
<title>
Just some title
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Stylesheets for Bootstrap 5 and font -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
<!-- for mathjax support -->
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
</head>
<body class="d-flex flex-column h-100">
<div class="container-xl">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="body mt-3">
<div class="paper-body mt-5 px-0 px-lg-5">
<!-- DELETE UNTIL HERE. -->
<!-- YOU NEED TO ALSO DELETE THE CLOSING OF THE BODY, BOTTOM OF THE DOCUMENT-->
<p>
All the content in the front matter will be rendered automatically.
In this local version, it just shows the content of the front matter as text so ignore it,
just make sure you fill the front matter with all the info correctly.
You can see an example <a href="https://andreumatoses.github.io/amr-website-new/msc_projects_finished/msc-project-template">here</a>
</p>
<div class="teaser-video d-flex justify-content-center mb-3">
<div class="ratio ratio-16x9">
<video id="teaser" autoplay="" muted="" controls="" loop="" playsinline="">
<source
src="/assets/images/msc_projects/YY_my-title/sample_video.mp4"
type="video/mp4">
</video>
</div>
</div>
<section id="abstract">
<h2>Summary of the Work</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat consequatur libero omnis dolore
voluptatem.
Sequi nesciunt veniam, ea laboriosam quas corporis quae nobis esse
doloremque in aperiam excepturi dignissimos quis? Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Sequi
repudiandae vero aliquid molestias at consequatur tempore autem
ullam illo provident?
</p>
<div class="single-image d-flex justify-content-center mb-3">
<img src="https://www.migmawei.ca/system/wp-content/uploads/2017/04/Placeholder_16_9-1.png" class="img-fluid" width="600" alt="lab">
</div>
<p>This is just a place holder for an image, centered and of width of 600px. If the screen becomes smaller, it resizes automatically</p>
<div class="youtube-video d-flex justify-content-center mb-3">
<iframe width="600" height="350" src="https://www.youtube.com/embed/jaJBrSecDcM?si=C4sacP5KqmFNzvcL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<!-- <iframe src="https://www.youtube.com/embed/?listType=playlist&list=PLOksz-MTFhN2T4gYQlLHR2lGCdC0BDkJw&" allowfullscreen></iframe> -->
</div>
<p>
You can embed youtube videos like this. Just copy the embed code from youtube (press share on a video then embed) and paste it here.
</p>
</section>
<section id="showcase-1">
<h2>Showcase 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat consequatur libero omnis dolore
voluptatem.
Sequi nesciunt veniam, ea laboriosam quas corporis quae nobis esse
doloremque in aperiam excepturi dignissimos quis? Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Sequi
repudiandae vero aliquid molestias at consequatur tempore autem
ullam illo provident?
</p>
<!-- This basically puts images in a grid of X columns. row-cols-md-X, where X means how many columns. md means until the screen is smaller than medium (ipad). Change X for 2,3,4,6,8,12 -->
<div class="image-grid text-center mb-2">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 g-2">
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/hackathon-team.jpg"
alt="Image 1">
</div>
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/lab-hackathon.jpg"
alt="Image 2">
</div>
</div>
</div>
<p>
Some code that explains something important. Use the highlight tag to highlight code. You can use
<code>inline code</code>. NOTE: code blocks will not render correctly in the local template.
</p>
<div class="code-block">
{% highlight python linenos %}
import torch
import torch.nn as nn
class VAE(nn.Module):
def __init__(self, input_dim, hidden_dim, latent_dim):
super(VAE, self).__init__()
self.encoder = nn.Sequential(
nn.Linear(input_dim, hidden_dim),
nn.ReLU(),
nn.Linear(hidden_dim, latent_dim * 2) # Output mean and log variance
)
return reconstructed_x, mu, log_var
{% endhighlight %}
</div>
<p>
Some cool math equations here. You can just use math like in latex e.g $x^2$ or $\alpha =
\int_{\beta}^\gamma 1 \;
dt$. For inline, use <code>$ ... $</code>, for
block, use <code>\[ ... \]</code>.
</p>
<div class="math-block">
$$\begin{aligned}
\dot{x} &= \sigma(y-x) \\
\dot{y} &= \rho x - y - xz \\
\dot{z} &= -\beta z + xy
\end{aligned}$$
</div>
</section>
<section id="showcase-2">
<h2>Showcase 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat consequatur libero omnis dolore
voluptatem.
Sequi nesciunt veniam, ea laboriosam quas corporis quae nobis esse
doloremque in aperiam excepturi dignissimos quis? Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Sequi
repudiandae vero aliquid molestias at consequatur tempore autem
ullam illo provident?
</p>
<!-- This basically puts images in a grid. row-cols-md-X, where X means how many columns. md means until the screen is smaller than medium (ipad). Change X for 2,3,4,6,8,12 -->
<div class="image-grid text-center mb-2">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-2">
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/hackathon-team.jpg"
alt="Image 1">
</div>
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/dingo_manipulator.png"
alt="Image 1">
</div>
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/hackathon-team.jpg"
alt="Image 1">
</div>
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/hackathon-team.jpg"
alt="Image 1">
</div>
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/dingo_manipulator.png"
alt="Image 1">
</div>
<div class="col">
<img class="img-fluid object-fit-contain"
src="/assets/images/msc_projects/YY_my-title/hackathon-team.jpg"
alt="Image 1">
</div>
</div>
</div>
</section>
<section id="conclusions">
<h2>Conclusions</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat consequatur libero omnis dolore
voluptatem.
Sequi nesciunt veniam, ea laboriosam quas corporis quae nobis esse
doloremque in aperiam excepturi dignissimos quis? Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Sequi
repudiandae vero aliquid molestias at consequatur tempore autem
ullam illo provident?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit optio qui illo quo nam adipisci dolorum
maiores
molestias. Maxime hic nihil laboriosam harum, dignissimos ex minus,
veritatis nobis porro aspernatur laborum facere ea voluptate ipsa. Minima adipisci quo tenetur quod.
</p>
</section>
<!-- DELETE THIS TOO FROM HERE -->
<hr>
<div class="d-flex justify-content-center mt-5">
<a href="{{ '/msc_projects_finished' | relative_url }}" class="btn btn-dark rounded-pill"><i
class="bi bi-arrow-left"></i> Back to Master Thesis Projects</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS for Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
<!-- DELETE UNTIL HERE -->