내가 만든 사이트에서 gpt를 API로 연결해 사용하기(streamlit편)

사실 gpt를 만들려면 파이썬에 streamlit 패키지를 깔아서 하는 게 제일 편한 것 같다.

괜히 자바스크립트로 만들어서 하면 코드만 길어지고 복잡해지기 때문이다.

그럼에도 불구하고 내가 자바스크립트로 먼저 한 것은, 데이터(질문을 보내고, 받고)의 송수신 과정을 알고 싶기도 했으며, 솔직히 내가 만든 사이트에 적용하려니, 스트림릿을 사용하니까 잘 모르겠더라.

(검색해도 "스트림릿 html 코드 없이"라는 글이 많지, "스트림릿과 html로 만든"은 없었다. 못찾은 걸수도..)

 

아무튼 그래서 난 자바스크립트로 먼저 gpt와 연동했다.

https://marketerbong.tistory.com/69

 

그런데도 스트림릿으로 해보고 싶다면? 아래 코드만 갖다 붙여넣으면 된다.

 

솔직히 웹페이지 만드는 데에는 streamlit이 훨씬 편한듯 싶은데, 난 전문 개발자가 아니라 마케터이기 때문에 이것까지 공부하지는 않을 거다. 근데 gpt 연동되는 거 보니까 부럽..ㅎ..

 

1. 우선 패키지를 설치하자.

pip install streamlit
pip install openai

 

 

2. 그 다음 필요한 라이브러리들을 import해준다.

import streamlit as st  
import os  
from openai import OpenAI

 

 

3. open AI API를 세팅해준다. "YOUR_OPENAI_API_KEY" 영역에 키값을 넣어주면 된다.

os.environ["OPENAI_API_KEY"] = "YOUR_OPENAI_API_KEY"  
client = OpenAI()

 

4. 이제 스트림릿 코드를 작성해 질문입력/gpt응답생성/응답을messages에추가/대화내역저장 되도록 해준다.

st.title("Streamlit ChatGPT")  
  
# 기본적으로 스트림릿은 event가 발생할 때마다 페이지를 새로 로드함.
# 그렇기에 session_state를 저장하도록 한 것임.
if 'messages' not in st.session_state:  
    st.session_state.messages = []  

# uesr의 인풋 박스와 send버튼 생성한 것임
# 버튼은 눌렀을 때 동작이 필요하므로 if문 안에서 작성한 것임.
user_message = st.text_input("User:")    
if st.button("Send"):  
    st.session_state.messages.append({"role": "user", "content": user_message})  
  
  	# chat.completions.create를 이용해 응답을 받아오고
    # st.session_state.messages에 append해줌.
    # 모델과 role 등은 수정 가능함.
    completion = client.chat.completions.create(  
        model="gpt-3.5-turbo",  
        messages=st.session_state.messages,  
    )  
    response = completion.choices[0].message.content  
    st.session_state.messages.append({"role": "assistant", "content": response})

 

5. 이제 chat_message로 화면에 띄워주면 된다.

for message in reversed(st.session_state.messages):  
    with st.chat_message(message['role']):  
        if message['role'] == 'user':  
            st.write(message['content'])  
        else:  
            st.write(message['content'], avatar=st.image('이미지', width=30))

 

6. 그리고 파이썬 파일을 실행시키자. 단, 스트림릿은 아래 코드로 실행해야 한다.

streamlit app.py

 

그럼 아래와 같이 뜨게 된다.