Update rag_hf.py

rag_hf.py

@@ -35,6 +35,61 @@ EX = Namespace("http://example.org/lang/")
 # === CUSTOM CSS ===
 st.markdown("""
 <style>
+    .header {
+        color: #2c3e50;
+        border-bottom: 2px solid #4f46e5;
+        padding-bottom: 0.5rem;
+        margin-bottom: 1.5rem;
+    }
+    .feature-card {
+        background-color: #f8fafc;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 0.5rem 0;
+        border-left: 3px solid #4f46e5;
+    }
+    .response-card {
+    background-color: #fdfdfd;
+    color: #1f2937;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+    margin: 1rem 0;
+    font-size: 1rem;
+    line-height: 1.5;
+    }
+    .language-card {
+        background-color: #f9fafb;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 0.5rem 0;
+        border: 1px solid #e5e7eb;
+    }
+    .sidebar-section {
+        margin-bottom: 1.5rem;
+    }
+    .sidebar-title {
+        font-weight: 600;
+        color: #4f46e5;
+    }
+    .suggested-question {
+        padding: 0.5rem;
+        margin: 0.25rem 0;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+    .suggested-question:hover {
+        background-color: #f1f5f9;
+    }
+    .metric-badge {
+        display: inline-block;
+        background-color: #e8f4fc;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.85rem;
+        margin-right: 0.5rem;
+    }
     .tech-badge {
         background-color: #ecfdf5;
         color: #065f46;
@@ -142,22 +197,90 @@ def generate_response(matrix, id_map, G, rdf, user_question, k, embedder):
 
 def main():
     methods, embedder = load_all_components()
-    st.title("Atlas de Lenguas: Lenguas Indígenas Sudamericanas")
-    st.markdown("<span class='tech-badge'>Correo: jxvera@gmail.com</span>", unsafe_allow_html=True)
-    query = st.text_input("Escribe tu pregunta sobre lenguas indígenas:")
-    k = st.slider("Número de lenguas similares a recuperar", min_value=1, max_value=10, value=3)
-    if st.button("Analizar"):
-        method = methods["LinkGraph"]
+    st.markdown("""
+    <div class="header">
+        <h1>🌍 Atlas de Lenguas: Lenguas Indígenas Sudamericanas</h1>
+    </div>
+    """, unsafe_allow_html=True)
+
+    with st.sidebar:
+        st.markdown("### 📚 Información de Contacto")
+        st.markdown("""
+        - <span class="tech-badge">Correo: jxvera@gmail.com</span>
+        """, unsafe_allow_html=True)
+
+        st.markdown("---")
+        st.markdown("### 🚀 Inicio Rápido")
+        st.markdown("""
+        1. **Escribe una pregunta** en el cuadro de entrada
+        2. **Haz clic en 'Analizar'** para obtener la respuesta
+        3. **Explora los resultados** con los detalles expandibles
+        """)
+
+        st.markdown("---")
+        st.markdown("### 🔍 Preguntas de Ejemplo")
+        questions = [
+            "¿Qué idiomas están en peligro en Brasil?",
+            "¿Qué idiomas se hablan en Perú?",
+            "¿Cuáles idiomas están relacionados con el Quechua?",
+            "¿Dónde se habla el Mapudungun?"
+        ]
+        for q in questions:
+            if st.button(q, key=f"suggested_{q}", use_container_width=True):
+                st.session_state.query = q
+
+        st.markdown("---")
+        st.markdown("### 📊 Parámetros de Análisis")
+        k = st.slider("Número de idiomas a analizar", 1, 10, 3)
+
+        st.markdown("---")
+        st.markdown("### 🔧 Opciones Avanzadas")
+        show_ctx = st.checkbox("Mostrar información de contexto", False)
+        show_rdf = st.checkbox("Mostrar hechos estructurados", False)
+
+    st.markdown("### 📝 Haz una pregunta sobre lenguas indígenas")
+    query = st.text_input(
+        "Ingresa tu pregunta:",
+        value=st.session_state.get("query", ""),
+        label_visibility="collapsed",
+        placeholder="Ej. ¿Qué lenguas se hablan en Perú?"
+    )
+
+    if st.button("Analizar", type="primary", use_container_width=True):
+        if not query:
+            st.warning("Por favor, ingresa una pregunta")
+            return
+        label = "LinkGraph"
+        method = methods[label]
         start = datetime.datetime.now()
         response, lang_ids, context, rdf_data = generate_response(*method, query, k, embedder)
         duration = (datetime.datetime.now() - start).total_seconds()
-        st.markdown(response, unsafe_allow_html=True)
-        st.caption(f"⏱️ {duration:.2f} segundos | 🌐 {len(lang_ids)} idiomas analizados")
-        with st.expander("📖 Contexto"):
-            for ctx in context:
-                st.markdown(ctx)
-        with st.expander("🔗 Hechos RDF"):
-            st.code("\n".join(rdf_data))
+        st.markdown(f"""
+        <div class="response-card">
+            {response}
+            <div style="margin-top: 1rem;">
+                <span class="metric-badge">⏱️ {duration:.2f}s</span>
+                <span class="metric-badge">🌐 {len(lang_ids)} idiomas</span>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+
+        if show_ctx:
+            with st.expander(f"📖 Contexto de {len(lang_ids)} idiomas"):
+                for lang_id, ctx in zip(lang_ids, context):
+                    st.markdown(f"<div class='language-card'>{ctx}</div>", unsafe_allow_html=True)
+
+        if show_rdf:
+            with st.expander("🔗 Hechos estructurados (RDF)"):
+                st.code("\n".join(rdf_data))
+
+    st.markdown("---")
+    st.markdown("""
+    <div style="font-size: 0.8rem; color: #64748b; text-align: center;">
+    <b>📌 Nota:</b> Esta herramienta está diseñada para investigadores, lingüistas y preservacionistas culturales.
+      Para mejores resultados, usa preguntas específicas sobre idiomas, familias o regiones.
+    </div>
+    """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()