Create app.py (#1)

- Create app.py (41169d1aa920bfa06970e5af458f7e72efbb3cfb)


Co-authored-by: OUILY Hamed Joseph <[email protected]>

app.py

@@ -0,0 +1,139 @@
+"""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://31d7-196-13-207-151.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)
+