Forem: JeffMint

Chatbot with Python (Frontend)

JeffMint — Thu, 11 Sep 2025 13:45:45 +0000

Documentation: Frontend (`frontend.py`)

This file defines the Streamlit-based frontend for the RAG (Retrieval-Augmented Generation) chatbot. It provides the user interface, handles queries, retrieves relevant document chunks from the FAISS index, and generates answers using the Groq LLM API.

Key Responsibilities

Load the FAISS index and pre-processed chunks.
Take user input (questions).
Retrieve the most relevant chunks using semantic search.
Pass the retrieved context into a Groq-powered LLM to generate an answer.
Display chat history in a custom chat UI styled with CSS.
Maintain transparency by showing the retrieved chunks.

Step-by-Step Breakdown

1. Imports and Configuration

import streamlit as st
import pickle
import faiss
from sentence_transformers import SentenceTransformer
from groq import Groq
import os
from dotenv import load_dotenv

load_dotenv()

streamlit → UI framework.
pickle → load pre-saved chunks.
faiss → fast similarity search on embeddings.
SentenceTransformer → same embedding model as backend.
Groq → client for LLM.
.env loader → loads the GROQ_API_KEY securely.

The API key is stored in environment variables (or Streamlit secrets in deployment).

2. Load Index and Chunks

INDEX_FILE = "faiss_index.bin"
CHUNKS_FILE = "chunks.pkl"
embedder = SentenceTransformer("all-MiniLM-L6-v2")

index = faiss.read_index(INDEX_FILE)
with open(CHUNKS_FILE, "rb") as f:
    chunks = pickle.load(f)

Reads the FAISS index built earlier.
Loads the corresponding chunks (document segments).
Ensures the embeddings model matches the backend.

3. Semantic Search Function

def search_index(query, k=10):
    q_vec = embedder.encode([query])
    D, I = index.search(q_vec, k)
    return [chunks[i] for i in I[0]]

Encodes the query into a vector.
Searches FAISS for the top k most relevant chunks.
Returns those chunks for answer generation.

4. LLM Answer Generation

def generate_answer(question, context_chunks):
    context = "\n\n".join(context_chunks)
    prompt = (
        f"Answer the question based on the context provided. "
        "If the question is not related to the context in any way, do NOT attempt to answer. "
        "Instead, strictly reply: 'My knowledge base does not have information about this.'\n\n"
        f"Context: {context}\n\nQuestion: {question}\nAnswer:"
    )
    response = client.chat.completions.create(
        messages=[{"role": "user", "content": prompt}],
        model="llama-3.3-70b-versatile",
    )
    return response.choices[0].message.content.strip()

Builds a RAG prompt with:
- Retrieved context.
- Question.
Sends to Groq’s LLaMA-3.3-70B model.
Returns a clean answer.
Enforces that if no context exists → chatbot says:

“My knowledge base does not have information about this.”

5. Custom Chat UI (CSS)

st.markdown(
    """
<style>
...
</style>
""",
    unsafe_allow_html=True,
)

Defines two styles:
- User messages (blue, aligned right).
- Bot messages (gray, aligned left).
Creates a chat bubble effect inside a scrollable chat container.

6. Streamlit App UI

st.title("📚 RAG Chatbot")
st.write("Ask questions based on the indexed documents.")

Adds title and short description.
Initializes chat history (st.session_state.messages).
Displays all past chat messages in styled bubbles.

7. Question Input & Processing

with st.form(key="chat_form", clear_on_submit=True):
    question = st.text_input("Your question:", key="question_input")
    submit_button = st.form_submit_button("Send")

Form input for user question.
Once submitted:
- Adds user message to history.
- Retrieves chunks via search_index().
- Calls generate_answer() to get LLM response.
- Adds bot’s response to chat history.

8. Transparency: Retrieved Chunks

st.markdown("### 🔍 Retrieved Chunks")
for i, chunk in enumerate(retrieved, 1):
    st.write(f"**Chunk {i}:** {chunk[:300]}...")

Displays the actual retrieved chunks.
Helps debug if wrong documents are being pulled.
Also available in an expander for the last query.

9. Clear Chat Button

if st.button("Clear Chat"):
    st.session_state.messages = []
    st.rerun()

Resets chat history.
Allows for a fresh session.

Workflow (Frontend)

User asks a question in Streamlit UI.
System encodes it → searches FAISS → retrieves top chunks.
Chunks + question passed into Groq LLM.
Answer generated → shown in chat UI.
Retrieved chunks displayed for transparency.

Key Notes

Frontend doesn’t rebuild the index. It relies on the backend (index_docs.py) having run beforehand.
Chat memory is session-based only (clears on refresh).
Environment variable GROQ_API_KEY must be set in:
- Local .env file.
- Streamlit Secrets (st.secrets["GROQ_API_KEY"]) during deployment.

Chatbot with Python(Customizing the AI Chatbot with your Docs)

JeffMint — Thu, 11 Sep 2025 13:28:52 +0000

Backend — `backend.py` (Full explanation)

1) One-line summary

This script:

reads every PDF in docs/,
extracts text and splits it into fixed-size chunks (with overlap),
converts those chunks to vector embeddings using sentence-transformers,
builds a FAISS index from those vectors, and
saves the FAISS index (faiss_index.bin) and the chunk list (chunks.pkl) to disk so your Streamlit app can load them for retrieval.

2) Imports & config (what each dependency does)

import os
import pickle
import numpy as np
from PyPDF2 import PdfReader
from sentence_transformers import SentenceTransformer
import faiss

