-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
85 lines (81 loc) · 3.18 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>OpenAI Chatbot</title>
<style>
@import url('./styles.css');
</style>
</head>
<body>
<div id="side-container">
<div id="chat-session-heading">Chat Sessions</div>
<button id="new-chat-session-button" class="button-green">New Chat Session</button>
<div id="chat-sessions">
<!-- Chat session buttons will be displayed here -->
</div>
</div>
<div id="app-container">
<div id="header">
<div>
<label for="model-select">Select Model:</label>
<select id="model-select">
<option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
<option value="gpt-4">GPT 4</option>
<option value="gpt-4-32k">GPT 4 32k context</option>
</select>
</div>
<div>
<label for="api-key-input">API Key:</label>
<input id="api-key-input" type="password" placeholder="Enter your OpenAI API key..." />
<button id="api-key-submit" class="button-green">Set API Key</button>
</div>
</div>
<div id="chat-container">
<!-- Chat messages will be displayed here -->
</div>
<div id="footer">
<textarea id="user-input" rows="3" placeholder="Type your message..."></textarea>
<button id="send-button" class="button-green">Send</button>
</div>
</div>
<div id="right-container-prompt">
<div id="prompt-heading">Prompts</div>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'premade-prompts')" id="defaultOpen">Premade</button>
<button class="tablinks" onclick="openTab(event, 'custom-prompts')">Custom</button>
</div>
<div id="premade-prompts" class="tabcontent">
<div id="prompt-list" class="sidebar"></div>
</div>
<div id="custom-prompts" class="tabcontent">
<button id="new-custom-prompt-button" class="button-green">New Custom Prompt</button>
<div id="custom-prompt-list" class="sidebar"></div>
<div id="custom-prompt-form-container" style="display: none;">
<input id="custom-prompt-name" type="text" placeholder="Enter prompt name..." />
<textarea id="custom-prompt-description" rows="2" placeholder="Enter prompt description..."></textarea>
<textarea id="custom-prompt-text" rows="2" placeholder="Enter prompt text..."></textarea>
<button id="custom-prompt-submit" class="button-green">Add Custom Prompt</button>
<button id="custom-prompt-cancel" class="button-red">Cancel</button>
</div>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
</div>
<script src="./renderer.js"></script>
</body>
</html>