Skip to content

Commit bcaf474

Browse files
sfc-gh-dmatthewssfc-gh-dmatthews
authored
Add LLM tutorial (#773)
* Add tutorial embedded app Add embedded app for LLM Tutorial: OpenAI, LangChain, and Streamlit in 18 lines of code * Add LLM tutorial * Move emoji Emoji/grammar edit * Typesetting and style corrections
1 parent f72d894 commit bcaf474

File tree

3 files changed

+156
-10
lines changed

3 files changed

+156
-10
lines changed

‎content/kb/tutorials/llm/index.md

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
title: LLM quickstart
3+
slug: /knowledge-base/tutorials/llm-quickstart
4+
---
5+
6+
# LLM quickstart
7+
## OpenAI, LangChain, and Streamlit in 18 lines of code
8+
9+
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.
10+
11+
*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/).*
12+
13+
<Cloud src="https://doc-tutorial-llm-18-lines-of-code.streamlit.app/?embed=true" height="600" />
14+
15+
## Objectives
16+
17+
1. Get an OpenAI key from the end user.
18+
2. Validate the user's OpenAI key.
19+
3. Get a text prompt from the user.
20+
4. Authenticate OpenAI with the user's key.
21+
5. Send the user's prompt to OpenAI's API.
22+
6. Get a response and display it.
23+
24+
Bonus: Deploy the app on Streamlit Community Cloud!
25+
26+
## Prerequisites
27+
28+
- Python 3.8+
29+
- Streamlit
30+
- LangChain
31+
- [OpenAI API key](https://platform.openai.com/account/api-keys?ref=blog.streamlit.io)
32+
33+
## Setup coding environment
34+
35+
In your IDE (integrated coding environment), open the terminal and install the following three Python libraries:
36+
37+
```python
38+
pip install streamlit openai langchain
39+
```
40+
41+
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.
42+
43+
```python
44+
streamlit
45+
openai
46+
langchain
47+
```
48+
49+
## Building the app
50+
51+
The app is only 18 lines of code:
52+
53+
```python
54+
import streamlit as st
55+
from langchain.llms import OpenAI
56+
57+
st.title('🦜🔗 Quickstart App')
58+
59+
openai_api_key = st.sidebar.text_input('OpenAI API Key', type='password')
60+
61+
def generate_response(input_text):
62+
llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key)
63+
st.info(llm(input_text))
64+
65+
with st.form('my_form'):
66+
text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?')
67+
submitted = st.form_submit_button('Submit')
68+
if not openai_api_key.startswith('sk-'):
69+
st.warning('Please enter your OpenAI API key!', icon='⚠')
70+
if submitted and openai_api_key.startswith('sk-'):
71+
generate_response(text)
72+
```
73+
74+
To start, create a new Python file and save it as `streamlit_app.py` in the root of your working directory.
75+
76+
1. Import the necessary Python libraries.
77+
78+
```python
79+
import streamlit as st
80+
from langchain.llms import OpenAI
81+
```
82+
83+
2. Create the app's title using `st.title`.
84+
85+
```python
86+
st.title('🦜🔗 Quickstart App')
87+
```
88+
89+
3. Add a text input box for the user to enter their OpenAI API key.
90+
91+
```python
92+
openai_api_key = st.sidebar.text_input('OpenAI API Key', type='password')
93+
```
94+
95+
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`.
96+
97+
```python
98+
def generate_response(input_text):
99+
llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key)
100+
st.info(llm(input_text))
101+
```
102+
103+
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.
104+
105+
```python
106+
with st.form('my_form'):
107+
text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?')
108+
submitted = st.form_submit_button('Submit')
109+
if not openai_api_key.startswith('sk-'):
110+
st.warning('Please enter your OpenAI API key!', icon='⚠')
111+
if submitted and openai_api_key.startswith('sk-'):
112+
generate_response(text)
113+
```
114+
115+
6. Remember to save your file!
116+
7. Return to your computer's terminal to run the app.
117+
118+
```bash
119+
streamlit run streamlit_app.py
120+
```
121+
122+
## Deploying the app
123+
124+
To deploy the app to the Streamlit Cloud, follow these steps:
125+
126+
1. Create a GitHub repository for the app. Your repository should contain two files:
127+
128+
```
129+
your-repository/
130+
├── streamlit_app.py
131+
└── requirements.txt
132+
```
133+
134+
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.
135+
2. Click the `Deploy!` button.
136+
137+
Your app will now be deployed to Streamlit Community Cloud and can be accessed from around the world! 🌎
138+
139+
## Conclusion
140+
141+
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.
142+
143+
We hope you found this tutorial helpful! Check out [more examples](https://streamlit.io/generative-ai) to see the power of Streamlit and LLM. 💖
144+
145+
Happy Streamlit-ing! 🎈

‎content/menu.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -510,6 +510,8 @@ site_menu:
510510
url: /knowledge-base/tutorials/session-state
511511
- category: Knowledge base / Tutorials / Build conversational apps
512512
url: /knowledge-base/tutorials/build-conversational-apps
513+
- category: Knowledge base / Tutorials / LLM quickstart
514+
url: /knowledge-base/tutorials/llm-quickstart
513515
- category: Knowledge base / Using Streamlit
514516
url: /knowledge-base/using-streamlit
515517
- category: Knowledge base / Using Streamlit / How to animate elements?

‎python/tutorial-source/llm-18-lines-of-code/streamlit_app.py

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33

44
st.title('🦜🔗 Quickstart App')
55

6-
openai_api_key = st.sidebar.text_input('OpenAI API Key')
6+
openai_api_key = st.sidebar.text_input('OpenAI API Key', type='password')
77

88
def generate_response(input_text):
9-
llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key)
10-
st.info(llm(input_text))
9+
llm = OpenAI(temperature=0.7, openai_api_key=openai_api_key)
10+
st.info(llm(input_text))
1111

1212
with st.form('my_form'):
13-
text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?')
14-
submitted = st.form_submit_button('Submit')
15-
if not openai_api_key.startswith('sk-'):
16-
st.warning('Please enter your OpenAI API key!', icon='⚠')
17-
if submitted and openai_api_key.startswith('sk-'):
18-
generate_response(text)
19-
13+
text = st.text_area('Enter text:', 'What are the three key pieces of advice for learning how to code?')
14+
submitted = st.form_submit_button('Submit')
15+
if not openai_api_key.startswith('sk-'):
16+
st.warning('Please enter your OpenAI API key!', icon='⚠')
17+
if submitted and openai_api_key.startswith('sk-'):
18+
generate_response(text)

0 commit comments

Comments
 (0)