Hugging Face's logo

Spaces:
wesam0099
/
AI_Voice_Agent_For_Store
Sleeping

App Files Community
wesam0099 commited on
Commit
9b995e3
·
verified ·
1 Parent(s): 4e20d0c

Update src/streamlit_app.py

Browse files
Files changed (1) hide show
  1. src/streamlit_app.py +217 -123
src/streamlit_app.py CHANGED
@@ -9,135 +9,229 @@ st.set_page_config(
9
 
10
  # CSS مخصص
11
  st.markdown("""
12
- <style>
13
- @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
14
-
15
- html, body, [class*="css"] {
16
- font-family: 'Cairo', sans-serif;
17
- background-color: #0f1117;
18
- scroll-behavior: smooth;
19
- }
20
-
21
- .full-screen {
22
- min-height: 70vh;
23
- width: 100%;
24
- background: linear-gradient(-45deg, #2193b0, #6dd5ed, #1e3c72, #2a5298);
25
- background-size: 400% 400%;
26
- animation: gradientBG 10s ease infinite;
27
- display: flex;
28
- flex-direction: column;
29
- justify-content: center;
30
- align-items: center;
31
- color: white;
32
- text-align: center;
33
- padding: 30px 15px;
34
- border-radius: 0 0 40px 40px;
35
- margin-bottom: 40px;
36
- }
37
-
38
- @keyframes gradientBG {
39
- 0% { background-position: 0% 50%; }
40
- 50% { background-position: 100% 50%; }
41
- 100% { background-position: 0% 50%; }
42
- }
43
-
44
- .logo-container img {
45
- width: 120px;
46
- height: 120px;
47
- border-radius: 50%;
48
- border: 5px solid white;
49
- box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
50
- animation: glow 3s infinite alternate;
51
- }
52
-
53
- @keyframes glow {
54
- 0% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
55
- 100% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9); }
56
- }
57
-
58
- h1 {
59
- font-size: 2.8rem;
60
- font-weight: 700;
61
- margin: 20px 0;
62
- color: #ffffff;
63
- }
64
-
65
- p {
66
- font-size: 1.1rem;
67
- max-width: 600px;
68
- margin: 15px auto;
69
- opacity: 0.9;
70
- color: rgba(255, 255, 255, 0.95);
71
- }
72
-
73
- .cta-buttons {
74
- margin-top: 25px;
75
- }
76
-
77
- .cta-buttons a {
78
- background: #00bcd4;
79
- color: white;
80
- font-size: 1.05rem;
81
- font-weight: bold;
82
- text-decoration: none;
83
- padding: 10px 25px;
84
- border-radius: 30px;
85
- transition: 0.3s;
86
- box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
87
- }
88
-
89
- .cta-buttons a:hover {
90
- background: #0097a7;
91
- box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
92
- transform: translateY(-3px);
93
- }
94
-
95
- .about-section {
96
- background-color: #ffffff;
97
- color: #222;
98
- border-radius: 30px;
99
- padding: 60px 30px;
100
- max-width: 1000px;
101
- margin: 60px auto;
102
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
103
- text-align: center;
104
- }
105
-
106
- .about-section h2 {
107
- font-size: 2.5rem;
108
- color: #0f1117;
109
- margin-bottom: 20px;
110
- font-weight: 800;
111
- }
112
-
113
- .about-section p {
114
- font-size: 1.2rem;
115
- color: #555;
116
- margin: 0 auto 40px;
117
- max-width: 700px;
118
- }
119
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
  """, unsafe_allow_html=True)
121
 
122
 
123
 
124
 
125
-
126
  # واجهة الوكيل الصوتي
127
  st.markdown("""
128
- <div class="full-screen">
129
- <div class="logo-container">
130
- <img src="https://cdn-icons-png.flaticon.com/512/4712/4712027.png" alt="وكيلك الذكي">
131
- </div>
132
- <h1>وكيلك الصوتي الذكي</h1>
133
- <p>تحدث، ودع وكيلك الذكي يتولى المهمة<br>حجوزاتك، طلباتك، كلها تتم بسهولة واحترافية</p>
134
- <div class="cta-buttons">
135
- <a href="#about">من نحن</a>
 
 
 
 
 
 
136
  </div>
137
- </div>
138
 
139
- <div class="about-section" id="about">
140
- <h2>من نحن</h2>
141
- <p>نحن وكيلك الذكي، نقدم حلولاً متطورة لخدمة العملاء الصوتية عبر الذكاء الاصطناعي، لتسريع تجربة المستخدم، وتحقيق تواصل احترافي، على مدار الساعة.</p>
142
- </div>
143
- """, unsafe_allow_html=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
 
10
  # CSS مخصص
11
  st.markdown("""
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
14
+
15
+ html, body, [class*="css"] {
16
+ font-family: 'Cairo', sans-serif;
17
+ background-color: #0f1117;
18
+ margin: 0;
19
+ padding: 0;
20
+ height: 100%;
21
+ overflow: hidden !important;
22
+ }
23
+
24
+ section.main {
25
+ height: 100vh;
26
+ overflow: hidden;
27
+ padding: 0 !important;
28
+ }
29
+
30
+ .block-container {
31
+ padding: 0 !important;
32
+ margin: 0 !important;
33
+ overflow: hidden !important;
34
+ }
35
+
36
+ [data-testid="stVerticalBlock"] {
37
+ overflow: hidden !important;
38
+ max-height: 100vh;
39
+ }
40
+
41
+ header, footer, .viewerBadge_container__1QSob {
42
+ display: none !important;
43
+ }
44
+
45
+ .full-screen {
46
+ height: 100vh;
47
+ width: 100%;
48
+ background: linear-gradient(-45deg, #2193b0, #6dd5ed, #1e3c72, #2a5298);
49
+ background-size: 400% 400%;
50
+ animation: gradientBG 10s ease infinite;
51
+ display: flex;
52
+ flex-direction: column;
53
+ justify-content: center;
54
+ align-items: center;
55
+ color: white;
56
+ text-align: center;
57
+ padding: 30px 15px;
58
+ border-radius: 0 0 40px 40px;
59
+ }
60
+
61
+ @keyframes gradientBG {
62
+ 0% { background-position: 0% 50%; }
63
+ 50% { background-position: 100% 50%; }
64
+ 100% { background-position: 0% 50%; }
65
+ }
66
+
67
+ .logo-container img {
68
+ width: 120px;
69
+ height: 120px;
70
+ border-radius: 50%;
71
+ border: 5px solid white;
72
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
73
+ animation: glow 3s infinite alternate;
74
+ }
75
+
76
+ @keyframes glow {
77
+ 0% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
78
+ 100% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9); }
79
+ }
80
+
81
+ h1 {
82
+ font-size: 2.8rem;
83
+ font-weight: 700;
84
+ margin: 20px 0;
85
+ color: #ffffff;
86
+ }
87
+
88
+ p {
89
+ font-size: 1.1rem;
90
+ max-width: 600px;
91
+ margin: 15px auto;
92
+ opacity: 0.9;
93
+ color: rgba(255, 255, 255, 0.95);
94
+ }
95
+
96
+ .cta-buttons {
97
+ margin-top: 25px;
98
+ }
99
+
100
+ .cta-buttons a {
101
+ background: #00bcd4;
102
+ color: white;
103
+ font-size: 1.05rem;
104
+ font-weight: bold;
105
+ text-decoration: none;
106
+ padding: 10px 25px;
107
+ border-radius: 30px;
108
+ transition: 0.3s;
109
+ box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
110
+ }
111
+
112
+ .cta-buttons a:hover {
113
+ background: #0097a7;
114
+ box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
115
+ transform: translateY(-3px);
116
+ }
117
+
118
+ .about-section {
119
+ background-color: #ffffff;
120
+ color: #222;
121
+ border-radius: 30px;
122
+ padding: 60px 30px;
123
+ max-width: 1000px;
124
+ margin: 60px auto;
125
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
126
+ text-align: center;
127
+ }
128
+
129
+ .about-section h2 {
130
+ font-size: 2.5rem;
131
+ color: #0f1117;
132
+ margin-bottom: 20px;
133
+ font-weight: 800;
134
+ }
135
+
136
+ .about-section p {
137
+ font-size: 1.2rem;
138
+ color: #555;
139
+ margin: 0 auto 40px;
140
+ max-width: 700px;
141
+ }
142
+
143
+ .features {
144
+ display: flex;
145
+ flex-wrap: wrap;
146
+ justify-content: center;
147
+ gap: 30px;
148
+ }
149
+
150
+ .feature {
151
+ background: linear-gradient(135deg, #ffffff, #f7f7f7);
152
+ border-radius: 25px;
153
+ padding: 30px 20px;
154
+ width: 260px;
155
+ text-align: center;
156
+ box-shadow: 0 6px 18px rgba(0,0,0,0.1);
157
+ transition: transform 0.4s ease, box-shadow 0.4s ease;
158
+ }
159
+
160
+ .feature:hover {
161
+ transform: scale(1.05);
162
+ box-shadow: 0 10px 24px rgba(0,0,0,0.15);
163
+ }
164
+
165
+ .feature img {
166
+ width: 60px;
167
+ height: 60px;
168
+ margin-bottom: 15px;
169
+ transition: transform 0.3s ease;
170
+ }
171
+
172
+ .feature:hover img {
173
+ transform: rotate(6deg) scale(1.1);
174
+ }
175
+
176
+ .feature h4 {
177
+ font-size: 1.3rem;
178
+ color: #0077b6;
179
+ margin-bottom: 10px;
180
+ font-weight: 700;
181
+ }
182
+
183
+ .feature p {
184
+ font-size: 1rem;
185
+ color: #444;
186
+ }
187
+
188
+ .feature:nth-child(1) { background: #fef6f0; }
189
+ .feature:nth-child(2) { background: #f0f8ff; }
190
+ .feature:nth-child(3) { background: #f4f4fe; }
191
+
192
+ </style>
193
  """, unsafe_allow_html=True)
194
 
195
 
196
 
197
 
 
198
  # واجهة الوكيل الصوتي
199
  st.markdown("""
200
+ <div class="full-screen">
201
+ <div class="logo-container">
202
+ <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Voice Assistant">
203
+ </div>
204
+ <h1>وكيلك الصوتي الذكي</h1>
205
+ <p>
206
+ تحدث، ودع وكيلنا الذكي يتولى المهمة!<br>
207
+ حجوزاتك وطلباتك تُنجز بسهولة واحترافية.
208
+ </p>
209
+ <div class="cta-buttons">
210
+ <a href="https://vapi.ai?demo=true&shareKey=f612978f-043a-48ad-8133-d5902b2aba32&assistantId=acdaf234-999f-4fc9-b229-d51e1d9fd10d" target="_blank">
211
+ تواصل مع وكيلك الآن
212
+ </a>
213
+ </div>
214
  </div>
 
215
 
216
+ <div class="about-section">
217
+ <h2>من نحن</h2>
218
+ <p>نحن فريق تقني نؤمن بقوة الذكاء الاصطناعي في تسهيل حياتك اليومية، من خلال مساعد ذكي صوتي يفهمك ويتفاعل معك.</p>
219
+ <div class="features">
220
+ <div class="feature">
221
+ <img src="https://cdn-icons-png.flaticon.com/512/3595/3595455.png" alt="Booking">
222
+ <h4>سهولة الحجز</h4>
223
+ <p>إجراء الحجوزات في العيادات والمطاعم بكل سهولة ويسر.</p>
224
+ </div>
225
+ <div class="feature">
226
+ <img src="https://cdn-icons-png.flaticon.com/512/2099/2099058.png" alt="Recording">
227
+ <h4>تسجيل دقيق</h4>
228
+ <p>تسجيل الأوامر والطلبات الصوتية بدقة واحترافية عالية.</p>
229
+ </div>
230
+ <div class="feature">
231
+ <img src="https://cdn-icons-png.flaticon.com/512/4712/4712006.png" alt="Interaction">
232
+ <h4>تفاعل ذكي</h4>
233
+ <p>الرد الفوري والتفاعل الطبيعي مع محادثاتك وكأنك تتحدث مع إنسان.</p>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ """, unsafe_allow_html=True)