app.py

import os
import time
import streamlit as st
import google.generativeai as genai
from streamlit_extras.colored_header import colored_header
from streamlit_extras.add_vertical_space import add_vertical_space
import markdown

# Google Gemini API 키 설정
genai.configure(api_key=os.environ["GEMINI_API_KEY"])

# 모델 설정
generation_config = {
    "temperature": 0.7,
    "top_p": 0.85,
    "top_k": 64,
    "max_output_tokens": 25000,
    "response_mime_type": "text/plain",
}

model = genai.GenerativeModel(
    model_name="gemini-2.0-flash-thinking-exp-01-21",
    generation_config=generation_config,
)

SYSTEM_PROMPT = """
대상 학년: {grade}
성취기준 및 주요 내용: {achievement_standard}

위 정보를 바탕으로 핵심 아이디어 이해를 목표로 하는 {grade} 수준에 적합한 개념기반 탐구학습을 설계해 주세요. 다음 구성 요소에 따라 상세하고 체계적으로 설명해야 합니다. 
각 구성 요소는 서로 연결되고 유기적으로 구성되어야 하며, 학생들의 흥미와 참여를 유도할 수 있는 창의적이고 혁신적인 활동들을 제시해야 합니다. 
특히, 모든 활동은 학생들이 스스로 핵심 아이디어를 발견하고 깊이 있게 이해할 수 있도록 설계되어야 합니다. 
먼저 스트랜드를 2~3개로 설정하세요.스트랜드(Strand)는 단원의 소주제와 같으며, 각 스트랜드는 여러 차시의 수업으로 구성됩니다. 
스트랜드 안에서는 "관계맺기 - 집중하기 - 조사하기 - 조직 및 정리하기 - 일반화 - 전이 - 성찰하기"의 단계의 개념기반 탐구학습을 설계해야합니다.
각 단계에서는 해당 단계에 맞는 탐구 질문과 일반화가 제시되어야 하고, 그 일반화에 도달할 수 있는 단계별 개념기반 탐구학습 활동이 구체적이고 상세하게 제시되어야 합니다.(그리고 내용 생략은 하지말고 모든 내용을 출력하세요.)


1. 핵심 아이디어 (Key Ideas & Generalizations):
이 주제를 관찰하는 가장 중요한 관점(Conceptual Lens)은 무엇인가?
이 주제를 통해 학생들이 이해해야 할 가장 중요한 아이디어(Key Ideas)는 무엇인가? 2-3개의 문장으로 명확하게 기술하세요.
위 아이디어들을 뒷받침하는 일반화된 지식(Generalizations)을 3-5개의 문장으로 설명하세요.

2. 매크로 개념 (Macro Concepts) 및 마이크로 개념 (Micro Concepts):
이 주제를 이해하는 데 필요한 큰 틀의 개념(매크로 개념, Conceptual Lens)은 무엇인가?
이 주제와 관련된 구체적인 교과 개념(마이크로 개념, Subject-Specific Concepts)은 무엇인가?
매크로 개념과 마이크로 개념 사이의 관계를 어떻게 설명할 것인가?  구체적인 예시를 사용하여 설명하세요.

3. 지식의 범주 (Knowledge Categories -  린 에릭슨의 분류 기준):
사실 (Facts): 이 주제와 관련된 중요한 사실들을 최소 10개 이상 나열하세요.
개념 (Concepts): 이 주제를 이해하는 데 필요한 핵심 개념들을 정의하고, 각 개념에 대한 예시를 제시하세요. 최소 3개 이상 제시하세요.
일반화 (Generalizations): 개념들 사이의 관계를 설명하는 일반화된 진술을 최소 3개 이상 제시하세요.
원리 (Principles): 일반화를 뒷받침하는 과학적 원리 또는 이론들을 설명하세요. 최소 2개 이상 제시하세요.

4. 탐구 질문 (Inquiry Questions):
학생들의 탐구를 자극하고 핵심 개념 및 일반화로 유도할 수 있는 탐구 질문들을 5개 이상 제시하세요. 질문은 구체적이고 탐구 가능해야 하며, 다양한 수준의 사고를 요구해야 합니다.  각 질문이 어떤 핵심 개념과 연결되는지 명시하세요.

5. 스트랜드별 개념기반 탐구학습 과정 설계: 앞서 제시된 핵심 아이디어 (Key Ideas & Generalizations), 매크로 개념 (Macro Concepts) 및 마이크로 개념 (Micro Concepts), 지식의 범주 (Knowledge Categories -  린 에릭슨의 분류 기준), 탐구 질문 (Inquiry Questions)의 출력 내용을 기반으로 다음 단계에 따라 탐구 학습 과정을 설계하세요. 모든 활동은 학생들이 핵심 아이디어를 이해하도록 돕는 데 초점을 맞춰야 합니다.

(1) 관계 맺기 (Engaging):
 핵심 아이디어에 대한 흥미와 호기심을 유발하고 학생들의 지적, 정서적 수업 참여를 유도하는 활동을 제시하세요. (예: 흥미로운 이야기, 시각 자료, 게임 등)
 학생들의 사전 지식을 활성화하고 핵심 아이디어와 관련된 탐구 질문을 유도하는 활동을 제시하세요. (예: 브레인스토밍, 마인드맵, 질의응답 등)

(2) 집중하기 (Focusing):
 교과 개념을 명확하게 제시하고 관련된 사실적 예를 2-3개 소개하는 활동을 제시하세요. (예: 강의, 설명, 시범 실험 등)

(3) 조사하기 (Investigating):
 개념 관련 사례들을 조사하고 탐구하는 활동을 제시하세요. (예: 실험, 관찰, 조사, 토론, 자료 분석 등)
 추가적인 사례 제시를 통해 개념 이해를 확장하는 활동을 제시하세요.

(4) 조직 및 정리하기 (Organizing and Sorting):
 사실적, 개념적 수준에서 생각을 구성하고 정리하는 활동을 제시하세요. (예: 표 만들기, 그래프 그리기, 개념 지도 작성 등)
 다양한 자료와 방법, 교과를 활용하여 개념과 생각을 나타내는 활동을 제시하세요. (예: 그림 그리기, 글쓰기, 발표, 모형 만들기 등)

(5) 일반화하기 (Generalizing):
 사실적 예시에서 패턴을 발견하고 연결성을 찾아 일반화를 도출하는 활동을 제시하세요. (예: 벤 다이어그램, 귀납적 추론 활동 등)
 일반화를 명료화하고 다듬는 활동을 제시하세요.

(6) 전이하기 (Transferring):
 일반화의 유효성을 검증하고 정당화하는 활동을 제시하세요.
 새로운 상황에 일반화를 적용하고, 학습에 대해 의미 있는 행동을 취하는 활동을 제시하세요. (예: 문제 해결, 의사 결정, 창의적 산출물 제작 등)
 예측 및 가정을 형성하기 위해 경험과 이해를 활용하는 활동을 제시하세요.

(7) 성찰하기 (Reflecting):
 학습 주체로서 자신을 인식하고 학습 과정을 계획하고 통제하는 활동을 제시하세요. (예: 학습 계획 세우기, 학습 일지 작성 등)
 자신의 학습 과정을 평가하고 개선하는 활동을 제시하세요. (예: 자기 평가, 동료 평가, 피드백 활용 등)


6. 평가 계획 및 수행과제(GRASPS), 평가 루브릭(상, 중, 하 평어):
 각 스트랜드 및 핵심 개념에 대한 학생들의 이해도를 평가할 수 있는 평가 방법 및 루브릭을 제시하세요. (관찰, 발표, 포트폴리오, 자기 평가, 동료 평가, 퀴즈, 시험, 수행 과제 등)
 루브릭은 상, 중, 하에 대한 구체적인 평가 기준과 각 수준에 해당하는 학생의 작업 또는 수행 예시를 포함해야 합니다.
 평가는 단순히 지식 암기 여부를 묻는 것이 아니라, 학생들의 탐구 과정, 사고력, 문제 해결 능력, 협력적 태도, 개념적 이해, 일반화 도출 능력, 전이 능력 등을 종합적으로 평가해야 합니다.
 GRASPS(Goal, Role, Audience, Situation, Product/Performance, Standards) 요소를 활용하여 수행 과제를 설계하세요.

7. 개념적 이해를 위한 팁 (Tips for Conceptual Understanding):
학생들이 핵심 개념을 깊이 있게 이해하고 연결하며, 일반화를 도출하고 적용할 수 있도록 돕는 효과적인 교수 전략은 무엇인가?
오개념을 예방하고 해결하는 방법은 무엇인가?
학생들의 다양한 학습 스타일과 요구를 충족하는 방법은 무엇인가?
핵심 개념과 관련된 실생활 사례를 제시하여 학습의 의미와 관련성을 높이는 방안을 제시하세요.  멀티미디어, 시각 자료, 게임, 협력 학습 등 다양한 교수법을 활용하는 방안을 제시하세요.
"""


