|
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 = """ |
|
<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 = """ |
|
<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 = """ |
|
<div class="text-shadow"> |
|
<h1>Text Generation with GPT Model</h1> |
|
|
|
<p class="bigger">Ask about the mysteries of the universe</p> |
|
</div> |
|
""" |
|
|
|
|
|
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_review_path = "http://imagizer.imageshack.com/v2/667x500q90/r/922/fHrktQ.jpg" |
|
animated_review_path = ( |
|
"https://gifdb.com/images/high/neil-patrick-as-a-doctor-zj5buv1gsoe0nsy2.gif" |
|
) |
|
|
|
|
|
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" |
|
|
|
|
|
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> |
|
""" |
|
|
|
|
|
|
|
toxicity_html = f""" |
|
<div class="text-shadow"> |
|
<a href="review_predictor" target="_self"> |
|
<img src="{static_review_path}" width="400" class="toxicity-image" /> |
|
</a> |
|
<style> |
|
/* Define the hover state for the image */ |
|
.toxicity-image:hover {{ |
|
content: url("{animated_review_path}"); |
|
transform: scale(1.1); /* Enlarge the image by 10% */ |
|
transition: transform 0.5s ease; /* Add smooth transition */ |
|
}} |
|
</style> |
|
</div> |
|
""" |
|
|
|
|
|
tg_html = f""" |
|
<div class="text-shadow"> |
|
<a href="telegram" target="_self"> |
|
<img src="{static_toxicity_path}" width="400" class="tg-image" /> |
|
</a> |
|
<style> |
|
/* Define the hover state for the image */ |
|
.tg-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> |
|
""" |
|
|
|
|
|
page_3 = """ |
|
<div class="text-shadow"> |
|
<h1>Toxicity Assessment Bot</h1> |
|
|
|
<p class="bigger">Find out how toxic comments are</p> |
|
</div> |
|
""" |
|
|
|
|
|
|
|
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) |
|
|
|
|
|
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(page_3, unsafe_allow_html=True) |
|
st.markdown(tg_html, unsafe_allow_html=True) |
|
st.markdown(project_colaborators, unsafe_allow_html=True) |
|
|
