Decoder2704/python-chatbot-jay

1import DocCard from "../components/docs/DocCard.jsx";2import DocMiniCard from "../components/docs/DocMiniCard.jsx";3import DocCompactCard from "../components/docs/DocCompactCard.jsx";4import "./Docs.css";5 6export default function Docs() {7  return (8    <div className="docs-page">9      <div className="docs-page__inner">10        <header className="docs-page__header">11          <h1 className="docs-page__title">Documentation</h1>12          <p className="docs-page__subtitle">13            PyBot AI is a portfolio-grade Python Q&amp;A experience: a retrieval-backed assistant14            with a modern web UI, REST API, and one-click deployment story—documented here at a15            glance.16          </p>17        </header>18 19        <div className="docs-page__grid-2">20          <DocCard title="Overview" eyebrow="Product">21            <p>22              This chatbot is a <strong>retrieval-based</strong> Python Q&amp;A assistant. It does23              not hallucinate from scratch: it finds the closest matching questions in a{" "}24              <strong>Stack Overflow–derived knowledge base</strong>, then returns the best-scoring25              answer for your prompt—ideal for demos that emphasize classic NLP and transparent26              sourcing.27            </p>28            <div className="docs-page__minis">29              <DocMiniCard30                icon="🎯"31                title="Targeted Intent"32                description="Optimized for Python programming questions—syntax, idioms, libraries, and common pitfalls."33              />34              <DocMiniCard35                icon="🧠"36                title="Context Aware"37                description="Uses retrieved Q&amp;A context from curated pairs so replies align with real Stack Overflow discussions."38              />39            </div>40          </DocCard>41 42          <DocCard title="Architecture" eyebrow="System">43            <ul className="docs-page__arch-list">44              <li>45                <strong>React</strong> frontend (Vite) with a chat UI and marketing pages46              </li>47              <li>48                <strong>FastAPI</strong> backend serving JSON for the chat client49              </li>50              <li>51                <strong>TF-IDF</strong> vectorization and <strong>cosine similarity</strong> for52                retrieval over question embeddings53              </li>54              <li>55                <strong>Stack Overflow</strong> processed knowledge base (question–answer pairs)56              </li>57              <li>58                <strong>Docker</strong> image deployable to <strong>Hugging Face Spaces</strong>{" "}59                (single container for API + static UI)60              </li>61            </ul>62          </DocCard>63        </div>64 65        <p className="docs-page__section-label">Reference</p>66        <div className="docs-page__compact-grid">67          <DocCompactCard icon="🔌" title="Client &amp; server">68            <p>69              The React app talks to the FastAPI service using the shared client in{" "}70              <code>frontend/src/services/api.js</code>. Production builds typically use{" "}71              <strong>same-origin</strong> requests; local development can use the Vite dev72              proxy or a configured API base URL—see project deployment notes in the repo.73            </p>74            <p>75              Response fields surfaced in the UI include answer text and retrieval metadata for76              transparency (exact field names are defined by the running API and parsed in{" "}77              <code>api.js</code>).78            </p>79          </DocCompactCard>80 81          <DocCompactCard icon="🔍" title="Retrieval Flow">82            <p>User message → text cleanup → TF-IDF query vector → cosine similarity vs. index →</p>83            <ul>84              <li>Pick nearest question row</li>85              <li>Resolve best answer among duplicates by score / date rules</li>86              <li>Return answer payload to the UI</li>87            </ul>88          </DocCompactCard>89 90          <DocCompactCard icon="🚀" title="Deployment Notes">91            <p>92              Build the React app into static files; run FastAPI with Uvicorn. The Docker image93              bundles both. On Hugging Face, ensure retrieval <code>.pkl</code> artifacts and data94              ship in the image or volume per your ops checklist.95            </p>96          </DocCompactCard>97        </div>98      </div>99    </div>100  );101}102