Update app.py

app.py

@@ -1,9 +1,11 @@
 import os
 import openai
 import streamlit as st
+# import html # 필요 시 주석 해제
 
-# OpenAI API 설정
+# --- OpenAI API 설정 ---
 # Streamlit Cloud secrets에서 API 키 가져오기
+# 로컬 테스트 시 아래 줄을 주석 처리하고 os.getenv 부분을 활성화하세요.
 openai_api_key = st.secrets["OPENAI_API_KEY"]
 # 로컬 환경 변수에서 API 키 가져오기 (선택 사항)
 # openai_api_key = os.getenv("OPENAI_API_KEY")
@@ -11,33 +13,29 @@ openai_api_key = st.secrets["OPENAI_API_KEY"]
 # API 키가 있는지 확인
 if not openai_api_key:
     st.error("OpenAI API 키가 설정되지 않았습니다. 환경 변수나 Streamlit secrets에 키를 추가해주세요.")
-    st.stop()
+    st.stop() # API 키 없으면 앱 중지
 
 openai.api_key = openai_api_key
 
+# --- 함수 정의 ---
+
 def generate_smart_system_prompt(grade_level):
     """학년 수준에 맞는 SMART 목표 설정 시스템 프롬프트를 생성합니다."""
-    
-    # 학년 정보 추출 (예: "초등학교 6학년" -> "6")
+
+    # 학년 정보 추출 (예: "초등학교 6학년" -> "6", "초등학교")
     try:
-        if grade_level.startswith("초등학교"):
-            grade_num = grade_level.split(" ")[1].rstrip("학년")
-            school_level = "초등학교"
-        elif grade_level.startswith("중학교"):
-            grade_num = grade_level.split(" ")[1].rstrip("학년")
-            school_level = "중학교"
-        elif grade_level.startswith("고등학교"):
-            grade_num = grade_level.split(" ")[1].rstrip("학년")
-            school_level = "고등학교"
+        parts = grade_level.split(" ")
+        if len(parts) == 2:
+            school_level = parts[0]
+            grade_num = parts[1].rstrip("학년")
+            if school_level not in ["초등학교", "중학교", "고등학교"] or not grade_num.isdigit():
+                 grade_num, school_level = "알 수 없음", "알 수 없음"
         else:
-            grade_num = "알 수 없음"
-            school_level = "알 수 없음"
-    except IndexError:
-        grade_num = "알 수 없음"
-        school_level = "알 수 없음"
+            grade_num, school_level = "알 수 없음", "알 수 없음"
+    except Exception: # 광범위한 예외 처리 (분석 실패 시)
+        grade_num, school_level = "알 수 없음", "알 수 없음"
 
-    # 초등학교 6학년에 특화된, 그리고 SMART 목표 설정에 초점을 맞춘 프롬프트
-    # (요청에 따라 초등학교 6학년에 더 집중하도록 수정)
+    # 초등학교 6학년 맞춤 프롬프트
     if school_level == "초등학교" and grade_num == "6":
         prompt = f"""
         너는 초등학교 6학년 학생이 SMART 목표를 세우고 실천 계획을 만들도록 돕는 친절하고 격려하는 코치 선생님이야.
@@ -65,18 +63,18 @@ def generate_smart_system_prompt(grade_level):
 
         학생이 SMART 기준에 맞춰 목표를 구체화하고, 그 목표를 달성하기 위한 실천 계획 (최소 3가지 구체적인 행동)까지 스스로 만들었다고 판단되면,
         마지막에 학생이 직접 세운 내용을 명확하게 요약해서 보여줘.
-        예시: "정말 멋지다! 친구가 직접 세운 SMART 목표와 실천 계획을 함께 정리해볼까? \n\n**🎯 SMART 목표:** [학생이 정의한 구체적이고, 측정 가능하며, 달성 가능하고, 관련성 있고, 시간 제한이 있는 목표 요약]\n\n**👣 실천 계획:**\n1. [학생이 정의한 첫 번째 실천 단계]\n2. [학생이 정의한 두 번째 실천 단계]\n3. [학생이 정의한 세 번째 실천 단계]\n\n이렇게 계획을 세우니 목표가 훨씬 가까워진 느낌이지? 꾸준히 실천하면 꼭 이룰 수 있을 거야! 선생님이 응원할게! 😊"
-        요약하기 전에는 "이제 목표랑 계획이 다 세워진 것 같은데, 선생님이 한번 정리해볼까?" 와 같이 학생의 동의를 구하는 질문을 해줘.
+        요약 예시: "정말 멋지다! 친구가 직접 세운 SMART 목표와 실천 계획을 함께 정리해볼까? \\n\\n**🎯 SMART 목표:** [학생이 정의한 구체적이고, 측정 가능하며, 달성 가능하고, 관련성 있고, 시간 제한이 있는 목표 요약]\\n\\n**👣 실천 계획:**\\n1. [학생이 정의한 첫 번째 실천 단계]\\n2. [학생이 정의한 두 번째 실천 단계]\\n3. [학생이 정의한 세 번째 실천 단계]\\n\\n이렇게 계획을 세우니 목표가 훨씬 가까워진 느낌이지? 꾸준히 실천하면 꼭 이룰 수 있을 거야! 선생님이 응원할게! 😊"
+        요약하기 전에는 반드시 "이제 목표랑 실천 계획이 다 세워진 것 같은데, 선생님이 한번 정리해봐도 괜찮을까?" 와 같이 학생의 동의를 구하는 질문을 먼저 해줘.
         """
     else:
-        # 다른 학년 또는 기본 프롬프트 (SMART 목표 설정으로 유지하되, 언어 수준 조정 가능)
+        # 다른 학년 또는 기본 프롬프트
         prompt = f"""
         너는 {grade_level} 학생이 SMART 목표를 세우고 실천 계획을 만들도록 돕는 친절하고 격려하는 코치야.
         학생이 이루고 싶은 목표나 상황을 이야기하면, 그 목표가 SMART(Specific, Measurable, Achievable, Relevant, Time-bound) 기준에 맞도록 질문을 통해 안내해줘.
         절대 직접적인 제안이나 답을 주지 말고, 학생 스스로 생각하고 답을 찾도록 유도해줘.
         학생의 학년 수준에 맞는 언어를 사용하고, 한 번에 한 가지씩 질문하며 대화를 이끌어가줘.
         학생이 SMART 목표와 실천 계획을 모두 수립했다고 판단되면, 마지막에 학생이 만든 내용을 요약해서 정리해주고 격려해줘.
-        요약 전에는 학생에게 먼저 정리해도 될지 물어봐줘.
+        요약 전에는 반드시 "이제 목표와 계획이 잘 세워진 것 같네요. 제가 한번 정리해볼까요?" 와 같이 학생에게 먼저 정리해도 될지 물어봐줘.
         """
     return prompt
 
@@ -86,32 +84,40 @@ def openai_chat(grade_level):
         # 현재 선택된 학년 수준에 맞는 시스템 프롬프트 생성
         system_prompt = generate_smart_system_prompt(grade_level)
 
-        # 세션 상태의 첫 번째 메시지가 시스템 메시지인지 확인하고 업데이트
+        # 세션 상태의 첫 번째 메시지가 시스템 메시지인지 확인하고 업데이트/삽입
         if not st.session_state.messages or st.session_state.messages[0]["role"] != "system":
-            # 시스템 메시지가 없으면 맨 앞에 추가
+            # 시스템 메시지가 없거나 첫번째가 아니면 맨 앞에 삽입
             st.session_state.messages.insert(0, {"role": "system", "content": system_prompt})
         else:
             # 기존 시스템 메시지 내용 업데이트
             st.session_state.messages[0]["content"] = system_prompt
 
+        # API 호출 시 시스템 메시지를 포함한 전체 대화 전달
         response = openai.ChatCompletion.create(
-            model="gpt-4o",
-            messages=st.session_state.messages,  # 전체 대화 세션 전달
-            temperature=0.7, # 창의성과 일관성 조절
-            max_tokens=1000, # 응답 길이 조절 (SMART 목표 설정 대화에 충분하도록)
+            model="gpt-4o", # 또는 사용 가능한 최신 모델
+            messages=st.session_state.messages,
+            temperature=0.7,
+            max_tokens=1000, # 필요에 따라 조절
             top_p=0.9,
-            frequency_penalty=0.1, # 약간의 반복 방지
-            presence_penalty=0.1  # 약간의 새로운 주제 도입 허용
+            frequency_penalty=0.1,
+            presence_penalty=0.1
         )
         return response.choices[0].message["content"]
-    except Exception as e:
-        st.error(f"API 호출 중 오류 발생: {str(e)}")
-        return None # 오류 발생 시 None 반환
+    except openai.error.OpenAIError as e: # 구체적인 OpenAI 에러 처리
+        st.error(f"OpenAI API 오류 발생: {str(e)}")
+        return None
+    except Exception as e: # 기타 예외 처리
+        st.error(f"알 수 없는 오류 발생: {str(e)}")
+        return None
 
 # --- Streamlit 앱 UI 설정 ---
