Decoder2704/python-chatbot-jay

1import FeatureCard from "../components/FeatureCard.jsx";2import TechPill from "../components/TechPill.jsx";3import { SectionHeader } from "../components/ui/index.js";4import "./Features.css";5 6const FEATURES = [7  {8    icon: "🐍",9    title: "Python Q&A",10    description:11      "Ask natural-language Python questions and receive answers grounded in retrieval over curated programming knowledge.",12  },13  {14    icon: "⚡",15    title: "FastAPI Backend",16    description:17      "A high-performance async API with automatic OpenAPI docs, health checks, and a clean JSON contract for the chat UI.",18  },19  {20    icon: "⚛️",21    title: "React Frontend",22    description:23      "A responsive single-page app with a polished chat experience, sample prompts, and same-origin deployment support.",24  },25  {26    icon: "📚",27    title: "Stack Overflow DB",28    description:29      "Train and serve on real-world Q&A pairs sourced from Stack Overflow–style data for relevant, practical answers.",30  },31  {32    icon: "◎",33    title: "TF-IDF Matching",34    description:35      "Classic TF-IDF vectorization and cosine similarity for fast, interpretable nearest-question retrieval.",36  },37  {38    icon: "🤗",39    title: "Hugging Face Deployment",40    description:41      "Ship as a single Docker Space: one container runs the API and the built React app for simple demos and portfolios.",42  },43];44 45const STACK = [46  { label: "Frontend", pills: ["React", "Vite"] },47  { label: "Backend", pills: ["FastAPI", "Pydantic"] },48  { label: "ML & AI", pills: ["Hugging Face", "TF-IDF"] },49  { label: "Data", pills: ["Stack Overflow dataset", "processed Q&A"] },50  { label: "DevOps", pills: ["Docker", "Hugging Face Spaces"] },51];52 53export default function Features() {54  return (55    <div className="features-page">56      <div className="features-page__inner">57        <SectionHeader58          size="hero"59          align="center"60          titleAs="h1"61          title={62            <>63              Built for <span className="ui-section-header__highlight">modern</span> Python Q&amp;A64            </>65          }66          subtitle="Everything you need to demo retrieval-powered answers—from vectorized search to a production-style API and deployable frontend—in one cohesive stack."67        />68 69        <section className="features-grid" aria-label="Product features">70          {FEATURES.map((f) => (71            <FeatureCard key={f.title} icon={f.icon} title={f.title} description={f.description} />72          ))}73        </section>74 75        <section className="features-stack" aria-labelledby="arch-stack-heading">76          <h2 id="arch-stack-heading" className="features-stack__title">77            Architectural Stack78          </h2>79          <div className="features-stack__groups">80            {STACK.map((group) => (81              <div key={group.label} className="features-stack__row">82                <p className="features-stack__label">{group.label}</p>83                <div className="features-stack__pills">84                  {group.pills.map((p) => (85                    <TechPill key={p}>{p}</TechPill>86                  ))}87                </div>88              </div>89            ))}90          </div>91        </section>92      </div>93    </div>94  );95}96