Spaces:

SaulLu
/

test-demo

Running

+<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.7.1 -->
+<title>Your awesome title | Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</title>
+<meta name="generator" content="Jekyll v3.9.0" />
+<meta property="og:title" content="Your awesome title" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<meta property="og:description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<link rel="canonical" href="http://localhost:4000/404.html" />
+<meta property="og:url" content="http://localhost:4000/404.html" />
+<meta property="og:site_name" content="Your awesome title" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="Your awesome title" />
+<script type="application/ld+json">
+{"@type":"WebPage","headline":"Your awesome title","url":"http://localhost:4000/404.html","description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","@context":"https://schema.org"}</script>
+<!-- End Jekyll SEO tag -->
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title" /></head>
+<body><header class="site-header" role="banner">
+  <div class="wrapper"><a class="site-title" rel="author" href="/">Your awesome title</a><nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+        <div class="trigger"><a class="page-link" href="/about/">About</a><a class="page-link" href="/large-scale-demo/">Large scale demo</a><a class="page-link" href="/main-training/">Main training</a></div>
+      </nav></div>
+</header>
+<main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        <style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+<div class="container">
+  <h1>404</h1>
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>
+      </div>
+    </main><footer class="site-footer h-card">
+  <data class="u-url" href="/"></data>
+  <div class="wrapper">
+    <h2 class="footer-heading">Your awesome title</h2>
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <ul class="contact-list">
+          <li class="p-name">Your awesome title</li><li><a class="u-email" href="mailto:your-email@example.com">your-email@example.com</a></li></ul>
+      </div>
+      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
+</div>
+      <div class="footer-col footer-col-3">
+        <p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>

_site/about/index.html ADDED Viewed

	@@ -0,0 +1,87 @@

+<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.7.1 -->
+<title>About | Your awesome title</title>
+<meta name="generator" content="Jekyll v3.9.0" />
+<meta property="og:title" content="About" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<meta property="og:description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<link rel="canonical" href="http://localhost:4000/about/" />
+<meta property="og:url" content="http://localhost:4000/about/" />
+<meta property="og:site_name" content="Your awesome title" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="About" />
+<script type="application/ld+json">
+{"@type":"WebSite","headline":"About","url":"http://localhost:4000/about/","description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","name":"Your awesome title","@context":"https://schema.org"}</script>
+<!-- End Jekyll SEO tag -->
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title" /></head>
+<body><header class="site-header" role="banner">
+  <div class="wrapper"><a class="site-title" rel="author" href="/">Your awesome title</a><nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+        <div class="trigger"><a class="page-link" href="/about/">About</a><a class="page-link" href="/large-scale-demo/">Large scale demo</a><a class="page-link" href="/main-training/">Main training</a></div>
+      </nav></div>
+</header>
+<main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        <article class="post">
+  <header class="post-header">
+    <h1 class="post-title">About</h1>
+  </header>
+  <div class="post-content">
+    <p>This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at <a href="https://jekyllrb.com/">jekyllrb.com</a></p>
+<p>You can find the source code for Minima at GitHub:
+<a href="https://github.com/jekyll">jekyll</a> /
+<a href="https://github.com/jekyll/minima">minima</a></p>
+<p>You can find the source code for Jekyll at GitHub:
+<a href="https://github.com/jekyll">jekyll</a> /
+<a href="https://github.com/jekyll/jekyll">jekyll</a></p>
+  </div>
+</article>
+      </div>
+    </main><footer class="site-footer h-card">
+  <data class="u-url" href="/"></data>
+  <div class="wrapper">
+    <h2 class="footer-heading">Your awesome title</h2>
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <ul class="contact-list">
+          <li class="p-name">Your awesome title</li><li><a class="u-email" href="mailto:your-email@example.com">your-email@example.com</a></li></ul>
+      </div>
+      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
+</div>
+      <div class="footer-col footer-col-3">
+        <p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>

_site/assets/main.css ADDED Viewed

	@@ -0,0 +1,196 @@

