Skip to content

Instantly share code, notes, and snippets.

@spinningcat
Created November 13, 2023 14:51
Show Gist options
  • Save spinningcat/4cd35293f2e58e9a9e926353f1c7d334 to your computer and use it in GitHub Desktop.
Save spinningcat/4cd35293f2e58e9a9e926353f1c7d334 to your computer and use it in GitHub Desktop.
import streamlit as st
# Title
st.title('Transvoice App')
# Apply custom CSS for a two-column layout
st.markdown(
"""
<style>
.two-column-layout {
display: grid;
grid-template-columns: 1fr 1fr; /* Adjust the column widths as needed */
grid-gap: 20px; /* Adjust the gap between columns as needed */
border:5px solid red;
}
.custom-section {
background-color: #f0f0f0; /* Set background color for the sections */
padding: 20px; /* Add padding for styling */
margin-bottom: 20px; /* Add margin between sections */
}
</style>
""",
unsafe_allow_html=True
)
# Wrap the sections in a common container div
with st.markdown("<div class='two-column-layout'>", unsafe_allow_html=True):
# Main Language section
with st.markdown("<div class='custom-section'><h3>Main Language</h3></div>", unsafe_allow_html=True):
text_box1 = st.text_area('Main Language', height=75, max_chars=5000)
# Translated Language section
with st.markdown("<div class='custom-section'><h3>Translated Language</h3></div>", unsafe_allow_html=True):
text_box5 = st.text_area('Translated Language', height=75, max_chars=5000)
# Process Log section
with st.markdown("<div class='custom-section'><h3>Process Log</h3></div>", unsafe_allow_html=True):
text_box1 = st.text_area('Process Log', height=75, max_chars=5000)
# Speech Log section
with st.markdown("<div class='custom-section'><h3>Speech Log</h3></div>", unsafe_allow_html=True):
text_box5 = st.text_area('Speech Log', height=75, max_chars=5000)
# Close the common container div
st.markdown("</div>", unsafe_allow_html=True)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment