-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (132 loc) · 6.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="script.js" defer></script>
<title>Markov Chain</title>
<style media="screen">
.inline-block {
display: inline-block;
}
#text-to-parse {
width: 100vw;
height: 30vh;
}
#length,
#order {
width: 15%
}
#how-to-use {
font-size: 25px;
width: 100%;
heigth: 5vh;
margin-top: 1vh;
}
h1,
h6 {
display: inline-block;
}
</style>
</head>
<body>
<div class='container'>
<div class="row">
<div class="col">
</div>
<div class="col-10 container">
<div class='d-flex justify-content-around align-items-baseline mt-3'>
<h1>Markov Chain Generator</h1>
<h6>v.0.0.1</h6>
</div>
<!--How to use-->
<button id='how-to-use' type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">HOW TO USE</button>
<div id="demo" class="collapse">
<br />Put some text into the field below. For example, you can copy-paste a couple of paragraphs from a book, or a news article.
The results will be more interesting if more data is provided.
Check out <a href="http://www.gutenberg.org/wiki/Main_Page">Project Gutenberg</a> for some ideas and public domain works of literature to copy-paste from.<br>
<br />Enter a number into the field labeled "Order". The lower the number, the more chaotic the generated text will be,
the higher the number, the bigger (and therefore slower!) is the created Markov chain.
You can enter numbers between 1 and 10, but I don't recommend going higher than 4 or 5. <br>
<br />Click the "Create Chain" button. If you inputted too much text or set order to be too high, it might take a second or two to generate the chain.
I generated a chain from the entire "<a href="http://www.gutenberg.org/ebooks/74">The Adventures of Tom Sawyer</a>" by Mark Twain with the order of 3,
but the text generation was rather slow afterward.<br />
<br />Enter the number of characters you wish to generate into the "Length" field. Start with 1000 or 2000 (or less) to see how your computer handles this.
Generation will take longer on bigger chains with higher orders.<br>
<br>Click the "Generate Text" button and enjoy the output! Try experimenting, for example by combining lyrics from modern performers with classical poetry,
or technical literature with romance novels, into one chain. Get creative!<br>
<br> You can learn more about Markov chains in <a href="https://en.wikipedia.org/wiki/Markov_chain" target="_blank">this Wikipedia article</a>.
</div>
<!--Text input field-->
<div class="row mb-3 mt-3">
<textarea id='text-to-parse' name="name"></textarea>
</div>
<div class="row">
</div>
<div class="row">
<div class='col d-flex justify-content-around align-items-baseline mb-3'>
Order: <input id='order' type="number" name="" value="1">
<button class='btn btn-primary ml-1 mr-1' onclick="if (validateChainGeneration()){ generateFromInput();}" type="button" name="button">CREATE CHAIN</button>
<button class='btn btn-warning' onclick='document.getElementById("text-to-parse").value = ""; document.getElementById("order").value = ""; document.getElementById("length").value = ""'>CLEAR INPUT</button>
</div>
<div class="col d-flex justify-content-around align-items-baseline mb-3">
Length: <input type='number' value='500' id='length'>
<button class='btn btn-success ml-1 mr-1' onclick='insertParagraph()'>GENERATE TEXT</button>
<button class='btn btn-warning' onclick='document.getElementById("main").innerHTML = "";'>CLEAR OUTPUT</button>
</div>
</div><br>
<div id='main'></div>
</div>
<div class="col">
</div>
</div>
</div>
<script>
let chain;
let unNormalizedChain;
function validateChainGeneration() {
let textfield = document.getElementById('text-to-parse');
let orderfield = document.getElementById('order');
if (textfield.value.length < 10) {
let d = document.querySelector('#main');
let p = document.createElement('p');
p.append('That text is too short, the chain will not be fun.');
d.prepend(p);
return false;
} else if (orderfield.value == '' || Number(orderfield.value) < 1 || Number(orderfield.value) > 10) {
let d = document.querySelector('#main');
let p = document.createElement('p');
p.append('Order should not be empty and should be between 1 and 10');
d.prepend(p);
return false;
} else {
return true;
}
}
function generateFromInput() {
unNormalizedChain = generateMarkovChain(document.getElementById('text-to-parse').value.toLowerCase(), Number(document.getElementById('order').value));
chain = normalizeChain(unNormalizedChain);
//console.log(chain)
}
function insertParagraph() {
if (!chain) {
let d = document.querySelector('#main');
let p = document.createElement('p');
p.append('You need to generate a Markov chain first, using the above text field.');
d.prepend(p);
} else {
let keyArray = Object.keys(chain);
let rannumb = Math.random()
let index = Math.floor(rannumb * keyArray.length);
let startingSequence = keyArray[index];
//console.log(`Rolled Random: ${rannumb}\nIndex: ${index},\nTotal Length: ${keyArray.length}\nStarting Sequence: ${startingSequence}\n`);
addParagraph(startingSequence, document.getElementById("length").value - 1, chain);
}
}
</script>
</body>
</html>