Spaces:
Runtime error
Runtime error
| <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 multitrack symbolic music generator.</p> | |
| <p> | |
| The model generates 2 bars of 4/4 multi-instrumental | |
| music. | |
| The instruments are 4: drums, bass, piano and strings. | |
| </p> | |
| <p> | |
| 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 the directives for each of the 2 bars. | |
| </p> | |
| <h3><center>Quick Instructions</center></h3> | |
| <ol> | |
| <li> <b>Edit the Grid:</b> Activate or deactivate the | |
| cells | |
| in the grid with the left click. Click and drag to | |
| activate or deactivate multiple cells. Try not to go | |
| too crazy with the editing, as the model works | |
| better | |
| with grids that resemble real ones. | |
| </li> | |
| <li><b>Generate Music With the Model:</b> Click on the | |
| "Generate" button and wait for the model to generate | |
| music. | |
| </li> | |
| <li><b>Play the Music:</b> After you click play, the | |
| music will be played and visualized through a | |
| pianoroll. During play, the grid will | |
| continuously highlight the current timestep in the | |
| sequence. | |
| </li> | |
| <li><b>Repeat:</b> You may end up liking a particular | |
| piece of generated music. You can then experiment | |
| with it by trying different | |
| instrument activations while keeping the same | |
| musical content. If you want to keep the same | |
| musical content of the | |
| last generated sequence, just activate the | |
| "Keep Style" checkbox before generation. | |
| </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> | |