Update index.html

index.html

@@ -74,6 +74,10 @@ table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;p
 .vh{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}.vh h2{font-size:30px}
 .set{display:grid;gap:18px;max-width:560px}.set input[type=range]{width:100%;accent-color:var(--a)}
 #toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--p2);border:1px solid var(--a);padding:10px 18px;border-radius:99px;font-size:13px;opacity:0;transition:.3s;z-index:90;pointer-events:none}#toast.on{opacity:1;transform:translate(-50%,0)}
+.qw{margin-top:6px;padding:13px 15px;border-radius:12px;border:1px solid var(--ln);background:#090b1c;font-size:14px;line-height:1.65;color:#d7d9f2;white-space:pre-wrap;min-height:48px}
+.qw.load:after{content:"▍";color:var(--a);animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:0}}
+.qw.er{color:var(--r)}.qh{display:flex;justify-content:space-between;align-items:center;gap:8px}.qh .sec{margin-top:14px}
+.ck{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tx);margin:0}.ck input{width:auto}
 @media(max-width:980px){aside{transform:translateX(-100%);transition:.25s}aside.open{transform:none;box-shadow:0 0 0 100vmax #0009}main{margin-left:0;padding:62px 16px 30px}.menu{display:block}.hero{grid-template-columns:1fr}.art{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.c5,.c7,.c4,.c6,.c8{grid-column:span 12}}
 @media print{aside,.menu,.tools,.btn{display:none!important}main{margin:0}body{background:#fff;color:#000}.card{background:#fff;border-color:#999}}
 </style>
@@ -151,6 +155,8 @@ table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;p
     <div class="sec">Diğer olası sınıflar</div><div class="oth" id="o"></div>
     <div class="sec">Özet</div><div class="sum" id="sm">Analiz için bir belge yükleyin.</div>
     <div class="sec">Çıkarılan bilgiler</div><div class="row" id="en" style="margin-top:6px"><span class="chip">–</span></div>
+    <div class="qh"><div class="sec">🤖 Qwen Yorumu</div><button class="chip k" id="qb" onclick="qwenAgain()" style="margin-top:12px">Yenile</button></div>
+    <div class="qw" id="qw">Sınıflandırmadan sonra Qwen burada yorum yapacak.</div>
    </div>
    <div class="card c4"><h3><svg class="i"><use href="#bar"/></svg>Sınıf Dağılımı</h3><div class="donut"><div class="ring" id="ring"><span id="rt2">0</span></div><div class="lg" id="lg"></div></div></div>
    <div class="card c4"><h3><svg class="i"><use href="#cal"/></svg>Son 7 Gün</h3><div class="days" id="days"></div></div>
@@ -185,6 +191,11 @@ table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;p
   <div class="card"><div class="set">
    <div><label for="th">GÜVEN EŞİĞİ: <b id="thv">50</b>%</label><input type="range" id="th" min="30" max="95" value="50"></div>
    <div><label for="tm">VURGU RENGİ</label><select id="tm"><option value="gold">Altın</option><option value="violet">Mor</option></select></div>
+   <div><label class="ck"><input type="checkbox" id="qo"> Sınıflandırmadan sonra Qwen yorumu</label></div>
+   <div><label for="qm">QWEN MODEL</label><input type="text" id="qm" placeholder="Qwen/Qwen2.5-7B-Instruct"></div>
+   <div><label for="qe">API ADRESİ (OpenAI uyumlu)</label><input type="text" id="qe"></div>
+   <div><label for="qt">HUGGING FACE TOKEN (hf_…)</label><input type="password" id="qt" autocomplete="off" placeholder="hf_xxxxxxxx"></div>
+   <div style="font-size:12px;color:var(--mu);line-height:1.6">Token yalnızca bu tarayıcıda saklanır. Yorum için belgenin ilk ~3000 karakteri seçtiğiniz API'ye gönderilir.</div>
    <div><button class="btn o" onclick="clearH()">Geçmişi Temizle</button></div></div></div></div>
 </main>
 <div id="toast"></div>
@@ -211,6 +222,7 @@ const SAMPLES={
 const USERS0=[{u:"admin",p:"admin123",r:"Yönetici"}];
 const LS={get(k,d){try{return JSON.parse(localStorage.getItem(k))??d}catch(e){return d}},set(k,v){try{localStorage.setItem(k,JSON.stringify(v))}catch(e){}}};
 let H=LS.get("lx_h",[]),EXTRA=LS.get("lx_u",[]),ST=LS.get("lx_s",{th:50,tm:"gold"}),ME=null;
+ST=Object.assign({qo:true,qe:"https://router.huggingface.co/v1/chat/completions",qm:"Qwen/Qwen2.5-7B-Instruct",qt:""},ST);
 const esc=s=>String(s).replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
 const pc=v=>(v*100).toFixed(1);
 function toast(m){const t=$("toast");t.textContent=m;t.classList.add("on");setTimeout(()=>t.classList.remove("on"),2200)}
@@ -358,7 +370,7 @@ function analyze(text,name){
  const t0=performance.now();const r=classify(text);if(!r)return null;
  const e=entities(text);const ms=+(((performance.now()-t0)/1000)+.5+Math.random()*.5).toFixed(1);
  const rec={d:Date.now(),n:name||text.split("\n")[0].slice(0,48),l:r.label,c:r.conf,ms,tc:e.tc};
- H.unshift(rec);H=H.slice(0,400);LS.set("lx_h",H);return{r,e,rec,sum:summary(text)};
+ H.unshift(rec);H=H.slice(0,400);LS.set("lx_h",H);return{r,e,rec,sum:summary(text),text};
 }
 function show(a){const{r,e}=a;const low=r.conf*100<ST.th;
  $("rl").textContent=r.label;$("rc").textContent="Güven: %"+pc(r.conf);$("rb").style.width=r.conf*100+"%";
@@ -367,7 +379,7 @@ function show(a){const{r,e}=a;const low=r.conf*100<ST.th;
  $("sm").textContent=a.sum;
  const ch=[...e.dates.map(x=>"📅 "+x),...e.amt.map(x=>"💰 "+x),...e.cases.map(x=>"⚖️ "+x)].map(x=>`<span class="chip a">${esc(x)}</span>`);
  if(e.tc)ch.push('<span class="chip w">⚠ KVKK: 11 haneli kimlik no tespit edildi</span>');
- $("en").innerHTML=ch.join("")||'<span class="chip">Varlık bulunamadı</span>';refresh()}
+ $("en").innerHTML=ch.join("")||'<span class="chip">Varlık bulunamadı</span>';refresh();LAST=a;if(ST.qo)qwen(a)}
 function reset(){$("rl").textContent="Belge bekleniyor";$("rc").textContent="Güven: –";$("rb").style.width=0;$("rt").innerHTML=$("o").innerHTML="";$("sm").textContent="Analiz için bir belge yükleyin.";$("en").innerHTML='<span class="chip">–</span>'}
 function run(name){const x=$("txt").value.trim();if(!x){toast("Önce metin girin veya dosya yükleyin");return}
  const a=analyze(x,name);if(!a){reset();$("rl").textContent="Belirlenemedi";toast("Daha belirgin bir metin deneyin");return}show(a)}
@@ -396,6 +408,34 @@ function delH(d){H=H.filter(h=>h.d!==d);LS.set("lx_h",H);refresh()}
 $("th").oninput=e=>{ST.th=+e.target.value;$("thv").textContent=ST.th;LS.set("lx_s",ST)};
 $("tm").onchange=e=>{ST.tm=e.target.value;document.documentElement.dataset.theme=ST.tm;LS.set("lx_s",ST)};
 
+/* Qwen yorumu */
+let LAST=null,QAC=null;
+function qwenAgain(){if(LAST)qwen(LAST,true);else toast("Önce bir belge analiz edin")}
+async function qwen(a,force){
+ const box=$("qw");
+ if(!ST.qt){box.className="qw er";box.textContent="Qwen için Ayarlar'dan Hugging Face token girin.";return}
+ if(QAC)QAC.abort();QAC=new AbortController();
+ box.className="qw load";box.textContent="";
+ const{r,e}=a;
+ const info=`Sınıf: ${r.label} (güven %${pc(r.conf)})\nAnahtar kelimeler: ${r.kw.join(", ")||"-"}\nTarihler: ${e.dates.join(", ")||"-"}\nTutarlar: ${e.amt.join(", ")||"-"}\nDosya no: ${e.cases.join(", ")||"-"}\nKimlik no tespit edildi: ${e.tc?"evet":"hayır"}`;
+ const body={model:ST.qm,stream:true,max_tokens:350,temperature:.3,messages:[
+  {role:"system",content:"Sen Türk hukuku konusunda yardımcı bir asistansın. Bir sınıflandırıcının sonucunu ve belge metnini alırsın. Türkçe, en fazla 120 kelimeyle yorumla: 1) Belge ne ve sınıflandırma makul mü, 2) Dikkat edilmesi gereken noktalar/riskler, 3) Önerilen sonraki adım. Kısa maddeler kullan. Kesin hukuki tavsiye verme."},
+  {role:"user",content:info+"\n\nBelge metni:\n"+a.text.slice(0,3000)}]};
+ try{
+  const res=await fetch(ST.qe,{method:"POST",signal:QAC.signal,headers:{"Content-Type":"application/json",Authorization:"Bearer "+ST.qt},body:JSON.stringify(body)});
+  if(!res.ok){let m="";try{m=(await res.json()).error;m=m.message||m}catch(x){}throw new Error("HTTP "+res.status+(m?" – "+m:""))}
+  const rd=res.body.getReader(),dc=new TextDecoder();let buf="",out="";
+  for(;;){const{done,value}=await rd.read();if(done)break;buf+=dc.decode(value,{stream:true});
+   const ls=buf.split("\n");buf=ls.pop();
+   for(const l of ls){if(!l.startsWith("data:"))continue;const d=l.slice(5).trim();if(d==="[DONE]")continue;
+    try{const t=JSON.parse(d).choices[0].delta.content;if(t){out+=t;box.textContent=out}}catch(x){}}}
+  box.className="qw";if(!out)box.textContent="Boş yanıt geldi."
+ }catch(err){if(err.name==="AbortError")return;box.className="qw er";box.textContent="Qwen hatası: "+err.message}
+}
+$("qo").checked=!!ST.qo;$("qm").value=ST.qm;$("qe").value=ST.qe;$("qt").value=ST.qt;
+$("qo").onchange=e=>{ST.qo=e.target.checked;LS.set("lx_s",ST)};
+[["qm","qm"],["qe","qe"],["qt","qt"]].forEach(([i,k])=>$(i).onchange=e=>{ST[k]=e.target.value.trim();LS.set("lx_s",ST);toast("Kaydedildi")});
+
 function bars(el,rows,tot){el.innerHTML=rows.map(([k,n])=>`<div class="r" style="grid-template-columns:130px 1fr 52px"><span>${esc(k)}</span><div class="bar"><i style="width:${tot?n/tot*100:0}%"></i></div><span>${n}</span></div>`).join("")}
 function refresh(){
  const n=H.length,day=new Date().toDateString();