Update templates/index.html

templates/index.html

@@ -156,6 +156,19 @@ h1.ht .l3 { display: block; color: var(--muted2); }
 }
 .src-warn { font-family: var(--mono); font-size: 0.55rem; color: #f59e0b; margin-top: 0.4rem; display: none; }
 .src-warn.show { display: block; }
+/* SLIDER */
+.slider-wrap { display:flex; flex-direction:column; gap:0.35rem; margin-top:0.1rem; }
+.slider-row { display:flex; align-items:center; gap:0.75rem; }
+input[type="range"] { flex:1; -webkit-appearance:none; appearance:none; height:3px; background:var(--b2); border-radius:2px; outline:none; cursor:pointer; }
+input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--a2)); cursor:pointer; transition:transform .15s; }
+input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.2); }
+.slider-val { font-family:var(--mono); font-size:0.72rem; font-weight:500; color:var(--accent); min-width:2.5rem; text-align:right; }
+/* MULTI-KEYWORD */
+.kw-tags { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.4rem; min-height:1.5rem; }
+.kw-tag { display:inline-flex; align-items:center; gap:0.3rem; background:rgba(79,156,249,0.1); border:1px solid rgba(79,156,249,0.25); border-radius:5px; padding:0.15rem 0.5rem; font-family:var(--mono); font-size:0.62rem; color:var(--accent); }
+.kw-tag button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:0.7rem; line-height:1; padding:0; opacity:0.7; }
+.kw-tag button:hover { opacity:1; }
+.kw-add-hint { font-family:var(--mono); font-size:0.55rem; color:var(--muted); }
 
 .btn-go {
   align-self: flex-end;
@@ -429,7 +442,17 @@ footer {
       </div>
       <p class="src-warn" id="src-warn">⚠ Pilih minimal satu sumber data</p>
     </div>
-    <p class="f-hint">Tekan <b>Enter</b> untuk mulai · Maks. <b>100 komentar</b> per sumber</p>
+    <div class="kw-tags" id="kw-tags"></div>
+    <p class="kw-add-hint">Tekan <b>Enter</b> atau <b>,</b> untuk tambah keyword · Maks. 3 keyword</p>
+
+    <div class="slider-wrap" style="margin-top:0.75rem">
+      <label style="font-family:var(--mono);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)">Confidence Threshold</label>
+      <div class="slider-row">
+        <input type="range" id="conf-slider" min="0.3" max="0.9" step="0.05" value="0.6">
+        <span class="slider-val" id="conf-val">0.60</span>
+      </div>
+    </div>
+    <p class="f-hint" style="margin-top:0.5rem">Prediksi di bawah threshold akan ditandai <b>Uncertain</b></p>
   </div>
 
   <div class="stats">
@@ -565,9 +588,49 @@ document.addEventListener('change', () => {
   document.getElementById('src-warn').classList.remove('show');
 });
 
+// ── Multi-keyword management ──
+const kwTags = [];
+document.getElementById('keyword').addEventListener('keydown', function(e) {
+  if ((e.key === 'Enter' || e.key === ',') && this.value.trim()) {
+    e.preventDefault();
+    addKeyword(this.value.trim().replace(',',''));
+    this.value = '';
+  }
+});
+
+function addKeyword(kw) {
+  if (!kw || kwTags.includes(kw) || kwTags.length >= 3) return;
+  kwTags.push(kw);
+  renderTags();
+}
+
+function removeKeyword(kw) {
+  const idx = kwTags.indexOf(kw);
+  if (idx > -1) kwTags.splice(idx, 1);
+  renderTags();
+}
+
+function renderTags() {
+  const container = document.getElementById('kw-tags');
+  container.innerHTML = kwTags.map(k =>
+    `<span class="kw-tag">${k}<button onclick="removeKeyword('${k}')">×</button></span>`
+  ).join('');
+}
+
+// ── Confidence slider ──
+document.getElementById('conf-slider').addEventListener('input', function() {
+  document.getElementById('conf-val').textContent = parseFloat(this.value).toFixed(2);
+});
+
 async function go() {
-  const kw  = document.getElementById('keyword').value.trim();
-  const src = getSelectedSources();
+  const inputKw = document.getElementById('keyword').value.trim();
+  if (inputKw) addKeyword(inputKw);
+  document.getElementById('keyword').value = '';
+
+  const allKw = kwTags.length ? kwTags : [inputKw];
+  const kw    = allKw.filter(Boolean).join(',');
+  const src   = getSelectedSources();
+  const confTh = parseFloat(document.getElementById('conf-slider').value);
 
   if (!kw) {
     const inp = document.getElementById('keyword');
@@ -590,7 +653,7 @@ async function go() {
     const r = await fetch('/analyze', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ keyword: kw, source: src })
+      body: JSON.stringify({ keyword: kw, source: src, conf_threshold: confTh })
     });
     const d = await r.json();
     clearTimeout(st);