<commit_before><!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <link rel="stylesheet" href="web/css/font-awesome.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      color: #666;
      box-sizing: border-box;
    }
    .fa-bars {
      position: absolute;
      font-size: 2rem;
      top: 1.5rem;
      left: 2rem;
      z-index: 10;
    }
    nav {
      position:fixed;
      top:0;
      left:0;
      width:250px;
      height:100%;
      margin:0 0 0 -250px;
      -moz-transition:all 200ms ease-in;
      -webkit-transition:all 200ms ease-in;
      -o-transition:all 200ms ease-in;
      transition:all 200ms ease-in;
      background: #ddd;
      font-size: 2rem;
    }
    .fa-bars:hover + nav {
      margin: 0;
    }
    nav:hover {
      margin: 0;
    }
    nav ul {
      font-size: 1.2rem;
      margin: 5rem 0 0 1rem;
      width:250px;
      padding:0;
      list-style:none;
      overflow:hidden;
    }
    nav li {
      padding: 0.25rem 1rem;
    }
    h1 {
      position: absolute;
      top: 50px;
      left: 0; 
      right: 0; 
      margin-left: auto; 
      margin-right: auto; 
      width: 700px;
      text-align: center;
      color: rgba(0,0,0,0.5);
    }
    #canvas, svg {
      width: 100%;
      height: 99vh;
    }

  </style>
</head>
<body>
  <i class="fa fa-bars" aria-hidden="true"></i>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Source</li>
    </ul>      
  </nav>
  <div id="canvas">
    <h1>reasons.js</h1>
  </div>
  <script src="reasons.js"></script>
  <script>
    let canvas = document.querySelector('#canvas')
    Reasons.create('#canvas').render()
  </script>
</body><commit_msg>Add random examples to index.html<commit_after><!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <link rel="stylesheet" href="web/css/font-awesome.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      color: #666;
      box-sizing: border-box;
    }
    .fa-bars {
      position: absolute;
      font-size: 2rem;
      top: 1.5rem;
      left: 2rem;
      z-index: 10;
    }
    nav {
      position:fixed;
      top:0;
      left:0;
      width:250px;
      height:100%;
      margin:0 0 0 -250px;
      -moz-transition:all 200ms ease-in;
      -webkit-transition:all 200ms ease-in;
      -o-transition:all 200ms ease-in;
      transition:all 200ms ease-in;
      background: #ddd;
      font-size: 2rem;
    }
    .fa-bars:hover + nav {
      margin: 0;
    }
    nav:hover {
      margin: 0;
    }
    nav ul {
      font-size: 1.2rem;
      margin: 5rem 0 0 1rem;
      width:250px;
      padding:0;
      list-style:none;
      overflow:hidden;
    }
    nav li {
      padding: 0.25rem 1rem;
    }
    h1 {
      position: absolute;
      top: 50px;
      left: 0; 
      right: 0; 
      margin-left: auto; 
      margin-right: auto; 
      width: 700px;
      text-align: center;
      color: rgba(0,0,0,0.5);
    }
    #canvas, svg {
      width: 100%;
      height: 99vh;
    }

  </style>
</head>
<body>
  <i class="fa fa-bars" aria-hidden="true"></i>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Source</li>
    </ul>      
  </nav>
  <div id="canvas">
    <h1>reasons.js</h1>
  </div>
  <script src="reasons.js"></script>
  <script>
    let canvas = document.querySelector('#canvas')
    let box = canvas.getBoundingClientRect()

    let cat = ['humans', 'philosophers', 'doctors', 'students', 'winners', 'cats', 'dogs', 'birds', 'democrats', 'republicans'][Math.floor(Math.random() * 10)]
    let name = ['Socrates', 'Plato', 'Bob', 'Lucy', 'Dazza', 'Shazza', 'Eugene', 'Deborah', 'Dave', 'Pete'][Math.floor(Math.random() * 10)]
    let adj = ['mortal', 'smart', 'lucky', 'poor', 'cute', 'slow', 'fast', 'unlucky', 'fury', 'fluffy'][Math.floor(Math.random() * 10)]

    let graph = [
      {id: 'p1', text: 'All '+cat+' are '+adj, x: box.width*1/3-125, y: box.height*1/3},
      {id: 'p2', text: name+' is a '+cat.substring(0, cat.length-1), x: box.width*2/3-125, y: box.height*1/3},
      {id: 'c1', text: name+' is '+adj, x: box.width*1/2-125, y: box.height*2/3},
      {from: 'p1', to: 'c1'}
    ]
    
    Reasons.create('#canvas').render(graph)
  </script>
</body>
{'fraction_non_alphanumeric': 0.17870722433460076, 'fraction_numerical': 0.043726235741444866, 'mean_word_length': 2.0700218818380742, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4168434', 'n_tokens_mistral': 1772, 'n_tokens_neox': 1618, 'n_words': 348}