Summary
Using line breaks in st.write generates an undesirable look.
I have a string session state variable that I update and render as sort of a ‘story’, thus, there must be paragraphs. However when I add line breaks via \n an undesirable textarea/textbox is created, how can I avoid this from happening?
Steps to reproduce
Code snippet:
import os
import requests
import streamlit as st
def generate_images(prompt, num, output_directory):
...
output_directory = "./out/"
st.set_page_config(page_title="Story", page_icon="🧩")
st.title("Interactive Storytelling Experience")
if 'filenames' not in st.session_state:
st.session_state.filenames = []
if 'captions' not in st.session_state:
st.session_state.captions = []
if 'story' not in st.session_state:
st.session_state.story = "Once upon a time...\n"
if 'images' not in st.session_state:
st.session_state.images = []
if 'last_clicked' not in st.session_state:
st.session_state.last_clicked = -1
if 'end' not in st.session_state:
st.session_state.end = False
if 'init' not in st.session_state:
st.session_state.init = True
prompt_container = st.empty()
prompt = prompt_container.text_area('initprompt', label_visibility="collapsed", key="init_prompt")
text_col, img_col = st.columns(2)
if prompt != "":
with img_col:
img_container = st.empty()
if st.session_state.last_clicked == -1:
if not st.session_state.end:
#
options = [
"Option 1: Eric decides to intervene directly, using his powers to disarm the robbers and save the hostages.",
"Option 2: Eric takes a more cautious approach and uses his powers to stealthily gather information about the robbers' plans before alerting the authorities.",
"Option 3: Eric decides to observe the situation from a safe distance, trying to analyze the criminals' weaknesses and come up with a strategic plan of action.",
"Option 4: Overwhelmed by the gravity of the situation, Eric hesitates and struggles to decide on the best course of action.",
"Option 5: Eric realizes that his powers are not yet fully developed, so he chooses to retreat and seek guidance from someone who can help him understand and control his abilities."
]
story_intro = """in the bustling city of Metroville, there lived an ordinary 17-year-old boy named Eric. \n
Little did everyone know, Eric possessed extraordinary superpowers that he had yet to fully understand and master. \n
From a young age, he had dreamed of becoming a superhero and using his abilities to protect the innocent and fight for justice. \n
One sunny day, as Eric walked home from school, he noticed a commotion in the distance. Curiosity piqued, he hurried toward the source of the disturbance. \n
To his surprise, he stumbled upon a bank robbery in progress.The robbers were armed and threatening the innocent bank employees and customers. \n
Now faced with a pivotal moment, Eric had to make a choice. How would he use his burgeoning powers to confront the criminals and bring them to justice? \n"""
story_end = "What path will Eric choose? The decision is yours to make. \n"
st.session_state.story = st.session_state.story + story_intro + story_end
with text_col:
storyBox = st.write(st.session_state.story)
for option in options:
if option.startswith("Option 1"):
text_col.markdown(f"<span style='color: Thistle'>{option}</span>", unsafe_allow_html=True)
elif option.startswith("Option 2"):
text_col.markdown(f"<span style='color: Thistle'>{option}</span>", unsafe_allow_html=True)
elif option.startswith("Option 3"):
text_col.markdown(f"<span style='color: Thistle'>{option}</span>", unsafe_allow_html=True)
elif option.startswith("Option 4"):
text_col.markdown(f"<span style='color: Thistle'>{option}</span>", unsafe_allow_html=True)
elif option.startswith("Option 5"):
text_col.markdown(f"<span style='color: Thistle'>{option}</span>", unsafe_allow_html=True)
n = 1
if st.session_state.init:
st.session_state.init = False
prompt = """Heroic Transformation: Ordinary to Extraordinary, Symbolic Imagery, Justice Personified.
Depict the transformative journey of Eric, the 17-year-old with hidden superpowers, as he confronts the bank robbery.
Illustrate his evolution from an ordinary teenager to a symbol of justice and heroism.
Utilize symbolic imagery to represent his newfound powers and the responsibilities that come with them.
Create a visually striking representation that inspires viewers and captures the essence of Eric's choice to become a superhero.""" ## populate w chatgpt img prompts
generate_images(prompt, n, output_directory)
file_path = os.path.join(output_directory, f"{prompt[:100]}{len(st.session_state.images)}.png")
current_images= []
for i in range(n):
file_path = os.path.join(output_directory, f"{prompt[:100]}{len(st.session_state.images)}.png")
st.session_state.captions.append(prompt)
st.session_state.images.append(file_path)
st.session_state.filenames.append(file_path)
img_container.image(st.session_state.images, caption=st.session_state.captions)
img_container.image(st.session_state.images, caption=st.session_state.captions)
if st.session_state.end:
with text_col:
storyBox = st.write(st.session_state.story)
Expected behavior:
To have the text appear like it does for the first paragraph below, but have line breaks. Same issue persists with st.markdown.
Actual behavior:
