-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
161 lines (140 loc) · 3.85 KB
/
options.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
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Key, Model, and Customization Settings</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
h2 {
color: #34495e;
font-size: 18px;
margin-top: 20px;
}
label, p {
font-size: 14px;
color: #7f8c8d;
}
input[type="password"], input[type="number"], select, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #bdc3c7;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
}
button {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background-color: #2980b9;
}
.form-group {
margin-bottom: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.info {
background-color: #ecf0f1;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
font-size: 12px;
color: #7f8c8d;
}
#status {
color: green;
font-size: 14px;
margin-top: 10px;
}
#storedApiKey, #storedModel, #storedPrompt, #storedTokenLimit {
font-weight: bold;
color: #34495e;
}
</style>
</head>
<body>
<div class="container">
<h1>Settings</h1>
<!-- API Key Input -->
<div class="form-group">
<h2>API Key (required)</h2>
<label for="apiKeyInput">Enter your OpenAI API Key</label>
<input type="password" id="apiKeyInput" placeholder="sk-..." />
<button id="saveButton">Save</button>
<p id="status"></p>
</div>
<!-- Model Selection Dropdown -->
<div class="form-group">
<h2>Select Model</h2>
<select id="modelSelection">
<option value="gpt-4o" selected>GPT-4o (default)</option>
<option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
</select>
<button id="saveModelButton">Save Model</button>
</div>
<!-- Custom Prompt Input -->
<div class="form-group">
<h2>Custom Prompt (optional)</h2>
<textarea id="customPrompt" placeholder="Enter a custom prompt..." rows="4"></textarea>
<button id="savePromptButton">Save Prompt</button>
<div class="info">
<p>Sample Prompt: Summarize the video in a concise and informative manner in bullet points.</p>
<p>Sample Prompt: Summarize the video in detail without losing key takeaways.</p>
</div>
</div>
<!-- Max Token Limit Input -->
<div class="form-group">
<h2>Max Output Token Limit (optional)</h2>
<input type="number" id="maxTokenLimit" min="1" max="4096" value="150" />
<button id="saveTokenLimitButton">Save Token Limit</button>
<div class="info">
<p>More tokens result in more detailed summaries, but will also cost more.</p>
</div>
</div>
<!-- Display stored API key and model -->
<div class="form-group">
<h2>Current API Key</h2>
<p id="storedApiKey">No API Key saved.</p>
</div>
<div class="form-group">
<h2>Selected Model</h2>
<p id="storedModel">GPT-4o</p>
</div>
<div class="form-group">
<h2>Current Prompt</h2>
<p id="storedPrompt">No custom prompt set.</p>
</div>
<div class="form-group">
<h2>Current Token Limit</h2>
<p id="storedTokenLimit">500</p>
</div>
</div>
<script src="options.js"></script>
</body>
</html>