Update app.py

app.py

@@ -14,8 +14,80 @@ generation_config = {
     "response_mime_type": "text/plain",
 }
 
-# Streamlit UI 설정
-st.title("AI 튜터 챗봇")
+# Streamlit 앱 설정
+st.set_page_config(page_title="AI 튜터", page_icon="🎓", initial_sidebar_state="expanded")
+
+# 페이지 스타일 커스터마이징
+st.markdown(
+    """
+    <style>
+        /* 전체 배경색 설정 */
+        .stApp {
+            background-color: #fffafa; /* 은은한 핑크색 배경 */
+        }
+
+        /* 타이틀 스타일 */
+        .main-title {
+            font-size: 3rem;
+            color: #000000; /* 검은색 */
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        /* 채팅 메시지 스타일 */
+        .chat-message {
+            border-radius: 15px;
+            padding: 15px;
+            margin: 10px 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .chat-message-user {
+            background-color: #ffebef; /* 따뜻한 파스텔 핑크 */
+            color: #8b4513;
+            justify-content: flex-end;
+        }
+
+        .chat-message-assistant {
+            background-color: #ffe4e6; /* 부드러운 파스텔 복숭아 핑크색 */
+            color: #6b4226;
+            justify-content: flex-start;
+        }
+
+        .chat-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+
+        .chat-avatar-user {
+            margin-left: 10px;
+            margin-right: 0;
+        }
+
+        /* 사용자 입력 창 스타일 */
+        .stTextInput input {
+            border-radius: 15px;
+            border: 2px solid #cd857f; /* 따뜻한 핑크색 */
+        }
+
+        /* 버튼 스타일 */
+        .stButton button {
+            background-color: #cd857f; /* 따뜻한 핑크색 */
+            color: #fff;
+            border-radius: 15px;
+            padding: 10px 20px;
+        }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+# 메인 타이틀
+st.markdown("<div class='main-title'>AI 튜터 🎓</div>", unsafe_allow_html=True)
 
 # 모델 선택 옵션 추가
 model_options = ["gemini-1.5-flash", "learnlm-1.5-pro-experimental"]
@@ -33,28 +105,35 @@ if "chat_session" not in st.session_state or st.session_state.get("current_model
     st.session_state.chat_session = model.start_chat(history=[])
     st.session_state.current_model = selected_model_name
 
+# 사용자와 AI의 아이콘 URL 설정
+user_icon_url = "https://cdn-icons-png.flaticon.com/512/1995/1995531.png"  # 학생 아이콘 (책을 든 학생)
+assistant_icon_url = "https://cdn-icons-png.flaticon.com/512/4323/4323008.png"  # 튜터 아이콘 (안경 쓴 선생님)
+
 # 채팅 메시지 표시
 if "messages" not in st.session_state:
     st.session_state.messages = []
 
 for message in st.session_state.messages:
-    with st.chat_message(message["role"]):
-        st.markdown(message["content"])
+    role_class = "chat-message-user" if message["role"] == "user" else "chat-message-assistant"
+    avatar_url = user_icon_url if message["role"] == "user" else assistant_icon_url
+    avatar_class = "chat-avatar-user" if message["role"] == "user" else "chat-avatar"
+    st.markdown(
+        f"<div class='chat-message {role_class}'><img src='{avatar_url}' class='chat-avatar {avatar_class}'>{message['content']}</div>",
+        unsafe_allow_html=True
+    )
 
 # 사용자 입력 받기
-if prompt := st.chat_input("학습 내용을 입력하면 AI 튜터가 질문을 통해서 개념을 이해하도록 도와줍니다."):
+if prompt := st.chat_input("📝학습 내용을 입력하면 AI 튜터가 질문을 통해서 개념을 이해하도록 도와줍니다."):
     st.session_state.messages.append({"role": "user", "content": prompt})
-    with st.chat_message("user"):
-        st.markdown(prompt)
+    st.markdown(f"<div class='chat-message chat-message-user'>{prompt}<img src='{user_icon_url}' class='chat-avatar chat-avatar-user'></div>", unsafe_allow_html=True)
 
     # Gemini API 호출
     response = st.session_state.chat_session.send_message(prompt)
-    with st.chat_message("assistant"):
-        st.markdown(response.text)
     st.session_state.messages.append({"role": "assistant", "content": response.text})
+    st.markdown(f"<div class='chat-message chat-message-assistant'><img src='{assistant_icon_url}' class='chat-avatar'>{response.text}</div>", unsafe_allow_html=True)
 
-# 초기화 버튼
-if st.button("초기화"):
-    st.session_state.chat_session = model.start_chat(history=[])
-    st.session_state.messages = []
-    st.rerun()
+# 초기화 버튼을 사이드바로 이동
+with st.sidebar:
+    if st.button("💡 초기화"):
+        del st.session_state.messages  # 메시지 세션 상태 삭제
+        st.rerun()