Back to List

AI Docent Kiosk Interface

AI docent kiosk application for Van Gogh museum visitors
Provides artwork search, AI conversational commentary, and artist life story exploration features.

AI Docent Kiosk Interface - Media 1
1 / 5

Roles

PlanningDesignFrontendBackend

Tech Stack

React
TypeScript
Vite
TanStack Query
Framer Motion
Tailwind CSS
Zod
Swiper

Key Features

  • AI Docent Chat: Natural language questions about Van Gogh artworks with voice response AI conversation feature
  • Artwork Collection Gallery: Browse artworks in infinite-scroll Masonry layout with detailed information
  • Voice Search: Voice recognition search using browser Speech Recognition API
  • Korean Virtual Keyboard: Korean jamo (consonant/vowel) combination virtual keyboard for touchscreen kiosk
  • Story/Life Exploration: Van Gogh story and life chronology exploration via vertical slider

Key Achievements

  • Korean IME Virtual Keyboard Implementation: Developed touchscreen keyboard handling jamo-level input and composition using hangul-js library
  • AI Response Audio Playback: Real-time playback of Base64-encoded audio data from backend for docent experience
  • Infinite Scroll Optimization: Efficient large artwork data loading combining TanStack Query useInfiniteQuery with Intersection Observer
  • Type-Safe API Layer: API communication stability with runtime response validation using Zod schemas and automatic TypeScript type inference
  • Kiosk Idle State Management: Automatic standby screen transition via user activity detection optimized for museum environment
  • Smooth Page Transitions: Natural transition animations between pages using Framer Motion AnimatePresence
#React
#Kiosk
#AI Docent
#Museum
#Framer Motion
#TanStack Query