import base64

import streamlit as st


def get_base64(file_path):
    with open(file_path, "rb") as file:
        base64_bytes = base64.b64encode(file.read())
        base64_string = base64_bytes.decode("utf-8")
    return base64_string


def set_background(png_file):
    bin_str = get_base64(png_file)
    page_bg_img = (
        """
    <style>
    .stApp {
    background-image: url("data:image/png;base64,%s");
    background-size: cover;
    }
    </style>
    """
        % bin_str
    )
    st.markdown(page_bg_img, unsafe_allow_html=True)


set_background("space_background.jpeg")

# About section
about = """
<div class="text-shadow">
<h1>About</h1>
<p class="bigger">This is a multipage application created using the Streamlit library and hosted on HuggingFace Spaces. 
Our application focuses on solving various natural language processing (NLP) tasks using modern machine learning models.</p>
</div>
"""

# Page 1 content
page_1 = """
<div class="text-shadow">
<h1>Classification of Reviews on Clinics</h1>

<p class="bigger">You can input your review about a clinic here, and our application will classify it using three different models:</p>

<ol>
<li>Logistic Regression trained on TF-IDF representation.</li>
<li>LSTM model with attention mechanism.</li>
<li>ruBERTtiny2.</li>
</ol>
</div>
"""

# Page 2 content
page_2 = """
<div class="text-shadow">
<h1>Text Generation with GPT Model</h1>

<p class="bigger">Ask about the mysteries of the universe</p>
</div>
"""

# Project collaborators section
project_colaborators = """
<div class="text-shadow">
<h1>Project Collaborators</h1>
<ul>
<li>Артем</li>
<li>Валера</li>
<li>Иван</li>
</ul>
</div>
"""

st.markdown(about, unsafe_allow_html=True)
static_toxicity_path = "https://imagizer.imageshack.com/v2/480x360q70/r/924/L4Ditq.jpg"
animated_toxicity_path = (
    "https://i.kym-cdn.com/photos/images/original/001/264/967/cdc.gif"
)
animated_enlighten_path = "https://gifdb.com/images/high/zen-meditation-chakras-illustration-6lujnenasnfmn8dt.gif"
static_enlighten_path = "https://imagizer.imageshack.com/v2/668x500q70/r/922/bpoy6G.jpg"

# Toxicity image HTML
toxicity_html = f"""
<div class="text-shadow">
<a href="review_predictor" target="_self">
    <img src="{static_toxicity_path}" width="400" class="toxicity-image" />
</a>
<style>
    /* Define the hover state for the image */
    .toxicity-image:hover {{
        content: url("{animated_toxicity_path}");
        transform: scale(1.1); /* Enlarge the image by 10% */
        transition: transform 0.5s ease; /* Add smooth transition */
    }}
</style>
</div>
"""

# Enlightenment image HTML
enlighten_html = f"""
<div class="text-shadow">
<a href="text_generator" target="_self">
    <img src="{static_enlighten_path}" width="400" class="enlighten-image" />
</a>
<style>
    /* Define the hover state for the image */
    .enlighten-image:hover {{
        content: url("{animated_enlighten_path}");
        transform: scale(1.1); /* Enlarge the image by 10% */
        transition: transform 0.5s ease; /* Add smooth transition */
    }}
</style>
</div>
"""

# Add shadow to text content
text_shadow_style = """
<style>
.text-shadow {
    color: white;
    text-shadow: 4px 4px 8px #000000;
}
.bigger {
    font-size: 20px;
}
</style>
"""

st.markdown(text_shadow_style, unsafe_allow_html=True)

# Display the styled text with shadow
st.markdown(page_1, unsafe_allow_html=True)
st.markdown(toxicity_html, unsafe_allow_html=True)
st.markdown(page_2, unsafe_allow_html=True)
st.markdown(enlighten_html, unsafe_allow_html=True)
st.markdown(project_colaborators, unsafe_allow_html=True)