🧩 About the Project 💡 Inspiration

The idea for Studio came from a simple real-life struggle—managing handwritten notes, signatures, and personalized writing digitally. As students, we often switch between handwritten and typed work—writing assignments, exchanging notes, and creating digital posters. We wanted a platform where users could:

Convert handwriting or signatures into digital text.

Generate text in their own handwriting, and

Easily share notes with peers.

Thus, Studio was born—an AI-powered workspace that bridges creativity, learning, and collaboration.

🛠️ How We Built It

We divided the work into three key modules:

Backend (Flask & Python) – built by Aisha Sultana, using:

Flask for API handling

OpenCV, NumPy, and Pillow for image and handwriting processing

A lightweight OCR engine (Tesseract) for text extraction

Frontend (React.js & Tailwind CSS) – led by Shaima Fatima, built using:

React.js for dynamic rendering

Tailwind CSS for a modern, responsive interface

Framer Motion for animations

UI/UX and Notes Exchange Module – designed and developed by Safa Aman, focusing on:

Clean layout and intuitive user flow

Peer-to-peer notes upload and preview system

🧠 What We Learned

Throughout the process, we learned how to combine AI-based image processing with a modern frontend framework. We also explored:

Flask–React integration and handling CORS

File uploads and asynchronous request handling

Using OpenCV for pre-processing handwritten data

Implementing responsive UI design for usability

On a broader level, we learned how to collaborate efficiently as a team, manage version control with GitHub, and troubleshoot deployment issues.

⚙️ Challenges We Faced

Integrating AI with Frontend: Connecting Flask’s backend image processing with React’s upload interface required debugging CORS and JSON serialization issues.

Signature and Handwriting Accuracy: Extracting clean handwriting strokes was tricky due to lighting, background noise, and image resolution.

Time Constraints: Building this project in just 10 hours meant quick decisions, efficient teamwork, and real-time problem-solving.

Dependency Conflicts: Managing Node.js and Python environments simultaneously required careful setup of versions and requirements.

🌟 Outcome

Studio successfully combines:

AI-based handwriting recognition,

Text-to-handwriting synthesis, and

Peer-based notes exchange

into one unified digital workspace. It stands as a testament to what’s possible when AI meets creativity and collaboration.

Built With

  • backend-flask
  • database
  • firebase
  • flask-cors
  • framer-motion
  • numpy
  • ocr
  • optional)
  • pillow
  • python-ai-/-processing-opencv
  • react.js
  • tailwind-css
  • tesseract
Share this project:

Updates

Submission history