tweak offsets

app.py

@@ -6,7 +6,7 @@ If you're not a hedgehog, you shouldn't reuse this code. Use this instead: https
 import streamlit as st
 
 
-from st_helpers import make_header, content_text, content_title, cite
+from st_helpers import make_header, content_text, content_title, cite, make_footer
 from charts import draw_current_progress
 
 st.set_page_config(page_title="Training Transformers Together", layout="centered")
@@ -36,7 +36,27 @@ image-text-pair dataset with 400 million samples. Our model is based on
 <a target="_blank" rel="noopener noreferrer" href=https://github.com/lucidrains/DALLE-pytorch>dalle-pytorch</a> 
 with several tweaks for memory-efficient training.""")
 
+
 content_title("How do I join?")
 
-content_text("For the sake of ")
+content_text("""
+That's easy. First, make sure you're logged in at Hugging Face. If you don't have an account, create one <b>TODO</b>.<br>
+
+<ul style="text-align: left; list-style-position: inside; margin-top: 12px; margin-left: -32px;">
+    <li style="margin-top: 4px;">
+        Join our organization on Hugging Face here: <b>TODO</b>. </li>
+    <li style="margin-top: 4px;">
+        The simplest way to start is with colab <b>TODO</b>;</li>
+    <li style="margin-top: 4px;">
+        You can find other starter kits, evaluation and inference notebooks <b>TODO IN OUR ORGANIZATION</b>;</li>
+    <li style="margin-top: 4px;">
+        If you have any issues, <b>TODO DISCORD BADGE</b> </li> 
+</ul>
+
+Please note that we currently limit the number of colab participants to <b>TODO</b> to make sure we do not interfere
+with other users. If there are too many active peers, take a look at alternative starter kits here <b>TODO</b>
+""")
+
 
+content_text("<b> TODO UPDATE")
+make_footer()

charts.py

@@ -39,6 +39,7 @@ def draw_current_progress():
         use_container_width=True,
     )
 
+
 def draw_participant_bubbles():
     with st.expander("Who's training?", expanded=False):
         st.markdown("### Collaborative training participants\n(may take a few seconds to load)")

st_helpers.py

@@ -4,21 +4,27 @@ import streamlit.components.v1 as components
 with open("static/header.html", 'r', encoding='utf-8') as f:
     header_html = f.read()
 with open("static/header_style.css", 'r', encoding='utf-8') as f:
-    header_style_css = f.read()
+    embeds_style_css = f.read()
 with open("static/header_animate.js") as f:
     header_animate_js = f.read()
 with open("static/content_style.css", 'r', encoding='utf-8') as f:
     content_style_css = f.read()
 with open("static/meta.html", 'r', encoding='utf-8') as f:
     meta_html = f.read()
+with open("static/footer.html", 'r', encoding='utf-8') as f:
+    footer_html = f.read()
 
 
 def make_header():
-    components.html(f"<style>{header_style_css}</style>{header_html}<script>{header_animate_js}</script>", height=260)
+    components.html(f"<style>{embeds_style_css}</style>{header_html}<script>{header_animate_js}</script>", height=260)
     st.markdown(meta_html, unsafe_allow_html=True)
     st.markdown(f"<style>{content_style_css}</style>", unsafe_allow_html=True)  # apply css to the rest of the document
 
 
+def make_footer():
+    components.html(f"<style>{embeds_style_css}</style>{footer_html}", height=110)
+
+
 def content_title(title: str, vspace_before: int = 0, vspace_after: int = 0):
     st.markdown(f'<center><div class="padded faded demo_title" '
                 f'style="padding-top: {vspace_before}px; padding-bottom: {vspace_after}px; text-align: justify;">'

static/footer.html

@@ -0,0 +1,15 @@
+<div style="width: 260px; margin:0 auto;">
+    <div style="margin: 0 auto; margin-top: 0px;">
+            <a class="github-button" href="https://github.com/learning-at-home/hivemind" data-size="large" data-show-count="false" aria-label="Star learning-at-home/hivemind on GitHub">Code</a>
+            <div style="overflow: hidden; white-space: nowrap; margin: 0 auto; display: inline-block;">
+                <button onclick="window.open('https://arxiv.org/abs/2106.10207');"
+                        class="arxiv_button">Paper</button>
+            </div>
+            <a href="https://twitter.com/intent/tweet?hashtags=neurips,joinhivemind&text=Join%20the%20deep%20learning%20hivemind!%0Atraining-transformers-together.github.io"
+               class="twitter-hashtag-button" data-show-count="true" data-size="large">Tweet</a>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+            <script async defer src="https://buttons.github.io/buttons.js"></script>
+    </div>
+    <hr style="margin-bottom: 64px; width:0%; border: 0 solid white">
+</div>