HKSTEMA AI Tutor Platform

3D avatar-powered educational platform with RAG chatbot and automated video processing pipeline.

HKSTEMA AI Tutor Platform

An advanced educational platform featuring 3D virtual avatars, intelligent chatbots, and automated content processing to revolutionize online learning experiences.

Role: Full Stack Developer Intern

During my internship at HKSTEMA, I contributed to developing an innovative educational platform that combines AI technology with 3D avatars to create engaging learning experiences.

Key Contributions

AI-Powered Features

  • 3D Virtual Avatar System: Implemented interactive 3D avatars for video-based lesson delivery
  • RAG Chatbot Integration: Developed and integrated a Retrieval-Augmented Generation chatbot that improved student engagement by 20%
  • Natural Gesture Synchronization: Aligned avatar gestures with Whisper V3 audio processing for lifelike interactions

Backend Development

  • Django REST Framework: Built scalable backend using Python and Django with MVT pattern
  • Automated Video Processing: Created pipeline to convert PDF content into interactive videos, reducing production time by 50%
  • Content Management: Structured data handling for educational content delivery

Frontend Development

  • Vue.js Integration: Implemented responsive user interfaces for interactive learning
  • Three.js Implementation: Integrated 3D graphics library for avatar rendering and animations
  • Real-time Synchronization: Achieved seamless audio-visual synchronization for natural avatar interactions

Technology Stack

  • Frontend: Vue.js, Three.js, JavaScript
  • Backend: Django, Python, Django REST Framework
  • AI/ML: Retrieval-Augmented Generation (RAG), Whisper V3
  • 3D Graphics: Three.js for avatar rendering
  • Architecture: Model-View-Template (MVT) pattern

Impact & Results

  • Content Creation Efficiency: 30% reduction in content creation time through automated processes
  • Student Engagement: 20% improvement in student engagement through interactive chatbot
  • Production Optimization: 50% reduction in video production time via automated PDF-to-video pipeline
  • Enhanced Learning Experience: Natural avatar interactions improved content delivery quality

Technical Challenges Solved

3D Avatar Synchronization

  • Implemented precise timing algorithms for gesture-audio alignment
  • Optimized rendering performance for smooth avatar animations
  • Created responsive avatar behaviors based on content context

Automated Content Pipeline

  • Developed robust PDF parsing and content extraction
  • Implemented automated video generation with synchronized audio
  • Created quality assurance checks for automated content

Cross-Platform Integration

  • Ensured seamless integration between frontend Vue.js and backend Django
  • Implemented efficient API communication for real-time features
  • Optimized performance across different devices and browsers

Collaboration & Process

  • Cross-Functional Teams: Worked closely with design, QA, and product teams
  • Issue Resolution: Actively participated in debugging and feature enhancement
  • Quality Assurance: Contributed to testing and quality improvement processes
  • Agile Development: Participated in sprint planning and daily standups

This project showcases my ability to work with cutting-edge AI technologies, 3D graphics, and full-stack development while contributing to meaningful improvements in educational technology.