initial UI

docs/pages/contribution/contribution.md

@@ -133,7 +133,7 @@ Please refer to [Dev Containers](https://containers.dev/supporting#editors) to s
 
 You can also set up the development environment without Dev Containers. There are three things you will need to set up manually:
 
-- Python and uv: Please start from an environment supporting Python 3.10+ and install uv using `pip install uv; uv sync --all-extra`.
+- Python and uv: Please start from an environment supporting Python 3.10+ and install uv using `pip install uv; uv sync --all-extras`. (Note that this will install all the extra dependencies)
 - Redis: Please refer to introduction page for the set up of Redis.
 - Local LLM (optional): If you don't have access to model endpoints (e.g. OpenAI, Anthropic or others), you can use a local model. You can use Ollama, Llama.cpp,  vLLM or many others which support OpenAI compatible endpoints.
 

pyproject.toml

@@ -40,6 +40,8 @@ examples = ["transformers", "datasets", "scipy", "torch", "pandas"]
 api = [
     "fastapi[standard]",
     "uvicorn",
+    "streamlit",
+    "websockets"
 ]
 test = ["pytest", "pytest-cov", "pytest-asyncio"]
 

sotopia/ui/README.md

@@ -2,6 +2,14 @@
 > [!CAUTION]
 > Work in progress: the API endpoints are being implemented. And will be released in the future major version.
 
+## Streamlit UI
+To run the Streamlit UI, run the following command:
+```bash
+cd sotopia/ui/streamlit_ui
+uv run streamlit run app.py
+```
+
+
 ## FastAPI Server
 
 The API server is a FastAPI application that is used to connect the Sotopia UI to the Sotopia backend.

sotopia/ui/streamlit_ui/.streamlit/config.toml

@@ -0,0 +1,11 @@
+[theme]
+base="light"
+primaryColor = "#26184e"
+backgroundColor="#FFFFFF"
+secondaryBackgroundColor="#F0F2F6"
+textColor="#31333F"
+font="sans serif"
+
+
+[server]
+enableStaticServing = true

sotopia/ui/streamlit_ui/__init__.py

@@ -0,0 +1,7 @@
+from .utils import reset_database
+from .rendering.rendering_utils import (
+    _agent_profile_to_friendabove_self,
+    render_for_humans,
+)
+
+__all__ = ["reset_database", "_agent_profile_to_friendabove_self", "render_for_humans"]

sotopia/ui/streamlit_ui/app.py

@@ -0,0 +1,79 @@
+import os
+
+import streamlit as st
+
+from sotopia.ui.streamlit_ui.utils import reset_database
+
+
+def update_database_callback() -> None:
+    new_database_url = st.session_state.new_database_url
+    updated_url = (
+        new_database_url if new_database_url != "" else st.session_state.DEFAULT_DB_URL
+    )
+    try:
+        reset_database(updated_url)
+    except Exception as e:
+        st.error(f"Error occurred while updating database: {e}, please try again.")
+
+    st.session_state.current_database_url = updated_url
+    print("Updated DB URL: ", st.session_state.current_database_url)
+
+
+# Page Configuration
+st.set_page_config(page_title="SocialStream_Demo", page_icon="🧊", layout="wide")
+
+display_intro = st.Page(
+    "./pages/intro.py", title="Introduction", icon=":material/home:"
+)
+display_episodes = st.Page(
+    "./pages/display_episodes.py", title="Episode", icon=":material/photo_library:"
+)
+display_scenarios = st.Page(
+    "./pages/display_scenarios.py",
+    title="Scenarios",
+    icon=":material/insert_drive_file:",
+)
+display_characters = st.Page(
+    "./pages/display_characters.py", title="Characters", icon=":material/people:"
+)
+
+display_chat = st.Page(
+    "./pages/render_chat_websocket.py", title="Simulation", icon=":material/add:"
+)
+
+pg = st.navigation(
+    [
+        display_intro,
+        display_scenarios,
+        display_episodes,
+        display_characters,
+        display_chat,
+    ]
+)
+
+# Reset active agent when switching modes across pages
+if "mode" not in st.session_state or pg.title != st.session_state.get("mode", None):
+    if "active" in st.session_state:
+        del st.session_state["active"]
+        # print("Active agent reset.")
+
+    st.session_state.mode = pg.title
+
+
+# DB URL Configuration
+if "DEFAULT_DB_URL" not in st.session_state:
+    st.session_state.DEFAULT_DB_URL = os.environ.get("REDIS_OM_URL", "")
+    st.session_state.current_database_url = st.session_state.DEFAULT_DB_URL
+    print("Default DB URL: ", st.session_state.DEFAULT_DB_URL)
+
+# impl 2: popup update URL
+with st.sidebar.popover("(Optional) Enter Database URL"):
+    new_database_url = st.text_input(
+        "URL: (starting in redis://)",
+        value="",
+        on_change=update_database_callback,
+        key="new_database_url",
+    )
+
+
+pg.run()

sotopia/ui/streamlit_ui/css/style.css

@@ -0,0 +1,28 @@
+.truncate{
+    max-height: 2em;
+    text-overflow: ellipsis;
+    margin-bottom: 12px;
+    cursor: pointer;
+    word-break: break-all;
+    overflow:hidden;
+    white-space: nowrap;
+    transition: max-height 1s, white-space 1s;
+}
+.truncate:hover{
+    overflow: auto;
+    overflow-y: scroll;
+    white-space: normal;
+    max-height: 200px;
+}
+/*
+[data-testid="stAppViewContainer"] {
+    background-image: url("https://images.unsplash.com/photo-1729096532452-50549f2bb63c");
+    background-size: 40%;
+    background-position: top right;
+    background-repeat: no-repeat;
+    background-attachment: local;
+} */
+
+[data-testid="stHeader"] {
+    background: rgba(0,0,0,0);
+}

sotopia/ui/streamlit_ui/pages/display_characters.py

@@ -0,0 +1,85 @@
+import streamlit as st
+
+from sotopia.database import AgentProfile
+
+
+def local_css(file_name: str) -> None:
+    with open(file_name) as f:
+        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+
+
+def display_characters() -> None:
+    st.title("Characters")
+    all_characters = AgentProfile.find().all()
+
+    col1, col2 = st.columns(2, gap="medium")
+    for i, character in enumerate(all_characters):
+        with col1 if i % 2 == 0 else col2:
+            assert isinstance(character, AgentProfile)
+            rendering_character(character)
+            st.write("---")
+
+
+def display_field(label: str, value: str) -> str:
+    if value:
+        return f"<p><strong>{label}:</strong> {value}</p>"
+    return ""
+
+
+def rendering_character(character: AgentProfile) -> None:
+    local_css("././css/style.css")
+
+    full_name = f"{character.first_name} {character.last_name}"
+
+    personal_info = ""
+    personal_info += display_field("Age", str(character.age))
+    personal_info += display_field("Occupation", character.occupation)
+    personal_info += display_field("Gender", character.gender)
+    personal_info += display_field("Gender Pronoun", character.gender_pronoun)
+
+    st.markdown(
+        f"""
+    <div style="background-color: #f9f9f9; padding: 10px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px;">
+        <p><strong>Name</strong>: {full_name}</p>
+        <div style="background-color: #D1E9F6; padding: 10px; border-radius: 10px; margin-bottom: 5px;">
+            <p><strong>Demographic Information</strong></p>
+            <div class="truncate">
+                {personal_info}
+            </div>
+        </div>
+
+    </div>
+    """,
+        unsafe_allow_html=True,
+    )
+    with st.expander("Additional Information", expanded=False):
+        additional_info = ""
+        additional_info += display_field("Public Info", character.public_info)
+        additional_info += display_field("Big Five", character.big_five)
+        additional_info += display_field(
+            "Moral Values", ", ".join(character.moral_values)
+        )
+        additional_info += display_field(
+            "Schwartz Personal Values", ", ".join(character.schwartz_personal_values)
+        )
+        additional_info += display_field(
+            "Personality and Values", character.personality_and_values
+        )
+        additional_info += display_field(
+            "Decision Making Style", character.decision_making_style
+        )
+        additional_info += display_field("Secret", character.secret)
+        additional_info += display_field("Model ID", character.model_id)
+        additional_info += display_field("MBTI", character.mbti)
+
+        st.markdown(
+            f"""
+            <div style="background-color: #d0f5d0; padding: 10px; border-radius: 10px; margin-bottom: 12px;">
+                {additional_info}
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+
+
+display_characters()

sotopia/ui/streamlit_ui/pages/display_episodes.py

@@ -0,0 +1,8 @@
+import streamlit as st
+
+from sotopia.ui.streamlit_ui.rendering import rendering_episodes
+
+st.title("Episode")
+
+st.write("Here are some instructions about using the episode renderer.")
+rendering_episodes()

sotopia/ui/streamlit_ui/pages/display_scenarios.py

@@ -0,0 +1,29 @@
+import requests
+import streamlit as st
+from sotopia.ui.streamlit_ui.rendering.rendering_utils import render_environment_profile
+from sotopia.database import EnvironmentProfile
+
+
+def local_css(file_name: str) -> None:
+    with open(file_name) as f:
+        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+
+
+local_css("./css/style.css")
+
+
+def display_scenarios() -> None:
+    st.title("Scenarios")
+
+    response = requests.get("http://localhost:8000/scenarios")
+    scenarios = response.json() if response.status_code == 200 else []
+
+    col1, col2 = st.columns(2, gap="medium")
+    for i, scenario in enumerate(scenarios):
+        with col1 if i % 2 == 0 else col2:
+            environment_profile = EnvironmentProfile(**scenario)
+            render_environment_profile(environment_profile)
+            st.write("---")
+
+
+display_scenarios()

sotopia/ui/streamlit_ui/pages/intro.py

@@ -0,0 +1,7 @@
+import streamlit as st
+
+st.title("Sotopia")
+st.write(
+    "Welcome to the Sotopia Demo App. This app lets you explore various chat scenarios, from basic chats to omniscient editing views, and view episodes in detail."
+)
+st.markdown("Use the sidebar to navigate between pages.")