|
|
import os, base64 |
|
|
import gradio as gr |
|
|
|
|
|
|
|
|
PROJECT_NAME = "ViVQA-X: LSTM-Generative Model" |
|
|
|
|
|
|
|
|
|
|
|
def image_to_base64(image_path: str): |
|
|
|
|
|
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; |
|
|
} |
|
|
""" |
