Features
The UI is comprised of a few components, including the timeline, suggestions, model/style selection, transpose/import/export menu, and a chord variant overlay menu. Keyboard shortcuts, also sometimes called hotkeys, are available for most of the functions of the app. When you hover over an element of a component, it shows you what happens on click and the shortcut for it. The state of the app, including the chord progression, selected model and style, signature, tempo, and default variants, are automatically saved locally in the browser, so the user will not lose progress unless they delete the site data.
At the heart of the app is the timeline, a component in which the chord progression is built. The controls are similar to that of video editors, scrolling can be used to zoom in/out, and dragging the middle mouse moves the view.
A new chord can be added by clicking the plus icon above the timeline or by the hotkey A. All newly added chords are blank by default (denoted by a question mark), they can be changed for a different chord in the suggestions. By clicking on any chord in the timeline, you select it, which is signalized by appearing in a lighter color. Clicking on an already selected chord deselects it, alternatively, you can use the hotkey Esc. Arrow keys can be used to navigate the selection of chords. Every time a chord is selected (either by clicking it or by arrow keys), it is played to make it easier to comprehend what the user is composing. Adding a new chord either appends it to the end of the sequence or if any chord is selected, the new chord is inserted right after it. After processing them, there can be a maximum of 255 chords (merging consecutive and ignoring blank chords).
The selected chord can be deleted by clicking the thrash bin icon (hotkey Del). You can delete all chords by clicking the multiple bins icon (Ctrl+Del). The duration a chord spans can be changed by resizing it from the right edge (hover over the right edge of a chord, click, then drag it); the value snaps to the beats. All changes that are made to the sequence, including the selection and deselection of chords, are recorded (up to 64 steps), you can undo/redo them by the icons to the left of the thrash bin or by hotkeys Ctrl + Z/Ctrl + Y.
Left to the add/delete/undo/redo controls are the playback controls. The middle icon starts and pauses playback (Space). When the sequence is playing, the current timestep is visualized by the blue-moving playhead. The position of the playhead can be changed by clicking or dragging on the time ticks (the top and bottom part of the timeline around the chords) both while playing and not. Once the playhead reaches the end of the sequence, the playhead jumps back to the start of the sequence, and either the playback ends, or it continues from the beginning (given by the loop setting). The left metronome icon enables and disables the metronome (M). The tempo of the playback in beats per minute and looping (L) can be changed from the right settings icon (S).
The signature (the number of beats per measure) of the chord progression can be customized by clicking on the signature in the left part of the timeline. When the signature changes, the chord durations remain constant, adapting to the new values. The signature is also visualized by the ticks at the top and bottom of the timeline, where a slightly larger tick denotes the boundary of two measures.
When any chord is selected, the suggestions for the chord given its preceding chords are available. You can scroll to see more suggestions. By clicking on any suggested chord, the selected chord is replaced with the suggestion, and the new chord is played. The suggested chords are colored from purple to black and sorted by the probability predicted by the model, which can be seen when you hover over the suggestion. The coloring decay can be controlled by the decay slider at the top right corner. Note that logarithmic coloring is used instead of linear to make less probable chords still visible, which provides a more natural way to think about the predictions of the model.
Specific chords can also be searched from the top left search bar, if you do not find what you want, try enabling Include variants, as the chord you are searching for may be a variant of another base chord (e.g. Am7 and C6 are variants of the same chord, as they are the inversions of each other). Multiple keywords separated by a space can be entered, which uses the logical AND operation. If you want to use an exact search, surround the keyword in double quotes (e.g. "Gmaj7" will show just that chord and no other).
You can also filter the chords by the notes used under the piano icon, which opens a virtual keyboard on which you can enter the notes by clicking on individual keys. Three types of note matching are available - at least (selected notes are a subset of chord notes), at most (chord notes are a subset of the selected notes), and exact. When Any variant is enabled, the order of the searched notes along with their octaves is ignored. When any search query is applied, an icon to clear the query is shown.
Suggestions may take a while to load, as the model runs locally in the browser using the ONNX runtime. Note that once a suggestion is made, it is cached for later use (up to 32 predictions are cached, after that the first ones are removed to free the memory).
From the upper left menu, you can select the model you want to use for suggestions by clicking on it and selecting another variant from the dropdown. A larger model may produce better suggestions at the cost of a longer inference time. When a Conditional model is selected, a style (respectively the condition) menu can be opened by clicking the right part of this component. Two tabs are included in the style selection, the genre and the decade. By clicking on any style element from the dropdown, its state changes (enabling/disabling it). Multiple genres and decades can be selected. Additionally, the relative weighting of each of the styles can be specified. We suggest using small integer values to make it easy to think about; behind the scenes, the weights get normalized to sum to one either way. Since the applied style changes the predictions of the models, the suggestions are updated on every change. The genres are sorted by their occurrence in the dataset.
The chord sequence can be easily transposed under the left icon of this menu (T). Positive integer values transpose by that number of semitones up, while negative transpose down. The sequence can be exported to a .chseq or .mid format under the right icon (E), corresponding to a custom format (preferred for saving/loading sequences; it is just JSON in the background), and MIDI (for use in other music production software), respectively. Imports are done under the middle icon (I), again, you can import a .chseq or .mid file. When importing a MIDI file, an overlay will be shown where you can specify how to parse the file. Given the selected tracks, quantization will split the file into parts of the given size (in beats), and its mode specifies whether to include all the notes of the part or just the closest ones. You can also choose to import the tempo from the file, signature gets imported automatically. Manually editing a .chseq file may cause a corrupted state of the app after import, which can be fixed by clearing the site data. Imported MIDI files should be single track, only with the chords in a condensed format (without arpeggios, strummed chords, and other variants), without other voices (such as percussion and melodies). If a chord is not recognized or there are no notes in the MIDI file (corresponding to a rest), it will be replaced by the unknown token (denoted by a question mark).
Given the data processing methods used, the inversions of chords as well as other voicings are mapped to the same token. Therefore, to make the app more intuitive, you can choose the variant of any chord, both in the timeline and in the suggestions. This menu can be opened by the chord variation button (V) when a chord is selected in the timeline, or by a similar one upon hovering over the suggested chords. A visualization of the notes the chord is comprised of is shown on a virtual keyboard and other chord variants are under it. Upon clicking on any other variant, it will be again visualized and played. When this menu is open from the timeline, the newly selected variant can be either applied once (only to that chord) or to all (replacing all of the same chords with this variant). When it is open from the suggestions, it can be used once (replacing the selected chord with this variant) or set as default (which makes it the preferred variant in the suggestions). You can close this menu from the close icon (alternatively Esc).
Even though it may be tempting to use chord variants to compose the chord voicings, this is not a recommended approach, as variants were only added to make searching for chords more intuitive and allow multiple possible notations to be used. Instead, this app should only be utilized for the base chord progressions and the voicings should be made in another music production software (after exporting it to the MIDI format).