The latest articles on DEV Community by Venkatesh Jonnagadla (@vjonnagadla). https://dev.to/vjonnagadla https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3596870%2F00e418d4-5867-46a9-9ab9-cacc006d37ea.webp https://dev.to/vjonnagadla en Venkatesh Jonnagadla Thu, 29 Oct 2026 17:15:55 +0000 https://dev.to/vjonnagadla/rag-application-1jf https://dev.to/vjonnagadla/rag-application-1jf <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fohgr684bz4u1i9w6ja2d.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fohgr684bz4u1i9w6ja2d.png" alt=" " width="800" height="372"></a><br> This is the final output -</p> <p>We need to use the python 3.12.0 version to acheive this as there are dependent libraries.</p> <p>Your folder structure should look like -<br> WorkspaceFolder/<br> ├── chroma_db/<br> ├── uploads/<br> ├── templates/<br> │ └── index.html<br> └── requirements.txt<br> ├── app.py</p> <h2> Frontend </h2> <p>HTML5<br> CSS3<br> Bootstrap 5<br> JQuery<br> AJAX</p> <h2> Backend </h2> <p>Python 3.12.0<br> Flask </p> <p>index.html looks like below -<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!doctype html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">/&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">/&gt;</span> <span class="nt">&lt;title&gt;</span>Venkatesh RAG Chatbot<span class="nt">&lt;/title&gt;</span> <span class="c">&lt;!-- Markdown + syntax highlighting --&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/marked/marked.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdn.jsdelivr.net/npm/highlight.js@11/styles/atom-one-dark.min.css"</span><span class="nt">/&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/highlight.js@11/lib/common.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nd">:root</span><span class="p">{</span> <span class="py">--bg</span><span class="p">:</span><span class="nx">#0e1117</span><span class="p">;</span> <span class="py">--panel</span><span class="p">:</span><span class="nx">#161b22</span><span class="p">;</span> <span class="py">--panel2</span><span class="p">:</span><span class="nx">#1c2330</span><span class="p">;</span> <span class="py">--border</span><span class="p">:</span><span class="nx">#2a3140</span><span class="p">;</span> <span class="py">--text</span><span class="p">:</span><span class="nx">#e6edf3</span><span class="p">;</span> <span class="py">--muted</span><span class="p">:</span><span class="nx">#8b949e</span><span class="p">;</span> <span class="py">--accent</span><span class="p">:</span><span class="nx">#4f8cff</span><span class="p">;</span> <span class="py">--danger</span><span class="p">:</span><span class="nx">#ff5c5c</span><span class="p">;</span> <span class="py">--ok</span><span class="p">:</span><span class="nx">#3fb950</span><span class="p">;</span> <span class="p">}</span> <span class="o">*</span><span class="p">{</span><span class="nl">box-sizing</span><span class="p">:</span><span class="nb">border-box</span><span class="p">}</span> <span class="nt">html</span><span class="o">,</span><span class="nt">body</span><span class="p">{</span><span class="nl">height</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">font-family</span><span class="p">:</span><span class="n">system-ui</span><span class="p">,</span><span class="n">Segoe</span> <span class="n">UI</span><span class="p">,</span><span class="n">Roboto</span><span class="p">,</span><span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--bg</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--text</span><span class="p">)}</span> <span class="nf">#app</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">height</span><span class="p">:</span><span class="m">100vh</span><span class="p">}</span> <span class="c">/* ---------- Sidebar ---------- */</span> <span class="nf">#sidebar</span><span class="p">{</span><span class="nl">width</span><span class="p">:</span><span class="m">300px</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--panel</span><span class="p">);</span><span class="nl">border-right</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">);</span> <span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">flex-direction</span><span class="p">:</span><span class="nb">column</span><span class="p">;</span><span class="nl">transition</span><span class="p">:</span><span class="n">width</span> <span class="m">.2s</span><span class="p">}</span> <span class="nf">#sidebar</span><span class="nc">.collapsed</span><span class="p">{</span><span class="nl">width</span><span class="p">:</span><span class="m">44px</span><span class="p">}</span> <span class="nf">#sidebar</span><span class="nc">.collapsed</span> <span class="nc">.side-content</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span> <span class="nc">.side-head</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span><span class="nl">justify-content</span><span class="p">:</span><span class="nb">space-between</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">border-bottom</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">)}</span> <span class="nc">.side-head</span> <span class="nt">h3</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">14px</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--muted</span><span class="p">)}</span> <span class="nc">.side-content</span><span class="p">{</span><span class="nl">padding</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">overflow</span><span class="p">:</span><span class="nb">auto</span><span class="p">;</span><span class="nl">flex</span><span class="p">:</span><span class="m">1</span><span class="p">;</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">flex-direction</span><span class="p">:</span><span class="nb">column</span><span class="p">;</span><span class="nl">gap</span><span class="p">:</span><span class="m">10px</span><span class="p">}</span> <span class="nc">.btn</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--panel2</span><span class="p">);</span><span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--text</span><span class="p">);</span> <span class="nl">padding</span><span class="p">:</span><span class="m">8px</span> <span class="m">10px</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span><span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">13px</span><span class="p">}</span> <span class="nc">.btn</span><span class="nd">:hover</span><span class="p">{</span><span class="nl">border-color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent</span><span class="p">)}</span> <span class="nc">.btn.primary</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent</span><span class="p">);</span><span class="nl">border-color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="nx">#fff</span><span class="p">}</span> <span class="nc">.btn.danger</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--danger</span><span class="p">);</span><span class="nl">border-color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--danger</span><span class="p">)}</span> <span class="nc">.path</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">11px</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--muted</span><span class="p">);</span><span class="nl">word-break</span><span class="p">:</span><span class="n">break-all</span><span class="p">;</span><span class="nl">min-height</span><span class="p">:</span><span class="m">14px</span><span class="p">}</span> <span class="nc">.row</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">gap</span><span class="p">:</span><span class="m">6px</span><span class="p">}</span> <span class="c">/* file list */</span> <span class="nf">#fileList</span><span class="p">{</span><span class="nl">list-style</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">flex-direction</span><span class="p">:</span><span class="nb">column</span><span class="p">;</span><span class="nl">gap</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span> <span class="nl">max-height</span><span class="p">:</span><span class="m">45vh</span><span class="p">;</span><span class="nl">overflow-y</span><span class="p">:</span><span class="nb">auto</span><span class="p">}</span> <span class="nf">#fileList</span> <span class="nt">li</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span><span class="nl">justify-content</span><span class="p">:</span><span class="nb">space-between</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--panel2</span><span class="p">);</span><span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">);</span> <span class="nl">border-radius</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">6px</span> <span class="m">8px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">12px</span><span class="p">}</span> <span class="nf">#fileList</span> <span class="nt">li</span> <span class="nt">span</span><span class="p">{</span><span class="nl">overflow</span><span class="p">:</span><span class="nb">hidden</span><span class="p">;</span><span class="nl">text-overflow</span><span class="p">:</span><span class="n">ellipsis</span><span class="p">;</span><span class="nl">white-space</span><span class="p">:</span><span class="nb">nowrap</span><span class="p">}</span> <span class="nc">.x</span><span class="p">{</span><span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--danger</span><span class="p">);</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">700</span><span class="p">;</span><span class="nl">margin-left</span><span class="p">:</span><span class="m">8px</span><span class="p">}</span> <span class="nf">#collapseBtn</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--muted</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">18px</span><span class="p">;</span><span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">}</span> <span class="c">/* ---------- Chat ---------- */</span> <span class="nf">#main</span><span class="p">{</span><span class="nl">flex</span><span class="p">:</span><span class="m">1</span><span class="p">;</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">flex-direction</span><span class="p">:</span><span class="nb">column</span><span class="p">}</span> <span class="nf">#header</span><span class="p">{</span><span class="nl">padding</span><span class="p">:</span><span class="m">14px</span> <span class="m">20px</span><span class="p">;</span><span class="nl">border-bottom</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">);</span> <span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span><span class="nl">gap</span><span class="p">:</span><span class="m">10px</span><span class="p">}</span> <span class="nf">#header</span> <span class="nt">h1</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">15px</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">}</span> <span class="nf">#chat</span><span class="p">{</span><span class="nl">flex</span><span class="p">:</span><span class="m">1</span><span class="p">;</span><span class="nl">overflow-y</span><span class="p">:</span><span class="nb">auto</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">24px</span><span class="p">;</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">flex-direction</span><span class="p">:</span><span class="nb">column</span><span class="p">;</span><span class="nl">gap</span><span class="p">:</span><span class="m">16px</span><span class="p">}</span> <span class="nc">.msg</span><span class="p">{</span><span class="nl">max-width</span><span class="p">:</span><span class="m">820px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">12px</span> <span class="m">16px</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">line-height</span><span class="p">:</span><span class="m">1.55</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span><span class="m">14px</span><span class="p">;</span><span class="nl">white-space</span><span class="p">:</span><span class="nb">normal</span><span class="p">}</span> <span class="nc">.msg.user</span><span class="p">{</span><span class="nl">align-self</span><span class="p">:</span><span class="nb">flex-end</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="nx">#23324a</span><span class="p">}</span> <span class="nc">.msg.bot</span><span class="p">{</span><span class="nl">align-self</span><span class="p">:</span><span class="nb">flex-start</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--panel</span><span class="p">);</span><span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">)}</span> <span class="nc">.msg</span> <span class="nt">code</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="nx">#000</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nx">#e6edf3</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">1px</span> <span class="m">4px</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">4px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">12px</span><span class="p">}</span> <span class="nc">.msg</span> <span class="nt">pre</span><span class="p">{</span><span class="nl">position</span><span class="p">:</span><span class="nb">relative</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="nx">#000</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">overflow-x</span><span class="p">:</span><span class="nb">auto</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">)}</span> <span class="nc">.msg</span> <span class="nt">pre</span> <span class="nt">code</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">0</span><span class="p">}</span> <span class="nc">.copy-code</span><span class="p">{</span><span class="nl">position</span><span class="p">:</span><span class="nb">absolute</span><span class="p">;</span><span class="nl">top</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span><span class="nl">right</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">11px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">2px</span> <span class="m">6px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span><span class="nx">#222</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nx">#ddd</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#444</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">4px</span><span class="p">;</span><span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">}</span> <span class="nc">.copy-code</span><span class="nd">:hover</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="nx">#333</span><span class="p">}</span> <span class="nc">.sources</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">11px</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--muted</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">8px</span><span class="p">}</span> <span class="nc">.meta</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">11px</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--muted</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">4px</span><span class="p">}</span> <span class="c">/* input bar */</span> <span class="nf">#inputBar</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span><span class="nl">gap</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">14px</span> <span class="m">20px</span><span class="p">;</span><span class="nl">border-top</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">);</span> <span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--panel</span><span class="p">)}</span> <span class="nf">#query</span><span class="p">{</span><span class="nl">flex</span><span class="p">:</span><span class="m">1</span><span class="p">;</span><span class="nl">resize</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--panel2</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--text</span><span class="p">);</span> <span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="l">--border</span><span class="p">);</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">14px</span><span class="p">;</span> <span class="nl">min-height</span><span class="p">:</span><span class="m">52px</span><span class="p">;</span><span class="nl">max-height</span><span class="p">:</span><span class="m">150px</span><span class="p">}</span> <span class="nf">#query</span><span class="nd">:focus</span><span class="p">{</span><span class="nl">outline</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">border-color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent</span><span class="p">)}</span> <span class="nf">#send</span><span class="p">{</span><span class="nl">width</span><span class="p">:</span><span class="m">52px</span><span class="p">;</span><span class="nl">height</span><span class="p">:</span><span class="m">52px</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">50%</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--accent</span><span class="p">);</span><span class="nl">border</span><span class="p">:</span><span class="m">0</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="nx">#fff</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">22px</span><span class="p">;</span><span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">}</span> <span class="nf">#send</span><span class="nd">:disabled</span><span class="p">{</span><span class="nl">opacity</span><span class="p">:</span><span class="m">.5</span><span class="p">;</span><span class="nl">cursor</span><span class="p">:</span><span class="n">not-allowed</span><span class="p">}</span> <span class="nc">.hint</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">11px</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--muted</span><span class="p">);</span><span class="nl">padding</span><span class="p">:</span><span class="m">0</span> <span class="m">22px</span> <span class="m">10px</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="nf">var</span><span class="p">(</span><span class="l">--panel</span><span class="p">)}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"app"</span><span class="nt">&gt;</span> <span class="c">&lt;!-- ================= SIDEBAR ================= --&gt;</span> <span class="nt">&lt;aside</span> <span class="na">id=</span><span class="s">"sidebar"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-head"</span><span class="nt">&gt;</span> <span class="nt">&lt;h3&gt;</span>Knowledge Base<span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"collapseBtn"</span> <span class="na">title=</span><span class="s">"Toggle"</span><span class="nt">&gt;</span>≡<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-content"</span><span class="nt">&gt;</span> <span class="c">&lt;!-- Choose Folder --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">id=</span><span class="s">"chooseFolder"</span><span class="nt">&gt;</span>Choose Folder<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"path"</span> <span class="na">id=</span><span class="s">"folderPath"</span><span class="nt">&gt;</span>No folder selected<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"folderInput"</span> <span class="na">webkitdirectory</span> <span class="na">directory</span> <span class="na">multiple</span> <span class="na">hidden</span><span class="nt">/&gt;</span> <span class="c">&lt;!-- Choose File --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">id=</span><span class="s">"chooseFile"</span><span class="nt">&gt;</span>Choose File<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"path"</span> <span class="na">id=</span><span class="s">"filePath"</span><span class="nt">&gt;</span>No file selected<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"fileInput"</span> <span class="na">accept=</span><span class="s">".pdf,.docx,.xlsx,.pptx"</span> <span class="na">multiple</span> <span class="na">hidden</span><span class="nt">/&gt;</span> <span class="c">&lt;!-- Upload --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn primary"</span> <span class="na">id=</span><span class="s">"uploadBtn"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Upload<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;hr</span> <span class="na">style=</span><span class="s">"border-color:var(--border);width:100%"</span><span class="nt">/&gt;</span> <span class="c">&lt;!-- File list --&gt;</span> <span class="nt">&lt;h4</span> <span class="na">style=</span><span class="s">"font-size:12px;color:var(--muted);margin:0"</span><span class="nt">&gt;</span>Uploaded Files<span class="nt">&lt;/h4&gt;</span> <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"fileList"</span><span class="nt">&gt;&lt;/ul&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/aside&gt;</span> <span class="c">&lt;!-- ================= MAIN ================= --&gt;</span> <span class="nt">&lt;main</span> <span class="na">id=</span><span class="s">"main"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"header"</span><span class="nt">&gt;</span> <span class="nt">&lt;h1&gt;</span>Venkatesh RAG Chatbot<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"meta"</span> <span class="na">id=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chat"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"msg bot"</span><span class="nt">&gt;</span> 👋 Hi! Upload PDFs, Word, Excel or PowerPoint files on the left, then ask me anything about them. <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"inputBar"</span><span class="nt">&gt;</span> <span class="nt">&lt;textarea</span> <span class="na">id=</span><span class="s">"query"</span> <span class="na">placeholder=</span><span class="s">"Ask something about your documents…"</span><span class="nt">&gt;&lt;/textarea&gt;</span> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"send"</span> <span class="na">title=</span><span class="s">"Send"</span><span class="nt">&gt;</span><span class="ni">&amp;gt;</span><span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hint"</span><span class="nt">&gt;</span>Shift+Enter for newline · Enter to send<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/main&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="cm">/* ======================= STATE ======================= */</span> <span class="kd">let</span> <span class="nx">pendingFiles</span> <span class="o">=</span> <span class="p">[];</span> <span class="kd">const</span> <span class="nx">$</span> <span class="o">=</span> <span class="nx">id</span> <span class="o">=&gt;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span> <span class="cm">/* ======================= SIDEBAR COLLAPSE ======================= */</span> <span class="cm">/* $('collapseBtn').onclick = () =&gt; $('sidebar').classList.toggle('collapsed'); */</span> <span class="cm">/* ======================= CHOOSE FOLDER ======================= */</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">chooseFolder</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">folderInput</span><span class="dl">'</span><span class="p">).</span><span class="nf">click</span><span class="p">();</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">folderInput</span><span class="dl">'</span><span class="p">).</span><span class="nx">onchange</span> <span class="o">=</span> <span class="nx">e</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">files</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">files</span><span class="p">].</span><span class="nf">filter</span><span class="p">(</span><span class="nx">f</span> <span class="o">=&gt;</span> <span class="sr">/</span><span class="se">\.(</span><span class="sr">pdf|docx|xlsx|pptx</span><span class="se">)</span><span class="sr">$/i</span><span class="p">.</span><span class="nf">test</span><span class="p">(</span><span class="nx">f</span><span class="p">.</span><span class="nx">name</span><span class="p">));</span> <span class="nx">pendingFiles</span> <span class="o">=</span> <span class="nx">files</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">folderPath</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">files</span><span class="p">.</span><span class="nx">length</span> <span class="p">?</span> <span class="s2">`</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">webkitRelativePath</span><span class="p">.</span><span class="nf">split</span><span class="p">(</span><span class="dl">'</span><span class="s1">/</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]}</span><span class="s2">/ (</span><span class="p">${</span><span class="nx">files</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span><span class="s2"> supported files)`</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">No supported files in folder</span><span class="dl">'</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">filePath</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">No file selected</span><span class="dl">'</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">uploadBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="nx">files</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">;</span> <span class="p">};</span> <span class="cm">/* ======================= CHOOSE FILE ======================= */</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">chooseFile</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">fileInput</span><span class="dl">'</span><span class="p">).</span><span class="nf">click</span><span class="p">();</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">fileInput</span><span class="dl">'</span><span class="p">).</span><span class="nx">onchange</span> <span class="o">=</span> <span class="nx">e</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">files</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">files</span><span class="p">];</span> <span class="nx">pendingFiles</span> <span class="o">=</span> <span class="nx">files</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">filePath</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">files</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">1</span> <span class="p">?</span> <span class="nx">files</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="p">:</span> <span class="s2">`</span><span class="p">${</span><span class="nx">files</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span><span class="s2"> files selected`</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">folderPath</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">No folder selected</span><span class="dl">'</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">uploadBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="nx">files</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">;</span> <span class="p">};</span> <span class="cm">/* ======================= UPLOAD ======================= */</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">uploadBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="k">async </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">pendingFiles</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">fd</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">FormData</span><span class="p">();</span> <span class="nx">pendingFiles</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">f</span> <span class="o">=&gt;</span> <span class="nx">fd</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="dl">'</span><span class="s1">files</span><span class="dl">'</span><span class="p">,</span> <span class="nx">f</span><span class="p">,</span> <span class="nx">f</span><span class="p">.</span><span class="nx">name</span><span class="p">));</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">uploadBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">uploadBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Uploading…</span><span class="dl">'</span><span class="p">;</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">r</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">/api/upload</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">method</span><span class="p">:</span><span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> <span class="na">body</span><span class="p">:</span><span class="nx">fd</span><span class="p">});</span> <span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">r</span><span class="p">.</span><span class="nf">json</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">error</span><span class="p">)</span> <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span> <span class="nf">addBotMsg</span><span class="p">(</span><span class="s2">`✅ Uploaded. **</span><span class="p">${</span><span class="nx">data</span><span class="p">.</span><span class="nx">total_chunks</span><span class="p">}</span><span class="s2">** chunks embedded.`</span><span class="p">);</span> <span class="k">await</span> <span class="nf">refreshFileList</span><span class="p">();</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nf">addBotMsg</span><span class="p">(</span><span class="s2">`❌ Upload failed: </span><span class="se">\`</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="se">\`</span><span class="s2">`</span><span class="p">);</span> <span class="p">}</span> <span class="k">finally</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">uploadBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">uploadBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Upload</span><span class="dl">'</span><span class="p">;</span> <span class="nx">pendingFiles</span> <span class="o">=</span> <span class="p">[];</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">folderPath</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">No folder selected</span><span class="dl">'</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">filePath</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">No file selected</span><span class="dl">'</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">folderInput</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">fileInput</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="p">}</span> <span class="p">};</span> <span class="cm">/* ======================= FILE LIST ======================= */</span> <span class="k">async</span> <span class="kd">function</span> <span class="nf">refreshFileList</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">r</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">/api/files</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="p">{</span><span class="nx">files</span><span class="p">}</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">r</span><span class="p">.</span><span class="nf">json</span><span class="p">();</span> <span class="kd">const</span> <span class="nx">ul</span> <span class="o">=</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">fileList</span><span class="dl">'</span><span class="p">);</span> <span class="nx">ul</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">files</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> <span class="nx">ul</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">&lt;li style="justify-content:center;color:var(--muted)"&gt;No files yet&lt;/li&gt;</span><span class="dl">'</span><span class="p">;</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span> <span class="nx">files</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">name</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">li</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">li</span><span class="dl">'</span><span class="p">);</span> <span class="nx">li</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`&lt;span title="</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">"&gt;</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">&lt;/span&gt; &lt;span class="x" title="Delete"&gt;✕&lt;/span&gt;`</span><span class="p">;</span> <span class="nx">li</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.x</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nf">deleteFile</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="nx">ul</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span> <span class="p">});</span> <span class="p">}</span> <span class="k">async</span> <span class="kd">function</span> <span class="nf">deleteFile</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nf">confirm</span><span class="p">(</span><span class="s2">`Delete "</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">" and its embeddings?`</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">/api/files</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">method</span><span class="p">:</span><span class="dl">'</span><span class="s1">DELETE</span><span class="dl">'</span><span class="p">,</span> <span class="na">headers</span><span class="p">:{</span><span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span><span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span><span class="p">},</span> <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span><span class="nx">name</span><span class="p">})</span> <span class="p">});</span> <span class="nf">refreshFileList</span><span class="p">();</span> <span class="nf">addBotMsg</span><span class="p">(</span><span class="s2">`🗑️ Deleted **</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">** from the vector database.`</span><span class="p">);</span> <span class="p">}</span> <span class="cm">/* ======================= CHAT ======================= */</span> <span class="kd">function</span> <span class="nf">addUserMsg</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">d</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span> <span class="nx">d</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">msg user</span><span class="dl">'</span><span class="p">;</span> <span class="nx">d</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">chat</span><span class="dl">'</span><span class="p">).</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">d</span><span class="p">);</span> <span class="nf">scrollDown</span><span class="p">();</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">addBotMsg</span><span class="p">(</span><span class="nx">markdown</span><span class="p">,</span> <span class="nx">sources</span> <span class="o">=</span> <span class="p">[])</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">d</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span> <span class="nx">d</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">msg bot</span><span class="dl">'</span><span class="p">;</span> <span class="nx">d</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">marked</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="nx">markdown</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">sources</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">s</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span> <span class="nx">s</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">sources</span><span class="dl">'</span><span class="p">;</span> <span class="nx">s</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Sources: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">sources</span> <span class="p">.</span><span class="nf">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=&gt;</span> <span class="s2">`</span><span class="p">${</span><span class="nx">x</span><span class="p">.</span><span class="nx">source</span><span class="p">}</span><span class="s2"> (</span><span class="p">${</span><span class="nx">x</span><span class="p">.</span><span class="nx">score</span><span class="p">}</span><span class="s2">)`</span><span class="p">).</span><span class="nf">join</span><span class="p">(</span><span class="dl">'</span><span class="s1">, </span><span class="dl">'</span><span class="p">);</span> <span class="nx">d</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">s</span><span class="p">);</span> <span class="p">}</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">chat</span><span class="dl">'</span><span class="p">).</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">d</span><span class="p">);</span> <span class="nf">enhanceCodeBlocks</span><span class="p">(</span><span class="nx">d</span><span class="p">);</span> <span class="nf">scrollDown</span><span class="p">();</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">enhanceCodeBlocks</span><span class="p">(</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span> <span class="nx">root</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">pre</span><span class="dl">'</span><span class="p">).</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">pre</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">hljs</span><span class="p">.</span><span class="nf">highlightElement</span><span class="p">(</span><span class="nx">pre</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">code</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">pre</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">btn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">button</span><span class="dl">'</span><span class="p">);</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">copy-code</span><span class="dl">'</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Copy</span><span class="dl">'</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">clipboard</span><span class="p">.</span><span class="nf">writeText</span><span class="p">(</span><span class="nx">pre</span><span class="p">.</span><span class="nx">innerText</span><span class="p">).</span><span class="nf">then</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Copied!</span><span class="dl">'</span><span class="p">;</span> <span class="nf">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Copy</span><span class="dl">'</span><span class="p">,</span> <span class="mi">1200</span><span class="p">);</span> <span class="p">});</span> <span class="p">};</span> <span class="nx">pre</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">btn</span><span class="p">);</span> <span class="p">});</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">scrollDown</span><span class="p">()</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">chat</span><span class="dl">'</span><span class="p">).</span><span class="nx">scrollTop</span> <span class="o">=</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">chat</span><span class="dl">'</span><span class="p">).</span><span class="nx">scrollHeight</span><span class="p">;</span> <span class="p">}</span> <span class="k">async</span> <span class="kd">function</span> <span class="nf">sendQuery</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">q</span> <span class="o">=</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">query</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">.</span><span class="nf">trim</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">q</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="nf">addUserMsg</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">query</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">send</span><span class="dl">'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">status</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">thinking…</span><span class="dl">'</span><span class="p">;</span> <span class="c1">// typing indicator</span> <span class="kd">const</span> <span class="nx">typing</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span> <span class="nx">typing</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">msg bot</span><span class="dl">'</span><span class="p">;</span> <span class="nx">typing</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">AI is analyzing...</span><span class="dl">'</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">chat</span><span class="dl">'</span><span class="p">).</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">typing</span><span class="p">);</span> <span class="nf">scrollDown</span><span class="p">();</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">r</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">/api/chat</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">method</span><span class="p">:</span><span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> <span class="na">headers</span><span class="p">:{</span><span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span><span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span><span class="p">},</span> <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span><span class="na">query</span><span class="p">:</span><span class="nx">q</span><span class="p">})</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">r</span><span class="p">.</span><span class="nf">json</span><span class="p">();</span> <span class="nx">typing</span><span class="p">.</span><span class="nf">remove</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">error</span><span class="p">)</span> <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span> <span class="nf">addBotMsg</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">answer</span><span class="p">,</span> <span class="nx">data</span><span class="p">.</span><span class="nx">sources</span> <span class="o">||</span> <span class="p">[]);</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">typing</span><span class="p">.</span><span class="nf">remove</span><span class="p">();</span> <span class="nf">addBotMsg</span><span class="p">(</span><span class="s2">`❌ </span><span class="se">\`</span><span class="p">${</span><span class="nx">e</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="se">\`</span><span class="s2">`</span><span class="p">);</span> <span class="p">}</span> <span class="k">finally</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">send</span><span class="dl">'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">status</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">query</span><span class="dl">'</span><span class="p">).</span><span class="nf">focus</span><span class="p">();</span> <span class="p">}</span> <span class="p">}</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">send</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="nx">sendQuery</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">query</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">keydown</span><span class="dl">'</span><span class="p">,</span> <span class="nx">e</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">Enter</span><span class="dl">'</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">shiftKey</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span> <span class="nf">sendQuery</span><span class="p">();</span> <span class="p">}</span> <span class="p">});</span> <span class="cm">/* ======================= INIT ======================= */</span> <span class="nf">refreshFileList</span><span class="p">();</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <p>The Python file app.py which connects to the LLM, vector db looks like this -<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight python"><code><span class="kn">import</span> <span class="n">os</span> <span class="kn">import</span> <span class="n">re</span> <span class="kn">import</span> <span class="n">shutil</span> <span class="kn">import</span> <span class="n">uuid</span> <span class="kn">import</span> <span class="n">tempfile</span> <span class="kn">from</span> <span class="n">flask</span> <span class="kn">import</span> <span class="n">Flask</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="n">jsonify</span><span class="p">,</span> <span class="n">render_template</span> <span class="kn">from</span> <span class="n">flask_cors</span> <span class="kn">import</span> <span class="n">CORS</span> <span class="c1"># ----- Vector DB ----- </span><span class="kn">import</span> <span class="n">chromadb</span> <span class="kn">from</span> <span class="n">chromadb.config</span> <span class="kn">import</span> <span class="n">Settings</span> <span class="c1"># ----- Embeddings ----- </span><span class="kn">from</span> <span class="n">sentence_transformers</span> <span class="kn">import</span> <span class="n">SentenceTransformer</span> <span class="c1"># ----- Keyword search ----- </span><span class="kn">from</span> <span class="n">rank_bm25</span> <span class="kn">import</span> <span class="n">BM25Okapi</span> <span class="c1"># ----- File parsers ----- </span><span class="kn">from</span> <span class="n">pypdf</span> <span class="kn">import</span> <span class="n">PdfReader</span> <span class="kn">import</span> <span class="n">docx</span> <span class="kn">import</span> <span class="n">openpyxl</span> <span class="kn">from</span> <span class="n">pptx</span> <span class="kn">import</span> <span class="n">Presentation</span> <span class="c1"># ----- LLM ----- </span><span class="kn">import</span> <span class="n">google.generativeai</span> <span class="k">as</span> <span class="n">genai</span> <span class="c1"># ========================================================= # CONFIG # ========================================================= </span><span class="n">GEMINI_API_KEY</span> <span class="o">=</span> <span class="sh">"</span><span class="s">yourgoogleAPIKEY</span><span class="sh">"</span> <span class="c1"># hardcoded per spec </span><span class="n">MODEL_NAME</span> <span class="o">=</span> <span class="sh">"</span><span class="s">gemini-3.5-flash-lite</span><span class="sh">"</span> <span class="c1"># swap if unavailable </span><span class="n">EMBED_MODEL</span> <span class="o">=</span> <span class="sh">"</span><span class="s">all-MiniLM-L6-v2</span><span class="sh">"</span> <span class="n">COLLECTION</span> <span class="o">=</span> <span class="sh">"</span><span class="s">venkatesh_docs</span><span class="sh">"</span> <span class="n">UPLOAD_DIR</span> <span class="o">=</span> <span class="sh">"</span><span class="s">uploads</span><span class="sh">"</span> <span class="n">CHROMA_DIR</span> <span class="o">=</span> <span class="sh">"</span><span class="s">chroma_db</span><span class="sh">"</span> <span class="n">os</span><span class="p">.</span><span class="nf">makedirs</span><span class="p">(</span><span class="n">UPLOAD_DIR</span><span class="p">,</span> <span class="n">exist_ok</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> <span class="n">os</span><span class="p">.</span><span class="nf">makedirs</span><span class="p">(</span><span class="n">CHROMA_DIR</span><span class="p">,</span> <span class="n">exist_ok</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> <span class="n">genai</span><span class="p">.</span><span class="nf">configure</span><span class="p">(</span><span class="n">api_key</span><span class="o">=</span><span class="n">GEMINI_API_KEY</span><span class="p">)</span> <span class="n">llm</span> <span class="o">=</span> <span class="n">genai</span><span class="p">.</span><span class="nc">GenerativeModel</span><span class="p">(</span><span class="n">MODEL_NAME</span><span class="p">)</span> <span class="n">app</span> <span class="o">=</span> <span class="nc">Flask</span><span class="p">(</span><span class="n">__name__</span><span class="p">)</span> <span class="nc">CORS</span><span class="p">(</span><span class="n">app</span><span class="p">)</span> <span class="c1"># ========================================================= # CHROMA + EMBEDDER (loaded once) # ========================================================= </span><span class="n">chroma_client</span> <span class="o">=</span> <span class="n">chromadb</span><span class="p">.</span><span class="nc">PersistentClient</span><span class="p">(</span> <span class="n">path</span><span class="o">=</span><span class="n">CHROMA_DIR</span><span class="p">,</span> <span class="n">settings</span><span class="o">=</span><span class="nc">Settings</span><span class="p">(</span><span class="n">anonymized_telemetry</span><span class="o">=</span><span class="bp">False</span><span class="p">)</span> <span class="p">)</span> <span class="n">collection</span> <span class="o">=</span> <span class="n">chroma_client</span><span class="p">.</span><span class="nf">get_or_create_collection</span><span class="p">(</span> <span class="n">name</span><span class="o">=</span><span class="n">COLLECTION</span><span class="p">,</span> <span class="n">metadata</span><span class="o">=</span><span class="p">{</span><span class="sh">"</span><span class="s">hnsw:space</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">cosine</span><span class="sh">"</span><span class="p">}</span> <span class="p">)</span> <span class="n">embedder</span> <span class="o">=</span> <span class="nc">SentenceTransformer</span><span class="p">(</span><span class="n">EMBED_MODEL</span><span class="p">)</span> <span class="c1"># In-memory BM25 index rebuilt on demand </span><span class="n">_bm25</span> <span class="o">=</span> <span class="p">{</span><span class="sh">"</span><span class="s">index</span><span class="sh">"</span><span class="p">:</span> <span class="bp">None</span><span class="p">,</span> <span class="sh">"</span><span class="s">ids</span><span class="sh">"</span><span class="p">:</span> <span class="p">[],</span> <span class="sh">"</span><span class="s">docs</span><span class="sh">"</span><span class="p">:</span> <span class="p">[]}</span> <span class="k">def</span> <span class="nf">rebuild_bm25</span><span class="p">():</span> <span class="sh">"""</span><span class="s">Rebuild BM25 from everything currently in ChromaDB.</span><span class="sh">"""</span> <span class="n">data</span> <span class="o">=</span> <span class="n">collection</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="n">include</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">documents</span><span class="sh">"</span><span class="p">])</span> <span class="n">docs</span> <span class="o">=</span> <span class="n">data</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">documents</span><span class="sh">"</span><span class="p">)</span> <span class="ow">or</span> <span class="p">[]</span> <span class="n">ids</span> <span class="o">=</span> <span class="n">data</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">ids</span><span class="sh">"</span><span class="p">)</span> <span class="ow">or</span> <span class="p">[]</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">docs</span><span class="p">:</span> <span class="n">_bm25</span><span class="p">.</span><span class="nf">update</span><span class="p">(</span><span class="n">index</span><span class="o">=</span><span class="bp">None</span><span class="p">,</span> <span class="n">ids</span><span class="o">=</span><span class="p">[],</span> <span class="n">docs</span><span class="o">=</span><span class="p">[])</span> <span class="k">return</span> <span class="n">tokenized</span> <span class="o">=</span> <span class="p">[</span><span class="n">re</span><span class="p">.</span><span class="nf">findall</span><span class="p">(</span><span class="sa">r</span><span class="sh">"</span><span class="s">\w+</span><span class="sh">"</span><span class="p">,</span> <span class="n">d</span><span class="p">.</span><span class="nf">lower</span><span class="p">())</span> <span class="k">for</span> <span class="n">d</span> <span class="ow">in</span> <span class="n">docs</span><span class="p">]</span> <span class="n">_bm25</span><span class="p">.</span><span class="nf">update</span><span class="p">(</span><span class="n">index</span><span class="o">=</span><span class="nc">BM25Okapi</span><span class="p">(</span><span class="n">tokenized</span><span class="p">),</span> <span class="n">ids</span><span class="o">=</span><span class="n">ids</span><span class="p">,</span> <span class="n">docs</span><span class="o">=</span><span class="n">docs</span><span class="p">)</span> <span class="c1"># ========================================================= # FILE EXTRACTION # ========================================================= </span><span class="k">def</span> <span class="nf">chunk_text</span><span class="p">(</span><span class="n">text</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="mi">800</span><span class="p">,</span> <span class="n">overlap</span><span class="o">=</span><span class="mi">100</span><span class="p">):</span> <span class="n">text</span> <span class="o">=</span> <span class="n">re</span><span class="p">.</span><span class="nf">sub</span><span class="p">(</span><span class="sa">r</span><span class="sh">"</span><span class="s">\s+</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s"> </span><span class="sh">"</span><span class="p">,</span> <span class="n">text</span><span class="p">).</span><span class="nf">strip</span><span class="p">()</span> <span class="n">chunks</span><span class="p">,</span> <span class="n">i</span> <span class="o">=</span> <span class="p">[],</span> <span class="mi">0</span> <span class="k">while</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="nf">len</span><span class="p">(</span><span class="n">text</span><span class="p">):</span> <span class="n">chunks</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="n">text</span><span class="p">[</span><span class="n">i</span> <span class="p">:</span> <span class="n">i</span> <span class="o">+</span> <span class="n">size</span><span class="p">])</span> <span class="n">i</span> <span class="o">+=</span> <span class="n">size</span> <span class="o">-</span> <span class="n">overlap</span> <span class="k">return</span> <span class="p">[</span><span class="n">c</span> <span class="k">for</span> <span class="n">c</span> <span class="ow">in</span> <span class="n">chunks</span> <span class="k">if</span> <span class="n">c</span><span class="p">.</span><span class="nf">strip</span><span class="p">()]</span> <span class="k">def</span> <span class="nf">extract_pdf</span><span class="p">(</span><span class="n">path</span><span class="p">):</span> <span class="n">reader</span> <span class="o">=</span> <span class="nc">PdfReader</span><span class="p">(</span><span class="n">path</span><span class="p">)</span> <span class="k">return</span> <span class="sh">"</span><span class="se">\n</span><span class="sh">"</span><span class="p">.</span><span class="nf">join</span><span class="p">((</span><span class="n">p</span><span class="p">.</span><span class="nf">extract_text</span><span class="p">()</span> <span class="ow">or</span> <span class="sh">""</span><span class="p">)</span> <span class="k">for</span> <span class="n">p</span> <span class="ow">in</span> <span class="n">reader</span><span class="p">.</span><span class="n">pages</span><span class="p">)</span> <span class="k">def</span> <span class="nf">extract_docx</span><span class="p">(</span><span class="n">path</span><span class="p">):</span> <span class="n">d</span> <span class="o">=</span> <span class="n">docx</span><span class="p">.</span><span class="nc">Document</span><span class="p">(</span><span class="n">path</span><span class="p">)</span> <span class="n">parts</span> <span class="o">=</span> <span class="p">[</span><span class="n">p</span><span class="p">.</span><span class="n">text</span> <span class="k">for</span> <span class="n">p</span> <span class="ow">in</span> <span class="n">d</span><span class="p">.</span><span class="n">paragraphs</span><span class="p">]</span> <span class="k">for</span> <span class="n">t</span> <span class="ow">in</span> <span class="n">d</span><span class="p">.</span><span class="n">tables</span><span class="p">:</span> <span class="k">for</span> <span class="n">row</span> <span class="ow">in</span> <span class="n">t</span><span class="p">.</span><span class="n">rows</span><span class="p">:</span> <span class="n">parts</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="sh">"</span><span class="s"> | </span><span class="sh">"</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="n">c</span><span class="p">.</span><span class="n">text</span> <span class="k">for</span> <span class="n">c</span> <span class="ow">in</span> <span class="n">row</span><span class="p">.</span><span class="n">cells</span><span class="p">))</span> <span class="k">return</span> <span class="sh">"</span><span class="se">\n</span><span class="sh">"</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="n">parts</span><span class="p">)</span> <span class="k">def</span> <span class="nf">extract_xlsx</span><span class="p">(</span><span class="n">path</span><span class="p">):</span> <span class="n">wb</span> <span class="o">=</span> <span class="n">openpyxl</span><span class="p">.</span><span class="nf">load_workbook</span><span class="p">(</span><span class="n">path</span><span class="p">,</span> <span class="n">data_only</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> <span class="n">out</span> <span class="o">=</span> <span class="p">[]</span> <span class="k">for</span> <span class="n">ws</span> <span class="ow">in</span> <span class="n">wb</span><span class="p">.</span><span class="n">worksheets</span><span class="p">:</span> <span class="n">out</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">### Sheet: </span><span class="si">{</span><span class="n">ws</span><span class="p">.</span><span class="n">title</span><span class="si">}</span><span class="sh">"</span><span class="p">)</span> <span class="k">for</span> <span class="n">row</span> <span class="ow">in</span> <span class="n">ws</span><span class="p">.</span><span class="nf">iter_rows</span><span class="p">(</span><span class="n">values_only</span><span class="o">=</span><span class="bp">True</span><span class="p">):</span> <span class="n">out</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="sh">"</span><span class="s"> | </span><span class="sh">"</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="sh">""</span> <span class="k">if</span> <span class="n">v</span> <span class="ow">is</span> <span class="bp">None</span> <span class="k">else</span> <span class="nf">str</span><span class="p">(</span><span class="n">v</span><span class="p">)</span> <span class="k">for</span> <span class="n">v</span> <span class="ow">in</span> <span class="n">row</span><span class="p">))</span> <span class="k">return</span> <span class="sh">"</span><span class="se">\n</span><span class="sh">"</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="n">out</span><span class="p">)</span> <span class="k">def</span> <span class="nf">extract_pptx</span><span class="p">(</span><span class="n">path</span><span class="p">):</span> <span class="n">prs</span> <span class="o">=</span> <span class="nc">Presentation</span><span class="p">(</span><span class="n">path</span><span class="p">)</span> <span class="n">out</span> <span class="o">=</span> <span class="p">[]</span> <span class="k">for</span> <span class="n">i</span><span class="p">,</span> <span class="n">slide</span> <span class="ow">in</span> <span class="nf">enumerate</span><span class="p">(</span><span class="n">prs</span><span class="p">.</span><span class="n">slides</span><span class="p">,</span> <span class="mi">1</span><span class="p">):</span> <span class="n">out</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">### Slide </span><span class="si">{</span><span class="n">i</span><span class="si">}</span><span class="sh">"</span><span class="p">)</span> <span class="k">for</span> <span class="n">shape</span> <span class="ow">in</span> <span class="n">slide</span><span class="p">.</span><span class="n">shapes</span><span class="p">:</span> <span class="k">if</span> <span class="nf">hasattr</span><span class="p">(</span><span class="n">shape</span><span class="p">,</span> <span class="sh">"</span><span class="s">text</span><span class="sh">"</span><span class="p">)</span> <span class="ow">and</span> <span class="n">shape</span><span class="p">.</span><span class="n">text</span><span class="p">.</span><span class="nf">strip</span><span class="p">():</span> <span class="n">out</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span><span class="n">shape</span><span class="p">.</span><span class="n">text</span><span class="p">)</span> <span class="k">return</span> <span class="sh">"</span><span class="se">\n</span><span class="sh">"</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="n">out</span><span class="p">)</span> <span class="n">EXTRACTORS</span> <span class="o">=</span> <span class="p">{</span> <span class="sh">"</span><span class="s">.pdf</span><span class="sh">"</span><span class="p">:</span> <span class="n">extract_pdf</span><span class="p">,</span> <span class="sh">"</span><span class="s">.docx</span><span class="sh">"</span><span class="p">:</span> <span class="n">extract_docx</span><span class="p">,</span> <span class="sh">"</span><span class="s">.xlsx</span><span class="sh">"</span><span class="p">:</span> <span class="n">extract_xlsx</span><span class="p">,</span> <span class="sh">"</span><span class="s">.pptx</span><span class="sh">"</span><span class="p">:</span> <span class="n">extract_pptx</span><span class="p">,</span> <span class="p">}</span> <span class="k">def</span> <span class="nf">ingest_file</span><span class="p">(</span><span class="n">filepath</span><span class="p">,</span> <span class="n">original_name</span><span class="p">):</span> <span class="n">ext</span> <span class="o">=</span> <span class="n">os</span><span class="p">.</span><span class="n">path</span><span class="p">.</span><span class="nf">splitext</span><span class="p">(</span><span class="n">filepath</span><span class="p">)[</span><span class="mi">1</span><span class="p">].</span><span class="nf">lower</span><span class="p">()</span> <span class="k">if</span> <span class="n">ext</span> <span class="ow">not</span> <span class="ow">in</span> <span class="n">EXTRACTORS</span><span class="p">:</span> <span class="k">return</span> <span class="mi">0</span> <span class="k">try</span><span class="p">:</span> <span class="n">raw</span> <span class="o">=</span> <span class="n">EXTRACTORS</span><span class="p">[</span><span class="n">ext</span><span class="p">](</span><span class="n">filepath</span><span class="p">)</span> <span class="k">except</span> <span class="nb">Exception</span> <span class="k">as</span> <span class="n">e</span><span class="p">:</span> <span class="nf">print</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">[extract error] </span><span class="si">{</span><span class="n">original_name</span><span class="si">}</span><span class="s">: </span><span class="si">{</span><span class="n">e</span><span class="si">}</span><span class="sh">"</span><span class="p">)</span> <span class="k">return</span> <span class="mi">0</span> <span class="n">chunks</span> <span class="o">=</span> <span class="nf">chunk_text</span><span class="p">(</span><span class="n">raw</span><span class="p">)</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">chunks</span><span class="p">:</span> <span class="k">return</span> <span class="mi">0</span> <span class="n">ids</span> <span class="o">=</span> <span class="p">[</span><span class="sa">f</span><span class="sh">"</span><span class="si">{</span><span class="n">original_name</span><span class="si">}</span><span class="s">::</span><span class="si">{</span><span class="n">uuid</span><span class="p">.</span><span class="nf">uuid4</span><span class="p">().</span><span class="nb">hex</span><span class="p">[</span><span class="si">:</span><span class="mi">8</span><span class="p">]</span><span class="si">}</span><span class="s">::</span><span class="si">{</span><span class="n">i</span><span class="si">}</span><span class="sh">"</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nf">range</span><span class="p">(</span><span class="nf">len</span><span class="p">(</span><span class="n">chunks</span><span class="p">))]</span> <span class="n">metas</span> <span class="o">=</span> <span class="p">[{</span><span class="sh">"</span><span class="s">source</span><span class="sh">"</span><span class="p">:</span> <span class="n">original_name</span><span class="p">,</span> <span class="sh">"</span><span class="s">chunk</span><span class="sh">"</span><span class="p">:</span> <span class="n">i</span><span class="p">}</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nf">range</span><span class="p">(</span><span class="nf">len</span><span class="p">(</span><span class="n">chunks</span><span class="p">))]</span> <span class="n">embs</span> <span class="o">=</span> <span class="n">embedder</span><span class="p">.</span><span class="nf">encode</span><span class="p">(</span><span class="n">chunks</span><span class="p">,</span> <span class="n">show_progress_bar</span><span class="o">=</span><span class="bp">False</span><span class="p">).</span><span class="nf">tolist</span><span class="p">()</span> <span class="n">collection</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="n">ids</span><span class="o">=</span><span class="n">ids</span><span class="p">,</span> <span class="n">documents</span><span class="o">=</span><span class="n">chunks</span><span class="p">,</span> <span class="n">embeddings</span><span class="o">=</span><span class="n">embs</span><span class="p">,</span> <span class="n">metadatas</span><span class="o">=</span><span class="n">metas</span><span class="p">)</span> <span class="k">return</span> <span class="nf">len</span><span class="p">(</span><span class="n">chunks</span><span class="p">)</span> <span class="c1"># ========================================================= # HYBRID SEARCH # ========================================================= </span><span class="k">def</span> <span class="nf">hybrid_search</span><span class="p">(</span><span class="n">query</span><span class="p">,</span> <span class="n">k</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span> <span class="n">alpha</span><span class="o">=</span><span class="mf">0.6</span><span class="p">):</span> <span class="sh">"""</span><span class="s"> Fuse dense (cosine similarity) and BM25 keyword scores. alpha = weight for dense; 1-alpha = weight for BM25. </span><span class="sh">"""</span> <span class="k">if</span> <span class="n">collection</span><span class="p">.</span><span class="nf">count</span><span class="p">()</span> <span class="o">==</span> <span class="mi">0</span><span class="p">:</span> <span class="k">return</span> <span class="p">[]</span> <span class="n">q_emb</span> <span class="o">=</span> <span class="n">embedder</span><span class="p">.</span><span class="nf">encode</span><span class="p">([</span><span class="n">query</span><span class="p">]).</span><span class="nf">tolist</span><span class="p">()</span> <span class="n">dense</span> <span class="o">=</span> <span class="n">collection</span><span class="p">.</span><span class="nf">query</span><span class="p">(</span> <span class="n">query_embeddings</span><span class="o">=</span><span class="n">q_emb</span><span class="p">,</span> <span class="n">n_results</span><span class="o">=</span><span class="nf">min</span><span class="p">(</span><span class="n">k</span> <span class="o">*</span> <span class="mi">3</span><span class="p">,</span> <span class="n">collection</span><span class="p">.</span><span class="nf">count</span><span class="p">())</span> <span class="p">)</span> <span class="n">dense_ids</span> <span class="o">=</span> <span class="n">dense</span><span class="p">[</span><span class="sh">"</span><span class="s">ids</span><span class="sh">"</span><span class="p">][</span><span class="mi">0</span><span class="p">]</span> <span class="n">dense_docs</span> <span class="o">=</span> <span class="n">dense</span><span class="p">[</span><span class="sh">"</span><span class="s">documents</span><span class="sh">"</span><span class="p">][</span><span class="mi">0</span><span class="p">]</span> <span class="n">dense_metas</span> <span class="o">=</span> <span class="n">dense</span><span class="p">[</span><span class="sh">"</span><span class="s">metadatas</span><span class="sh">"</span><span class="p">][</span><span class="mi">0</span><span class="p">]</span> <span class="n">dense_dists</span> <span class="o">=</span> <span class="n">dense</span><span class="p">[</span><span class="sh">"</span><span class="s">distances</span><span class="sh">"</span><span class="p">][</span><span class="mi">0</span><span class="p">]</span> <span class="c1"># cosine distance → similarity </span> <span class="n">dense_scores</span> <span class="o">=</span> <span class="p">{</span><span class="n">i</span><span class="p">:</span> <span class="mi">1</span> <span class="o">-</span> <span class="n">d</span> <span class="k">for</span> <span class="n">i</span><span class="p">,</span> <span class="n">d</span> <span class="ow">in</span> <span class="nf">zip</span><span class="p">(</span><span class="n">dense_ids</span><span class="p">,</span> <span class="n">dense_dists</span><span class="p">)}</span> <span class="n">bm25_scores</span> <span class="o">=</span> <span class="p">{}</span> <span class="k">if</span> <span class="n">_bm25</span><span class="p">[</span><span class="sh">"</span><span class="s">index</span><span class="sh">"</span><span class="p">]</span> <span class="ow">is</span> <span class="ow">not</span> <span class="bp">None</span><span class="p">:</span> <span class="n">toks</span> <span class="o">=</span> <span class="n">re</span><span class="p">.</span><span class="nf">findall</span><span class="p">(</span><span class="sa">r</span><span class="sh">"</span><span class="s">\w+</span><span class="sh">"</span><span class="p">,</span> <span class="n">query</span><span class="p">.</span><span class="nf">lower</span><span class="p">())</span> <span class="n">scores</span> <span class="o">=</span> <span class="n">_bm25</span><span class="p">[</span><span class="sh">"</span><span class="s">index</span><span class="sh">"</span><span class="p">].</span><span class="nf">get_scores</span><span class="p">(</span><span class="n">toks</span><span class="p">)</span> <span class="n">max_s</span> <span class="o">=</span> <span class="nf">max</span><span class="p">(</span><span class="n">scores</span><span class="p">)</span> <span class="k">if</span> <span class="nf">len</span><span class="p">(</span><span class="n">scores</span><span class="p">)</span> <span class="k">else</span> <span class="mi">0</span> <span class="k">for</span> <span class="n">i</span><span class="p">,</span> <span class="n">s</span> <span class="ow">in</span> <span class="nf">zip</span><span class="p">(</span><span class="n">_bm25</span><span class="p">[</span><span class="sh">"</span><span class="s">ids</span><span class="sh">"</span><span class="p">],</span> <span class="n">scores</span><span class="p">):</span> <span class="n">bm25_scores</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="n">s</span> <span class="o">/</span> <span class="n">max_s</span><span class="p">)</span> <span class="k">if</span> <span class="n">max_s</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="k">else</span> <span class="mf">0.0</span> <span class="c1"># Normalise dense scores to [0,1] </span> <span class="k">if</span> <span class="n">dense_scores</span><span class="p">:</span> <span class="n">dmax</span> <span class="o">=</span> <span class="nf">max</span><span class="p">(</span><span class="n">dense_scores</span><span class="p">.</span><span class="nf">values</span><span class="p">())</span> <span class="ow">or</span> <span class="mi">1</span> <span class="n">dense_scores</span> <span class="o">=</span> <span class="p">{</span><span class="n">k</span><span class="p">:</span> <span class="n">v</span> <span class="o">/</span> <span class="n">dmax</span> <span class="k">for</span> <span class="n">k</span><span class="p">,</span> <span class="n">v</span> <span class="ow">in</span> <span class="n">dense_scores</span><span class="p">.</span><span class="nf">items</span><span class="p">()}</span> <span class="n">all_ids</span> <span class="o">=</span> <span class="nf">set</span><span class="p">(</span><span class="n">dense_scores</span><span class="p">)</span> <span class="o">|</span> <span class="nf">set</span><span class="p">(</span><span class="n">bm25_scores</span><span class="p">)</span> <span class="n">fused</span> <span class="o">=</span> <span class="p">{</span> <span class="n">i</span><span class="p">:</span> <span class="n">alpha</span> <span class="o">*</span> <span class="n">dense_scores</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="n">i</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="n">alpha</span><span class="p">)</span> <span class="o">*</span> <span class="n">bm25_scores</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="n">i</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="n">all_ids</span> <span class="p">}</span> <span class="n">top</span> <span class="o">=</span> <span class="nf">sorted</span><span class="p">(</span><span class="n">fused</span><span class="p">.</span><span class="nf">items</span><span class="p">(),</span> <span class="n">key</span><span class="o">=</span><span class="k">lambda</span> <span class="n">x</span><span class="p">:</span> <span class="n">x</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">reverse</span><span class="o">=</span><span class="bp">True</span><span class="p">)[:</span><span class="n">k</span><span class="p">]</span> <span class="n">id_to_meta</span> <span class="o">=</span> <span class="p">{</span><span class="n">i</span><span class="p">:</span> <span class="n">m</span> <span class="k">for</span> <span class="n">i</span><span class="p">,</span> <span class="n">m</span> <span class="ow">in</span> <span class="nf">zip</span><span class="p">(</span><span class="n">dense_ids</span><span class="p">,</span> <span class="n">dense_metas</span><span class="p">)}</span> <span class="n">id_to_doc</span> <span class="o">=</span> <span class="p">{</span><span class="n">i</span><span class="p">:</span> <span class="n">d</span> <span class="k">for</span> <span class="n">i</span><span class="p">,</span> <span class="n">d</span> <span class="ow">in</span> <span class="nf">zip</span><span class="p">(</span><span class="n">dense_ids</span><span class="p">,</span> <span class="n">dense_docs</span><span class="p">)}</span> <span class="n">results</span> <span class="o">=</span> <span class="p">[]</span> <span class="k">for</span> <span class="n">cid</span><span class="p">,</span> <span class="n">score</span> <span class="ow">in</span> <span class="n">top</span><span class="p">:</span> <span class="k">if</span> <span class="n">cid</span> <span class="ow">in</span> <span class="n">id_to_doc</span><span class="p">:</span> <span class="n">results</span><span class="p">.</span><span class="nf">append</span><span class="p">(</span> <span class="p">{</span><span class="sh">"</span><span class="s">text</span><span class="sh">"</span><span class="p">:</span> <span class="n">id_to_doc</span><span class="p">[</span><span class="n">cid</span><span class="p">],</span> <span class="sh">"</span><span class="s">meta</span><span class="sh">"</span><span class="p">:</span> <span class="n">id_to_meta</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="n">cid</span><span class="p">,</span> <span class="p">{}),</span> <span class="sh">"</span><span class="s">score</span><span class="sh">"</span><span class="p">:</span> <span class="n">score</span><span class="p">}</span> <span class="p">)</span> <span class="k">return</span> <span class="n">results</span> <span class="c1"># ========================================================= # ROUTES # ========================================================= </span><span class="nd">@app.route</span><span class="p">(</span><span class="sh">"</span><span class="s">/</span><span class="sh">"</span><span class="p">)</span> <span class="k">def</span> <span class="nf">index</span><span class="p">():</span> <span class="k">return</span> <span class="nf">render_template</span><span class="p">(</span><span class="sh">"</span><span class="s">index.html</span><span class="sh">"</span><span class="p">)</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">"</span><span class="s">/api/upload</span><span class="sh">"</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">POST</span><span class="sh">"</span><span class="p">])</span> <span class="k">def</span> <span class="nf">upload</span><span class="p">():</span> <span class="sh">"""</span><span class="s">Accepts multiple files from </span><span class="sh">'</span><span class="s">files</span><span class="sh">'</span><span class="s"> field. Returns per-file status.</span><span class="sh">"""</span> <span class="n">files</span> <span class="o">=</span> <span class="n">request</span><span class="p">.</span><span class="n">files</span><span class="p">.</span><span class="nf">getlist</span><span class="p">(</span><span class="sh">"</span><span class="s">files</span><span class="sh">"</span><span class="p">)</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">files</span><span class="p">:</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">error</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">No files provided</span><span class="sh">"</span><span class="p">}),</span> <span class="mi">400</span> <span class="n">saved</span><span class="p">,</span> <span class="n">total_chunks</span> <span class="o">=</span> <span class="p">[],</span> <span class="mi">0</span> <span class="k">for</span> <span class="n">f</span> <span class="ow">in</span> <span class="n">files</span><span class="p">:</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">f</span><span class="p">.</span><span class="n">filename</span><span class="p">:</span> <span class="k">continue</span> <span class="n">ext</span> <span class="o">=</span> <span class="n">os</span><span class="p">.</span><span class="n">path</span><span class="p">.</span><span class="nf">splitext</span><span class="p">(</span><span class="n">f</span><span class="p">.</span><span class="n">filename</span><span class="p">)[</span><span class="mi">1</span><span class="p">].</span><span class="nf">lower</span><span class="p">()</span> <span class="k">if</span> <span class="n">ext</span> <span class="ow">not</span> <span class="ow">in</span> <span class="n">EXTRACTORS</span><span class="p">:</span> <span class="n">saved</span><span class="p">.</span><span class="nf">append</span><span class="p">({</span><span class="sh">"</span><span class="s">name</span><span class="sh">"</span><span class="p">:</span> <span class="n">f</span><span class="p">.</span><span class="n">filename</span><span class="p">,</span> <span class="sh">"</span><span class="s">status</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">unsupported</span><span class="sh">"</span><span class="p">})</span> <span class="k">continue</span> <span class="n">dest</span> <span class="o">=</span> <span class="n">os</span><span class="p">.</span><span class="n">path</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="n">UPLOAD_DIR</span><span class="p">,</span> <span class="n">f</span><span class="p">.</span><span class="n">filename</span><span class="p">)</span> <span class="n">f</span><span class="p">.</span><span class="nf">save</span><span class="p">(</span><span class="n">dest</span><span class="p">)</span> <span class="n">n</span> <span class="o">=</span> <span class="nf">ingest_file</span><span class="p">(</span><span class="n">dest</span><span class="p">,</span> <span class="n">f</span><span class="p">.</span><span class="n">filename</span><span class="p">)</span> <span class="n">total_chunks</span> <span class="o">+=</span> <span class="n">n</span> <span class="n">saved</span><span class="p">.</span><span class="nf">append</span><span class="p">({</span><span class="sh">"</span><span class="s">name</span><span class="sh">"</span><span class="p">:</span> <span class="n">f</span><span class="p">.</span><span class="n">filename</span><span class="p">,</span> <span class="sh">"</span><span class="s">status</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">ok</span><span class="sh">"</span><span class="p">,</span> <span class="sh">"</span><span class="s">chunks</span><span class="sh">"</span><span class="p">:</span> <span class="n">n</span><span class="p">})</span> <span class="nf">rebuild_bm25</span><span class="p">()</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">files</span><span class="sh">"</span><span class="p">:</span> <span class="n">saved</span><span class="p">,</span> <span class="sh">"</span><span class="s">total_chunks</span><span class="sh">"</span><span class="p">:</span> <span class="n">total_chunks</span><span class="p">})</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">"</span><span class="s">/api/files</span><span class="sh">"</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">GET</span><span class="sh">"</span><span class="p">])</span> <span class="k">def</span> <span class="nf">list_files</span><span class="p">():</span> <span class="sh">"""</span><span class="s">Distinct source file names currently embedded.</span><span class="sh">"""</span> <span class="n">data</span> <span class="o">=</span> <span class="n">collection</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="n">include</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">metadatas</span><span class="sh">"</span><span class="p">])</span> <span class="n">names</span> <span class="o">=</span> <span class="nf">sorted</span><span class="p">({</span><span class="n">m</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">source</span><span class="sh">"</span><span class="p">)</span> <span class="k">for</span> <span class="n">m</span> <span class="ow">in</span> <span class="p">(</span><span class="n">data</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">metadatas</span><span class="sh">"</span><span class="p">)</span> <span class="ow">or</span> <span class="p">[])</span> <span class="k">if</span> <span class="n">m</span><span class="p">})</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">files</span><span class="sh">"</span><span class="p">:</span> <span class="n">names</span><span class="p">})</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">"</span><span class="s">/api/files</span><span class="sh">"</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">DELETE</span><span class="sh">"</span><span class="p">])</span> <span class="k">def</span> <span class="nf">delete_file</span><span class="p">():</span> <span class="n">name</span> <span class="o">=</span> <span class="p">(</span><span class="n">request</span><span class="p">.</span><span class="n">json</span> <span class="ow">or</span> <span class="p">{}).</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">name</span><span class="sh">"</span><span class="p">)</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">name</span><span class="p">:</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">error</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">name required</span><span class="sh">"</span><span class="p">}),</span> <span class="mi">400</span> <span class="n">data</span> <span class="o">=</span> <span class="n">collection</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="n">include</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">metadatas</span><span class="sh">"</span><span class="p">])</span> <span class="n">to_del</span> <span class="o">=</span> <span class="p">[</span> <span class="n">cid</span> <span class="k">for</span> <span class="n">cid</span><span class="p">,</span> <span class="n">m</span> <span class="ow">in</span> <span class="nf">zip</span><span class="p">(</span><span class="n">data</span><span class="p">[</span><span class="sh">"</span><span class="s">ids</span><span class="sh">"</span><span class="p">],</span> <span class="n">data</span><span class="p">[</span><span class="sh">"</span><span class="s">metadatas</span><span class="sh">"</span><span class="p">])</span> <span class="k">if</span> <span class="n">m</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">source</span><span class="sh">"</span><span class="p">)</span> <span class="o">==</span> <span class="n">name</span> <span class="p">]</span> <span class="k">if</span> <span class="n">to_del</span><span class="p">:</span> <span class="n">collection</span><span class="p">.</span><span class="nf">delete</span><span class="p">(</span><span class="n">ids</span><span class="o">=</span><span class="n">to_del</span><span class="p">)</span> <span class="c1"># also remove the raw file if present </span> <span class="n">raw</span> <span class="o">=</span> <span class="n">os</span><span class="p">.</span><span class="n">path</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="n">UPLOAD_DIR</span><span class="p">,</span> <span class="n">name</span><span class="p">)</span> <span class="k">if</span> <span class="n">os</span><span class="p">.</span><span class="n">path</span><span class="p">.</span><span class="nf">exists</span><span class="p">(</span><span class="n">raw</span><span class="p">):</span> <span class="k">try</span><span class="p">:</span> <span class="n">os</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="n">raw</span><span class="p">)</span> <span class="k">except</span> <span class="nb">OSError</span><span class="p">:</span> <span class="k">pass</span> <span class="nf">rebuild_bm25</span><span class="p">()</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">deleted</span><span class="sh">"</span><span class="p">:</span> <span class="nf">len</span><span class="p">(</span><span class="n">to_del</span><span class="p">),</span> <span class="sh">"</span><span class="s">file</span><span class="sh">"</span><span class="p">:</span> <span class="n">name</span><span class="p">})</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">"</span><span class="s">/api/chat</span><span class="sh">"</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">POST</span><span class="sh">"</span><span class="p">])</span> <span class="k">def</span> <span class="nf">chat</span><span class="p">():</span> <span class="n">q</span> <span class="o">=</span> <span class="p">(</span><span class="n">request</span><span class="p">.</span><span class="n">json</span> <span class="ow">or</span> <span class="p">{}).</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">query</span><span class="sh">"</span><span class="p">,</span> <span class="sh">""</span><span class="p">).</span><span class="nf">strip</span><span class="p">()</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">q</span><span class="p">:</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">error</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">empty query</span><span class="sh">"</span><span class="p">}),</span> <span class="mi">400</span> <span class="n">hits</span> <span class="o">=</span> <span class="nf">hybrid_search</span><span class="p">(</span><span class="n">q</span><span class="p">,</span> <span class="n">k</span><span class="o">=</span><span class="mi">5</span><span class="p">)</span> <span class="n">context</span> <span class="o">=</span> <span class="sh">"</span><span class="se">\n\n</span><span class="s">---</span><span class="se">\n\n</span><span class="sh">"</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span> <span class="sa">f</span><span class="sh">"</span><span class="s">[</span><span class="si">{</span><span class="n">h</span><span class="p">[</span><span class="sh">'</span><span class="s">meta</span><span class="sh">'</span><span class="p">].</span><span class="nf">get</span><span class="p">(</span><span class="sh">'</span><span class="s">source</span><span class="sh">'</span><span class="p">)</span><span class="si">}</span><span class="s">]</span><span class="se">\n</span><span class="si">{</span><span class="n">h</span><span class="p">[</span><span class="sh">'</span><span class="s">text</span><span class="sh">'</span><span class="p">]</span><span class="si">}</span><span class="sh">"</span> <span class="k">for</span> <span class="n">h</span> <span class="ow">in</span> <span class="n">hits</span> <span class="p">)</span> <span class="ow">or</span> <span class="sh">"</span><span class="s">(no relevant context found)</span><span class="sh">"</span> <span class="n">prompt</span> <span class="o">=</span> <span class="p">(</span> <span class="sh">"</span><span class="s">You are Venkatesh RAG Chatbot, a helpful assistant. </span><span class="sh">"</span> <span class="sh">"</span><span class="s">Answer using the CONTEXT below. If the answer is not in the context, </span><span class="sh">"</span> <span class="sh">"</span><span class="s">say so clearly.</span><span class="se">\n\n</span><span class="sh">"</span> <span class="sa">f</span><span class="sh">"</span><span class="s">CONTEXT:</span><span class="se">\n</span><span class="si">{</span><span class="n">context</span><span class="si">}</span><span class="se">\n\n</span><span class="sh">"</span> <span class="sa">f</span><span class="sh">"</span><span class="s">QUESTION: </span><span class="si">{</span><span class="n">q</span><span class="si">}</span><span class="se">\n\n</span><span class="sh">"</span> <span class="sh">"</span><span class="s">Format the answer in clean Markdown. Use fenced code blocks for code.</span><span class="sh">"</span> <span class="p">)</span> <span class="k">try</span><span class="p">:</span> <span class="n">resp</span> <span class="o">=</span> <span class="n">llm</span><span class="p">.</span><span class="nf">generate_content</span><span class="p">(</span><span class="n">prompt</span><span class="p">)</span> <span class="n">answer</span> <span class="o">=</span> <span class="n">resp</span><span class="p">.</span><span class="n">text</span> <span class="k">except</span> <span class="nb">Exception</span> <span class="k">as</span> <span class="n">e</span><span class="p">:</span> <span class="n">answer</span> <span class="o">=</span> <span class="sa">f</span><span class="sh">"</span><span class="s">**LLM error:** `</span><span class="si">{</span><span class="n">e</span><span class="si">}</span><span class="s">`</span><span class="se">\n\n</span><span class="s">Context retrieved:</span><span class="se">\n\n</span><span class="si">{</span><span class="n">context</span><span class="si">}</span><span class="sh">"</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span> <span class="sh">"</span><span class="s">answer</span><span class="sh">"</span><span class="p">:</span> <span class="n">answer</span><span class="p">,</span> <span class="sh">"</span><span class="s">sources</span><span class="sh">"</span><span class="p">:</span> <span class="p">[{</span><span class="sh">"</span><span class="s">source</span><span class="sh">"</span><span class="p">:</span> <span class="n">h</span><span class="p">[</span><span class="sh">"</span><span class="s">meta</span><span class="sh">"</span><span class="p">].</span><span class="nf">get</span><span class="p">(</span><span class="sh">"</span><span class="s">source</span><span class="sh">"</span><span class="p">),</span> <span class="sh">"</span><span class="s">score</span><span class="sh">"</span><span class="p">:</span> <span class="nf">round</span><span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="sh">"</span><span class="s">score</span><span class="sh">"</span><span class="p">],</span> <span class="mi">3</span><span class="p">)}</span> <span class="k">for</span> <span class="n">h</span> <span class="ow">in</span> <span class="n">hits</span><span class="p">],</span> <span class="p">})</span> <span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="sh">"</span><span class="s">__main__</span><span class="sh">"</span><span class="p">:</span> <span class="nf">rebuild_bm25</span><span class="p">()</span> <span class="n">app</span><span class="p">.</span><span class="nf">run</span><span class="p">(</span><span class="n">host</span><span class="o">=</span><span class="sh">"</span><span class="s">0.0.0.0</span><span class="sh">"</span><span class="p">,</span> <span class="n">port</span><span class="o">=</span><span class="mi">5000</span><span class="p">,</span> <span class="n">debug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> </code></pre> </div> <p>requirements.txt should have the below ones - </p> <p>flask<br> flask-cors<br> chromadb<br> sentence-transformers<br> rank-bm25<br> python-docx<br> openpyxl<br> python-pptx<br> pypdf<br> google-generativeai<br> numpy</p> <p>Then run the application - <br> 1/ open Folder in VS Code <br> 2/ Open terminal <br> 3/ Create Python environment <br> python -m venv myEnv<br> .\myEnv\Scripts\Activate.ps1<br> In case of issue,<br> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned<br> 4/ Install all supported software <br> python -m pip install -r requirements.txt<br> 5/ After successful installation you should see the supporting exes under the scripts folder<br> 6/ Finally run the application <br> python app.py</p> <p>In case if you run into an issue please follow below commands accordingly</p> <p>For this project use Python 3.12.0</p> <p>deactivate<br> Remove-Item -Recurse -Force myEnv<br> python -m venv myEnv<br> .\myEnv\Scripts\Activate.ps1</p> <p>Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned</p> <p>python -m pip install --upgrade pip<br> python -m pip install -r requirements.txt</p> <p>pip install flask<br> pip install flask-cors<br> pip install chromadb<br> pip install sentence-transformers<br> pip install rank-bm25<br> pip install python-docx<br> pip install openpyxl<br> pip install python-pptx<br> pip install pypdf<br> pip install google-generativeai<br> pip install numpy</p> <p>General Erros - <br> A. torch / sentence-transformers build errors (very common on Windows)</p> <p>python -m pip install torch --index-url <a href="https://download.pytorch.org/whl/cpu" rel="noopener noreferrer">https://download.pytorch.org/whl/cpu</a><br> python -m pip install -r requirements.txt</p> <p>B. chromadb compile errors (hnswlib, chroma-hnswlib)</p> <p>deactivate<br> Remove-Item -Recurse -Force myEnv<br> py -3.12 -m venv myEnv # or "python3.12" / "py -3.11"<br> .\myEnv\Scripts\Activate.ps1<br> python -m pip install --upgrade pip<br> python -m pip install -r requirements.txt</p> <p>C. google-generativeai — quick alternative</p> <p>python -m pip install flask flask-cors chromadb sentence-transformers rank-bm25 python-docx openpyxl python-pptx pypdf numpy</p> <p>in APP.py </p> <p>try:<br> import google.generativeai as genai<br> genai.configure(api_key=GEMINI_API_KEY)<br> llm = genai.GenerativeModel(MODEL_NAME)<br> except Exception as _e:<br> print(f"[warn] Gemini not available: {_e}")<br> llm = None</p> <p>and in /api/chat guard with if llm is None: return jsonify({"answer": "...retrieved context...", ...}).</p> <p>TL;DR for your exact error</p> <p>inside the folder, with (myEnv) active<br> python -m pip install --upgrade pip<br> python -m pip install -r requirements.txt<br> python app.py</p> <p>python -c "import flask, chromadb, sentence_transformers, rank_bm25, docx, openpyxl, pptx, pypdf, google.generativeai; print('all good')"<br> python -m pip list | findstr /I "flask chromadb sentence"</p> <p>python app.py</p> backend rag python ai Venkatesh Jonnagadla Tue, 27 Oct 2026 18:12:26 +0000 https://dev.to/vjonnagadla/google-ai-chatbot-25h2 https://dev.to/vjonnagadla/google-ai-chatbot-25h2 <p>1/ Install Visual Studio Code<br> 2/ Install Python and get the path where python is installed <br> C:\Users\XXXXX\Python\pythoncore-3.15-64\python.exe<br> python --version<br> python path</p> <p>3/ go to aistudio.google.com and use 300$ free credit. Create API Key <br> 4/ Check the doumentation for api-key usage according to the requirement. In my case I am using Python. So, I refer the python code <br> 5/ Create a workspace folder on your desktop and open using VS Code editor. Then open the terminal in the path using view --&gt; Open terminal<br> 6/ Create environment in the path for python using below command <br> python -m venv myEnv<br> 7/ Activate virtual environment <br> cd .\myEnv\Scripts <br> .\Activate.ps1<br> if security error occur then<br> Set-ExecutionPolicy -Scope CurrentUser RemoteSigned<br> once activated, it shows (yourenv) in greencolor<br> 8/ From the command prompt go to the directory where Pythoncode is writted, same place install flask <br> pip install Flask<br> pip list --&gt; will show if installed or not <br> pip install google-generativeai<br> 9/ Now in the workspace folder create one more folder called templates <br> 10/ In the templates folder create </p> <p>Welcome.html (UnFormatted output)</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6oq5ezm1pk9uu3lx7e4c.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6oq5ezm1pk9uu3lx7e4c.png" alt=" " width="730" height="575"></a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Venkatesh AI Chatbot<span class="nt">&lt;/title&gt;</span> <span class="c">&lt;!-- Bootstrap CSS --&gt;</span> <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="nx">#f4f6f9</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.chat-container</span> <span class="p">{</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">900px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">30px</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.chat-header</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#8e95a0</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">white</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">10px</span> <span class="m">10px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.chat-window</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="m">500px</span><span class="p">;</span> <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">white</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#dee2e6</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.message</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span> <span class="m">15px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">80%</span><span class="p">;</span> <span class="nl">word-wrap</span><span class="p">:</span> <span class="n">break-word</span><span class="p">;</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.user-message</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="nx">#d1e7dd</span><span class="p">;</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot-message</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="nx">#e9ecef</span><span class="p">;</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.input-section</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#dee2e6</span><span class="p">;</span> <span class="nl">border-top</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">white</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">10px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">textarea</span> <span class="p">{</span> <span class="nl">resize</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.typing</span> <span class="p">{</span> <span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">gray</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container chat-container"</span><span class="nt">&gt;</span> <span class="c">&lt;!-- Header --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chat-header"</span><span class="nt">&gt;</span> Venkatesh AI Chatbot <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- Chat Window --&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chatWindow"</span> <span class="na">class=</span><span class="s">"chat-window"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"message bot-message"</span><span class="nt">&gt;</span> Hello! How can I help you today? <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"clear:both;"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- Input Area --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-section"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-10"</span><span class="nt">&gt;</span> <span class="nt">&lt;textarea</span> <span class="na">id=</span><span class="s">"userInput"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">rows=</span><span class="s">"3"</span> <span class="na">placeholder=</span><span class="s">"Type your message here..."</span><span class="nt">&gt;&lt;/textarea&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-2 d-grid"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"sendBtn"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span> Send <span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- JQuery --&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.7.1.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="c">&lt;!-- Bootstrap JS --&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">function</span> <span class="nf">appendMessage</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">type</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">cssClass</span> <span class="o">=</span> <span class="p">(</span><span class="nx">type</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">user</span><span class="dl">"</span><span class="p">)</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">user-message</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">bot-message</span><span class="dl">"</span><span class="p">;</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#chatWindow</span><span class="dl">"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s2">` &lt;div class="message </span><span class="p">${</span><span class="nx">cssClass</span><span class="p">}</span><span class="s2">"&gt; </span><span class="p">${</span><span class="nx">message</span><span class="p">}</span><span class="s2"> &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; `</span><span class="p">);</span> <span class="nf">scrollToBottom</span><span class="p">();</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">scrollToBottom</span><span class="p">()</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#chatWindow</span><span class="dl">"</span><span class="p">).</span><span class="nf">scrollTop</span><span class="p">(</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#chatWindow</span><span class="dl">"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">scrollHeight</span> <span class="p">);</span> <span class="p">}</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#sendBtn</span><span class="dl">"</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">"</span><span class="s2">click</span><span class="dl">"</span><span class="p">,</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="nf">sendMessage</span><span class="p">();</span> <span class="p">});</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#userInput</span><span class="dl">"</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">"</span><span class="s2">keypress</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">===</span> <span class="mi">13</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">shiftKey</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span> <span class="nf">sendMessage</span><span class="p">();</span> <span class="p">}</span> <span class="p">});</span> <span class="kd">function</span> <span class="nf">sendMessage</span><span class="p">()</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">userText</span> <span class="o">=</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#userInput</span><span class="dl">"</span><span class="p">).</span><span class="nf">val</span><span class="p">().</span><span class="nf">trim</span><span class="p">();</span> <span class="k">if</span><span class="p">(</span><span class="nx">userText</span> <span class="o">===</span> <span class="dl">""</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="c1">// Append User Message</span> <span class="nf">appendMessage</span><span class="p">(</span><span class="nx">userText</span><span class="p">,</span> <span class="dl">"</span><span class="s2">user</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// Clear input</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#userInput</span><span class="dl">"</span><span class="p">).</span><span class="nf">val</span><span class="p">(</span><span class="dl">""</span><span class="p">);</span> <span class="c1">// Show typing indicator</span> <span class="kd">let</span> <span class="nx">typingId</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">typing_</span><span class="dl">"</span> <span class="o">+</span> <span class="nb">Date</span><span class="p">.</span><span class="nf">now</span><span class="p">();</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#chatWindow</span><span class="dl">"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s2">` &lt;div id="</span><span class="p">${</span><span class="nx">typingId</span><span class="p">}</span><span class="s2">" class="message bot-message typing"&gt; AI is typing... &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; `</span><span class="p">);</span> <span class="nf">scrollToBottom</span><span class="p">();</span> <span class="c1">// AJAX POST Call</span> <span class="nx">$</span><span class="p">.</span><span class="nf">ajax</span><span class="p">({</span> <span class="c1">//url: "http://127.0.0.1:5000/chat",</span> <span class="na">url</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/chat</span><span class="dl">"</span><span class="p">,</span> <span class="na">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span> <span class="na">contentType</span><span class="p">:</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">,</span> <span class="na">data</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span> <span class="na">message</span><span class="p">:</span> <span class="nx">userText</span> <span class="p">}),</span> <span class="na">success</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#</span><span class="dl">"</span> <span class="o">+</span> <span class="nx">typingId</span><span class="p">).</span><span class="nf">remove</span><span class="p">();</span> <span class="nf">appendMessage</span><span class="p">(</span> <span class="nx">response</span><span class="p">.</span><span class="nx">response</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">No response received</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">bot</span><span class="dl">"</span> <span class="p">);</span> <span class="p">},</span> <span class="na">error</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">xhr</span><span class="p">)</span> <span class="p">{</span> <span class="nf">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#</span><span class="dl">"</span> <span class="o">+</span> <span class="nx">typingId</span><span class="p">).</span><span class="nf">remove</span><span class="p">();</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">responseText</span><span class="p">);</span> <span class="nf">appendMessage</span><span class="p">(</span> <span class="dl">"</span><span class="s2">Error: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">xhr</span><span class="p">.</span><span class="nx">responseText</span><span class="p">,</span> <span class="dl">"</span><span class="s2">bot</span><span class="dl">"</span> <span class="p">);</span> <span class="p">}</span> <span class="p">});</span> <span class="p">}</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <p>11/ In the workspace folder create Welcome.py<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight python"><code><span class="kn">from</span> <span class="n">flask</span> <span class="kn">import</span> <span class="n">Flask</span><span class="p">,</span> <span class="n">render_template</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="n">jsonify</span> <span class="kn">import</span> <span class="n">google.generativeai</span> <span class="k">as</span> <span class="n">genai</span> <span class="kn">import</span> <span class="n">os</span> <span class="c1"># Replace with your actual Gemini API key </span><span class="n">GOOGLE_API_KEY</span> <span class="o">=</span> <span class="sh">"</span><span class="s">your_APIKe</span><span class="sh">"</span> <span class="n">genai</span><span class="p">.</span><span class="nf">configure</span><span class="p">(</span><span class="n">api_key</span><span class="o">=</span><span class="n">GOOGLE_API_KEY</span><span class="p">)</span> <span class="c1">#for m in genai.list_models(): </span> <span class="c1"># print(m.name) </span> <span class="c1">#model = genai.GenerativeModel("gemini-1.5-flash") </span><span class="n">model</span> <span class="o">=</span> <span class="n">genai</span><span class="p">.</span><span class="nc">GenerativeModel</span><span class="p">(</span><span class="sh">"</span><span class="s">gemini-3.5-flash-lite</span><span class="sh">"</span><span class="p">)</span> <span class="n">chat</span> <span class="o">=</span> <span class="n">model</span><span class="p">.</span><span class="nf">start_chat</span><span class="p">(</span><span class="n">history</span><span class="o">=</span><span class="p">[])</span> <span class="n">app</span> <span class="o">=</span> <span class="nc">Flask</span><span class="p">(</span><span class="n">__name__</span><span class="p">)</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">'</span><span class="s">/</span><span class="sh">'</span><span class="p">)</span> <span class="k">def</span> <span class="nf">index</span><span class="p">():</span> <span class="k">return</span> <span class="nf">render_template</span><span class="p">(</span><span class="sh">'</span><span class="s">Welcome.html</span><span class="sh">'</span><span class="p">)</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">'</span><span class="s">/chat</span><span class="sh">'</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span><span class="p">[</span><span class="sh">'</span><span class="s">POST</span><span class="sh">'</span><span class="p">])</span> <span class="k">def</span> <span class="nf">chat_response</span><span class="p">():</span> <span class="n">user_input</span> <span class="o">=</span> <span class="n">request</span><span class="p">.</span><span class="n">json</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="sh">'</span><span class="s">message</span><span class="sh">'</span><span class="p">)</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">user_input</span><span class="p">:</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">error</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">No message provided</span><span class="sh">"</span><span class="p">}),</span> <span class="mi">400</span> <span class="k">try</span><span class="p">:</span> <span class="n">response_raw</span> <span class="o">=</span> <span class="n">chat</span><span class="p">.</span><span class="nf">send_message</span><span class="p">(</span><span class="n">user_input</span><span class="p">)</span> <span class="c1">#print(response_raw) </span> <span class="nf">print</span><span class="p">(</span><span class="sh">"</span><span class="s">RAW:</span><span class="sh">"</span><span class="p">,</span> <span class="n">response_raw</span><span class="p">)</span> <span class="n">response</span> <span class="o">=</span> <span class="n">response_raw</span><span class="p">.</span><span class="n">text</span> <span class="nf">print</span><span class="p">(</span><span class="sh">"</span><span class="s">TEXT:</span><span class="sh">"</span><span class="p">,</span> <span class="n">response</span><span class="p">)</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">response</span><span class="sh">"</span><span class="p">:</span> <span class="n">response</span><span class="p">})</span> <span class="k">except</span> <span class="nb">Exception</span> <span class="k">as</span> <span class="n">e</span><span class="p">:</span> <span class="nf">print</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">Error: </span><span class="si">{</span><span class="n">e</span><span class="si">}</span><span class="sh">"</span><span class="p">)</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">error</span><span class="sh">"</span><span class="p">:</span> <span class="nf">str</span><span class="p">(</span><span class="n">e</span><span class="p">)}),</span> <span class="mi">500</span> <span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="sh">'</span><span class="s">__main__</span><span class="sh">'</span><span class="p">:</span> <span class="n">app</span><span class="p">.</span><span class="nf">run</span><span class="p">(</span><span class="n">debug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> </code></pre> </div> <p>12/ Dubug the output and open the chatbot in Chrome and test </p> <p>Alternative Design </p> <p>Welcome.html (Formatted Output)</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F31i2wqh5bszkkoocdjws.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F31i2wqh5bszkkoocdjws.png" alt=" " width="800" height="436"></a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Chat<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github-dark.min.css"</span><span class="nt">&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span><span class="nx">#f7f7f8</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">20px</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#chat-box</span> <span class="p">{</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">800px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.msg</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">12px</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">10px</span> <span class="m">0</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.user</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span><span class="nx">#2563eb</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="nx">white</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span><span class="nx">#ffffff</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#e5e7eb</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot</span> <span class="nt">pre</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span><span class="nx">#1e1e1e</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="nx">#eee</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span> <span class="nl">overflow-x</span><span class="p">:</span><span class="nb">auto</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span><span class="nb">relative</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot</span> <span class="nt">code</span><span class="nd">:not</span><span class="o">(</span><span class="nt">pre</span> <span class="nt">code</span><span class="o">)</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span><span class="nx">#f1f5f9</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">2px</span> <span class="m">6px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span><span class="m">4px</span><span class="p">;</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Fira Code'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.9em</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot</span> <span class="nt">h1</span><span class="o">,</span><span class="nc">.bot</span> <span class="nt">h2</span><span class="o">,</span><span class="nc">.bot</span> <span class="nt">h3</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot</span> <span class="nt">ul</span><span class="o">,</span> <span class="nc">.bot</span> <span class="nt">ol</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">22px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot</span> <span class="nt">table</span> <span class="p">{</span> <span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">8px</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.bot</span> <span class="nt">th</span><span class="o">,</span> <span class="nc">.bot</span> <span class="nt">td</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ddd</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">6px</span> <span class="m">10px</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#input-area</span> <span class="p">{</span> <span class="nl">max-width</span><span class="p">:</span><span class="m">800px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span><span class="m">20px</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span><span class="nb">flex</span><span class="p">;</span> <span class="nl">gap</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#msg</span> <span class="p">{</span> <span class="nl">flex</span><span class="p">:</span><span class="m">1</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">10px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="nx">#ccc</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span><span class="m">10px</span> <span class="m">18px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span><span class="nx">#2563eb</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="nx">#fff</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chat-box"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"input-area"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"msg"</span> <span class="na">placeholder=</span><span class="s">"Ask anything..."</span> <span class="na">onkeydown=</span><span class="s">"if(event.key==='Enter')send()"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">onclick=</span><span class="s">"send()"</span><span class="nt">&gt;</span>Send<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/marked/marked.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="c1">// Configure marked to use highlight.js</span> <span class="nx">marked</span><span class="p">.</span><span class="nf">setOptions</span><span class="p">({</span> <span class="na">highlight</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">code</span><span class="p">,</span> <span class="nx">lang</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">lang</span> <span class="o">&amp;&amp;</span> <span class="nx">hljs</span><span class="p">.</span><span class="nf">getLanguage</span><span class="p">(</span><span class="nx">lang</span><span class="p">))</span> <span class="p">{</span> <span class="k">try</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">hljs</span><span class="p">.</span><span class="nf">highlight</span><span class="p">(</span><span class="nx">code</span><span class="p">,</span> <span class="p">{</span><span class="na">language</span><span class="p">:</span> <span class="nx">lang</span><span class="p">}).</span><span class="nx">value</span><span class="p">;</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{}</span> <span class="p">}</span> <span class="k">return</span> <span class="nx">hljs</span><span class="p">.</span><span class="nf">highlightAuto</span><span class="p">(</span><span class="nx">code</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span> <span class="p">},</span> <span class="na">breaks</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// turn \n into </span><span class="o">&lt;</span><span class="nx">br</span><span class="o">&gt;</span> <span class="na">gfm</span><span class="p">:</span> <span class="kc">true</span> <span class="c1">// GitHub-flavored markdown (tables, etc.)</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">chatBox</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">chat-box</span><span class="dl">'</span><span class="p">);</span> <span class="kd">function</span> <span class="nf">addMessage</span><span class="p">(</span><span class="nx">role</span><span class="p">,</span> <span class="nx">text</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">div</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span> <span class="nx">div</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">msg </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">role</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="nx">role</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">bot</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Render markdown safely</span> <span class="kd">const</span> <span class="nx">rawHtml</span> <span class="o">=</span> <span class="nx">marked</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span> <span class="nx">div</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">DOMPurify</span><span class="p">.</span><span class="nf">sanitize</span><span class="p">(</span><span class="nx">rawHtml</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">div</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span> <span class="p">}</span> <span class="nx">chatBox</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">div</span><span class="p">);</span> <span class="nb">window</span><span class="p">.</span><span class="nf">scrollTo</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="p">);</span> <span class="k">return</span> <span class="nx">div</span><span class="p">;</span> <span class="p">}</span> <span class="k">async</span> <span class="kd">function</span> <span class="nf">send</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">msg</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nf">trim</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">text</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="nx">input</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nf">addMessage</span><span class="p">(</span><span class="dl">'</span><span class="s1">user</span><span class="dl">'</span><span class="p">,</span> <span class="nx">text</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">botDiv</span> <span class="o">=</span> <span class="nf">addMessage</span><span class="p">(</span><span class="dl">'</span><span class="s1">bot</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">_thinking..._</span><span class="dl">'</span><span class="p">);</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">/chat</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">method</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> <span class="na">headers</span><span class="p">:</span> <span class="p">{</span><span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span><span class="p">},</span> <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span><span class="na">message</span><span class="p">:</span> <span class="nx">text</span><span class="p">})</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">res</span><span class="p">.</span><span class="nf">json</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> <span class="nx">botDiv</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Error: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">data</span><span class="p">.</span><span class="nx">error</span><span class="p">;</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">marked</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">response</span><span class="p">);</span> <span class="nx">botDiv</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">DOMPurify</span><span class="p">.</span><span class="nf">sanitize</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">botDiv</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Network error: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">e</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <p>Welcome.py<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight python"><code><span class="kn">from</span> <span class="n">flask</span> <span class="kn">import</span> <span class="n">Flask</span><span class="p">,</span> <span class="n">render_template</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="n">jsonify</span> <span class="kn">import</span> <span class="n">google.generativeai</span> <span class="k">as</span> <span class="n">genai</span> <span class="kn">import</span> <span class="n">os</span> <span class="c1"># Replace with your actual Gemini API key </span><span class="n">GOOGLE_API_KEY</span> <span class="o">=</span> <span class="sh">"</span><span class="s">YourGoogleAPIKEY</span><span class="sh">"</span> <span class="n">genai</span><span class="p">.</span><span class="nf">configure</span><span class="p">(</span><span class="n">api_key</span><span class="o">=</span><span class="n">GOOGLE_API_KEY</span><span class="p">)</span> <span class="c1">#for m in genai.list_models(): </span> <span class="c1"># print(m.name) </span> <span class="c1">#model = genai.GenerativeModel("gemini-1.5-flash") </span><span class="n">model</span> <span class="o">=</span> <span class="n">genai</span><span class="p">.</span><span class="nc">GenerativeModel</span><span class="p">(</span><span class="sh">"</span><span class="s">gemini-3.5-flash-lite</span><span class="sh">"</span><span class="p">)</span> <span class="n">chat</span> <span class="o">=</span> <span class="n">model</span><span class="p">.</span><span class="nf">start_chat</span><span class="p">(</span><span class="n">history</span><span class="o">=</span><span class="p">[])</span> <span class="n">app</span> <span class="o">=</span> <span class="nc">Flask</span><span class="p">(</span><span class="n">__name__</span><span class="p">)</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">'</span><span class="s">/</span><span class="sh">'</span><span class="p">)</span> <span class="k">def</span> <span class="nf">index</span><span class="p">():</span> <span class="k">return</span> <span class="nf">render_template</span><span class="p">(</span><span class="sh">'</span><span class="s">Welcome.html</span><span class="sh">'</span><span class="p">)</span> <span class="nd">@app.route</span><span class="p">(</span><span class="sh">'</span><span class="s">/chat</span><span class="sh">'</span><span class="p">,</span> <span class="n">methods</span><span class="o">=</span><span class="p">[</span><span class="sh">'</span><span class="s">POST</span><span class="sh">'</span><span class="p">])</span> <span class="k">def</span> <span class="nf">chat_response</span><span class="p">():</span> <span class="n">user_input</span> <span class="o">=</span> <span class="n">request</span><span class="p">.</span><span class="n">json</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="sh">'</span><span class="s">message</span><span class="sh">'</span><span class="p">)</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">user_input</span><span class="p">:</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">error</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">No message provided</span><span class="sh">"</span><span class="p">}),</span> <span class="mi">400</span> <span class="k">try</span><span class="p">:</span> <span class="n">response_raw</span> <span class="o">=</span> <span class="n">chat</span><span class="p">.</span><span class="nf">send_message</span><span class="p">(</span><span class="n">user_input</span><span class="p">)</span> <span class="n">response</span> <span class="o">=</span> <span class="n">response_raw</span><span class="p">.</span><span class="n">text</span> <span class="c1"># markdown text </span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">response</span><span class="sh">"</span><span class="p">:</span> <span class="n">response</span><span class="p">})</span> <span class="k">except</span> <span class="nb">Exception</span> <span class="k">as</span> <span class="n">e</span><span class="p">:</span> <span class="nf">print</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">Error: </span><span class="si">{</span><span class="n">e</span><span class="si">}</span><span class="sh">"</span><span class="p">)</span> <span class="k">return</span> <span class="nf">jsonify</span><span class="p">({</span><span class="sh">"</span><span class="s">error</span><span class="sh">"</span><span class="p">:</span> <span class="nf">str</span><span class="p">(</span><span class="n">e</span><span class="p">)}),</span> <span class="mi">500</span> <span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="sh">'</span><span class="s">__main__</span><span class="sh">'</span><span class="p">:</span> <span class="n">app</span><span class="p">.</span><span class="nf">run</span><span class="p">(</span><span class="n">debug</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> </code></pre> </div> <p>I have given both ways the 2nd one gives more formatted output like DeepSeek, ChatGpt. Try yourself!!!</p> <p>All the best!!!!!!!!!!!!!!!!!!!!!!!!</p> ai webdev programming javascript Venkatesh Jonnagadla Tue, 27 Oct 2026 09:43:17 +0000 https://dev.to/vjonnagadla/simple-ai-cli-chatbot-4m2j https://dev.to/vjonnagadla/simple-ai-cli-chatbot-4m2j <div class="highlight js-code-highlight"> <pre class="highlight python"><code><span class="c1">#!pip install langchain-openai </span><span class="kn">from</span> <span class="n">langchain_openai</span> <span class="kn">import</span> <span class="n">ChatOpenAI</span> <span class="kn">import</span> <span class="n">os</span> <span class="kn">import</span> <span class="n">httpx</span> <span class="n">client</span> <span class="o">=</span> <span class="n">httpx</span><span class="p">.</span><span class="nc">Client</span><span class="p">(</span><span class="n">verify</span><span class="o">=</span><span class="bp">False</span><span class="p">)</span> <span class="n">llm</span> <span class="o">=</span> <span class="nc">ChatOpenAI</span><span class="p">(</span> <span class="n">base_url</span><span class="o">=</span><span class="sh">"</span><span class="s">https://yourbaseurl.com</span><span class="sh">"</span><span class="p">,</span> <span class="n">model</span> <span class="o">=</span> <span class="sh">"</span><span class="s">azure/genailab-maas-gpt-4.1-nano</span><span class="sh">"</span><span class="p">,</span> <span class="n">api_key</span><span class="o">=</span><span class="sh">"</span><span class="s">YourAPIKey</span><span class="sh">"</span><span class="p">,</span> <span class="n">http_client</span> <span class="o">=</span> <span class="n">client</span> <span class="p">)</span> <span class="n">response</span><span class="o">=</span> <span class="n">llm</span><span class="p">.</span><span class="nf">invoke</span><span class="p">(</span><span class="sh">"</span><span class="s">what is the 2 to the power of 20 value?</span><span class="sh">"</span><span class="p">)</span> <span class="nf">print</span><span class="p">(</span><span class="n">response</span><span class="p">.</span><span class="n">content</span><span class="p">)</span> </code></pre> </div> ai webdev programming Venkatesh Jonnagadla Tue, 27 Oct 2026 09:37:29 +0000 https://dev.to/vjonnagadla/your-first-rag-application-for-a-pdf-summay-2okf https://dev.to/vjonnagadla/your-first-rag-application-for-a-pdf-summay-2okf <div class="highlight js-code-highlight"> <pre class="highlight python"><code> <span class="kn">import</span> <span class="n">os</span> <span class="kn">import</span> <span class="n">tempfile</span> <span class="kn">from</span> <span class="n">pathlib</span> <span class="kn">import</span> <span class="n">Path</span> <span class="kn">import</span> <span class="n">streamlit</span> <span class="k">as</span> <span class="n">st</span> <span class="kn">import</span> <span class="n">httpx</span> <span class="kn">from</span> <span class="n">pdfminer.high_level</span> <span class="kn">import</span> <span class="n">extract_text</span> <span class="kn">from</span> <span class="n">langchain_text_splitters</span> <span class="kn">import</span> <span class="n">RecursiveCharacterTextSplitter</span> <span class="kn">from</span> <span class="n">langchain_openai</span> <span class="kn">import</span> <span class="n">ChatOpenAI</span><span class="p">,</span> <span class="n">OpenAIEmbeddings</span> <span class="kn">from</span> <span class="n">langchain_community.vectorstores</span> <span class="kn">import</span> <span class="n">Chroma</span> <span class="kn">from</span> <span class="n">langchain_classic.chains</span> <span class="kn">import</span> <span class="n">RetrievalQA</span> <span class="c1"># Streamlit configuration </span> <span class="n">st</span><span class="p">.</span><span class="nf">set_page_config</span><span class="p">(</span><span class="n">page_title</span><span class="o">=</span><span class="sh">"</span><span class="s">RAG PDF Summarizer</span><span class="sh">"</span><span class="p">)</span> <span class="n">st</span><span class="p">.</span><span class="nf">title</span><span class="p">(</span><span class="sh">"</span><span class="s">RAG-powered PDF Summarizer</span><span class="sh">"</span><span class="p">)</span> <span class="c1"># API configuration </span> <span class="n">API_KEY</span> <span class="o">=</span> <span class="sh">"</span><span class="s">Your API Key</span><span class="sh">"</span> <span class="n">BASE_URL</span> <span class="o">=</span> <span class="sh">"</span><span class="s">https://yourbaseurl.com</span><span class="sh">"</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">API_KEY</span><span class="p">:</span> <span class="n">st</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="sh">"</span><span class="s">GENAI_API_KEY is not configured.</span><span class="sh">"</span><span class="p">)</span> <span class="n">st</span><span class="p">.</span><span class="nf">stop</span><span class="p">()</span> <span class="c1"># Keep TLS certificate verification enabled. </span><span class="n">client</span> <span class="o">=</span> <span class="n">httpx</span><span class="p">.</span><span class="nc">Client</span><span class="p">(</span><span class="n">timeout</span><span class="o">=</span><span class="mf">120.0</span><span class="p">,</span> <span class="n">verify</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> <span class="n">llm</span> <span class="o">=</span> <span class="nc">ChatOpenAI</span><span class="p">(</span> <span class="n">base_url</span><span class="o">=</span><span class="n">BASE_URL</span><span class="p">,</span> <span class="n">model</span><span class="o">=</span><span class="sh">"</span><span class="s">azure_ai/genailab-maas-DeepSeek-V3-0324</span><span class="sh">"</span><span class="p">,</span> <span class="n">api_key</span><span class="o">=</span><span class="n">API_KEY</span><span class="p">,</span> <span class="n">http_client</span><span class="o">=</span><span class="n">client</span><span class="p">,</span> <span class="p">)</span> <span class="n">embedding_model</span> <span class="o">=</span> <span class="nc">OpenAIEmbeddings</span><span class="p">(</span> <span class="n">base_url</span><span class="o">=</span><span class="n">BASE_URL</span><span class="p">,</span> <span class="n">model</span><span class="o">=</span><span class="sh">"</span><span class="s">azure/genailab-maas-text-embedding-3-large</span><span class="sh">"</span><span class="p">,</span> <span class="n">api_key</span><span class="o">=</span><span class="n">API_KEY</span><span class="p">,</span> <span class="n">http_client</span><span class="o">=</span><span class="n">client</span><span class="p">,</span> <span class="p">)</span> <span class="c1"># PDF upload </span> <span class="n">uploaded_file</span> <span class="o">=</span> <span class="n">st</span><span class="p">.</span><span class="nf">file_uploader</span><span class="p">(</span> <span class="sh">"</span><span class="s">Upload a PDF</span><span class="sh">"</span><span class="p">,</span> <span class="nb">type</span><span class="o">=</span><span class="p">[</span><span class="sh">"</span><span class="s">pdf</span><span class="sh">"</span><span class="p">],</span> <span class="p">)</span> <span class="k">if</span> <span class="n">uploaded_file</span> <span class="ow">is</span> <span class="ow">not</span> <span class="bp">None</span><span class="p">:</span> <span class="n">temp_path</span> <span class="o">=</span> <span class="bp">None</span> <span class="k">try</span><span class="p">:</span> <span class="c1"># Step 1: Save the uploaded PDF temporarily </span> <span class="k">with</span> <span class="n">tempfile</span><span class="p">.</span><span class="nc">NamedTemporaryFile</span><span class="p">(</span> <span class="n">delete</span><span class="o">=</span><span class="bp">False</span><span class="p">,</span> <span class="n">suffix</span><span class="o">=</span><span class="sh">"</span><span class="s">.pdf</span><span class="sh">"</span><span class="p">,</span> <span class="p">)</span> <span class="k">as</span> <span class="n">temp_file</span><span class="p">:</span> <span class="n">temp_file</span><span class="p">.</span><span class="nf">write</span><span class="p">(</span><span class="n">uploaded_file</span><span class="p">.</span><span class="nf">getvalue</span><span class="p">())</span> <span class="n">temp_path</span> <span class="o">=</span> <span class="n">temp_file</span><span class="p">.</span><span class="n">name</span> <span class="c1"># Step 2: Extract text </span> <span class="k">with</span> <span class="n">st</span><span class="p">.</span><span class="nf">spinner</span><span class="p">(</span><span class="sh">"</span><span class="s">Extracting PDF text...</span><span class="sh">"</span><span class="p">):</span> <span class="n">raw_text</span> <span class="o">=</span> <span class="nf">extract_text</span><span class="p">(</span><span class="n">temp_path</span><span class="p">)</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">raw_text</span> <span class="ow">or</span> <span class="ow">not</span> <span class="n">raw_text</span><span class="p">.</span><span class="nf">strip</span><span class="p">():</span> <span class="n">st</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span> <span class="sh">"</span><span class="s">No readable text found. </span><span class="sh">"</span> <span class="sh">"</span><span class="s">If this is a scanned PDF, OCR is required.</span><span class="sh">"</span> <span class="p">)</span> <span class="n">st</span><span class="p">.</span><span class="nf">stop</span><span class="p">()</span> <span class="c1"># Step 3: Split text into chunks </span> <span class="n">text_splitter</span> <span class="o">=</span> <span class="nc">RecursiveCharacterTextSplitter</span><span class="p">(</span> <span class="n">chunk_size</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span> <span class="n">chunk_overlap</span><span class="o">=</span><span class="mi">200</span><span class="p">,</span> <span class="p">)</span> <span class="n">chunks</span> <span class="o">=</span> <span class="n">text_splitter</span><span class="p">.</span><span class="nf">split_text</span><span class="p">(</span><span class="n">raw_text</span><span class="p">)</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">chunks</span><span class="p">:</span> <span class="n">st</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="sh">"</span><span class="s">No text chunks were generated.</span><span class="sh">"</span><span class="p">)</span> <span class="n">st</span><span class="p">.</span><span class="nf">stop</span><span class="p">()</span> <span class="n">st</span><span class="p">.</span><span class="nf">write</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">Created </span><span class="si">{</span><span class="nf">len</span><span class="p">(</span><span class="n">chunks</span><span class="p">)</span><span class="si">}</span><span class="s"> text chunks.</span><span class="sh">"</span><span class="p">)</span> <span class="c1"># Step 4: Create the Chroma vector database </span> <span class="n">chroma_dir</span> <span class="o">=</span> <span class="n">Path</span><span class="p">.</span><span class="nf">home</span><span class="p">()</span> <span class="o">/</span> <span class="sh">"</span><span class="s">rag_chroma_data</span><span class="sh">"</span> <span class="n">chroma_dir</span><span class="p">.</span><span class="nf">mkdir</span><span class="p">(</span><span class="n">parents</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="n">exist_ok</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span> <span class="k">with</span> <span class="n">st</span><span class="p">.</span><span class="nf">spinner</span><span class="p">(</span><span class="sh">"</span><span class="s">Indexing PDF...</span><span class="sh">"</span><span class="p">):</span> <span class="n">vectordb</span> <span class="o">=</span> <span class="n">Chroma</span><span class="p">.</span><span class="nf">from_texts</span><span class="p">(</span> <span class="n">texts</span><span class="o">=</span><span class="n">chunks</span><span class="p">,</span> <span class="n">embedding</span><span class="o">=</span><span class="n">embedding_model</span><span class="p">,</span> <span class="n">persist_directory</span><span class="o">=</span><span class="nf">str</span><span class="p">(</span><span class="n">chroma_dir</span><span class="p">),</span> <span class="n">collection_name</span><span class="o">=</span><span class="sh">"</span><span class="s">pdf_collection</span><span class="sh">"</span><span class="p">,</span> <span class="p">)</span> <span class="c1"># Step 5: Create retriever </span> <span class="n">retriever</span> <span class="o">=</span> <span class="n">vectordb</span><span class="p">.</span><span class="nf">as_retriever</span><span class="p">(</span> <span class="n">search_type</span><span class="o">=</span><span class="sh">"</span><span class="s">similarity</span><span class="sh">"</span><span class="p">,</span> <span class="n">search_kwargs</span><span class="o">=</span><span class="p">{</span><span class="sh">"</span><span class="s">k</span><span class="sh">"</span><span class="p">:</span> <span class="nf">min</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="nf">len</span><span class="p">(</span><span class="n">chunks</span><span class="p">))},</span> <span class="p">)</span> <span class="c1"># Step 6: Create the RAG chain </span> <span class="n">rag_chain</span> <span class="o">=</span> <span class="n">RetrievalQA</span><span class="p">.</span><span class="nf">from_chain_type</span><span class="p">(</span> <span class="n">llm</span><span class="o">=</span><span class="n">llm</span><span class="p">,</span> <span class="n">chain_type</span><span class="o">=</span><span class="sh">"</span><span class="s">stuff</span><span class="sh">"</span><span class="p">,</span> <span class="n">retriever</span><span class="o">=</span><span class="n">retriever</span><span class="p">,</span> <span class="n">return_source_documents</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span> <span class="p">)</span> <span class="c1"># Step 7: Generate the summary </span> <span class="n">summary_prompt</span> <span class="o">=</span> <span class="p">(</span> <span class="sh">"</span><span class="s">Summarize the uploaded document using the retrieved context. </span><span class="sh">"</span> <span class="sh">"</span><span class="s">Explain the main topics, key findings, important facts, </span><span class="sh">"</span> <span class="sh">"</span><span class="s">and conclusions. Do not invent unsupported information.</span><span class="sh">"</span> <span class="p">)</span> <span class="k">with</span> <span class="n">st</span><span class="p">.</span><span class="nf">spinner</span><span class="p">(</span><span class="sh">"</span><span class="s">Generating summary...</span><span class="sh">"</span><span class="p">):</span> <span class="n">result</span> <span class="o">=</span> <span class="n">rag_chain</span><span class="p">.</span><span class="nf">invoke</span><span class="p">({</span><span class="sh">"</span><span class="s">query</span><span class="sh">"</span><span class="p">:</span> <span class="n">summary_prompt</span><span class="p">})</span> <span class="c1"># Step 8: Display results </span> <span class="n">st</span><span class="p">.</span><span class="nf">subheader</span><span class="p">(</span><span class="sh">"</span><span class="s">Document Summary</span><span class="sh">"</span><span class="p">)</span> <span class="n">st</span><span class="p">.</span><span class="nf">write</span><span class="p">(</span><span class="n">result</span><span class="p">[</span><span class="sh">"</span><span class="s">result</span><span class="sh">"</span><span class="p">])</span> <span class="k">with</span> <span class="n">st</span><span class="p">.</span><span class="nf">expander</span><span class="p">(</span><span class="sh">"</span><span class="s">View source documents</span><span class="sh">"</span><span class="p">):</span> <span class="k">for</span> <span class="n">i</span><span class="p">,</span> <span class="n">doc</span> <span class="ow">in</span> <span class="nf">enumerate</span><span class="p">(</span> <span class="n">result</span><span class="p">[</span><span class="sh">"</span><span class="s">source_documents</span><span class="sh">"</span><span class="p">],</span> <span class="n">start</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="p">):</span> <span class="n">st</span><span class="p">.</span><span class="nf">markdown</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">**Source </span><span class="si">{</span><span class="n">i</span><span class="si">}</span><span class="s">**</span><span class="sh">"</span><span class="p">)</span> <span class="n">st</span><span class="p">.</span><span class="nf">write</span><span class="p">(</span><span class="n">doc</span><span class="p">.</span><span class="n">page_content</span><span class="p">)</span> <span class="k">except</span> <span class="nb">Exception</span> <span class="k">as</span> <span class="n">exc</span><span class="p">:</span> <span class="n">st</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="sa">f</span><span class="sh">"</span><span class="s">Processing failed: </span><span class="si">{</span><span class="n">exc</span><span class="si">}</span><span class="sh">"</span><span class="p">)</span> <span class="k">finally</span><span class="p">:</span> <span class="k">if</span> <span class="n">temp_path</span> <span class="ow">and</span> <span class="n">os</span><span class="p">.</span><span class="n">path</span><span class="p">.</span><span class="nf">exists</span><span class="p">(</span><span class="n">temp_path</span><span class="p">):</span> <span class="n">os</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="n">temp_path</span><span class="p">)</span> </code></pre> </div> rag ai webdev programming Venkatesh Jonnagadla Mon, 10 Nov 2025 15:05:38 +0000 https://dev.to/vjonnagadla/ssis-send-html-email-from-ssis-job-using-dtsx-package-20n2 https://dev.to/vjonnagadla/ssis-send-html-email-from-ssis-job-using-dtsx-package-20n2 <p>When you are working in automating the reports you often require sending the result sets as part of the email body. Unfortunately, there is no direct way in SSIS to do so. We need to use some trick to achieve this. <br> First take the result set into a package variable (ex-gStrResultSet). You must be using the execute sql task for this. The query in the execute sql task should return the XML form of the table. For which you need to use the below format for your query.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>select (select COL1 as td for XML path(''),type), (select COL2 as td for XML path(''),type), (select COL3 as td for XML path(''),type), (select COL4 as td for XML path(''),type) from (SELECT COL1,COL2,COL3,COL4 FROM dbo.Table ) tbl FOR XML PATH('tr') </code></pre> </div> <p>Now you need to send the XML table as part of the email body along with the other text you need. As the email body is of HTML, you need to make changes in such a way that XML output fits into the HTML body of the email. The sample code(C# &amp; HTML) goes like below-<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>public void Main() { try { var emailBody = "&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;" + "&lt;p&gt; Hi ,&lt;br&gt;&lt;br&gt;Please find the table as HTML Report below.&lt;br&gt;&lt;/p&gt;" + @"&lt;table border=""1"" cellpadding=""2"" style=""border-collapse: collapse;""&gt;" + @"&lt;tr style=""color:black;background-color:skyblue;""&gt;" + "&lt;th&gt; COL1 &lt;/th&gt;" + "&lt;th&gt; COL2 &lt;/th&gt;" + "&lt;th&gt; COL3 &lt;/th&gt;" + "&lt;th&gt; COL4 &lt;/th&gt;" + "&lt;/tr&gt;"; // Ensure variable exists and is not null var htmlTable = Dts.Variables["User::gStrResultSet"].Value?.ToString() ?? ""; emailBody += htmlTable.Replace("&lt;ROOT&gt;", "").Replace("&lt;/ROOT&gt;", ""); emailBody += "&lt;/table&gt;&lt;br&gt;&lt;br&gt;&lt;p&gt;Regards,&lt;br&gt;SSIS Job&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;"; string smtpServer = "Test.orgnaization.COM"; // get it from your organization int smtpPort = 25; string reportTitle = "HTML Report"; string todayDate = DateTime.Now.ToString("MM/dd/yyyy"); string subject = $"{reportTitle} - {todayDate}"; string senderEmail = notification@organization.com; string recipientEmail = recipient@organization.com; MailMessage mail = new MailMessage(senderEmail, recipientEmail, subject, emailBody) { IsBodyHtml = true }; SmtpClient smtpClient = new SmtpClient(smtpServer, smtpPort) { DeliveryMethod = SmtpDeliveryMethod.Network, UseDefaultCredentials = true }; mail.To.Add(toaddress1@organization.com); mail.To.Add(toaddress2@organization.com); mail.CC.Add(ccAddress1@organization.com); mail.CC.Add(ccAddress2@organization.com); smtpClient.Send(mail); Dts.TaskResult = (int)ScriptResults.Success; } catch (Exception ex) { Dts.TaskResult = (int)ScriptResults.Failure; } } </code></pre> </div> <p>Hope this helps!!!! Thank you!!!!!!!!!</p> ssis sqlserver sqlserverintegrationservices Venkatesh Jonnagadla Mon, 10 Nov 2025 10:24:10 +0000 https://dev.to/vjonnagadla/powerbuilder-connect-to-ms-sql-server-202 https://dev.to/vjonnagadla/powerbuilder-connect-to-ms-sql-server-202 <p>You can connect to Microsoft SQL Server from PowerBuilder in different ways.<br> 1/ Using SQL Native Client Provide <br> 2/ Using SQL OLEDB Provider<br> 3/ Creating a DSN and using ODBC driver<br> 4/ Using ODBC and default SQL Server provider provided in windows machines</p> <p>Using SQL Native Client<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>// Using SQL Native Client SQLCA.DBMS = "SNC SQL Native Client(OLE DB)" or "SNC" //Using OLEDB Provider SQLCA.DBMS = "MSOLEDB" // below All parameters will be same SQLCA.Database = "YourDatabase" SQLCA.ServerName = "YourServer" SQLCA.LogId = "your_username" SQLCA.LogPass = "your_password" SQLCA.AutoCommit = False SQLCA.DBParm = "Provider='SQLNCLI11',Database='YourDatabase',TrimSpaces=1,StaticBind=0" If it uses windows authentication, you need to add this parameter and don't use the LogID and LogPass SQLCA.DBParm = "Provider='SQLNCLI11',Database='YourDatabase',TrimSpaces=1,StaticBind=0,TrustedConnection=1" </code></pre> </div> <p>// Using ODBC Provider<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>SQLCA.DBMS = "ODBC" SQLCA.ServerName = "YourServer" SQLCA.dbparm="ConnectString='Driver={SQL Server};Server=myServerAddress;Database=myDataBase;PORT=portno;Trusted_Connection=Yes;'" // If you are using SQL authentication SQLCA.dbparm="ConnectString=Driver='{SQL Server};Server=myServerName,myPortNumber;Database=myDataBase;Uid=myUsername;Pwd=myPassword;'" </code></pre> </div> <p>// Also using the ODBC provider you can connect to sqlserver with different types of middleware software like below<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>SQLCA.DBMS = "ODBC" SQLCA.AutoCommit = False SQLCA.DBParm="ConnectString='DRIVER={SQL Server};SERVER=servername;DATABASE=DBNAME;PORT=1435;PROTOCOL=TCPIP;Trusted_Connection=yes'" SQLCA.DBParm="ConnectString='Driver={ODBC Driver 17 for SQL Server};Server=servername;Database=DBNAME;Trusted_Connection=yes;'" SQLCA.DBParm="ConnectString='Driver={SQL Server Native Client 11.0};Server=servername;Database=DBNAME;Trusted_Connection=yes;'" Connect using SQLCA; </code></pre> </div> <p>You can use the reference - <a href="https://www.connectionstrings.com/microsoft-sql-server-odbc-driver/" rel="noopener noreferrer">https://www.connectionstrings.com/microsoft-sql-server-odbc-driver/</a></p> <p>Please make sure you are including the related DLL in the build <br> for SNC you need to include - pbsnc.dll for oledb- pbmsoledbsql.dll</p> powerbuilder Venkatesh Jonnagadla Fri, 07 Nov 2025 17:27:17 +0000 https://dev.to/vjonnagadla/powerbuilder-select-multiple-rows-on-datawindow-34oo https://dev.to/vjonnagadla/powerbuilder-select-multiple-rows-on-datawindow-34oo <p>On Datawindow clicked event -<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>if row&gt;0 then if keydown(keycontrol!) then this.selectrow(row,true) Else this.selectrow(0,false) this.selectrow(row,true) end if if keydown(keyshift!) then this.event trigger ue_shift(row) end if end if li_selectedrow=row this.setrow(row) </code></pre> </div> <p>Custom event code ue_shift<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>long ll_oldrow,ll_newrow,ll_counter,ll_startrow,ll_endrow ll_oldrow=li_selectedrow if ll_oldrow&gt;al_row then ll_startrow=al_row ll_endrow=ll_oldrow else ll_startrow=ll_oldrow ll_endrow=al_row end if for ll_counter=ll_startrow to ll_endrow step 1 this.selectrow(ll_counter,true) Next this.setrow(al_row) this.setcolumn(1) return 0 </code></pre> </div> <p>Thank you!!</p> powerbuilder Venkatesh Jonnagadla Fri, 07 Nov 2025 17:23:35 +0000 https://dev.to/vjonnagadla/powerbuilder-disable-copy-paste-on-a-datawindow-mhb https://dev.to/vjonnagadla/powerbuilder-disable-copy-paste-on-a-datawindow-mhb <p>create a event and map to pbm_keydown on a datawindow to disable copy paste (you can customize according to the columns)<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>boolean lb_1 string ls_colname lb_1 = true IF lb_1 and KeyDown(KeyControl!) and KeyDown(65 ) THEN messageBox("Info","Copy/Paste Disabled") ls_colname = this.getcolumnname( ) If ls_colname ="lanme" then messageBox("Info","Copy/Paste Disabled on last name" ) end if END IF </code></pre> </div> powerbuilder Venkatesh Jonnagadla Fri, 07 Nov 2025 17:14:11 +0000 https://dev.to/vjonnagadla/powerbuilder-treeview-control-1i2m https://dev.to/vjonnagadla/powerbuilder-treeview-control-1i2m <p>Here is an example of Treeview control code -<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>integer li_a,li_b,li_c long ll_level2 // First level Operationsw li_a=tv_test.insertitemlast(0," First Generation",1) li_b=tv_test.insertitemlast(0," Second Generation",1) li_c=tv_test.insertitemlast(0," Third Generation",1) // Second level under the First Generation i.e., li_a tv_test.insertitemlast(li_a,"1G-1stItem",2) tv_test.insertitemlast(li_a,"1G-2ndItem",2) // Second level under the Second Generation i.e., li_b tv_test.insertitemlast(li_b,"2G-1stItem",2) ll_level2=tv_test.insertitemlast(li_b,"2G-2ndItem",2) tv_test.insertitemlast(li_b,"2G-3ndItem",2) tv_test.insertitemlast(li_b,"2G-4ndItem",2) tv_test.insertitemlast(li_b,"2G-5ndItem",2) tv_test.insertitemlast(li_b,"2G-6ndItem",2) // sub level under second generation tv_test.insertitemlast( ll_level2, "2G-2nItem-1SubItem", 3) tv_test.insertitemlast(li_c,"3G-1stItem",2) </code></pre> </div> <p>To view the level and lable of the item you have clicked on a tree view control - </p> <p>Selection Changed/Clicked on TreeView -<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>treeviewitem tvi_tvitem //set treeview item here below tv_test.getitem( newhandle, tvi_tvitem) Messagebox(" Level of the treeview selected item ",String(tvi_tvitem.level)) Messagebox("Lable of the treeview Selected Item",tvi_tvitem.label) </code></pre> </div> <p>Thank you!!!!!!</p> powerbuilder Venkatesh Jonnagadla Fri, 07 Nov 2025 17:00:35 +0000 https://dev.to/vjonnagadla/powerbuilder-custom-window-for-dw-properties-2dee https://dev.to/vjonnagadla/powerbuilder-custom-window-for-dw-properties-2dee <p>If you are utilizing PFC or any custom datawindow object in your project, this will be extremely beneficial.</p> <p>You have the ability to create a custom event on the datawindow and associate it with any of the shortcuts such as Ctrl+Shift+P or similar, allowing a new window to open that displays all the properties of the datawindow. The code I am presenting here is fundamental, but you can modify it to suit your requirements. Please note that you must create window based on the variables I used in the below code.</p> <p>Initially, pass the datawindow for which you wish to display properties from an event or function as illustrated below -<br> <code>openwithparm(w_dwproperties,this)</code></p> <p>design w_dwproperties according to the variables in below code - </p> <p>in the w_dwproperties open() event -<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>powerobject lpo_arg datawindow ldw_arg string ls_colcount,ls_colname,ls_concatstr int li_counter lpo_arg=Message.powerobjectparm if lpo_arg.typeof( )=datawindow! then ldw_arg=lpo_arg sle_1.text=ldw_arg.dataobject sle_2.text=ldw_arg.classname( ) mle_1.text=ldw_arg.describe('datawindow.table.select') ls_colcount=ldw_arg.describe( "DataWindow.Column.Count") for li_counter=1 to integer(ls_colcount) ls_concatstr='#'+string(li_counter)+'.name' ls_colname=ldw_arg.describe(ls_concatstr) ddlb_1.additem(ls_colname) next else end if </code></pre> </div> <p>Hope this helps!!!!!Thank you!!!!!!!!!!!</p> powerbuilder Venkatesh Jonnagadla Fri, 07 Nov 2025 16:49:35 +0000 https://dev.to/vjonnagadla/powerbuilder-popup-menu-320 https://dev.to/vjonnagadla/powerbuilder-popup-menu-320 <p>You will observe this on the data windows. By right-clicking on a data window, you will see options to insert or delete rows, as well as to trigger certain custom events within the data window. This functionality can also be applied to the windows. Here is an example.</p> <p>1/ Create menu m_popupmenu <br> 2/ If you are going to use it on datawindow then declare instance variable like below <br> <code>protected: <br> datawindow idw_datawindow</code></p> <p>in the menuitem's clicked event - modify accordingly<br> <code>idw_datawindow.event dynamic ue_insert()</code></p> <p>3/ On datawindow rbuttondown(map it accordingly)<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>m_popup lm_popup lm_popup=create m_popup lm_popup.idw_datawindow=this lm_popup.popmenu( this.pointerx( )+10,this.pointery( )+10) </code></pre> </div> <p>you must have the ue_insert() created at dw level<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>int li_i li_i=this.insertrow(0) this.scrolltorow( li_i) if li_i&lt;0 then MessageBox("Error - Insert","Error is ~n"+SQLCa.sqlerrtext) end if </code></pre> </div> <p>Hope this helps!!!!!!!!!!!!!!!!!!!!!!!!!!!! Thank you!!!</p> powerbuilder Venkatesh Jonnagadla Wed, 05 Nov 2025 18:27:42 +0000 https://dev.to/vjonnagadla/powerbuilder-dynamic-search-in-datawindow-254 https://dev.to/vjonnagadla/powerbuilder-dynamic-search-in-datawindow-254 <blockquote> <p>Create an event ue_search and map to pbm_enchange event of sle_search on a window, where sle_search is where you enter the text based on which you want to search column data on a datawindow</p> </blockquote> <p>in the ue_search event write below<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>string ls_sc if trim(this.text)='' then dw_1.setfilter('') dw_1.filter() else ls_sc="lower(item_name) like '%"+lower(this.text)+"%'" dw_1.setfilter(ls_sc) dw_1.filter() end if </code></pre> </div> powerbuilder