Update app.py

app.py

@@ -3,58 +3,126 @@ import openai
 import streamlit as st
 
 # OpenAI API 설정
-openai_api_key = os.getenv("OPENAI_API_KEY")
+# Streamlit Cloud secrets에서 API 키 가져오기
+openai_api_key = st.secrets["OPENAI_API_KEY"]
+# 로컬 환경 변수에서 API 키 가져오기 (선택 사항)
+# openai_api_key = os.getenv("OPENAI_API_KEY")
+
+# API 키가 있는지 확인
+if not openai_api_key:
+    st.error("OpenAI API 키가 설정되지 않았습니다. 환경 변수나 Streamlit secrets에 키를 추가해주세요.")
+    st.stop()
+
 openai.api_key = openai_api_key
 
-def openai_chat(text, grade_level):
+def generate_smart_system_prompt(grade_level):
+    """학년 수준에 맞는 SMART 목표 설정 시스템 프롬프트를 생성합니다."""
+    
+    # 학년 정보 추출 (예: "초등학교 6학년" -> "6")
     try:
-        # 학년 수준에 따른 프롬프트 추가
-        grade_prompt = ""
         if grade_level.startswith("초등학교"):
-            grade_num = grade_level[5:].rstrip("학년")
-            grade_prompt = f"이 학생은 초등학교 {grade_num}학년입니다. 질문은 이 학생의 학년 수준에 맞춰서 해주세요. 학생이 스스로 생각하고 답을 찾을 수 있도록 소크라테스 산파법을 활용하여 질문해주세요.  정답을 직접적으로 말하거나 설명을 너무 자세하게 하지 마세요. 대신 질문을 통해 학생이 스스로 답을 생각하고, 개념을 이해하도록 유도해주세요. 학생의 학년에 맞게 질문과 답하는 내용의 범위를 해당 학년의 교육과정에 맞게 범위를 조정하세요."
+            grade_num = grade_level.split(" ")[1].rstrip("학년")
+            school_level = "초등학교"
         elif grade_level.startswith("중학교"):
-            grade_num = grade_level[3:].rstrip("학년")
-            grade_prompt = f"이 학생은 중학교 {grade_num}학년입니다. 질문은 이 학생의 학년 수준에 맞춰서 해주세요. 학생이 스스로 생각하고 답을 찾을 수 있도록 소크라테스 산파법을 활용하여 질문해주세요. 정답을 직접적으로 말하거나 설명을 너무 자세하게 하지 마세요. 대신 질문을 통해 학생이 스스로 답을 생각하고, 개념을 이해하도록 유도해주세요. 학생의 학년에 맞게 질문과 답하는 내용의 범위를 해당 학년의 교육과정에 맞게 범위를 조정하세요."
+            grade_num = grade_level.split(" ")[1].rstrip("학년")
+            school_level = "중학교"
         elif grade_level.startswith("고등학교"):
