import streamlit as st
import pandas as pd
import streamlit.components.v1 as components


metrics_path = "assets/model_metrics.csv"
metrics_df = pd.read_csv(metrics_path)

def metrics_ui():
    st.image("data:image/jpeg;base64,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",width=500)

    st.title("Model Evaluation Metrics")
    st.subheader("Performance Metrics of Trained Models")

    
    st.dataframe(metrics_df)

    best_model_name = metrics_df.loc[metrics_df['F1 Score'].idxmax(), 'Model']
    st.write(f"Best Model: {best_model_name} with an F1 Score of {metrics_df['F1 Score'].max():.2f}")

    st.header("What is data drift ?")
    st.write(
        """
Data Drift is a name for data change that can affect the Machine Learning model performance. There are different types
of drift.There can be change in target distribution.

For example you have a model that predicts house price based on the property description (no.of rooms,location,etc.,)
but there is a change in the market and all properities prices go up.

If you don't detect the drift in the target distribution and don't update the model with new targets then your model will predict too low pricies.

The chnage in the target distribution is so-called **target distribution.**

The next type of drift is **covariate drift**.it is a change in the input data distribution. For example, you have 
a categorical feature that will start to have new category.
"""
    )


    st.header("what to do after data drift detection ?")
    st.write(
        """
When data drift is detected that ML model should be updated. There are many ways in which it can be done - all depends on the
data. The most striaght forward way is to use all avaiable data samples to train a new model. The other approach might be to use just
a new data samples to train the model.

There might be also approaches with sample weighting - giving higher weight for fresh data samples and lower weights for old samples.
it depends on the data.
"""
    )

    st.header("How to detect data drift ?")
    st.write("""
The data drift can be detected in different ways. The simplest approach is to use statistical tests that compare 
the distribution of the trainig data and live data (production data). If the differnec between two distribution is significantly then a drift occured.

The most popular test are **two-sample, kolmogorov-Smirnov test,Chi square test, jensen-shannon divergence, Wasserstein distance.**
The alternative approach might be use Machine Learning model to monitar the data quality. There can be also hybrid approaches.
             """)
    

    st.subheader("Dataset Drift")
    html = "frontend/reports/report.html"
    with open(html,'r') as f:
        html_data= f.read()
    
    st.components.v1.html(html_data,scrolling = True,height=700,width= 800)


    st.subheader("Decison Tree Model Report")
    html = "frontend/reports/model_report_1.html"
    with open(html,'r') as f:
        html_data= f.read()
    
    st.components.v1.html(html_data,scrolling = True,height=700,width= 800)

    st.subheader("RandomForest Model  Drift")
    html = "frontend/reports/model_report_2.html"
    with open(html,'r') as f:
        html_data= f.read()
    
    st.components.v1.html(html_data,scrolling = True,height=700,width= 800)