app.py

import os
import gradio as gr
from dotenv import load_dotenv
from openai import OpenAI
from prompts.initial_prompt import INITIAL_PROMPT
from prompts.main_prompt import MAIN_PROMPT

# .env 파일에서 OPENAI_API_KEY 로드
if os.path.exists(".env"):
    load_dotenv(".env")Module 10: Developing Conceptual Understanding through Tables and Proportional Reasoning

Task Introduction
"Welcome to the final module in this series! In this module, you’ll watch a video of a lesson on proportional reasoning involving tables. You’ll reflect on the teacher’s practices, how students connect their reasoning, and the ways these practices address Common Core standards. Let’s dive in!"

Video:
"Watch the video provided at this link. Before watching how students approach the task, solve it yourself to reflect on your own reasoning."

🚀 **Pre-Video Task Prompt**
Before watching the video, let's start by solving the problem.

1️⃣ **How did you approach solving the problem?**
- What strategies did you use?
- Did you recognize proportional relationships within the table?

🛠 **Hints if Needed**:
- Think about the relationships both horizontally (within rows) and vertically (between columns) in the table.
- How might unit rate play a role in reasoning proportionally?

After you solve the problem, **let me know**, and we’ll move to the next step!

---

📖 **Post-Video Reflection Prompts**  
Now that you’ve watched the video and solved the problem, let’s reflect on different aspects of the lesson **one by one**:

### **Step 1: Observing Creativity-Directed Practices**
🔹 What creativity-directed practices did you notice the teacher implementing during the lesson?  
🔹 Reflect on how these practices supported students’ reasoning and collaboration.  
  
💡 **Hints if Needed**:
- Consider whether the teacher encouraged mathematical connections, collaborative problem-solving, or extended students’ thinking beyond the unit rate.

✅ When you're ready, **share your thoughts**, and we'll move to the next reflection.

---

### **Step 2: Student Reasoning and Connections**
🔹 How did students connect the relationship between price and container size?  
🔹 How did their reasoning evolve as they worked through the task?  

💡 **Hints if Needed**:
- Did students start with the given information (e.g., the 24-ounce container costing $3)?
- How did they use this information to reason proportionally?

✅ **Once you respond, we’ll move on!**

---

### **Step 3: Teacher Actions in Small Groups**
🔹 How did the teacher’s actions during small group interactions reflect the students’ reasoning?  
🔹 How did the teacher use these interactions to inform whole-class discussions?  

💡 **Hints if Needed**:
- Think about how the teacher listened to students’ reasoning and used their ideas to guide the next steps.  
- What types of questions did the teacher ask?  

✅ **Once you're ready, let’s move forward!**

---

### **Step 4: Initial Prompts and Sense-Making**
🔹 How did the teacher prompt students to initially make sense of the task?  
🔹 What role did these prompts play in guiding students’ reasoning?  

💡 **Hints if Needed**:
- Did the teacher ask open-ended questions?
- How did these prompts help students engage with the task?

✅ **Share your response, and we’ll continue!**

---

### **Step 5: Common Core Practice Standards**
🔹 What Common Core practice standards do you think the teacher emphasized during the lesson?  
🔹 Choose four and explain how you observed these practices in action.  

💡 **Hints if Needed**:
- Consider whether the teacher emphasized reasoning, collaboration, or modeling with mathematics.  
- How did the students demonstrate these practices?

✅ **When you’re ready, let’s move to the final steps!**

---

### **Step 6: Problem Posing Activity**
📝 Based on what you observed, **pose a problem** that encourages students to use visuals and proportional reasoning.  
🔹 What real-world context will you use?  
🔹 How will students use visuals like bar models or tables to represent proportional relationships?  
🔹 Does your problem encourage multiple solution paths?  

💡 **Hints if Needed**:
- Try to design a problem where students can approach it differently but still apply proportional reasoning.

✅ **Once you've created your problem, let me know!**

---

### **Step 7: Summary and Final Reflection**
📚 **What’s one change you will make in your own teaching based on this module?**  
Reflect on a specific strategy, question type, or approach to representation that you want to implement.

💡 **Encouraging Closing Statement**:  
"Great work completing all the modules! We hope you’ve gained valuable insights into fostering creativity, connecting mathematical ideas, and engaging students in meaningful learning experiences. It was a pleasure working with you—see you in the next professional development series!" 🎉  


OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")

client = OpenAI(api_key=OPENAI_API_KEY)



def gpt_call(history, user_message,
             model="gpt-4o-mini",
             max_tokens=512,
             temperature=0.7,
             top_p=0.95):
    """
    OpenAI ChatCompletion API를 통해 답변을 생성하는 함수.
    - history: [(user_text, assistant_text), ...]
    - user_message: 사용자가 방금 입력한 메시지
    """
    # 1) 시스템 메시지(=MAIN_PROMPT)를 가장 앞에 추가
    messages = [{"role": "system", "content": MAIN_PROMPT}]
    
    # 2) 기존 대화 기록(history)을 OpenAI 형식으로 변환
    #    user_text -> 'user' / assistant_text -> 'assistant'
    for user_text, assistant_text in history:
        if user_text:
            messages.append({"role": "user", "content": user_text})
        if assistant_text:
            messages.append({"role": "assistant", "content": assistant_text})

    # 3) 마지막에 이번 사용자의 입력을 추가
    messages.append({"role": "user", "content": user_message})

    # 4) OpenAI API 호출
    completion = client.chat.completions.create(
        model=model,
        messages=messages,
        max_tokens=max_tokens,
        temperature=temperature,
        top_p=top_p
    )
    return completion.choices[0].message.content

def respond(user_message, history):
    """
    Gradio 상에서 submit할 때 호출되는 함수
    - user_message: 사용자가 방금 친 메시지
    - history: 기존 (user, assistant) 튜플 리스트
    """
    # 사용자가 빈 문자열을 보냈다면 아무 일도 하지 않음
    if not user_message:
        return "", history

    # GPT 모델로부터 응답을 받음
    assistant_reply = gpt_call(history, user_message)

    # history에 (user, assistant) 쌍 추가
    history.append((user_message, assistant_reply))

    # Gradio에서는 (새로 비워질 입력창, 갱신된 history)를 반환
    return "", history

##############################
#  Gradio Blocks UI
##############################
with gr.Blocks() as demo:
    gr.Markdown("## Simple Chat Interface")

    # Chatbot 초기 상태를 설정
    # 첫 번째 메시지는 (user="", assistant=INITIAL_PROMPT) 형태로 넣어
    # 화면상에서 'assistant'가 INITIAL_PROMPT를 말한 것처럼 보이게 함
    chatbot = gr.Chatbot(
        value=[("", INITIAL_PROMPT)],  # (user, assistant)
        height=500
    )

    # (user, assistant) 쌍을 저장할 히스토리 상태
    # 여기서도 동일한 초기 상태를 넣어줌
    state_history = gr.State([("", INITIAL_PROMPT)])

    # 사용자 입력
    user_input = gr.Textbox(
        placeholder="Type your message here...",
        label="Your Input"
    )

    # 입력이 submit되면 respond() 호출 → 출력은 (새 입력창, 갱신된 chatbot)
    user_input.submit(
        respond,
        inputs=[user_input, state_history],
        outputs=[user_input, chatbot]
    ).then(
        # respond 끝난 뒤, 최신 history를 state_history에 반영
        fn=lambda _, h: h,
        inputs=[user_input, chatbot],
        outputs=[state_history]
    )

# 메인 실행
if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=7860, share=True)