forked from irisrumtub/GPT-Twitch-Chatbot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (93 loc) · 3.88 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="maincontainer">
<div class="formcontainer">
<form id="oauth-form">
<div class="showPass">
Show keys:
<input type="checkbox" id="password-toggle" />
</div>
<label for="username">Your username:</label>
<input type="text" class="lockable" id="username" name="username" />
<label for="channel">Twitch channel to load bot to:</label>
<input type="text" class="lockable" id="channel" name="channel" />
<label for="oauth">TMI oauth key:</label>
<input type="password" class="lockable" id="oauth" name="oauth" />
<label for="aiKey">OpenAI api key:</label>
<input type="password" class="lockable" id="aiKey" name="aiKey" />
<div class="unlockable">
<label for="tokens"
>Amount of tokens per request <br />* one token is roughly 4 chars
in english<br />* twitch chat message is limited by 500 chars</label
>
<input type="number" id="tokens" name="tokens" value="200" min="0" />
<label for="timeout">timeout in seconds between messages <span style="color:#00b8d4" help="This feature is intended to prevent flooding chat with messages from AI. If this field is not empty, bot will wait given amount of seconds before it will start reading chat again." class="tooltip timeouttip">[?]</span></label>
<input type="number" id="timeout" name="timeout" value="0" min="0"/>
</div>
</form>
<div class="CDbuttons">
<button value="start" id="submit">connect</button>
<button value="disconnect" id="disconnect">disconnect</button>
</div>
<div class="CDbuttons">
<button id="saveCreds">save credentials</button>
<button id="loadCreds">load credentials</button>
</div>
</div>
<div class="features">
<h1>Twitch AI chat bot</h1>
<p>
1. to get TMI oauth key go to
<a id="tmilink" href="#">https://twitchapps.com/tmi/</a>, connect it
to twitch and copy the value of oauth key
</p>
<p>
2. to get OpenAI api key go to
<a id="ailink" href="#">https://beta.openai.com/account/api-keys</a>,
press "Create new secret key" and put it into "AI" key here
</p>
<p
class="tooltip"
help="The file should contain exact words and phrases with no spaces between them and separated by comma like:
blue,adam's apple,b0rder-box
once you've loaded the file it is stored in root directory of the bot as 'stoplist.csv' and you don't have to load it again. You can edit file manually."
for="wordlist"
>
OPTIONAL:add a csv with words or phrases that you wish not to be
passed to the AI. Hover here to get example.<br />
</p>
<div class="wordlist-container">
<input id="wordlist" type="file" accept=".csv" />
<button id="addWords">add words to the list</button>
</div>
<div id="loadComplete"></div>
<div class="statuses">
<p>OpenAI status:</p>
</div>
<div id="aiStatus">Waiting for request to be performed.</div>
</div>
</div>
<script>
let oauthInput = document.getElementById("oauth");
let aiKeyInput = document.getElementById("aiKey");
let toggle = document.getElementById("password-toggle");
toggle.addEventListener("change", function () {
oauthInput.type = this.checked ? "text" : "password";
aiKeyInput.type = this.checked ? "text" : "password";
});
</script>
<script>
require("./logic.js");
</script>
<script>
require("./savenload.js");
</script>
<script>
require("./banwords.js");
</script>
</body>
</html>