Hugging Face's logo

Spaces:
ChenyuRabbitLove
/
MESReport
Running

App Files Community
ChenyuRabbitLove commited on
Commit
273f76c
•
1 Parent(s): 3b6661b

add application file

Browse files
Files changed (19) hide show
  1. .gitattributes +1 -0
  2. README.md +4 -4
  3. achievement.html +94 -0
  4. app.py +126 -0
  5. avatar.png +3 -0
  6. avatar2.png +3 -0
  7. badge.png +3 -0
  8. badge2.png +3 -0
  9. badge3.png +3 -0
  10. badge4.png +3 -0
  11. bg_clear.png +3 -0
  12. gallery.html +28 -0
  13. partner1.png +3 -0
  14. partner2.png +3 -0
  15. partner3.png +3 -0
  16. partner4.png +3 -0
  17. progress_bar.html +53 -0
  18. stage_desc.html +41 -0
  19. theme.py +56 -0
.gitattributes CHANGED
@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ *.png filter=lfs diff=lfs merge=lfs -text
README.md CHANGED
@@ -1,8 +1,8 @@
1
  ---
2
- title: MESReport
3
- emoji: 🏃
4
- colorFrom: blue
5
- colorTo: purple
6
  sdk: gradio
7
  sdk_version: 3.47.1
8
  app_file: app.py
 
1
  ---
2
+ title: MES Report
3
+ emoji: 🐨
4
+ colorFrom: yellow
5
+ colorTo: pink
6
  sdk: gradio
7
  sdk_version: 3.47.1
8
  app_file: app.py
