Hugging Face's logo

Spaces:
mimbres
/
YourMT3-cpu
Running

App Files Community
mimbres commited on
Commit
b02ed14
•
1 Parent(s): 5b889b7

Update html_helper.py

Browse files
Files changed (1) hide show
  1. html_helper.py +33 -15
html_helper.py CHANGED
@@ -37,19 +37,19 @@ def create_html_from_midi(midifile):
37
  }}
38
 
39
  #proll midi-player::part(control-panel) {{
40
- background: #D8DAE8;
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: #F7FAFA;
48
  border-radius: 0 0 8px 8px;
49
  border: 1px solid #A0A0A0;
50
  margin: 4px;
51
  margin-top: 2;
52
- overflow: auto;
53
  }}
54
 
55
  #proll midi-visualizer svg rect.note {{
@@ -80,23 +80,41 @@ def create_html_from_midi(midifile):
80
  </head>
81
  <body>
82
  <div>
83
- <a href="{midifile}" target="_blank" style="font-size: 11px;">Download MIDI</a> <br>
84
- <section id="proll">
85
- <midi-player src="{midifile}" sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus" visualizer="#proll midi-visualizer">
86
- </midi-player>
87
- <midi-visualizer src="{midifile}">
88
- </midi-visualizer>
89
- </section>
 
 
 
 
 
 
 
 
 
90
  </div>
91
  </body>
92
  </html>
93
  """.format(midifile=midifile)
94
- html = f"""<iframe style="width: 100%; height: 400px; overflow:auto" srcdoc='{html_template}'></iframe>"""
 
 
95
  return html
96
 
97
  def create_html_youtube_player(youtube_url):
98
  youtube_url = to_youtube_embed_url(youtube_url)
99
- html = f"""<div style="display: flex; justify-content: center; align-items: center;">
100
- <iframe width="560" height="315" src='{youtube_url}' title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
101
- </div>"""
102
- return html
 
 
 
 
 
 
 
 
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;
48
  border-radius: 0 0 8px 8px;
49
  border: 1px solid #A0A0A0;
50
  margin: 4px;
51
  margin-top: 2;
52
+ overflow: visible;
53
  }}
54
 
55
  #proll midi-visualizer svg rect.note {{
 
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; width: 100%; 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"""
111
+ <div style="display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%;">
112
+ <style>
113
+ .responsive-iframe {{ width: 560px; height: 315px; transform-origin: top left; transition: width 0.3s ease, height 0.3s ease; }}
114
+ @media (max-width: 560px) {{ .responsive-iframe {{ width: 100%; height: 100%; }} }}
115
+ </style>
116
+ <iframe class="responsive-iframe" src="{youtube_url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
117
+ </div>
118
+ """
119
+ return html
120
+