[9] AI 카피라이터 만들기 - UI 폼 구현하기

들어가며

🏫 전체 강의 영상 youtube

✍️ 마케팅 문구 생성기 사용해보기

 ▶️  강의 영상 유튜브

 

이번 챕터에서는 streamlit을 이용해서 마케팅 문구 생성기 UI를 개발해보겠습니다.

페이지 소개

pgaes/1_copywriter.py에 본격적으로 작업을 해보겠습니다. 먼저 title과 subheader로 페이지 소개를 적어주겠습니다.

import streamlit as st

st.title("✍️ AI_카피라이터")
st.subheader("AI를 이용하여 손쉽게 마케팅 문구를 생성해보세요.")

폼 추가하기

제품명, 제품 설명

그 다음 프롬프트를 생성하기 위해 필요한 파라미터를 입력받는 폼을 추가합니다. 먼저 제품명과 제품 설명을 입력받을 input을 추가합니다. submit 버튼을 아직 추가하지 않았기 때문에 에러가 나는 것은 당연합니다.

with st.form("form"):
    example_brand = "카누"
    name = st.text_input(
        label="제품/브랜드 이름(필수)",
        value=example_brand if auto_complete else "",
        placeholder=example_brand
    )
    example_desc = "집에서도 카페 느낌의 아메리카노 맛이 나는 커피 믹스"
    desc = st.text_input(
        label="제품 간단 정보(필수)",
        value=example_desc if auto_complete else "",
        placeholder=example_desc
    )

생성할 문구 수, 최대 길이 입력

그 다음 생성할 마케팅 문구의 수와 최대 길이를 입력받습니다. 이 때, st.number_input을 사용해야 하며 최대값과 최소값, 기본값과 조정 단위를 파라미터로 전달해줘야 합니다.

with st.form("form"):
	...
	max_length = st.number_input("최대 단어 수", min_value=5, max_value=20, step=1, value=10)
	generate_num = st.number_input("생성할 문구 수", min_value=1, max_value=10, step=1, value=5)

그런데 제품명과 최대 단어수, 생성할 문구 수는 각각 한줄을 차지하는 것이 좀 아깝습니다. columns를 적용해서 한줄에 표현해보겠습니다.

with st.form("form"):
    col1, col2, col3 = st.columns(3)
    with col1:
        example_brand = "카누"
        name = st.text_input(
            label="제품/브랜드 이름(필수)",
            placeholder=example_brand
        )
    with col2:
        max_length = st.number_input("최대 단어 수", min_value=5, max_value=20, step=1, value=10)
    with col3:
        generate_num = st.number_input("생성할 문구 수", min_value=1, max_value=10, step=1, value=5)
    example_desc = "집에서도 카페 느낌의 아메리카노 맛이 나는 커피 믹스"
    desc = st.text_input(
        label="제품 간단 정보(필수)",
        placeholder=example_desc
    )

키워드 포함하기

마지막으로 마케팅 문구에 포함할 키워드를 입력할 수 있는 칸을 추가하겠습니다. 이 때도 센스있게 columns를 이용해서 한 줄에 몰아주겠습니다.

with st.form("form"):
		...
		st.text("포함할 키워드(최대 3개까지 허용)")
    col1, col2, col3 = st.columns(3)
    with col1:
        example_keyword_one = "브라질"
        keyword_one = st.text_input(
            label="keyword_1",
            label_visibility="collapsed",
            placeholder=example_keyword_one,
        )
    with col2:
        example_keyword_two = "카페"
        keyword_two = st.text_input(
            label="keyword_2",
            label_visibility="collapsed",
            placeholder=example_keyword_two,
        )
    with col3:
        example_keyword_three = "공유"
        keyword_three = st.text_input(
            label="keyword_3",
            label_visibility="collapsed",
            placeholder=example_keyword_three,
        )

제출 버튼 추가

마지막으로 제출 버튼까지 추가하면 깔끔한 폼이 완성됩니다. 제출 버튼을 눌렀을 때 수행되는 로직은 폼 바깥쪽에 작성해주겠습니다. 지금은 클릭됐다는 메세지만 출력해주겠습니다.

with st.form("form"):
		...
		submitted = st.form_submit_button("제출하기")
if submitted:
    print("제출버튼 클릭")

마치며

이상으로 마케팅 문구 생성기 UI를 작성해보았습니다. 이제 입력 받은 데이터로 프롬프트를 만들고, 생성된 텍스트를 화면에 보여주기만 하면 서비스를 모두 구현할 수 있습니다. 다음 강의에서는 이전에 구현한 프롬프트 생성 코드를 streamlit 프로젝트로 가져와서 연동해보겠습니다.