-
Notifications
You must be signed in to change notification settings - Fork 0
/
options.html
153 lines (147 loc) · 6.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ask Llama Settings</title>
<link rel="stylesheet" type="text/css" href="options.css">
<script type="module" defer src="options.js"></script>
</head>
<body>
<div class="container">
<h1>Ask Llama</h1>
<div class="description">
Enter Your Groq API Key (Free)
<div class="info-tooltip">
<img src="icons/information-circle-outline.svg" alt="Info" style="width: 20px; height: 20px;">
<span class="info-tooltiptext">
To get a Groq API key,
<div class="info-tooltip-paragraph">
1. Register for a free account at <a href="https://groq.com/" target="_blank">Groq</a>.
</div>
<div class="info-tooltip-paragraph">
2. Go to the <a href="https://console.groq.com/playground" target="_blank">Groq playground</a> and click on the "API Keys" in menu.
And click "Create API Key" button.
</div>
</span>
</div>
</div>
<div class="api-container" style="padding-bottom: 20px;">
<input type="password" id="apiKey" placeholder="API Key">
<button id="saveKey">Save Key</button>
</div>
<div class="description">
Prompt
<div class="info-tooltip">
<img src="icons/information-circle-outline.svg" alt="Info" style="width: 20px; height: 20px;">
<span class="info-tooltiptext">
<div class="info-tooltip-paragraph">
You can customize the prompt by adding a prefix and suffix.
</div>
<div class="info-tooltip-paragraph">
<u>
Default
</u>
</div>
<div class="info-tooltip-paragraph">
prefix: "What is"
</div>
<span class="info-tooltip-paragraph" style="background-color: aliceblue; border: 1px solid #ccc; ">
{Selected word}
</span>
<div class="info-tooltip-paragraph">
suffix: "Explain in short."
</div>
</span>
</div>
</div>
<div style="padding-bottom: 20px;">
<div class="api-container">
<input type="text" id="prompt" placeholder="Your prompt prefix ...">
<span>+</span>
<input type="text" id="prompt2" placeholder="Your prompt suffix ...">
</div>
<!-- <button id="saveKey">Save Prompt</button> -->
</div>
<div class="description">
Choose Background Color
<div class="info-tooltip">
<img src="icons/information-circle-outline.svg" alt="Info" style="width: 20px; height: 20px;">
<span class="info-tooltiptext">
<div class="info-tooltip-paragraph">
You can choose a background color for the tooltip.
</div>
</span>
</div>
</div>
<div class="color-picker" style="padding-bottom: 20px;">
<div class="color-option" data-color="#f3faff">
<div class="color-preview" style="background-color: #f3faff;"></div>
Light Blue
</div>
<div class="color-option" data-color="#fff0f5">
<div class="color-preview" style="background-color: #fff0f5;"></div>
Lavender Blush
</div>
<div class="color-option" data-color="#f0fff0">
<div class="color-preview" style="background-color: #f0fff0;"></div>
Honeydew
</div>
<div class="color-option" data-color="#FFFFE0">
<div class="color-preview" style="background-color: #FFFFE0;"></div>
Light Yellow
</div>
<div class="color-option" data-color="#f0ffff">
<div class="color-preview" style="background-color: #f0ffff;"></div>
Azure
</div>
</div>
<div class="description">
Manage Shortcuts
<div class="info-tooltip">
<img src="icons/information-circle-outline.svg" alt="Info" style="width: 20px; height: 20px;">
<span class="info-tooltiptext" style="width: 450px;">
<div class="info-tooltip-paragraph">
The shortcuts allow you to search words in different site (default: Google, Wikipedia, and YouTube).
</div>
<!-- <div class="info-tooltip-paragraph">
<img src="Sreenshot-shortcut.png" alt="Screenshot" style="width: 100%;">
</div> -->
<div class="info-tooltip-paragraph">
<u>Example</u>
</div>
<div class="info-tooltip-paragraph">
If you want to add shortcut for searching words in <span style="border-bottom: 1px dotted palevioletred; font-weight: 700;">Cambridge Dictionary</span>,
</div>
<div>
Set the URL template to be <a href="https://dictionary.cambridge.org/dictionary/english-chinese-traditional/" target="_blank">
https://dictionary.cambridge.org/dictionary/english-chinese-traditional/
</a>.
</div>
</span>
</div>
</div>
<table>
<thead>
<tr>
<th>Shortcut</th>
<th>URL Template</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Dynamic content will be inserted here -->
</tbody>
</table>
<button id="resetShortcut">Reset</button>
<button id="saveShortcut">Save Shortcut</button>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="icons/icon128.png" alt="Icon" style="display: block; margin: auto;">
<p id="modalText" style="font-size: 24px; display: flex; justify-content: center;">API Key saved successfully!</p>
</div>
</div>
</body>
</html>