<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TonnetzViz</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fullwidth">
      <nav class="navbar navbar-inverse navbar-static-top" id="navbar">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">TonnetzViz</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav" role="tablist">
            <li>
              <a href="#controls" data-toggle="tab" role="tab" aria-controls="controls">
                <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                Controls<span class="caret"></span>
              </a>
            </li>
            <li>
              <a href="#appearance" data-toggle="tab" role="tab" aria-controls="appearance">
                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                Appearance<span class="caret"></span>
              </a>
            </li>
            <li class="hidden">
              <a href="#" data-toggle="tab" role="tab" id="dummy-tab"></a>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>

      <div class="tab-content collapse col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2" id="tabs">
        <div role="tabpanel" class="tab-pane" id="controls">
          <div class="panel panel-default">
            <div class="panel-heading">MIDI</div>
            <div class="panel-body">
              <div class="form-group">
                <div class="row">
                  <div class="col-xs-4 col-sm-5 col-sm-offset-1">
                    <label for="midi-port" class="control-label">MIDI port</label>
                    <select class="form-control" name="midi-port" id="midi-port"></select>
                  </div>

                  <div class="col-xs-4 col-sm-3">
                    <label for="midi-channel" class="control-label">MIDI channel</label>
                    <select class="form-control" name="midi-channel" id="midi-channel">
                      <option value="-1">All</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option>
                      <option value="16">16</option>
                    </select>
                  </div>

                  <div class="col-xs-4 col-sm-2">
                    <label class="control-label">&nbsp;</label>
                    <button type="button" id="panic" class="btn btn-default btn-block" data-toggle="tooltip" title="All notes off">
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    Panic</button>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="row">
                  <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="checkbox">
                      <label><input name="enable-sustain" id="enable-sustain" type="checkbox" checked> Enable sustain pedal</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">Computer keyboard</div>
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                  <div class="keyboard">
                    <span class="white key"><span>A</span></span>
                    <span class="black key"><span>W</span></span>
                    <span class="white key"><span>S</span></span>
                    <span class="black key"><span>E</span></span>
                    <span class="white key"><span>D</span></span>
                    <span class="white key"><span>F</span></span>
                    <span class="black key"><span>T</span></span>
                    <span class="white key"><span>G</span></span>
                    <span class="black key"><span><sup>Y</sup>/<sub>Z</sub></span></span>
                    <span class="white key"><span>H</span></span>
                    <span class="black key"><span>U</span></span>
                    <span class="white key"><span>J</span></span>
                    <span class="white key"><span>K</span></span>
                    <span class="black key"><span>O</span></span>
                    <span class="white key"><span>L</span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="appearance">
          <div class="panel panel-default">
            <div class="panel-heading">Appearance</div>
            <div class="panel-body">
              <div class="form-horizontal">
                <div class="form-group">
                  <label class="control-label col-xs-5 col-sm-4 col-md-3">Labels</label>
                  <div class="form-group col-xs-6 col-sm-4">
                    <div class="checkbox">
                      <label><input name="show-note-names" id="show-note-names" type="checkbox" checked> Show tone names</label>
                    </div>
                    <div class="checkbox">
                      <label><input name="show-triad-names" id="show-triad-names" type="checkbox"> Show triad names</label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="ghost-duration" class="control-label col-xs-5 col-sm-4 col-md-3">'Ghost' tone duration</label>
                  <div class="input-group col-xs-6 col-sm-4 col-md-3">
                    <input type="number" class="form-control" id="ghost-duration" min="0" step="50" value="500">
                    <div class="input-group-addon">ms</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container" id="messages-container">
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2" id="messages">
        </div>
      </div>
    </div>

    <div id="tonnetz">
      <div id="note-labels" class="labels"></div>
      <div id="triad-labels" class="labels"></div>
      <canvas id="canvas">
      </canvas>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/midi.js"></script>
    <script type="text/javascript" src="js/keyboard.js"></script>
    <script type="text/javascript" src="js/tonnetz.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>
