Update app.py

app.py

@@ -2,37 +2,20 @@ import os
 import time
 import openai
 import streamlit as st
+import re
 from streamlit_chat import message
 
 # OpenAI API 설정
 openai_api_key = os.getenv("OPENAI_API_KEY")
 openai.api_key = openai_api_key
 
-def openai_chat(text):
-    try:
-        response = openai.ChatCompletion.create(
-            model="gpt-4o",
-            messages=[
-                {"role": "system", "content": "초등학교 6학년 수준 범위 내에서 학생의 질문에 친절하게 답하는 교사 역할, 설명은 구체적인 예시를 들어서, 어려운 단어는 별도로 설명해줘. 설명글의 분량은 1000~2000자 정도로 해줘."},
-                {"role": "user", "content": text}
-            ],
-            temperature=1,
-            max_tokens=2000,
-            top_p=0.9,
-            frequency_penalty=0,
-            presence_penalty=0
-        )
-        return response.choices[0].message["content"]
-    except Exception as e:
-        return f"에러 발생: {str(e)}"
-
 # Streamlit 앱 설정
-st.set_page_config(page_title="친절한 AI 선생님(GPT-4)", layout="centered")
+st.set_page_config(page_title="친절한 AI 선생님(GPT-4)", layout="wide")
 
 st.markdown(
     """
-    <div style='font-size: 30px; font-weight: bold; text-align: center;'>친절한 AI 선생님(GPT-4)</div>
-    <div style='text-align: center; margin-bottom: 20px;'>궁금한 것은 무엇이든 물어보세요. AI 선생님이 친절하게 알려줄 거예요!</div>
+    <div style='font-size: 30px; font-weight: bold; text-align: center; margin-bottom: 10px;'>친절한 AI 선생님(GPT-4)</div>
+    <div style='text-align: center; margin-bottom: 20px; color: #6c757d;'>궁금한 것은 무엇이든 물어보세요. AI 선생님이 친절하게 알려줄 거예요!</div>
     """,
     unsafe_allow_html=True
 )
@@ -41,45 +24,57 @@ st.markdown(
 if "history" not in st.session_state:
     st.session_state.history = []
 
-# 채팅 메시지 출력 영역
+# 채팅 메시지 출력 - 채팅창이 위에 있도록 설정
 chat_container = st.container()
+input_container = st.container()
 
-def respond(user_input):
-    if user_input:
-        st.session_state.history.append({"user": user_input, "ai": ""})
-        response = openai_chat(user_input)
-        st.session_state.history[-1]["ai"] = response
-
-# 사용자 입력 처리 및 응답 생성
-with st.container():
-    # 채팅창 출력
-    with chat_container:
-        chat_scrollable = st.empty()
-        chat_content = ""
-        for chat in st.session_state.history:
-            if "user" in chat:
-                chat_content += f"<div style='text-align: right; margin: 5px 0;'><b>사용자:</b> {chat['user']}</div>"
-            if "ai" in chat:
-                chat_content += f"<div style='text-align: left; margin: 5px 0;'><b>AI:</b> {chat['ai']}</div>"
-        chat_scrollable.markdown(
-            f"""
-            <div style='height: 400px; overflow-y: auto; padding: 10px; border: 1px solid #ccc;'>{chat_content}</div>
-            """,
-            unsafe_allow_html=True
-        )
+with chat_container:
+    st.markdown("""<div style='height: 400px; overflow-y: auto; border: 1px solid #e1e1e1; padding: 10px; border-radius: 10px; background-color: #f9f9f9;'>""", unsafe_allow_html=True)
+    for chat in st.session_state.history:
+        if "user" in chat:
+            message(chat["user"], is_user=True, key=f"user_{chat['user']}")
+        if "ai" in chat:
+            message(chat["ai"], is_user=False, key=f"ai_{chat['ai']}")
+    st.markdown("""</div>""", unsafe_allow_html=True)
 
-    # 사용자 입력 받기
+# 사용자 입력 받기 - 입력창이 아래에 있도록 설정
+with input_container:
+    st.markdown("""<div style='margin-top: 20px;'>""", unsafe_allow_html=True)
     user_input = st.text_input(
         "질문", key="user_input", placeholder="질문을 넣어주세요.",
         help="AI 선생님에게 궁금한 것을 물어보세요."
     )
+    st.markdown("""</div>""", unsafe_allow_html=True)
+
+def openai_chat(text):
+    try:
+        response = openai.ChatCompletion.create(
+            model="gpt-4o",
+            messages=[
+                {"role": "system", "content": "초등학교 6학년 수준 범위 내에서 학생의 질문에 친절하게 답하는 교사 역할, 설명은 구체적인 예시를 들어서, 어려운 단어는 별도로 설명해줘. 설명글의 분량은 1000~2000자 정도로 해줘."},
+                {"role": "user", "content": text}
+            ],
+            temperature=1,
+            max_tokens=2000,
+            top_p=0.9,
+            frequency_penalty=0,
+            presence_penalty=0
+        )
+        return response.choices[0].message["content"]
+    except Exception as e:
+        return f"에러 발생: {str(e)}"
+
+def respond(user_input):
+    st.session_state.history.append({"user": user_input, "ai": ""})
+    response = openai_chat(user_input)
+    st.session_state.history[-1]["ai"] = response
 
-    # 응답 생성 및 출력
-    if user_input:
-        respond(user_input)
-        st.experimental_rerun()
+# 응답 생성 및 출력
+if user_input:
+    respond(user_input)
+    st.experimental_rerun()
 
 # 초기화 버튼 클릭 시
-if st.button("초기화"):
+if st.button("초기화", type="primary", use_container_width=True):
     st.session_state.history = []
     st.experimental_rerun()