MotiMeter / welcome.py
Jiaaaaaaax's picture
Create welcome.py
13fcba8 verified
import streamlit as st
from streamlit_lottie import st_lottie
import requests
import json
def load_lottie_url(url: str):
"""Load Lottie animation from URL"""
try:
r = requests.get(url)
if r.status_code != 200:
return None
return r.json()
except:
return None
def show_welcome():
# Page configuration
st.set_page_config(
page_title="MI Companion",
page_icon="🤝",
layout="wide"
)
# Custom CSS for styling
st.markdown("""
<style>
.main {
padding: 2rem;
}
.welcome-header {
text-align: center;
color: #1E88E5;
font-size: 3.2rem;
font-weight: 700;
margin-bottom: 1.5rem;
padding-top: 2rem;
}
.welcome-subheader {
text-align: center;
color: #424242;
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 2rem;
}
.feature-card {
background-color: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
margin: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.feature-icon {
font-size: 2rem;
margin-bottom: 1rem;
color: #1E88E5;
}
</style>
""", unsafe_allow_html=True)
# Main content container
container = st.container()
with container:
# Header Section
st.markdown('<h1 class="welcome-header">Welcome to MI Companion</h1>', unsafe_allow_html=True)
st.markdown(
'<p class="welcome-subheader">Your Intelligent Partner in Motivational Interviewing</p>',
unsafe_allow_html=True
)
# Lottie Animation
lottie_url = "https://assets5.lottiefiles.com/packages/lf20_5tl1xxnz.json" # Counseling/therapy themed animation
lottie_json = load_lottie_url(lottie_url)
if lottie_json:
st_lottie(lottie_json, height=300, key="welcome")
# Introduction
st.markdown("""
<div style="text-align: center; max-width: 800px; margin: 2rem auto; padding: 2rem;">
<p style="font-size: 1.2rem; line-height: 1.6; color: #424242;">
Embark on a transformative journey with MI Companion, your dedicated partner in mastering
Motivational Interviewing. Whether you're a seasoned professional or just starting out,
our AI-powered platform provides real-time support, detailed session analysis, and
personalized feedback to enhance your MI practice.
</p>
</div>
""", unsafe_allow_html=True)
# Features Section
st.markdown("<h2 style='text-align: center; margin-top: 2rem;'>Key Features</h2>", unsafe_allow_html=True)
col1, col2, col3 = st.columns(3)
with col1:
st.markdown("""
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>Real-time Analysis</h3>
<p>Get instant feedback on your MI sessions with our advanced AI analysis tools.</p>
</div>
""", unsafe_allow_html=True)
with col2:
st.markdown("""
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Comprehensive Insights</h3>
<p>Track your progress and gain detailed insights into your MI practice development.</p>
</div>
""", unsafe_allow_html=True)
with col3:
st.markdown("""
<div class="feature-card">
<div class="feature-icon">🤝</div>
<h3>Interactive Support</h3>
<p>Practice MI skills with our AI companion and receive personalized guidance.</p>
</div>
""", unsafe_allow_html=True)
# Call to Action
st.markdown("""
<div style="text-align: center; margin-top: 3rem;">
<h3 style="color: #1E88E5;">Ready to Enhance Your MI Practice?</h3>
<p style="font-size: 1.1rem; margin: 1rem 0;">
Choose from our features above to begin your journey towards MI excellence.
</p>
</div>
""", unsafe_allow_html=True)
# Quick Start Guide
with st.expander("📚 Quick Start Guide"):
st.markdown("""
### Getting Started with MI Companion
1. **Session Analysis**: Upload your session recordings or transcripts
2. **Practice Chat**: Engage with our AI companion to practice MI techniques
3. **Progress Tracking**: Monitor your development over time
4. **Resource Library**: Access MI learning materials and best practices
Need help? Click the '?' icon in the top right corner for support.
""")
if __name__ == "__main__":
show_welcome()