File size: 3,623 Bytes
3a905e4
 
9f7701f
 
3a905e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b90441b
 
 
 
 
 
 
3a905e4
b90441b
3a905e4
 
 
 
b90441b
3a905e4
 
b90441b
 
 
 
 
3a905e4
b90441b
 
3a905e4
b90441b
3a905e4
 
 
 
b90441b
3a905e4
 
b90441b
 
 
 
 
3a905e4
b90441b
 
3a905e4
 
 
 
 
 
 
 
 
 
 
 
b90441b
3a905e4
b90441b
3a905e4
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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)