Update app.py

app.py

@@ -1,10 +1,12 @@
 import os
 import time
-
+import streamlit as st
 import google.generativeai as genai
-import gradio as gr
+from streamlit_extras.colored_header import colored_header
+from streamlit_extras.add_vertical_space import add_vertical_space
+import markdown
 
-# Google Gemini API 키 설정
+# Google Gemini API Key 설정
 genai.configure(api_key=os.environ["GEMINI_API_KEY"])
 
 # 모델 설정
@@ -21,28 +23,6 @@ model = genai.GenerativeModel(
     generation_config=generation_config,
 )
 
-# 프롬프트 설정
-SYSTEM_PROMPT = """
-당신은 교수학습 활동 설계 전문가, 교과교육 내용 전문가, 교육공학자입니다. 
-선생님들이 학습 주제와 사고 루틴을 입력하면, 해당 주제에 적용 가능한 사고 루틴 활동 예시를 상세하게 설명해주세요.
-**활동 예시 구성 요소:**
-1. 학습 주제
-2. 적용할 사고 루틴 및 사고 루틴에 대한 설명명
-3. 활동 목표
-4. 활동 단계별 안내
-    - 각 단계별로 사고 루틴을 어떻게 활용하는지 자세하게 설명
-    - 예시 질문 포함
-5. 활동 준비물 및 기구
-6. 활동을 위한 자료
-    - 활동에 필요한 자료
-    - 추가 추천 자료
-7. 활동의 유의점
-    - 학생 입장 유의점
-    - 교사 입장 유의점
-8. 학생에게 제공할 활동 안내 자료
-* 활동 안내 자료는 초등학생이 이해할 수 있도록 최대한 구체적이고, 단계적, 명시적으로 안내해주세요.
-"""
-
 def generate_thinking_routine_example(topic, thinking_routine):
     """
     학습 주제와 사고 루틴을 입력받아 활동 예시를 생성합니다.
@@ -53,6 +33,27 @@ def generate_thinking_routine_example(topic, thinking_routine):
         str: 생성된 활동 예시
     """
 