<commit_msg>Change title, add meta description<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TonnetzViz | Real-Time MIDI Visualizer</title>
    <meta name="description" content="TonnetzViz is a web-based music visualizer that receives MIDI input
                                      and visualizes it in real time using a tonal network called the Tonnetz.">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fullwidth">
      <nav class="navbar navbar-inverse navbar-static-top" id="navbar">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">TonnetzViz</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav" role="tablist">
            <li>
              <a href="#controls" data-toggle="tab" role="tab" aria-controls="controls">
                <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                Controls<span class="caret"></span>
              </a>
            </li>
            <li>
              <a href="#appearance" data-toggle="tab" role="tab" aria-controls="appearance">
                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                Appearance<span class="caret"></span>
              </a>
            </li>
            <li class="hidden">
              <a href="#" data-toggle="tab" role="tab" id="dummy-tab"></a>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>

      <div class="tab-content collapse col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2" id="tabs">
        <div role="tabpanel" class="tab-pane" id="controls">
          <div class="panel panel-default">
            <div class="panel-heading">MIDI</div>
            <div class="panel-body">
              <div class="form-group">
                <div class="row">
                  <div class="col-xs-4 col-sm-5 col-sm-offset-1">
                    <label for="midi-port" class="control-label">MIDI port</label>
                    <select class="form-control" name="midi-port" id="midi-port"></select>
                  </div>

                  <div class="col-xs-4 col-sm-3">
                    <label for="midi-channel" class="control-label">MIDI channel</label>
                    <select class="form-control" name="midi-channel" id="midi-channel">
                      <option value="-1">All</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option>
                      <option value="16">16</option>
                    </select>
                  </div>

                  <div class="col-xs-4 col-sm-2">
                    <label class="control-label">&nbsp;</label>
                    <button type="button" id="panic" class="btn btn-default btn-block" data-toggle="tooltip" title="All notes off">
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    Panic</button>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="row">
                  <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="checkbox">
                      <label><input name="enable-sustain" id="enable-sustain" type="checkbox" checked> Enable sustain pedal</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">Computer keyboard</div>
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                  <div class="keyboard">
                    <span class="white key"><span>A</span></span>
                    <span class="black key"><span>W</span></span>
                    <span class="white key"><span>S</span></span>
                    <span class="black key"><span>E</span></span>
                    <span class="white key"><span>D</span></span>
                    <span class="white key"><span>F</span></span>
                    <span class="black key"><span>T</span></span>
                    <span class="white key"><span>G</span></span>
                    <span class="black key"><span><sup>Y</sup>/<sub>Z</sub></span></span>
                    <span class="white key"><span>H</span></span>
                    <span class="black key"><span>U</span></span>
                    <span class="white key"><span>J</span></span>
                    <span class="white key"><span>K</span></span>
                    <span class="black key"><span>O</span></span>
                    <span class="white key"><span>L</span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="appearance">
          <div class="panel panel-default">
            <div class="panel-heading">Appearance</div>
            <div class="panel-body">
              <div class="form-horizontal">
                <div class="form-group">
                  <label class="control-label col-xs-5 col-sm-4 col-md-3">Labels</label>
                  <div class="form-group col-xs-6 col-sm-4">
                    <div class="checkbox">
                      <label><input name="show-note-names" id="show-note-names" type="checkbox" checked> Show tone names</label>
                    </div>
                    <div class="checkbox">
                      <label><input name="show-triad-names" id="show-triad-names" type="checkbox"> Show triad names</label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="ghost-duration" class="control-label col-xs-5 col-sm-4 col-md-3">'Ghost' tone duration</label>
                  <div class="input-group col-xs-6 col-sm-4 col-md-3">
                    <input type="number" class="form-control" id="ghost-duration" min="0" step="50" value="500">
                    <div class="input-group-addon">ms</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container" id="messages-container">
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2" id="messages">
        </div>
      </div>
    </div>

    <div id="tonnetz">
      <div id="note-labels" class="labels"></div>
      <div id="triad-labels" class="labels"></div>
      <canvas id="canvas">
      </canvas>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/midi.js"></script>
    <script type="text/javascript" src="js/keyboard.js"></script>
    <script type="text/javascript" src="js/tonnetz.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

{'fraction_non_alphanumeric': 0.17418720351729725, 'fraction_numerical': 0.012264260094874465, 'mean_word_length': 1.6889096282470057, 'pattern_counts': {'":': 0, '<': 566, '<?xml version=': 0, '>': 566, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '163235', 'n_tokens_mistral': 5172, 'n_tokens_neox': 4883, 'n_words': 910}