Inspiration Traffic jams, slow emergency responses, and unsafe pedestrian crossings have always frustrated us on campus and in the city. We realized that traditional traffic lights operate on outdated logic, and even modern solutions only react to problems after they happen. Inspired by Major League Hacking’s call for creative, AI-native traffic solutions and recent advances in Google Gemini’s multimodal capabilities, we wanted to build a smarter way—where traffic lights truly “think.”

What We Learned How real-time data from street cameras, user reports, and traffic sensors can be processed by AI to optimize urban mobility

The power of Google Gemini’s multimodal reasoning—especially how video and sensor data can be combined with contextual information

Building and connecting live video feeds using HTML5 and YouTube APIs

Iterative prototyping in React and Flask for seamless web-app experiences

Presenting technical complexity in a visual, intuitive way for judges and the public

How We Built SignalAI Tech Stack:

Frontend: React.js, HTML5 video, YouTube embed, CSS for animated traffic signals & data cards

Backend: Flask (Python), Google Gemini API for image/video/frame analysis and traffic decision logic

AI: Multimodal prompts to Gemini: “Analyze this intersection, recommend best timing for lights, estimate impact and risks.”

Data: Sample photos, live webcam feeds, and YouTube traffic videos

Presentation: Live dashboard showing current traffic, recommended light timing, and predicted improvements

Key Features:

Upload traffic images, use live webcam, or embed YouTube traffic video

Gemini AI analyzes each frame for vehicles, pedestrians, and emergencies

Real-time signal recommendations: which light should be green, for how long, and why

Visual metrics: average wait time, throughput, pedestrian safety score

Everything animated, easy to understand, and ready for campus-to-city deployment

Challenges We Faced Integrating real-time video feeds (webcam and YouTube) with Gemini API for seamless analysis

Getting realistic traffic data—overcame by using public traffic cams and simulated videos

Keeping the user experience clean and lightning-fast (<3 seconds analysis turnaround)

Balancing deep AI integration with hackathon time constraints

Communicating technical impact simply so non-technical judges and the public would “get it”

The SignalAI Difference Proactive, not reactive: AI predicts and reroutes before jams start

Multimodal analysis: Vision + sensor + context

Everyone benefits: Faster emergency response, safer pedestrian crossings, smoother commutes

Scalable: From campus pilot to full city deployment

Built With

  • alternative
  • and
  • apis
  • apis/tools
  • camera
  • city
  • dashboard)
  • deployment
  • firestore
  • for
  • for-advanced-vision-tasks)-google-maps-api-(optional
  • for-spatial/context-apps)-youtube-iframe-api-(embedding-youtube-videos/streams)-databases-firebase-realtime-database-(storing-analysis-results
  • future
  • google-cloud-run
  • handling
  • html5-video-api-backend:-flask-(python-web-server)
  • input)
  • integration)
  • live
  • municipal
  • node.js/express-(alternative-for-real-time-needs)-platforms-google-ai-studio-(gemini-api-prototyping)-google-cloud-platform-(deployment
  • nosql
  • option)
  • or
  • or-heroku-(backend-deployment-for-hackathon-demo)-ai-/-cloud-services-google-gemini-api-(core-ai:-image-and-video-analysis
  • other
  • real
  • real-time
  • reasoning)-google-cloud-vision-api-or-gemini-vision-api-(optional
  • rtsp
  • scaling)-vercel-or-netlify-(frontend-deployment)-render
  • stream
  • tailwind-css-(styling)
  • technologies-used-languages-python-(backend-and-ai-integration)-javascript-(frontend-and-interactivity)-html5-&-css-(ui
  • traffic
  • trafficland
  • video/image-handling)-frameworks-&-libraries-frontend:-react.js-(ui-framework)
  • webrtc/webcam
Share this project:

Updates