os — filesystem operations (listing files, joining paths).
pickle — persist Python objects (we use it to save chunks list).
numpy — numeric arrays used by FAISS.
PyPDF2.PdfReader — extract text from PDF pages. (Note: extract_text() can return None for some pages; more on that in pitfalls.)
SentenceTransformer — embedding model (all-MiniLM-L6-v2) to convert text → dense vector.
faiss — Facebook AI Similarity Search library for efficient vector indexing & nearest-neighbor search.

Config:

embedder = SentenceTransformer("all-MiniLM-L6-v2")
INDEX_FILE = "faiss_index.bin"
CHUNKS_FILE = "chunks.pkl"

embedder is the model instance; loading this downloads model weights (first run may take time).
INDEX_FILE and CHUNKS_FILE are filenames for saving outputs.

3) `load_pdf(file_path)` — read a PDF and return full text

def load_pdf(file_path):
    pdf = PdfReader(file_path)
    text = ""
    for page in pdf.pages:
        text += page.extract_text() + "\n"
    return text

Iterates pages and concatenates page.extract_text() results.

4) `chunk_text(text, chunk_size=500, overlap=100)` — naive character-based chunking

def chunk_text(text, chunk_size=500, overlap=100):
    chunks = []
    start = 0
    while start < len(text):
        end = start + chunk_size
        chunks.append(text[start:end])
        start += chunk_size - overlap
    return chunks

Splits the text into chunks of chunk_size characters, shifting by chunk_size - overlap each time (so consecutive chunks overlap by overlap characters).
Rationale:
- Overlap ensures context continuity: boundaries rarely cut important info completely.

5) `build_index(pdf_folder="docs")` — full pipeline

Walkthrough of the function:

1.Collect chunks for all PDFs:

   all_chunks = []
   for filename in os.listdir(pdf_folder):
       if filename.endswith(".pdf"):
           text = load_pdf(os.path.join(pdf_folder, filename))
           chunks = chunk_text(text)
           all_chunks.extend(chunks)

all_chunks becomes a list of strings, order matters (index ids align with order).

2.Embed chunks:

   vectors = embedder.encode(all_chunks)
   vectors = np.array(vectors)

embedder.encode(list_of_texts) returns a list/array of vectors. By default, returns float32 or float64 depending on version — FAISS expects float32. In practice it's safer to force dtype float32.

Important: embedding all chunks at once can OOM if you have many chunks. Use batching:

 vectors = embedder.encode(all_chunks, batch_size=32, show_progress_bar=True)
 vectors = np.array(vectors).astype('float32')

3.Create FAISS index:

   dim = vectors.shape[1]
   index = faiss.IndexFlatL2(dim)
   index.add(vectors)

IndexFlatL2 = exact (brute-force) nearest neighbor search using L2 distance. Works for small-to-medium collections. Pros: simple and exact. Cons: slow on large collections.
The index.add(vectors) adds vectors in the same order as all_chunks. FAISS internal ids = 0..N-1 in that order — that’s how you map back to chunks.

4.Save index and chunks:

   faiss.write_index(index, INDEX_FILE)
   with open(CHUNKS_FILE, "wb") as f:
       pickle.dump(all_chunks, f)

Saves persistent files which your Streamlit frontend loads at runtime.

6) How to run this script

# make sure your PDFs are in docs/
python -m backend
# output: faiss_index.bin and chunks.pkl in the current directory

Chatbot with Python(Deployment Phase)

JeffMint — Thu, 11 Sep 2025 10:43:29 +0000

Deployment Guide for Streamlit PDF Chatbot with FAISS and Groq

This guide walks you through:

Preparing your project locally.
Pushing your code to GitHub.
Deploying your app on Streamlit Cloud.
Setting up your GROQ API key securely.

Prerequisites

Git installed locally.
GitHub account created.
Streamlit Cloud account (sign in with GitHub).
Python 3.9+ installed.
GROQ API Key generated.

Project Structure

Your project should look like this:

project/
│── docs/                # Folder containing your PDF files
│── .env         # Your environment variables
│── .gitignore
│── backend.py
│── chunks.pkl                 # Pickled chunks
│── faiss_index.bin       # FAISS index (generated after indexing)   
│── frontend.py
│── pyproject.toml
│── uv.lock

Step 1: Build the FAISS Index Locally

Before deploying, preprocess PDFs and build the docucment backend:

python -m backend

This generates:

faiss_index.bin → FAISS vector index
chunks.pkl → Pickled text chunks

These files must be committed to GitHub for the app to work.

Step 2: Push Code to GitHub

Initialize Git:

git init

Add a .gitignore to your root directory and these in there:

__pycache__
app.egg-info
*.pyc
.mypy_cache
.coverage
htmlcov
.cache
.venv
.env
Permissions.txt
commands.txt
docs/personal
.vscode

Add files:

git add .

Commit:

git commit -m "Initial commit - PDF Chatbot with FAISS"

Create a new repository on GitHub.

Link remote:

git remote add origin https://github.com/<your-username>/<repo-name>.git

Push:

git branch -M main
git push -u origin main

Step 3: Deploy on Streamlit Cloud

Go to Streamlit Cloud.
Log in with your GitHub account.
Click New app.
Choose your repository and branch (master).
Set the entrypoint to frontend.py.
Go to ⋮ > Settings > Secrets
Add:

GROQ_API_KEY = "your_api_key_here"

Updating PDFs

When you add new PDFs:

Place them inside docs/.
Run:

python -m backend

Commit and push updates:

git add .
git commit -m "Updated index with new PDFs"
git push

