File size: 3,584 Bytes
273f76c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e062738
 
 
 
273f76c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
965f71d
 
 
 
 
 
 
 
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
118
119
120
121
122
123
124
125
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")

    with gr.Row():
        input = gr.Textbox(elem_id='user_id')
        output = gr.Textbox()

    def print_text():
        return "Yes, babe!"
    input.change(print_text, None, output)

if __name__ == "__main__":
    demo.launch()