[20] 쇼츠 대본 생성기 - UI 개발하기

들어가며

🏫 전체 강의 영상 youtube

📄 쇼츠 대본 생성기 사용해보기

📎 쇼츠 대본 생성기로 만든 쇼츠 영상

 ▶️  강의 영상 유튜브

 

이번 챕터에서는 유튜브 쇼츠 대본 생성기를 웹 서비스로 만들어보겠습니다. 양이 많지 않아서, 웹 페이지 개발과 chatGPT API 연동을 같이 진행하겠습니다.

페이지 소개

먼저 제목과 페이지를 소개하는 문구를 작성하겠습니다.

import streamlit as st

st.title("유튜브 쇼츠 대본 생성기")
st.text("네이버 연예 뉴스 URL을 넣어주면 유튜브 쇼츠용 대본을 생성합니다.")

폼 추가하기

그 다음 뉴스 기사 URL을 입력하는 폼을 만들어 줍니다. 제출 버튼을 눌렀을 때, URL이 입력됐는지 체크하고, 만약 비어있거나 네이버 연예뉴스 URL이 아니라면 경고 메세지를 보여줍니다.

with st.form("form"):
    reference_url = st.text_input(
        label="참고할 뉴스 URL",
    )
    submit = st.form_submit_button("쇼츠 대본 만들기")
if submit:
    if not reference_url:
        st.error("참고할 뉴스 URL을 넣어주세요.")
    elif not reference_url.startswith("https://entertain.naver.com/"):
        st.error("지원되지 않는 URL입니다.")
    else:
        st.success("쇼츠 대본을 생성할 수 있습니다.")

폼 자동완성

toggle을 이용해서 예시 URL로 폼을 채워넣는 기능을 구현합니다.

auto_complete = st.toggle("예제로 채우기")
example_url = "https://entertain.naver.com/read?oid=144&aid=0000917660"
with st.form("form"):
    reference_url = st.text_input(
        label="참고할 뉴스 URL",
        value=example_url if auto_complete else ""
    )
    submit = st.form_submit_button("쇼츠 대본 만들기")

뉴스 기사 크롤링 연동

submit 버튼을 누르고, 예외 처리를 통과했다면 뉴스 URL로부터 기사 본문을 읽어옵니다.

def parse_article(url):
    response = requests.get(url)
    soup = BeautifulSoup(response.text, "lxml")
    article = soup.find("div", class_="article_body").text
    return article.strip()

if submit:
    if not reference_url:
        st.error("참고할 뉴스 URL을 넣어주세요.")
    elif not reference_url.startswith("https://entertain.naver.com/"):
        st.error("지원되지 않는 URL입니다.")
    else:
        article = parse_article(reference_url)
        print(article)

>>
정국. 빅히트뮤직방탄소년단 정국이 미국 빌보드 차트를 강타했다.
...

마치며

이상으로 쇼츠 대본 생성기 프로젝트의 UI 개발은 마치겠습니다. 사실 이전 프로젝트와 대동소이해서 크게 어렵지 않았습니다. 다음 강의에서 이를 chatGPT API와 연동해서 쇼츠 대본을 생성해보겠습니다.