Streamlit Cloud will automatically redeploy with the new index.

Troubleshooting

FAISS index not found → Run python -m backend before deploying.
Wrong answers → Make sure your docs/ folder had the right PDFs before indexing.
Key errors → Double-check you added GROQ_API_KEY in Streamlit secrets.

🎉 Done! Your Streamlit PDF Chatbot with FAISS is now live, secure, and powered by GROQ.

Chatbot with Python(Environment Setup)

JeffMint — Thu, 11 Sep 2025 07:39:27 +0000

Environment Setup for Building a RAG Chatbot with Python, Streamlit, Groq, LLaMA, FAISS, and VS Code

This guide provides step-by-step instructions to set up a development environment for building a Retrieval-Augmented Generation (RAG) chatbot using Python, Streamlit, Groq with LLaMA, FAISS, and Visual Studio Code (VS Code). The instructions are tailored for beginners and assume you are starting from scratch on a Windows, macOS, or Linux system.

Prerequisites

Before you begin, ensure you have the following:

A computer with Windows, macOS, or Linux.
An internet connection to download tools and libraries.
A free Groq API key for accessing LLaMA models.
A GitHub account

Step 1: Install Python

Streamlit and other required libraries need Python 3.7 or higher. Follow these steps to install Python:

1.Download Python:

Visit the official Python website and download the latest version (e.g., Python 3.10 or higher).

Choose the installer for your operating system (Windows, macOS, or Linux).

2.Install Python:

Windows: Run the installer. Check the box to "Add Python to PATH" during installation.

macOS/Linux: Use the installer or a package manager like Homebrew (brew install python) on macOS or apt/yum on Linux.

Follow the prompts to complete the installation.

python --version

You should see the installed Python version (e.g., Python 3.10.12). If not, ensure Python is added to your system's PATH.

Step 2: Install Visual Studio Code

VS Code is a lightweight, powerful IDE for Python development with excellent Streamlit support.

1.Download VS Code:

Go to the VS Code website and download the installer for your operating system.

2.Install VS Code:

Run the installer and follow the prompts to install.

Open VS Code after installation to confirm it works.

3.Install Python Extension:

In VS Code, go to the Extensions view.

Search for "Python" and install the official Python extension by Microsoft.

This extension provides syntax highlighting, debugging, and environment management for Python.

Step 3: Set Up a virtual environment with uv

A virtual environment isolates project dependencies to avoid conflicts.

uv init chatbot(You can choose a different name to use in place of the chatbot)

Step 4: Install Required Libraries

With the virtual environment active, install the necessary Python libraries using pip.

uv add streamlit groq faiss-cpu sentence-transformers PyPDF2

Step 5: Configure the Groq API Key

To use LLaMA models via Groq, you need an API key.

1.Obtain a Groq API Key:

Copy the key and keep it secure.

2.Set Up a .env
Create a .env file in your root directory

In your .env file, have GROQ_API_KEY=your-groq-api-key
NB: Leave no whitespaces in your .env file else API keys might not work as expected.

Add .env to your .gitignore file to avoid exposing the key if using version control.

Step 8: Next Steps

With your environment set up, you can start building the RAG chatbot:

Document Ingestion: Use pypdf to load documents and sentence-transformers to create embeddings.

Vector Store: Use FAISS to store and search document embeddings.

LLM Integration: Use with Groq to query LLaMA models for generating responses.

Streamlit UI: Build an interactive chat interface with Streamlit.

Deployment: Deploy your app to Streamlit Community Cloud by following the

Additional Resources

Streamlit Documentation for building web apps.
FAISS Documentation for vector store setup.
Groq Documentation for LLaMA model access.
VS Code Python Tutorial for IDE setup.

This setup provides a foundation for building a RAG chatbot. You can now proceed to implement document ingestion, vector search, and LLM-powered responses, all within an interactive Streamlit interface in the next session. Happy coding!

An AI Chatbot with NextJS, Groq and Llama

JeffMint — Wed, 05 Feb 2025 22:56:46 +0000

AI Chatbot Documentation

This documentation provides a detailed explanation of an AI chatbot built using Next.js, Groq, and the Llama language model. The chatbot is designed to assist users in various domains, including academics, coding, and machine learning.

Introduction
Core Components
- Server-Side API
- Client-Side Interface
Code Explanation
- Server-Side Code
- Client-Side Code
How It Works
Setup and Deployment

Introduction

The AI chatbot leverages the power of Llama (a large language model) to generate responses based on user input. It uses Groq as the backend service for managing the Llama model and Next.js for building the frontend and backend together seamlessly. The chatbot is designed to be interactive, responsive, and user-friendly.

Core Components

Server-Side API

The server-side API handles incoming requests from the client, processes the messages, interacts with the Groq service, and streams the response back to the client.

Client-Side Interface

The client-side interface is built using React components and provides a clean, intuitive UI for interacting with the chatbot. It includes features such as real-time streaming of responses, message history, and a sleek design.

Code Explanation

Server-Side Code

Below is the server-side code responsible for handling chat requests and interacting with the Groq service.

import Groq from 'groq-sdk';
const groq = new Groq({
  apiKey: process.env.NEXT_PUBLIC_GROQ_API_KEY
});

const systemPrompt = 
  "You are a friendly and knowledgeable academic assistant, " +
  "coding assistant and a teacher of anything related to AI and Machine Learning. " +
  "Your role is to help users with anything related to academics, " +
  "provide detailed explanations, and support learning across various domains.";

