Update app.py

app.py

@@ -1,108 +1,140 @@
+# 패키지 불러오기
+import re
+import requests
 import streamlit as st
 from transformers import pipeline
-import re
 
-def replace_multiple_spaces(text):
-    return re.sub(r'\s+', ' ', text)
 
-pipe = pipeline("summarization", model="gangyeolkim/kobart-korean-summarizer-v2")
+url = "http://llm.theimc.co.kr:8003/item_post"
+headers = {"Content-Type": "application/x-www-form-urlencoded"}
+
 
 
+# 글로벌 변수 선언
+## 모델 불러오기(https://huggingface.co/gangyeolkim/kobart-korean-summarizer-v2) 는 테스트용 모델 입니다.
+pipe = pipeline("summarization", model="gangyeolkim/kobart-korean-summarizer-v2")
+
+## assitant 아바타 이미지 경로
 assistant_icon_path = "https://huggingface.co/spaces/randmimc/aitom/resolve/main/chat_icon/assistant.ico"
-user_icon_path = "https://huggingface.co/spaces/randmimc/aitom/resolve/main/chat_icon/user01.png"
 
-# 세션 상태에서 approval_state 및 messages 초기화
+## 세션 상태에서 approval_state 및 messages 초기화
+##  ※ 세션(session) : 
+##          사용자의 인터랙션을 관리하는 기능입니다. 
+##          Streamlit은 기본적으로 사용자가 앱과 상호작용할 때마다 전체 코드가 다시 실행되는 구조인데, 
+##          세션 상태(Session State)를 활용하면 데이터를 유지하면서도 효율적인 앱을 만들 수 있습니다.
 if "approval_state" not in st.session_state:
     st.session_state.approval_state = "require"
 if "messages" not in st.session_state:
     st.session_state.messages = []
 
-# Custom CSS to align messages and wrap text
+# CSS 작성 
+## st.markdown는 텍스트를 마크다운 형식으로 랜더링 하는 함수이지만, unsafe_allow_html=True 옵션을 사용하면 HTML/CSS를 직접 적용할 수 있습니다.
+## 스트림릿에서 디폴트로 적용하는 디자인이 맘에 들지 않는다면 CSS를 작성하여 변경할 수 있습니다.
 st.markdown("""
     <style>
-    .chat-container {
-        display: flex;
-        align-items: flex-start;
-        margin-bottom: 10px;
+    .chat-container { /* 채팅 메시지를 감싸는 컨테이너를 설명합니다. */
+        display: flex; /* 채팅 요소(아바타, 말풍선 등)을 가로 방향으로 정렬합니다. */
+        margin-bottom: 10px; /*메세지간 간격을 10px로 합니다. */
     }
     .user-container {
-        justify-content: flex-end;
+        justify-content: flex-end; /* 사용자의 메시지를 우측정렬합니다.*/
     }
     .assistant-container {
-        justify-content: flex-start;
-        flex-direction: row; /* Avatar와 Bubble을 수평 정렬 */
+        justify-content: flex-start; /* 어시스턴스 메시지를 좌측 정렬합니다.*/
+        flex-direction: row; /* Avatar와 Bubble을 수평으로 정렬합니다. */
     }
-    .chat-bubble {
-        padding: 10px;
-        border-radius: 10px;
-        max-width: 70%;
-        word-wrap: break-word;
-        white-space: pre-wrap;
+    .chat-bubble { /* 말풍선 스타일을 정의합니다. */
+        padding: 10px; /* 말풍선 안에 메시지간 간격을 10px로 합니다. */
+        border-radius: 10px; /*말풍선의 모서리를 동글게 만듭니다.*/
+        max-width: 70%; /* 한줄이 너무 길지 않게 제한합니다. */
+        word-wrap: break-word; /* 텍스트를 단어 단위로 줄내림합니다. */
+        white-space: pre-wrap; /* 텍스트를 단어 단위로 줄내림합니다. */
     }
-    .user-bubble {
-        font-size: 14px;
-        color: #333;
-        background-color: #e5e5e5; 
-        text-align: left;
+    .user-bubble { /* 사용자 메시지 스타일을 정의합니다. */
+        font-size: 14px; /* 폰트 사이즈를 지정합니다. */
+        color: #333;  /* 폰트 색상을 지정합니다. */
+        background-color: #e5e5e5; /* 말풍선 배경색을 지정합니다. */
     }
     .assistant-bubble {
-        font-size: 14px;
-        color: #333;
-        text-align: left; /* 왼쪽 정렬 */
-        background-color: #feeddf;
+        font-size: 14px; /* 폰트 사이즈를 지정합니다. */
+        color: #333;  /* 폰트 색상을 지정합니다. */
+        text-align: left; /* 메세지를 왼쪽 정렬 합니다. */
+        background-color: #feeddf; /* 말풍선 배경색을 지정합니다. */
     }
-    .avatar {
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        margin-right: 10px; /* Bubble과 간격 */
+    .avatar { /* 프로필 이미지(아바타) 스타일을 지정합니다. */
+        width: 30px; /* 아바타 폭을 지정합니다. */
+        height: 30px; /* 아바타 너을 지정합니다. */
+        border-radius: 50%; /* 아바타를 원경으로 만듭니다. */
+        margin-right: 10px; /*메세지간 간격을 10px로 합니다. */
     }
     </style>
 """, unsafe_allow_html=True)
 
