Upload 2 files

Add week 3 tutorials

pages/3_301_Running_streamlit_locally.py

@@ -0,0 +1,108 @@
+import streamlit as st
+from utils import *
+
+if check_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)
+    
+    """)

pages/3_302_Our_First_App.py

@@ -0,0 +1,91 @@
+import streamlit as st
+from utils import *
+st.set_page_config(page_title="The first App", page_icon=":tangerine:")
+
+if check_password():
+    st.markdown("## Welcome to the first app: summarizer")
+    st.write("##")
+    
+    st.markdown("We have seen our summarization prompt from our notebook")
+    st.code('''
+    numberOfWords = '20'
+    topics = "marry"
+
+    prompt = f"""
+    Your task is to generate a short summary from text below, delimited by triple backticks, in at most {numberOfWords} words,\n
+    Firstly, extract relevant information and create a list of keywords without response,\n
+    Then, check if {topics} is in your list, if not, just response no relevent topics about {topics} to summarise,\n
+    if it is in your list, focusing on any aspects that mention {topics},\n
+    Review: ```{text}```
+    """
+    ''', language = "python")
+    
+    st.markdown("""
+    We have 3 variables above, numberOfWords, topics, and text, which means, our app will give users
+    3 input windows or widgets, 
+    - a Text input window for the text that need to be summarized, where users can copy and paste large text into it;
+    - a short text input window, that user can choose to choose the topics he/she want the app to summarize;
+    - a number input window, that user can select the length of summarization;
+    
+    - Additionally, a secret window that allow users to pass their own OpenAI API Key to use ChatGPT
+    """)
+    st.write("##")
+    st.markdown("""
+    The following streamlit widgets can help us to achieve requirement above:
+    
+    1. [st.text_area](https://docs.streamlit.io/library/api-reference/widgets/st.text_area) 
+    
+    Try to copy the following code to your app.py and rerun the local streamlit server
+    
+    ```python
+    txt = st.text_area('Text to summarize', "")
+    st.write(txt)
+    ```
+    """)
+    
+    txt = st.text_area('Text to summarize', "")
+    st.write(txt)
+    
+    st.write("##")
+    st.markdown("""
+    2. [st.text_input](https://docs.streamlit.io/library/api-reference/widgets/st.text_input) 
+    
+    Copy the code and run it on your app.py
+    
+    ```python
+    topics = st.text_input('Choose topics, seperated by ,', '')
+    st.write(topics)
+    ```
+    """)
+    
+    topics = st.text_input('Choose topics, seperated by ,', '')
+    st.write(topics)
+    st.write("##")
+    
+    st.markdown("""
+    3. [st.number_input](https://docs.streamlit.io/library/api-reference/widgets/st.number_input)
+    
+    Copy the code ane rerun on your app.py
+    ```python
+    number = st.number_input('words limit')
+    st.write('The current number is ', number)
+    ``` 
+    """)
+    
+    number = st.number_input('words limit')
+    st.write('The current number is ', number)
+    st.write("##")
+    st.markdown("""
+    Now, your task is to download the initial app this week:
+    
+        - Read the code;
+        - figuring our where are those widgets located in the code;
+        - ask any question in the Discord;
+        - bravely change the code on your computer, do some experiment 
+    
+    :smile:
+    """)
+    
+    
+    
+