Spaces:
Sleeping
Sleeping
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) | |