Spaces:
Sleeping
Sleeping
import streamlit as st | |
import random | |
import time | |
from streamlit.components.v1 import html | |
# Set page config with light purple theme | |
st.set_page_config( | |
page_title="Emotion Mirror Chatbot", | |
page_icon="π", | |
layout="centered", | |
initial_sidebar_state="collapsed" | |
) | |
# Custom CSS for light purple theme | |
st.markdown(""" | |
<style> | |
:root { | |
--primary: #b19cd9; | |
--background: #f5f0ff; | |
--secondary-background: #e6e0fa; | |
--text: #4a4a4a; | |
--font: "Arial", sans-serif; | |
} | |
body { | |
background-color: var(--background); | |
color: var(--text); | |
font-family: var(--font); | |
} | |
.stTextInput>div>div>input { | |
background-color: var(--secondary-background) !important; | |
color: var(--text) !important; | |
} | |
.stButton>button { | |
background-color: var(--primary) !important; | |
color: white !important; | |
border: none; | |
border-radius: 8px; | |
padding: 8px 16px; | |
} | |
.stMarkdown { | |
font-family: monospace !important; | |
font-size: 16px !important; | |
} | |
.chat-message { | |
padding: 12px; | |
border-radius: 12px; | |
margin: 8px 0; | |
max-width: 80%; | |
} | |
.user-message { | |
background-color: var(--secondary-background); | |
margin-left: auto; | |
text-align: right; | |
} | |
.bot-message { | |
background-color: var(--primary); | |
color: white; | |
margin-right: auto; | |
} | |
.face-container { | |
text-align: center; | |
padding: 20px; | |
background: white; | |
border-radius: 16px; | |
box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
margin: 20px 0; | |
} | |
</style> | |
""", unsafe_allow_html=True) | |
# Emotion databases | |
POSITIVE_WORDS = {"happy", "awesome", "great", "joy", "excited", "good", "wonderful", "fantastic", "amazing"} | |
NEGATIVE_WORDS = {"sad", "depressed", "angry", "cry", "lonely", "bad", "terrible", "awful", "miserable"} | |
HELP_RESPONSES = [ | |
"Would you like to talk about it? π¬", | |
"I'm here to listen π", | |
"Want some uplifting quotes? π", | |
"Would a virtual hug help? π€", | |
"Let's focus on something positive π" | |
] | |
# ASCII Art Library | |
FACES = { | |
"happy": r""" | |
ββββββββββ | |
π AWESOME! | |
ββββββββββ | |
""", | |
"sad": r""" | |
ββββββββββ | |
π’ SAD DAY? | |
ββββββββββ | |
""", | |
"neutral": r""" | |
ββββββββββ | |
π HELLO | |
ββββββββββ | |
""", | |
"love": r""" | |
ββββββββββ | |
π LOVELY! | |
ββββββββββ | |
""" | |
} | |
# Confetti effect using JavaScript | |
def confetti_effect(): | |
confetti_js = """ | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script> | |
<script> | |
const count = 200; | |
const defaults = { | |
origin: { y: 0.7 } | |
}; | |
function fire(particleRatio, opts) { | |
confetti(Object.assign({}, defaults, opts, { | |
particleCount: Math.floor(count * particleRatio) | |
})); | |
} | |
fire(0.25, { spread: 26, startVelocity: 55 }); | |
fire(0.2, { spread: 60 }); | |
fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 }); | |
fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 }); | |
fire(0.1, { spread: 120, startVelocity: 45 }); | |
</script> | |
""" | |
html(confetti_js) | |
# Emotion detection function | |
def detect_emotion(text): | |
text = text.lower() | |
if any(word in text for word in POSITIVE_WORDS): | |
return "happy" | |
elif any(word in text for word in NEGATIVE_WORDS): | |
return "sad" | |
elif "love" in text or "heart" in text: | |
return "love" | |
return "neutral" | |
# Initialize chat history | |
if "messages" not in st.session_state: | |
st.session_state.messages = [] | |
st.session_state.current_emotion = "neutral" | |
# Title and description | |
st.title("β¨ Emotion Mirror Chatbot") | |
st.markdown("I'm a reactive AI agent that mirrors your emotions! Try words like *happy*, *sad*, or *awesome*") | |
# Display current face | |
with st.container(): | |
st.markdown(f"<div class='face-container'>\n{FACES[st.session_state.current_emotion]}\n</div>", | |
unsafe_allow_html=True) | |
# Display chat messages | |
for message in st.session_state.messages: | |
with st.chat_message(message["role"]): | |
st.markdown(f"<div class='chat-message {message['role']}-message'>{message['content']}</div>", | |
unsafe_allow_html=True) | |
# User input | |
if prompt := st.chat_input("How are you feeling today?"): | |
# Add user message to chat history | |
st.session_state.messages.append({"role": "user", "content": prompt}) | |
# Detect emotion | |
emotion = detect_emotion(prompt) | |
st.session_state.current_emotion = emotion | |
# Generate bot response | |
if emotion == "happy": | |
response = FACES["happy"] + "\n\nπ That's wonderful to hear!" | |
confetti_effect() | |
elif emotion == "sad": | |
response = FACES["sad"] + "\n\n" + random.choice(HELP_RESPONSES) | |
elif emotion == "love": | |
response = FACES["love"] + "\n\nπ Love is in the air!" | |
else: | |
response = FACES["neutral"] + "\n\nTell me more about your feelings..." | |
# Add bot response to chat history | |
st.session_state.messages.append({"role": "bot", "content": response}) | |
# Rerun to update the display | |
st.experimental_rerun() | |
# Add reset button | |
if st.button("Reset Conversation"): | |
st.session_state.messages = [] | |
st.session_state.current_emotion = "neutral" | |
st.experimental_rerun() |