Taste of Malaysia (Warm-up Task)

Taste of Malaysia is a bilingual restaurant website generated from OCR-extracted content, transforming a static PDF menu into a modern, interactive web experience using PaddleOCR-VL and ERNIE AI.

Comment

Inspiration

Taste of Malaysia was inspired by the challenge of turning visually rich but static content into an interactive web experience. Restaurant menus are often designed as PDFs using tools like Canva, which look good but are not accessible or responsive on the web. This project explores how AI can bridge that gap by transforming static designs into modern websites. The theme of Malaysian cuisine was chosen to represent cultural diversity while working with a realistic, real-world use case.

What it does

  • Converts a static PDF menu into a responsive single-page website
  • Displays categorized Malaysian food menus with smooth navigation
  • Includes animations, hover effects, and modern UI elements
  • Supports bilingual language switching (English ⇆ Simplified Chinese)

How we built it

The project followed an AI-driven workflow:

  1. Content Creation
    The menu layout and content were designed in Canva and exported as a PDF.

  2. OCR Extraction
    PaddleOCR-VL was used to extract text, layout information, and image references from the PDF.
    The extracted output was converted into structured Markdown format.

  3. AI Web Generation
    The Markdown content and a detailed design prompt were provided to ERNIE AI, which generated a complete single-page HTML website with embedded CSS and JavaScript.

  4. Feature Enhancement
    A bilingual language toggle (English ⇆ Simplified Chinese) was added using a JavaScript dictionary-based approach to improve accessibility and usability.

  5. Deployment
    The final website was deployed using GitHub Pages, allowing public access without additional backend setup.

Challenges we ran into

  • Maintaining layout consistency after OCR extraction
  • Refining prompts to ensure all UI elements were generated correctly
  • Implementing language switching across all text elements
  • Balancing visual design with responsiveness and performance

Accomplishments that we're proud of

We successfully transformed a static PDF menu into a production-ready, responsive website using AI-driven tools. The integration of OCR, AI-generated web code, and a bilingual language toggle demonstrates a complete end-to-end workflow. The final result closely matches the intended design while remaining fully functional and accessible.

What we learned

  • OCR tools like PaddleOCR-VL can effectively extract structured content, not just plain text
  • Clear and detailed prompts significantly improve AI-generated code quality
  • ERNIE AI can produce near production-ready frontend code
  • Single-page layouts work well for menu-based websites
  • Multi-language support can be efficiently implemented using simple JavaScript objects

What's next for Taste of Malaysia (Warm-up Task)

Future improvements could include dynamic content loading, backend integration for real-time menu updates, accessibility enhancements, and support for additional languages. This project can also be extended into a reusable pipeline for converting any PDF-based menu or brochure into a responsive website.

Built With

Share this project:

Updates