+# 메세지 wrapper
+# html 테그를 이용하여 챗팅 매세지마다 css 스타일을 적용하기 위해 작성된 함수입니다.
+def user_message_style(question):
+    return f"""<div class="chat-container user-container">
+        <div class="chat-bubble user-bubble">{question}</div>
+    </div>"""
+
+def assistant_message_style(assistant_icon_path, answer):
+    return f"""<div class="chat-container assistant-container">
+        <img src="{assistant_icon_path}" class="avatar">
+        <div class="chat-bubble assistant-bubble">{answer}</div>
+    </div>"""
 
-# Display chat messages from history
+# BACK
+## 과거 채팅 내용 출력
+## 스트림릿의 st.chat_input() 메서드는 사용자가 입력을 주면 세션내용을 기억하면서 코드를 다시 실행하는 특성이 있습니다. 
+## 따라서 세션에 저장된 과거 대화 내용을 화면에 출력하기 위해서 새로 실행된 코드에 과거 내용을 미리 뿌려둘 수 잇게 아래와 같은 코드를 작성해 두어야 합니다. 
 for message in st.session_state.messages:
     if message["role"] == "user":
-        st.markdown(
-            f"""
-            <div class="chat-container user-container">
-                <div class="chat-bubble user-bubble">{message["content"]}</div>
-            </div>
-            """, unsafe_allow_html=True)
+        st.markdown(user_message_style(message["content"]), unsafe_allow_html=True)
     else:
-        st.markdown(
-            f"""
-            <div class="chat-container assistant-container">
-                <img src="{assistant_icon_path}" class="avatar">
-                <div class="chat-bubble assistant-bubble">{message["content"]}</div>
-            </div>
-            """, unsafe_allow_html=True)
-
-# Start with an assistant message
+        st.markdown(assistant_message_style(assistant_icon_path, message["content"]), unsafe_allow_html=True)
+
+# 인증 메세지
+## 본 코드는 다른 챗봇과 달리 인증을 위해 챗봇이 먼저 사용자에게 말을 거는 주고를 가집니다.
+## 세션이 아무 메세지도 가지고 있지 않다면 인증을 위한 말을 먼저 걸게 구성합니다.
+
+## 인증 메세지
 if not st.session_state.messages:
-    st.session_state.messages.append({
-        "role": "assistant", 
-        "avatar": assistant_icon_path, 
-        "content": """더아이엠씨에 aitom은 현재 공사중에 있습니다.
-        하지만 ! 간단히 활용해 보실 수 있는 요약 모델을 제공하고 있습니다.
-        짧은 신문기사를 말해 주시면 요약문을 제공합니다.
-        계속 사용하고 싶다면 "yes" 를 입력해주세요.
-        """})
-    st.rerun()
+    greeting = "더아이엠씨에 aitom은 현재 공사중에 있습니다.\n간단한 신문기사를 입력하시면 요약을 제공합니다.\n계속 사용하려면 \"yes\"를 입력해주세요."
+    st.session_state.messages.append({"role": "assistant", "content": greeting})
+    st.markdown(assistant_message_style(assistant_icon_path, greeting), unsafe_allow_html=True)
 
+## 인증 및 응답 생성
+## prompt :=`는 "월러스 연산자" (:=, walrus operator)로, 입력값이 있으면 이를 prompt 변수에 할당하면서 동시에 조건문을 실행하는 기능을 합니다. 
 if prompt := st.chat_input():
-    st.session_state.messages.append({"role": "user", "avatar": user_icon_path, "content": prompt})
+    # 사용자 질문 세션에 저장
+    st.session_state.messages.append({"role": "user", "content": prompt})
+    # 사용자 질문 화면에 표시
+    st.markdown(user_message_style(prompt), unsafe_allow_html=True)
+
+    # 인증 
     if st.session_state.approval_state == "require":
         if prompt.lower() == "yes":
             st.session_state.approval_state = "approved"
-            st.session_state.messages.append({"role": "assistant", "avatar": assistant_icon_path, "content": "이제 간단한 요약 모델을 사용하실 수 있습니다. 간단한 신문기사를 입력해 주세요."})
+            response = "이제 요약 모델을 사용할 수 있습니다. 신문기사를 입력해주세요."
         else:
-            st.session_state.messages.append({"role": "assistant", "avatar": assistant_icon_path, "content": '승인하지 못하였습니다. 승인을 위해 "yes"를 입력해주세요.'})
-            
-    elif st.session_state.approval_state == "approved":
-        result = replace_multiple_spaces(prompt)
-        summarized = pipe(result)
-        st.session_state.messages.append({"role": "assistant", "avatar": assistant_icon_path, "content": summarized[0]["summary_text"]})
-
-    st.rerun()
+            response = "승인되지 않았습니다. 계속하려면 \"yes\"를 입력해주세요."
+    # 응답 생성
+    else:
+        data = {
+            "name": "string",
+            "description": prompt,
+            "price": 0
+        }
+
+        response = requests.post(url, headers=headers, data=data)
+        response = response.text
+        print(response)
+
+        # result = re.sub(r'\s+', ' ', prompt)
+        # summarized = pipe(result)
+        # response = summarized[0]["summary_text"]
+    # 어시스턴스의 메세지를 ��션에 저장
+    st.session_state.messages.append({"role": "assistant", "content": response})
+    # 어시스턴스의 메세지를 화면에 표시
+    st.markdown(assistant_message_style(assistant_icon_path, response), unsafe_allow_html=True)
+