https://www.open-reco-bench.ai/_next/static/chunks/app/demo/page-7…?dpl=dpl_2MLr3PbS8krJktYjtSRWrMdtjQCK

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[436],{5828:(e,s,t)=>{Promise.resolve().then(t.bind(t,6374))},6374:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>l});var r=t(5155),a=t(2115);function l(){let[e,s]=(0,a.useState)(Array(10).fill("")),[t,l]=(0,a.useState)(!1),[n,i]=(0,a.useState)(!1),[o,d]=(0,a.useState)(""),[c,m]=(0,a.useState)(null),[x,h]=(0,a.useState)(null),[u,p]=(0,a.useState)("gpt-3.5-turbo"),g=(t,r)=>{let a=[...e];a[t]=r,s(a)},b=async()=>{i(!0),d("");try{let e=await fetch("/api/random-session?type=default");if(!e.ok)throw Error("Failed to get random session");let t=[...(await e.json()).titles];for(;t.length<10;)t.push("");s(t)}catch(e){d(e instanceof Error?e.message:"Failed to load random session")}finally{i(!1)}},f=async()=>{i(!0),d("");try{let e=await fetch("/api/random-session?type=ecommerce");if(!e.ok)throw Error("Failed to get random e-commerce session");let t=[...(await e.json()).titles];for(;t.length<10;)t.push("");s(t)}catch(e){d(e instanceof Error?e.message:"Failed to load random e-commerce session")}finally{i(!1)}},y=async s=>{s.preventDefault(),d(""),m(null),h(null);let t=e.map(e=>e.trim()).filter(e=>e.length>0);if(t.length<3){d("Please enter at least 3 valid page titles");return}l(!0);let r=performance.now();try{let e="q6VJPGVtswcFpoginR16LS7tOPRSBMOebaxC0xfXZ_8";if(!e)throw Error("API key not configured");let s=await fetch("/api/recommend",{method:"POST",headers:{"Content-Type":"application/json","X-API-Key":e},body:JSON.stringify({titles:t,top_k:10,model:u})});if(!s.ok){let e=await s.json();throw Error(e.detail||"Failed to get recommendations")}let a=await s.json(),l=performance.now();h(l-r),m(a)}catch(e){d(e instanceof Error?e.message:"An error occurred")}finally{l(!1)}};return(0,r.jsx)("div",{className:"min-h-screen bg-white",children:(0,r.jsxs)("div",{className:"max-w-7xl mx-auto px-6 py-12",children:[(0,r.jsx)("h1",{className:"text-4xl font-bold text-[#A6192E] text-center mb-6",children:"LLM-QueryGen Demo"}),(0,r.jsx)("p",{className:"text-gray-600 mb-8 text-center",children:"Demonstration of the LLM-QueryGen method: Generate recommendation queries based on your browsing history titles and retrieve relevant pages."}),(0,r.jsxs)("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-16",children:[(0,r.jsx)("div",{className:"space-y-6",children:(0,r.jsxs)("form",{onSubmit:y,className:"space-y-6",children:[(0,r.jsx)("div",{className:"bg-blue-50 border border-blue-200 rounded-lg p-4",children:(0,r.jsxs)("p",{className:"text-sm text-blue-800",children:[(0,r.jsx)("strong",{children:"Instruction:"})," Please enter past browsing page titles in chronological order (oldest first, newest last). At least 3 titles are required."]})}),(0,r.jsxs)("div",{className:"flex justify-between items-end gap-3",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)("label",{className:"text-sm font-medium text-gray-700 whitespace-nowrap",children:"Model:"}),(0,r.jsxs)("select",{value:u,onChange:e=>p(e.target.value),className:"px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#A6192E] focus:border-transparent text-gray-900 bg-white",children:[(0,r.jsx)("option",{value:"gpt-3.5-turbo",children:"GPT-3.5-Turbo"}),(0,r.jsx)("option",{value:"gpt-4o",children:"GPT-4o"}),(0,r.jsx)("option",{value:"gpt-4.1",children:"GPT-4.1"})]})]}),(0,r.jsxs)("div",{className:"flex gap-3",children:[(0,r.jsxs)("button",{type:"button",onClick:b,disabled:n,className:"inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-md font-medium hover:bg-gray-200 transition disabled:opacity-50 disabled:cursor-not-allowed",children:[(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:(0,r.jsx)("path",{fillRule:"evenodd",d:"M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z",clipRule:"evenodd"})}),n?"Loading...":"Random"]}),(0,r.jsxs)("button",{type:"button",onClick:f,disabled:n,className:"inline-flex items-center gap-2 px-4 py-2 bg-purple-100 text-purple-700 rounded-md font-medium hover:bg-purple-200 transition disabled:opacity-50 disabled:cursor-not-allowed",children:[(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:(0,r.jsx)("path",{d:"M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"})}),n?"Loading...":"E-commerce"]})]})]}),(0,r.jsx)("div",{className:"space-y-4",children:e.map((e,s)=>(0,r.jsxs)("div",{children:[(0,r.jsxs)("label",{className:"block text-sm font-medium text-gray-700 mb-1",children:["Title ",s+1]}

1),(0,r.jsx)("input",{type:"text",value:e,onChange:e=>g(s,e.target.value),className:"w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#A6192E] focus:border-transparent text-gray-900",placeholder:"Enter page title ".concat(s+1,"...")})]},s))}),o&&(0,r.jsx)("div",{className:"bg-red-50 border border-red-200 rounded-lg p-4",children:(0,r.jsx)("p",{className:"text-sm text-red-800",children:o})}),(0,r.jsxs)("button",{type:"submit",disabled:t,className:"w-full bg-[#A6192E] text-white py-3 px-6 rounded-md font-medium hover:bg-[#8a1525] transition disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2",children:[(0,r.jsx)("span",{className:"text-xl",children:"✨"}),t?"Processing...":"Get Recommendations"]})]})}),(0,r.jsxs)("div",{className:"space-y-6",children:[t&&(0,r.jsx)("div",{className:"flex items-center justify-center h-64",children:(0,r.jsx)("div",{className:"animate-spin rounded-full h-12 w-12 border-b-2 border-[#A6192E]"})}),c&&!t&&(0,r.jsxs)("div",{className:"space-y-6",children:[(0,r.jsxs)("div",{className:"bg-green-50 border border-green-200 rounded-lg p-6",children:[(0,r.jsx)("h2",{className:"text-xl font-bold text-gray-900 mb-2",children:"Generated Query"}),(0,r.jsx)("p",{className:"text-gray-800 text-lg",children:c.query}),null!==x&&(0,r.jsxs)("p",{className:"text-sm text-gray-600 mt-3",children:[(0,r.jsx)("strong",{children:"Latency:"})," ",x.toFixed(2)," ms"]})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h2",{className:"text-xl font-bold text-gray-900 mb-4",children:"Recommended Pages"}),(0,r.jsx)("div",{className:"space-y-4 max-h-[800px] overflow-y-auto pr-2",children:c.recommended_pages.map((e,s)=>(0,r.jsx)("div",{className:"bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition",children:(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)("span",{className:"flex-shrink-0 w-8 h-8 bg-[#A6192E] text-white rounded-full flex items-center justify-center text-sm font-medium",children:s+1}),(0,r.jsxs)("div",{className:"flex-1",children:[e.Title&&(0,r.jsx)("h3",{className:"text-lg font-semibold text-gray-900 mb-2",children:e.Title}),(0,r.jsx)("a",{href:e.URL,target:"_blank",rel:"noopener noreferrer",className:"text-blue-600 hover:text-blue-800 hover:underline font-medium break-all text-sm",children:e.URL}),(0,r.jsxs)("p",{className:"text-gray-700 mt-2 text-sm",children:[(0,r.jsx)("strong",{children:"ClueWeb22-ID:"})," ",e["ClueWeb22-ID"]]}),e["Clean-Text"]&&(0,r.jsxs)("p",{className:"text-gray-600 mt-2 text-sm",children:[e["Clean-Text"].substring(0,500),e["Clean-Text"].length>500&&"..."]})]})]})},s))})]})]}),!c&&!t&&(0,r.jsx)("div",{className:"flex items-center justify-center h-64 border-2 border-dashed border-gray-300 rounded-lg",children:(0,r.jsx)("p",{className:"text-gray-500",children:"Results will appear here after submission"})})]})]})]})})}}},e=>{var s=s=>e(e.s=s);e.O(0,[441,684,358],()=>s(5828)),_N_E=e.O()}]);