Finish article 1

app.py

@@ -3,10 +3,6 @@ import re
 from pathlib import Path
 import importlib
 
-import yaml
-
-REGEX_YAML_BLOCK = re.compile(r"---[\n\r]+([\S\s]*?)[\n\r]+---[\n\r](.*)", re.DOTALL)
-
 
 def render_preview(image, title, description):
     with st.container():

posts/1_blog_in_spaces.py

@@ -1,37 +1,43 @@
-from email.mime import image
 import streamlit as st
 
+from stmol import showmol
+import py3Dmol
+
 title = "T&T1 - Create interactive blog posts with Streamlit and Spaces"
 description = "Learn about how to host interactive blogs using Streamlit, GitHub and Spaces."
 date = "2022-01-20"
-thumbnail = "assets/1_huggingface_logo.png"
+thumbnail = "assets/1_thumbnail.png"
 
 def run_article():
     st.markdown("""
     # 🤗 Tips & Tricks Edition 1 
     # Create interactive blog posts with Streamlit and Spaces
 
-    Welcome to the first post of the 🤗 Tips and Tricks blog! In this blog, I'll be sharing features you might not know about to leverage the Hub platform and Open Source ecosystem at its full extent. 
+    Welcome to the first post of the 🤗 Tips and Tricks blog! Each post can be read in <5 minutes and shares features you might not know about that will allow you to leverage the Hub platform and Open Source ecosystem to its full extent. 
+
+    In today's post, you'll learn how this blog was actually done! This is actually very easy and the initial setup takes less than 10 minutes!
 
-    In today's post, you'll learn how this blog was actually done! This is actually very easy and the setup takes less than 10 minutes!
+    **How much will it cost me? 🤑 **
 
-    ## Workflow
+    Nothing! We'll be using Open Source and free tools to achieve it.
 
-    I'm a strong believer that there are different tools for different jobs. The tools we'll use today are:
+    I'm a strong believer that there are different tools for different jobs, so today you'll use:
 
     * **Streamlit**: A very cool Open Source library that allows to build apps in Python in a very straightforward way.
-    * **GitHub**: The main platform in which we're going to be doing the coding. 
-    * **Hugging Face Hub**: The platform in which the demo will be hosted using [Spaces](http://hf.co/spaces/launch), a platform through which you can freely share ML demos using Streamlit, Gradio or even static sites (HTML & JavaScript if you're into that stuff).
+    * **GitHub**: The main platform in which we're going to be hosting the code. 
+    * **Hugging Face Hub**: The platform in which the demo will be hosted using [Spaces](http://hf.co/spaces/launch). Spaces is a platform through which you can freely share ML demos using Streamlit, Gradio or even static sites (HTML & JavaScript if you're into that stuff).
+
+    **This is cool! Will I get subscriptions, likes, RSS, comments, ...**
 
-    Note: this is not a fully-fledged blog platform. There won't be subscribe options, for example, but it's a cool proof of concept that can be interesting for certain interactive articles.
+    No 😢 this is not a fully-fledged blog platform. It's just a cool proof of concept that can be interesting for having interactive articles.
 
     **Sure sure...but how does it work?**
 
-    So you will have a Streamlit-based application in which you'll have your articles. The code will be in GitHub, and through GitHub Action workflows, the blog will be automatically sync'ed to a Hugging Face Space.
+    So you will have a Streamlit-based application in which you'll have your articles. The code will be in GitHub, and through GitHub Action workflows, the blog will be automatically sync'ed to a Hugging Face Space. All the way automated!
 
     **Sounds fun, let's do it!**
 
-    Cool! So Nate has built a [nice template](https://github.com/nateraw/host-a-blog-on-huggingface-spaces) we can already use out of the box. Isn't that cool? Let's begin by clicking that **Fork** button in GitHub. Nice, so you're getting ready. Let's quickly explore what we have here
+    Cool! 🔥 So Nate has built a [nice template](https://github.com/nateraw/host-a-blog-on-huggingface-spaces) we can already use out of the box. Isn't that cool? Let's begin by clicking that **Fork** button in GitHub. Let's quickly explore what we have here
 
     - **.github/workflows/**: There is a GitHub Actions workflow that will automatically sync to the Hugging Face Hub each time you push into the repo.
     - **images/**: Well...it contains images.
@@ -49,15 +55,17 @@ def run_article():
         st.markdown("""
         Yes, let's do it. 
         
-        First, create a [new Space](https://huggingface.co/new-space) at Hugging Face. You will need to specify the Streamlit SDK. Since it's still being setup, you can make it private so others don't see it. The Space can have any name you want.
+        First, create a [new Space](https://huggingface.co/new-space) at Hugging Face. You will need to specify the Streamlit SDK. Since it's still being written, you can make it private so others don't see it. The Space can have any name you want.
         
         The second step is to create a [write token](https://huggingface.co/settings/token). This will allow GitHub to push whenever there are changes to the Space.
 
         Make sure to copy the token and...
 
-        **I won't expose my token! They will hack me!**
+        **I won't expose my token! They will hack me! 🚨🚨🚨**
 
         No worries, we'll be adding a **secret** in GitHub, which allows to add environment variables that can be accessed but not viewed by anyone. You can go to your **GitHub repo**, go to Settings -> SECRETS, and click ** New secret**. The name can be `HF_TOKEN` and the value is the one you got from the Hub.
+
+        🦙
     """)
 
     with col2:
@@ -67,7 +75,11 @@ def run_article():
     
 
     st.markdown("""
-    Now, if you go to **workflows/sync-to-hub**, you'll see the last line makes a reference to the original repo Space and your token. Let's switch the path to your own Space.
+    **Ok this is actually not that hard**
+
+    I know!
+
+    Now, if you go to your GitHub repo, to **workflows/sync-to-hub**, you'll see the last line makes a reference to the original Space repository and your token variable. Let's switch the path to your own Space.
 
     So I changed
 
@@ -91,7 +103,32 @@ def run_article():
 
     Well, you just finished the setup! There are a couple of places where you will want to change stuff and then write your first article. Once you're ready, you should make your Spaces repo public, share it in social media and get likes from the community!
 
-    I hope this was useful! Until the next time!
+    **Isn't this just the same as having my content in GitHub Pages?**
+
+    The cool thing of doing the blog post with Streamlit is that your blog posts can be interactive.
+
+    **I don't get it**
 
-    A Hacker Llama 🦙 
+    Check this example to interact with a protein visualization! This is directly in the blog article and leverages [great work](https://towardsdatascience.com/molecular-visualization-in-streamlit-using-rdkit-and-py3dmol-part-2-657d28152753) done by the open source community.
     """)
+
+    prot_str='1A2C,1BML,1D5M,1D5X,1D5Z,1D6E,1DEE,1E9F,1FC2,1FCC,1G4U,1GZS,1HE1,1HEZ,1HQR,1HXY,1IBX,1JBU,1JWM,1JWS'
+    prot_list=prot_str.split(',')
+    bcolor = st.color_picker('Pick A Color', '#6D73A6')
+    protein=st.selectbox('select protein',prot_list)
+    xyzview = py3Dmol.view(query='pdb:'+protein)
+    xyzview.setStyle({"stick":{'color':'spectrum'}})
+    xyzview.setBackgroundColor(bcolor)
+    showmol(xyzview, height = 500,width=800)
+
+    st.markdown("""
+    **🤯 cool**
+
+    Yes! Now imagine all the cool, ML interactive blogs you could have. You could nicely mix ML demos with great explanations in a very interactive way. Next time you release a model, you could embed it directly in the announcement article and readers would be able to try it out directly in their browsers!
+
+    I hope this was useful! Until the next time!
+
+    **A Hacker Llama 🦙**
+
+    [osanseviero](https://twitter.com/osanseviero)
+    """)

requirements.txt

@@ -1,2 +1,4 @@
 streamlit
 pyyaml
+py3Dmol
+stmol==0.0.7