Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Polyphemus</title> | |
| <link rel="stylesheet" | |
| href="{{ url_for('static', filename='style.css') }}"> | |
| <link | |
| href="{{ url_for('static', filename='assets/FontAwesome/css/fontawesome.css') }}" | |
| rel="stylesheet"> | |
| <link | |
| href="{{ url_for('static', filename='assets/FontAwesome/css/brands.css') }}" | |
| rel="stylesheet"> | |
| <link | |
| href="{{ url_for('static', filename='assets/FontAwesome/css/solid.css') }}" | |
| rel="stylesheet"> | |
| <script src="{{ url_for('static', filename='script.js') }}" defer></script> | |
| <script | |
| src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"> | |
| </script> | |
| </head> | |
| <body static-url="{{ url_for('static', filename='') }}"> | |
| <h1>Polyphemus</h1> | |
| <div class="icon-container"> | |
| <div class="github"> | |
| <a href="https://github.com/EmanueleCosenza/polyphemus" | |
| target="_blank"><i class="fa-brands fa-square-github"></i> | |
| </a> | |
| </div> | |
| <div class="info"> | |
| <i class="fa-solid fa-circle-info"></i> | |
| <span class="info-text"> | |
| <p>This web app allows you to generate music with | |
| Polyphemus, | |
| a polyphonic multi-instrument symbolic music generator.</p> | |
| <p> | |
| The model generates 2 bars of 4/4 music played by 4 | |
| instruments: drums, bass, piano and strings. The editable | |
| 4x32 grid allows you to specify which of the 4 | |
| instruments must be activated in the 32 timesteps that | |
| constitute a bar. The model then generates music by | |
| following these directives for each of the 2 bars. | |
| </p> | |
| <h3><center>Quick Instructions</center></h3> | |
| <ol> | |
| <li> <b>Edit the Grid:</b> To activate or deactivate an | |
| instrument at a given timestep, simply click on the | |
| respective cell. Beats are shaded differently to ease | |
| the editing process. Click and drag to activate or deactivate | |
| multiple cells. For optimal results, try to design a grid | |
| that mirrors realistic music patterns. | |
| </li> | |
| <li><b>Generate Music With the Model:</b> Once you're satisfied | |
| with your grid design, hit the "Generate" button and wait | |
| for the model to generate music for you. | |
| </li> | |
| <li><b>Play the Music:</b> After generating, click on "Play" | |
| to hear the music. As the music plays, a pianoroll will | |
| provide a visual representation of it, while the grid will | |
| continuously highlight the current timestep in the | |
| sequence. | |
| </li> | |
| <li><b>Repeat:</b> If you find a tune that you like, you can | |
| then experiment with it by trying different instrument | |
| activations without changing the core musical theme. If you | |
| wish to retain the style of a previously generated sequence | |
| to tweak its instrument activations, make sure the | |
| "Keep Style" checkbox is checked before generating another | |
| piece. | |
| </li> | |
| </ol> | |
| </span> | |
| </div> | |
| <div class="paper"> | |
| <a href="https://arxiv.org/abs/2307.14928" target="_blank"><i | |
| class="fa-regular fa-file-lines"></i></a> | |
| </div> | |
| </div> | |
| <div class="clear-div"> | |
| <button class="button" id="clearButton">Clear Grid</button> | |
| </div> | |
| <div class="table-contained"> | |
| <table id="grid"> | |
| <tr> | |
| <th>Drums</th> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| <tr> | |
| <th>Bass</th> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| <tr> | |
| <th>Piano</th> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| <tr> | |
| <th>Strings</th> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="output-div"> | |
| <div class="generation-div"> | |
| <div class="checkbox-div"> | |
| <input type="checkbox" id="keepTonality" name="useGrid" | |
| checked> | |
| <label for="keepTonality">Keep Style</label><br> | |
| </div> | |
| <div> | |
| <button class="button" id="generate">Generate</button> | |
| <div id="emptyMessage" style="color: rgb(123, 0, 0);"> | |
| </div> | |
| </div> | |
| </div> | |
| <midi-player | |
| id="midiplayer" | |
| src="{{ url_for('static', filename='0/generated.mid') }}" | |
| sound-font visualizer="#midivisualizer"> | |
| </midi-player> | |
| <midi-visualizer type="piano-roll" id="midivisualizer"> | |
| </midi-visualizer> | |
| </div> | |
| </body> | |
| </html> | |