export async function POST(request) {
  try {
    const { messages, msg } = await request.json();

    // Safely handle undefined or null messages
    const processedMessages = messages && Array.isArray(messages) 
      ? messages.reduce((acc, m) => {
          if (m && m.parts && m.parts[0] && m.parts[0].text) {
            acc.push({
              role: m.role === "model" ? "assistant" : "user",
              content: m.parts[0].text
            });
          }
          return acc;
        }, [])
      : [];

    const enhancedMessages = [
      { role: "system", content: systemPrompt },
      ...processedMessages,
      { role: "user", content: msg }
    ];

    const stream = await groq.chat.completions.create({
      messages: enhancedMessages,
      model: "llama3-8b-8192", // Choose your preferred model
      stream: true,
      max_tokens: 1024,
      temperature: 0.7,
    });

    // Create a custom readable stream to parse the chunks
    const responseStream = new ReadableStream({
      async start(controller) {
        const encoder = new TextEncoder();

        try {
          for await (const chunk of stream) {
            const content = chunk.choices[0]?.delta?.content;

            if (content) {
              controller.enqueue(encoder.encode(content));
            }
          }
        } catch (error) {
          console.error("Streaming error:", error);
          controller.error(error);
        } finally {
          controller.close();
        }
      }
    });

    return new Response(responseStream);
  } catch (error) {
    console.error("Error in chat API:", error);
    return new Response(JSON.stringify({ 
      error: "An error occurred processing your request",
      details: error.message 
    }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

Explanation:

Importing Dependencies:
- Groq is imported from the groq-sdk package to interact with the Groq service.
- The POST function is defined to handle incoming HTTP POST requests.
System Prompt:
- A predefined system prompt is set up to guide the behavior of the Llama model. This ensures the chatbot remains helpful and knowledgeable.
Processing Messages:
- The messages array from the request is processed to extract relevant content. Each message is converted into a format compatible with the Groq API.
Enhancing Messages:
- The system prompt is added to the list of messages, followed by the user's latest message.
Creating Completion Stream:
- The groq.chat.completions.create method is used to generate a response from the Llama model. The response is streamed back to the client in real-time.
Readable Stream:
- A custom ReadableStream is created to parse the streamed response and send it back to the client incrementally.
Error Handling:
- Errors during the process are caught and logged, and an appropriate error response is sent back to the client.

Client-Side Code

Below is the client-side code for the chat interface.

'use client'
import React, { useEffect, useRef, useState } from 'react';
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Send, Bot, User, Zap } from "lucide-react";
import ReactMarkdown from 'react-markdown';

const ChatInterface = () => {
  const [messages, setMessages] = useState([
    {
      role: "model",
      parts: [{ text: "Hello! I'm ready to assist you. What would you like to explore today?" }],
    },
  ]);
  const [message, setMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const sendMessage = async () => {
    if (!message.trim() || isLoading) return;
    setIsLoading(true);
    setMessage("");

    setMessages((messages) => [
      ...messages,
      { role: "user", parts: [{ text: message }] },
      { role: "model", parts: [{ text: "" }] },
    ]);

    try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          history: [...messages],
          msg: message,
        }),
      });

      if (!response.ok) throw new Error("Network response was not ok");

      if (response.body) {
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let fullResponse = "";

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          const text = decoder.decode(value || new Uint8Array(), { stream: true });
          fullResponse += text;

          setMessages((messages) => {
            const lastMessage = messages[messages.length - 1];
            const otherMessages = messages.slice(0, messages.length - 1);
            return [
              ...otherMessages,
              {
                ...lastMessage,
                parts: [{ text: fullResponse }],
              },
            ];
          });
        }
      }
    } catch (error) {
      console.error("Error:", error);
      setMessages((messages) => [
        ...messages,
        {
          role: "model",
          parts: [{ text: "Apologies, an unexpected error occurred. Please try again." }],
        },
      ]);
    }

    setIsLoading(false);
  };

  const handleKeyPress = (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  return (
    <div className="min-h-screen bg-[#1C1C1E] flex items-center justify-center p-4">
      <div className="w-full max-w-4xl bg-[#2C2C2E] rounded-2xl shadow-2xl border border-[#3A3A3C] overflow-hidden">
        {/* Header */}
        <div className="bg-[#3A3A3C] p-4 md:p-6 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="bg-[#4A4A4C] p-2 rounded-full">
              <Zap className="w-6 h-6 text-[#5E5CE6]" />
            </div>
            <h1 className="text-xl md:text-2xl font-bold text-white">AI Companion</h1>
          </div>
        </div>

        {/* Chat Area */}
        <div className="p-4 md:p-6 flex flex-col h-[75vh]">
          <ScrollArea className="flex-grow mb-4 pr-4">
            <div className="space-y-4">
              {messages.map((message, index) => (
                <div
                  key={index}
                  className={`flex items-start ${
                    message.role === "user" ? "justify-end" : "justify-start"
                  }`}
                >
                  <div
                    className={`flex gap-3 max-w-[85%] md:max-w-[75%] ${
                      message.role === "user" ? "flex-row-reverse" : "flex-row"
                    }`}
                  >
                    <div className="flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-[#3A3A3C]">
                      {message.role === "user" ? (
                        <User className="h-5 w-5 text-[#5E5CE6]" />
                      ) : (
                        <Bot className="h-5 w-5 text-[#5E5CE6]" />
                      )}
                    </div>
                    <div
                      className={`rounded-2xl px-4 py-3 shadow-lg ${
                        message.role === "user"
                          ? "bg-[#5E5CE6] text-white"
                          : "bg-[#3A3A3C] text-white"
                      }`}
                    >
                      <div className="prose prose-invert max-w-none">
                        <ReactMarkdown>{message.parts[0].text}</ReactMarkdown>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
              {isLoading && (
                <div className="flex justify-center">
                  <div className="animate-pulse rounded-full h-8 w-8 bg-[#5E5CE6]" />
                </div>
              )}
              <div ref={messagesEndRef} />
            </div>
          </ScrollArea>

          {/* Input Area */}
          <div className="flex gap-3 mt-auto">
            <Textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyDown={handleKeyPress}
              placeholder="Type your message..."
              className="h-[40px] text-white bg-[#3A3A3C] border-gray-100 focus:border-blue-200 resize-none rounded-xl"
              disabled={isLoading}
            />
            <Button
              size="icon"
              className="h-[60px] w-[60px] bg-[#5E5CE6] hover:bg-[#4B3FD6] rounded-xl transition-all duration-300 ease-in-out transform hover:scale-105"
              onClick={sendMessage}
              disabled={!message.trim() || isLoading}
            >
              <Send className="h-5 w-5 text-white" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatInterface;

Explanation:

State Management:
- messages: Stores the conversation history between the user and the chatbot.
- message: Holds the current user input.
- isLoading: Indicates whether the chatbot is generating a response.
Scroll Behavior:
- The scrollToBottom function ensures that the chat area scrolls to the bottom whenever a new message is added.
Sending Messages:
- The sendMessage function sends the user's message to the server via an API call and updates the conversation history with the bot's response.
Real-Time Streaming:
- The response from the server is streamed incrementally, and the chat interface updates in real-time as the bot generates its response.
UI Components:
- The chat interface includes a header, a scrollable chat area, and an input area for sending messages.
- Icons (User, Bot, Zap, Send) are used to enhance the visual appeal and provide clear indicators of who is speaking.
Error Handling:
- If an error occurs during the API call, the chatbot displays an appropriate error message.

How It Works

User Interaction:
- The user types a message in the input area and submits it either by pressing the "Send" button or hitting the Enter key.
Server Processing:
- The server receives the message, processes it, and sends it to the Groq service for completion generation.
Response Streaming:
- The generated response is streamed back to the client in real-time, updating the chat interface dynamically.
Display:
- The chat interface displays the conversation history, distinguishing between user and bot messages using different colors and icons.

Setup and Deployment

Prerequisites

Node.js and npm installed on your machine.
A Groq API key with access to the Llama model.

Steps

Clone the Repository:

   git clone https://github.com/Minty-cyber/AI-Chatbot
   cd chatbot

Install Dependencies:

   npm install

Set Environment Variables:
- Create a .env.local file in the root directory and add your Groq API key(https://console.groq.com/):
```
 NEXT_PUBLIC_GROQ_API_KEY=your-groq-api-key
```
Run the Application:

   npm run dev

Deploy:
- Use platforms like Vercel or Netlify to deploy the application.

Introduction to Next.js and Building a Portfolio Site with Next.js🚀✨

JeffMint — Sat, 25 Jan 2025 23:12:34 +0000

Introduction to Next.js

NextJS is a powerful React framework that enables developers to build performant and scalable web applications with ease. This documentation will guide you through creating a portfolio site using NextJS.

Key NextJS Features

App Router

NextJS 13+ introduces the App Router, a new routing system that provides:

File-based routing
Nested layouts
Simplified data fetching
Automatic code splitting
Server and client components

Example of Routing Structure

app/
├── page.tsx          # Main landing page
├── about/
│   └── page.tsx      # About page
├── projects/
│   └── page.tsx      # Projects page
└── layout.tsx        # Global layout

Performance Optimizations

NextJS offers multiple optimization techniques:

Automatic image optimization
Lazy loading of components
Static and server-side rendering
Incremental Static Regeneration (ISR)
Automatic code splitting

Package Management

package-lock.json

Locks dependency versions precisely
Ensures consistent builds across different environments
Prevents unexpected package updates
Improves build reproducibility

Components in NextJS

Server Components

Render on the server
Reduce client-side JavaScript
Improve initial page load performance
Default in App Router

Client Components

Interactive components
Use client-side rendering
Enable state and event handling
Marked with 'use client' directive

Project Setup

Clone the repo

git clone https://github.com/Headstarter-AI-KNUST-Chapter/Personal-Portfolio.git

Initial Configuration

npm install

This command:

Read the package.json file
Download and install all listed dependencies
Create a node_modules folder
Generate or update the package-lock.json file to ensure consistent installations across different environments

Diving into the codes

Overview

The Portfolio is a React functional component that composes multiple section components into a single page layout.

Page file contents

Component Imports

import React from "react";
import HeroSection from "./components/hero-section/HeroSection";
import ServiceSection from "./components/service-section/ServiceSection";
import Navbar from "./components/navbar/Navbar";
import ContactSection from "./components/contact-section/ContactSection";
import BrandSection from "./components/brand-section/BrandSection";
import Footer from "./components/footer/Footer";

Component Layout

const Portfolio = () => {
  return (
    <>
      <Navbar />
      <HeroSection />
      <div className="min-h-screen p-8 pt-0">        
        <BrandSection />
        <ServiceSection />
        <ContactSection />
        <Footer />
      </div>
    </>
  );
};

Key Observations

Uses React Fragment (<>...</>) for wrapping components
Utilizes a container div with utility classes for spacing
Follows a top-to-bottom page composition strategy
Separates Navbar and HeroSection from other content sections

Component Sections

Navbar: Site navigation
HeroSection: Landing/introduction area
BrandSection: Brand or client showcase
ServiceSection: Services or capabilities overview
ContactSection: Contact information or form
Footer: Page footer/additional links

Navbar Component:

Scroll-Aware Design:
- The navbar dynamically changes its appearance (e.g., shadow and backdrop blur) based on the user’s scroll position. This ensures visibility while maintaining aesthetic appeal.
- Accomplished using the useEffect hook and the scrollY property from the window object.

   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 0);
     };
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);

Copy-to-Clipboard Functionality:
- Includes a button that lets users copy an email address directly to their clipboard using the navigator.clipboard API.

   const copyEmail = () => {
     navigator.clipboard.writeText("isaacoboenimil@gmail.com");
   };

Responsive Mobile Menu:
- The navbar adapts to smaller screen sizes by including a mobile menu button (Menu and X icons from Lucide).
- When toggled, the menu displays navigation links and actions in a user-friendly way for mobile devices.

   <Button
     variant="ghost"
     onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
     className="inline-flex items-center justify-center p-2"
   >
     {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
   </Button>

Desktop and Mobile Navigation Links:
- Provides social links (e.g., LinkedIn, Dribbble, Instagram) as well as buttons for copying an email or accessing a CV.
- These are conditionally rendered based on screen size using Tailwind CSS’s utility classes (e.g., hidden md:flex).

HeroSection Component

Imports

import { Button } from "@/components/ui/button";
import Image from "next/image";
import React from "react";

Button Component: The button is imported from a custom UI library (@/components/ui/button). This approach indicates a modular design for reusability across the app.
Image Component: The Image component is part of Next.js. It’s a powerful tool for optimizing images in web applications, providing features like lazy loading, responsive sizing, and automatic format selection (e.g., WebP).
React: A foundational import for all React components.

HeroSection Function

function HeroSection() {
  return (
    <section className="grid min-h-[70vh] place-content-center rounded-b-[100px] bg-stone-400/50 p-10 text-center">
      ...
    </section>
  );
}

Details on Styling the Section

<section className="grid min-h-[70vh] place-content-center rounded-b-[100px] bg-stone-400/50 p-10 text-center">

grid: Establishes a grid layout. Combined with place-content-center, it centers the content both horizontally and vertically.
min-h-[70vh]: Ensures the hero section takes up at least 70% of the viewport height.
rounded-b-[100px]: Applies a custom, large rounded border radius to the bottom, adding a soft curve for a modern aesthetic.
bg-stone-400/50: Sets a semi-transparent light gray background with Tailwind's opacity feature (/50).
p-10: Adds padding around the section.
text-center: Centers all text content inside this section.

Image Component

<Image
  width={300}
  height={300}
  src="/assets/images/images.jpeg"
  alt="Profile"
  className="mx-auto mb-4 h-40 w-40 rounded-full object-cover"
/>

Optimization: The Image component ensures better performance through optimized loading and resizing.
Props:
- src: Path to the image. Here, it’s served from /assets/images/images.jpeg.
- alt: Alt text for accessibility and SEO purposes.
- width and height: Fixed dimensions for better performance.
Styling:
- mx-auto: Horizontally centers the image.
- h-40 w-40: Defines fixed height and width (10rem each).
- rounded-full: Creates a circular image.
- object-cover: Ensures the image scales without distortion.

Heading

<h1 className="mb-4 text-4xl font-bold">
  Building digital
  <br />
  products, brands, and
  <br />
  experience.
</h1>

mb-4: Adds margin-bottom for spacing.
text-4xl: Sets a large font size.
font-bold: Applies bold styling for emphasis.
Text Layout: The use of <br /> tags breaks the text into multiple lines, creating a structured and visually appealing layout.

Button Component

<Button className="mt-6 p-8 text-2xl">Latest Work</Button>

Custom Button: The button component, likely styled and built within your custom library, is reusable.
Props and Styling:
- mt-6: Adds top margin for spacing.
- p-8: Applies generous padding for a clickable and prominent button.
- text-2xl: Enlarges the text for better readability.
Text: The button directs users to view the "Latest Work," potentially linking to a portfolio or case studies.

BrandSection Component

Imports

import Image from "next/image";
import React from "react";

Image: Next.js's Image component ensures efficient image rendering with features like lazy loading and responsive sizing.
React: Essential for defining React components.

BrandSection Function

function BrandSection() {
  ...
  return (
    <section className="relative z-10 my-20 rounded-b-[100px] bg-white px-10 py-20">
      ...
    </section>
  );
}

Brands Array

const brands = [
  { name: "National Bank of Canada", link: "/assets/images/national-bank-of-canada-logo.png" },
  { name: "Matter", link: "/assets/images/matter.png" },
  { name: "Coca-Cola", link: "/assets/images/Coca-Cola.png" },
  { name: "Adobe", link: "/assets/images/Adobe-logo.png" },
  { name: "Subway", link: "/assets/images/subway-logo.png" },
  { name: "Code Academy", link: "/assets/images/code-academy.png" },
];

Structure: Each brand has a name and a link to the corresponding image file.
Scalability: Adding or removing brands is easy—just update the array.

Styling the Section

<section className="relative z-10 my-20 rounded-b-[100px] bg-white px-10 py-20">

relative z-10: Positions the section above other elements for proper layering.
my-20: Adds vertical margin for spacing.
rounded-b-[100px]: Applies a curved bottom border for a smooth, modern look.
bg-white: Sets a clean white background.
px-10 py-20: Adds padding for a well-spaced layout.

Grid Layout

<div className="grid grid-cols-6 items-center justify-items-center gap-8 opacity-50">

grid: Establishes a grid layout for displaying the logos.
grid-cols-6: Divides the grid into six equal columns, ensuring each brand gets its own space.
items-center: Vertically centers the grid items.
justify-items-center: Horizontally centers the grid items.
gap-8: Adds consistent spacing between the items.
opacity-50: Reduces the opacity, giving the logos a subdued, professional look.

Dynamic Rendering of Brands

{brands.map((brand, index) => (
  <div key={index} className="text-sm font-medium">
    <Image
      width={100}
      height={100}
      src={brand.link}
      alt={brand.name}
      className="mx-auto mb-4"
    />
  </div>
))}

Mapping: The brands array is iterated with map() to render each brand dynamically.
Key Prop: The key prop (index) ensures React efficiently updates the DOM.
Image Component:
- src: Specifies the image path for each logo.
- alt: Improves accessibility and SEO with descriptive alt text.
- width and height: Ensures consistent logo sizing (100x100 px).
- className: Centers the image and adds a small margin at the bottom (mx-auto mb-4).
Wrapper Div: Includes text-sm for small text size and font-medium for medium-weight font (if text is needed later).

ServiceSection Component

Imports

import { Card } from "@/components/ui/card";
import React from "react";

Card: A reusable UI component likely styled for consistent card-based layouts. This simplifies the process of rendering each service as a visually cohesive block.
React: Required to define and use React components.

ServiceSection Function

function ServiceSection() {
  ...
  return (
    <section className="mb-20 py-52 px-20 w-full bg-stone-400/20 -my-52">
      ...
    </section>
  );
}

Services Array

const services = [
  {
    title: "UX & UI",
    description: "Designing interfaces that are intuitive, efficient, and enjoyable to use",
    icon: "🎨",
  },
  {
    title: "Web & Mobile App",
    description: "Transforming ideas into exceptional web and mobile app experiences",
    icon: "📱",
  },
  {
    title: "Design & Creative",
    description: "Crafting visually stunning designs that connect with your audience",
    icon: "✨",
  },
  {
    title: "Development",
    description: "Bringing your vision to life with the latest technology and design trends",
    icon: "💻",
  },
];

Structure: Each service has a title, description, and an icon to visually represent the service.
Purpose: Makes the component dynamic and scalable—adding or updating services only requires modifying this array.

Styling the Section

<section className="mb-20 py-52 px-20 w-full bg-stone-400/20 -my-52">

mb-20: Adds vertical margin at the bottom for spacing between sections.
py-52 px-20: Provides generous padding for a spacious layout.
w-full: Ensures the section spans the full width of the viewport.
bg-stone-400/20: Applies a semi-transparent background with a soft stone-gray tone.
-my-52: Adds a negative margin to overlap the previous or next sections slightly for a layered effect.

Heading and Subheading

<div className="mb-16 text-center">
  <h2 className="mb-2 text-3xl font-bold">
    Collaborate with brands and agencies
  </h2>
  <p className="text-xl text-gray-600">to create impactful results.</p>
</div>

Heading (h2): Styled with text-3xl for a prominent font size and font-bold for emphasis.
Subheading (p): Smaller (text-xl) and styled with text-gray-600 for a subtle, secondary emphasis.

Grid Layout for Services

<div className="grid sm:grid-cols-4 gap-8">

grid: Enables a grid layout for the cards.
sm:grid-cols-4: Defines a 4-column grid on small screens and larger.
gap-8: Adds consistent spacing between grid items.

Dynamic Rendering of Services

{services.map((service, index) => (
  <Card key={index} className="p-6 bg-stone-400/20">
    <div className="mb-4 text-2xl">{service.icon}</div>
    <h3 className="mb-2 text-lg font-semibold">{service.title}</h3>
    <p className="text-sm text-gray-600">{service.description}</p>
  </Card>
))}

Mapping: Each service is rendered dynamically using the .map() function.
Card Component:
- Wrapper (Card): Styled with p-6 for padding and bg-stone-400/20 for a consistent background.
- Icon: Displayed in text-2xl for a visually striking representation.
- Title: Styled with text-lg and font-semibold for emphasis.
- Description: Styled with text-sm and text-gray-600 for readability and a softer tone.
Key Prop: Ensures each card has a unique identifier (index) for efficient rendering.

ContactSection Component

Imports

import { Button } from "@/components/ui/button";
import { HandshakeIcon } from "lucide-react";
import React from "react";

Button: A customizable button component for creating consistent, styled buttons.
HandshakeIcon: An icon imported from the lucide-react library to visually enhance the section.
React: Enables the use of JSX to build the component.

ContactSection Function

function ContactSection() {
  ...
  return (
    <section className="-my-40 rounded-t-[100px] bg-white p-28 text-center">
      ...
    </section>
  );
}

The function defines the ContactSection component.
The section element serves as the container for the entire component, styled with Tailwind CSS classes.

Styling the Section

<section className="-my-40 rounded-t-[100px] bg-white p-28 text-center">

-my-40: Adds negative vertical margins to overlap the previous section for a seamless flow.
rounded-t-[100px]: Gives the section a unique curved top with a large border radius.
bg-white: Sets a clean, white background.
p-28: Adds ample padding to create a spacious layout.
text-center: Centers all text and content horizontally.

Icon Wrapper

<div className="mb-8 grid place-content-center">
  <div className="rounded-full bg-muted p-8">
    <HandshakeIcon size={50} />
  </div>
</div>

Outer Wrapper:
- mb-8: Adds a margin at the bottom to separate the icon from the heading.
- grid place-content-center: Centers the icon wrapper both vertically and horizontally.
Inner Wrapper:
- rounded-full: Ensures the icon container is perfectly circular.
- bg-muted: Applies a muted background color, likely defined in the theme.
- p-8: Adds padding inside the circular wrapper for a spacious look.
HandshakeIcon: The icon is rendered with a size of 50px, making it bold and noticeable.

Heading

<h2 className="mb-8 text-3xl font-bold">
  Tell me about your next
  <br />
  project
</h2>

mb-8: Creates separation from the buttons below.
text-3xl: Sets a large, attention-grabbing font size.
font-bold: Enhances readability by making the text bold

Footer Component

Imports

import React from "react";

React: This import enables JSX and is essential for creating React components.

Footer Function

function Footer() {
  ...
  return (
    <footer className="mt-20 flex items-center justify-between text-sm text-gray-600">
      ...
    </footer>
  );
}

The function defines the Footer component.
The footer element serves as the container for the footer content and is styled with Tailwind CSS classes.

Styling the Footer

<footer className="mt-20 flex items-center justify-between text-sm text-gray-600">

mt-20: Adds a margin-top of 20 units, creating space between the footer and the content above it.
flex: Utilizes Flexbox for layout, allowing easy alignment of child elements.
items-center: Vertically centers the content inside the footer.
justify-between: Distributes space between the child elements, placing one at the left and the other at the right.
text-sm: Sets a smaller text size for the footer content.
text-gray-600: Applies a medium gray color to the text for a subtle and soft appearance.

Content in the Footer

Copyright Text

   <div>© 2024 All rights reserved.</div>

div: A simple container for the copyright notice.

Navigation Links

   <nav className="space-x-4">
     <Link href="#">HeadStarter</Link>
   </nav>

nav: A semantic HTML element for navigation links. In this case, it contains only one link.
space-x-4: Adds horizontal spacing between elements within the nav container (though there's only one link here, it can accommodate additional links with equal spacing).
<Link>: A React component used for client-side navigation, though the href="#" here doesn't direct to any specific page.

Default Export

export default Footer;

Key Features

Simple Layout:
- The footer is divided into two main sections: the copyright notice on the left and a navigation link on the right, using Flexbox for alignment.
Small Text for Footer:
- The text is styled in a smaller, subtle gray, ensuring that the footer does not distract from the main content but remains legible.
Extensibility:
- The navigation section (<nav>) has space for additional links if needed, making it easy to expand in the future.

Best Practices

Use server components by default
Implement lazy loading for heavy components
Optimize images with Next/Image
Leverage built-in TypeScript support
Modularize your code

Performance Optimization Techniques

Use next/image for automatic image optimization
Implement code splitting
Utilize static generation for non-dynamic content
Enable incremental static regeneration

Recommended Packages

Tailwind CSS for styling
Lucide React Icons for icons
Shadcn UI for component library

Deployment

Vercel (recommended)
Netlify
GitHub Pages

Learning Resources

NextJS Official Documentation
React Documentation
Vercel Deployment Guides

Forem: JeffMint

Chatbot with Python (Frontend)

Documentation: Frontend (frontend.py)

Key Responsibilities

Step-by-Step Breakdown

1. Imports and Configuration

2. Load Index and Chunks

3. Semantic Search Function

4. LLM Answer Generation

5. Custom Chat UI (CSS)

6. Streamlit App UI

7. Question Input & Processing

8. Transparency: Retrieved Chunks

9. Clear Chat Button

Workflow (Frontend)

Key Notes

Chatbot with Python(Customizing the AI Chatbot with your Docs)

Backend — backend.py (Full explanation)

1) One-line summary

2) Imports & config (what each dependency does)

3) load_pdf(file_path) — read a PDF and return full text

4) chunk_text(text, chunk_size=500, overlap=100) — naive character-based chunking

5) build_index(pdf_folder="docs") — full pipeline

6) How to run this script

