-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
179 lines (165 loc) · 7.71 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Tab Grouper Settings</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
max-width: 800px;
margin: 0 auto;
color: #333;
}
h1 {
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.setting {
margin-bottom: 20px;
padding: 15px;
border-radius: 5px;
background-color: #f9f9f9;
}
.setting-title {
font-weight: bold;
margin-bottom: 5px;
}
.setting-description {
font-size: 0.9em;
color: #666;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="range"] {
width: 100%;
}
input[type="number"] {
width: 60px;
}
select {
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ddd;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.algorithm-description {
margin-top: 10px;
padding: 10px;
background-color: #e9f7ef;
border-left: 4px solid #4CAF50;
display: none;
}
footer {
margin-top: 30px;
font-size: 0.8em;
color: #777;
text-align: center;
}
</style>
</head>
<body>
<h1>AI Tab Grouper Settings</h1>
<div class="setting">
<div class="setting-title">Grouping Algorithm</div>
<div class="setting-description">Choose the algorithm that determines how tabs are grouped together.</div>
<select id="groupingAlgorithm">
<option value="tfidf">TF-IDF (General Purpose)</option>
<option value="bm25">BM25 (Content-Focused)</option>
<option value="keyphrase">Keyphrase Extraction (Topic-Based)</option>
<option value="lsa">LSA (Semantic Relationships)</option>
<option value="qco">Quantum Chaos Organizer (Chaos & Quantum)</option>
</select>
<div id="tfidf-description" class="algorithm-description">
<strong>TF-IDF (Term Frequency-Inverse Document Frequency)</strong>
<p>Best for: General purpose grouping with balanced performance.</p>
<p>This algorithm identifies important words across your tabs by analyzing how frequently they appear. It works well for most websites and creates intuitive groups based on common terminology. Choose this if you want reliable, consistent grouping behavior.</p>
</div>
<div id="qco-description" class="algorithm-description">
<strong>Quantum Chaos Organizer (QCO)</strong>
<p>An innovative algorithm that leverages chaos theory and quantum mechanics to organize tabs using non-deterministic, adaptive grouping. It introduces randomness to enhance diversity and reduce bias while maintaining local processing for user privacy.</p>
</div>
<div id="bm25-description" class="algorithm-description">
<strong>BM25 (Best Matching 25)</strong>
<p>Best for: Content-heavy websites with varying lengths.</p>
<p>An advanced algorithm that excels at handling tabs with different amounts of text. It's particularly effective for research, documentation, and article-heavy browsing. Choose this if you frequently have tabs with substantial text content of varying lengths.</p>
</div>
<div id="keyphrase-description" class="algorithm-description">
<strong>Keyphrase Extraction</strong>
<p>Best for: Topic-focused grouping across diverse websites.</p>
<p>This algorithm identifies key phrases and topics rather than just individual words. It's excellent for grouping tabs by subject matter even when the exact terminology differs. Choose this if you want groups organized by conceptual topics rather than specific terminology.</p>
</div>
<div id="lsa-description" class="algorithm-description">
<strong>LSA (Latent Semantic Analysis)</strong>
<p>Best for: Discovering hidden relationships between tabs.</p>
<p>This advanced algorithm uses mathematical techniques to identify the underlying semantic structure in your tabs. It can discover relationships between tabs even when they don't share the same exact words. Choose this if you want to group tabs based on conceptual similarity rather than just keyword matching.</p>
</div>
</div>
<div class="setting">
<div class="setting-title">Similarity Threshold</div>
<div class="setting-description">How similar tabs need to be to be grouped together. Higher values create more groups with fewer tabs in each.</div>
<input type="range" id="similarityThreshold" min="0" max="1" step="0.05" value="0.3">
<span id="similarityThresholdValue">0.3</span>
</div>
<div class="setting">
<div class="setting-title">Automatic Grouping Interval</div>
<div class="setting-description">How often (in minutes) tabs should be automatically grouped.</div>
<input type="number" id="groupingInterval" min="1" value="5">
</div>
<div class="setting">
<div class="setting-title">Maximum Group Name Length</div>
<div class="setting-description">The maximum length of automatically generated group names.</div>
<input type="number" id="maxGroupNameLength" min="1" max="20" value="15">
</div>
<div id="bm25Settings" style="display: none;">
<div class="setting">
<div class="setting-title">BM25 k1 Parameter</div>
<div class="setting-description">Controls term frequency saturation. Higher values give more weight to term frequency.</div>
<input type="number" id="bm25k1" min="0.1" max="3" step="0.1" value="1.5">
</div>
<div class="setting">
<div class="setting-title">BM25 b Parameter</div>
<div class="setting-description">Controls document length normalization. Higher values give more normalization.</div>
<input type="number" id="bm25b" min="0" max="1" step="0.05" value="0.75">
</div>
</div>
<div id="lsaSettings" style="display: none;">
<div class="setting">
<div class="setting-title">LSA Dimensions</div>
<div class="setting-description">Number of dimensions to use for semantic analysis. Higher values capture more nuanced relationships but require more processing.</div>
<input type="number" id="lsaDimensions" min="10" max="100" step="5" value="50">
</div>
</div>
<button id="saveSettings">Save Settings</button>
<button id="groupTabsNow">Group Tabs Now</button>
<footer>
<p>AI Tab Grouper respects your privacy. All processing happens locally in your browser.</p>
<p>Pinned tabs are always ignored and will never be grouped.</p>
</footer>
<script src="options.js"></script>
</body>
</html>