pages/3_301_Running_streamlit_locally.py

import streamlit as st
from utils import *

if check_password("password"):
    st.markdown("""
    ## Set up local streamlit 
    
    #### 1. install streamlit
    
    ```python
    pip install streamlit==1.24.0  # We use a the version of streamlit that matching the one we are using in HF spaces
    ```
    
    #### 2. Setup local workspace
    - Depend on the OS you are using, you will find different way of define your workspace,
    we recommand you define your workspace as the same path of your launch of jupyter notebook,
    so if you do not want to use vscode.dev, using jupyter notebook can also do the job
    
    ###### For MacOS:
    ```cmd
    # at the same path of your notebook
    mkdir webapps && cd "$_"
    
    # You are now in your /webapps directory
    # You can now create your specific folder for different apps, for example:
    mkdir myfirstApp && cd "$_"  # you are now in the sub-directory /webapps/myfirstApp
    
    ## now you create a app.py file by:
    touch app.py
    
    ### After create app.py, you can use you IDE (or just notebook) to edit this file
    ```
    - Then, open the app.py file from any IDE or just notebook editor, typing following :
    
    ```python
    # app.py
    import streamlit as st
    
    st.header("My first App")
    ```
    and save the changes to the file
    
    - in the terminal again, typing:
    
    ```cmd
    nohup streamlit run app.py & disown
    ```
    
    now in your browser, type in
        - http://localhost:8501/
    your streamlit app should popup if everything goes correctly.
        - sometimes, if you already have a streamlit apps running locally, the port might become 8502 or more
    
    - From now on, you can keep the tab or your streamlit app openning and running, whence you change your code from 
    app.py, you can go back to your browser to click "Rerun" at the top right to check the effect of change.
    
    ###### For Windows10:
    
    - Most of the code setting would be same, except for the following:
        1. You cannot use "mkdir myfirstApp && cd "$_"" in one line, instead, you create your directory firstly by "mkdir myfirstApp"
        then "cd myfirstApp";
        2. to create a empty app.py file, you type 
            ```cmd
            echo.> app.py
            ```
        3. you do not need nohup, just type:
            ```cmd
            streamlit run app.py
            ```
    #### 3. Try an input widget in streamlit
    Now, you can try to add an input widget to your app.py
    
    ```python
    ## just below your existing code, the st.header() one, type following:
    
    text = st.text_area("copy and paste your text here",
                        height = 20,
                        max_chars = 3000,
                        key='text_area')
    ```
    - the code above, we defined an user input widget, text_area, give it a variable name, called 'text'
    This allow our app user to copy and paste text to summarize here, and the pasted text will be given a name 'text'
    - Now how can we use this input? i.e. call the data in our app? try the following code below the previous one
    
    ```python
    if st.button('submit'):
        st.write(text)
    ```
    
    - save the app.py file by click "File" --> "Save" at the left top of the editing window of notebook
    - Rerun the app at your browser, see what happen?
    - Try to copy and paste a paragraph of text, then click the button, see what happen?
    - Can you figure out the logic and process behind the code so far?
    
    #### 4. Familiar with Python
    
    Read the following introduction below for Python Dictionary and if statement:
    - [Python Dictionary](https://www.w3schools.com/python/python_dictionaries.asp)
    - [Python Condition](https://www.w3schools.com/python/python_conditions.asp)
    
    You can copy and paste those code snippets into your jupyter notebook to play around with them. 
    
    And do some exercises if you want :smile:
    
    - [Dictionary exercise](https://www.w3schools.com/python/python_dictionaries_exercises.asp)
    - [Condition exercise](https://www.w3schools.com/python/exercise.asp?filename=exercise_ifelse1)
    
    """)