Spaces:
Sleeping
Sleeping
Create welcome.py
Browse files- welcome.py +144 -0
welcome.py
ADDED
@@ -0,0 +1,144 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import streamlit as st
|
2 |
+
from streamlit_lottie import st_lottie
|
3 |
+
import requests
|
4 |
+
import json
|
5 |
+
|
6 |
+
def load_lottie_url(url: str):
|
7 |
+
"""Load Lottie animation from URL"""
|
8 |
+
try:
|
9 |
+
r = requests.get(url)
|
10 |
+
if r.status_code != 200:
|
11 |
+
return None
|
12 |
+
return r.json()
|
13 |
+
except:
|
14 |
+
return None
|
15 |
+
|
16 |
+
def show_welcome():
|
17 |
+
# Page configuration
|
18 |
+
st.set_page_config(
|
19 |
+
page_title="MI Companion",
|
20 |
+
page_icon="🤝",
|
21 |
+
layout="wide"
|
22 |
+
)
|
23 |
+
|
24 |
+
# Custom CSS for styling
|
25 |
+
st.markdown("""
|
26 |
+
<style>
|
27 |
+
.main {
|
28 |
+
padding: 2rem;
|
29 |
+
}
|
30 |
+
.welcome-header {
|
31 |
+
text-align: center;
|
32 |
+
color: #1E88E5;
|
33 |
+
font-size: 3.2rem;
|
34 |
+
font-weight: 700;
|
35 |
+
margin-bottom: 1.5rem;
|
36 |
+
padding-top: 2rem;
|
37 |
+
}
|
38 |
+
.welcome-subheader {
|
39 |
+
text-align: center;
|
40 |
+
color: #424242;
|
41 |
+
font-size: 1.5rem;
|
42 |
+
font-weight: 400;
|
43 |
+
margin-bottom: 2rem;
|
44 |
+
}
|
45 |
+
.feature-card {
|
46 |
+
background-color: #f8f9fa;
|
47 |
+
border-radius: 10px;
|
48 |
+
padding: 1.5rem;
|
49 |
+
margin: 1rem;
|
50 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
51 |
+
}
|
52 |
+
.feature-icon {
|
53 |
+
font-size: 2rem;
|
54 |
+
margin-bottom: 1rem;
|
55 |
+
color: #1E88E5;
|
56 |
+
}
|
57 |
+
</style>
|
58 |
+
""", unsafe_allow_html=True)
|
59 |
+
|
60 |
+
# Main content container
|
61 |
+
container = st.container()
|
62 |
+
|
63 |
+
with container:
|
64 |
+
# Header Section
|
65 |
+
st.markdown('<h1 class="welcome-header">Welcome to MI Companion</h1>', unsafe_allow_html=True)
|
66 |
+
st.markdown(
|
67 |
+
'<p class="welcome-subheader">Your Intelligent Partner in Motivational Interviewing</p>',
|
68 |
+
unsafe_allow_html=True
|
69 |
+
)
|
70 |
+
|
71 |
+
# Lottie Animation
|
72 |
+
lottie_url = "https://assets5.lottiefiles.com/packages/lf20_5tl1xxnz.json" # Counseling/therapy themed animation
|
73 |
+
lottie_json = load_lottie_url(lottie_url)
|
74 |
+
if lottie_json:
|
75 |
+
st_lottie(lottie_json, height=300, key="welcome")
|
76 |
+
|
77 |
+
# Introduction
|
78 |
+
st.markdown("""
|
79 |
+
<div style="text-align: center; max-width: 800px; margin: 2rem auto; padding: 2rem;">
|
80 |
+
<p style="font-size: 1.2rem; line-height: 1.6; color: #424242;">
|
81 |
+
Embark on a transformative journey with MI Companion, your dedicated partner in mastering
|
82 |
+
Motivational Interviewing. Whether you're a seasoned professional or just starting out,
|
83 |
+
our AI-powered platform provides real-time support, detailed session analysis, and
|
84 |
+
personalized feedback to enhance your MI practice.
|
85 |
+
</p>
|
86 |
+
</div>
|
87 |
+
""", unsafe_allow_html=True)
|
88 |
+
|
89 |
+
# Features Section
|
90 |
+
st.markdown("<h2 style='text-align: center; margin-top: 2rem;'>Key Features</h2>", unsafe_allow_html=True)
|
91 |
+
|
92 |
+
col1, col2, col3 = st.columns(3)
|
93 |
+
|
94 |
+
with col1:
|
95 |
+
st.markdown("""
|
96 |
+
<div class="feature-card">
|
97 |
+
<div class="feature-icon">🎯</div>
|
98 |
+
<h3>Real-time Analysis</h3>
|
99 |
+
<p>Get instant feedback on your MI sessions with our advanced AI analysis tools.</p>
|
100 |
+
</div>
|
101 |
+
""", unsafe_allow_html=True)
|
102 |
+
|
103 |
+
with col2:
|
104 |
+
st.markdown("""
|
105 |
+
<div class="feature-card">
|
106 |
+
<div class="feature-icon">📊</div>
|
107 |
+
<h3>Comprehensive Insights</h3>
|
108 |
+
<p>Track your progress and gain detailed insights into your MI practice development.</p>
|
109 |
+
</div>
|
110 |
+
""", unsafe_allow_html=True)
|
111 |
+
|
112 |
+
with col3:
|
113 |
+
st.markdown("""
|
114 |
+
<div class="feature-card">
|
115 |
+
<div class="feature-icon">🤝</div>
|
116 |
+
<h3>Interactive Support</h3>
|
117 |
+
<p>Practice MI skills with our AI companion and receive personalized guidance.</p>
|
118 |
+
</div>
|
119 |
+
""", unsafe_allow_html=True)
|
120 |
+
|
121 |
+
# Call to Action
|
122 |
+
st.markdown("""
|
123 |
+
<div style="text-align: center; margin-top: 3rem;">
|
124 |
+
<h3 style="color: #1E88E5;">Ready to Enhance Your MI Practice?</h3>
|
125 |
+
<p style="font-size: 1.1rem; margin: 1rem 0;">
|
126 |
+
Choose from our features above to begin your journey towards MI excellence.
|
127 |
+
</p>
|
128 |
+
</div>
|
129 |
+
""", unsafe_allow_html=True)
|
130 |
+
|
131 |
+
# Quick Start Guide
|
132 |
+
with st.expander("📚 Quick Start Guide"):
|
133 |
+
st.markdown("""
|
134 |
+
### Getting Started with MI Companion
|
135 |
+
1. **Session Analysis**: Upload your session recordings or transcripts
|
136 |
+
2. **Practice Chat**: Engage with our AI companion to practice MI techniques
|
137 |
+
3. **Progress Tracking**: Monitor your development over time
|
138 |
+
4. **Resource Library**: Access MI learning materials and best practices
|
139 |
+
|
140 |
+
Need help? Click the '?' icon in the top right corner for support.
|
141 |
+
""")
|
142 |
+
|
143 |
+
if __name__ == "__main__":
|
144 |
+
show_welcome()
|