File size: 2,432 Bytes
571201f |
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 |
import os, base64
import gradio as gr
PROJECT_NAME = "ViVQA-X: LSTM-Generative Model"
def image_to_base64(image_path: str):
# Construct the absolute path to the image
current_dir = os.path.dirname(os.path.abspath(__file__))
full_image_path = os.path.join(current_dir, image_path)
with open(full_image_path, "rb") as f:
return base64.b64encode(f.read()).decode("utf-8")
def create_header():
with gr.Row():
with gr.Column(scale=2):
logo_base64 = image_to_base64("static/aivn_logo.png")
gr.HTML(
f"""<img src="data:image/png;base64,{logo_base64}"
alt="Logo"
style="height:120px;width:auto;margin:0 auto;margin-bottom:16px; display:block;">"""
)
with gr.Column(scale=2):
gr.HTML(f"""
<div style="display:flex;justify-content:flex-start;align-items:center;gap:30px;">
<div>
<h1 style="margin-bottom:0; color: #4f47e6; font-size: 2.5em; font-weight: bold;"> {PROJECT_NAME} </h1>
</div>
</div>
""")
def create_footer():
logo_base64_vlai = image_to_base64("static/vlai_logo.png")
footer_html = """
<style>
.sticky-footer{position:fixed;bottom:0px;left:0;width:100%;background:#F4EBD3;
padding:10px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:1000;}
.content-wrap{padding-bottom:60px;}
</style>""" + f"""
<div class="sticky-footer">
<div style="text-align:center;font-size:18px; color: #888">
Created by
<a href="https://vlai.work" target="_blank" style="color:#465C88;text-decoration:none;font-weight:bold; display:inline-flex; align-items:center;"> VLAI
<img src="data:image/png;base64,{logo_base64_vlai}" alt="Logo" style="height:20px; width:auto;">
</a> from <a href="https://aivietnam.edu.vn/" target="_blank" style="color:#355724;text-decoration:none;font-weight:bold">AI VIET NAM</a>
</div>
</div>
"""
return gr.HTML(footer_html)
custom_css = """
.gradio-container {
min-height:64vh;
background: linear-gradient(135deg, #F5EFE6 0%, #E8DFCA 50%, #AEBDCA 100%);
background-size: 400% 400%;
animation: gradientBG 10s ease infinite;
}
@keyframes gradientBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.content-wrap {padding-bottom:8px;}
.full-width-btn {
width: 100% !important;
}
""" |