Add changes to font and icons

app.py

@@ -30,7 +30,7 @@ def get_ai_response(prompt, chat_history):
     st.session_state.is_streaming = True
     st.session_state.response = ""
     
-    with st.chat_message("ai"):
+    with st.chat_message("ai", avatar=assistant_avatar):
         penalty_kwargs = {
             "frequency_penalty" if penalty_type == "Frequency Penalty" else "presence_penalty": penalty_value
         }
@@ -91,7 +91,8 @@ inline_pattern = r"`([^`\n]+?)`"
 def display_messages():
     for i, message in enumerate(st.session_state.messages):
         name = "user" if message["role"] == "USER" else "ai"
-        with st.chat_message(name):
+        avatar = user_avatar if message["role"] == "USER" else assistant_avatar
+        with st.chat_message(name, avatar=avatar):
             shown_message = message["text"].replace("\n", "  \n")\
                                            .replace("<", "\\<")\
                                            .replace(">", "\\>")
@@ -154,80 +155,99 @@ def display_messages():
 
 # Add sidebar for advanced settings
 with st.sidebar:
-    st.markdown("Help (Japanese): https://rentry.org/9hgneofz")
+    settings_tab, appearance_tab = st.tabs(["Settings", "Appearance"])
 
-    # Copy Conversation History button
-    log_text = ""
-    for message in st.session_state.messages:
-        if message["role"] == "USER":
-            log_text += "<USER>\n"
-            log_text += message["text"] + "\n\n"
-        else:
-            log_text += "<ASSISTANT>\n"
-            log_text += message["text"] + "\n\n"
-    log_text = log_text.rstrip("\n")
+    with settings_tab:
+        st.markdown("Help (Japanese): https://rentry.org/9hgneofz")
+    
+        # Copy Conversation History button
+        log_text = ""
+        for message in st.session_state.messages:
+            if message["role"] == "USER":
+                log_text += "<USER>\n"
+                log_text += message["text"] + "\n\n"
+            else:
+                log_text += "<ASSISTANT>\n"
+                log_text += message["text"] + "\n\n"
+        log_text = log_text.rstrip("\n")
+            
+        # Encode the string to escape
+        log_text_escaped = urllib.parse.quote(log_text)
+    
+        copy_log_button_html = f"""
+        <button id="copy-log-btn" style='font-size: 1em; padding: 0.5em;' onclick='copyLog()'>Copy Conversation History</button>
         
-    # Encode the string to escape
-    log_text_escaped = urllib.parse.quote(log_text)
-
-    copy_log_button_html = f"""
-    <button id="copy-log-btn" style='font-size: 1em; padding: 0.5em;' onclick='copyLog()'>Copy Conversation History</button>
+        <script>
+        function copyLog() {{
+            navigator.clipboard.writeText(decodeURIComponent("{log_text_escaped}"));
+            let copyBtn = document.getElementById("copy-log-btn");
+            copyBtn.innerHTML = "Copied!";
+            setTimeout(function(){{ copyBtn.innerHTML = "Copy Conversation History"; }}, 2000);
+        }}
+        </script>
+        """
+        html(copy_log_button_html, height=50)
     
-    <script>
-    function copyLog() {{
-        navigator.clipboard.writeText(decodeURIComponent("{log_text_escaped}"));
-        let copyBtn = document.getElementById("copy-log-btn");
-        copyBtn.innerHTML = "Copied!";
-        setTimeout(function(){{ copyBtn.innerHTML = "Copy Conversation History"; }}, 2000);
-    }}
-    </script>
-    """
-    html(copy_log_button_html, height=50)
-
-    st.session_state.is_delete_mode = st.toggle("Enable Delete button")
+        st.session_state.is_delete_mode = st.toggle("Enable Delete button")
+        
+        st.header("Advanced Settings")
+        model = st.selectbox("Model", options=["command-r-plus", "command-r"], index=0)
+        preamble = st.text_area("Preamble", height=200)
+        temperature = st.slider("Temperature", min_value=0.0, max_value=1.0, value=0.3, step=0.1)
+        k = st.slider("Top-K", min_value=0, max_value=500, value=0, step=1)
+        p = st.slider("Top-P", min_value=0.01, max_value=0.99, value=0.75, step=0.01)
+        penalty_type = st.selectbox("Penalty Type", options=["Frequency Penalty", "Presence Penalty"])
+        penalty_value = st.slider("Penalty Value", min_value=0.0, max_value=1.0, value=0.0, step=0.1)
     
