streamlit.py

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)