Sudhanshu2601/u-net-crack-detection
Crack Detection UI
A Flask + React application for detecting cracks in uploaded video footage with a TensorFlow segmentation model. The backend processes each frame, overlays detected cracks with severity colors, and returns a browser-playable WebM output. The React UI shows upload state, model progress, input preview, detected output preview, and download controls.
Live Demo
Open the deployed app on Hugging Face Spaces
Project Structure
main.py- Flask API, model loading, video processing, progress endpointstemplates/index.html- Flask-rendered upload pagefrontend/- React/Vite frontendrequirements.txt- Python dependencies
Model File
The trained model file is intentionally not tracked in Git because it is large. Place it in the project root with this name before running the backend:
crack_segmentation_final.h5For deployment, the app can download the model from Hugging Face with MODEL_URL:
https://huggingface.co/Sudhanshu2601/Cracksegementationdataset/resolve/main/crack_segmentation_final%20(2).h5Backend Setup
pip install -r requirements.txt
python main.pyThe Flask API runs at:
http://127.0.0.1:5000Frontend Setup
cd frontend
npm install
npm run devThe React UI usually runs at:
http://127.0.0.1:5173Notes
Generated uploads, processed videos, CSV reports, frontend build files, dependencies, and model weights are excluded from Git.
Free Deployment on Hugging Face Spaces
- Create a new Space at https://huggingface.co/new-space.
- Choose Docker as the Space SDK.
- Choose Public visibility.
- Use the free CPU Basic hardware.
- Push this repository's files to the Space repository.
- The app will use
MODEL_URLto download the model during startup.
The first build/start can take several minutes because the container installs TensorFlow and downloads the model file.
