퍼펭스쿨 (12) 썸네일형 리스트형 AI들아 내 고민을 들어줘! MBTI 고민상담실👂 들어가며 👂 MBTI 고민상담실 사용해보러 가기 ▶️ 서비스 소개 영상 안녕하세요 퍼펭스쿨입니다! 오늘은 chatGPT를 이용해서 개발한 재미있는 서비스 MBTI 고민상담실을 소개해드리겠습니다. 다들 쉽게 꺼내기 힘든 고민거리들 하나쯤 가지고 계시죠? 어렵사리 친구들한테 얘기를 꺼내봐도 주변엔 죄다 T들 뿐인적은 없으셨나요? MBTI 고민상담실에서는 내가 지정한 MBTI를 가진 AI가 여러분들의 고민을 들어줍니다. 지정하기에 따라서 어떤 AI는 따뜻한 위로를, 어떤 녀석은 따끔한 충고를, 또 어떤 녀석은 내가 미처 생각지 못한 해결책을 찾아줍니다. 궁금하지 않으신가요? 바로 살펴보시죠! MBTI 고민상담실 먼저 서비스 페이지로 이동하면 고민상담을 받고 싶은 MBTI들을 선택할 수 있습니다. 최대 3개까지.. [10] streamlit 서비스 배포하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 지금까지 개발한 포켓몬 도감 서비스를 streamlit cloud를 이용해서 웹 상에 배포해보겠습니다. github repository 생성 github: https://github.com/ 서비스를 배포하려면 우선 소스코드를 github 상에 업로드 해야합니다. 먼저 github로 이동해서 회원 가입 후에 레포지토리를 하나 만들어보겠습니다. streamlit-pokemon라는 이름으로 public repository를 하나 만들어주겠습니다. Add a README file을 체크해주겠습니다. 소스코드 업로드 레포지토리를 만든 뒤에 소스코드를 업로드해주면 됩니다. git에 익숙하신 분들은 해당 레포지토리를 원격 저.. [9] streamlit custom CSS 적용하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit에 직접 코딩한 CSS를 적용하는 방법을 배워보겠습니다. 다만 웹 프론트엔드 관련 지식이 필요하고, CSS를 직접 코딩해야하므로 너무 어려우신 분들은 스킵하셔도 무방합니다. st.markdown으로 CSS 적용하기 streamlit에서 custom CSS를 적용하기 위해서는 st.markdown으로 """, unsafe_allow_html=True) 이제 브라우저의 개발자 도구를 이용해서 스타일을 적용하고 싶은 태그를 확인하고, CSS를 적용하면 됩니다. title 색깔 변화 먼저 title 텍스트를 빨간색으로 바꿔보겠습니다. CSS를 적용하기 위해서 먼저 검사를 이용해서 태그 정보를 확인하겠습니다.. [8] streamlit button 이용한 데이터 삭제 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit button을 이용해서 등록되어 있는 포켓몬을 삭제하는 기능을 구현해보겠습니다. streamlit button streamlit button 문서: https://docs.streamlit.io/library/api-reference/widgets/st.button streamlit button은 버튼 UI를 간단하게 구현할 수 있고, 눌렀을 때 동작을 조건문으로 작성할 수 있습니다. 삭제 버튼 UI 추가 포켓몬 속성 텍스트 밑에 삭제 버튼을 추가해주겠습니다. 이 때, 반드시 key 값을 설정해주어야 합니다. use_container_width 옵션은 True로 설정해서 버튼의 너비를 조정하겠습니.. [7] streamlit toggle 이용한 form 자동완성 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 유저가 처음 페이지에 진입했을 때, 폼이 텅 비어있으면 어떻게 채워야 할지 당황스럽겠죠? 이번 챕터에서는 streamlit toggle을 이용해서 미리 정의한 데이터로 폼을 자동완성하는 기능을 구현해보겠습니다. 데이터 준비 먼저 폼을 자동으로 채워줄 예시 데이터를 준비하겠습니다. example_pokemon = { "name": "알로라 디그다", "types": ["땅", "강철"], "image_url": "https://storage.googleapis.com/firstpenguine-coding-school/pokemons/alora_digda.webp" } st.toggle toggle은 쉽게 말해서 껐다 켰다 할 수 있.. [6] streamlit session state 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 session state를 이용해서 데이터를 관리하는 방법을 배워보겠습니다. streamlit session state streamlit session state는 페이지가 살아있을 때, 데이터를 저장하는 일종의 딕셔너리입니다. streamlit session state 문서: https://docs.streamlit.io/library/api-reference/session-state streamlit이 공식적으로 제공하는 설명 영상이 상당히 자세해서 정확히 이해하고 싶으신 분들은 한번 보시기를 추천합니다. 간단히 요약하면 session state를 사용하면 streamlit에 의해서 페이지가 리로딩 될 때에도 .. [5] streamlit form으로 데이터 추가하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit form을 이용해서 유저의 입력을 받아서 포켓몬을 추가하는 기능을 구현해보겠습니다. streamlit form streamlit form은 유저의 입력을 받는 폼을 구성할 수 있는 기능입니다. 공식 문서에 코드 사용법과 예시 화면이 나와있습니다. streamlit form 문서: https://docs.streamlit.io/library/api-reference/control-flow/st.form 텍스트 입력, 숫자 입력, 슬라이드 바, 체크 박스 등등 다양한 데이터를 입력하는 위젯을 제공하고 있으며, with문으로 사용할 수 있습니다. streamlit form은 반드시 Submit 버튼을 .. [4] streamlit columns 이용한 위젯 배치 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 데이터 준비 그 전에, 여러마리 포켓몬들을 화면에 그리려면 데이터가 필요하겠죠? 총 여섯마리 포켓몬의 이름과 속성, 이미지 URL를 복사해서 코드에 붙여넣고, 기존에 pokemon 변수는 지워주겠습니다. pokemons = [ { "name": "피카츄", "types": ["전기"], "image_url": "https://storage.googleapis.com/firstpenguine-coding-school/pokemons/pikachu.webp" }, { "name": "누오", "types": ["물", "땅"], "image_url": "https://storage.googleapis.com/firstpenguine-.. 이전 1 2 다음
