| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>NurseLex Semantic Search</title>
|
| <style>
|
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
|
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: 'Inter', sans-serif;
|
| background: #111111;
|
| color: #fff;
|
| overflow: hidden;
|
| height: 100vh;
|
| width: 100vw;
|
| }
|
|
|
| #canvas-container {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| z-index: 0;
|
| }
|
|
|
|
|
| #search-container {
|
| position: fixed;
|
| bottom: 60px;
|
| left: 50%;
|
| transform: translateX(-50%);
|
| z-index: 100;
|
| width: 100%;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| gap: 12px;
|
| }
|
|
|
| #search-wrapper {
|
| position: relative;
|
| width: 400px;
|
| }
|
|
|
| .search-icon {
|
| position: absolute;
|
| left: 16px;
|
| top: 50%;
|
| transform: translateY(-50%);
|
| color: rgba(255, 255, 255, 0.4);
|
| pointer-events: none;
|
| }
|
|
|
| #search-input {
|
| width: 100%;
|
| background: #1f1f1f;
|
| border: 1px solid rgba(255, 255, 255, 0.1);
|
| border-radius: 24px;
|
| padding: 12px 20px 12px 44px;
|
| font-family: 'Inter', sans-serif;
|
| font-size: 14px;
|
| color: white;
|
| outline: none;
|
| transition: all 0.2s ease;
|
| }
|
|
|
| #search-input:focus {
|
| background: #2a2a2a;
|
| border-color: rgba(255, 255, 255, 0.3);
|
| }
|
|
|
| #search-input::placeholder {
|
| color: rgba(255, 255, 255, 0.4);
|
| }
|
|
|
| #meta-info {
|
| text-align: center;
|
| font-size: 12px;
|
| color: rgba(255, 255, 255, 0.4);
|
| }
|
|
|
| #meta-info .brand {
|
| font-weight: 600;
|
| color: rgba(255, 255, 255, 0.8);
|
| margin-bottom: 2px;
|
| }
|
|
|
|
|
| #loader {
|
| position: fixed;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%);
|
| z-index: 200;
|
| background: rgba(17, 17, 17, 0.9);
|
| padding: 24px 40px;
|
| border-radius: 12px;
|
| border: 1px solid rgba(255, 255, 255, 0.1);
|
| text-align: center;
|
| transition: opacity 0.4s;
|
| }
|
|
|
| #loader.hidden {
|
| opacity: 0;
|
| pointer-events: none;
|
| }
|
|
|
| .spinner {
|
| width: 24px;
|
| height: 24px;
|
| border: 3px solid rgba(255, 255, 255, 0.1);
|
| border-top-color: white;
|
| border-radius: 50%;
|
| animation: spin 1s linear infinite;
|
| margin: 0 auto 16px;
|
| }
|
|
|
| @keyframes spin {
|
| 100% {
|
| transform: rotate(360deg);
|
| }
|
| }
|
| </style>
|
| </head>
|
|
|
| <body>
|
|
|
| <div id="loader">
|
| <div class="spinner"></div>
|
| <div id="status-text">Downloading embedding model...</div>
|
| </div>
|
|
|
| <div id="canvas-container"></div>
|
|
|
| <div id="search-container">
|
| <div id="search-wrapper">
|
| <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
| stroke-width="2">
|
| <circle cx="11" cy="11" r="8"></circle>
|
| <path d="m21 21-4.35-4.35"></path>
|
| </svg>
|
| <input id="search-input" type="text" placeholder="weather" disabled />
|
| </div>
|
| <div id="meta-info">
|
| <div class="brand">pplx-embed web</div>
|
| <div id="top-match">Loading clinical documents...</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
|
|
|
| <script type="module">
|
| import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.3/dist/transformers.min.js';
|
|
|
| env.allowLocalModels = false;
|
|
|
|
|
|
|
|
|
| const DOCUMENTS = [
|
| { id: 1, text: "A 67-year-old male presents with crushing central chest pain radiating to the left arm. Diaphoresis, nausea, and shortness of breath." },
|
| { id: 2, text: "Sudden onset pleuritic chest pain with haemoptysis in post-operative patient day 3. Tachycardia, low-grade fever." },
|
| { id: 3, text: "Patient febrile at 39.8°C, hypotensive BP 80/40, tachycardic HR 128. Source: urinary tract infection." },
|
| { id: 4, text: "Sudden facial drooping, arm weakness, and speech slurring in a 72-year-old female. FAST positive." },
|
| { id: 5, text: "Type 1 diabetic presenting with vomiting, polyuria, polydipsia, Kussmaul breathing. Blood glucose 28 mmol/L." },
|
| { id: 6, text: "Elderly patient with previous fall, gait instability, polypharmacy >4 drugs, impaired vision. Morse Fall Scale high risk." },
|
| { id: 7, text: "Wrong dose of methotrexate administered weekly instead of daily. Nurse failed to check original prescription." },
|
| { id: 8, text: "Immobile patient grade 2 sacral pressure injury. Waterlow score 18. Reposition every 2 hours." },
|
| { id: 9, text: "Patient expressing suicidal ideation with a plan. Previous attempt documented. Maintain observation." },
|
| { id: 10, text: "Patient develops urticaria, angioedema, bronchospasm following penicillin administration. Hypotensive BP 70/40." },
|
| { id: 11, text: "Patient post-laparotomy day 1, NRS pain score 8/10. Morphine PCA inadequate. Assess respiratory rate." },
|
| { id: 12, text: "Surgical wound red, warm, swollen with purulent discharge on day 5. Temperature 38.2°C, WBC elevated." },
|
| { id: 13, text: "Sudden-onset confusion, agitation, and disorientation in 81-year-old post-hip replacement." },
|
| { id: 14, text: "Health and Care (Staffing) Act 2019 mandates registered nurse staffing levels." },
|
| { id: 15, text: "Section 5(2) Mental Health Act 1983 allows a doctor to detain an informal inpatient for up to 72 hours." }
|
| ];
|
|
|
|
|
|
|
|
|
| const container = document.getElementById('canvas-container');
|
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
| renderer.setSize(window.innerWidth, window.innerHeight);
|
| renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
| container.appendChild(renderer.domElement);
|
|
|
| const scene = new THREE.Scene();
|
| const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
|
| camera.position.set(0, 0, 45);
|
|
|
|
|
| scene.add(new THREE.AmbientLight(0xffffff, 0.2));
|
|
|
|
|
| const carousel = new THREE.Group();
|
| scene.add(carousel);
|
|
|
|
|
| const poleGeo = new THREE.CylinderGeometry(0.05, 0.05, 30, 8);
|
| const poleMat = new THREE.MeshBasicMaterial({ color: 0x555555 });
|
| const pole = new THREE.Mesh(poleGeo, poleMat);
|
| carousel.add(pole);
|
|
|
|
|
|
|
|
|
| function createCardTexture(id, text, scoreStr) {
|
| const canvas = document.createElement('canvas');
|
|
|
| canvas.width = 1024;
|
| canvas.height = 1024 * (16 / 12);
|
| const ctx = canvas.getContext('2d');
|
|
|
|
|
| ctx.fillStyle = '#161616';
|
| ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
| ctx.fillStyle = '#ffffff';
|
|
|
|
|
| ctx.font = '500 48px Inter, sans-serif';
|
| ctx.textAlign = 'left';
|
| ctx.fillText(`Document #${id}`, 64, 80);
|
|
|
|
|
| if (scoreStr) {
|
| ctx.textAlign = 'right';
|
| ctx.fillText(`Score ${scoreStr}`, canvas.width - 64, 80);
|
| }
|
|
|
|
|
| ctx.font = '500 52px Inter, sans-serif';
|
| ctx.textAlign = 'left';
|
| ctx.textBaseline = 'middle';
|
|
|
|
|
| const words = text.split(' ');
|
| let line = '';
|
| let y = canvas.height / 2;
|
| const lines = [];
|
| const marginX = 120;
|
| const maxWidth = canvas.width - (marginX * 2);
|
|
|
| for (let n = 0; n < words.length; n++) {
|
| const testLine = line + words[n] + ' ';
|
| const metrics = ctx.measureText(testLine);
|
| if (metrics.width > maxWidth && n > 0) {
|
| lines.push(line);
|
| line = words[n] + ' ';
|
| } else {
|
| line = testLine;
|
| }
|
| }
|
| lines.push(line);
|
|
|
| const lineHeight = 76;
|
| const startY = y - ((lines.length - 1) * lineHeight) / 2;
|
|
|
| lines.forEach((l, i) => {
|
| ctx.fillText(l.trim(), marginX, startY + (i * lineHeight));
|
| });
|
|
|
| const texture = new THREE.CanvasTexture(canvas);
|
| texture.minFilter = THREE.LinearMipMapLinearFilter;
|
| texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
|
| return texture;
|
| }
|
|
|
|
|
|
|
|
|
| const cards = [];
|
| const cardWidth = 14;
|
| const cardHeight = 18;
|
|
|
| function updateAllCardTextures(scoresMap) {
|
| cards.forEach(c => {
|
| const score = scoresMap ? scoresMap[c.doc.id] : null;
|
| const scoreStr = score ? score.toFixed(3) : '';
|
| const newTex = createCardTexture(c.doc.id, c.doc.text, scoreStr);
|
| c.frontMat.map.dispose();
|
| c.frontMat.map = newTex;
|
| c.frontMat.needsUpdate = true;
|
| });
|
| }
|
|
|
| DOCUMENTS.forEach((doc, i) => {
|
| const group = new THREE.Group();
|
|
|
|
|
| const frontGeo = new THREE.PlaneGeometry(cardWidth, cardHeight);
|
| frontGeo.translate(cardWidth / 2, 0, 0);
|
|
|
| const tex = createCardTexture(doc.id, doc.text, '');
|
| const frontMat = new THREE.MeshBasicMaterial({
|
| map: tex,
|
| side: THREE.FrontSide
|
| });
|
| const frontMesh = new THREE.Mesh(frontGeo, frontMat);
|
| group.add(frontMesh);
|
|
|
|
|
| const backGeo = new THREE.PlaneGeometry(cardWidth, cardHeight);
|
| backGeo.translate(cardWidth / 2, 0, 0);
|
| const backMat = new THREE.MeshBasicMaterial({
|
| color: 0x161616,
|
| side: THREE.BackSide
|
| });
|
| const backMesh = new THREE.Mesh(backGeo, backMat);
|
| group.add(backMesh);
|
|
|
|
|
| const edgesGeo = new THREE.EdgesGeometry(frontGeo);
|
| const edgesMat = new THREE.LineBasicMaterial({ color: 0x888888, linewidth: 2 });
|
| const edges = new THREE.LineSegments(edgesGeo, edgesMat);
|
| group.add(edges);
|
|
|
|
|
| const angle = (i / DOCUMENTS.length) * Math.PI * 2;
|
| group.position.set(0, 0, 0);
|
| group.rotation.y = angle;
|
|
|
| carousel.add(group);
|
|
|
| cards.push({
|
| group,
|
| doc,
|
| cardMesh: frontMesh,
|
| frontMat,
|
| edgesMat,
|
| angle
|
| });
|
| });
|
|
|
|
|
|
|
|
|
| let targetRotation = 0;
|
| let isDragging = false;
|
| let dragDistance = 0;
|
| let previousMouseX = 0;
|
| let selectedCard = null;
|
|
|
| const raycaster = new THREE.Raycaster();
|
| const mouse = new THREE.Vector2();
|
|
|
|
|
| const detailPanel = document.createElement('div');
|
| detailPanel.id = 'detail-panel';
|
| detailPanel.innerHTML = `
|
| <button id="detail-close">✕</button>
|
| <div id="detail-id"></div>
|
| <div id="detail-score"></div>
|
| <div id="detail-text"></div>
|
| `;
|
| detailPanel.style.cssText = `
|
| position: fixed; top: 50%; right: 40px; transform: translateY(-50%);
|
| width: 380px; max-height: 70vh; overflow-y: auto;
|
| background: rgba(22,22,22,0.92); backdrop-filter: blur(20px);
|
| border: 1px solid rgba(255,255,255,0.15); border-radius: 16px;
|
| padding: 28px; z-index: 300; color: white;
|
| font-family: Inter, sans-serif; opacity: 0;
|
| pointer-events: none; transition: opacity 0.3s ease;
|
| `;
|
| document.body.appendChild(detailPanel);
|
|
|
| const detailClose = document.getElementById('detail-close');
|
| detailClose.style.cssText = `
|
| position: absolute; top: 12px; right: 16px;
|
| background: none; border: none; color: rgba(255,255,255,0.5);
|
| font-size: 18px; cursor: pointer;
|
| `;
|
| detailClose.addEventListener('click', () => closeDetail());
|
|
|
| function showDetail(card) {
|
| selectedCard = card;
|
|
|
| cards.forEach(c => c.edgesMat.color.setHex(0x888888));
|
| card.edgesMat.color.setHex(0x00e5ff);
|
|
|
| document.getElementById('detail-id').textContent = `Document #${card.doc.id}`;
|
| document.getElementById('detail-id').style.cssText = 'font-size:14px; font-weight:600; color:#00e5ff; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.05em;';
|
|
|
| const scoreEl = document.getElementById('detail-score');
|
| if (card.doc._lastScore !== undefined) {
|
| scoreEl.textContent = `Similarity: ${card.doc._lastScore.toFixed(3)}`;
|
| scoreEl.style.cssText = 'font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:16px;';
|
| } else {
|
| scoreEl.textContent = '';
|
| }
|
|
|
| document.getElementById('detail-text').textContent = card.doc.text;
|
| document.getElementById('detail-text').style.cssText = 'font-size:15px; line-height:1.7; color:rgba(255,255,255,0.85);';
|
|
|
| detailPanel.style.opacity = '1';
|
| detailPanel.style.pointerEvents = 'auto';
|
|
|
|
|
| targetRotation = -card.angle;
|
| }
|
|
|
| function closeDetail() {
|
| detailPanel.style.opacity = '0';
|
| detailPanel.style.pointerEvents = 'none';
|
| if (selectedCard) {
|
| selectedCard.edgesMat.color.setHex(0x888888);
|
| selectedCard = null;
|
| }
|
| }
|
|
|
| document.addEventListener('mousedown', (e) => {
|
| isDragging = true;
|
| dragDistance = 0;
|
| previousMouseX = e.clientX;
|
| mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
| mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
| });
|
|
|
| document.addEventListener('mousemove', (e) => {
|
| if (isDragging) {
|
| const delta = e.clientX - previousMouseX;
|
| dragDistance += Math.abs(delta);
|
| targetRotation += delta * 0.005;
|
| previousMouseX = e.clientX;
|
| } else {
|
|
|
| targetRotation += 0.001;
|
| }
|
| });
|
|
|
| document.addEventListener('mouseup', (e) => {
|
|
|
| if (dragDistance < 5) {
|
| mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
| mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
| raycaster.setFromCamera(mouse, camera);
|
| const meshes = cards.map(c => c.cardMesh);
|
| const hits = raycaster.intersectObjects(meshes);
|
| if (hits.length > 0) {
|
| const hitCard = cards.find(c => c.cardMesh === hits[0].object);
|
| if (hitCard) showDetail(hitCard);
|
| } else {
|
| closeDetail();
|
| }
|
| }
|
| isDragging = false;
|
| });
|
|
|
| document.addEventListener('wheel', (e) => {
|
| targetRotation += e.deltaY * 0.002;
|
| });
|
|
|
| function animate() {
|
| requestAnimationFrame(animate);
|
|
|
|
|
|
|
| carousel.rotation.y += (targetRotation - carousel.rotation.y) * 0.1;
|
|
|
| renderer.render(scene, camera);
|
| }
|
| animate();
|
|
|
| window.addEventListener('resize', () => {
|
| camera.aspect = window.innerWidth / window.innerHeight;
|
| camera.updateProjectionMatrix();
|
| renderer.setSize(window.innerWidth, window.innerHeight);
|
| });
|
|
|
|
|
|
|
|
|
| let embedder = null;
|
| let docEmbeddings = null;
|
|
|
| async function cosineSimilarity(a, b) {
|
| let dot = 0, na = 0, nb = 0;
|
| for (let i = 0; i < a.length; i++) {
|
| dot += a[i] * b[i];
|
| na += a[i] * a[i];
|
| nb += b[i] * b[i];
|
| }
|
| return dot / (Math.sqrt(na) * Math.sqrt(nb));
|
| }
|
|
|
| async function loadModel() {
|
| const statusText = document.getElementById('status-text');
|
| const loader = document.getElementById('loader');
|
|
|
| try {
|
| embedder = await pipeline(
|
| 'feature-extraction',
|
| 'Xenova/all-MiniLM-L6-v2',
|
| {
|
| progress_callback: (p) => {
|
| if (p.status === 'progress') {
|
| statusText.textContent = `Downloading model... ${Math.round(p.progress || 0)}%`;
|
| }
|
| }
|
| }
|
| );
|
|
|
| statusText.textContent = 'Formatting documents...';
|
|
|
| const allTexts = DOCUMENTS.map(d => d.text);
|
| const output = await embedder(allTexts, { pooling: 'mean', normalize: true });
|
| docEmbeddings = output.tolist();
|
|
|
|
|
| document.getElementById('search-input').disabled = false;
|
| document.getElementById('top-match').textContent = `${DOCUMENTS.length} ready`;
|
| loader.classList.add('hidden');
|
|
|
| } catch (err) {
|
| statusText.textContent = 'Error: ' + err.message;
|
| }
|
| }
|
|
|
| async function doSearch() {
|
| if (!embedder || !docEmbeddings) return;
|
|
|
| const query = document.getElementById('search-input').value.trim();
|
| if (!query) {
|
| updateAllCardTextures(null);
|
| document.getElementById('top-match').innerHTML = `${DOCUMENTS.length} ready`;
|
| return;
|
| }
|
|
|
| const qOutput = await embedder([query], { pooling: 'mean', normalize: true });
|
| const qEmb = qOutput.tolist()[0];
|
|
|
| const scoresMap = {};
|
| let maxScore = -1;
|
| let bestDoc = null;
|
|
|
| for (let i = 0; i < DOCUMENTS.length; i++) {
|
| const score = await cosineSimilarity(qEmb, docEmbeddings[i]);
|
| scoresMap[DOCUMENTS[i].id] = score;
|
|
|
| if (score > maxScore) {
|
| maxScore = score;
|
| bestDoc = DOCUMENTS[i];
|
| }
|
| }
|
|
|
|
|
| updateAllCardTextures(scoresMap);
|
|
|
|
|
| if (bestDoc) {
|
| document.getElementById('top-match').innerHTML = `Top match: Document #${bestDoc.id} (${maxScore.toFixed(3)})`;
|
|
|
|
|
| const targetCard = cards.find(c => c.doc.id === bestDoc.id);
|
| if (targetCard) {
|
|
|
|
|
| targetRotation = -targetCard.angle;
|
| }
|
| }
|
| }
|
|
|
| const searchInput = document.getElementById('search-input');
|
| let timeout;
|
| searchInput.addEventListener('input', () => {
|
| clearTimeout(timeout);
|
| timeout = setTimeout(doSearch, 300);
|
| });
|
|
|
| loadModel();
|
| </script>
|
| </body>
|
|
|
| </html> |
