-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoptions.html
More file actions
229 lines (216 loc) · 12.1 KB
/
options.html
File metadata and controls
229 lines (216 loc) · 12.1 KB
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AutoSort+ Settings</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>AutoSort+ Settings</h1>
<div class="section collapsible-section">
<div class="section-header" data-section="ai-settings">
<h2>🤖 AI Settings</h2>
<span class="collapse-icon">▼</span>
</div>
<div class="section-content" id="ai-settings">
<div class="subsection">
<h3>Provider Selection</h3>
<div class="input-group">
<label for="ai-provider">AI Provider:</label>
<select id="ai-provider" class="provider-select">
<option value="gemini">Google Gemini (Recommended)</option>
<option value="openai">OpenAI (ChatGPT)</option>
<option value="anthropic">Anthropic Claude</option>
<option value="groq">Groq (Fast & Free)</option>
<option value="mistral">Mistral AI</option>
<option value="ollama">Ollama (Local LLM)</option>
</select>
</div>
<div id="provider-info" class="provider-info"></div>
<div id="rate-limit-warning" class="warning-box" style="display: none;">
<strong>⚠️ Rate Limit Warning:</strong> Free API tiers are severely limited when processing emails. You may only process 5-20 emails before hitting rate limits. Paid plans ($5-20/month) are recommended for daily email processing.
</div>
</div>
<div class="subsection" id="ollama-settings-subsection" style="display: none;">
<h3>🏠 Local Ollama Configuration</h3>
<label for="ollama-url">Ollama Server URL:</label>
<input type="text" id="ollama-url" class="api-key-input" placeholder="http://localhost:11434" value="http://localhost:11434">
<div class="checkbox-container">
<input type="checkbox" id="ollama-cpu-only">
<label for="ollama-cpu-only">Force CPU-only mode (disable GPU acceleration)</label>
</div>
<label for="ollama-model">Ollama Model:</label>
<select id="ollama-model" class="provider-select">
<option value="llama2">Llama 2</option>
<option value="llama3.2">Llama 3.2</option>
<option value="mistral">Mistral</option>
<option value="phi">Phi</option>
<option value="gemma">Gemma</option>
<option value="qwen2.5">Qwen 2.5</option>
<option value="custom">Custom (enter below)</option>
</select>
<div class="input-group">
<label for="ollama-auth-token">Ollama Auth Token (optional):</label>
<input type="password" id="ollama-auth-token" class="api-key-input" placeholder="If your Ollama server requires a token, enter it here">
<small class="help-text">Used for /api/chat and /api/pull requests when required.</small>
</div>
<input type="text" id="ollama-custom-model" class="api-key-input" placeholder="Enter custom model name" style="display: none; margin-top: 10px;">
<div class="input-group">
<label for="ollama-download-model">Download Model:</label>
<input type="text" id="ollama-download-model" class="api-key-input" placeholder="e.g., llama3.2, mistral, qwen2.5:7b">
</div>
<div class="button-group">
<button id="download-ollama-model" class="button">Download</button>
<button id="list-ollama-models" class="button">List Installed Models</button>
<button id="test-ollama" class="button">Test Connection</button>
<button id="diagnose-ollama" class="button">Run Diagnostics</button>
</div>
<div id="ollama-download-status" class="api-test-result" style="display: none;"></div>
<div id="ollama-test-result" class="api-test-result"></div>
<div id="ollama-diagnostics" class="diagnostics-result" style="display: none;"></div>
</div>
<div class="subsection" id="api-key-subsection">
<h3>🔑 API Key Configuration</h3>
<div class="input-group">
<label for="api-key" id="api-key-label">API Key:</label>
<input type="password" id="api-key" class="api-key-input" placeholder="Enter your API key">
<div class="button-group">
<button id="test-api" class="button">Test API Connection</button>
<button id="get-api-key" class="button button-link">Get API Key</button>
</div>
<div id="api-test-result" class="api-test-result"></div>
</div>
</div>
</div>
<div class="subsection" id="gemini-multi-keys-subsection" style="display: none;">
<h3>🔄 Multiple Gemini API Keys</h3>
<p class="info-text">Add multiple API keys from different Google Cloud projects. The extension will automatically rotate between them when rate limits are reached.</p>
<div id="gemini-keys-list" class="gemini-keys-list"></div>
<div class="button-group">
<button id="add-gemini-key" class="button">+ Add Another Gemini Key</button>
</div>
</div>
<div class="subsection" id="ai-general-subsection">
<h3>⚙️ General Settings</h3>
<input type="checkbox" id="enable-ai" checked>
<label for="enable-ai">Enable AI-powered sorting</label>
</div>
<div class="checkbox-container" id="gemini-paid-container" style="display: none;">
<input type="checkbox" id="gemini-paid-plan">
<label for="gemini-paid-plan">I have a Gemini paid plan (removes rate limits)</label>
</div>
</div>
<div class="subsection" id="gemini-usage-subsection" style="display: none;">
<h3>📊 Gemini API Usage</h3>
<div id="single-key-usage" style="display: none;">
<div class="usage-stats">
<div class="usage-item">
<strong>Today's Usage:</strong> <span id="gemini-daily-count">0</span>/20 requests
</div>
<div class="usage-item">
<strong>Last Request:</strong> <span id="gemini-last-request">Never</span>
</div>
<div class="usage-item">
<strong>Daily Limit Resets:</strong> <span id="gemini-reset-time">--</span>
</div>
<div class="usage-item">
<strong>Status:</strong> <span id="gemini-status">Ready</span>
</div>
</div>
<div class="button-group">
<button id="reset-gemini-counter" class="button">Reset Counter (New API Key)</button>
<button id="refresh-usage" class="button">Refresh Usage</button>
</div>
<div id="usage-message" class="usage-message"></div>
</div>
<div id="multi-key-usage" style="display: none;">
<div id="all-keys-usage-stats" class="all-keys-usage"></div>
<div class="button-group">
<button id="refresh-all-usage" class="button">Refresh All Usage</button>
</div>
</div>
</div>
</div>
<div class="subsection ai-info-subsection">
<h3>ℹ️ How AI Sorting Works</h3>
<div class="ai-description">
<p>AutoSort+ uses AI to analyze your emails and automatically sort them into categories/folders based on their content. The AI will:</p>
<ul>
<li>Read and understand email content</li>
<li>Identify key topics and themes</li>
<li>Match emails to appropriate categories/folders</li>
<li>Learn from your manual corrections to improve accuracy</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section collapsible-section">
<div class="section-header" data-section="folders-settings">
<h2>📁 Custom Categories/Folders</h2>
<span class="collapse-icon">▼</span>
</div>
<div class="section-content" id="folders-settings">
<div class="folder-source">
<h3>Folder Source</h3>
<button id="load-imap-folders" class="button">Load Folders from Mail Account</button>
<div id="folder-loading" class="loading-indicator" style="display: none;">Loading folders...</div>
<div id="folder-selection" class="folder-selection" style="display: none;">
<p>Found <span id="folder-count">0</span> folders in your mail account. Would you like to use these?</p>
<div id="folders-preview" class="folders-preview"></div>
<div class="button-group">
<button id="use-imap-folders" class="button primary">Use These Folders</button>
<button id="use-custom-folders" class="button">Use Custom Folders Instead</button>
</div>
</div>
</div>
<div class="bulk-import">
<label for="bulk-import-text">Import Categories/Folders (one per line):</label>
<textarea id="bulk-import-text" class="bulk-import-textarea" placeholder="Enter categories/folders, one per line"></textarea>
<button id="import-labels" class="button">Import</button>
</div>
<div id="labels-container">
<div class="label-item">
<input type="text" class="label-input" placeholder="Enter category/folder name">
<button class="remove-label">×</button>
</div>
</div>
<button id="add-label" class="button">Add</button>
</div>
</div>
<div class="section collapsible-section collapsed">
<div class="section-header" data-section="history-settings">
<h2>📜 Move History</h2>
<span class="collapse-icon">▶</span>
</div>
<div class="section-content" id="history-settings" style="display: none;">
<div class="history-controls">
<button id="clear-history" class="button">Clear History</button>
<button id="refresh-history" class="button">Refresh</button>
</div>
<div class="history-container">
<table id="history-table">
<thead>
<tr>
<th>Timestamp</th>
<th>Subject</th>
<th>Status</th>
<th>Destination</th>
</tr>
</thead>
<tbody id="history-body">
<!-- History entries will be added here -->
</tbody>
</table>
</div>
</div>
</div>
<div class="section save-section">
<button id="save-settings" class="button primary">Save Settings</button>
</div>
</div>
<script src="options.js"></script>
</body>
</html>