-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
505 lines (488 loc) · 17.9 KB
/
index.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
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- settings -->
<meta name="apple-mobile-web-app-capable" content="no">
<meta name="mobile-web-app-capable" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
<title>SEPIA Framework</title>
<meta name="application-name" content="SEPIA Framework"/>
<meta name="apple-mobile-web-app-title" content="SEPIA Framework">
<meta name="description" content="S.E.P.I.A. - Your own extendable, personal, intelligent assistant.">
<meta name="theme-color" content="#000">
<link rel="icon" sizes="192x192" href="img/icon.png">
<link rel="apple-touch-icon" href="img/icon.png">
<meta property="og:title" content="SEPIA Framework"/>
<meta property="og:determiner" content="the" />
<meta property="og:url" content="https://sepia-framework.github.io/"/>
<meta property="og:description" content="S.E.P.I.A. - Your own extendable, personal, intelligent assistant.">
<meta property="og:image" content="https://sepia-framework.github.io/img/logo.png"/>
<meta property="og:image:width" content="960"/>
<meta property="og:image:height" content="960"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:alt" content="SEPIA Logo"/>
<meta property="og:image" content="https://sepia-framework.github.io/img/icon.png"/>
<meta property="og:image:width" content="192"/>
<meta property="og:image:height" content="192"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:alt" content="SEPIA Icon"/>
<meta property="og:type" content="website"/>
<meta property="og:locale" content="en_GB"/>
<meta property="og:locale:alternate" content="en_US"/>
<!-- search engine stuff -->
<meta name="google-site-verification" content="72lMaa2nPRTRlYjMIBqtUGRBOrGY7TncOVdVI6u6UGA" />
<!-- imports -->
<link rel="stylesheet" href="css/style.css" title='main'>
<style>
html {
background: #222;
}
b {
font-weight: 500;
}
div img {
max-width: 100%;
}
.material-icons {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#site-window {
background: #000;
font-weight: 300;
}
#site-window a {
color: #CEFF1A;
text-decoration: underline;
}
#site-window a span {
color: #fff;
text-decoration: none;
transition: color 0.3s ease-out;
}
#site-window a span:hover {
color: #4bc393;
}
#site-top-bar {
position: fixed;
z-index: 99;
left: 0;
top: 0;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
}
#top-bar-logo {
/*height: 36px;
width: 36px;*/
cursor: pointer;
}
#site-main {
background: #000;
color: #fff;
}
.welcome-box {
position: relative;
height: 600px;
min-height: 100vh;
width: 100%;
}
.welcome-box img {
/*height: 285px;*/
width: 285px;
user-select: none;
}
.welcome-box h1 {
font-size: 48px;
font-weight: 300;
margin-bottom: 0;
}
.welcome-box h2 {
font-size: 24px;
font-weight: 300;
text-align: center;
color: #ceff1a;
}
.welcome-box ul,
#welcome-dynamic-text {
min-width: 178px;
font-size: 28px;
list-style-type: none;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
/*margin: 0 0;*/
margin-right: 8px;
padding: 0;
text-align: center;
}
@media screen and (max-height: 600px) {
.welcome-box {
height: 480px;
}
.welcome-box img {
width: 250px;
}
.welcome-box h1 {
font-size: 32px;
}
.welcome-box h2 {
font-size: 21px;
}
.welcome-box ul,
#welcome-dynamic-text {
font-size: 24px;
}
}
@media screen and (max-height: 500px) {
.welcome-box img {
width: 200px;
}
}
.info-box {
min-height: 150px;
width: 100%;
font-size: 20px;
}
.info-box h3 {
font-size: 24px;
margin: 28px;
font-weight: 400;
text-align: center;
color: #ceff1a;
}
.info-box .text {
text-align: left;
padding: 0 16px;
}
.bottom-box {
min-height: 50px;
width: 100%;
font-size: 20px;
margin-top: 64px;
margin-bottom: 32px;
}
.bottom-box a {
margin: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.bottom-box a img {
width: 30px;
margin: 0 8px;
}
.center-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.center-content p,
.center-content div {
max-width: 100%;
}
.center-content-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.section-common {
width: 100%;
padding: 16px;
margin-bottom: 64px;
text-align: center;
}
.section-common div {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
text-align: center;
}
.section-common div img {
width: 100%;
max-width: 400px;
}
.section-common div.extra-margin-top {
margin: 12px 0;
}
.section-common .more-info {
/*display: inline-block;*/
float: right;
border-radius: 3px;
border: 1px solid #ffffff;
color: #ffffff !important;
text-decoration: none !important;
font-size: 80%;
white-space: nowrap;
vertical-align: middle;
margin: 16px 16px 0 16px;
padding: 2px 4px;
cursor: pointer;
transition: color 0.5s, border-color 0.5s;
}
.section-common .more-info:hover {
border-color: #ceff1a !important;
color: #ceff1a !important;
}
.section-100 div {
padding: 8px 0;
}
.section-100 div img {
max-width: 700px;
}
.section-62-38 div p {
display: inline-block;
}
.section-62-38 .bigger {
width: 61%;
/*max-width: 550px;*/
}
.section-62-38 .smaller {
width: 38%;
}
.section-50-50 div {
width: 49%;
/*max-width: 550px;*/
}
.section-50-50 div p {
display: inline-block;
}
.section-50-50 div img {
max-width: 512px;
}
@media screen and (max-width: 850px) {
.info-box .text {
padding-left: 0;
padding-right: 0;
}
.section-common {
padding: 0;
}
.section-62-38 div,
.section-50-50 div {
width: 100% !important;
padding: 8px 0;
}
}
.topic-keywords {
color: #ceff1a;
/*color: #888;*/
}
.topic-images {
/*transform: scaleX(0.001);*/
transform: scaleX(1.0);
}
#welcome-scroll-indicator {
position: absolute;
right: -16px;
bottom: 48px;
animation: bounce 2s infinite;
cursor: pointer;
}
@keyframes bounce {
0% { transform: translate(0px, 0px); }
50% { transform: translate(0px, 10px); }
100% { transform: translate(0px, 0px); }
}
</style>
</head>
<body>
<div id="site-window">
<!-- Header -->
<div id="site-header" class="hide">
<div id="site-header-content">
<div class="title">Welcome</div>
</div>
</div>
<!-- Top menu -->
<div id="site-top-bar" class="hide">
<div id="site-top-bar-content">
<!--<div id="menu-btn" class="nav-bar-button site-button"><i class="material-icons md-24"></i><span>Menu</span></div>-->
<div id="site-top-bar-dynamic">
<div class="site-top-bar-ele"><a href="https://twitter.com/sepia_fw" target="_blank"><span>News Feed</span></a></div>
<div class="site-top-bar-ele"><img id="top-bar-logo" src="img/icon.png" alt="SEPIA" height="36" width="36"></div>
<div class="site-top-bar-ele"><a href="https://github.com/SEPIA-Framework/sepia-docs#welcome-to-the-documentation-page-for-sepia" target="_blank"><span>Get started</span></a></div>
</div>
<!--<div id="account-btn" class="nav-bar-button site-button"><i class="material-icons md-24"></i><span>Account</span></div>-->
</div>
<div id="site-top-bar-accent"></div>
</div>
<!-- Main -->
<div id="site-main">
<!-- page sections -->
<div id="site-main-views">
<!-- page 1 -->
<div id="page1" class="site-view">
<section class="welcome-box center-content">
<img id="welcome-logo" src="img/logo.png" alt="SEPIA">
<h1>S.E.P.I.A.</h1>
<h2>Your own digital voice-assistant</h2>
<div id="welcome-dynamic-text">
<!--<ul>
<li><u>S</u>erver-based</li>
<li><u>E</u>xtendable</li>
<li><u>P</u>ersonal</li>
<li><u>I</u>ntelligent</li>
<li><u>A</u>ssistant</li>
</ul>-->
<span class="text-effects-typing"
data-period="2000"
data-type='["Self-hosted", "Extendable", "Personal", "Intelligent", "Assistant"]'>
</span>
</div>
<br>
<div id="welcome-scroll-indicator"><i class="material-icons md-24">keyboard_arrow_down</i></div>
</section>
<section class="info-box center-content">
<div class="section-common section-100">
<h3>What is SEPIA?</h3>
<div class="text">
<p>
The <span class="topic-keywords">"A"</span> in SEPIA stands for <span class="topic-keywords">assistant</span>. Think of it as a digital companion
that helps you whenever you need it, not unlike Apple's Siri, Amazon's Alexa, Microsoft's Cortana or Google Assistant, but a very special, private, customizable
and open version that really belongs to you!<br>
In fact SEPIA is not only a <span class="topic-keywords">ready-to-use, cross-platform app</span> for iOS, Android and desktop browsers
but also a complete <span class="topic-keywords">open-source framework for DIY AI assistants</span>.
You want to build your own smart-speaker or home-assistant or you simply want to use a virtual assistant that respects your privacy?
Then you found the right place to start :-)
</p>
</div>
</div>
</section>
<section class="info-box center-content">
<div class="section-common section-62-38">
<h3>You control your data</h3>
<div class="bigger text">
<p>
Backbone of the SEPIA-Framework is <span class="topic-keywords">your own, secure web-server</span>. It runs all the core-modules like the Elasticsearch database,
the user-account management, the natural-language-understanding (NLU) and the chat-module. Additionally it connects the NLU to smart-services
like reminders, to-do lists, news, IoT interfaces and many more while keeping your data in a safe, <span class="topic-keywords">self-hosted</span> environment.
Thanks to Java the SEPIA back-end works on virtually any OS (Linux, Windows or Mac). It is optimized for single-board computers like the <span class="topic-keywords">Raspberry Pi</span>
to run inside your private network but can also be scaled up <span class="topic-keywords">and</span> hosted as <span class="topic-keywords">cloud-service</span>.
<a class="more-info" href="https://github.com/SEPIA-Framework/sepia-assist-server" target="_blank">Learn more</a>
</p>
</div>
<div class="smaller">
<img id="sepia-connected-img" class="topic-images" src="img/SEPIA_connected.png" alt="SEPIA connected">
</div>
</div>
</section>
<section class="info-box center-content">
<div class="section-common section-100">
<h3>You shape your assistant</h3>
<div class="extra-margin-top">
<img id="sepia-customize-img" class="topic-images" src="img/teach-ui.png" alt="SEPIA customize">
</div>
<div class="text">
<p>
SEPIA is <span class="topic-keywords">extendable</span> and can be improved and individualized in many ways.
You can create your <span class="topic-keywords">own commands on-the-fly</span> and teach SEPIA new stuff using the app (iOS, Android or browser) or you can build complex,
voice-controlled <span class="topic-keywords">smart-services with the Java SDK</span>. Everything from a simple answer to a multi-step dialog with cloud-service integration is possible.
If that's still not enough feel free to dive deeper into the code and replace certain modules or rebuild SEPIA completely.
Every part of the framework is <span class="topic-keywords">open-source, free and everybody can contribute</span>.<br>
<a class="more-info" href="https://github.com/SEPIA-Framework/sepia-html-client-app" target="_blank">Learn about the APP</a>
<a class="more-info" href="https://github.com/SEPIA-Framework/sepia-sdk-java" target="_blank">Learn about the SDK</a>
</p>
</div>
</div>
</section>
<section class="info-box center-content">
<div class="section-common section-62-38">
<h3>Be connected while staying private</h3>
<div class="bigger text">
<p>
Since you control the data and shape your assistant SEPIA's services and answers can <span class="topic-keywords">use your personal profile to give you individual results</span>
without this strange feeling in your stomach that you might get when you don't know who else is reading your messages or collecting information about you.
Connect your own IoT devices to SEPIA and keep all the controls protected in your own environment or <span class="topic-keywords">use a third-party service</span>
like Google Maps but share only an <span class="topic-keywords">anonymous</span> address without any context so Google will never know if you are driving to your grandma or your girlfriend/boyfriend.
</p>
</div>
<div class="smaller">
<img id="sepia-personal-img" class="topic-images" src="img/word-cloud.svg" alt="SEPIA personal">
</div>
</div>
</section>
<section class="info-box center-content">
<div class="section-common section-62-38">
<h3>Natural dialog and smart actions</h3>
<div class="smaller">
<img id="sepia-smart-img" class="topic-images" src="img/SEPIA_smart.png" alt="SEPIA smart">
</div>
<div class="bigger text">
<p>
SEPIA is designed to understand requests spoken (or typed) in natural language, extract as much information as possible and combine it in an <span class="topic-keywords">intelligent</span> way
with an ever growing number of useful services. If a service is missing some parameters to fulfil the request SEPIA can start a <span class="topic-keywords">multi-step conversation</span> and ask you questions to fill the gaps.
On top of that SEPIA will try to show you <span class="topic-keywords">relevant information</span> depending for example on the time of the day or your personal preferences.
</p>
</div>
</div>
</section>
<section class="info-box center-content">
<div class="section-common section-62-38">
<h3>DIY voice-controlled devices</h3>
<div class="bigger text">
<p>
With SEPIA Mesh-Nodes you can extend the reach of your assistant and <span class="topic-keywords">build your own voice-controlled device</span>.
All your device needs is network access (e.g. via WiFi module) and the ability to run the lightweight Mesh-Node server (e.g. via Java). Mesh-Nodes <span class="topic-keywords">connect securely to SEPIA</span>
and can execute programs directly on your device. Via the SEPIA client app, you can create voice-commands for your Mesh-Node or you can use the SEPIA Control-HUB to <span class="topic-keywords">code and upload programs</span>.
<a class="more-info" href="https://github.com/SEPIA-Framework/sepia-mesh-nodes" target="_blank">Learn more</a>
</p>
</div>
<div class="smaller">
<img id="sepia-mesh-img" class="topic-images" src="img/SEPIA_mesh.png" alt="SEPIA mesh-node">
</div>
</div>
</section>
<section class="info-box center-content">
<h3>There are no limits to your creativity!</h3>
</section>
<section class="bottom-box center-content-row">
<a href="privacy-policy.html" target="_blank"><span>Privacy policy</span></a>
<a href="https://github.com/SEPIA-Framework" target="_blank"><img src="img/brands/github.svg" alt="GitHub"><span>Source code</span></a>
<a href="https://github.com/SEPIA-Framework/sepia-docs#welcome-to-the-documentation-page-for-sepia" target="_blank"><span>Documentation</span></a>
<a href="https://twitter.com/sepia_fw" target="_blank"><img src="img/brands/twitter.svg" alt="Twitter"><span>Twitter</span></a>
<a rel="me" href="https://mastodon.online/@sepia" target="_blank"><img src="img/brands/mastodon.svg" alt="Mastodon"><span>Mastodon</span></a>
<a href="https://medium.com/sepia-framework" target="_blank"><img src="img/brands/medium.svg" alt="Blog"><span>Blog</span></a>
<a href="#attributions" class="popup-button" data-window-id="attributions-popup"><span>Credits</span></a>
</section>
</div>
<!-- pop-ups -->
<div id="attributions-popup" class="site-popup" style="display:none;">
<div class="site-popup-window">
<button class="popup-close-btn" onclick="closePopup(this)">X</button>
<div>
<h3>Credits</h3>
<p>
SEPIA, logo, website design, programming and some icons by <a href="http://bytemind.de" title="FQ" target="_blank"><span>Florian Quirin</span></a>
</p>
<p>
Additional icons by <a href="https://www.flaticon.com/authors/freepik" title="Freepik" target="_blank"><span>Freepik</span></a>,
<a href="https://www.flaticon.com/authors/zlatko-najdenovski" title="Z. Najdenovski" target="_blank"><span>Z. Najdenovski</span></a>
and <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons" target="_blank"><span>Smashicons</span></a>
from <a href="https://www.flaticon.com" title="Flaticon" target="_blank"><span>www.flaticon.com</span></a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="site-footer" class="hide">
</div>
</div>
<!-- LOW PRIO STYLESHEETS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- JS -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/text-effects.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/scroll-effects.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/index.js" charset="UTF-8"></script>
</body>
</html>