Hugging Face's logo

Spaces:
Chunte
/
Thumbnail-Crafter.mini.mcp_experiment
Running

App Files Community
Thumbnail-Crafter.mini.mcp_experiment / README.md
ChunDe's picture
ChunDe
feat: Add HuggingFace Spaces README and fix TypeScript build issues
a3e6a1a
preview code
|
raw
history blame
2.55 kB
metadata
title: HF Thumbnail Crafter
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: static
pinned: false
license: mit

HF Thumbnail Crafter

A web-based thumbnail creator for HuggingFace users. Create quick, professional thumbnails with pre-made layouts and visual assets (Huggys).

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