[10] AI 카피라이터 만들기 - UI 폼 자동완성

들어가며

🏫 전체 강의 영상 youtube

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

 ▶️  강의 영상 유튜브

 

이번 챕터에서는 폼 자동완성 기능과 예외 처리를 추가해보겠습니다.

폼 자동완성하기

얼핏 보더라도 채워 넣어야 하는 데이터가 상당히 많습니다. 유저가 처음 페이지에 들어왔을 때, 최대한 빠르게 AI가 마케팅 문구를 생성하는 모습을 보여주려면 자동으로 폼을 채워주는 기능이 필요합니다. 이를 streamlit toggle을 이용해서 구현해보겠습니다.

 

먼저 폼 위에 streamlit toggle을 추가합니다. 그 다음, 각각의 input 값들에 auto_complete가 True일 때 예시 데이터를 value로 갖도록 합니다. 브랜드 이름에만 자동완성을 추가한 코드는 아래와 같습니다. 

auto_complete = st.toggle(label="예시로 채우기")
with st.form("form"):
    col1, col2, col3 = st.columns(3)
    with col1:
        example_brand = "카누"
        name = st.text_input(
            label="제품/브랜드 이름(필수)",
            value=example_brand if auto_complete else "",
            placeholder=example_brand
        )

나머지 input 값들에도 자동완성 기능을 적용해준 코드는 더보기를 클릭하시면 보실 수 있습니다.

auto_complete = st.toggle(label="예시로 채우기")
with st.form("form"):
    col1, col2, col3 = st.columns(3)
    with col1:
        example_brand = "카누"
        name = st.text_input(
            label="제품/브랜드 이름(필수)",
            value=example_brand if auto_complete else "",
            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="제품 간단 정보(필수)",
        value=example_desc if auto_complete else "",
        placeholder=example_desc
    )

    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,
            value=example_keyword_one if auto_complete else ""
        )
    with col2:
        example_keyword_two = "카페"
        keyword_two = st.text_input(
            label="keyword_2",
            label_visibility="collapsed",
            placeholder=example_keyword_two,
            value=example_keyword_two if auto_complete else ""
        )
    with col3:
        example_keyword_three = "공유"
        keyword_three = st.text_input(
            label="keyword_3",
            label_visibility="collapsed",
            placeholder=example_keyword_three,
            value=example_keyword_three if auto_complete else ""
        )
    submitted = st.form_submit_button("제출하기")
if submitted:
    print("제출하기 버튼 클릭")

모든 입력 값들에 예시로 채우기 기능을 적용한 화면입니다.

입력 값 예외처리

제출 버튼을 눌렀을 때, 마케팅 문구를 만드는데 꼭 필요한 요소(제품명, 제품 설명)가 누락되었을 수 있습니다. 이를 체크하고 유저에게 누락된 요소를 입력해달라고 경고 메세지를 띄워보겠습니다.

if submitted:
    if not name:
        st.error("브랜드 혹은 제품의 이름을 입력해주세요")
    elif not desc:
        st.error("제품의 간단한 정보를 입력해주세요")
    else:
        with st.spinner('AI 카피라이터가 광고 문구를 생성 중입니다...'):
            time.sleep(5)
            st.success("광고 문구 생성에 성공했습니다.")

반대로 필수 요소들이 모두 채워져 있을 때엔 문구 생성에 성공했다는 메세지를 띄워주겠습니다.

마치며

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