README.md

metadata

title: HF Thumbnail Crafter
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
license: mit

HF Thumbnail Crafter

A web-based thumbnail creator for HuggingFace users with AI tool integration. Create professional thumbnails through the web interface OR call it programmatically from HuggingChat and other AI assistants via MCP (Model Context Protocol).

🤖 AI Tool Integration - Comprehensive MCP API (NEW!)

This Space is now fully MCP-compatible with complete programmatic control! AI agents can use ALL features just like a human:

✨ 50+ API methods - Complete canvas control 🎨 5 pre-designed layouts - Professional templates 🚀 44+ Huggy mascots - Rich asset library 🔧 Full object manipulation - Add, edit, move, resize anything 📦 One-shot creation - Generate complete thumbnails in one call

Example Usage in HuggingChat

You: "Create a fun thumbnail with the title 'AI Revolution',
      add a Game Jam Huggy, use a light blue background"

HuggingChat:
  🎨 Loading layout...
  ✏️ Adding title text...
  🤖 Adding Huggy mascot...
  🎨 Setting background...
  ✅ Here's your thumbnail! [returns image]

Key Features

17+ MCP Tools Available:

1. Canvas Management: Set size, background, export
2. Layout System: Load 5 professional layouts
3. Object Operations: Add/update text, images, shapes
4. Huggy Library: Access 44+ mascot assets
5. Text Operations: Update, style, search/replace
6. Transform: Move, resize, rotate objects
7. Batch Operations: Execute multiple commands at once
8. create_thumbnail - High-level one-shot generation

What AI Agents Can Do:

• ✅ Create thumbnails from scratch
• ✅ Use and customize layouts
• ✅ Add text with custom fonts/sizes/colors
• ✅ Add Huggy mascots
• ✅ Upload custom images
• ✅ Position and style elements
• ✅ Export finished designs

MCP Endpoint

POST https://huggingface.co/spaces/Chunte/Thumbnail-Crafter.mini.mcp_experiment/tools

Setup in HuggingChat

1. Go to HuggingChat → Settings → MCP Servers
2. Add this Space's URL: https://huggingface.co/spaces/Chunte/Thumbnail-Crafter.mini.mcp_experiment
3. Enable it as a tool
4. Start creating! Examples:
   • "Create a thumbnail with the title 'New Feature'"
   • "Load the Serious Collab layout and add a Huggy Chef"
   • "Make a LinkedIn-sized thumbnail with Impact Title layout"

Architecture

This Space combines:

• React Frontend - Professional canvas-based design tool
• window.thumbnailAPI - 50+ JavaScript methods for complete control
• FastAPI MCP Server - Exposes API as MCP tools
• Playwright Automation - Headless browser control for real app interaction

AI agents interact with the actual React app, not just backend image generation!

📖 Documentation:

• MCP_COMPREHENSIVE_GUIDE.md - Complete integration guide
• API_SPECIFICATION.md - Full API reference (50+ methods)
• IMPLEMENTATION_STATUS.md - What's been built

Features

• 4 Pre-designed Layouts: Serious Collab, Fun Collab, Sandwich, and Docs layouts
• 44+ Huggy Mascot Assets: Loaded directly from HuggingFace dataset
• Custom Text Editing: Support for Inter & IBM Plex Mono fonts with bold/italic styling
• Image Upload: Drag-and-drop support for local images (PNG, JPG, WebP)
• Layer Management: Use [ and ] keyboard shortcuts to reorder objects
• Smart Canvas Tools:
  • Multi-select with drag-to-select box or Shift+Click
  • Arrow key movement (1px or 10px with Shift)
  • Shift-constrained drag (horizontal/vertical lock)
  • Smart snapping to canvas center lines
• Export: High-quality PNG export with custom filename
• Undo/Redo: Full history support (Ctrl+Z / Ctrl+Shift+Z)

Usage

1. Select a Layout: Click the Layout button in the sidebar to choose from 4 pre-designed templates
2. Customize:
   • Add Huggys from the Huggy menu
   • Upload your own images
   • Edit text directly on canvas (double-click)
   • Adjust colors using the background selector
3. Arrange Objects:
   • Drag to reposition
   • Use [ and ] keys to change layer order
   • Transform with scaling and rotation
4. Export: Click the export button and download your thumbnail as PNG

Keyboard Shortcuts

• T: Activate text creation mode
• Delete/Backspace: Delete selected objects
• Ctrl+Z: Undo
• Ctrl+Shift+Z: Redo
• Ctrl+D: Duplicate selected objects
• Arrow Keys: Move selection 1px (hold Shift for 10px)
• [: Send backward (decrease layer order)
• ]: Bring forward (increase layer order)
• Shift + Drag: Constrain to horizontal/vertical axis

Canvas Sizes

• 1200×675: Default size (X/Twitter)
• 1200×627: LinkedIn size
• 1160×580: HuggingFace custom size

Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Canvas: react-konva + Konva.js
• Styling: Tailwind CSS
• Icons: Custom Figma-exported SVGs
• Fonts: Inter, IBM Plex Mono, Bison Bold

Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npx vite build

License

MIT

---

🤖 Built with Claude Code