+    SYSTEM_PROMPT = """
+    당신은 교수학습 활동 설계 전문가, 교과교육 내용 전문가, 교육공학자입니다. 
+    선생님들이 학습 주제와 사고 루틴을 입력하면, 해당 주제에 적용 가능한 사고 루틴 활동 예시를 상세하게 설명해주세요.
+    **활동 예시 구성 요소:**
+    1. 학습 주제
+    2. 적용할 사고 루틴 및 사고 루틴에 대한 설명명
+    3. 활동 목표
+    4. 활동 단계별 안내
+        - 각 단계별로 사고 루틴을 어떻게 활용하는지 자세하게 설명
+        - 예시 질문 포함
+    5. 활동 준비물 및 기구
+    6. 활동을 위한 자료
+        - 활동에 필요한 자료
+        - 추가 추천 자료
+    7. 활동의 유의점
+        - 학생 입장 유의점
+        - 교사 입장 유의점
+    8. 학생에게 제공할 활동 안내 자료
+    * 활동 안내 자료는 초등학생이 이해할 수 있도록 최대한 구체적이고, 단계적, 명시적으로 안내해주세요.
+    """
+
     prompt = [
         SYSTEM_PROMPT,
         f"**학습 주제:** {topic}",
@@ -65,56 +66,71 @@ def generate_thinking_routine_example(topic, thinking_routine):
     for token in response:
         chunk = token.text
         collected_text += chunk
-        yield collected_text
-        time.sleep(0.03)
+        yield collected_text  # 실시간 출력을 위해 yield 사용
+        time.sleep(0.03)  # 출력 속도 조절
 
-# Gradio 인터페이스 설정 - 드롭다운 메뉴 추가
-iface = gr.Interface(
-    fn=generate_thinking_routine_example,
-    inputs=[
-        gr.Textbox(lines=2, label="학습 주제 입력"),
-        gr.Dropdown(
-            choices=[
-                "See-Think-Wonder (보고-생각하고-궁금해하기)",
-                "Zoom In (확대)",
-                "Think-Puzzle-Explore (생각-궁금-탐구)",
-                "Chalk Talk (침묵 대화)",
-                "321 Bridge (3-2-1 다리 짓기)",
-                "Compass Points (나침반)",
-                "Explanation Game (설명 게임)",
-                "Headlines (헤드라인)",
-                "CSI: Color, Symbol, Image (색상, 기호, 이미지)",
-                "Generate-Sort-Connect-Elaborate-Concept Maps (개념도)",
-                "Connect-Extend-Challenge (연결-확장-도전)",
-                "The 4 C's (4가지 C)",
-                "Micro Lab (미니 실험)",
-                "I used to think…Now I think… (예전엔 … 라고 생각했지만, 지금은 … 라고 생각해)",
-                "What makes you say that? (무엇 때문에 그렇게 생각하니?)",
-                "Circle Viewpoints (다양한 관점)",
-                "Step Inside (입장 바꿔 생각하기)",
-                "Red Light, Yellow Light, Green Light (빨간불, 노란불, 초록불)",
-                "Claim Support Question (주장-근거-질문)",
-                "Tug of War (줄다리기)",
-                "Word-Phrase-Sentence (단어-구-문장)",
-                "Think Aloud (사고 구술)",
-                "관찰-비교대조-분류",
-                "관찰하기",
-                "무리 짓기",
-                "예상하기",
-                "관계망 그리기",
-                "도구 사용의 방법 및 절차(순서 단계적으로 제시)"
-            ],
-            label="사고 루틴 선택"
-        ),
-    ],
-    outputs=gr.Textbox(lines=15, label="사고 루틴 활용 예시"),
-    title="학습 활동 설계 도우미: 사고 루틴 활용 편",
+# Streamlit Interface
+colored_header(
+    label="학습 활동 설계 도우미: 사고 루틴 활용 편",
     description="선생님이 학습 주제와 사고 루틴을 선택하시면, 해당 주제에 적용 가능한 사고 루틴 활동 예시를 보여줍니다.",
-    examples=[
-        ["광합성", "See-Think-Wonder (보고-생각하고-궁금해하기)"],
-        ["조선 시대의 과학 기술", "Think-Puzzle-Explore (생각-궁금-탐구)"],
+    color_name="red-70",
+)
+
+add_vertical_space(1)
+
+# 사용자 입력 받기
+topic = st.text_input("학습 주제 입력", "")
+thinking_routine = st.selectbox(
+    "사고 루틴 선택",
+    [
+        "See-Think-Wonder (보고-생각하고-궁금해하기)",
+        "Zoom In (확대)",
+        "Think-Puzzle-Explore (생각-궁금-탐구)",
+        "Chalk Talk (침묵 대화)",
+        "321 Bridge (3-2-1 다리 짓기)",
+        "Compass Points (나침반)",
+        "Explanation Game (설명 게임)",
+        "Headlines (헤드라인)",
+        "CSI: Color, Symbol, Image (색상, 기호, 이미지)",
+        "Generate-Sort-Connect-Elaborate-Concept Maps (개념도)",
+        "Connect-Extend-Challenge (연결-확장-도전)",
+        "The 4 C's (4가지 C)",
+        "Micro Lab (미니 실험)",
+        "I used to think…Now I think… (예전엔 … 라고 생각했지만, 지금은 … 라고 생각해)",
+        "What makes you say that? (무엇 때문에 그렇게 생각하니?)",
+        "Circle Viewpoints (다양한 관점)",
+        "Step Inside (입장 바꿔 생각하기)",
+        "Red Light, Yellow Light, Green Light (빨간불, 노란불, 초록불)",
+        "Claim Support Question (주장-근거-질문)",
+        "Tug of War (줄다리기)",
+        "Word-Phrase-Sentence (단어-구-문장)",
+        "Think Aloud (사고 구술)",
+        "관찰-비교대조-분류",
+        "관찰하기",
+        "무리 짓기",
+        "예상하기",
+        "관계망 그리기",
+        "도구 사용의 방법 및 절차(순서 단계적으로 제시)"
     ]
 )
 
-# 인터페이스 실행
-iface.launch()
+generate_button = st.button("사고 루틴 활용 예시 생성")
+
+# 출력 영역 정의
+output_area = st.empty()
+
+if generate_button and topic and thinking_routine:
+    output_text = ""
+    output_area.markdown(output_text)
+    try:
+        for partial_output in generate_thinking_routine_example(topic, thinking_routine):
+            output_text = partial_output
+            output_area.markdown(output_text)
+    except Exception as e:
+        st.error(f"오류가 발생했습니다: {str(e)}")
+
+    # 복사 버튼 추가
+    if output_text:
+        if st.button("출력 내용 복사"):
+            st.write(output_text)
+            st.success("출력 내용이 복사되었습니다!")