upload code

README.md

@@ -1,13 +1,19 @@
 ---
-title: Platzi Curso Streamlit Blog Interactivo
-emoji: 🐢
-colorFrom: pink
-colorTo: yellow
+title: HF Tips & Tricks
+emoji: 🤗
+colorFrom: blue
+colorTo: red
 sdk: streamlit
-sdk_version: 1.10.0
 app_file: app.py
 pinned: false
-license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Host a Blog on HuggingFace Spaces
+
+[![Generic badge](https://img.shields.io/badge/🤗-Open%20In%20Spaces-blue.svg)](https://huggingface.co/spaces/osanseviero/tips-and-tricks)
+
+How to host a blog on 🤗
+
+---
+
+Autogenerated using [this template](https://github.com/nateraw/spaces-template)

app.py

@@ -0,0 +1,60 @@
+import streamlit as st
+import re
+from pathlib import Path
+import importlib
+
+
+def render_preview(imagen, titulo, descripcion):
+    with st.container():
+        image_col, text_col = st.columns((1,2))
+        with image_col:
+            st.image(imagen)
+
+        with text_col:
+            st.subheader(titulo)
+            st.write(descripcion)
+            clicked = st.button("Lee más dando click aquí...", key=titulo)
+        return clicked
+
+
+def render_page(post_path: Path):
+    mod = importlib.import_module(str(post_path))
+    mod.run_article()
+    
+
+def get_page_data(post_path: Path):
+    mod = importlib.import_module(str(post_path))
+    return {
+        "titutlo": mod.titulo,
+        "descripcion": mod.descripcion,
+        "fecha": mod.fecha,
+        "thumbnail": mod.thumbnail,
+    }
+
+
+def main():
+    st.set_page_config(layout="wide")
+    posts = [
+        'posts.2_private_models',
+        'posts.1_blog_in_spaces'
+    ]
+    page_to_show = posts[0]
+    with st.sidebar:
+    
+        st.markdown('''
+            <div align="center">
+                <h1>El blog de Platzi</h1>
+                <p>La comunidad de Platzi en Hugging Face comparte conocimiento 🤗</p>
+        ''', unsafe_allow_html=True)
+        st.markdown('---')
+
+        for post in posts:
+            data = get_page_data(Path(post))
+            clicked = render_preview(data.get("thumbnail"), data.get("titulo"), data.get("descripcion"))
+            if clicked:
+                page_to_show = post
+
+    if page_to_show:
+        render_page(Path(page_to_show))
+
+main()

posts/1_blog_in_spaces.py

@@ -0,0 +1,134 @@
+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_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! 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!
+
+    **How much will it cost me? 🤑 **
+
+    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, 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 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, ...**
+
+    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. 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. 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.
+    * **posts/**: You can write your articles here directly with Markdown!.
+    * **app.py**: This is the main application file that has the structure of the blog.
+    * **packages.txt** and **requirements.txt** allow you to specify any dependencies you'll want to have installed in the blog. If you want to show some cool visualization using library X, you can add X here!
+
+    **Can we get this started?**
+
+    """)
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        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 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! 🚨🚨🚨**
+
+        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:
+        st.image("https://github.com/osanseviero/hf-tips-and-tricks/raw/main/assets/1_streamlit_space.png", width=300)
+        st.image("https://github.com/osanseviero/hf-tips-and-tricks/raw/main/assets/1_token.png", width=300)
+
+    
+
+    st.markdown("""
+    **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
+
+    ```
+    run: git push https://nateraw:$HF_TOKEN@huggingface.co/spaces/nateraw/host-a-blog-on-huggingface-spaces main --force
+    ```
+
+    to
+
+    ```
+    run: git push https://osanseviero:$HF_TOKEN@huggingface.co/spaces/osanseviero/tips-and-tricks main --force
+    ```
+
+    As you can see, I never exposed my token!
+
+    **Cool**
+
+    What is even cooler is that now each time you do any change in the GitHub repository, it will be automatically deployed in HF Spaces and re-deployed!
+
+    **What's next?**
+
+    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!
+
+    **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**
+
+    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)
+    """)

posts/2_private_models.py

@@ -0,0 +1,173 @@
+import streamlit as st
+import streamlit.components.v1 as components
+
+title = "T&T2 - Craft demos of private models"
+description = "Build public, shareable models of private models."
+date = "2022-01-27"
+thumbnail = "assets/2_thumbnail.png"
+
+
+
+def run_article():
+    st.markdown("""
+        # 🤗 Tips & Tricks Edition 2
+        # Using private models in your public ML demos
+
+        Welcome to a new post of 🤗 Tips and Tricks! 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 to its full extent. 
+
+        In today's post, you'll learn how you can create public demos of your private models. This can be useful if you're not ready to share the model
+        or are worried of ethical concerns, but would still like to share the work with the community to try it out.
+
+        **Is this expensive?**
+
+        It will cost...nothing! You can host private models on Hugging Face right now in a couple of clicks! Note: This works not just for transformers,
+        but for any ML library!
+
+        **Which is the model?**
+
+        The super secret model we won't want to share publicly but still showcase is a super powerful Scikit-learn model for...wine quality classification!
+        For the purposes of this demo, assume there exists a private model repository with `id=osanseviero/wine-quality`. 
+    """)
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.markdown("""
+        **🍷Cheers. And what is the demo?**
+
+        Let's build it right now! You first need to create a [new Space](https://huggingface.co/new-space). I like to use the Gradio SDK, but you are 
+        also encouraged to try Streamlit and static Spaces.
+
+        The second step is to create a [read token](https://huggingface.co/settings/token). A read token allows reading repositories, which is useful when 
+        you don't need to modify them. This token will allow the Space to access the model from the private model repository.
+
+        The third step is to create a secret in the Space, which you can do in the settings tab.
+
+        **What's a secret?**
+
+        If you hardcode your token, other people will be able to access your repository, which is what you're trying to avoid. Remember that the Space is 
+        public so the code of the Space is also public! By using secrets + tokens, you are having a way in which the Space can read a private model repo 
+        without exposing the raw model nor the token. Secrets can be very useful as well if you are making calls to APIs and don't want to expose it.
+
+        So you can add a token, with any name you want, and paste the value you should have coppied from your settings. 
+        """)
+
+    with col2:
+        st.image("https://github.com/osanseviero/hf-tips-and-tricks/raw/main/assets/2_gradio_space.png", width=300)
+        st.image("https://github.com/osanseviero/hf-tips-and-tricks/raw/main/assets/2_token.png", width=300)
+        st.image("https://github.com/osanseviero/hf-tips-and-tricks/raw/main/assets/2_secret.png", width=300)
+
+
+    st.markdown("""
+        **🤯 That's neat! What happens next?**
+
+        The secret is made available available to the gradio Space as a. environment variable. Let's write the code for the Gradio demo.
+
+        The first step is adding the `requirements.txt` files with used dependencies.
+
+        ```
+        scikit-learn
+        joblib
+        ```
+
+        As always in Spaces, you create a file called `app.py`. Let's go through each section of the file
+
+        1. Imports...nothing special
+
+        ```python
+        import joblib
+        import os
+
+        import gradio as gr
+
+        from huggingface_hub import hf_hub_download
+        ```
+
+        2. Downloading model from private repo
+
+        You can use `hf_hub_download` from the `huggingface_hub` library to download (and cache) a file from a model repository. Using the
+        `use_auth_token` param, you can access the secret `TOKEN`, which has the read token you created before. I want to download the file
+        `sklearn_model.joblib`, which is how `sklearn` encourages to save the models.
+
+
+        ```python
+        file_path = hf_hub_download("osanseviero/wine-quality", "sklearn_model.joblib",
+                                use_auth_token=os.environ['TOKEN'])
+        ```
+
+        3. Loading model
+
+        The path right now points to the cached local joblib model. You can easily load it now:
+        
+        ```python
+        model = joblib.load(file_path)
+        ```
+        
+        4. Inference function
+
+        One of the most important concepts in Gradio is the inference function. The inference function receives an input and has an output. It can 
+        receive multiple types of inputs (images, videos, audios, text, etc) and multiple outputs. This is a simple sklearn inference
+
+        ```python
+        def predict(data):
+            return model.predict(data.to_numpy())
+        ```
+
+        5. Build and launch the interface
+
+        Building Gradio interfaces is very simple. You need to specify the prediction function, the type of input and output. You can add more things such
+        as the title and descriptions. In this case, the input is a dataframe since that's the kind of data managed by this model. 
+
+        ```
+        iface = gr.Interface(
+            predict,
+            title="Wine Quality predictor with SKLearn",
+            inputs=gr.inputs.Dataframe(
+                headers=headers,
+                default=default,
+            ),
+            outputs="numpy",
+        )
+        iface.launch()
+        ```
+
+        We're done!!!!
+
+        You can find the Space at [https://huggingface.co/spaces/osanseviero/wine_quality](https://huggingface.co/spaces/osanseviero/wine_quality)
+        and try it yourself! It's not great, but the main idea of the article was to showcase a workflow of public demo with private model. This can also
+        work for datasets! With Gradio, you can create datasets with flagged content from users!
+
+        **Wait wait wait! I don't want to click more links!**
+
+        Ahm...ok. The link above is cool because you can share it with anyone, but you can also show Spaces-hosted Gradio demos with a couple of
+        HTML lines in your own website. Here you can see the Gradio Space.
+    """)
+
+    embed_gradio = components.html(
+        """
+        <head>
+            <link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/2.6.2/static/bundle.css">
+            </head>
+            <body>
+            <div id="target"></div>
+            <script src="https://gradio.s3-us-west-2.amazonaws.com/2.6.2/static/bundle.js"></script>
+            <script>
+            launchGradioFromSpaces("osanseviero/wine_quality", "#target")
+            </script>
+            </body>
+        """,
+        height=600,
+    )
+    
+    st.markdown("""
+        **🤯 Is that...a Gradio Space embedded within a Streamlit Space about creating Spaces?**
+
+        Yes, that's right! I hope this was useful! Until the next time!
+
+        **A Hacker Llama 🦙**
+
+        [osanseviero](https://twitter.com/osanseviero)
+    """)
+
+    

requirements.txt

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