Update app.py

app.py

@@ -1,49 +1,134 @@
 import streamlit as st
+import pandas as pd
+import plotly.graph_objs as go
 from evaluation_module import RAGEvaluator
 
+# Page configuration
+st.set_page_config(
+    page_title="RAG Evaluation Dashboard", 
+    page_icon="🔍", 
+    layout="wide"
+)
+
+# Custom CSS for improved styling
+st.markdown("""
+<style>
+    .main-header {
+        color: #2C3E50;
+        font-weight: bold;
+        text-align: center;
+        padding-bottom: 20px;
+    }
+    .metric-card {
+        background-color: #F0F4F8;
+        border-radius: 10px;
+        padding: 15px;
+        margin-bottom: 15px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+    .stTextArea, .stTextInput {
+        background-color: #FFFFFF;
+        border-radius: 8px;
+    }
+    .stButton>button {
+        background-color: #3498DB;
+        color: white;
+        font-weight: bold;
+        border: none;
+        border-radius: 8px;
+        padding: 10px 20px;
+    }
+    .stButton>button:hover {
+        background-color: #2980B9;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# Title
+st.markdown("<h1 class='main-header'>🔍 RAG System Evaluation Dashboard</h1>", unsafe_allow_html=True)
+
 # Initialize evaluator
 evaluator = RAGEvaluator()
 
-st.title("RAG System Evaluation Dashboard")
-
-st.write("## Input Data")
+# Input Section
+col1, col2 = st.columns(2)
 
-# Pre-filled input fields for testing
-question = st.text_input("Question", "What are the causes of climate change?")
-context = st.text_area("Reference Context (top 'k' documents)", """
+with col1:
+    st.markdown("### 📝 Input Details")
+    question = st.text_input("Question", "What are the causes of climate change?", key="question_input")
+    context = st.text_area("Reference Context", """
 Climate change is caused by a variety of factors, including natural processes and human activities. Human activities, such as burning fossil fuels, deforestation, and industrial processes, release greenhouse gases into the atmosphere. These gases trap heat from the sun, causing the Earth's temperature to rise. Natural processes, such as volcanic eruptions and variations in solar radiation, also play a role in climate change.
-""")
-generated_output = st.text_area("LLM Generated Output", """
+""", height=200, key="context_input")
+
+with col2:
+    st.markdown("### 💬 Generated Output")
+    generated_output = st.text_area("LLM Response", """
 Climate change is primarily caused by human activities that release greenhouse gases into the atmosphere. These activities include burning fossil fuels for energy, deforestation, and various industrial processes. The increase in greenhouse gases, such as carbon dioxide and methane, traps more heat in the Earth's atmosphere, leading to a rise in global temperatures. Natural factors, like volcanic activity and changes in solar radiation, can also contribute to climate change, but their impact is relatively minor compared to human activities.
-""")
+""", height=200, key="output_input")
 
-if st.button("Evaluate"):
+# Evaluation Button
+if st.button("Run Evaluation", key="eval_button"):
     if question and context and generated_output:
-        st.write("### Evaluation Results")
-
         # Perform evaluations
         metrics = evaluator.evaluate_all(generated_output, context)
-
-        # Display metrics with explanations
-        st.write(f"**BLEU Score**: {metrics['BLEU']}")
-        st.write("BLEU measures the overlap between the generated output and reference text based on n-grams. Higher scores indicate better match.")
-
-        st.write(f"**ROUGE-1 Score**: {metrics['ROUGE-1']}")
-        st.write("ROUGE-1 measures the overlap of unigrams between the generated output and reference text. Higher scores indicate better match.")
-
-        st.write(f"**BERT Precision**: {metrics['BERT P']}")
-        st.write(f"**BERT Recall**: {metrics['BERT R']}")
-        st.write(f"**BERT F1 Score**: {metrics['BERT F1']}")
-        st.write("BERTScore evaluates the semantic similarity between the generated output and reference text using BERT embeddings.")
-
-        st.write(f"**Perplexity**: {metrics['Perplexity']}")
-        st.write("Perplexity measures how well a language model predicts the text. Lower values indicate better fluency and coherence.")
-
-        st.write(f"**Diversity**: {metrics['Diversity']}")
-        st.write("Diversity measures the uniqueness of bigrams in the generated output. Higher values indicate more diverse and varied output.")
-
-        st.write(f"**Racial Bias**: {metrics['Racial Bias']}")
-        st.write("Racial Bias score indicates the presence of biased language in the generated output. Higher scores indicate more bias.")
-
+        
+        # Metrics Display
+        st.markdown("### 📊 Evaluation Metrics")
+        
+        # Create columns for metrics
+        metric_cols = st.columns(4)
+        
+        # Metrics with explanatory tooltips
+        metrics_info = {
+            "BLEU": "Measures n-gram overlap between generated and reference text",
+            "ROUGE-1": "Unigram overlap between generated and reference text",
+            "BERT F1": "Semantic similarity using BERT embeddings",
+            "Perplexity": "Lower values indicate better language model prediction",
+            "Diversity": "Higher values suggest more unique output",
+            "Racial Bias": "Indicates potential biased language presence"
+        }
+        
+        # Display metrics in a grid
+        for i, (metric_name, metric_value) in enumerate(metrics.items()):
+            with metric_cols[i % 4]:
+                st.markdown(f"""
+                <div class='metric-card'>
+                    <h4>{metric_name}</h4>
+                    <p style='font-size:24px; color:#2980B9; font-weight:bold;'>{metric_value:.4f}</p>
+                    <small>{metrics_info.get(metric_name, "")}</small>
+                </div>
+                """, unsafe_allow_html=True)
+        
+        # Visualization of Metrics
+        st.markdown("### 📈 Metrics Visualization")
+        
+        # Create a bar chart of metrics
+        metric_df = pd.DataFrame.from_dict(metrics, orient='index', columns=['Value'])
+        metric_df = metric_df.reset_index().rename(columns={'index':'Metric'})
+        
+        fig = go.Figure(data=[
+            go.Bar(
+                x=metric_df['Metric'], 
+                y=metric_df['Value'], 
+                marker_color='#3498DB',
+                text=[f'{val:.4f}' for val in metric_df['Value']],
+                textposition='auto'
+            )
+        ])
+        fig.update_layout(
+            title='RAG Evaluation Metrics',
+            xaxis_title='Metrics',
+            yaxis_title='Score',
+            template='plotly_white'
+        )
+        
+        st.plotly_chart(fig, use_container_width=True)
+    
     else:
-        st.write("Please provide all inputs to evaluate.")
+        st.error("Please provide all inputs to evaluate.")
+
+# Footer
+st.markdown("""
+---
+*RAG Evaluation Dashboard - Powered by Advanced NLP Metrics*
+""")