-    st.header("Advanced Settings")
-    model = st.selectbox("Model", options=["command-r-plus", "command-r"], index=0)
-    preamble = st.text_area("Preamble", height=200)
-    temperature = st.slider("Temperature", min_value=0.0, max_value=1.0, value=0.3, step=0.1)
-    k = st.slider("Top-K", min_value=0, max_value=500, value=0, step=1)
-    p = st.slider("Top-P", min_value=0.01, max_value=0.99, value=0.75, step=0.01)
-    penalty_type = st.selectbox("Penalty Type", options=["Frequency Penalty", "Presence Penalty"])
-    penalty_value = st.slider("Penalty Value", min_value=0.0, max_value=1.0, value=0.0, step=0.1)
-
-    st.header("Restore History")
-    history_input = st.text_area("Paste conversation history:", height=200)
-    if st.button("Restore History"):
-        st.session_state.messages = []
-        messages = re.split(r"^(<USER>|<ASSISTANT>)\n", history_input, flags=re.MULTILINE)
-        role = None
-        text = ""
-        for message in messages:
-            if message.strip() in ["<USER>", "<ASSISTANT>"]:
-                if role and text:
-                    st.session_state.messages.append({"role": role, "text": text.strip()})
-                    text = ""
-                role = "USER" if message.strip() == "<USER>" else "CHATBOT"
+        st.header("Restore History")
+        history_input = st.text_area("Paste conversation history:", height=200)
+        if st.button("Restore History"):
+            st.session_state.messages = []
+            messages = re.split(r"^(<USER>|<ASSISTANT>)\n", history_input, flags=re.MULTILINE)
+            role = None
+            text = ""
+            for message in messages:
+                if message.strip() in ["<USER>", "<ASSISTANT>"]:
+                    if role and text:
+                        st.session_state.messages.append({"role": role, "text": text.strip()})
+                        text = ""
+                    role = "USER" if message.strip() == "<USER>" else "CHATBOT"
+                else:
+                    text += message
+            if role and text:
+                st.session_state.messages.append({"role": role, "text": text.strip()})
+            st.rerun()
+    
+        st.header("Clear History")
+        if st.button("Clear Chat History"):
+            st.session_state.messages = []
+            st.rerun()
+        
+        st.header("Change API Key")
+        new_api_key = st.text_input("Enter new API Key", type="password")
+        if st.button("Update API Key"):
+            if new_api_key and new_api_key.isascii():
+                st.session_state.api_key = new_api_key
+                client = cohere.Client(api_key=new_api_key)
+                st.success("API Key updated successfully!")
             else:
-                text += message
-        if role and text:
-            st.session_state.messages.append({"role": role, "text": text.strip()})
-        st.rerun()
-
-    st.header("Clear History")
-    if st.button("Clear Chat History"):
-        st.session_state.messages = []
-        st.rerun()
+                st.warning("Please enter a valid API Key.")
+                
+    with appearance_tab:
+        st.header("Font Selection")
+        font_options = {
+            "Zen Maru Gothic": "Zen Maru Gothic",
+            "Noto Sans JP": "Noto Sans JP",
+            "Sawarabi Mincho": "Sawarabi Mincho"
+        }
+        selected_font = st.selectbox("Choose a font", ["Default"] + list(font_options.keys()))
+        
+        st.header("Change the user's icon")
+        user_avatar = st.file_uploader("Choose an image", type=["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg",], key="user_avatar_uploader")
     
-    st.header("Change API Key")
-    new_api_key = st.text_input("Enter new API Key", type="password")
-    if st.button("Update API Key"):
-        if new_api_key and new_api_key.isascii():
-            st.session_state.api_key = new_api_key
-            client = cohere.Client(api_key=new_api_key)
-            st.success("API Key updated successfully!")
-        else:
-            st.warning("Please enter a valid API Key.")
+        st.header("Change the assistant's icon")
+        assistant_avatar = st.file_uploader("Choose an image", type=["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg",], key="assistant_avatar_uploader")
+
 
 # After Stop generating
 if st.session_state.get("is_streaming"):
@@ -237,6 +257,11 @@ if st.session_state.get("is_streaming"):
         st.session_state.retry_flag = False
     st.rerun()
 
+if selected_font != "Default":
+    with open("style.css") as css:
+        st.markdown(f'<style>{css.read()}</style>', unsafe_allow_html=True)
+    st.markdown(f'<style>body * {{ font-family: "{font_options[selected_font]}", serif !important; }}</style>', unsafe_allow_html=True)
+
 display_messages()
 
 # After Retry
@@ -258,7 +283,7 @@ if prompt := st.chat_input("Enter your message here..."):
                           .replace("<", "\\<")\
                           .replace(">", "\\>")
 
-    with st.chat_message("user"):
+    with st.chat_message("user", avatar=user_avatar):
         st.write(shown_message)
     
     st.session_state.messages.append({"role": "USER", "text": prompt})