Spaces:
Running
Running
File size: 3,394 Bytes
273f76c e062738 273f76c |
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 |
import gradio as gr
from theme import Seafoam
seafoam = Seafoam()
with open('achievement.html', 'r', encoding='utf-8') as file:
html = file.read()
html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + html
css="""
#user_avatar {
background-color: transparent !important;
border-radius: 50% !important;
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
border-color: #fff !important;
}
#user_avatar > div > img {
}
#user_avatar_description h1{
font-size: 2.5rem;
text-align: center;
}
#pet_avatar_description h1{
font-size: 2rem;
text-align: center;
}
#badge_avatar_description h1{
font-size: 2rem;
text-align: center;
}
#adventure_description h1{
font-size: 2rem;
text-align: center;
}
#achievement_log {
margin: 2.5rem auto 0 auto;
}
#pet_gallery .grid-wrap button {
margin: .5vh;
background: transparent !important;
border-color: transparent !important;
height: 150px !important;
width: 6vh !important;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
#pet_gallery .grid-container {
grid-template-columns: repeat(30, minmax(6vh, 1fr));
}
#badge_gallery .grid-wrap button {
margin: .5vh;
height: 150px !important;
width: 10vh !important;
background: transparent !important;
border-color: transparent !important;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
}
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
[data-testid="block-label"] {
opacity: 0;
}
[aria-label="Share"] {
opacity: 0;
}
"""
# start of gradio interface
with gr.Blocks(theme=seafoam, css=css) as demo:
with gr.Row():
with gr.Column(scale=1,):
pet_gallery = gr.Gallery(['partner1.png', 'partner2.png', 'partner3.png', 'partner4.png'] * 2, label="夥伴", preview=False, elem_id='pet_gallery', columns=30, height=200)
pet_description = gr.Markdown('# 夥伴', elem_id='pet_avatar_description')
badge_gallery = gr.Gallery(['badge.png', 'badge2.png', 'badge3.png', 'badge4.png'] * 2, label="徽章", preview=False, elem_id='badge_gallery', columns=30, height=200)
badge_description = gr.Markdown('# 徽章', elem_id='badge_avatar_description')
with gr.Column(scale=1):
avatar = gr.Gallery(['avatar.png', 'avatar2.png'], preview=True, elem_id='user_avatar')
avatar_description = gr.Markdown('# 光束守護者', elem_id='user_avatar_description')
with gr.Column(scale=1):
description = gr.Markdown('# 冒險階段', elem_id='adventure_description')
with open('progress_bar.html', 'r', encoding='utf-8') as file:
progress_bar_html = file.read()
progress_bar_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + progress_bar_html
progress_bar = gr.HTML(progress_bar_html,)
with open('stage_desc.html', 'r', encoding='utf-8') as file:
stage_desc_html = file.read()
stage_desc_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + stage_desc_html
stage_desc = gr.HTML(stage_desc_html,)
with gr.Row():
f = gr.HTML(html, label="Achievement Log", elem_id="achievement_log")
if __name__ == "__main__":
demo.launch()
|