forked from giosilvi/GPT-Prompter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
137 lines (124 loc) · 7.51 KB
/
popup.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>GPT-Prompter</title>
</head>
<body>
<div class="container-sm" style="width: 600px;">
<div class="card text-center" style="border-radius:0px; background-color: rgba(0,0,0,.03); border:0;">
<div class="card-body">
<h5><img src="icons/iconA48.png" alt="logo" class="logoimage"> GPT-Prompter<br></h5>
<!-- <p class="card-text">Here are the instructions to configure the plugin to work properly</p> -->
</div>
</div>
<div class="row" style="padding:10px;">
<div class="col-sm-6">
<input type="text" class="form-control" id="apikey" placeholder="Insert your API Key">
</div>
<div class="col-sm-2">
<button type="button" class="apikeybutton" id="saveKey"
style="color: #10a37f; cursor: pointer;">Save</button>
</div>
<div class="col-sm-2">
<button type="button" class="apikeybutton" id="deleteKey"
style="color:red;margin-left: -20px; cursor: pointer;">Delete</button>
</div>
<div class="col-sm-2">
<button type="button" class="apikeybutton" style="margin-left: -20px; cursor: pointer;"
id="showKey">Show API</button>
</div>
</div>
<div style="background-color: rgba(0,0,0,.0); padding-left:10px; margin-bottom:10px!important;"><a
id="linktoAPI" href="https://beta.openai.com/account/api-keys">Where can I generate my API key?</a>
</div>
<div id="advanced settings" class="card text-bg-light" style="border-radius:0px; border:0">
<div class="card-header" style="border:0"><img src="icons/iconA16.png" alt="logo" class="logo">
<b> Advanced Settings</b>
</div>
<div class="card-body">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="probabilityToggle" checked>
<label class="custom-control-label" for="probabilityToggle">Show average tokens probabilities (<a id="linktoLogprob" href="https://beta.openai.com/docs/api-reference/completions/create#completions/create-logprobs">logprobs</a>)</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="autoAddToggle">
<label class="custom-control-label" for="autoAddToggle">Automatically Add completion to prompt</label>
</div>
</div>
</div>
<div id="prompt_design" class="card text-bg-light" style="border-radius:0px; border:0">
<div class="card-header" style="border:0"><img src="icons/iconA16.png" alt="logo" class="logo">
<b> Prompt Design</b>
</div>
<!--selector-->
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputmodel" style="border:0">Model</label>
</div>
<select class="custom-select" id="inputmodel">
<option selected value="text-davinci-003"
title="Most capable GPT-3 model, most expensive ($0.02/ 1k tokens)">ↁ
text-davinci-003</option>
<option value="text-davinci-002" title="Capable GPT-3 model, most expensive ($0.02/ 1k tokens)">🅳
text-davinci-002</option>
<option value="text-curie-001"
title="Very capable, but faster and lower cost than Davinci. ($0.002/ 1k tokens)">🅲
text-curie-001</option>
<option value="text-babbage-001"
title="Capable of straightforward tasks, very fast, and lower cost. ($0.0005/ 1k tokens)">🅑
text-babbage-001
</option>
<option value="text-ada-001"
title="Capable of very simple tasks, fastest model and lowest cost. ($0.0004/ 1k tokens) ">🅐
text-ada-001</option>
<option value="code-davinci-002"
title="Most capable in Codex series, can understand code. (Free, in beta for now)">🆇
code-davinci-002</option>
</select>
</div>
<!--temperature-->
<div class="row" style="margin-left:0px!important" title="What sampling temperature to use. Higher values means the model will take more risks. Try 0.9 for more creative applications, and 0 (argmax sampling) for ones with a well-defined answer.">
<label for="temperature" class="form-label col-sm-3">Temperature</label>
<input type="range" class="form-range col-sm-6" style="margin-right:30px; padding:0" id="temperature"
min="0" max="1" step="0.01" value="0.1">
<input class="text-input col-sm-2" type="text" readonly="readonly" style="text-align:right;border: 0;"
id="temp" value="0.1">
</div>
<!--max token-->
<div class="row" style="margin-left:0px!important" title="The maximum number of tokens to generate in the completion.">
<label for="maxtoken" class="form-label col-sm-3">Max tokens</label>
<input id="maxtoken" type="range" class="form-range col-sm-6" style="margin-right:30px;padding:0"
min="0" max="4000" step="1" value="1024">
<input class="text-input col-sm-2" type="text" readonly="readonly" style="text-align:right;border: 0;"
id="token" value="1024">
</div>
<div class="card-body">
<div style="display: flex; justify-content: center;">
<span class="suggestion">The #TEXT# in the prompt is a placeholder that will be replaced with the
text you have selected.</span>
</div>
<textarea class="form-control" id="promptinput" rows="3"
title="The keyword #TEXT# is later replaced with the selected text. It cannot be erased here">Tell me more about #TEXT# :</textarea>
<button type="button" id="createPrompt" class="list-group-item list-group-item-action text-center"
style="background-color:#10a37f; color:white"><b>Create prompt</b></button>
</div>
</div>
<div class="card text-bg-light" style="border-radius:0px; border:0">
<div class="card-header logo" style="border:0"><img src="icons/iconA16.png" alt="logo"> <b> Your Prompts</b>
<button type="button" id="history" class="save" style="margin-left:160px;">History of Your Prompts and
Cost</button>
</div>
<div class="card-body" style="border:0">
<ul id="list-of-prompts" class="list-group"></ul>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>