', unsafe_allow_html=True)
st.markdown("### Stage de Fin d'Études")
st.markdown("**Étudiant:** Mohammed MEDIANI")
st.markdown("**Filière:** IAID - EST Nador")
st.markdown("**Date:** Juin 2025")
st.markdown("
", unsafe_allow_html=True)
st.markdown("---")
st.markdown('', unsafe_allow_html=True)
st.markdown("### Encadrement")
st.markdown("- **Pr. ACHSAS SANAE** (Académique)")
st.markdown("- **Mme. Aya BENNANI** (Professionnelle)")
st.markdown("
", unsafe_allow_html=True)
st.markdown("---")
st.markdown('', unsafe_allow_html=True)
st.markdown("### Informations sur l'API")
st.markdown("**URL:** [mediani-darija-aicc-api.hf.space](https://mediani-darija-aicc-api.hf.space)")
st.markdown("**Documentation:** [API Docs](https://mediani-darija-aicc-api.hf.space/docs)")
st.markdown("
", unsafe_allow_html=True)
# Titre principal et description
with header_col2:
st.markdown('
Ce projet vise à concevoir et déployer une API de compréhension du langage naturel (NLU) spécialisée pour la Darija marocaine. L'objectif est d'améliorer l'expérience client en permettant aux systèmes automatisés de comprendre les requêtes exprimées dans ce dialecte.
L'API identifie 9 intentions différentes et s'intègre avec la plateforme AICC de Huawei pour le traitement des requêtes clients.
✨ Cette démonstration interactive vous permet d'explorer les capacités de l'API en temps réel
""", unsafe_allow_html=True)
# Animation Lottie centrée sous le texte - Taille agrandie pour remplir l'espace vertical
st.markdown('', unsafe_allow_html=True)
if lottie_ai:
st_lottie(lottie_ai, height=400, width=680, key="ai_animation", quality="high")
st.markdown('
', unsafe_allow_html=True)
# Espace réduit car l'animation est plus grande et remplit déjà bien l'espace
st.markdown("', unsafe_allow_html=True)
# Créer deux colonnes pour les résultats
res_col1, res_col2 = st.columns([1, 1])
with res_col1:
# Icône et tag d'intention
intent_icon = get_intent_icon(result["intent"])
st.markdown(f'
{intent_icon} {result["intent"]}
', unsafe_allow_html=True)
# Description de l'intention
st.markdown(f"**Description:** {get_intent_description(result['intent'])}")
# Temps de réponse avec badge coloré
speed_class = "success" if response_time < 200 else "warning" if response_time < 500 else "danger"
st.markdown(f"""
⏱️ Temps de réponse:
{response_time:.2f} ms
""", unsafe_allow_html=True)
with res_col2:
# Utiliser Plotly pour un graphique interactif de confiance
fig = go.Figure()
# Ajouter la barre de fond
fig.add_trace(go.Bar(
x=[1],
y=['Confiance'],
orientation='h',
marker=dict(color='rgba(240, 240, 240, 0.5)'),
width=0.5,
hoverinfo='skip',
showlegend=False
))
# Ajouter la barre principale
fig.add_trace(go.Bar(
x=[result["confidence"]],
y=['Confiance'],
orientation='h',
marker=dict(color=get_intent_color(result["intent"])),
width=0.5,
hovertemplate=f'Confiance: {result["confidence"]*100:.1f}%
'
))
# Configuration de la mise en page
fig.update_layout(
title=f"Score: {result['confidence']*100:.1f}%",
height=150,
margin=dict(l=20, r=20, t=40, b=20),
xaxis=dict(
range=[0, 1],
tickvals=[0, 0.25, 0.5, 0.75, 1],
ticktext=['0%', '25%', '50%', '75%', '100%'],
gridcolor='rgba(0, 0, 0, 0.1)'
),
barmode='overlay',
bargap=0.1,
showlegend=False
)
st.plotly_chart(fig, use_container_width=True)
# Fermer le conteneur en verre
st.markdown('