🚀 Image Splitter App — FastAPI + React

This project contains a full-stack application with:

•⁠ ⁠🔧 FastAPI backend running at http://localhost:8000 •⁠ ⁠🎨 React frontend running at http://localhost:3000

Both services are containerized and orchestrated using Docker Compose.

---

📦 Prerequisites

Make sure you have the following installed on your system:

•⁠ ⁠🐳 Docker Desktop •⁠ ⁠🧱 Docker Compose (comes with Docker Desktop)

---

▶️ Start the Application using Docker Compose

To start the application, run:

docker compose -f docker-compose.yml up --build

## 🌐 Access the Application

•⁠  ⁠*Frontend UI:* [http://localhost:3000](http://localhost:3000)
•⁠  ⁠*Backend API (FastAPI docs):* [http://localhost:8000/docs](http://localhost:8000/docs)

---
Important: Download Required Model Before Running Docker if you want the LLMs Proper Response 

The backend requires the `SmolVLM2-2.2B-Instruct-Q4_K_M.gguf` model (~2GB) from Hugging Face. Due to GitHub's 100MB file size limit, it is **not included in this repository**.

#### 📥 Steps to Download the Model:

   mkdir -p backend/models
##Link for huggingface model (2gb):https://huggingface.co/ggml-org/SmolVLM2-2.2B-Instruct-GGUF/resolve/main/SmolVLM2-2.2B-Instruct-Q4_K_M.gguf
Please upload it in backend/models directory 

## 🐳 Running in Docker Desktop

Once the app is running, open *Docker Desktop*:

•⁠  ⁠Go to the *Containers* tab
•⁠  ⁠You will see two containers:
  - ⁠ fastapi-backend ⁠
  - ⁠ react-frontend ⁠

Each container shows:

•⁠  ⁠✅ Live logs
•⁠  ⁠💻 Terminal access
•⁠  ⁠🔁 Port mappings

You can *start, **stop, and **restart* the containers from the Docker UI.

---

## 🧼 To Stop the App

•⁠  ⁠Press ⁠ Ctrl + C ⁠ in the terminal running Docker Compose
•⁠  ⁠Or use Docker Desktop to stop the containers manually

To remove all running containers and networks:

```bash
docker compose down

Web App: Demo

Tutorial Steps

Start Page

Step 1 (We upload the picture and select the points to split)

Step 2 (Put our prompt in the LLM like `give the details about both the images ´)

Step 3 (We get the details of the image from the prompt )