-            grade_num = grade_level[4:].rstrip("학년")
-            grade_prompt = f"이 학생은 고등학교 {grade_num}학년입니다. 질문은 이 학생의 학년 수준에 맞춰서 해주세요. 학생이 스스로 생각하고 답을 찾을 수 있도록 소크라테스 산파법을 활용하여 질문해주세요. 정답을 직접적으로 말하거나 설명을 너무 자세하게 하지 마세요. 대신 질문을 통해 학생이 스스로 답을 생각하고, 개념을 이해하도록 유도해주세요. 학생의 학년에 맞게 질문과 답하는 내용의 범위를 해당 학년의 교육과정에 맞게 범위를 조정하세요."
+            grade_num = grade_level.split(" ")[1].rstrip("학년")
+            school_level = "고등학교"
+        else:
+            grade_num = "알 수 없음"
+            school_level = "알 수 없음"
+    except IndexError:
+        grade_num = "알 수 없음"
+        school_level = "알 수 없음"
+
+    # 초등학교 6학년에 특화된, 그리고 SMART 목표 설정에 초점을 맞춘 프롬프트
+    # (요청에 따라 초등학교 6학년에 더 집중하도록 수정)
+    if school_level == "초등학교" and grade_num == "6":
+        prompt = f"""
+        너는 초등학교 6학년 학생이 SMART 목표를 세우고 실천 계획을 만들도록 돕는 친절하고 격려하는 코치 선생님이야.
+        학생의 이름은 부르지 않고, '친구' 또는 '학생'이라고 불러줘. 반말로 친근하게 대화해줘.
+        학생이 이루고 싶은 목표나 상황을 이야기하면, 그 목표가 SMART 기준에 맞도록 자연스럽게 질문을 던져줘.
+        SMART는 목표를 더 명확하고 달성 가능하게 만드는 방법이야:
+        - S (Specific - 구체적인): 목표가 명확하고 자세한가? 무엇을 이루고 싶은지 정확히 아는 거야.
+        - M (Measurable - 측정 가능한): 목표를 달성했는지 어떻게 알 수 있을까? 숫자로 표현할 수 있으면 좋아.
+        - A (Achievable - 달성 가능한): 이 목표를 실제로 이룰 수 있을까? 너무 어렵거나 쉽지 않게 설정하는 거야.
+        - R (Relevant - 관련성 있는): 이 목표가 왜 중요할까? 나에게 의미가 있는 목표여야 해.
+        - T (Time-bound - 시간 제한이 있는): 언제까지 이 목표를 이루고 싶니? 마감일을 정하는 거야.
+
+        절대 네가 목표나 계획�� 직접 제시하거나 정답을 알려주지 마.
+        대신, 학생 스스로 생각하고 답을 찾도록 소크라테스식 질문을 사용해줘. 예를 들면:
+        - "우와, 좋은 생각인데! 그 목표를 조금 더 자세하게 설명해 줄 수 있을까?" (Specific 유도)
+        - "목표를 이루면 어떤 모습일지 상상해볼래? 그걸 어떻게 확인할 수 있을까?" (Measurable 유도)
+        - "그 목표를 이루려면 어떤 노력이 필요할까? 혹시 도움이 필요한 부분이 있을까?" (Achievable 유도)
+        - "이 목표가 친구에게 왜 그렇게 중요해?" (Relevant 유도)
+        - "언제까지 그 목표를 딱! 이루고 싶어?" (Time-bound 유도)
+        - "좋아, 그럼 이제 그 목표를 이루기 위해 어떤 작은 단계들을 하나씩 해볼 수 있을까?" (실천 계획 유도)
+
+        학생이 목표를 정하는 과정에서 어려움을 느끼거나 주제에서 벗어나면 부드럽게 다시 목표 설정으로 이끌어줘.
+        학생의 대답을 칭찬하고 격려하며 자신감을 심어줘.
+        한 번에 너무 많은 질문을 하지 말고, 학생의 대답을 듣고 다음 질문으로 넘어가줘.
+
+        학생이 SMART 기준에 맞춰 목표를 구체화하고, 그 목표를 달성하기 위한 실천 계획 (최소 3가지 구체적인 행동)까지 스스로 만들었다고 판단되면,
+        마지막에 학생이 직접 세운 내용을 명확하게 요약해서 보여줘.
+        예시: "정말 멋지다! 친구가 직접 세운 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
+
+def openai_chat(grade_level):
+    """OpenAI API를 호출하여 채팅 응답을 생성합니다."""
+    try:
+        # 현재 선택된 학년 수준에 맞는 시스템 프롬프트 생성
+        system_prompt = generate_smart_system_prompt(grade_level)
 
-        # 시스템 메시지를 세션 시작 시 한 번만 추가
-        if not any(message["role"] == "system" for message in st.session_state.messages):
-            st.session_state.messages.append({"role": "system", "content": grade_prompt})
+        # 세션 상태의 첫 번째 메시지가 시스템 메시지인지 확인하고 업데이트
+        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"] = grade_prompt
+            # 기존 시스템 메시지 내용 업데이트
+            st.session_state.messages[0]["content"] = system_prompt
 
         response = openai.ChatCompletion.create(
             model="gpt-4o",
             messages=st.session_state.messages,  # 전체 대화 세션 전달
-            temperature=0.7,
-            max_tokens=3000, # max_tokens 값 조정
+            temperature=0.7, # 창의성과 일관성 조절
+            max_tokens=1000, # 응답 길이 조절 (SMART 목표 설정 대화에 충분하도록)
             top_p=0.9,
-            frequency_penalty=0,
-            presence_penalty=0
+            frequency_penalty=0.1, # 약간의 반복 방지
+            presence_penalty=0.1  # 약간의 새로운 주제 도입 허용
         )
         return response.choices[0].message["content"]
     except Exception as e:
-        return f"에러 발생: {str(e)}"
+        st.error(f"API 호출 중 오류 발생: {str(e)}")
+        return None # 오류 발생 시 None 반환
 
-# Streamlit 앱 설정
-st.set_page_config(page_title="질문하는 AI 튜터", page_icon="🎓", initial_sidebar_state="expanded")
+# --- Streamlit 앱 UI 설정 ---
+st.set_page_config(page_title="SMART 목표 설정 도우미", page_icon="🎯", initial_sidebar_state="expanded")
 
-# 페이지 스타일 커스터마이징
+# 페이지 스타일 커스터마이징 (기존 스타일 유지 또는 약간 수정)
 st.markdown(
     """
     <style>
         /* 전체 배경색 설정 */
         .stApp {
-            background-color: #fffafa; /* 은은한 핑크색 배경 */
+            background-color: #f0f8ff; /* 부드러운 하늘색 배경 */
         }
         /* 타이틀 스타일 */
         .main-title {
-            font-size: 3rem;
-            color: #000000; /* 검은색 */
+            font-size: 2.5rem; /* 약간 작게 조정 */
+            color: #4682b4; /* 차분한 파란색 */
             font-weight: 700;
             text-align: center;
             margin-bottom: 20px;
@@ -65,38 +133,45 @@ st.markdown(
             padding: 15px;
             margin: 10px 0;
             display: flex;
-            align-items: center;
-            flex-wrap: wrap;
+            align-items: flex-start; /* 아이콘과 텍스트 상단 정렬 */
+            flex-wrap: nowrap; /* 줄바꿈 방지 */
             word-break: break-word;
+            max-width: 85%; /* 메시지 최대 너비 설정 */
         }
         .chat-message-user {
-            background-color: #ffebef; /* 따뜻한 파스텔 핑크 */
-            color: #8b4513;
-            justify-content: flex-end;
+            background-color: #e0f7fa; /* 밝은 청록색 */
+            color: #00796b; /* 어두운 청록색 */
+            margin-left: auto; /* 오른쪽 정렬 */
+            flex-direction: row-reverse; /* 아이콘 오른쪽으로 */
         }
         .chat-message-assistant {
-            background-color: #ffe4e6; /* 부드러운 파스텔 복숭아 핑크색 */
-            color: #6b4226;
-            justify-content: flex-start;
+            background-color: #fff0f5; /* 라벤더 블러시 (핑크계열) */
+            color: #c71585; /* 미디엄 바이올렛 레드 */
+            margin-right: auto; /* 왼쪽 정렬 */
+            flex-direction: row; /* 아이콘 왼쪽 (기본값) */
         }
         .chat-avatar {
             width: 40px;
             height: 40px;
             border-radius: 50%;
             margin-right: 10px;
+            flex-shrink: 0; /* 아이콘 크기 고정 */
         }
         .chat-avatar-user {
             margin-left: 10px;
             margin-right: 0;
         }
+        .chat-content {
+            flex-grow: 1; /* 텍스트 영역이 남은 공간 차지 */
+        }
         /* 사용자 입력 창 스타일 */
         .stTextInput input {
             border-radius: 15px;
-            border: 2px solid #cd857f; /* 따뜻한 핑크색 */
+            border: 2px solid #add8e6; /* 밝은 파란색 */
         }
         /* 버튼 스타일 */
         .stButton button {
-            background-color: #cd857f; /* 따뜻한 핑크색 */
+            background-color: #4682b4; /* 차분한 파란색 */
             color: #fff;
             border-radius: 15px;
             padding: 10px 20px;
@@ -107,49 +182,129 @@ st.markdown(
 )
 
 # 메인 타이틀
-st.markdown("<div class='main-title'>질문하는 AI 튜터 🎓</div>", unsafe_allow_html=True)
-
-# 채팅 세션 초기화
-if "messages" not in st.session_state:
-    st.session_state.messages = [
-        {"role": "system", "content": "친절하고 든든한 튜터가 되어 학생이 목표를 달성하도록 안내하고, 학생이 주제에서 벗어나면 부드럽게 다시 집중하도록 도와주세요. 학생이 질문에 대해 틀린 대답을 하는 경우, 정답을 바로 알려주기보다, 스스로 오류를 깨닫고 정답을 찾아갈 수 있도록 질문을 통해 유도해주세요.  큰 개념은 단계적으로 이해할 수 있도록 돕고, 개념을 더 깊이 탐구할 수 있도록 질문을 던져 주세요. 학생이 부담을 느끼지 않도록 한 번에 한 가지 질문씩 해주세요. 학생이 개념을 이해했는지 확인되면 대화를 마무리해주세요."}
-    ]
+st.markdown("<div class='main-title'>🎯 SMART 목표 설정 도우미 ✍️</div>", unsafe_allow_html=True)
 
-# 사용자와 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"  # 튜터 아이콘 (안경 쓴 선생님)
-
-# 학년 수준 선택
+# --- 사이드바 설정 ---
 with st.sidebar:
+    st.header("⚙️ 설정")
+    # 학년 수준 선택 (초등학교 6학년 기본 선택)
     grade_level_options = [
         "초등학교 1학년", "초등학교 2학년", "초등학교 3학년", "초등학교 4학년", "초등학교 5학년", "초등학교 6학년",
         "중학교 1학년", "중학교 2학년", "중학교 3학년",
         "고등학교 1학년", "고등학교 2학년", "고등학교 3학년"
     ]
-    grade_level = st.selectbox("📚 학년 수준을 선택하세요:", grade_level_options, index=0)
+    # 초등학교 6학년 인덱스 찾기
+    try:
+        default_index = grade_level_options.index("초등학교 6학년")
+    except ValueError:
+        default_index = 0 # 혹시 목록에 없으면 첫 번째 항목 선택
+
+    grade_level = st.selectbox(
+        "👤 학생의 학년을 선택하세요:",
+        grade_level_options,
+        index=default_index # 초등학교 6학년을 기본값으로 설정
+    )
+
     # 초기화 버튼
-    if st.button("💡 초기화"):
-        del st.session_state.messages  # 메시지 세션 상태 삭제
+    if st.button("🔄 대화 초기화"):
+        # 메시지 기록 삭제 및 시스템 프롬프트 재생성 준비
+        st.session_state.messages = []
+        st.success("대화 내용이 초기화되었습니다. 새로운 목표를 설정해보세요!")
+        # 페이지 새로고침 없이 즉시 적용되도록 rerun 사용
         st.rerun()
 
+    st.info("💡 AI 코치가 질문을 통해 스스로 SMART 목표와 실천 계획을 세우도록 도와줄 거예요!")
+
+
+# --- 채팅 로직 ---
+
+# 채팅 세션 초기화 (기본 시스템 메시지 없이 시작, openai_chat에서 동적으로 추가)
+if "messages" not in st.session_state:
+    st.session_state.messages = []
+    # 필요하다면 여기에 초기 환영 메시지 추가 가능
+    # st.session_state.messages.append({"role": "assistant", "content": "안녕하세요! 어떤 목표를 세우고 싶나요? 함께 이야기해봐요!"})
+
+
+# 사용자와 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"
+
+        # HTML 구조 수정하여 아이콘과 내용 분리
         st.markdown(
-            f"<div class='chat-message {role_class}'><img src='{avatar_url}' class='chat-avatar {avatar_class}'>{message['content']}</div>",
+            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>
+            """,
             unsafe_allow_html=True
         )
 
+
 # 사용자 입력 받기
-if prompt := st.chat_input("📝학습 내용을 입력하면 AI 튜터가 질문을 통해서 개념을 이해하도록 도와줍니다."):
+if prompt := st.chat_input("🎯 이루고 싶은 목표나 하고 싶은 일을 적어보세요! (예: 수학 시험 잘 보기)"):
     # 사용자의 메시지를 세션에 추가
     st.session_state.messages.append({"role": "user", "content": 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)
 
-    # OpenAI API 호출
-    response = openai_chat(prompt, grade_level)
-    st.session_state.messages.append({"role": "assistant", "content": response})
-    st.markdown(f"<div class='chat-message chat-message-assistant'><img src='{assistant_icon_url}' class='chat-avatar'>{response}</div>", unsafe_allow_html=True)
+    # 사용자 메시지 즉시 화면에 표시
+    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 응답 화면에 표시
+        st.markdown(
+            f"""
+            <div class='chat-message chat-message-assistant'>
+                <img src='{assistant_icon_url}' class='chat-avatar'>
+                <div class="chat-content">{response}</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
+    )