Update app.py

app.py

@@ -5,6 +5,29 @@ import streamlit as st
 import os
 import numpy as np
 
+st.markdown("""
+<style>
+.big-title {
+    font-size: 2.4em;
+    font-weight: 800;
+    margin-bottom: 0.2em;
+}
+.sub-info {
+    font-size: 1.1em;
+    color: #666;
+    margin-bottom: 1.2em;
+}
+.card {
+    background-color: #f1f3f6;
+    padding: 1.2em;
+    border-left: 5px solid #3366cc;
+    border-radius: 6px;
+    margin-bottom: 1em;
+}
+</style>
+""", unsafe_allow_html=True)
+
+
 KOTE_LABELS = [
     '불평/불만', '환영/호의', '감동/감탄', '지긋지긋', '고마움', '슬픔', '화남/분노', '존경',
     '기대감', '우쭐댐/무시함', '안타까움/실망', '비장함', '의심/불신', '뿌듯함', '편안/쾌적',
@@ -59,67 +82,86 @@ tabs = st.tabs(["감정 분석 체험", "AI는 어떻게 감정을 이해할까?
 
 
 with tabs[0]:
-    st.markdown("""
-    <style>
-    .big-title { font-size: 1.5em; font-weight: 800; margin-bottom: 0.2em; }
-    .sub-info { font-size: 1.1em; color: #666; margin-bottom: 1em; }
-    .card { background-color: #f9f9f9; padding: 1.2em; border-radius: 10px; border: 1px solid #eee; }
-    </style>
-    """, unsafe_allow_html=True)
-
     st.markdown('<div class="big-title">🎭 한국어 감정 분석 AI 체험</div>', unsafe_allow_html=True)
     st.markdown('<div class="sub-info">2025년 1학기 디지털 인문학 입문 (SLA23501) · <b>Team 샐러드볼</b><br>강수현 · 김동우 · 정예은 · 정현성 · 최종윤</div>', unsafe_allow_html=True)
 
-    st.markdown('<div class="card">문장을 입력하면 인공지능이 어떤 감정을 느끼는지 예측해줍니다.<br>아래에 문장을 입력하거나 예시 버튼을 눌러 체험해보세요.</div>', unsafe_allow_html=True)
+    st.markdown("""
+    <div class="card">
+    인공지능은 입력된 문장을 분석해 감정이 어떻게 표현되었는지를 예측합니다.<br>
+    아래에 문장을 입력하거나 예시 문장을 불러온 후, 감정 예측 버튼을 눌러 체험해보세요.
+    </div>
+    """, unsafe_allow_html=True)
 
     if "example_text" not in st.session_state:
         st.session_state.example_text = ""
 
-    if st.button("📌 예시 문장 불러오기"):
-        st.session_state.example_text = "이 영화 정말 감동적이었어요. 눈물이 났습니다."
-
     text = st.text_area("✍️ 문장을 입력하세요:", value=st.session_state.example_text, height=120, placeholder="예: 오늘 하루 정말 행복했어요.")
 
-    if st.button("🔍 감정 예측하기"):
-        if text.strip():
-            results, full_probs = predict_emotion(text)
-            st.subheader("📊 상위 감정 결과")
-            for label, prob in results:
-                st.markdown(f"- **{label}**: `{prob:.3f}`")
-            st.subheader("📈 확률 분포 (Top 5)")
-            st.bar_chart({label: prob for label, prob in results})
-        else:
-            st.warning("문장을 먼저 입력해주세요.")
+    col1, col2 = st.columns([1, 1])
+    with col1:
+        if st.button("📌 예시 문장 불러오기"):
+            st.session_state.example_text = "이 영화 정말 감동적이었어요. 눈물이 났습니다."
+            st.experimental_rerun()
+
+    with col2:
+        if st.button("🔍 감정 예측하기"):
+            if text.strip():
+                results, full_probs = predict_emotion(text)
+                st.subheader("📊 상위 감정 결과")
+                for label, prob in results:
+                    st.markdown(f"- **{label}**: `{prob:.3f}`")
+                st.subheader("📈 확률 분포 (Top 5)")
+                st.bar_chart({label: prob for label, prob in results})
+            else:
+                st.warning("문장을 먼저 입력해주세요.")
+
+
 
 
 with tabs[1]:
-    st.title("🤖 인공지능은 감정을 어떻게 이해할까요?")
+    st.markdown('<div class="big-title">🤖 인공지능은 감정을 어떻게 이해할까요?</div>', unsafe_allow_html=True)
     st.markdown("""
-    인공지능은 문장을 '숫자의 벡터'로 바꾸어 이해합니다.  
-    이 과정은 다음과 같은 단계로 이뤄집니다:
-    1. **사전학습된 언어 모델**(KLUE-RoBERTa)이 문장을 읽고 핵심 정보를 추출합니다.  
-    2. 그 정보를 바탕으로 **감정 분류기**(MLP)가 어떤 감정이 담겨 있는지를 예측합니다.  
-    3. 이 예측 결과는 각 감정에 대해 얼마나 가능성이 있는지를 '확률'로 보여줍니다.
-    """)
+    <div class="card">
+    인공지능은 문장을 '숫자의 벡터'로 바꾸어 이해합니다.<br><br>
+    이 과정은 다음과 같은 단계로 이루어집니다:
+    <ol>
+        <li><b>사전학습 언어 모델</b>(KLUE-RoBERTa)이 문장을 읽고 핵심 의미를 추출합니다.</li>
+        <li>이 결과를 바탕으로 <b>감정 분류기</b>(MLP)가 감정을 예측합니다.</li>
+        <li>각 감정에 대한 가능성을 <b>확률로</b> 보여줍니다.</li>
+    </ol>
+    </div>
+    """, unsafe_allow_html=True)
 
 with tabs[2]:
-    st.title("🧠 Few-shot Fine-tuning이란?")
+    st.markdown('<div class="big-title">🧠 Few-shot Fine-tuning이란?</div>', unsafe_allow_html=True)
     st.markdown("""
-    사전학습된 대형 언어 모델은 이미 수많은 문장을 학습했습니다.  
-    우리는 이 모델을 감정 분석에 맞게 **약간만 조정**하는데, 이를 **Fine-tuning**이라 부릅니다.
-
-    그중에서도 적은 양의 데이터만으로 학습하는 방식을 **Few-shot Fine-tuning**이라고 합니다.
-
-    이 웹앱에서는 `KLUE-RoBERTa` 모델을 고정하고, 마지막 분류기(MLP)만 따로 학습시켰습니다.
-    """)
+    <div class="card">
+    우리가 사용하는 KLUE-RoBERTa 모델은 이미 수많은 문장을 학습한 거대한 언어 모델입니다.<br><br>
+    하지만 감정 분석이라는 특정한 작업에 맞게 조금 더 학습시키는 과정이 필요합니다.<br><br>
+    이때 전체 모델을 다시 학습하지 않고, 마지막 분류기(MLP)만 학습하는 방식이 바로
+    <b>Few-shot Fine-tuning</b>입니다.<br><br>
+    이 방법을 통해 적은 양의 감정 데이터만으로도 높은 성능을 달성할 수 있습니다.
+    </div>
+    """, unsafe_allow_html=True)
 
 with tabs[3]:
-    st.title("📌 이 기술은 어디에 쓰일 수 있을까요?")
+    st.markdown('<div class="big-title">📌 이 기술은 어디에 쓰일 수 있을까요?</div>', unsafe_allow_html=True)
+
     st.markdown("""
-    본 연구는 단순한 감정 인식 기술을 넘어, 사회적 감정 흐름을 분석하는 데 활용될 수 있습니다.  
-    예를 들어:
-    - 악플 자동 감지 시스템
-    - 유튜브 영상 댓글의 감정 흐름 시각화
-    - 사회적 이슈에 대한 공감/혐오 분석
-    - 온라인 공론장 내 감정 전염 구조 연구
-    """)
+    <div class="card">
+    이 감정 분석 기술은 단순히 문장의 감정을 분류하는 데 그치지 않고,  
+    <b>디지털 사회에서의 감정 흐름</b>과 <b>공론장의 정서적 구조</b>를 이해하는 데까지 확장될 수 있습니다.<br><br>
+
+    특히 다음과 같은 분야에 활용될 수 있습니다:
+    <ul>
+        <li>😡 <b>악성 댓글 탐지</b>: 유해 표현, 혐오 표현을 조기에 감지하고 필터링</li>
+        <li>📈 <b>댓글 감정 흐름 시각화</b>: 유튜브나 뉴스 댓글에서 감정 전파 구조 분석</li>
+        <li>📰 <b>사회 이슈 공감/혐오 반응 추적</b>: 특정 사건에 대한 감정 반응 모니터링</li>
+        <li>💬 <b>온라인 공론장 감정 전염 연구</b>: 감정이 댓글-대댓글로 어떻게 확산되는지 정량적 분석</li>
+    </ul>
+
+    나아가 이 기술은 <b>디지털 인문학의 새로운 분석 도구</b>로 활용되어,  
+    텍스트 기반 여론의 정서적 구조를 보다 깊이 있게 이해하는 기반이 될 수 있습니다.
+    </div>
+    """, unsafe_allow_html=True)
+