-
Notifications
You must be signed in to change notification settings - Fork 1
/
solution.html
373 lines (293 loc) · 17.6 KB
/
solution.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
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Fossilized Containers</title>
<link rel="icon" href="img/small_logo.png">
<link href="stylesheets/external/bootstrap.min.css" rel="stylesheet">
<link href="stylesheets/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<img class="navbar-img" src="img/small_logo.png" />
<a class="navbar-brand" href="index.html">Fossilized Containers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav mr-right">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="team.html">The Team</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="details.html">Project Details</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="solution.html">Our Solution <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="deliverables.html">Deliverables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/watch?v=sbh140Ct-BA" target="_blank">Demo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/FossilizedContainers" target="_blank">Codebase</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<div class="container">
<div class="construction-body">
<h1 class="display-2">
Our Solution
</h1>
<!-- Navbar for sections -->
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#key-features">Key Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#arch">Overall Solution</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#technologies">Technologies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
</ul>
<!-- Call to Action-->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body">
<p class="text-white m-0">We are creating a command line interface tool to help scientists containerize their code.</p>
</div>
</div>
<h1 id="key-features" class="display-4"> Key Features </h1>
<div class="row mb-5 mt-5">
<div class="col-md-6 align-items-center my-auto">
<h2>presto create</h2>
<p class="text-center">
Create Dockerfiles to create containers in one step. Dockerfiles are what Docker uses to start building containers. The command only asks for the programming language of the files that the main code is in.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/features/create.gif" alt="example showing CLI usage">
</div>
</div>
<div class="row mb-5 mt-5">
<div class="col-md-6 align-items-center my-auto">
<h2>presto build</h2>
<p class="text-center">
Takes in the Dockerfiles and creates an image. An image is the object Docker will use to create containers.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/features/build.gif" alt="example showing CLI usage">
</div>
</div>
<div class="row mb-5 mt-5">
<div class="col-md-6 align-items-center my-auto">
<h2>presto run</h2>
<p class="text-center">
The tool will start running the container and wait for it to finish and send back the results.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/features/run2-1.gif" alt="example showing CLI usage">
</div>
</div>
<div class="row mb-5 mt-5">
<div class="col-md-6 align-items-center my-auto">
<h2>View your output easily</h2>
<p class="text-center">
Results are returned in the form of a zip file. All files inside are easily viewable once uncompressed.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/features/output2.gif" alt="example showing CLI usage">
</div>
</div>
<div class="row mb-5 mt-5">
<div class="col-md-6 align-items-center my-auto">
<h2>presto upload</h2>
<p class="text-center">
The tool will upload an image once the user verifies it is working correctly. By uploading the image, any user can now download it and run their own containers without hassle.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/features/upload.gif" alt="example showing CLI usage">
</div>
</div>
<h1 id="arch" class="display-4"> Overall Solution </h1>
<div class="row mb-5 mt-5">
<div class="col-md-6 align-items-center my-auto">
<h2>Fossilized Controller</h2>
<p class="text-justify">
This tool, which we call the Fossilized Controller, will provide
a user interface to help create, run, and manage PReSto containers.
The main function of the Fossilized Controller is to guide scientists through the process of
creating their container. The purpose of our tool is that instead of having to learn about containerization, scientists can use our
tool to create an easy way to share their climate models. Ample documentation will be provided to the scientists so that they can have a
good understanding of how to use the tool. The benefits of using our tool is that instead of having to learn Docker, they simply have to
run our commands that create the containers for the scientists.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/manage_containers.png" alt="example showing CLI usage">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6 align-items-center my-auto">
<h2>PReSto Containers</h2>
<p class="text-justify">
Our solution to help paleoclimatologists is a tool to facilitate the containerization of their climate reconstruction programs into what we call a PReSto Container.
This is a regular Docker container but has components special to the Fossilized Controller. The first component of a PReSto container is the climate model program
within it. The scientist only has to pass any needed required parameters through the Fossilized Controller to the PReSto container. From there, the container can also
return output files from the model. The user will have minimal involvement for the creation of the PReSto container aside from some prompts in the beginning.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/container.png" alt="a PReSto Container is a Docker container with a climate model">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6 align-items-center my-auto">
<h2>System Architecture</h2>
<p class="text-justify">
Everything comes together to create our entire system.
From there, scientists can use the Fossilized Controller to send files to the container as well as receive output files. Climate reconstruction programs are written in a number of different languages, mainly Python, R, and
Matlab,
and our tool should work for all of them. To fulfill this, the communication between the Fossilized Controller and PReSto Containers doesn’t use any programming language specific features - it uses an HTTP connection. This
allows
us to ignore the contents of the container as long as it properly communicates with an HTTP client in our Controller.
In order to achieve this, we are creating adapter libraries. Scientists need to add a few lines of code provided to them that will create a local server within the container so that the Fossilized Container can
establish a connection to it.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/diagram.png" alt="project diagram">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6 align-items-center my-auto">
<h2>External Services</h2>
<p class="text-justify">
The controller will be downloaded through our Github repository, and once installed can be used to start the containerization process and eventually upload the container to
a hosting service, such as Dockerhub. To aid in the use of our tool we also plan to host documentation on a website containing all of the features as well as technical internals, making it simple to use.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img src="img/external_services.png" alt="Diagram showing external services">
</div>
</div>
<h1 id="technologies" class="display-4">
Technologies
</h1>
<div class="row mb-5">
<div class="col-md-6">
<h2>Docker</h2>
<p class="text-justify">
Docker is the tool that creates containers. There are other tools that also create containers but Docker is the most popular tool among them. Our client has also
specified that they want to use Docker. The most beneficial part about Docker to us is the Docker Software Developer Kits (SDKS) that allows us to communicate with the
Docker daemon. The SDK is what will allow us to create tools that can essentially run Docker commands.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img class="tech-images" src="img/techlogos/docker.png" alt="Docker Logo">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6">
<h2>Python</h2>
<p class="text-justify">
We have decided to use Python as our language of choice for the CLI since it is the language we are most comfortable with. Scientists at our client's lab
are also familiar with Python so creating the tool in it will allow the lab to easily add new features to the tool past capstone.
One of our adapter libraries also have to be in Python.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img class="tech-images" src="img/techlogos/python.png" alt="Python Logo">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6">
<h2>R</h2>
<p class="text-justify">
R is a common language used when creating climate models so we are creating an adapter library for the language.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img class="tech-images" src="img/techlogos/r.png" alt="R Logo">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6">
<h2>HTTP</h2>
<p class="text-justify">
We are going to use HTTP for communicating between the Fossilized Controller and PReSto Containers. HTTP connections provide good security and doesn't require
the controller to be running on the same filesystem as PReSto Containers.
</p>
</div>
<div class="col-md-6 align-items-center my-auto ">
<img class="tech-images" src="img/techlogos/http.png" alt="HTTP Logo">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6">
<h2>Flask</h2>
<p class="text-justify">
Flask is a microframework for building HTTP servers quickly in Python.
Since it is a microframework, its compactness won’t inflate container sizes and makes it very simple to build an HTTP server that sends and receives files.
Flask
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img class="tech-images" src="img/techlogos/flask.png" alt="Flask Logo">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6">
<h2>httpuv</h2>
<p class="text-justify">
Httpuv is a package available for the R programming language to create servers. It is easy to use and holds all the required components for
creating an HTTP connection and sending files through it.
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img class="tech-images" src="img/techlogos/box.png" alt="Package">
</div>
</div>
<div class="row mb-5">
<div class="col-md-6">
<h2>LiPDverse</h2>
<p class="text-justify">
LiPDverse is a library available in Python and R that provides functionality for interacting with LiPD files. We are going to be using it so that we
can properly work with the different files associated with climate models
</p>
</div>
<div class="col-md-6 align-items-center my-auto">
<img class="tech-images" src="img/techlogos/lipd.png" alt="LiPD Logo">
</div>
</div>
<h1 id="schedule" class="display-4"> Schedule </h1>
<img src="img/schedule.png" alt="Gantt Chart">
<p class="text-center">
We have remained on track for the Spring semester and have finished major development of the Fossilized Controller.
</p>
</div>
</div>
</main>
<!-- Bootstrap scripts -->
<script src="scripts/jquery-3.3.1.slim.min.js"></script>
<script src="scripts/popper.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/dropdown.js"></script>
</body>
</html>