README.md

metadata

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

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

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

2. Backend Setup (FastAPI)

pip install -r requirements.txt

3. Frontend Setup (React)

cd frontend
npm install
npm run build
cd ..

4. Start Ollama Locally

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

5. Run FastAPI Server

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

Then access via http://localhost:7860

---

🐳 Docker Deployment (Recommended)

1. Build Docker Image

docker build -t chatbot-ollama-app .

2. Run Container

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:

cd frontend
npm run dev

---

🤝 License & Credits

• Built with ❤️ using FastAPI, React, and Ollama

• Models:

  • krishna_choudhary/tinyllama
  • anagram/whispertiny

• Dataset & Fine-tuning:

  • 📁 Byte-Maste/krishna_Chatbot_Dataset

---