def generate_curriculum(grade, achievement_standard):
    prompt = [
        SYSTEM_PROMPT.format(grade=grade, achievement_standard=achievement_standard),
    ]
    prompt = "\n".join(prompt)

    full_text = ""
    try:
        response = model.generate_content(prompt, stream=True)
        for chunk in response:
            full_text += chunk.text
            html_text = markdown.markdown(full_text, extensions=['tables', 'fenced_code'])
            output_area.markdown(html_text, unsafe_allow_html=True)
            time.sleep(0.05)
    except Exception as e:
        st.error(f"계획서 생성 오류: {e}")
        return ""
    return full_text


# 챗봇 함수 (수정 및 추가 자료 생성)
def chat_with_ai(user_input, context):
    prompt = f"{context}\nUser: {user_input}\nAI:"
    full_text = ""
    try:
        response = model.generate_content(prompt, stream=True)
        for chunk in response:
            full_text += chunk.text
    except Exception as e:
        st.error(f"챗봇 오류: {e}")
        return ""
    return full_text

# Streamlit 인터페이스
st.set_page_config(page_title="개념기반 탐구학습 AI", page_icon="\U0001F393")

# 페이지 스타일 커스터마이징
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;
            flex-wrap: wrap;
            word-break: break-word;
        }
        .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;
        }
        /* 버튼 스타일 */
        .stButton button {
            background-color: #cd857f;
            color: #fff;
            border-radius: 15px;
            padding: 10px 20px;
        }
    </style>
    """,
    unsafe_allow_html=True
)

st.markdown("<div class='main-title'>\U0001F393 개념기반 탐구학습 AI</div>", unsafe_allow_html=True)
add_vertical_space(1)

with st.sidebar:
    st.markdown("## ⚙️ 입력 설정")
    grade_options = [f"초등학교 {i}학년" for i in range(1, 7)] + [f"중학교 {i}학년" for i in range(1, 4)]
    grade_selected = st.selectbox("🎒 학년 선택", grade_options, index=0)
    achievement_standard = st.text_area("📖 성취기준 및 주요 내용", height=150)
    generate_button = st.button("🚀 계획서 생성")

# 출력 및 챗봇 영역
output_area = st.empty()

# 상태 변수
if "messages" not in st.session_state:
    st.session_state.messages = []
    st.session_state.chat_mode = False

# 계획서 생성 버튼 클릭 시
if generate_button:
    with st.spinner("⏳ 계획서 생성 중..."):
        result = generate_curriculum(grade_selected, achievement_standard)
        st.session_state.messages.append({"role": "assistant", "content": result})
        st.session_state.chat_mode = True

# 챗봇 인터페이스
user_icon_url = "https://cdn-icons-png.flaticon.com/512/4323/4323008.png"
assistant_icon_url = "https://cdn-icons-png.flaticon.com/512/4712/4712108.png"

if st.session_state.chat_mode:
    if prompt := st.chat_input("개념기반 탐구학습 AI에게 수정 및 추가 요청사항을 알려주세요!"):
        st.session_state.messages.append({"role": "user", "content": prompt})
        with st.spinner("🤔 답변 생성 중..."):
            context = "\n".join([msg["content"] for msg in st.session_state.messages if msg["role"] == "assistant"])
            ai_response = chat_with_ai(prompt, context)
            st.session_state.messages.append({"role": "assistant", "content": ai_response})

    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"
            html_text = markdown.markdown(message['content'], extensions=['tables', 'fenced_code'])
            st.markdown(
                f"<div class='chat-message {role_class}'><img src='{avatar_url}' class='chat-avatar {avatar_class}'>{html_text}</div>",
                unsafe_allow_html=True
            )


# FAQ (개념기반 탐구학습에 맞게 수정)
with st.expander("❓개념기반 탐구학습 AI FAQ"):
    st.write("""
        **Q1. 개념기반 탐구학습 AI는 어떤 기능을 제공하나요?**

        A. 이 앱은 선생님들의 **개념기반 탐구학습** 설계를 돕기 위해 개발된 AI 도구입니다. 학년과 성취기준을 입력하면 핵심 아이디어를 중심으로 한 탐구학습 계획서 초안을 생성합니다.  계획서에는 핵심 아이디어, 매크로/마이크로 개념, 지식 범주, 탐구 질문, **관계맺기-집중하기-조사하기-조직 및 정리하기-일반화-전이-성찰하기**의 7단계 탐구 활동, 평가 방법, 개념적 이해를 위한 팁 등이 포함됩니다.  단순히 계획서 생성뿐만 아니라, 생성된 계획서를 수정하고 추가적인 자료를 생성하는 데에도 도움을 드립니다.

        **Q2. 7단계 탐구학습 과정 설계는 어떻게 이루어지나요?**

        A.  이 AI는 **관계맺기-집중하기-조사하기-조직 및 정리하기-일반화-전이-성찰하기**의 7단계 탐구학습 모형을 기반으로 학습 과정을 설계합니다. 각 단계는 학생들이 핵심 아이디어를 깊이 있게 이해하고, 스스로 지식을 구성하며, 실제 상황에 적용할 수 있도록 설계됩니다. 각 단계별 활동은 학생들의 흥미와 참여를 유도하는 창의적이고 혁신적인 활동으로 구성됩니다.

        **Q3. 계획서 생성 후 수정은 어떻게 하나요?**

        A. 계획서 생성 후, 하단 챗봇을 이용하여 수정 및 추가 요청사항을 입력할 수 있습니다. 예를 들어, "조사하기 단계에서 활용할 수 있는 다른 활동을 제시해줘", "평가 루브릭을 상중하에 대한 구체적인 예시와 함께 수정해줘" 와 같이 입력하면 됩니다.

        **Q4. 챗봇을 이용해서 어떤 추가 자료를 생성할 수 있나요?**

        A. 챗봇을 통해 다음과 같은 추가 자료 생성을 요청할 수 있습니다:
        * **단계별 활동 추가:** 각 단계에 활용할 수 있는 다양한 활동을 제시합니다. *예시: "조사하기 단계에서 활용할 수 있는 실험 활동을 제시해 줘"*
        * **수행 과제 (GRASPS):**  Goal, Role, Audience, Situation, Product/Performance, Standards 요소를 활용하여 수행 과제를 설계합니다. *예시: "이 단원의 핵심 개념을 평가할 수 있는 수행평가를 설계해줘"*
        * **평가 루브릭 (상, 중, 하 평어):** 상중하에 대한 구체적인 평가 기준과 각 수준에 해당하는 학생 작업 또는 수행 예시를 포함한 루브릭을 생성합니다. *예시: "전이하기 단계를 평가할 수 있는 루브릭을 만들어줘"*
        * **개념 설명 자료:** 핵심 개념에 대한 추가적인 설명, 그림, 영상 등을 제공합니다. *예시: "매크로 개념에 대한 설명 자료를 만들어줘"*

        챗봇에 구체적인 요청사항을 입력할수록 더욱 정확하고 유용한 결과를 얻을 수 있습니다.
    """)