-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
121 lines (110 loc) · 4.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bot Generator</title>
<script src="lib/vue.js"></script>
<!-- Include BBElements style and logic.
More info at https://github.com/brangerbriz/BBElements -->
<link rel="stylesheet" href="BBElements/css/bb-fonts.css">
<link rel="stylesheet" href="BBElements/css/bb-styles.css">
<link rel="stylesheet" href="BBElements/css/bb-responsive.css">
<link rel="stylesheet" href="BBElements/css/bb-code-colors.css">
<link rel="stylesheet" href="BBElements/css/bb-animations.css">
<script src="BBElements/js/highlightJS/highlight.pack.js"></script>
<script src="BBElements/js/BBElements.js"></script>
<style>
/* Add some styling in addition to the default BBElement styling */
input, button, select {
font-family: 'BB_copy', sans-serif;
border: none;
color: #5f5f5f;
line-height: 24px;
letter-spacing: 1px;
margin: 0;
}
input, select {
background-color: rgb(235, 252, 255);
}
button[disabled] {
text-decoration-line: line-through
}
.black {
color: black;
}
</style>
</head>
<body>
<!-- #app acts as our application container.
Vue.js targets this element and all of its children. -->
<div id="app">
<!-- Basic title and description -->
<h2>Twitter Bot Generator</h2>
<p>
Create a bot that sounds like a twitter user. Download a user's twitter
data, train an RNN model using transfer learning, and generate new
tweets in their style, all from this electron app.
</p>
<!-- Data section: download twitter data for a user -->
<section class="data">
<h3>Data</h3>
<p>
Use the input field below to download twitter data for a specific
user. Populate the field with a twitter username, excluding the @
symbol, then press the "Download Tweets" button.
</p>
<em><p class="black">{{ twitter.status }}</p></em>
<input type="text" name="twitter-user" v-model="twitter.user">
<!-- run downloadTweets() on button press -->
<button @click="downloadTweets()" :disabled="model.training">
Download Tweets
</button>
</section>
<!-- Model section: Load and train models and generate text. -->
<section class="model">
<h3>Model</h3>
<p>
Once you've downloaded twitter data you can train a new model using
the "base-model." You can also load models you have already trained
and continue to train them or use them to generate new tweets.
</p>
<em><p class="black" v-html="model.status"></p></em>
<!-- A range slider to choose the number of training epochs -->
<div>
<label class="black">
{{ numEpochs }} Epoch{{ numEpochs > 1 ? 's' : '' }}
</label>
<input v-model="numEpochs" style="width: 100%" type="range"
min="1" max="10" value="2" step="1" >
<span class="black">Faster</span>
<span class="black" style="float: right">Better</span>
</div>
<label>Load Model</label>
<!-- run loadModel() on selection -->
<select v-model="model.path" v-on:change="loadModel(model.path)"
:disabled="model.training">
<option v-for="m in models" :value="m.path">{{ m.name }}</option>
</select>
<!-- run train() on button press -->
<button
:disabled="data.data == null || model.model == null || model.training"
@click="train()">Train Model</button>
<!-- run generate() on button press -->
<button
:disabled="model.model == null || model.training"
@click="generate()">Generate Tweets</button>
</section>
<!-- Generated tweets section: Display output from a trained model. -->
<section v-if="generatedTweets.length > 0" class="generated-text">
<h3>Generated Tweets</h3>
<p>
Here are a few synthetic tweets generated in the style of
@{{ model.name }}. Generating new tweets will replace these ones.
</p>
<p class="black" v-for="tweet in generatedTweets">{{ tweet }}</p>
</section>
</div>
<!-- The electron.js script holds our all of our logic -->
<script src="src/electron.js"></script>
</body>
</html>