🧠 Rex — Your C# Mentor (Offline AI Chatbot)

Hello! 👋
This is Rex, an offline AI chatbot made to help you learn and practice C# programming.
It works completely without internet, so you can use it anywhere — at home, on the move, or even on a desert island. 🌴

---

💡 What is Rex?

Rex is a small chatbot built in Python (FastAPI) that runs on your computer.
You talk to Rex through your browser — just like chatting with a friend — and Rex replies about C# programming.

He can:

• Teach you C# basics
• Create a study route (roadmap) for you
• Explain programming terms like class, interface, or loop
• Do quick math for you
• Tell you the time or date
• Give you a motivation quote if you feel stuck
• And when you ask something outside programming, he’ll gently say:

"im a ai chatbot made for c# , i cant help with this, call your dad to fix this issue"

That’s his way of reminding you he’s focused only on coding and that your dad is the real expert 🧔💻.

---

🧩 Folder Overview

rex_chatbot/ │ ├── server.py → Runs the web server (connects chat to browser) ├── bot.py → Rex’s brain (all logic and C# knowledge) │ ├── templates/ │ └── index.html → The web page you see in the browser │ ├── static/ │ ├── styles.css → Colors, fonts, and layout (Visual Studio theme) │ └── app.js → Handles sending/receiving messages to Rex │ └── requirements.txt → Lists packages to install

⚙️ Setup Instructions (One Time)

1️⃣ Install Python

If you don’t already have Python, download it from
👉 https://www.python.org/downloads/
When installing, check the box that says “Add Python to PATH.”

2️⃣ Install Required Libraries

Open a terminal (Command Prompt or PowerShell) in the rex_chatbot folder, then run:

pip install -r requirements.txt, 

    🧠 How Rex Works (Explained Simply)
🧠 How Rex Works (Explained Simply)

Rex is made up of two main parts that talk to each other:

🐍 The Backend (Python + FastAPI) → Rex’s brain

🌐 The Frontend (HTML + CSS + JavaScript) → Rex’s face and mouth

Let’s see how they connect.

1️⃣ Python + FastAPI — Rex’s Brain 🧠

server.py starts a FastAPI web server — it’s like Rex’s “mouthpiece” to talk to your web browser.

It listens on a port (for example, http://127.0.0.1:9090) and can send or receive information using URLs like / and /chat.

💬 How it works:

When you visit Rex in a browser, the server gives your browser the HTML page:

@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
    with open("templates/index.html", "r", encoding="utf-8") as f:
        return HTMLResponse(f.read())


This is like Rex handing you his face — the interface to talk to him.

When you type something and press Send, JavaScript sends that message back to Python at the /chat endpoint:

@app.post("/chat", response_model=ChatOut)
async def chat(payload: ChatIn):
    user_msg = (payload.message or "").strip()
    return {"reply": reply_to(user_msg)}


FastAPI catches the message, passes it to Rex’s brain (bot.py), and sends back the answer as JSON.

2️⃣ bot.py — Rex’s Personality & Logic 🤖

This is the real intelligence part of Rex.

The reply_to() function reads what you typed and decides what to say.

Example:

if "class" in message.lower():
    return "A class in C# is a blueprint for objects..."


So Rex’s brain lives here.
The server simply connects that brain to your browser.

3️⃣ HTML — Rex’s Face 😄

index.html is what your browser displays when you open Rex.

It builds the structure of the page:

The chat window

The input box

The sidebar for saved chats

Think of it like drawing Rex’s body — empty speech bubbles and buttons before he starts talking.

Example:

<main id="chat" class="chat"></main>
<form id="chat-form">
  <input id="msg" placeholder="Type a message..." />
  <button>Send</button>
</form>

4️⃣ CSS — Rex’s Style 🎨

styles.css controls how Rex looks — colors, fonts, sizes, and layout.

It makes the chat dark like Visual Studio, adds blue accents, and shapes message bubbles.

Example:

.me {
  background: #007acc; /* blue bubble for you */
  color: #fff;
}
.bot {
  background: #333; /* gray bubble for Rex */
}


CSS never changes how Rex thinks — only how he looks.

5️⃣ JavaScript — Rex’s Hands and Mouth 🗣️

app.js is what makes the page come alive.

It handles:

Sending your message to FastAPI (/chat)

Displaying both your messages and Rex’s replies

Storing conversations in local storage

Managing the sidebar and “New Chat” button

Here’s what happens in a single conversation cycle:

You type a message and press Send.

JavaScript captures it and sends it as JSON to Python:

fetch("/chat", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ message: text })
});


FastAPI receives it, gives it to bot.py, and sends back a reply like:

{"reply": "A class is a blueprint for objects in C#."}


JavaScript takes that reply and adds it to the chat window visually:

addMsg(data.reply, "bot");


You see Rex’s response on your screen.

All of this happens instantly and completely offline.

6️⃣ How They All Work Together ⚙️
Component	File	Role
🧠 Logic / Brain	bot.py	Figures out what to say
🚪 Gateway	server.py	Connects browser <-> Python
🧩 Structure	index.html	Defines chat window & sidebar
🎨 Appearance	styles.css	Makes Rex look like a C# mentor
⚡ Behavior	app.js	Sends/receives messages, handles chat memory
7️⃣ Offline Connection 📴

Even without the internet:

The browser and Python talk to each other locally on your computer through localhost (127.0.0.1).

FastAPI acts like a local web server, and the browser connects to it the same way it would connect to any website — except it’s hosted entirely inside your computer.

So even though Rex runs in a browser, he never leaves your device. 🧱

🧩 Simple Summary for Your Son

Python = Rex’s brain
FastAPI = Rex’s mouth (talks to the browser)
HTML = Rex’s body
CSS = Rex’s clothes
JavaScript = Rex’s hands (sends and receives messages)

Together, they make Rex a complete, offline, smart chatbot who looks like an app but lives right on your computer.