🔥 HyperMeme - Automated PnL Meme Generator

Turn your trading PnL screenshots into viral memes instantly! HyperMeme uses OCR to detect your profit/loss, automatically selects the perfect meme based on sentiment, and lets you share your trading wins (or losses) with style.

✨ Features

• 📸 Easy Upload - Drag and drop your PnL screenshot
• 🤖 Smart OCR - Automatically detects profit/loss percentages using Tesseract.js
• 🎭 Sentiment Analysis - Classifies your PnL as positive, negative, or neutral
• 🎨 Auto Meme Selection - Fetches relevant memes from Tenor API based on sentiment
• 🖼️ Image Composition - Overlays memes on your screenshot with randomized positioning
• 📱 Share to X (Twitter) - One-click sharing with pre-filled text
• ⬇️ Download - Save your meme as PNG
• 🔄 Shuffle - Don't like the meme? Generate a new one!

🚀 Quick Start

Prerequisites

• Node.js 18+ (Note: create-next-app requires Node 20+, but the app itself works with 18+)
• npm or yarn

Installation

1. Clone the repository

   cd HyperMeme

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Optional: Get your Tenor API key from https://developers.google.com/tenor/guides/quickstart
   # The app works with a demo key, but you may hit rate limits
   NEXT_PUBLIC_TENOR_API_KEY=your_tenor_api_key_here
   
   # Optional: Use Giphy instead (https://developers.giphy.com/)
   # NEXT_PUBLIC_GIPHY_API_KEY=your_giphy_api_key_here

4. Run the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

📁 Project Structure

HyperMeme/
├── app/
│   ├── page.tsx          # Main application page
│   ├── layout.tsx        # Root layout
│   └── globals.css       # Global styles
├── components/
│   ├── UploadZone.tsx    # Drag-and-drop upload component
│   ├── PnLDisplay.tsx    # PnL detection display
│   ├── MemePreview.tsx   # Meme preview component
│   └── ShareButtons.tsx  # Download and share buttons
├── lib/
│   ├── types.ts          # TypeScript type definitions
│   ├── ocr.ts            # OCR and PnL extraction logic
│   ├── memeFetcher.ts    # Tenor/Giphy API integration
│   └── imageComposer.ts  # Canvas-based image composition
└── public/               # Static assets

🛠️ Tech Stack

Layer	Technology
Frontend	Next.js 14 (App Router) + React 18
Styling	Tailwind CSS
Language	TypeScript
OCR	Tesseract.js
Meme API	Tenor (primary) / Giphy (fallback)
Image Processing	HTML Canvas API
Deployment	Vercel-ready

📖 How It Works

1. Upload - User uploads a PnL screenshot (PNG/JPG)
2. OCR Analysis - Tesseract.js extracts text and finds PnL percentage using regex
3. Sentiment Classification:
   • PnL > 2% → Positive (celebration memes)
   • PnL < -2% → Negative (crying memes)
   • |PnL| < 2% → Neutral (coping memes)
4. Meme Fetching - Tenor API fetches relevant memes based on sentiment
5. Image Composition - Canvas API overlays meme on screenshot
6. Share/Download - User can download or share to X (Twitter)

🎨 Customization

Adjusting Meme Search Queries

Edit lib/memeFetcher.ts:

const SEARCH_QUERIES: Record<PnLSentiment, string[]> = {
  positive: ['celebration meme', 'dancing meme', 'we are so back meme'],
  negative: ['crying meme', 'bro is cooked meme', 'disaster meme'],
  neutral: ['barely surviving meme', 'coping meme', 'we are okay meme'],
};

Adjusting Meme Overlay Size/Position

Edit lib/imageComposer.ts:

const composed = await composeImages({
  pnlImage: imageUrl,
  memeImage: meme.url,
  memeSize: 35, // Percentage of image width (adjust this)
  memePosition: 'random', // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center' | 'random'
});

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The app is a standard Next.js application and can be deployed to:

• Netlify
• Railway
• Cloudflare Pages
• AWS Amplify

🔧 Environment Variables

Variable	Required	Description
NEXT_PUBLIC_TENOR_API_KEY	No	Tenor API key (falls back to demo key)
NEXT_PUBLIC_GIPHY_API_KEY	No	Giphy API key (optional fallback)

📝 API Keys

Tenor API (Recommended)

1. Visit Google Tenor API
2. Create a project in Google Cloud Console
3. Enable Tenor API
4. Create credentials and copy API key

Giphy API (Alternative)

1. Visit Giphy Developers
2. Create an app
3. Copy API key

Note: The app works out of the box with Tenor's demo key, but you may hit rate limits with heavy usage.

🐛 Troubleshooting

OCR not detecting PnL

• Ensure the screenshot has clear, readable text
• Try images with higher resolution
• Make sure the PnL percentage is visible and not obscured

Meme not loading

• Check your internet connection
• Verify API keys are set correctly
• Check browser console for CORS errors

Build errors

• Make sure you're using Node.js 18+
• Delete node_modules and .next folders, then run npm install again
• Check that all dependencies are installed

🎯 Roadmap

• Hyperliquid API integration for live PnL fetching
• Video/GIF export support
• Meme curation dashboard
• User meme history/gallery
• Social leaderboard ("Top memes of the week")
• Custom meme upload option
• Multi-position overlay with multiple memes
• Text overlay customization

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

MIT License - feel free to use this project however you'd like!

🙏 Acknowledgments

• Hyperliquid - The inspiration for this project
• Tesseract.js - OCR engine
• Tenor - GIF API
• Next.js - React framework

💬 Support

Having issues? Open an issue on GitHub or reach out to the community.

---

Made with 🔥 for the trading community | Join Hyperliquid