+/** Reset some basic elements */
+body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
+/** Basic styling */
+body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
+/** Set `margin-bottom` to maintain vertical rhythm */
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
+/** `main` element */
+main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
+/** Images */
+img { max-width: 100%; vertical-align: middle; }
+/** Figures */
+figure > img { display: block; }
+figcaption { font-size: 14px; }
+/** Lists */
+ul, ol { margin-left: 30px; }
+li > ul, li > ol { margin-bottom: 0; }
+/** Headings */
+h1, h2, h3, h4, h5, h6 { font-weight: 400; }
+/** Links */
+a { color: #2a7ae2; text-decoration: none; }
+a:visited { color: #1756a9; }
+a:hover { color: #111; text-decoration: underline; }
+.social-media-list a:hover { text-decoration: none; }
+.social-media-list a:hover .username { text-decoration: underline; }
+/** Blockquotes */
+blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
+blockquote > :last-child { margin-bottom: 0; }
+/** Code formatting */
+pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }
+code { padding: 1px 5px; }
+pre { padding: 8px 12px; overflow-x: auto; }
+pre > code { border: 0; padding-right: 0; padding-left: 0; }
+/** Wrapper */
+.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
+@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }
+/** Clearfix */
+.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }
+/** Icons */
+.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }
+.social-media-list li + li { padding-top: 5px; }
+/** Tables */
+table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
+table tr:nth-child(even) { background-color: #f7f7f7; }
+table th, table td { padding: 10px 15px; }
+table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
+table td { border: 1px solid #e8e8e8; }
+/** Site header */
+.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 55.95px; position: relative; }
+.site-title { font-size: 26px; font-weight: 300; line-height: 54px; letter-spacing: -1px; margin-bottom: 0; float: left; }
+.site-title, .site-title:visited { color: #424242; }
+.site-nav { float: right; line-height: 54px; }
+.site-nav .nav-trigger { display: none; }
+.site-nav .menu-icon { display: none; }
+.site-nav .page-link { color: #111; line-height: 1.5; }
+.site-nav .page-link:not(:last-child) { margin-right: 20px; }
+@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
+  .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
+  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
+  .site-nav .menu-icon > svg { fill: #424242; }
+  .site-nav input ~ .trigger { clear: both; display: none; }
+  .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
+  .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; }
+  .site-nav .page-link:not(:last-child) { margin-right: 0; } }
+/** Site footer */
+.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; }
+.footer-heading { font-size: 18px; margin-bottom: 15px; }
+.contact-list, .social-media-list { list-style: none; margin-left: 0; }
+.footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; }
+.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }
+.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }
+.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); }
+.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); }
+@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); }
+  .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
+@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
+/** Page content */
+.page-content { padding: 30px 0; flex: 1; }
+.page-heading { font-size: 32px; }
+.post-list-heading { font-size: 28px; }
+.post-list { margin-left: 0; list-style: none; }
+.post-list > li { margin-bottom: 30px; }
+.post-meta { font-size: 14px; color: #828282; }
+.post-link { display: block; font-size: 24px; }
+/** Posts */
+.post-header { margin-bottom: 30px; }
+.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }
+@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }
+.post-content { margin-bottom: 30px; }
+.post-content h2 { font-size: 32px; }
+@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }
+.post-content h3 { font-size: 26px; }
+@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }
+.post-content h4 { font-size: 20px; }
+@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }
+/** Syntax highlighting styles */
+.highlight { background: #fff; }
+.highlighter-rouge .highlight { background: #eef; }
+.highlight .c { color: #998; font-style: italic; }
+.highlight .err { color: #a61717; background-color: #e3d2d2; }
+.highlight .k { font-weight: bold; }
+.highlight .o { font-weight: bold; }
+.highlight .cm { color: #998; font-style: italic; }
+.highlight .cp { color: #999; font-weight: bold; }
+.highlight .c1 { color: #998; font-style: italic; }
+.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
+.highlight .gd { color: #000; background-color: #fdd; }
+.highlight .gd .x { color: #000; background-color: #faa; }
+.highlight .ge { font-style: italic; }
+.highlight .gr { color: #a00; }
+.highlight .gh { color: #999; }
+.highlight .gi { color: #000; background-color: #dfd; }
+.highlight .gi .x { color: #000; background-color: #afa; }
+.highlight .go { color: #888; }
+.highlight .gp { color: #555; }
+.highlight .gs { font-weight: bold; }
+.highlight .gu { color: #aaa; }
+.highlight .gt { color: #a00; }
+.highlight .kc { font-weight: bold; }
+.highlight .kd { font-weight: bold; }
+.highlight .kp { font-weight: bold; }
+.highlight .kr { font-weight: bold; }
+.highlight .kt { color: #458; font-weight: bold; }
+.highlight .m { color: #099; }
+.highlight .s { color: #d14; }
+.highlight .na { color: #008080; }
+.highlight .nb { color: #0086B3; }
+.highlight .nc { color: #458; font-weight: bold; }
+.highlight .no { color: #008080; }
+.highlight .ni { color: #800080; }
+.highlight .ne { color: #900; font-weight: bold; }
+.highlight .nf { color: #900; font-weight: bold; }
+.highlight .nn { color: #555; }
+.highlight .nt { color: #000080; }
+.highlight .nv { color: #008080; }
+.highlight .ow { font-weight: bold; }
+.highlight .w { color: #bbb; }
+.highlight .mf { color: #099; }
+.highlight .mh { color: #099; }
+.highlight .mi { color: #099; }
+.highlight .mo { color: #099; }
+.highlight .sb { color: #d14; }
+.highlight .sc { color: #d14; }
+.highlight .sd { color: #d14; }
+.highlight .s2 { color: #d14; }
+.highlight .se { color: #d14; }
+.highlight .sh { color: #d14; }
+.highlight .si { color: #d14; }
+.highlight .sx { color: #d14; }
+.highlight .sr { color: #009926; }
+.highlight .s1 { color: #d14; }
+.highlight .ss { color: #990073; }
+.highlight .bp { color: #999; }
+.highlight .vc { color: #008080; }
+.highlight .vg { color: #008080; }
+.highlight .vi { color: #008080; }
+.highlight .il { color: #099; }

_site/assets/minima-social-icons.svg ADDED Viewed

_site/feed.xml ADDED Viewed

	@@ -0,0 +1,17 @@

+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2021-10-19T11:58:07+02:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Your awesome title</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><entry><title type="html">Welcome to Jekyll!</title><link href="http://localhost:4000/jekyll/update/2021/10/19/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2021-10-19T09:57:57+02:00</published><updated>2021-10-19T09:57:57+02:00</updated><id>http://localhost:4000/jekyll/update/2021/10/19/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/jekyll/update/2021/10/19/welcome-to-jekyll.html">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt;
+&lt;p&gt;Jekyll requires blog post files to be named according to the following format:&lt;/p&gt;
+&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;YEAR-MONTH-DAY-title.MARKUP&lt;/code&gt;&lt;/p&gt;
+&lt;p&gt;Where &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;YEAR&lt;/code&gt; is a four-digit number, &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;MONTH&lt;/code&gt; and &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;DAY&lt;/code&gt; are both two-digit numbers, and &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;MARKUP&lt;/code&gt; is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.&lt;/p&gt;
+&lt;p&gt;Jekyll also offers powerful support for code snippets:&lt;/p&gt;
+&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;print_hi&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+  &lt;span class=&quot;nb&quot;&gt;puts&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;Hi, &lt;/span&gt;&lt;span class=&quot;si&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;print_hi&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'Tom'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;#=&amp;gt; prints 'Hi, Tom' to STDOUT.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;
+&lt;p&gt;Check out the &lt;a href=&quot;https://jekyllrb.com/docs/home&quot;&gt;Jekyll docs&lt;/a&gt; for more info on how to get the most out of Jekyll. File all bugs/feature requests at &lt;a href=&quot;https://github.com/jekyll/jekyll&quot;&gt;Jekyll’s GitHub repo&lt;/a&gt;. If you have questions, you can ask them on &lt;a href=&quot;https://talk.jekyllrb.com/&quot;&gt;Jekyll Talk&lt;/a&gt;.&lt;/p&gt;</content><author><name></name></author><category term="jekyll" /><category term="update" /><summary type="html">You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. Jekyll requires blog post files to be named according to the following format: YEAR-MONTH-DAY-title.MARKUP Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works. Jekyll also offers powerful support for code snippets: def print_hi(name) puts &quot;Hi, #{name}&quot; end print_hi('Tom') #=&amp;gt; prints 'Hi, Tom' to STDOUT. Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.</summary></entry></feed>

_site/index.html ADDED Viewed

	@@ -0,0 +1,76 @@

+<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.7.1 -->
+<title>Your awesome title | Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</title>
+<meta name="generator" content="Jekyll v3.9.0" />
+<meta property="og:title" content="Your awesome title" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<meta property="og:description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<link rel="canonical" href="http://localhost:4000/" />
+<meta property="og:url" content="http://localhost:4000/" />
+<meta property="og:site_name" content="Your awesome title" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="Your awesome title" />
+<script type="application/ld+json">
+{"@type":"WebSite","headline":"Your awesome title","url":"http://localhost:4000/","description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","name":"Your awesome title","@context":"https://schema.org"}</script>
+<!-- End Jekyll SEO tag -->
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title" /></head>
+<body><header class="site-header" role="banner">
+  <div class="wrapper"><a class="site-title" rel="author" href="/">Your awesome title</a><nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+        <div class="trigger"><a class="page-link" href="/about/">About</a><a class="page-link" href="/large-scale-demo/">Large scale demo</a><a class="page-link" href="/main-training/">Main training</a></div>
+      </nav></div>
+</header>
+<main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        <div class="home">
+<h2 class="post-list-heading">Posts</h2>
+    <ul class="post-list"><li><span class="post-meta">Oct 19, 2021</span>
+        <h3>
+          <a class="post-link" href="/jekyll/update/2021/10/19/welcome-to-jekyll.html">
+            Welcome to Jekyll!
+          </a>
+        </h3></li></ul>
+    <p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p></div>
+      </div>
+    </main><footer class="site-footer h-card">
+  <data class="u-url" href="/"></data>
+  <div class="wrapper">
+    <h2 class="footer-heading">Your awesome title</h2>
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <ul class="contact-list">
+          <li class="p-name">Your awesome title</li><li><a class="u-email" href="mailto:your-email@example.com">your-email@example.com</a></li></ul>
+      </div>
+      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
+</div>
+      <div class="footer-col footer-col-3">
+        <p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>

_site/jekyll/update/2021/10/19/welcome-to-jekyll.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.7.1 -->
+<title>Welcome to Jekyll! | Your awesome title</title>
+<meta name="generator" content="Jekyll v3.9.0" />
+<meta property="og:title" content="Welcome to Jekyll!" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. Jekyll requires blog post files to be named according to the following format: YEAR-MONTH-DAY-title.MARKUP Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works. Jekyll also offers powerful support for code snippets: def print_hi(name) puts &quot;Hi, #{name}&quot; end print_hi(&#39;Tom&#39;) #=&gt; prints &#39;Hi, Tom&#39; to STDOUT. Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk." />
+<meta property="og:description" content="You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. Jekyll requires blog post files to be named according to the following format: YEAR-MONTH-DAY-title.MARKUP Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works. Jekyll also offers powerful support for code snippets: def print_hi(name) puts &quot;Hi, #{name}&quot; end print_hi(&#39;Tom&#39;) #=&gt; prints &#39;Hi, Tom&#39; to STDOUT. Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk." />
+<link rel="canonical" href="http://localhost:4000/jekyll/update/2021/10/19/welcome-to-jekyll.html" />
+<meta property="og:url" content="http://localhost:4000/jekyll/update/2021/10/19/welcome-to-jekyll.html" />
+<meta property="og:site_name" content="Your awesome title" />
+<meta property="og:type" content="article" />
+<meta property="article:published_time" content="2021-10-19T09:57:57+02:00" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="Welcome to Jekyll!" />
+<script type="application/ld+json">
+{"@type":"BlogPosting","headline":"Welcome to Jekyll!","dateModified":"2021-10-19T09:57:57+02:00","datePublished":"2021-10-19T09:57:57+02:00","url":"http://localhost:4000/jekyll/update/2021/10/19/welcome-to-jekyll.html","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/jekyll/update/2021/10/19/welcome-to-jekyll.html"},"description":"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. Jekyll requires blog post files to be named according to the following format: YEAR-MONTH-DAY-title.MARKUP Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works. Jekyll also offers powerful support for code snippets: def print_hi(name) puts &quot;Hi, #{name}&quot; end print_hi(&#39;Tom&#39;) #=&gt; prints &#39;Hi, Tom&#39; to STDOUT. Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.","@context":"https://schema.org"}</script>
+<!-- End Jekyll SEO tag -->
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title" /></head>
+<body><header class="site-header" role="banner">
+  <div class="wrapper"><a class="site-title" rel="author" href="/">Your awesome title</a><nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+        <div class="trigger"><a class="page-link" href="/about/">About</a><a class="page-link" href="/large-scale-demo/">Large scale demo</a><a class="page-link" href="/main-training/">Main training</a></div>
+      </nav></div>
+</header>
+<main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">Welcome to Jekyll!</h1>
+    <p class="post-meta">
+      <time class="dt-published" datetime="2021-10-19T09:57:57+02:00" itemprop="datePublished">Oct 19, 2021
+      </time></p>
+  </header>
+  <div class="post-content e-content" itemprop="articleBody">
+    <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
+<p>Jekyll requires blog post files to be named according to the following format:</p>
+<p><code class="language-plaintext highlighter-rouge">YEAR-MONTH-DAY-title.MARKUP</code></p>
+<p>Where <code class="language-plaintext highlighter-rouge">YEAR</code> is a four-digit number, <code class="language-plaintext highlighter-rouge">MONTH</code> and <code class="language-plaintext highlighter-rouge">DAY</code> are both two-digit numbers, and <code class="language-plaintext highlighter-rouge">MARKUP</code> is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>
+<p>Jekyll also offers powerful support for code snippets:</p>
+<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
+  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
+<span class="k">end</span>
+<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
+<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>
+<p>Check out the <a href="https://jekyllrb.com/docs/home">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/jekyll/jekyll">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href="https://talk.jekyllrb.com/">Jekyll Talk</a>.</p>
+  </div><a class="u-url" href="/jekyll/update/2021/10/19/welcome-to-jekyll.html" hidden></a>
+</article>
+      </div>
+    </main><footer class="site-footer h-card">
+  <data class="u-url" href="/"></data>
+  <div class="wrapper">
+    <h2 class="footer-heading">Your awesome title</h2>
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <ul class="contact-list">
+          <li class="p-name">Your awesome title</li><li><a class="u-email" href="mailto:your-email@example.com">your-email@example.com</a></li></ul>
+      </div>
+      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
+</div>
+      <div class="footer-col footer-col-3">
+        <p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>

_site/large-scale-demo/index.html ADDED Viewed

	@@ -0,0 +1,78 @@

+<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.7.1 -->
+<title>Large scale demo | Your awesome title</title>
+<meta name="generator" content="Jekyll v3.9.0" />
+<meta property="og:title" content="Large scale demo" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<meta property="og:description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<link rel="canonical" href="http://localhost:4000/large-scale-demo/" />
+<meta property="og:url" content="http://localhost:4000/large-scale-demo/" />
+<meta property="og:site_name" content="Your awesome title" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="Large scale demo" />
+<script type="application/ld+json">
+{"@type":"WebPage","headline":"Large scale demo","url":"http://localhost:4000/large-scale-demo/","description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","@context":"https://schema.org"}</script>
+<!-- End Jekyll SEO tag -->
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title" /></head>
+<body><header class="site-header" role="banner">
+  <div class="wrapper"><a class="site-title" rel="author" href="/">Your awesome title</a><nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+        <div class="trigger"><a class="page-link" href="/about/">About</a><a class="page-link" href="/large-scale-demo/">Large scale demo</a><a class="page-link" href="/main-training/">Main training</a></div>
+      </nav></div>
+</header>
+<main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        <article class="post">
+  <header class="post-header">
+    <h1 class="post-title">Large scale demo</h1>
+  </header>
+  <div class="post-content">
+  </div>
+</article>
+      </div>
+    </main><footer class="site-footer h-card">
+  <data class="u-url" href="/"></data>
+  <div class="wrapper">
+    <h2 class="footer-heading">Your awesome title</h2>
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <ul class="contact-list">
+          <li class="p-name">Your awesome title</li><li><a class="u-email" href="mailto:your-email@example.com">your-email@example.com</a></li></ul>
+      </div>
+      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
+</div>
+      <div class="footer-col footer-col-3">
+        <p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>

_site/main-training/index.html ADDED Viewed

	@@ -0,0 +1,78 @@

+<!DOCTYPE html>
+<html lang="en"><head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.7.1 -->
+<title>Main training | Your awesome title</title>
+<meta name="generator" content="Jekyll v3.9.0" />
+<meta property="og:title" content="Main training" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<meta property="og:description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
+<link rel="canonical" href="http://localhost:4000/main-training/" />
+<meta property="og:url" content="http://localhost:4000/main-training/" />
+<meta property="og:site_name" content="Your awesome title" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="Main training" />
+<script type="application/ld+json">
+{"@type":"WebPage","headline":"Main training","url":"http://localhost:4000/main-training/","description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","@context":"https://schema.org"}</script>
+<!-- End Jekyll SEO tag -->
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title" /></head>
+<body><header class="site-header" role="banner">
+  <div class="wrapper"><a class="site-title" rel="author" href="/">Your awesome title</a><nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+        <div class="trigger"><a class="page-link" href="/about/">About</a><a class="page-link" href="/large-scale-demo/">Large scale demo</a><a class="page-link" href="/main-training/">Main training</a></div>
+      </nav></div>
+</header>
+<main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        <article class="post">
+  <header class="post-header">
+    <h1 class="post-title">Main training</h1>
+  </header>
+  <div class="post-content">
+  </div>
+</article>
+      </div>
+    </main><footer class="site-footer h-card">
+  <data class="u-url" href="/"></data>
+  <div class="wrapper">
+    <h2 class="footer-heading">Your awesome title</h2>
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <ul class="contact-list">
+          <li class="p-name">Your awesome title</li><li><a class="u-email" href="mailto:your-email@example.com">your-email@example.com</a></li></ul>
+      </div>
+      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
+</div>
+      <div class="footer-col footer-col-3">
+        <p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>

efficient_training.ipynb ADDED Viewed

The diff for this file is too large to render. See raw diff

header-animate.js ADDED Viewed

	@@ -0,0 +1,225 @@

+// draw background; Note: this background is based on https://codepen.io/pawelqcm/pen/oxPYox by Pawel
+// Note 2: Pawel, you're awesome.
+(function() {
+  var main_element = document.getElementById("header_main");
+  var content_element = document.getElementById("overlay");
+  var canvas = document.querySelector('canvas');
+  var title_elem = document.getElementsByClassName("title_elem")[0];
+  var title_text = document.getElementById("title_text");
+  ctx = canvas.getContext('2d');
+  if (!ctx)
+      console.warn("Your browser does not support canvas, content may be broken :'(");
+  var SENSITIVITY, SIBLINGS_LIMIT, DENSITY, TOTAL_NODES, ANCHOR_LENGTH, CURSOR_HEIGHT, CURSOR_WIDTH;
+  css_opts = getComputedStyle(document.documentElement);
+  SENSITIVITY = css_opts.getPropertyValue('--background-sensitivity') || 120;
+  SIBLINGS_LIMIT = css_opts.getPropertyValue('--background-siblings') || 7;
+  NODE_DENSITY = css_opts.getPropertyValue('--background-node-density') || 6;
+  CURSOR_WIDTH = css_opts.getPropertyValue('--background-cursor-width') || 250;
+  CURSOR_HEIGHT = css_opts.getPropertyValue('--background-cursor-height') || 250;
+  CURSOR_VERTICAL_SHRINK = css_opts.getPropertyValue('--background-cursor-vertical-shrink') || 0.1;
+  SPEED_COEF = css_opts.getPropertyValue('--background-speed') || 1;
+  ENERGY_DECAY = css_opts.getPropertyValue('--energy-decay') || 2;
+  SHOW_IF_WIDER_THAN = css_opts.getPropertyValue('--background-show-if-wider-than') || 500;
+  MOVE_ON_CURSOR = css_opts.getPropertyValue('--background-move-on-cursor').includes("true") || false;
+  var nodes = [];
+  choice = (choices => choices[Math.floor(Math.random() * choices.length)])
+  sample_color = () => choice([[40, 40, 40], [133, 133, 133]])
+  ANCHOR_LENGTH = 20;
+  var cursor = {x: 0, y: 0};
+  function centralize_cursor() {
+      var rect = document.getElementById("bug-logo").getBoundingClientRect()
+      var window_left = window.pageXOffset || document.documentElement.scrollLeft;
+      var window_top = window.pageYOffset || document.documentElement.scrollTop;
+      cursor.x = window_left + rect.left + rect.width / 2;
+      cursor.y = window_top + rect.top + rect.height / 2;
+  }
+  function Node(x, y) {
+    this.anchorX = x;
+    this.anchorY = y;
+    this.x = Math.random() * (x - (x - ANCHOR_LENGTH)) + (x - ANCHOR_LENGTH);
+    this.y = Math.random() * (y - (y - ANCHOR_LENGTH)) + (y - ANCHOR_LENGTH);
+    this.vx = (Math.random() * 2 - 1) * SPEED_COEF;
+    this.vy = (Math.random() * 2 - 1) * SPEED_COEF;
+    this.energy = Math.random() * 100;
+    this.radius = Math.random();
+    this.siblings = [];
+    [this.r, this.g, this.b] = sample_color()
+    this.brightness = 0;
+  }
+  Node.prototype.drawNode = function() {
+    var color = `rgba(${this.r}, ${this.g}, ${this.b}, ${this.brightness})`;
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, 2 * this.radius + 2 * this.siblings.length / SIBLINGS_LIMIT, 0, 2 * Math.PI);
+    ctx.fillStyle = color;
+    ctx.fill();
+  };
+  Node.prototype.drawConnections = function() {
+    for (var i = 0; i < this.siblings.length; i++) {
+      var color = `rgba(133, 133, 133, ${this.brightness})`;
+      ctx.beginPath();
+      ctx.moveTo(this.x, this.y);
+      ctx.lineTo(this.siblings[i].x, this.siblings[i].y);
+      ctx.lineWidth = 1 - calcDistance(this, this.siblings[i]) / SENSITIVITY;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+    }
+  };
+  Node.prototype.moveNode = function() {
+    this.energy -= ENERGY_DECAY;
+    if (this.energy < 1) {
+      this.energy = Math.random() * 100;
+      if (this.x - this.anchorX < -ANCHOR_LENGTH) {
+        this.vx = Math.random() * SPEED_COEF;
+      } else if (this.x - this.anchorX > ANCHOR_LENGTH) {
+        this.vx = Math.random() * -SPEED_COEF;
+      } else {
+        this.vx = Math.random() * SPEED_COEF * 2 - SPEED_COEF;
+      }
+      if (this.y - this.anchorY < -ANCHOR_LENGTH) {
+        this.vy = Math.random() * SPEED_COEF;
+      } else if (this.y - this.anchorY > ANCHOR_LENGTH) {
+        this.vy = Math.random() * -SPEED_COEF;
+      } else {
+        this.vy = Math.random() * SPEED_COEF * 2 - SPEED_COEF;
+      }
+    }
+    relative_speed_rate = Math.min(canvas.height / 100, 10.0)
+    this.x += this.vx * this.energy * relative_speed_rate;
+    this.y += this.vy * this.energy * relative_speed_rate;
+  };
+  function initNodes() {
+    centralize_cursor();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (canvas.width >= SHOW_IF_WIDER_THAN)
+        total_nodes = Math.round(NODE_DENSITY * (canvas.width / 100 * canvas.height / 100));
+    else
+        total_nodes = 0;
+    nodes = [];
+    for (var i = 0; i < total_nodes; i++)
+        nodes.push(new Node(50 + Math.random() * (canvas.width - 100),
+                            5 + Math.random() * (canvas.height - 10)));
+  }
+  function calcDistance(node1, node2) {
+    return Math.sqrt(Math.pow(node1.x - node2.x, 2) + (Math.pow(node1.y - node2.y, 2)));
+  }
+  function findSiblings() {
+    var node1, node2, distance;
+    for (var i = 0; i < nodes.length; i++) {
+      node1 = nodes[i];
+      node1.siblings = [];
+      for (var j = 0; j < nodes.length; j++) {
+        node2 = nodes[j];
+        if (node1 !== node2) {
+          distance = calcDistance(node1, node2);
+          if (distance < SENSITIVITY) {
+            if (node1.siblings.length < SIBLINGS_LIMIT) {
+              node1.siblings.push(node2);
+            } else {
+              var node_sibling_distance = 0;
+              var max_distance = 0;
+              var s;
+              for (var k = 0; k < SIBLINGS_LIMIT; k++) {
+                node_sibling_distance = calcDistance(node1, node1.siblings[k]);
+                if (node_sibling_distance > max_distance) {
+                  max_distance = node_sibling_distance;
+                  s = k;
+                }
+              }
+              if (distance < max_distance) {
+                node1.siblings.splice(s, 1);
+                node1.siblings.push(node2);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  function redrawScene() {
+    resizeWindow();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    findSiblings();
+    var i, node, distance;
+    for (i = 0; i < nodes.length; i++) {
+      node = nodes[i];
+      scaled_distance = calcDistance({x: cursor.x / CURSOR_WIDTH, y: cursor.y / CURSOR_HEIGHT},
+                                     {x: node.x / CURSOR_WIDTH, y: node.y / CURSOR_HEIGHT});
+      node.brightness = Math.max(1 - scaled_distance, 0);
+    }
+    for (i = 0; i < nodes.length; i++) {
+      node = nodes[i];
+      if (node.brightness) {
+        node.drawConnections();
+        node.drawNode();
+      }
+      node.moveNode();
+    }
+    requestAnimationFrame(redrawScene);
+  }
+  function initHandlers() {
+    document.addEventListener('resize', resizeWindow);
+    document.addEventListener('orientationchange', resizeWindow);
+    if (MOVE_ON_CURSOR) {
+        document.addEventListener('mousemove', moveHandler);
+        document.addEventListener('touchmove', moveHandler);
+    }
+  }
+  function resizeWindow(evt) {
+    var new_width, new_height;
+    new_width = Math.round(Math.max(title_elem.getBoundingClientRect().right, window.innerWidth))
+    if (screen.width < 640)
+      title_text.style.fontSize = "20px";
+    else
+      title_text.style.fontSize = "32px";
+    if (!MOVE_ON_CURSOR)
+        new_height = Math.round(title_elem.getBoundingClientRect().top - canvas.getBoundingClientRect().top);
+    else
+        new_height = Math.round(Math.max(
+            content_element.offsetHeight, content_element.scrollHeight,
+            content_element.clientHeight, window.innerHeight));
+    if (canvas.width != new_width || canvas.height != new_height) {
+        canvas.width = new_width;
+        canvas.height = new_height;
+        main_element.style.height = (title_elem.offsetHeight + title_elem.offsetTop + 10) + "px";
+        initNodes();
+    }
+    if (!MOVE_ON_CURSOR)
+        centralize_cursor();
+  }
+  function moveHandler(evt) {
+    if (evt.type == "mousemove") {
+        cursor.x = window.pageXOffset + evt.clientX;
+        cursor.y = window.pageYOffset + evt.clientY;
+    }
+    else { // touch event
+        cursor.x = window.pageXOffset + evt.changedTouches[0].clientX;
+        cursor.y = window.pageYOffset + evt.changedTouches[0].clientY;
+    }
+  }
+  initHandlers();
+  initNodes();
+  redrawScene();
+})();

index.html ADDED Viewed

	@@ -0,0 +1,477 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Training Transformers Together</title>
+    <meta name="description" content="A NeurIPS'21 demonstration that explains how to train large models together with multiple collaborators.">
+    <link rel="mask-icon" href="https://learning-at-home.github.io/logo_small.png">
+    <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://learning-at-home.github.io/logo.png">
+    <link rel="icon" class="js-site-favicon" type="image/png" href="https://learning-at-home.github.io/logo.png">
+    <meta property="og:url" content="https://training-transformers-together.github.io">
+    <meta property="og:site_name" content="Training Transformers Together">
+    <meta property="og:title" content="Train vast neural networks together">
+    <meta property="og:description" content="A NeurIPS'21 demonstration that explains how to train large models together with multiple collaborators.">
+    <meta property="og:image" content="https://learning-at-home.github.io/logo_small.png">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image:width" content="96">
+    <meta property="og:image:height" content="96">
+    <meta property="twitter:site" content="https://training-transformers-together.github.io">
+    <meta property="twitter:creator" content="Yandex, Hugging Face, University of Washington, Hivemind team & contributors">
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:title" content="Training Transformers Together">
+    <meta property="twitter:description" content="A NeurIPS'21 demonstration that explains how to train large models together with multiple collaborators.">
+    <meta property="twitter:image:src" content="https://learning-at-home.github.io/logo_horizontal.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap core CSS -->
+    <link href="https://bootswatch.com/5/flatly/bootstrap.css" rel="stylesheet">
+    <!-- Custom styles for this template -->
+    <link href="./style.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="header_main" style="display: block;" class="mb-0 pb-0">
+      <canvas></canvas>
+      <div id="overlay">
+        <div id="header_window">
+            <div id="header">
+                <img src="https://learning-at-home.github.io/logo.png" id="bug-logo"
+                    style="width: 40%; max-height: 320px; max-width: 320px; z-index:1000; position: relative;">
+                <br>
+                <h1 class="faded title title_elem mb-1 pb-1" style="margin-top:-25px; margin-bottom:-10px">
+                    <p style="margin-top: 0px; font-weight:bolder; margin-bottom:0px;">
+                        <span id="title_text">Training Transformers Together</span>
+                    </p>
+                    <p style="font-size: 18px; margin-top:0px; margin-bottom:5px;">
+                        large-scale deep learning for everyone, by everyone</p>
+                    <p style="font-size: 18px; font-weight:lighter; margin-top:0px; margin-bottom:0px;">
+                        A NeurIPS 2021 Demonstration</p>
+                </h1>
+            </div>
+        </div>
+      </div>
+  </div>
+  <script src="./header-animate.js"></script>
+  <div class="container d-flex justify-content-center mb-2 pb-2" style="max-width: 500px">
+          <div class="row text-center align-items-center justify-content-center">
+              <div class="col-3">
+                  <a href="https://research.yandex.com/">
+                  <img src="logos/yandex.png" class="img-fluid center-block" style="max-width: 66%" alt="Yandex Research">
+                  </a>
+              </div>
+              <div class="col-3 px-2">
+                  <a href="https://huggingface.co/">
+                  <img src="logos/huggingface.png" class="img-fluid center-block" style="max-width: 66%" alt="Hugging Face">
+                  </a>
+              </div>
+              <div class="col-3 px-3">
+                  <a href="https://www.hse.ru/en/">
+                  <img src="logos/hse.png" class="img-fluid center-block" style="max-width: 66%" alt="HSE University">
+                  </a>
+              </div>
+              <div class="col-3 px-2">
+                  <a href="http://www.washington.edu/">
+                  <img src="logos/uwash.png" class="img-fluid center-block" alt="University of Washington">
+                  </a>
+              </div>
+          </div>
+  </div>
+  <div class="container" style="display: block;">
+  <p>
+    There was a time when you could comfortably train state-of-the-art vision and language models at home on your workstation.
+    The first convolutional neural net to beat ImageNet
+    (<a target="_blank" href="https://proceedings.neurips.cc/paper/2012/file/c399862d3b9d6b76c8436e924a68c45b-Paper.pdf">AlexNet</a>)
+    was trained for 5-6 days on two gamer-grade GPUs. In contrast, today's Top-1 ImageNet model
+    (<a target="_blank" href="https://arxiv.org/abs/2106.04803">CoAtNet</a>)
+    takes 20,000 TPU-v3 days. And things are even worse in the NLP world: training
+    <a target="_blank" href="https://arxiv.org/abs/2005.14165">GPT‑3</a>
+    on a top-tier server with 8x A100 would take decades.
+  </p>
+  <p>
+    So, can individual researchers and small labs still train state-of-the-art models? Yes we can!
+    All it takes is for a bunch of us to come together. In fact, we're doing it right now and <b>you are invited to join!</b>
+  </p>
+  <iframe id="iframe_main" src="https://hf.space/streamlitiframe/training-transformers-together/dashboard-embedded/+"
+      data-src="https://hf.space/streamlitiframe/training-transformers-together/dashboard-embedded/+"
+      data-sdk="streamlit"
+      title="Streamlit app" class="container p-0 flex-grow space-iframe"
+      allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
+      style="top:-200px; left:0; bottom:0; right:0; width:100%; height:200px; border:none; margin:0; padding:0; z-index:999999;" scrolling=no>
+      <p>This was meant to be an IFrame, but your browser did not display it.</p>
+      <p>Please go to <a href="https://huggingface.co/spaces/training-transformers-together/demo">https://huggingface.co/spaces/training-transformers-together/demo</a>.</p>
+  </iframe>
+  <p>
+    In this demo, we train a model similar to <a target="_blank" href="https://openai.com/blog/dall-e/">OpenAI DALL-E</a> —
+    a Transformer model that generates images from text descriptions.
+    It is trained on <a target="_blank" href="https://laion.ai/laion-400-open-dataset/">LAION-400M</a>,
+    the world's largest openly available image-text-pair dataset with 400 million samples. Our model is based on
+    the <a target="_blank" href="https://github.com/lucidrains/DALLE-pytorch">dalle‑pytorch</a> implementation
+    by <a target="_blank" href="https://github.com/lucidrains">Phil Wang</a> with a few tweaks to make it communication-efficient.
+  </p>
+  <div class="accordion" id="accordionExample">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingOne">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+          How to train efficiently over the Internet?
+        </button>
+      </h2>
+      <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+        <div class="accordion-body">
+          <p>
+            Modern distributed training algorithms are designed for HPC clusters with a 10-100 gigabit per second bandwidth.
+            In turn, a typical Internet connection runs at 10-100 megabits per second: that’s three orders of magnitude slower.
+            To make distributed training efficient, you need to win back these three orders of magnitude.
+            This may seem daunting at first, but in reality, DL researchers have already made all the necessary pieces for solving this puzzle:
+          </p>
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th scope="col">Speed&#8209;up</th>
+                <th scope="col">How to achieve</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><td class="centered"><strong>4-16x</strong></td><td>
+                <strong>Large-batch training:</strong> <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/1904.00962">You et al. (2019)</a> proposed a way for training neural networks efficiently with larger batches, and hence, fewer communication rounds.
+              </td></tr>
+              <tr><td class="centered"><strong>4-32x</strong></td><td>
+                <strong>Gradient compression:</strong> from simple <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/1511.04561">8-bit quantization</a>
+                 to advanced techniques such as <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/1712.01887">Deep Gradient Compression</a>,
+                 <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/1905.13727">PowerSGD</a>, <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2102.02888">1-bit Adam</a>,
+                  and many others. As a rule of thumb, these techniques can safely reduce communication by 16-32x. More extreme compression is often
+                  possible, but it may affect stability or final quality.
+              </td></tr>
+              <tr><td class="centered"><strong>4-24x</strong></td><td>
+                 <strong>Parameter sharing:</strong> reusing parameters between model layers results in a model with fewer parameters,
+                  and hence, fewer gradients to communicate. <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/1909.11942">Lan et al. (2019)</a> and
+                  <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/pdf/2107.11817.pdf">Xue et al. (2021)</a> propose efficient parameter sharing architectures
+                  for NLP and computer vision.
+              </td></tr>
+              <tr><td class="centered"><strong>1.5-2x</strong></td><td>
+                 <strong>Overlapping computation with communication:</strong> running network communication in background while
+                 computing the next portion of gradients. This is a <a target="_blank" rel="noopener noreferrer" href="https://ur.booksc.eu/book/1624068/2d0506">long-standing trick from HPC</a>
+                  that was recently adapted for DL training. <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2101.06840">Ren et al. (2021)</a> show that
+                   updating parameters in background while computing the next batch of gradients does not harm convergence.
+              </td></tr>
+            </tbody>
+          </table>
+          <p>
+            These techniques are already more than enough to cover 1000x slower communication.
+            This means that in practice you can pick and choose which of them you want in your training run.
+            For this demo, we use 8x larger batches, 4x compression, 12x parameter sharing and partial overlapping.
+            If you don’t want parameter sharing, you can trade it for more advanced gradient compression or larger batches.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="accordion" id="accordionAnother" style="margin-top: 10px;">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingTwo">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseOne">
+          How to train with different device types?
+        </button>
+      </h2>
+      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionAnother">
+        <div class="accordion-body">
+          <p>
+              Most distributed DL frameworks assume that the computation is performed by a fleet of identical devices,
+              typically GPU servers or TPU cores. Under this assumption, each device can be assigned an equal part of
+              computation, such as processing a fixed batch size of training samples.
+              However, this quickly breaks down if workers use different device types. If one participant uses a GPU (e.g. P100)
+              and another runs on TPU-v2-8, it is difficult to find a regime where both devices will be fully utilized.
+          </p>
+          <p>
+              To make the best use of all available devices, we let each device accumulate gradients at its own pace
+              with individually tuned batch size and some other features (e.g. gradient checkpointing or using XLA).
+              Once workers collectively aggregate some predefined global batch size, they average their gradients
+              with weights proportional to each worker's individual contribution (i.e. number of samples processed).
+          </p>
+          <a class="block overflow-hidden">
+              <div  class="w-full h-40 mb-2 bg-gray-900 group-hover:bg-gray-850 rounded-lg flex items-start justify-start overflow-hidden">
+                  <iframe src="https://www.youtube.com/embed/zdVsg5zsGdc" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"
+                          style="width: 100%; height: 240px"></iframe>
+              </div>
+          </a>
+          <p>
+              This technique allows the "swarm" to automatically adjust its behavior as peers join, leave or fail.
+              For instance, if several high-performance peers join the experiment, other peers will need to process a smaller
+              number of samples per optimizer step, and hence, the collaboration will train faster with the same hyperparameters.
+              In turn, if one of the workers fails and loses its progress (e.g. due to a fp16 overflow), others will make
+              up for that by processing slightly more. For more details on how this works, please refer to
+              <a target="_blank" rel="noopener noreferrer" href="https://papers.nips.cc/paper/2021/hash/41a60377ba920919939d83326ebee5a1-Abstract.html">
+              "Deep Learning In Open Collaborations"</a> paper or the corresponding <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/blog/collaborative-training">blog post</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <h3 class="my-4">How do I join?</h3>
+  <p>This section will be updated <strong>on December 7</strong>.</p>
+  <h3 class="my-4">Practical aspects</h3>
+  <div class="border-bottom pb-3">
+      <!-- Nav tabs -->
+      <ul class="nav nav-tabs m-3">
+          <li class="nav-item">
+            <a class="nav-link active" data-bs-toggle="tab" href="#memory-efficiency">Memory-Efficient Training</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" data-bs-toggle="tab" href="#security">Security</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" data-bs-toggle="tab" href="#make-your-own">Make Your Own</a>
+          </li>
+      </ul>
+      <!-- Tab panes -->
+      <div class="tab-content">
+          <div class="tab-pane fade active show" id="memory-efficiency">
+              <p>
+                  Our aim is to train a large model in a decentralized fashion on consumer hardware or low-end cloud instances.
+                  This means we need to make the model, dataset, and other memory buffers fit onto a few GB of disk, 12-16 GB of CPU RAM,
+                  and 8-12 GB of GPU memory. Unfortunately, this rules out many popular techniques such as
+                  <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2101.06840">ZeRO-Offload</a>:
+                  there is simply not enough RAM for that. Instead, we must make better use of what limited memory we have.
+                  To do this, we use two techniques: 8-bit Optimizers for GPU memory and dataset streaming for RAM & HDD.
+              </p>
+              <p>
+                  <b>8-bit optimizers:</b>
+                  Using optimizers such as LAMB or Adam requires four times as much GPU memory as simply storing model parameters (8 bytes vs 2 bytes)
+                  because of additional gradient statistics.
+                  As such, for training large models with many parameters, the optimizer state takes the largest amount of memory.
+                  With 8-bit optimizers, this amount is reduced by 75% (2 bytes), making it much easier to fit large models onto consumer GPUs.
+              </p><p>
+                  Naturally, we can combine this technique with offloading and store 8-bit optimizer states in the CPU memory rather
+                  than in the GPU memory (0 bytes GPU, 2 bytes CPU). To perform an optimizer update, we transfer the GPU gradients
+                  to the CPU, update the model parameters, and then copy the new weights to the GPU.
+                  We can do this for each weight one-by-one so that the additional CPU memory required for the
+                  optimizer update is minimal.
+                  This combination of offloading and 8-bit optimizers means that we conserve GPU memory (0 bytes per parameter)
+                  and also use only a limited amount of CPU memory (2 bytes per parameter).
+              </p>
+              <p>
+                  <b>Dataset streaming:</b>
+                  Usually data is stored on disk and needs to be fully or partially loaded into RAM for training.
+                  Large datasets used for pretraining measure in <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2101.00027">hundreds of gigabytes</a>
+                    or even <a target="_blank" rel="noopener noreferrer" href="https://laion.ai/laion-400-open-dataset/">terabytes</a>.
+                  This can pose a significant problem, as most desktop and cheap cloud instances simply do not have that much free space.
+                  Furthermore, downloading the data over the Internet would take up hours before one can even begin training.
+              </p>
+              <center>
+                  <img src="./logos/stream.gif" id="stream"
+                        style="width: 80%; max-height: 200px; max-width: 640px; z-index:1000; top:-10px; position: relative;">
+              </center>
+              <p>
+                  To circumvent these problems, it is possible to stream the data in the same way as you stream online videos.
+                  Participants download a small random portion of the training dataset and immediately begin training on it,
+                  while additional data is loaded in the background. As such, we can train a model with virtually no storage
+                  overhead from the dataset, and switching to a new dataset is as simple as changing an argument of the dataset class.
+              </p>
+              <h5><b>Here's our tutorial covering these methods:</b>
+              <a target="_blank" rel="noopener noreferrer" href="https://colab.research.google.com/gist/justheuristic/75f6a2a731f05a213a55cd2c8a458aaf/fine-tune-a-language-model-with-dataset-streaming-and-8-bit-optimizers.ipynb">
+                <span>
+                  <img src="https://colab.research.google.com/assets/colab-badge.svg" width="150px">
+                </span>
+              </a></h5>
+          </div>
+          <div class="tab-pane fade" id="security">
+              <p>In this section, we discuss common concerns related to security of collaborative training:</p>
+              <p>
+              <b>Q: If I join a collaborative experiment, do I allow other people to execute code on my computer?</b>
+              </p>
+              <p>
+              <b>A:</b> During the training, participants only exchange data (gradients, statistics, model weights) and never send code to each other.
+              No other peer can execute arbitrary code on your computer.
+              </p>
+              <p>
+              To join the experiment, you typically need to run the code (implementing the model, data streaming, training loop, etc.)
+              from a repository or a Colab notebook provided by the authors of the experiment.
+              This is no different from running any other open source project/Colab notebook.
+              </p>
+              <p>
+              <b>Q: Can a malicious participant influence the training outcome?</b>
+              </p>
+              <p>
+              <b>A:</b> It is indeed possible unless we use some defense mechanisms.
+              For instance, a malicious participant can damage model weights by sending large numbers instead of correct gradients.
+              The same can happen due to broken hardware or misconfiguration.
+              </p>
+              <ul>
+              <li>
+                  <p>
+                  One possible defense is using <b>authentication</b> combined with <b>model checkpointing</b>.
+                  In this case, participants should log in (e.g. with their Hugging Face account) to interact with the rest of the collaboration.
+                  In turn, moderators can screen potential participants and add them to an allowlist.
+                  If something goes wrong (e.g. a participant sends invalid gradients and the model diverges),
+                  the moderators remove them from the list and revert the model to the latest checkpoint unaffected by the attack.
+                  </p>
+<!--                    <p><b>Spoiler (TODO): How to implement authentication in a decentralized system efficiently?</b></p>-->
+                  <p>
+                  Nice bonus: using this data, the moderators can acknowledge the personal contribution of each participant.
+                  </p>
+              </li>
+              <li>
+              <p>
+                  Another defense is replacing the naive averaging of the peers' gradients with an <b>aggregation technique that is robust to outliers</b>.
+                  <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2012.10333">Karimireddy et al. (2020)</a>
+                  suggested such a technique (named CenteredClip) and proved that it does not significantly affect the model's convergence.
+                  </p>
+<!--                    <p><b>Spoiler (TODO): How does CenteredClip protect from outliers? (Interactive Demo)</b></p>-->
+                  <p>
+                  In our case, CenteredClip is useful but not enough to protect from malicious participants,
+                  since it implies that the CenteredClip procedure itself is performed by a trusted server.
+                  By contrast, in our decentralized system, all participants can aggregate a part of the gradients,
+                  and we cannot assume any of them to be trusted.
+                  </p>
+                  <p>
+                  Recently, <a target="_blank" rel="noopener noreferrer" href="https://arxiv.org/abs/2106.11257">Gorbunov et al. (2021)</a>
+                  proposed a robust aggregation protocol for decentralized systems that does not require this assumption.
+                  This protocol uses CenteredClip as a subroutine but is able to detect and ban participants who performed it incorrectly.
+                  </p>
+              </li>
+              </ul>
+          </div>
+          <div class="tab-pane fade" id="make-your-own">
+              <p>In this section, we provide a recipe for you to run a collaborative training experiment yourself.</p>
+              <p>
+                  <b>Got confused?</b> Feel free to ask any questions in our <a target="_blank" rel="noopener noreferrer" href="https://discord.gg/uGugx9zYvN">Discord</a>!
+              </p>
+              <ol>
+                  <li class="mb-2">
+                      Set up dataset streaming:
+                      <ul>
+                          <li>
+                              <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/docs/datasets/share_dataset.html">Upload</a> your dataset to the Hugging Face Hub
+                              in a streaming-friendly format (<a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/datasets/laion/laion_100m_vqgan_f8">example</a>).
+                          </li>
+                          <li>Set up dataset streaming (see the "Memory-Efficient Training" section).</li>
+                      </ul>
+                  </li>
+                  <li class="mb-2">
+                      Write the code of training peers (<a target="_blank" rel="noopener noreferrer" href="https://github.com/learning-at-home/dalle-hivemind/blob/main/run_trainer.py">example</a>):
+                      <ul>
+                          <li>Implement your model, set up dataset streaming, and write the training loop.</li>
+                          <li>
+                              Get familiar with the <a href="https://github.com/learning-at-home/hivemind">hivemind</a> library
+                              (<a target="_blank" rel="noopener noreferrer" href="https://learning-at-home.readthedocs.io/en/latest/user/quickstart.html">quickstart</a>).
+                          </li>
+                          <li>
+                              In the training loop, wrap up your PyTorch optimizer with
+                              <a target="_blank" rel="noopener noreferrer" href="https://learning-at-home.readthedocs.io/en/latest/modules/optim.html#hivemind.optim.experimental.optimizer.Optimizer">hivemind.Optimizer</a>
+                              (<a target="_blank" rel="noopener noreferrer" href="https://github.com/learning-at-home/dalle-hivemind/blob/main/task.py#L121">example</a>).
+                          </li>
+                      </ul>
+                  </li>
+                  <li class="mb-2">
+                      <b>(optional)</b> Write the code of auxiliary peers (<a target="_blank" rel="noopener noreferrer" href="https://github.com/learning-at-home/dalle-hivemind/blob/main/run_aux_peer.py">example</a>):
+                      <ul>
+                          <li>
+                              Auxiliary peers are a special kind of peers responsible for
+                              logging experiment progress (e.g., to <a target="_blank" rel="noopener noreferrer" href="https://wandb.ai/">Weights & Biases</a>)
+                              and uploading model checkpoints (e.g., to <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/docs/transformers/model_sharing">Hugging Face Hub</a>).
+                          </li>
+                          <li>
+                              Such peers don't need to calculate gradients and may be launched on cheap machines without GPUs.
+                          </li>
+                          <li>
+                              They can serve as a convenient entry point to
+                              <a href="https://learning-at-home.readthedocs.io/en/latest/modules/dht.html">hivemind.DHT</a>
+                              (i.e., their address can be specified as <code>initial_peers</code>).
+                          </li>
+                          <li>
+                              It is useful to fix their address by providing <code>host_maddrs</code> and <code>identity_path</code>
+                              arguments to <code>hivemind.DHT</code>
+                              (these are forwarded to the underlying <a target="_blank" rel="noopener noreferrer" href="https://libp2p.io/">libp2p</a> daemon).
+                          </li>
+                      </ul>
+                  </li>
+                  <li class="mb-2">
+                      <b>(optional)</b> Make it easier for other people to join:
+                      <!-- To be discussed:  What about "Make it easier and safer for other people to join" as there is the authentication bullet point?-->
+                      <ul>
+                          <li>
+                              Create notebooks for free GPU providers (Google Colab, Kaggle, AWS SageMaker, etc.).
+                              People may run them online and/or download and run them on their own hardware.
+                          </li>
+                          <li>
+                              <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/organizations/new">Create</a> a Hugging Face organization
+                              with all resources related to the training
+                              (dataset, model, inference demo, how-to-join walkthrough, links to a dashboard with loss and other metrics, etc.).
+                              Look at <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/training-transformers-together">ours</a> for an example.
+                          </li>
+                          <li>
+                              Set up an authentication system (see the "Security" section).
+                              For example, you can ask people to join your organization with their Hugging Face accounts
+                              (the website allows either sharing a link for joining or manually approving new participants).
+                              This allows you to screen the peers,
+                              acknowledge their contributions (e.g., make a leaderboard), and
+                              ban accounts who behave maliciously. You can use our <a href="https://collaborative-training-auth.huggingface.co/docs">authentication system</a> or deploy your own
+                              (our <a href="https://github.com/huggingface/collaborative-training-auth/tree/demo-neurips">server implementation</a> might be a good start).
+                          </li>
+                          <li>
+                              Set up an inference demo for your model (e.g., using <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/spaces">Spaces</a>) or
+                              a script that periodically uploads the inference results to show the training progress.
+                          </li>
+                      </ul>
+                  </li>
+              </ol>
+          </div>
+      </div>
+  </div>
+  <h3 class="my-3">Organizers</h3>
+    This demonstration was created by
+    <a href="https://twitter.com/sasha_borzunov">Alexander Borzunov*</a>,
+    <a href="https://twitter.com/m_ryabinin">Max Ryabinin*</a>,
+    <a href="https://twitter.com/Tim_Dettmers">Tim Dettmers*</a>,
+    <a href="https://twitter.com/qlhoest">Quentin Lhoest*</a>,
+    <a href="https://twitter.com/LucileSaulnier">Lucile Saulnier*</a>,
+    <a href="https://twitter.com/michael_diskin">Michael Diskin</a>,
+    <a href="https://twitter.com/YJernite">Yacine Jernite</a>, and
+    <a href="https://twitter.com/Thom_Wolf">Thomas Wolf</a>.
+  <h3 class="my-3">Learn more</h3>
+  <ul class="mb-5">
+      <li>A NeurIPS 2021 <a href="https://arxiv.org/abs/2106.10207">paper</a> on collaborative deep learning.</li>
+      <li><a href="https://github.com/learning-at-home/hivemind">hivemind</a> is a PyTorch library for decentralized deep learning.</li>
+      <li><a href="https://github.com/huggingface/datasets">🤗 Datasets</a> allows uploading and streaming training data from the Hub.</li>
+      <li><a href="https://github.com/facebookresearch/bitsandbytes">bitsandbytes</a> contains implementations of 8-bit optimizers.</li>
+      <li>A <a href="https://arxiv.org/abs/2110.02861">paper</a> on blockwise quantization for communication-efficient training.</li>
+      <!-- To be discussed:  How about mentioning the blog post containing videos that explain SahajBERT's collaborative training? -->
+      <!-- <li>A <a href="https://hf.co/blog/collaborative-training">blog post</a> (with videos) on a collaborative training of a LM with 40 volunteers .</li> -->
+  </ul>
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.min.js"></script>
+  </body>
+</html>

join-main-training.md ADDED Viewed

	@@ -0,0 +1,5 @@

+---
+layout: page
+title: "Join main training"
+permalink: /join-main-training/
+---

logos/hse.png ADDED Viewed

logos/huggingface.png ADDED Viewed

logos/stream.gif ADDED Viewed

logos/uwash.png ADDED Viewed

logos/yandex.png ADDED Viewed

quantization/quant.py ADDED Viewed

	@@ -0,0 +1,144 @@

+# Quantization reduces a bit representation to less bits for efficient storage or computation.
+# Most floating point data types have a mapping from a bit representation, e.g. 0010 = 2 to a floating
+# point representation 2 -> 2 / max(0010) = 2/15 = 0.133333
+# As such, we can represent a floating point quantization a mapping from integers to floating point values, e.g.
+# [0, 1, 2, 3] -> [-1.0, -0.25, 0.25 , 1.0]
+import numpy as np
+from scipy.spatial.distance import cdist
+index = np.array([0, 1, 2, 3, 4, 5, 6, 7])
+values = np.linspace(-1.0, 1.0, 8) # 3-bit linear quantization
+print('quantization values:', values)
+# To quantize an input distribution we first need to normalize its range into the range of the quantization values, in this case [-1.0, 1.0]
+# We can do this through division by the abolute maximum value if our distribution is roughly symmetric (most distribution in deep learning are noramlly distributed)
+rand_inputs = np.random.randn(1024, 1024).astype(np.float32)
+absmax = np.max(np.abs(rand_inputs))
+normed = rand_inputs / absmax
+print('normalized min and max range', np.min(normed), np.max(normed))
+# The next step is to round the input value to the closest quantization value.
+# This can be done by performing a binary search of each element of the normalized input tensor with respect to the sorted values array:
+# In this case, we simply compute the distance between all values and find the closest directly.
+dist = cdist(normed.flatten().reshape(-1, 1), values.reshape(-1, 1))
+closest_idx = np.argmin(dist, 1).reshape(rand_inputs.shape)
+val, count = np.unique(closest_idx, return_counts=True)
+print('Values:', val)
+print('Count:', count)
+# Closest index now represents the quantized 3 bit representation (4 different values). We can use this representation to store the data efficiently.
+# ==================DEQUANTIZATION========================
+# To dequantize the tensor we reverse the operations the we did
+# 1. lookup the values corresponding to the 3-bit index
+# 2. Denormalize by multipying by absmax
+dequant = values[closest_idx]*absmax
+# mean absolute error:
+error = np.abs(dequant-rand_inputs).mean()
+print(f'Absolute linear 3-bit quantization error: {error:.4f}')
+# This yields an error of about 0.34 per value. We can do better with non-linear quantization.
+# ==================NON-LINEAR QUANTIZATION========================
+# In non-linear quantization the distance between quantization values is not always equal.
+# This allows us to allocate more values to regions of high density. For example, the normal distribution has many values around 0.
+# This can reduce the overall error in the distribution.
+index = np.array([0, 1, 2, 3, 4, 5, 6, 7])
+values = np.array([-1.0, -0.5, -0.25, -0.075, 0.075, 0.25, 0.5, 1.0])
+dist = cdist(normed.flatten().reshape(-1, 1), values.reshape(-1, 1))
+closest_idx = np.argmin(dist, 1).reshape(rand_inputs.shape)
+val, count = np.unique(closest_idx, return_counts=True)
+print('Values:', val)
+print('Count:', count)
+dequant = values[closest_idx]*absmax
+error = np.abs(dequant-rand_inputs).mean()
+print(f'Absolute non-linear 3-bit quantization error: {error:.4f}')
+# dynamic quantization
+# Adaptive from: https://github.com/facebookresearch/bitsandbytes/blob/main/bitsandbytes/functional.py
+def create_dynamic_map(signed=True, n=7):
+    '''
+    Creates the dynamic quantiztion map.
+    The dynamic data type is made up of a dynamic exponent and
+    fraction. As the exponent increase from 0 to -7 the number
+    of bits available for the fraction shrinks.
+    This is a generalization of the dynamic type where a certain
+    number of the bits and be reserved for the linear quantization
+    region (the fraction). n determines the maximum number of
+    exponent bits.
+    For more details see
+    (8-Bit Approximations for Parallelism in Deep Learning)[https://arxiv.org/abs/1511.04561]
+    '''
+    data = []
+    # these are additional items that come from the case
+    # where all the exponent bits are zero and no
+    # indicator bit is present
+    additional_items = 2**(7-n)-1
+    if not signed: additional_items = 2*additional_items
+    for i in range(n):
+        fraction_items = 2**(i+7-n)+1 if signed else 2**(i+7-n+1)+1
+        boundaries = np.linspace(0.1, 1, fraction_items)
+        means = (boundaries[:-1]+boundaries[1:])/2.0
+        data += ((10**(-(n-1)+i))*means).tolist()
+        if signed:
+            data += (-(10**(-(n-1)+i))*means).tolist()
+    if additional_items > 0:
+        boundaries = np.linspace(0.1, 1, additional_items+1)
+        means = (boundaries[:-1]+boundaries[1:])/2.0
+        data += ((10**(-(n-1)+i))*means).tolist()
+        if signed:
+            data += (-(10**(-(n-1)+i))*means).tolist()
+    data.append(0)
+    data.append(1.0)
+    data.sort()
+    return np.array(data)
+import time
+values = create_dynamic_map(signed=True)
+t0 = time.time()
+dist = cdist(normed.flatten().reshape(-1, 1), values.reshape(-1, 1))
+closest_idx = np.argmin(dist, 1).reshape(rand_inputs.shape)
+quant_time = time.time()-t0
+dequant = values[closest_idx]*absmax
+error = np.abs(dequant-rand_inputs).mean()
+print(f'Absolute dynamic 8-bit quantization error: {error:.4f}')
+print(f'Total time taken: {quant_time:.4f} seconds.')
+# This yields an error as low as 0.012. We could do even better when we use block-wise quantization.
+# But performing block-wise quantization without optimized code is a bit slow. We can use the bitsandbytes library to do this quickly.
+import torch
+import bitsandbytes.functional as F
+rand_inputs = torch.from_numpy(rand_inputs)
+t0 = time.time()
+quant_values, quant_state = F.quantize_blockwise(rand_inputs)
+quant_time = time.time()-t0
+dequant_values = F.dequantize_blockwise(quant_values, quant_state)
+error = torch.abs(dequant_values-rand_inputs).mean().item()
+print(f'Absolute dynamic block-wise 8-bit quantization error: {error:.4f}')
+print(f'Total time taken (CPU): {quant_time:.4f} seconds.')
+rand_inputs = rand_inputs.cuda()
+t0 = time.time()
+quant_values, quant_state = F.quantize_blockwise(rand_inputs)
+quant_time = time.time()-t0
+print(f'Total time taken (GPU): {quant_time:.4f} seconds.')

style.css ADDED Viewed

	@@ -0,0 +1,145 @@

+:root {
+  --border-color: black;
+  --window-color: white;
+  --background-move-on-cursor: false;
+  --background-color: white;
+  --background-cursor-width: 400;
+  --background-cursor-height: 200;
+  --background-show-if-wider-than: 500;
+  --background-speed: 0.001;
+  --energy-decay: 0.3;
+}
+html {
+  font-size: 14px;
+}
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+body {
+  width: 100%;
+  margin: 0 auto;
+  background-color: var(--background-color);
+}
+#header_main {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+}
+#header_main canvas, #overlay {
+  width: 100%;
+  margin: 0 auto;
+  position: absolute;
+}
+a {
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.container {
+  max-width: 46rem;
+}
+.pricing-header {
+  max-width: 700px;
+}
+.card-deck .card {
+  min-width: 220px;
+}
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
+.arxiv_button {
+  position: relative;
+  display: inline-block;
+  width: 78px;
+  height: 28px;
+  background-image: linear-gradient(180deg, #fafbfc, #eff3f6 90%);
+  color: #24292e;
+  border: 1px solid rgba(27,31,35,.2);
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+  padding-right: 0px;
+  padding-top: 2.5px;
+  font-size: 12px;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
+  font-weight: 600;
+}
+.arxiv_button:before {
+  content: "";
+  vertical-align:middle;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: none;
+  margin-left: -16px;
+  margin-right: 0px;
+  margin-top: -2px;
+  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" class="ionicon s-ion-icon" viewBox="0 0 512 512"><path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg>') right center no-repeat;
+  background-size: 18px 16px;
+}
+.arxiv_button:hover {
+    background-color:#e6ebf1;
+    background-position:-0.5em;
+    border-color: #9fa4a9;
+    border-color:rgba(27,31,35,.35);
+    background-image:linear-gradient(180deg, #f0f3f6, #e6ebf1 90%)
+}
+#header_window {
+  width: 80%;
+  min-width: 320px;
+  margin: 0 auto;
+  text-align: center;
+}
+.faded {
+  margin: 0 auto;
+  background: var(--window-color);
+  box-shadow: 0 0 5px 5px var(--window-color);
+  font-family: cursive;
+  font-family: "Gill Sans", sans-serif;
+  display: inline-block
+}
+.padded {
+    width: 100%;
+    max-width: 800px;
+    text-align: left;
+}
+.title {
+   font-size: 32px;
+   box-shadow: 0 0 5px 5px var(--window-color);
+   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,
+                sans-serif,Apple Color Emoji,Segoe UI Emoji;
+}
+canvas {
+  background-color: var(--background-color);
+  width: 0px; /* will be changed on init */
+  overflow: hidden;
+}
+a {
+  color: #337ab7;
+  font-weight: 600;
+}
+a:hover {
+  color: #0056b3;
+}
+.nav-link {
+  color: #337ab7;
+  padding: 0.5rem 1rem;
+  font-weight: normal;
+}
+.nav-link:hover {
+  color: #337ab7;
+}