← reference

Tone Packs Feature

Overview

Tone packs are collections of images mapped to emotional tones that appear on journal entry cards in the stream view. This allows users to visually identify the emotional tone of entries at a glance without reading the content.

Features

  1. Create Tone Packs: Users can create custom tone packs with a name, description, and theme (e.g., origami, animals, nature, abstract)
  2. AI Image Generation: Generate images for tones using OpenAI DALL-E 3 based on the pack's theme
  3. Visual Display: Tone pack images appear as small icons on note cards in the stream view when an entry has a matching mood
  4. Sharing: Users can share their tone packs with other users by email or user ID
  5. Public Packs: Users can make their tone packs public for others to discover and use

Database Schema

Tables

  • tone_packs: Stores tone pack metadata (name, description, theme, owner, public status)
  • tone_pack_images: Maps tones to images within a pack
  • tone_pack_shares: Tracks which users have access to shared packs

User Preferences

The active tone pack ID is stored in profiles.preferences.active_tone_pack_id.

API Endpoints

Tone Packs

  • GET /api/tone-packs - Get all tone packs available to user (own, shared, public)
  • GET /api/tone-packs/:id - Get single tone pack
  • POST /api/tone-packs - Create new tone pack
  • PUT /api/tone-packs/:id - Update tone pack
  • DELETE /api/tone-packs/:id - Delete tone pack
  • POST /api/tone-packs/:id/generate-images - Generate images for tones using AI
  • POST /api/tone-packs/:id/share - Share tone pack with user
  • DELETE /api/tone-packs/:id/share/:userId - Unshare tone pack
  • POST /api/tone-packs/:id/activate - Set tone pack as active for user

Setup

1. Database Migration

Run the migration to create the necessary tables:

# Apply migration
supabase migration up

Or manually run supabase/migrations/015_add_tone_packs.sql

2. Storage Bucket

Create a Supabase storage bucket named tone-packs:

Option 1: Run the migration (Recommended)

# Apply migration 018
supabase migration up

Or manually run supabase/migrations/018_create_tone_packs_bucket.sql in the Supabase SQL Editor.

Option 2: Via Supabase Dashboard

  1. Go to Storage
  2. Create new bucket
  3. Name: tone-packs
  4. Public: Yes
  5. File size limit: 5MB
  6. Allowed MIME types: image/png, image/jpeg, image/jpg, image/webp

Option 3: Manual SQL

-- In Supabase dashboard or via SQL
INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
VALUES (
  'tone-packs',
  'tone-packs',
  true,
  5242880, -- 5MB
  ARRAY['image/png', 'image/jpeg', 'image/jpg', 'image/webp']
);

Note: The migration also sets up RLS policies for secure access control.

3. Environment Variables

Ensure OPENAI_API_KEY is set in your backend environment for AI image generation.

Usage

Creating a Tone Pack

  1. Go to Settings → Tone Packs
  2. Click "Create New Pack"
  3. Enter name, description, and select a theme
  4. Optionally make it public
  5. Click "Create & Generate Images"
  6. Select tones to generate images for
  7. Images are generated using AI based on the theme

Activating a Tone Pack

  1. In Settings → Tone Packs, find your pack
  2. Click "Activate"
  3. The pack will now be used in the stream view

Sharing a Tone Pack

  1. Click "Share" on your tone pack
  2. Enter the user's email or user ID
  3. The pack will appear in their "Shared With Me" section

Viewing Tone Images

  • In the stream view (/dashboard/stream), entries with a mood will display the corresponding tone pack image
  • Images appear as small icons in the top-right corner of note cards
  • Only the active tone pack's images are displayed

Supported Tones

Common tones that can be detected/generated:

  • Positive: joyful, grateful, excited, hopeful, content, peaceful, optimistic
  • Negative: sad, anxious, frustrated, angry, worried, disappointed, melancholic, pessimistic
  • Neutral: calm, contemplative, neutral, tired, energetic

Themes

Available themes for tone packs:

  • origami
  • animals
  • nature
  • abstract
  • geometric
  • minimalist
  • watercolor
  • line-art
  • icons
  • emojis
  • shapes
  • patterns

Technical Details

Image Generation

  • Uses OpenAI DALL-E 3 model
  • Images are 1024x1024px (square for icons)
  • Uploaded to Supabase storage bucket tone-packs
  • Stored at path: {userId}/{packId}/{tone}-{timestamp}.png

Stream View Integration

  • Active tone pack is loaded when user profile is fetched
  • Entry mood is matched to tone pack images (case-insensitive)
  • Images are displayed as 16px icons (scaled with note size)
  • Positioned in top-right corner of note cards

Future Enhancements

  • Browse public tone packs
  • Rate/review tone packs
  • Import/export tone packs
  • Custom tone definitions
  • Batch image generation
  • Image editing/regeneration
TONE PACKS — Docs | HiveJournal