app.py

"""Tagba Translator"""
import streamlit as st
import requests

api_url = "https://31d7-196-13-207-151.ngrok-free.app/"


if 'source_lang' not in st.session_state:
    st.session_state.source_lang = 'Français'
if 'target_lang' not in st.session_state:
    st.session_state.target_lang = 'Tagba'

st.markdown(
    """
    <style>
    .stApp {
        background-color: #003366;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .col-container {
        font-weight: bold;
        font-size: 25px;
        font-family: calibri(corps);
        color: antiquewhite;
        border: 2px solid antiquewhite;
        border-radius: 50px;
        display: inline-flex;
        justify-content: center;
        text-align: center;
        padding: 2px 4px;
        margin-top: 30px;
        margin-left: 90px;
    }
    .stColumns > div {
            border: 2px solid #000;
        }
    .title {
        text-align: center;
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 10px;
        font-family: 'Brush Script MT', cursive;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        letter-spacing: 1px;
        position: relative;
    }
    .title::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 10%;
        width: 80%;
        height: 2px;
        background-color: #FFFFFF;
    }
    .footer {
        color: antiquewhite;
    }
    .block-container {
        background: rgba(255, 255, 255, 0.3);
        min-width: 500px;
        min-height: 600px;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 3px 6px 40px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        heigh: 100%;
        position: absolute;
    }
    .stButton>button {
        display: block;
        margin:: 0 auto;
        position: absolute;
        margin-top: 20px;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.markdown('<h1 class="title">Tagba Translator</h1>', unsafe_allow_html=True)

col1, col_swap, col2 = st.columns([1, 0.05, 1], gap="small")

with col_swap:
    st.write("")
    swap = st.button("⇄")

    if swap:
        st.session_state.source_lang, st.session_state.target_lang = st.session_state.target_lang, st.session_state.source_lang

if "translation" not in st.session_state:
    st.session_state.translation = "Traduction"

with col1:
    st.markdown('<h3 class="col-container">'+st.session_state.source_lang+'</h3>', unsafe_allow_html=True)
    text_to_translate = st.text_area(
        label=" ",
        height=200,
        placeholder="Entrez un texte ici"
    )

st.markdown('</div>', unsafe_allow_html=True)
if st.button("Traduire"):
    if text_to_translate:
        try:
            response = requests.post('https://17a8-102-180-109-59.ngrok-free.app/translate/', json={"text": text_to_translate, "lang": st.session_state.target_lang}, timeout=1000)
            if response.status_code == 200:
                translation = response.json()["translation"]
                st.session_state.translation = translation
            else:
                st.error("Erreur lors de la traduction.")
                response.raise_for_status()
        except requests.exceptions.RequestException as e:
            st.error("Erreur lors de la traduction.")
            print(e)
    else:
        st.warning("Veuillez entrer du texte à traduire.")

with col2:
    st.markdown('<h3 class="col-container style="margin-top: 10px; margin-bottom: 10px;">'+st.session_state.target_lang+'</h3>', unsafe_allow_html=True)
    st.text_area(
        label=" ",
        value=st.session_state.translation,
        height=200
    )
st.markdown('</div>', unsafe_allow_html=True)