Chatbot with Python(Deployment Phase)

Deployment Guide for Streamlit PDF Chatbot with FAISS and Groq

Prerequisites

Project Structure

Step 1: Build the FAISS Index Locally

Step 2: Push Code to GitHub

Step 3: Deploy on Streamlit Cloud

Updating PDFs

Troubleshooting

Chatbot with Python(Environment Setup)

Prerequisites

Step 1: Install Python

Step 2: Install Visual Studio Code

Step 3: Set Up a virtual environment with uv

Step 4: Install Required Libraries

Step 5: Configure the Groq API Key

Step 8: Next Steps

Additional Resources

An AI Chatbot with NextJS, Groq and Llama

AI Chatbot Documentation

Table of Contents

Introduction

Core Components

Server-Side API

Client-Side Interface

Code Explanation

Server-Side Code

Explanation:

Client-Side Code

Explanation:

How It Works

Setup and Deployment

Prerequisites

Steps

Introduction to Next.js and Building a Portfolio Site with Next.js🚀✨

Introduction to Next.js

Key NextJS Features

App Router

Example of Routing Structure

Performance Optimizations

Package Management

package-lock.json

Components in NextJS

Server Components

Client Components

Project Setup

Clone the repo

Initial Configuration

Diving into the codes

Overview

Page file contents

Component Imports

Component Layout

Key Observations

Component Sections

Navbar Component:

Documentation: Frontend (`frontend.py`)

Backend — `backend.py` (Full explanation)

3) `load_pdf(file_path)` — read a PDF and return full text

4) `chunk_text(text, chunk_size=500, overlap=100)` — naive character-based chunking

5) `build_index(pdf_folder="docs")` — full pipeline