From 22544b7202ba9c988330407eed4619bfffb7e4ec Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Fri, 28 Jul 2023 07:31:41 -0700 Subject: [PATCH 1/4] Add tutorial embedded app Add embedded app for LLM Tutorial: OpenAI, LangChain, and Streamlit in 18 lines of code --- .../llm-18-lines-of-code/requirements.txt | 3 +++ .../llm-18-lines-of-code/streamlit_app.py | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 python/tutorial-source/llm-18-lines-of-code/requirements.txt create mode 100644 python/tutorial-source/llm-18-lines-of-code/streamlit_app.py diff --git a/python/tutorial-source/llm-18-lines-of-code/requirements.txt b/python/tutorial-source/llm-18-lines-of-code/requirements.txt new file mode 100644 index 000000000..37db69adf --- /dev/null +++ b/python/tutorial-source/llm-18-lines-of-code/requirements.txt @@ -0,0 +1,3 @@ +streamlit +openai +langchain diff --git a/python/tutorial-source/llm-18-lines-of-code/streamlit_app.py b/python/tutorial-source/llm-18-lines-of-code/streamlit_app.py new file mode 100644 index 000000000..817bee2b4 --- /dev/null +++ b/python/tutorial-source/llm-18-lines-of-code/streamlit_app.py @@ -0,0 +1,19 @@ +import streamlit as st +from langchain.llms import OpenAI + +st.title('🦜🔗 Quickstart App') + +openai_api_key = st.sidebar.text_input('OpenAI API Key') + +def generate_response(input_text): + llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) + st.info(llm(input_text)) + +with st.form('my_form'): + text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') + submitted = st.form_submit_button('Submit') + if not openai_api_key.startswith('sk-'): + st.warning('Please enter your OpenAI API key!', icon='⚠') + if submitted and openai_api_key.startswith('sk-'): + generate_response(text) + \ No newline at end of file From 2e28aa39acfafc1a6fcb8c9f587f2a1358eb8e56 Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Fri, 28 Jul 2023 11:09:34 -0700 Subject: [PATCH 2/4] Add LLM tutorial --- content/kb/tutorials/llm/index.md | 144 ++++++++++++++++++++++++++++++ content/menu.md | 2 + 2 files changed, 146 insertions(+) create mode 100644 content/kb/tutorials/llm/index.md diff --git a/content/kb/tutorials/llm/index.md b/content/kb/tutorials/llm/index.md new file mode 100644 index 000000000..d5ccdf6b7 --- /dev/null +++ b/content/kb/tutorials/llm/index.md @@ -0,0 +1,144 @@ +--- +title: LLM Tutorials +slug: /knowledge-base/tutorials/llm-tutorials +--- + +# LLM Tutorial: OpenAI, LangChain, and Streamlit in 18 lines of code + +In this tutorial, you will build a Streamlit LLM app that can generate text from a user-provided prompt. This Python app will use the LangChain framework and Streamlit. Optionally, you can deploy your app to [Streamlit Community Cloud](https://streamlit.io/cloud) when you're done. + +*This tutorial is adapted from a [blog](https://blog.streamlit.io/langchain-tutorial-1-build-an-llm-powered-app-in-18-lines-of-code/) post by Chanin Nantesanamat.* + + + +### Objectives + +1. Get an OpenAI key from the end user. +2. Validate the user's OpenAI key. +3. Get a text prompt from the user. +4. Authenticate OpenAI with the user's key. +5. Send the user's prompt to OpenAI's API. +6. Get a response and display it. + +Bonus: Deploy the app on Streamlit Community Cloud! + +### Prerequisites + +- Python 3.7+ +- Streamlit +- LangChain +- [OpenAI API key](https://platform.openai.com/account/api-keys?ref=blog.streamlit.io) + +### Setup coding environment + +In your IDE (integrated coding environment), open the terminal and install the following three Python libraries: + +```python +pip install streamlit openai langchain +``` + +Create a `requirements.txt` file located in the root of your working directory and save these dependencies. This is necessary for deploying the app to the Streamlit Community Cloud later. + +```python +streamlit +openai +langchain +``` + +### Building the app + +The app is only 18 lines of code: + +```python +import streamlit as st +from langchain.llms import OpenAI + +st.title('🦜🔗 Quickstart App') + +openai_api_key = st.sidebar.text_input('OpenAI API Key') + +def generate_response(input_text): + llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) + st.info(llm(input_text)) + +with st.form('my_form'): + text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') + submitted = st.form_submit_button('Submit') + if not openai_api_key.startswith('sk-'): + st.warning('Please enter your OpenAI API key!', icon='⚠') + if submitted and openai_api_key.startswith('sk-'): + generate_response(text) +``` + +To start, create a new Python file and save it as `streamlit_app.py` in the root of your working directory. + +1. Import the necessary Python libraries. + + ```python + import streamlit as st + from langchain.llms import OpenAI + ``` + +2. Create the app's title using `st.title`. + + ```python + st.title('🦜🔗 Quickstart App') + ``` + +3. Add a text input box for the user to enter their OpenAI API key. + + ```python + openai_api_key = st.sidebar.text_input('OpenAI API Key') + ``` + +4. Define a function to authenticate to OpenAI API with the user's key, send a prompt, and get an AI-generated response. This function accepts the user's prompt as an argument and displays the AI-generated response in a blue box using `st.info`. + + ```python + def generate_response(input_text): + llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) + st.info(llm(input_text)) + ``` + +5. Finally, use `st.form()` to create a text box (`st.text_area()`) for user input. When the user clicks `Submit`, the `generate-response()` function is called with the user's input as an argument. + + ```python + with st.form('my_form'): + text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') + submitted = st.form_submit_button('Submit') + if not openai_api_key.startswith('sk-'): + st.warning('Please enter your OpenAI API key!', icon='⚠') + if submitted and openai_api_key.startswith('sk-'): + generate_response(text) + ``` + +6. Remember to save your file! +7. Return to your computer's terminal to run the app. + + ```bash + streamlit run streamlit_app.py + ``` + +### Deploying the app + +To deploy the app to the Streamlit Cloud, follow these steps: + +1. Create a GitHub repository for the app. Your repository should contain two files: + +``` +your-repository/ +├── streamlit_app.py +└── requirements.txt +``` + +1. Go to [Streamlit Community Cloud](http://share.streamlit.io), click the `New app` button from your workspace, then specify the repository, branch, and main file path. Optionally, you can customize your app's URL by choosing a custom subdomain. +2. Click the `Deploy!` button. + +Your app will now be deployed to Streamlit Community Cloud and can be accessed from around the world! 🌎 + +### Conclusion + +Congratulations on building an LLM-powered Streamlit app in 18 lines of code! 🥳 You can use this app to generate text from any prompt that you provide. The app is limited by the capabilities of the OpenAI LLM, but it can still be used to generate some creative and interesting text. + +We hope you found this tutorial helpful! Check out [more examples](https://streamlit.io/generative-ai) to see the power of Streamlit 💖 LLM. + +Happy Streamlit-ing! 🎈 diff --git a/content/menu.md b/content/menu.md index 87cad8b10..61cc0b18c 100644 --- a/content/menu.md +++ b/content/menu.md @@ -510,6 +510,8 @@ site_menu: url: /knowledge-base/tutorials/session-state - category: Knowledge base / Tutorials / Build conversational apps url: /knowledge-base/tutorials/build-conversational-apps + - category: Knowledge base / Tutorials / LLM tutorial + url: /knowledge-base/tutorials/llm-tutorials - category: Knowledge base / Using Streamlit url: /knowledge-base/using-streamlit - category: Knowledge base / Using Streamlit / How to animate elements? From d60e31251217e26857c68854d43a34ab8b014a29 Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Fri, 28 Jul 2023 11:59:19 -0700 Subject: [PATCH 3/4] Move emoji Emoji/grammar edit --- content/kb/tutorials/llm/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/kb/tutorials/llm/index.md b/content/kb/tutorials/llm/index.md index d5ccdf6b7..923b1d519 100644 --- a/content/kb/tutorials/llm/index.md +++ b/content/kb/tutorials/llm/index.md @@ -139,6 +139,6 @@ Your app will now be deployed to Streamlit Community Cloud and can be accessed f Congratulations on building an LLM-powered Streamlit app in 18 lines of code! 🥳 You can use this app to generate text from any prompt that you provide. The app is limited by the capabilities of the OpenAI LLM, but it can still be used to generate some creative and interesting text. -We hope you found this tutorial helpful! Check out [more examples](https://streamlit.io/generative-ai) to see the power of Streamlit 💖 LLM. +We hope you found this tutorial helpful! Check out [more examples](https://streamlit.io/generative-ai) to see the power of Streamlit and LLM. 💖 Happy Streamlit-ing! 🎈 From af32db1f355115f7417f9920d26cc8b71dbfffcf Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Sat, 29 Jul 2023 11:34:27 -0700 Subject: [PATCH 4/4] Typesetting and style corrections --- content/kb/tutorials/llm/index.md | 69 ++++++++++--------- content/menu.md | 4 +- .../llm-18-lines-of-code/streamlit_app.py | 19 +++-- 3 files changed, 46 insertions(+), 46 deletions(-) diff --git a/content/kb/tutorials/llm/index.md b/content/kb/tutorials/llm/index.md index 923b1d519..a96ccbcb2 100644 --- a/content/kb/tutorials/llm/index.md +++ b/content/kb/tutorials/llm/index.md @@ -1,17 +1,18 @@ --- -title: LLM Tutorials -slug: /knowledge-base/tutorials/llm-tutorials +title: LLM quickstart +slug: /knowledge-base/tutorials/llm-quickstart --- -# LLM Tutorial: OpenAI, LangChain, and Streamlit in 18 lines of code +# LLM quickstart +## OpenAI, LangChain, and Streamlit in 18 lines of code In this tutorial, you will build a Streamlit LLM app that can generate text from a user-provided prompt. This Python app will use the LangChain framework and Streamlit. Optionally, you can deploy your app to [Streamlit Community Cloud](https://streamlit.io/cloud) when you're done. -*This tutorial is adapted from a [blog](https://blog.streamlit.io/langchain-tutorial-1-build-an-llm-powered-app-in-18-lines-of-code/) post by Chanin Nantesanamat.* +*This tutorial is adapted from a blog post by Chanin Nantesanamat: [LangChain tutorial #1: Build an LLM-powered app in 18 lines of code](https://blog.streamlit.io/langchain-tutorial-1-build-an-llm-powered-app-in-18-lines-of-code/).* -### Objectives +## Objectives 1. Get an OpenAI key from the end user. 2. Validate the user's OpenAI key. @@ -22,14 +23,14 @@ In this tutorial, you will build a Streamlit LLM app that can generate text from Bonus: Deploy the app on Streamlit Community Cloud! -### Prerequisites +## Prerequisites -- Python 3.7+ +- Python 3.8+ - Streamlit - LangChain - [OpenAI API key](https://platform.openai.com/account/api-keys?ref=blog.streamlit.io) -### Setup coding environment +## Setup coding environment In your IDE (integrated coding environment), open the terminal and install the following three Python libraries: @@ -45,7 +46,7 @@ openai langchain ``` -### Building the app +## Building the app The app is only 18 lines of code: @@ -55,19 +56,19 @@ from langchain.llms import OpenAI st.title('🦜🔗 Quickstart App') -openai_api_key = st.sidebar.text_input('OpenAI API Key') +openai_api_key = st.sidebar.text_input('OpenAI API Key', type='password') def generate_response(input_text): - llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) - st.info(llm(input_text)) + llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) + st.info(llm(input_text)) with st.form('my_form'): - text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') - submitted = st.form_submit_button('Submit') - if not openai_api_key.startswith('sk-'): - st.warning('Please enter your OpenAI API key!', icon='⚠') - if submitted and openai_api_key.startswith('sk-'): - generate_response(text) + text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') + submitted = st.form_submit_button('Submit') + if not openai_api_key.startswith('sk-'): + st.warning('Please enter your OpenAI API key!', icon='⚠') + if submitted and openai_api_key.startswith('sk-'): + generate_response(text) ``` To start, create a new Python file and save it as `streamlit_app.py` in the root of your working directory. @@ -88,27 +89,27 @@ To start, create a new Python file and save it as `streamlit_app.py` in the roo 3. Add a text input box for the user to enter their OpenAI API key. ```python - openai_api_key = st.sidebar.text_input('OpenAI API Key') + openai_api_key = st.sidebar.text_input('OpenAI API Key', type='password') ``` 4. Define a function to authenticate to OpenAI API with the user's key, send a prompt, and get an AI-generated response. This function accepts the user's prompt as an argument and displays the AI-generated response in a blue box using `st.info`. ```python def generate_response(input_text): - llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) - st.info(llm(input_text)) + llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) + st.info(llm(input_text)) ``` 5. Finally, use `st.form()` to create a text box (`st.text_area()`) for user input. When the user clicks `Submit`, the `generate-response()` function is called with the user's input as an argument. ```python with st.form('my_form'): - text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') - submitted = st.form_submit_button('Submit') - if not openai_api_key.startswith('sk-'): - st.warning('Please enter your OpenAI API key!', icon='⚠') - if submitted and openai_api_key.startswith('sk-'): - generate_response(text) + text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') + submitted = st.form_submit_button('Submit') + if not openai_api_key.startswith('sk-'): + st.warning('Please enter your OpenAI API key!', icon='⚠') + if submitted and openai_api_key.startswith('sk-'): + generate_response(text) ``` 6. Remember to save your file! @@ -118,24 +119,24 @@ To start, create a new Python file and save it as `streamlit_app.py` in the roo streamlit run streamlit_app.py ``` -### Deploying the app +## Deploying the app To deploy the app to the Streamlit Cloud, follow these steps: 1. Create a GitHub repository for the app. Your repository should contain two files: -``` -your-repository/ -├── streamlit_app.py -└── requirements.txt -``` + ``` + your-repository/ + ├── streamlit_app.py + └── requirements.txt + ``` 1. Go to [Streamlit Community Cloud](http://share.streamlit.io), click the `New app` button from your workspace, then specify the repository, branch, and main file path. Optionally, you can customize your app's URL by choosing a custom subdomain. 2. Click the `Deploy!` button. Your app will now be deployed to Streamlit Community Cloud and can be accessed from around the world! 🌎 -### Conclusion +## Conclusion Congratulations on building an LLM-powered Streamlit app in 18 lines of code! 🥳 You can use this app to generate text from any prompt that you provide. The app is limited by the capabilities of the OpenAI LLM, but it can still be used to generate some creative and interesting text. diff --git a/content/menu.md b/content/menu.md index 61cc0b18c..379731afc 100644 --- a/content/menu.md +++ b/content/menu.md @@ -510,8 +510,8 @@ site_menu: url: /knowledge-base/tutorials/session-state - category: Knowledge base / Tutorials / Build conversational apps url: /knowledge-base/tutorials/build-conversational-apps - - category: Knowledge base / Tutorials / LLM tutorial - url: /knowledge-base/tutorials/llm-tutorials + - category: Knowledge base / Tutorials / LLM quickstart + url: /knowledge-base/tutorials/llm-quickstart - category: Knowledge base / Using Streamlit url: /knowledge-base/using-streamlit - category: Knowledge base / Using Streamlit / How to animate elements? diff --git a/python/tutorial-source/llm-18-lines-of-code/streamlit_app.py b/python/tutorial-source/llm-18-lines-of-code/streamlit_app.py index 817bee2b4..6951ecca9 100644 --- a/python/tutorial-source/llm-18-lines-of-code/streamlit_app.py +++ b/python/tutorial-source/llm-18-lines-of-code/streamlit_app.py @@ -3,17 +3,16 @@ st.title('🦜🔗 Quickstart App') -openai_api_key = st.sidebar.text_input('OpenAI API Key') +openai_api_key = st.sidebar.text_input('OpenAI API Key', type='password') def generate_response(input_text): - llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) - st.info(llm(input_text)) + llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key) + st.info(llm(input_text)) with st.form('my_form'): - text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') - submitted = st.form_submit_button('Submit') - if not openai_api_key.startswith('sk-'): - st.warning('Please enter your OpenAI API key!', icon='⚠') - if submitted and openai_api_key.startswith('sk-'): - generate_response(text) - \ No newline at end of file + text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?') + submitted = st.form_submit_button('Submit') + if not openai_api_key.startswith('sk-'): + st.warning('Please enter your OpenAI API key!', icon='⚠') + if submitted and openai_api_key.startswith('sk-'): + generate_response(text)