Markov Chain Demo

by __mber

HTML

<!DOCTYPE html>
<html>
  <head>
 
  </head>
  <body>
     <main>
       <h1>Demo: Generate text with a Markov Chain</h1>
       <button type="button">Generate One</button>
       <button type="button">Generate: </button>
       <input type="number" value="30" max=200 />
       <quote></quote>
     </main>
     <aside>
       <section id="generations">
         <h2>Repeated Statements</h2>
         <p>
         When multiple generations run, this table will display
         repeated (duplicate) outputs generated over the course of the trials.
         </p>
         <table>
          <thead><th>Repeated Statement</th><th>Count</th></thead>
          <tbody></tbody>
         </table>
       </section>
       <section>
         <h2>Matching Statements</h2>
         <p>
           Because the corpus in this demo is small, the probability is higher of
           outputs identical to statements in the input.
           The number below indicates the number of matching statements.
         </p>
         <strong>Outputs matching original text corpus:</strong>
         <span id="textmatches"></span>
       </section>
     </aside>
     <footer>
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
    </footer>
  </body>
</html>

CSS

body {
  background: #333;
  color: #cca;
  text-align: center;
}
input[type=number] {
  width: 100px;
  display: inline;
}
main, section {
  margin-bottom: 10ex;
}
quote {
  display: block;
  text-align: center;
  font-weight: bold;
  padding: 1em;
  background: rgb(250,220,200);
  margin: 1em 0px;
  color: #333;
}

JavaScript

/*
The comments in this code are a little over the top,
but will hopefully help if you're looking for a bit more insight.

Note that this code is ~100 lines not including comments and text, 
which is longer than the code described in the live demo.
This code is written to be a demonstration, and includes plenty of comments 
and several inefficincies that aid reading clarity.

The original code used in the live demo is linked in the resources page.
*/

/*
First, the text input, acting as the data to model.
This would generally be a single external corpus of text
that would need to be ingested, preprocessed, and split.
For demonstration purposes, this is skipped,
and a simplified and minimal list of text is used.
*/
var texts = [
  "Hello and welcome to the demo.",
  "This small bit of text and code demonstrates a simple Markov chain.",
  "The reason for this is to clarify what those are, and the role they play in the modern AI world.",
  "AI and ML have taken center stage.",
  "Both technologies are improving in leaps and bounds.",
  "However, it's important to remember that not everything needs AI.",
  "Additionally, not all AI means an LLM, despite their prevelance at the moment.",
  "This small demo presents a visual example of using Markov chains.",
  "Markov chains are a relatively simple tool with dispoportionately powerful results.",
  "While this demo is a very simple, almost silly, example, the point remains relevant.",
  "Choosing the right tool for the right purpose relies on understanding all tools, large and small.",
  "I hope this small demonstration and related resources helps you gain insight.",
  "You can learn more about Markov chains and AI generally in the related resources.",
  "I hope as well that this demo yields some amusement.",
  "The outcomes of a Markov generator, or really any AI generator, can be fun.",
  "But while they may appear unexpected, they always reflect the data that went in.",
  "This is truer for Markov than for most...