README.md

---
title: Chatbot Final
emoji: 🦀
colorFrom: red
colorTo: yellow
sdk: docker
app_port: 8501
pinned: false
license: mit
---


---

# 🤖 Chatbot with Voice + Text | React + FastAPI + Ollama

This is a full-stack chatbot application supporting both **text** and **voice input**, powered by:

* **🧠 Ollama (LLM)** — for chatbot responses using `krishna_choudhary/tinyllama`
* **🗣️ Ollama (Whisper STT)** — for voice-to-text transcription using `anagram/whispertiny`
* **⚛️ React** — for a modern, responsive chat interface
* **⚡ FastAPI** — for backend API endpoints

---

## 📂 Fine-Tuning Dataset & Training Code

👉 **Looking to fine-tune the chatbot yourself?**
Check out the open-source dataset and training scripts used to fine-tune `tinyllama`:

🔗 **GitHub Repository:** [Byte-Maste/krishna\_Chatbot\_Dataset](https://github.com/Byte-Maste/krishna_Chatbot_Dataset)

This repository includes:

* 🗃️ Custom chatbot dialogue dataset
* 🧪 Fine-tuning scripts and setup
* 📊 Prompt formatting for LLM compatibility

---

## 🚀 Features

* 💬 **Interactive Chat UI** – Clean and responsive frontend built in React
* 🎤 **Voice Input (STT)** – Record your voice and transcribe using Whisper
* 🧠 **Ollama LLM** – Generate AI responses locally using TinyLlama (or your preferred model)
* 🔁 **Streaming Responses** – Responses are streamed back for a natural chat flow
* 🐳 **Dockerized** – Easy deployment using Docker
* 🛠 **Modular Architecture** – Clean separation of concerns (React frontend, FastAPI backend)

---

## 🧩 Tech Stack

| Layer    | Tech                                   |
| -------- | -------------------------------------- |
| Frontend | React (Vite)                           |
| Backend  | FastAPI                                |
| LLM      | Ollama - `krishna_choudhary/tinyllama` |
| STT      | Ollama - `anagram/whispertiny`         |
| Audio    | Web Audio API                          |
| Infra    | Docker + Nginx (Production)            |

---

## 🗂️ Project Structure

```
.
├── Dockerfile              # Full app container (React + FastAPI + Ollama)
├── start.sh                # Start script: launches Ollama & FastAPI
├── main.py                 # FastAPI server logic (LLM + STT endpoints)
├── requirements.txt        # Python dependencies
├── nginx.conf              # Nginx config for proxying & serving frontend
└── frontend/
    ├── src/App.jsx         # React component with chat logic
    ├── src/App.css         # App styles
    ├── dist/               # Production build output (after npm build)
```

---

## 🛠️ Local Development (No Docker)

### 1. Clone Repo

```bash
git clone <your-repo-url>
cd <your-repo-directory>
```

### 2. Backend Setup (FastAPI)

```bash
pip install -r requirements.txt
```

### 3. Frontend Setup (React)

```bash
cd frontend
npm install
npm run build
cd ..
```

### 4. Start Ollama Locally

```bash
ollama pull krishna_choudhary/tinyllama
ollama pull anagram/whispertiny
ollama serve
```

### 5. Run FastAPI Server

```bash
uvicorn main:app --host 0.0.0.0 --port 7860
```

Then access via `http://localhost:7860`

---

## 🐳 Docker Deployment (Recommended)

### 1. Build Docker Image

```bash
docker build -t chatbot-ollama-app .
```

### 2. Run Container

```bash
docker run -p 8501:8501 \
  -e OLLAMA_HOST="http://127.0.0.1:11434" \
  -e MODEL_NAME="krishna_choudhary/tinyllama" \
  -e WHISPER_MODEL_NAME="anagram/whispertiny" \
  chatbot-ollama-app
```

### 3. Access App

Open your browser at:
👉 `http://localhost:8501`

---

## 🎙️ Using the Chatbot

* 🧑‍💻 **Text Input**: Type a question and hit **Send**.
* 🗣️ **Voice Input**: Click the mic icon, speak, then click again to transcribe and submit.

---

## 🔧 Customization Options

| What          | How to Customize                                         |
| ------------- | -------------------------------------------------------- |
| LLM Model     | Change `MODEL_NAME` in `main.py` or `start.sh`           |
| Whisper Model | Update `WHISPER_MODEL_NAME` in `main.py` or `start.sh`   |
| Ollama Host   | Modify `OLLAMA_HOST_URL` in `main.py`                    |
| Token Speed   | Adjust `asyncio.sleep()` delay inside streaming function |

---

## 🧪 Quick Test Without Nginx

In development, React can directly call backend:

* Set API base in frontend to `http://localhost:7860/api/`
* Run React in dev mode:

```bash
cd frontend
npm run dev
```

---

## 🤝 License & Credits

* Built with ❤️ using [FastAPI](https://fastapi.tiangolo.com/), [React](https://reactjs.org/), and [Ollama](https://ollama.com/)
* Models:

  * `krishna_choudhary/tinyllama`
  * `anagram/whispertiny`
* Dataset & Fine-tuning:

  * 📁 [Byte-Maste/krishna\_Chatbot\_Dataset](https://github.com/Byte-Maste/krishna_Chatbot_Dataset)

---