Add autoscrolling and rearrange score location

app.py

@@ -9,6 +9,10 @@ description = """
 st.title("ScienceWorld Demo")
 st.markdown(description)
 
+# Apply custom CSS.
+with open('style.css')as f:
+    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+
 env = st.session_state.get("env")
 if env is None:
     env = ScienceWorldEnv("")
@@ -59,7 +63,7 @@ with st.sidebar:
     if infos['score'] == 100:
         valid_actions = ["", "reset"]
 
-    #act = st.selectbox('Action:', options=valid_actions, index=0, on_change=step, key="action")
+    # act = st.selectbox('Action:', options=valid_actions, index=0, on_change=step, key="action")
 
 for act, obs in history:
     if act:
@@ -68,6 +72,10 @@ for act, obs in history:
     if obs:
         st.info(obs.replace('\n\t', '\n- '))
 
+act = st.selectbox('Action:', options=valid_actions, index=0, on_change=step, key="action")
+
+st.warning(f"Current score:  {infos['score']} out of 100")
+
 if infos['score'] == 100:
     with st.sidebar:
         st.balloons()
@@ -75,16 +83,14 @@ if infos['score'] == 100:
     st.success("Congratulations! You have completed the task.")
 
 
-act = st.selectbox('Action:', options=valid_actions, index=0, on_change=step, key="action")
-
+# Auto scroll at the bottom of the page.
+components.html(
+f"""
+    <p>{st.session_state.obs}</p>
+    <script>
+        window.parent.document.querySelector('section.main').scrollTo(0, window.parent.document.querySelector('section.main').scrollHeight);
+    </script>
 
-# # Auto scroll at the bottom of the page.
-# components.html(
-# f"""
-#     <p>{st.session_state.obs}</p>
-#     <script>
-#         window.parent.document.querySelector('section.main').scrollTo(0, window.parent.document.querySelector('section.main').scrollHeight);
-#     </script>
 # """,
-# height=0
-# )
+height=0
+)

style.css

@@ -0,0 +1,4 @@
+section.main[tabindex="0"] {
+    overflow-y: scroll;
+    /* height: 700px */
+}