changes for readme file and UI changes

README.md

@@ -49,35 +49,39 @@ Visualize and compare **5 chunking strategies** side-by-side:
 ## 🏗️ Architecture
 
 ```mermaid
-graph TB
-    subgraph Frontend ["Frontend (Vanilla HTML/CSS/JS)"]
-        UI[index.html] --> JS[app.js]
-        UI --> CSS[styles.css]
-        JS -->|Canvas 2D API| Canvas[Vector Space Renderer]
-        JS -->|DOM Manipulation| XRay[Document X-Ray Viewer]
-    end
-
-    subgraph Backend ["Backend (FastAPI + Python)"]
-        API[FastAPI Server] --> ChunkRouter["/api/chunk"]
-        API --> RetrievalRouter["/api/retrieve"]
-
-        ChunkRouter --> ChunkEngine[Chunking Engine]
-        ChunkRouter --> EmbedEngine[Embedding Engine]
-        ChunkRouter --> Reducer[UMAP Reducer]
-        ChunkRouter --> VStore[Vector Store]
-
-        RetrievalRouter --> EmbedEngine
-        RetrievalRouter --> VStore
-
-        ChunkEngine -->|5 Strategies| Splitters[LangChain + NLTK Splitters]
-        EmbedEngine -->|HTTP| Ollama[Ollama API :11434]
-        Reducer --> UMAP[umap-learn]
-        VStore --> ChromaDB[(ChromaDB)]
-    end
-
-    JS -->|fetch /api/chunk| ChunkRouter
-    JS -->|fetch /api/retrieve| RetrievalRouter
-    API -->|Static Files| UI
+flowchart LR
+
+    %% Ingestion Flow
+    DOC["📄 Input Document"] --> CHUNK["✂️ Chunking Engine<br/>5 Chunking Strategies"]
+
+    CHUNK --> SPLIT["📝 LangChain + NLTK<br/>Text Splitters"]
+
+    SPLIT --> EMBED["🧠 Embedding Engine<br/>Generate Semantic Vectors"]
+
+    EMBED --> OLLAMA["🤖 Ollama API<br/>Embedding Model"]
+
+    EMBED --> UMAP["📉 UMAP<br/>2D Vector Projection"]
+
+    UMAP --> DB["🗄️ ChromaDB<br/>Vector Storage"]
+
+    %% Retrieval Flow
+    USER["👤 User Query"] --> QEMBED["🧠 Query Embedding"]
+
+    QEMBED --> OLLAMA
+
+    QEMBED --> SEARCH["🔍 Similarity Search"]
+
+    SEARCH --> DB
+
+    DB --> RESULTS["📚 Relevant Chunks"]
+
+    %% Visualization
+    RESULTS --> XRAY["🔬 Document X-Ray Viewer"]
+
+    UMAP --> VIS["📊 Vector Space Renderer"]
+
+    XRAY --> UI["🌐 Interactive Frontend"]
+    VIS --> UI
 ```
 
 ### Data Flow
@@ -279,13 +283,7 @@ Returns the list of available chunking strategies.
 | **Vector Database**          | ChromaDB (persistent)          | Cosine similarity search with HNSW index                |
 | **Package Manager**          | uv                             | Dependency management & virtual environments            |
 
-## 📝 License
-
-This project is for educational and personal use.
-
----
-
-## 🙏 Acknowledgements
+## Technologies
 
 - [Ollama](https://ollama.com/) — Local LLM inference
 - [ChromaDB](https://www.trychroma.com/) — Open-source vector database

backend/engines/chunking.py

@@ -75,7 +75,7 @@ def construct_chunk_node(text, chunks, tokenizer):
 
         # 2. If exact find fails, try a clean stripped version
         if start == -1:
-            clean_anchor = chunk.strip()[:40]
+            clean_anchor = chunk.strip()
             if clean_anchor:
                 start = text.find(clean_anchor, current_position)
 

backend/storage/vector_store.py

@@ -11,7 +11,12 @@ class VectorStore:
 
     def get_collection(self, name: str):
         return self.client.get_or_create_collection(
-            name=name, metadata={"hnsw:space": "cosine"}
+            name=name,
+            metadata={
+                "hnsw:space": "cosine",
+                "hnsw:construction_ef": 100,
+                "hnsw:M": 16,
+            },
         )
 
     async def upsert(self, collection_name, ids, documents, embeddings, metadatas=None):

frontend/app.js

@@ -1071,9 +1071,6 @@ function showTooltip(chunk, x, y) {
     chunk.text.length > 80 ? chunk.text.slice(0, 80) + "..." : chunk.text;
   const coordsStr = `[${chunk.coords_2d[0].toFixed(2)}, ${chunk.coords_2d[1].toFixed(2)}]`;
 
-  tooltip.style.display = "block";
-  tooltip.style.left = `${x + 15}px`;
-  tooltip.style.top = `${y + 15}px`;
   tooltip.innerHTML = `
     <div class="vector-tooltip-title">
       <span>${chunk.id}</span>
@@ -1084,6 +1081,21 @@ function showTooltip(chunk, x, y) {
     </div>
     <div class="vector-tooltip-text">${escapeHtml(snippet)}</div>
   `;
+  tooltip.style.display = "block";
+
+  let left = x + 15;
+  let top = y + 15;
+  const canvasRect = dom.vectorCanvas.getBoundingClientRect();
+
+  if (left + tooltip.offsetWidth > canvasRect.width) {
+    left = x - tooltip.offsetWidth - 15;
+  }
+  if (top + tooltip.offsetHeight > canvasRect.height) {
+    top = y - tooltip.offsetHeight - 15;
+  }
+
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${top}px`;
 }
 
 function hideTooltip() {