achievement.html ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Achievement Log Viewer</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-size: cover;
11
+ padding: 120px 20px 20px 20px;
12
+ color: #333333;
13
+ }
14
+ #log-container {
15
+ background-color: rgba(255, 255, 255, 0.001);
16
+ border-radius: 10px;
17
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
18
+ padding: 20px;
19
+ margin: auto;
20
+ backdrop-filter: blur(10px);
21
+ height: 300px; /* Set a fixed height to ensure scrollbar appears */
22
+ overflow-y: auto; /* Enable vertical scrolling */
23
+ }
24
+ .title {
25
+ font-size: 24px;
26
+ margin-bottom: 10px;
27
+ font-weight: bold;
28
+ color: #333333;
29
+ }
30
+ .achievement {
31
+ border-bottom: 0.5px solid rgba(236, 240, 241, 0.5);
32
+ padding: 10px;
33
+ transition: background-color 0.3s;
34
+ }
35
+ .achievement:last-child {
36
+ border-bottom: none;
37
+ }
38
+ .achievement:hover {
39
+ background-color: rgba(255, 255, 255, 0.05);
40
+ }
41
+ .achievement p {
42
+ margin: 0;
43
+ color: #333333;
44
+ }
45
+ /* Scrollbar styles */
46
+ ::-webkit-scrollbar {
47
+ width: 12px;
48
+ }
49
+ ::-webkit-scrollbar-track {
50
+ background-color: rgba(0, 0, 0, 0.1);
51
+ border-radius: 10px;
52
+ }
53
+ ::-webkit-scrollbar-thumb {
54
+ background-color: rgba(0, 0, 0, 0.5);
55
+ border-radius: 10px;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body>
60
+
61
+ <div id="log-container">
62
+ <div class="title">冒險週記</div>
63
+ <div class="achievement">
64
+ <p>光束守護者在鳳凰星上找到「真理代碼」的線索，並花費了 9527 能量開啟神秘的門。</p>
65
+ </div>
66
+ <div class="achievement">
67
+ <p>光束守護者在制定攻防計劃中，花了 2 天時間。</p>
68
+ </div>
69
+ <div class="achievement">
70
+ <p>光束守護者在航行中發現一個星球擁有「真理代碼」的能量，收集了 6161能量。</p>
71
+ </div>
72
+ <div class="achievement">
73
+ <p>光束守護者感到害怕和猶豫，導致能量點數暫時下降。</p>
74
+ </div>
75
+ <div class="achievement">
76
+ <p>光束守護者在月球的一個基地中找到了能量增幅器，強化了他們的能量點數。</p>
77
+ </div>
78
+ <div class="achievement">
79
+ <p>光束守護者解決了一個有關機器學習的問題，成功阻止了AI狐貓機器人的失控。</p>
80
+ </div>
81
+ <div class="achievement">
82
+ <p>光束守護者在宇宙之間的旅行中，解開了一個重要的數學方程，獲得了一個強大的能量武器。</p>
83
+ </div>
84
+ <div class="achievement">
85
+ <p>光束守護者收集了足夠的原始能量點數，激活了一個大型的AI狐貓機器人，用以防禦來犯的黑洞。</p>
86
+ </div>
87
+ <div class="achievement">
88
+ <p>光束守護者感到害怕和猶豫，導致能量點數暫時下降。</p>
89
+ </div>
90
+ <!-- More achievements as needed -->
91
+ </div>
92
+
93
+ </body>
94
+ </html>
app.py ADDED
@@ -0,0 +1,126 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+
3
+ from theme import Seafoam
4
+
5
+ seafoam = Seafoam()
6
+ with open('achievement.html', 'r', encoding='utf-8') as file:
7
+ html = file.read()
8
+
9
+
10
+ html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + html
11
+
12
+ # border: 10px solid;
13
+ # border-image-source: linear-gradient(45deg, #8c8c8c, #f2f2f2, #8c8c8c, #f2f2f2);
14
+ # border-image-slice: 1;
15
+ # border-image-width: 10px;
16
+ # border-image-repeat: round;
17
+ # padding: 20px;
18
+ # width: 200px;
19
+ # height: 200px;
20
+ # display: flex;
21
+ # align-items: center;
22
+ # justify-content: center;
23
+ # background-color: #f2f2f2;
24
+ # box-shadow: 0 0 10px rgba(0,0,0,0.3);
25
+
26
+ css="""
27
+
28
+ #user_avatar {
29
+ background-color: transparent !important;
30
+ border-radius: 50% !important;
31
+ box-shadow: 0 10px 15px rgba(0,0,0,0.1);
32
+ border-color: #fff !important;
33
+ }
34
+
35
+ #user_avatar > div > img {
36
+ }
37
+
38
+ #user_avatar_description h1{
39
+ font-size: 2.5rem;
40
+ text-align: center;
41
+ }
42
+
43
+ #pet_avatar_description h1{
44
+ font-size: 2rem;
45
+ text-align: center;
46
+ }
47
+
48
+ #badge_avatar_description h1{
49
+ font-size: 2rem;
50
+ text-align: center;
51
+ }
52
+
53
+ #adventure_description h1{
54
+ font-size: 2rem;
55
+ text-align: center;
56
+ }
57
+
58
+ #achievement_log {
59
+ margin: 2.5rem auto 0 auto;
60
+ }
61
+
62
+ #pet_gallery .grid-wrap button {
63
+ margin: .5vh;
64
+ background: transparent !important;
65
+ border-color: transparent !important;
66
+ height: 150px !important;
67
+ width: 6vh !important;
68
+ border-radius: 20px;
69
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
70
+ }
71
+
72
+ #pet_gallery .grid-container {
73
+ grid-template-columns: repeat(30, minmax(6vh, 1fr));
74
+ }
75
+
76
+ #badge_gallery .grid-wrap button {
77
+ margin: .5vh;
78
+ height: 150px !important;
79
+ width: 10vh !important;
80
+ background: transparent !important;
81
+ border-color: transparent !important;
82
+ border-radius: 20px;
83
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
84
+ backdrop-filter: blur(10px);
85
+ }
86
+
87
+ ::-webkit-scrollbar {
88
+ width: 5px;
89
+ height: 10px;
90
+ }
91
+
92
+ [data-testid="block-label"] {
93
+ opacity: 0;
94
+ }
95
+ """
96
+
97
+ # start of gradio interface
98
+ with gr.Blocks(theme=seafoam, css=css) as demo:
99
+
100
+ with gr.Row():
101
+ with gr.Column(scale=1,):
102
+ pet_gallery = gr.Gallery(['partner1.png', 'partner2.png', 'partner3.png', 'partner4.png'] * 2, label="夥伴", preview=False, elem_id='pet_gallery', columns=30, height=200)
103
+ pet_description = gr.Markdown('# 夥伴', elem_id='pet_avatar_description')
104
+
105
+ badge_gallery = gr.Gallery(['badge.png', 'badge2.png', 'badge3.png', 'badge4.png'] * 2, label="徽章", preview=False, elem_id='badge_gallery', columns=30, height=200)
106
+ badge_description = gr.Markdown('# 徽章', elem_id='badge_avatar_description')
107
+ with gr.Column(scale=1):
108
+ avatar = gr.Gallery(['avatar.png', 'avatar2.png'], preview=True, elem_id='user_avatar')
109
+ avatar_description = gr.Markdown('# 光束守護者', elem_id='user_avatar_description')
110
+ with gr.Column(scale=1):
111
+ description = gr.Markdown('# 冒險階段', elem_id='adventure_description')
112
+
113
+ with open('progress_bar.html', 'r', encoding='utf-8') as file:
114
+ progress_bar_html = file.read()
115
+ progress_bar_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + progress_bar_html
116
+ progress_bar = gr.HTML(progress_bar_html,)
117
+
118
+ with open('stage_desc.html', 'r', encoding='utf-8') as file:
119
+ stage_desc_html = file.read()
120
+ stage_desc_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + stage_desc_html
121
+ stage_desc = gr.HTML(stage_desc_html,)
122
+ with gr.Row():
123
+ f = gr.HTML(html, label="Achievement Log", elem_id="achievement_log")
124
+
125
+ if __name__ == "__main__":
126
+ demo.launch()
avatar.png ADDED

Git LFS Details

  • SHA256: c2c26833c7df9a77698023a63bad60e7f15663490d95986140fe36bd9fcc0124
  • Pointer size: 131 Bytes
  • Size of remote file: 137 kB
avatar2.png ADDED

Git LFS Details

  • SHA256: ecb3eb948b4a5ae10d76a9a3f75608797c92ef7e28652bee0f5de63210c32428
  • Pointer size: 131 Bytes
  • Size of remote file: 199 kB
badge.png ADDED

Git LFS Details

  • SHA256: 589b2a0c55a0c3e65ecc0fe0cb66776aa5536df9ea6549ae91bdc8a953b00175
  • Pointer size: 131 Bytes
  • Size of remote file: 328 kB
badge2.png ADDED

Git LFS Details

  • SHA256: 45ebd489fe585a4a04aef1442f0354122227ffe5d4efaf691db74f000fff7247
  • Pointer size: 131 Bytes
  • Size of remote file: 244 kB
badge3.png ADDED

Git LFS Details

  • SHA256: c0c4c4be857fe147b1cebc249883c4a45d3579fbd9f70c364ae76ec80213a470
  • Pointer size: 131 Bytes
  • Size of remote file: 265 kB
badge4.png ADDED

Git LFS Details

  • SHA256: c3c9945e34895c44d18e80b6fa56e80769c1c2d00c921cfd01cb0ad7925a97e6
  • Pointer size: 131 Bytes
  • Size of remote file: 305 kB
bg_clear.png ADDED

Git LFS Details

  • SHA256: 7e614f05cafe5f75c28927bfe4e3b0fc89fa92ad8e456066ab76263f6873b89c
  • Pointer size: 132 Bytes
  • Size of remote file: 2.74 MB
gallery.html ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pets Gallery</title>
7
+ <style>
8
+ .gallery {
9
+ display: grid;
10
+ grid-template-columns: repeat(3, 1fr);
11
+ gap: 10px;
12
+ }
13
+ img {
14
+ width: 100%;
15
+ height: auto;
16
+ border-radius: 8px;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <h1>Pets Gallery</h1>
22
+ <div class="gallery">
23
+ <img src="badge.png" alt="Pet 1 description">
24
+ <img src="path_to_pet2_image.jpg" alt="Pet 2 description">
25
+ <img src="path_to_pet3_image.jpg" alt="Pet 3 description">
26
+ </div>
27
+ </body>
28
+ </html>
partner1.png ADDED

Git LFS Details

  • SHA256: ee26565a72edd45abc7da59a44235dcd405a971e124d9417791e91fbede04b5b
  • Pointer size: 132 Bytes
  • Size of remote file: 1.01 MB
partner2.png ADDED

Git LFS Details

  • SHA256: 729a8cedc0a81378cca199270a91b2d0d2489a879b35b056317ff6872225e8ad
  • Pointer size: 131 Bytes
  • Size of remote file: 994 kB
partner3.png ADDED

Git LFS Details

  • SHA256: e0cf87305275d4e3ff7961f568f20fb27c0e5171adc4153122ae325a46154bb6
  • Pointer size: 132 Bytes
  • Size of remote file: 1.03 MB
partner4.png ADDED

Git LFS Details

  • SHA256: d9012e85d6615a0336f958b7cb413e91ce3000e7c83f8fbd78fd13eb8c3668ff
  • Pointer size: 132 Bytes
  • Size of remote file: 1.08 MB
progress_bar.html ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Fancy Progress Bar with Counter</title>
8
+ <style>
9
+ body {
10
+ font-family: 'Arial', sans-serif;
11
+ background-color: #f4f4f4;
12
+ }
13
+
14
+ .progress-container {
15
+ width: 80%;
16
+ max-width: 500px;
17
+ background: linear-gradient(to right, #f3f3f3, #e7e7e7);
18
+ border-radius: 15px;
19
+ margin: 0px auto;
20
+ padding: 5px;
21
+ position: relative;
22
+ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
23
+ }
24
+
25
+ .progress-bar {
26
+ width: 41.6%;
27
+ height: 30px;
28
+ background: linear-gradient(to right, #34D399, #059669);
29
+ border-radius: 12px;
30
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ .counter {
34
+ position: absolute;
35
+ top: 50%;
36
+ left: 50%;
37
+ transform: translate(-50%, -50%);
38
+ font-size: 20px;
39
+ font-weight: bold;
40
+ color: #333;
41
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
42
+ }
43
+ </style>
44
+ </head>
45
+
46
+ <body>
47
+ <div class="progress-container">
48
+ <div class="counter" id="counter">5/12</div>
49
+ <div class="progress-bar" id="progressBar"></div>
50
+ </div>
51
+ </body>
52
+
53
+ </html>
stage_desc.html ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Fancy Text Container</title>
8
+ <style>
9
+ body {
10
+ font-family: 'Arial', sans-serif;
11
+ background-color: #f4f4f4;
12
+ }
13
+
14
+ .text-container {
15
+ width: 80%;
16
+ max-width: 500px;
17
+ background: linear-gradient(to right, #f3f3f3, #e7e7e7);
18
+ border-radius: 15px;
19
+ margin: 0px auto;
20
+ padding: 20px;
21
+ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
22
+ text-align: center;
23
+ }
24
+
25
+ .fancy-text {
26
+ font-size: 20px;
27
+ font-weight: bold;
28
+ color: #333;
29
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
30
+ line-height: 1.5;
31
+ }
32
+ </style>
33
+ </head>
34
+
35
+ <body>
36
+ <div class="text-container">
37
+ <p class="fancy-text">就在找到「真理代碼」之際，AI 狐狸貓機器人發起對「光束守護者」的攻擊，迫使他們做出是否自我犧牲以完成任務的選擇。</p>
38
+ </div>
39
+ </body>
40
+
41
+ </html>
theme.py ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from typing import Union, Iterable
2
+
3
+ from gradio.themes.base import Base
4
+ from gradio.themes.utils import colors, fonts, sizes
5
+
6
+ class Seafoam(Base):
7
+ def __init__(
8
+ self,
9
+ *,
10
+ primary_hue: Union[colors.Color, str] = colors.slate,
11
+ secondary_hue: Union[colors.Color, str] = colors.blue,
12
+ neutral_hue: Union[colors.Color, str] = colors.slate,
13
+ spacing_size: Union[sizes.Size, str] = sizes.spacing_md,
14
+ radius_size: Union[sizes.Size, str] = sizes.radius_md,
15
+ text_size: Union[sizes.Size, str] = sizes.text_lg,
16
+ font: Union[fonts.Font, str, Iterable[Union[fonts.Font, str]]] = (
17
+ fonts.GoogleFont("Noto Sans TC"),
18
+ "ui-sans-serif",
19
+ "sans-serif",
20
+ ),
21
+ font_mono: Union[fonts.Font, str, Iterable[Union[fonts.Font, str]]] = (
22
+ fonts.GoogleFont("IBM Plex Mono"),
23
+ "ui-monospace",
24
+ "monospace",
25
+ ),
26
+ ):
27
+ super().__init__(
28
+ #primary_hue=primary_hue,
29
+ #secondary_hue=secondary_hue,
30
+ #neutral_hue=neutral_hue,
31
+ spacing_size=spacing_size,
32
+ radius_size=radius_size,
33
+ text_size=text_size,
34
+ font=font,
35
+ font_mono=font_mono,
36
+ )
37
+ super().set(
38
+ body_background_fill="url('file=bg_clear.png') no-repeat center center / cover",
39
+ body_background_fill_dark="url('file=bg_clear.png') no-repeat center center / cover",
40
+
41
+ body_text_color_dark="#333",
42
+ background_fill_primary_dark="rgba(255, 255, 255, 1)",
43
+ background_fill_secondary_dark="rgba(255, 255, 255, 0)",
44
+ block_background_fill_dark="rgba(255, 255, 255, 0.1)",
45
+ block_border_color_dark="rgba(255, 255, 255, 0.1)",
46
+ border_color_primary_dark='trasparent',
47
+ # button_primary_background_fill="linear-gradient(90deg, *primary_300, *secondary_400)",
48
+ # button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
49
+ # button_primary_text_color="white",
50
+ # button_primary_background_fill_dark="linear-gradient(90deg, *primary_600, *secondary_800)",
51
+ slider_color="*secondary_300",
52
+ slider_color_dark="*secondary_600",
53
+ block_title_text_weight="600",
54
+ block_border_width="3px",
55
+ block_shadow="*shadow_drop_lg",
56
+ )