Navigate by Drawing

A UI/UX experiment that lets you navigate a website by drawing icons on a canvas. Powered by a lightweight TensorFlow.js CNN model, this project demonstrates how AI can enable creative, intuitive web navigation. Or maybe it is a showcase of how creativity can be sometimes silly.

---

🚀 Features

• Draw to Navigate: Move between sections by sketching simple icons (home, envelope, person, suitcase, book, X) on the canvas.
• Real-Time AI Recognition: A TensorFlow.js model predicts your drawing and navigates automatically if confidence > 90%.
• Modern UI: Built with Tailwind CSS for a clean, responsive, and accessible interface.
• No Backend Required: Fully static, runs in any modern browser.

---

🖼️ Demo

draw.ui.webm

---

✨ How It Works

1. Draw an Icon: Use your mouse or finger to draw on the canvas.

2. AI Prediction: The model classifies your drawing in real time.

3. Automatic Navigation: If the model is >90% confident, you're taken to the corresponding section.

4. Supported Icons:

   • Home
   • Envelope (Contact)
   • Person (Bio)
   • Suitcase (CV)
   • Book (Education)
   • X (Tutorial)

---

🛠️ Getting Started

1. Clone the Repository

git clone https://github.com/AndreaRiboni/navigate-by-drawing.git
cd navigate-by-drawing

2. Serve the App

You can run a static server locally or use Docker.

Option A: Python Static Server

cd navigate-by-drawing/static
python -m http.server 8001

Then open http://localhost:8001 in your browser.

Option B: Docker + Caddy

docker-compose up --build

Then visit http://localhost:8001.

---

🧠 Model

• Type: Convolutional Neural Network (CNN)

• Framework: TensorFlow.js

• Input: 32x32 RGB images (downsampled from canvas)

• Classes: book, envelope, home, person, suitcase, x

• Files:

  • tfjs-icon-classifier.json
  • tfjs-icon-classifier.weights.bin

Model Architecture

Input: 32x32x3 RGB
└── Conv2D(32 filters, 3x3, ReLU)
    └── MaxPooling2D(2x2)
        └── Conv2D(64 filters, 3x3, ReLU)
            └── MaxPooling2D(2x2)
                └── Flatten
                    └── Dropout(0.3)
                        └── Dense(64, ReLU)
                            └── Dense(6, Softmax)

---

📝 Customization

Add or Change Icons

Edit js/config.js to update:

• List of supported classes
• Icon-image mapping
• Navigation targets

Replace the Model

Replace the model files in static/icon_classifier/ if you train a new one.

---

📚 Dataset

The dataset used to train the icon classifier is publicly available on Kaggle:

Kaggle: Navigation Icons Dataset

---

📄 License

MIT License. See LICENSE.

---

🙋‍♂️ Contact

• GitHub: AndreaRiboni
• LinkedIn: Andrea Riboni

---

📣 Contributing

Pull requests and suggestions are welcome! Open an issue or submit a PR.