import streamlit as st
from PIL import Image
import base64

# Add a title
st.set_page_config(page_title="Select Diagnosis", layout="centered")

with open("./logo.png", "rb") as f:
    image_data = f.read()
    image_base64 = base64.b64encode(image_data).decode("utf-8")

# Add custom CSS for the header
header_css = """
<style>
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 18px;
}

.header img {
    margin-right: 10px;
    width: 80px;
    height: 50px;
}

.header p {
    font-size: 14px;
}
</style>
"""

# Render the custom CSS
st.markdown(header_css, unsafe_allow_html=True)

# Render the header
header_html = f"""
<div class="header">
    <img src='data:image/jpeg;base64,{image_base64}' alt="Logo"/>
    <p>Disclaimer: This web app is for demonstration purposes only and not intended for commercial use. Contact: contact@1001epochs.co.uk for full solution.</p>
</div>
"""

st.markdown(header_html, unsafe_allow_html=True)

# Render the main content
st.title("Medical Diagnosis App")

st.markdown("")
st.markdown(
    "<li> Currently Brain Tumors, X-rays, and Skin Lesions are ready for diagnosis </li>"
    "<li>The Models also explain what area in the images is the cause of diagnosis </li>"
    "<li>Currently, the models are trained on a small dataset and will be trained on a larger dataset in the future</li>"
    '<li> The Application also provides generated information on how to diagnose the disease and what should the patient do in that case</li>',
    unsafe_allow_html=True
)

with st.sidebar.container():
    st.image("https://media.giphy.com/media/Yp9Fi2moJ026Q/giphy.gif")