🎨 Plot & Palette

An interactive art-emotion-storytelling platform designed for high school teachers to explore the connection between colors, emotions, and artworks through AI-powered recommendations and narrative generation.

Live Demo: https://plotandpalette.uk/

Watch the Real Classroom Pilot: This is a live classroom pilot from a Chinese high school, where an art teacher uses the AI-supported teaching toolkit I built to guide students through artwork interpretation and discussion.

(Click the image above to watch the video)

🏗️ Modern Architecture (Cloudflare Stack)

┌─────────────────────────────────────────────────────┐
│     Vue.js Frontend (Cloudflare Pages)              │
│   - Color palette selection                         │
│   - Emotion analysis display                        │
│   - Painting gallery                                │
│   - Story presentation                              │
└─────────────┬───────────────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────────────────┐
│   Cloudflare Pages Functions (Serverless API)      │
│   - 17 API endpoints                                │
│   - Job creation & management                      │
│   - Database operations (D1)                       │
│   - Asset serving (R2)                             │
└─────────────┬───────────────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────────────────┐
│         n8n Workflows (External AI/ML)              │
│   - Palette emotion analysis                       │
│   - Painting recommendations                       │
│   - Story generation                               │
│   - HMAC-verified callbacks                        │
└─────────────────────────────────────────────────────┘

n8n Workflow:

Data Storage:

• Cloudflare D1 (SQLite) - User data, sessions, jobs, results
• Cloudflare R2 - Images, screenshots, artwork (155 paintings)

---

🎯 Key Features

1. Color Palette Selection - 20 animated gradient palettes to choose from
2. Emotion Analysis - ML-powered emotion intensity prediction (15 emotions)
3. Smart Recommendations - AI-curated artwork selection (155 Chinese Contemporary Art pieces)
4. Story Generation - Personalized narratives based on selected paintings and character
5. Bilingual Support - Full English/Chinese (中文) interface

---

🔧 Technology Stack

Frontend

• Framework: Vue.js 3 (Composition API)
• Build Tool: Webpack
• Styling: Scoped CSS
• i18n: vue-i18n (English/Chinese)
• Hosting: Cloudflare Pages

Backend (Serverless)

• Functions: Cloudflare Workers (TypeScript)
• Database: Cloudflare D1 (SQLite)
• Storage: Cloudflare R2
• AI/ML: n8n workflows (external)

Infrastructure

• DNS/CDN: Cloudflare
• Deployments: Wrangler CLI
• Version Control: Git/GitHub

---

📝 License

This project is for academic research at Newcastle University (Ethics Approval No. 54009/2023).