-st.set_page_config(page_title="SMART 목표 설정 도우미", page_icon="🎯", initial_sidebar_state="expanded")
+st.set_page_config(
+    page_title="SMART 목표 설정 도우미",
+    page_icon="🎯",
+    initial_sidebar_state="expanded"
+)
 
-# 페이지 스타일 커스터마이징 (기존 스타일 유지 또는 약간 수정)
+# --- 페이지 스타일 (CSS) ---
 st.markdown(
     """
     <style>
@@ -121,53 +127,65 @@ st.markdown(
         }
         /* 타이틀 스타일 */
         .main-title {
-            font-size: 2.5rem; /* 약간 작게 조정 */
+            font-size: 2.5rem;
             color: #4682b4; /* 차분한 파란색 */
             font-weight: 700;
             text-align: center;
             margin-bottom: 20px;
         }
-        /* 채팅 메시지 스타일 */
+        /* 채팅 메시지 컨테이너 */
         .chat-message {
             border-radius: 15px;
-            padding: 15px;
+            padding: 12px 15px; /* 패딩 약간 조정 */
             margin: 10px 0;
             display: flex;
             align-items: flex-start; /* 아이콘과 텍스트 상단 정렬 */
-            flex-wrap: nowrap; /* 줄바꿈 방지 */
+            flex-wrap: nowrap;
             word-break: break-word;
-            max-width: 85%; /* 메시지 최대 너비 설정 */
+            max-width: 85%; /* 메시지 최대 너비 */
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 약간의 그림자 효과 */
         }
+        /* 사용자 메시지 스타일 */
         .chat-message-user {
             background-color: #e0f7fa; /* 밝은 청록색 */
             color: #00796b; /* 어두운 청록색 */
             margin-left: auto; /* 오른쪽 정��� */
-            flex-direction: row-reverse; /* 아이콘 오른쪽으로 */
+            flex-direction: row-reverse; /* 내용과 아이콘 순서 변경 */
         }
+        /* AI 메시지 스타일 */
         .chat-message-assistant {
-            background-color: #fff0f5; /* 라벤더 블러시 (핑크계열) */
+            background-color: #fff0f5; /* 라벤더 블러시 */
             color: #c71585; /* 미디엄 바이올렛 레드 */
             margin-right: auto; /* 왼쪽 정렬 */
-            flex-direction: row; /* 아이콘 왼쪽 (기본값) */
+            flex-direction: row; /* 기본 순서 (아이콘 먼저) */
         }
+        /* 아바타(아이콘) 스타일 */
         .chat-avatar {
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            margin-right: 10px;
+            margin-right: 10px; /* AI 메시지 아이콘 오른쪽 여백 */
             flex-shrink: 0; /* 아이콘 크기 고정 */
         }
+        /* 사용자 아바타 스타일 */
         .chat-avatar-user {
-            margin-left: 10px;
+            margin-left: 10px; /* 사용자 메시지 아이콘 왼쪽 여백 */
             margin-right: 0;
         }
+        /* 채팅 내용 스타일 */
         .chat-content {
             flex-grow: 1; /* 텍스트 영역이 남은 공간 차지 */
+            /* 텍스트 선택 가능하게 (기본값) */
+            user-select: text;
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
         }
         /* 사용자 입력 창 스타일 */
         .stTextInput input {
             border-radius: 15px;
             border: 2px solid #add8e6; /* 밝은 파란색 */
+            padding: 10px 15px;
         }
         /* 버튼 스타일 */
         .stButton button {
@@ -175,6 +193,14 @@ st.markdown(
             color: #fff;
             border-radius: 15px;
             padding: 10px 20px;
+            border: none;
+            transition: background-color 0.2s ease; /* 부드러운 색상 변경 효과 */
+        }
+        .stButton button:hover {
+            background-color: #5a9bd3; /* 호버 시 약간 밝게 */
+        }
+        .stButton button:active {
+            background-color: #3e74a0; /* 클릭 시 약간 어둡게 */
         }
     </style>
     """,
@@ -187,124 +213,105 @@ st.markdown("<div class='main-title'>🎯 SMART 목표 설정 도우미 ✍️</
 # --- 사이드바 설정 ---
 with st.sidebar:
     st.header("⚙️ 설정")
-    # 학년 수준 선택 (초등학교 6학년 기본 선택)
+    # 학년 수준 선택
     grade_level_options = [
         "초등학교 1학년", "초등학교 2학년", "초등학교 3학년", "초등학교 4학년", "초등학교 5학년", "초등학교 6학년",
         "중학교 1학년", "중학교 2학년", "중학교 3학년",
         "고등학교 1학년", "고등학교 2학년", "고등학교 3학년"
     ]
-    # 초등학교 6학년 인덱스 찾기
+    # 초등학교 6학년 인덱스 찾기 (더 안전하게)
     try:
         default_index = grade_level_options.index("초등학교 6학년")
     except ValueError:
-        default_index = 0 # 혹시 목록에 없으면 첫 번째 항목 선택
+        default_index = 5 # 리스트에 없으면 6번째 항목(초6)으로 가정
 
-    grade_level = st.selectbox(
+    # 학년 선택 selectbox - 선택 변경 시 시스템 프롬프트 업데이트 위해 콜백 추가 가능성 고려
+    selected_grade = st.selectbox(
         "👤 학생의 학년을 선택하세요:",
         grade_level_options,
-        index=default_index # 초등학교 6학년을 기본값으로 설정
+        index=default_index,
+        key="grade_select" # 키 추가
     )
 
     # 초기화 버튼
     if st.button("🔄 대화 초기화"):
-        # 메시지 기록 삭제 및 시스템 프롬프트 재생성 준비
+        # 메시지 기록 삭제
         st.session_state.messages = []
         st.success("대화 내용이 초기화되었습니다. 새로운 목표를 설정해보세요!")
         # 페이지 새로고침 없이 즉시 적용되도록 rerun 사용
         st.rerun()
 
     st.info("💡 AI 코치가 질문을 통해 스스로 SMART 목표와 실천 계획을 세우도록 도와줄 거예요!")
-
+    st.markdown("---") # 구분선
+    st.caption("Powered by OpenAI GPT-4o") # 모델 정보 등 추가 정보
 
 # --- 채팅 로직 ---
 
-# 채팅 세션 초기화 (기본 시스템 메시지 없이 시작, openai_chat에서 동적으로 추가)
+# 채팅 세션 초기화 (메시지 리스트가 없으면 생성)
 if "messages" not in st.session_state:
     st.session_state.messages = []
-    # 필요하다면 여기에 초기 환영 메시지 추가 가능
-    # st.session_state.messages.append({"role": "assistant", "content": "안녕하세요! 어떤 목표를 세우고 싶나요? 함께 이야기해봐요!"})
-
 
-# 사용자와 AI의 아이콘 URL 설정
+# 사용자와 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"  # 튜터 아이콘
 
-# 채팅 메시지 표시
-# 시스템 메시지는 화면에 표시하지 않음
-for message in st.session_state.messages:
-    if message["role"] != "system":
-        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"
-        align_class = "chat-message-user" if message["role"] == "user" else "chat-message-assistant"
+# 초기 메시지 추가 (세션이 비어있을 때만 실행)
+if not st.session_state.messages:
+     # 현재 선택된 학년으로 시스템 프롬프트 설정
+    system_prompt = generate_smart_system_prompt(selected_grade) # 사이드바에서 선택된 값 사용
+    st.session_state.messages.append({"role": "system", "content": system_prompt})
+    # 초기 환영 메시지 추가
+    welcome_message = "안녕! 👋 나는 네 목표 설정을 도와줄 AI 코치 선생님이야. 이루고 싶은 목표나 하고 싶은 일이 있으면 나에게 이야기해 줄래? 같이 멋진 계획을 세워보자! 😊"
+    st.session_state.messages.append({"role": "assistant", "content": welcome_message})
+    # 초기 메시지는 아래 메시지 표시 루프에서 자동으로 그려짐. 여기서 st.rerun() 불필요.
+
+# --- 채팅 메시지 표시 ---
+# st.session_state.messages에 있는 모든 메시지를 순서대로 화면에 그림
+for index, message in enumerate(st.session_state.messages):
+    if message["role"] == "system":
+        continue # 시스템 메시지는 건너뜀
 
-        # HTML 구조 수정하여 아이콘과 내용 분리
+    role = message["role"]
+    content = message["content"]
+    # content = html.escape(message["content"]) # HTML 태그가 문제될 경우 주석 해제
+
+    # 역할에 따라 다른 스타일과 구조 적용
+    if role == "user":
+        # 사용자 메시지: [내용] [아이콘]
         st.markdown(
             f"""
-            <div class='chat-message {align_class}'>
-                {'<div class="chat-content">' + message['content'] + '</div>' if message["role"] == "assistant" else ""}
-                <img src='{avatar_url}' class='chat-avatar {avatar_class}'>
-                {'<div class="chat-content">' + message['content'] + '</div>' if message["role"] == "user" else ""}
+            <div class='chat-message chat-message-user' key='user_msg_{index}'>
+                <div class="chat-content">{content}</div>
+                <img src='{user_icon_url}' class='chat-avatar chat-avatar-user'>
             </div>
             """,
             unsafe_allow_html=True
         )
-
-
-# 사용자 입력 받기
-if prompt := st.chat_input("🎯 이루고 싶은 목표나 하고 싶은 일을 적어보세요! (예: 수학 시험 잘 보기)"):
-    # 사용자의 메시지를 세션에 추가
-    st.session_state.messages.append({"role": "user", "content": prompt})
-
-    # 사용자 메시지 즉시 화면에 표시
-    st.markdown(
-        f"""
-        <div class='chat-message chat-message-user'>
-            <img src='{user_icon_url}' class='chat-avatar chat-avatar-user'>
-            <div class="chat-content">{prompt}</div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
-
-    # AI 응답 생성 및 표시
-    with st.spinner("AI 코치가 생각 중이에요... 🤔"):
-        # OpenAI API 호출 (이제 grade_level만 전달)
-        response = openai_chat(grade_level)
-
-    if response: # 응답이 성공적으로 생성된 경우
-        st.session_state.messages.append({"role": "assistant", "content": response})
-        # AI 응답 화면에 표시
+    elif role == "assistant":
+        # AI 메시지: [아이콘] [내용]
         st.markdown(
             f"""
-            <div class='chat-message chat-message-assistant'>
+            <div class='chat-message chat-message-assistant' key='assistant_msg_{index}'>
                 <img src='{assistant_icon_url}' class='chat-avatar'>
-                <div class="chat-content">{response}</div>
+                <div class="chat-content">{content}</div>
             </div>
             """,
             unsafe_allow_html=True
         )
-    else:
-        # API 호출 실패 시, 사용자에게 알림 (오류 메시지는 openai_chat 내부에서 st.error로 표시됨)
-        # 실패한 사용자 메시지를 롤백할 수도 있음 (선택 사항)
-        # st.session_state.messages.pop()
-        pass
 
-# 초기 메시지 추가 (세션이 비어있고, 아직 사용자가 입력하지 않았을 때)
-if not st.session_state.messages:
-     # 초기 시스템 프롬프트 설정 (필수)
-    system_prompt = generate_smart_system_prompt(grade_level)
-    st.session_state.messages.append({"role": "system", "content": system_prompt})
-    # 초기 ��영 메시지 추가
-    welcome_message = "안녕! 👋 나는 네 목표 설정을 도와줄 AI 코치 선생님이야. 이루고 싶은 목표나 하고 싶은 일이 있으면 나에게 이야기해 줄래? 같이 멋진 계획을 세워보자! 😊"
-    st.session_state.messages.append({"role": "assistant", "content": welcome_message})
-    # 환영 메시지 표시
-    st.markdown(
-        f"""
-        <div class='chat-message chat-message-assistant'>
-            <img src='{assistant_icon_url}' class='chat-avatar'>
-            <div class="chat-content">{welcome_message}</div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
+# --- 사용자 입력 처리 ---
+if prompt := st.chat_input("🎯 이루고 싶은 목표나 하고 싶은 일을 적어보세요! (예: 수학 시험 잘 보기)"):
+    # 1. 사용자 메시지를 세션 상태에 추가
+    st.session_state.messages.append({"role": "user", "content": prompt})
+
+    # 2. AI 응답 생성 (스피너 표시)
+    with st.spinner("AI 코치가 생각 중이에요... 🤔"):
+        response = openai_chat(selected_grade) # 사이드바에서 선택된 학년 정보 전달
+
+    # 3. AI 응답이 성공적이면 세션 상태에 추가
+    if response:
+        st.session_state.messages.append({"role": "assistant", "content": response})
+    # API 호출 실패 시 openai_chat 함수 내에서 st.error가 호출됨
+
+    # 4. 페이지를 다시 로드하여 새 메시지를 포함한 전체 대화 내용을 그림
+    st.rerun()