Hugging Face's logo

Spaces:
shethjenil
/
YourMT3-cpu
Sleeping

App Files Community
mimbres commited on
Commit
acbafd7
·
verified ·
1 Parent(s): 7ba1ef9

Update html_helper.py

Browse files
Files changed (1) hide show
  1. html_helper.py +19 -24
html_helper.py CHANGED
@@ -16,6 +16,7 @@ def to_youtube_embed_url(video_url):
16
  return re.sub(regex, r"https://www.youtube.com/embed/\1",video_url)
17
 
18
 
 
19
  def create_html_from_midi(midifile):
20
  html_template = """
21
  <!DOCTYPE html>
@@ -27,21 +28,20 @@ def create_html_from_midi(midifile):
27
  <style>
28
  /* Background color for the section */
29
  #proll {{background-color:transparent}}
30
-
31
  /* Custom player style */
32
  #proll midi-player {{
33
  display: block;
34
  width: inherit;
35
  margin: 4px;
36
  margin-bottom: 0;
 
 
37
  }}
38
-
39
  #proll midi-player::part(control-panel) {{
40
  background: #d8dae880;
41
  border-radius: 8px 8px 0 0;
42
  border: 1px solid #A0A0A0;
43
  }}
44
-
45
  /* Custom visualizer style */
46
  #proll midi-visualizer .piano-roll-visualizer {{
47
  background: #45507328;
@@ -49,62 +49,57 @@ def create_html_from_midi(midifile):
49
  border: 1px solid #A0A0A0;
50
  margin: 4px;
51
  margin-top: 2;
52
- overflow: visible;
 
53
  }}
54
-
55
  #proll midi-visualizer svg rect.note {{
56
  opacity: 0.6;
57
  stroke-width: 2;
58
  }}
59
-
60
  #proll midi-visualizer svg rect.note[data-instrument="0"] {{
61
  fill: #e22;
62
  stroke: #055;
63
  }}
64
-
65
  #proll midi-visualizer svg rect.note[data-instrument="2"] {{
66
  fill: #2ee;
67
  stroke: #055;
68
  }}
69
-
70
  #proll midi-visualizer svg rect.note[data-is-drum="true"] {{
71
  fill: #888;
72
  stroke: #888;
73
  }}
74
-
75
  #proll midi-visualizer svg rect.note.active {{
76
  opacity: 0.9;
77
  stroke: #34384F;
78
  }}
 
 
 
 
 
79
  </style>
80
  </head>
81
  <body>
82
  <div>
83
  <a href="{midifile}" target="_blank" style="font-size: 14px;">Download MIDI</a> <br>
84
  </div>
85
-
86
- <div style="position: relative; height: 80%; display: flex; justify-content: center; align-items: center;">
87
- <style>
88
- #proll {{ width: 100%; height: 550px; transform: scaleY(0.8); transform-origin: top; transition: transform 0.3s ease; }}
89
- @media (max-width: 500px) {{ #proll {{ transform: scaleY(0.7); }} }}
90
- @media (max-width: 450px) {{ #proll {{ transform: scaleY(0.6); }} }}
91
- @media (max-width: 400px) {{ #proll {{ transform: scaleY(0.5); }} }}
92
- @media (max-width: 350px) {{ #proll {{ transform: scaleY(0.4); }} }}
93
- @media (max-width: 300px) {{ #proll {{ transform: scaleY(0.3); }} }}
94
- </style>
95
- <section id="proll">
96
- <midi-player src="{midifile}" sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus" visualizer="#proll midi-visualizer"></midi-player>
97
- <midi-visualizer src="{midifile}"></midi-visualizer>
98
- </section>
99
  </div>
100
  </body>
101
  </html>
102
  """.format(midifile=midifile)
103
  html = f"""<div style="display: flex; justify-content: center; align-items: center;">
104
- <iframe style="width: 100%; height: 500px; overflow:visible" srcdoc='{html_template}'></iframe>
105
  </div>"""
106
  return html
107
 
 
108
  def create_html_youtube_player(youtube_url):
109
  youtube_url = to_youtube_embed_url(youtube_url)
110
  html = f"""
 
16
  return re.sub(regex, r"https://www.youtube.com/embed/\1",video_url)
17
 
18
 
19
+
20
  def create_html_from_midi(midifile):
21
  html_template = """
22
  <!DOCTYPE html>
 
28
  <style>
29
  /* Background color for the section */
30
  #proll {{background-color:transparent}}
 
31
  /* Custom player style */
32
  #proll midi-player {{
33
  display: block;
34
  width: inherit;
35
  margin: 4px;
36
  margin-bottom: 0;
37
+ transform-origin: top;
38
+ transform: scaleY(0.8); /* Added scaleY */
39
  }}
 
40
  #proll midi-player::part(control-panel) {{
41
  background: #d8dae880;
42
  border-radius: 8px 8px 0 0;
43
  border: 1px solid #A0A0A0;
44
  }}
 
45
  /* Custom visualizer style */
46
  #proll midi-visualizer .piano-roll-visualizer {{
47
  background: #45507328;
 
49
  border: 1px solid #A0A0A0;
50
  margin: 4px;
51
  margin-top: 2;
52
+ overflow: auto;
53
+ transform: scaleY(0.8); /* Added scaleY */
54
  }}
 
55
  #proll midi-visualizer svg rect.note {{
56
  opacity: 0.6;
57
  stroke-width: 2;
58
  }}
 
59
  #proll midi-visualizer svg rect.note[data-instrument="0"] {{
60
  fill: #e22;
61
  stroke: #055;
62
  }}
 
63
  #proll midi-visualizer svg rect.note[data-instrument="2"] {{
64
  fill: #2ee;
65
  stroke: #055;
66
  }}
 
67
  #proll midi-visualizer svg rect.note[data-is-drum="true"] {{
68
  fill: #888;
69
  stroke: #888;
70
  }}
 
71
  #proll midi-visualizer svg rect.note.active {{
72
  opacity: 0.9;
73
  stroke: #34384F;
74
  }}
75
+ /* Media queries for responsive scaling */
76
+ @media (max-width: 700px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.75);}} }}
77
+ @media (max-width: 500px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.7);}} }}
78
+ @media (max-width: 400px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.6);}} }}
79
+ @media (max-width: 300px) {{ #proll midi-visualizer .piano-roll-visualizer {{transform-origin: top; transform: scaleY(0.5);}} }}
80
  </style>
81
  </head>
82
  <body>
83
  <div>
84
  <a href="{midifile}" target="_blank" style="font-size: 14px;">Download MIDI</a> <br>
85
  </div>
86
+ <div>
87
+ <section id="proll">
88
+ <midi-player src="{midifile}" sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus" visualizer="#proll midi-visualizer">
89
+ </midi-player>
90
+ <midi-visualizer src="{midifile}">
91
+ </midi-visualizer>
92
+ </section>
 
 
 
 
 
 
 
93
  </div>
94
  </body>
95
  </html>
96
  """.format(midifile=midifile)
97
  html = f"""<div style="display: flex; justify-content: center; align-items: center;">
98
+ <iframe style="width: 100%; height: 500px; overflow:auto" srcdoc='{html_template}'></iframe>
99
  </div>"""
100
  return html
101
 
102
+
103
  def create_html_youtube_player(youtube_url):
104
  youtube_url = to_youtube_embed_url(youtube_url)
105
  html = f"""