Spaces:
Running
Running
Commit
Β·
d8bcdf5
1
Parent(s):
2027242
Update page1.py
Browse files
page1.py
CHANGED
@@ -8,8 +8,40 @@ from langchain.memory.chat_message_histories import StreamlitChatMessageHistory
|
|
8 |
from streamlit_chat import message
|
9 |
import time
|
10 |
def text():
|
11 |
-
|
12 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
13 |
apiKey = "AIzaSyAXkkcrrUBjPEgj93tZ9azy7zcS1wI1jUA"
|
14 |
msgs = StreamlitChatMessageHistory(key="special_app_key")
|
15 |
|
@@ -56,7 +88,7 @@ def text():
|
|
56 |
.dot-pulse {
|
57 |
position: relative;
|
58 |
left: -9999px;
|
59 |
-
|
60 |
width: 10px;
|
61 |
height: 10px;
|
62 |
border-radius: 5px;
|
|
|
8 |
from streamlit_chat import message
|
9 |
import time
|
10 |
def text():
|
11 |
+
st.markdown("""
|
12 |
+
<style>
|
13 |
+
.anim-typewriter {
|
14 |
+
animation: typewriter 3s steps(40) 1s 1 normal both, blinkTextCursor 800ms steps(40) infinite normal;
|
15 |
+
overflow: hidden;
|
16 |
+
white-space: nowrap;
|
17 |
+
border-right: 4px solid;
|
18 |
+
font-family: serif;
|
19 |
+
font-size: 1.1em;
|
20 |
+
}
|
21 |
+
@keyframes typewriter {
|
22 |
+
from {
|
23 |
+
width: 0;
|
24 |
+
}
|
25 |
+
to {
|
26 |
+
width: 100%;
|
27 |
+
height: 100%
|
28 |
+
}
|
29 |
+
}
|
30 |
+
@keyframes blinkTextCursor {
|
31 |
+
from {
|
32 |
+
border-right-color: rgba(255, 255, 255, 0.75);
|
33 |
+
}
|
34 |
+
to {
|
35 |
+
border-right-color: transparent;
|
36 |
+
}
|
37 |
+
}
|
38 |
+
</style>
|
39 |
+
""", unsafe_allow_html=True)
|
40 |
+
text ="Hello π, how may I assist you today?"
|
41 |
+
animated_output = f'<div class="line-1 anim-typewriter">{text}</div>'
|
42 |
+
|
43 |
+
with st.chat_message("assistant").markdown(animated_output,unsafe_allow_html=True ):
|
44 |
+
st.markdown(animated_output,unsafe_allow_html=True)
|
45 |
apiKey = "AIzaSyAXkkcrrUBjPEgj93tZ9azy7zcS1wI1jUA"
|
46 |
msgs = StreamlitChatMessageHistory(key="special_app_key")
|
47 |
|
|
|
88 |
.dot-pulse {
|
89 |
position: relative;
|
90 |
left: -9999px;
|
91 |
+
|
92 |
width: 10px;
|
93 |
height: 10px;
|
94 |
border-radius: 5px;
|