awesome-gpt-image-2/docs/LOCAL_DEVELOPMENT.md
Jared Liu a00a14c74f feat: scaffold awesome-gpt-image-2 from nano-banana-pro template
Mirror of awesome-nano-banana-pro-prompts tuned for OpenAI's upcoming
GPT Image 2 (codename "duct-tape"):

- Swap CMS model filter to gpt-image-2 + campaign gpt-image-2-prompts
- i18n.ts: all 16 languages rebranded; rewrite seedancePromo to
  cross-promote nano-banana-pro, and whatIs content to reflect
  GPT Image 2's actual strengths:
    * Pixel-perfect multi-language text rendering (zh/en/ja)
    * Cross-image pixel-level consistency
    * Commercial-ready illustration quality
    * True art style induction
  Primary languages (en, zh, zh-TW, ja, ko) hand-translated;
  others fall back to English copy (will be refined later)
- markdown-generator: cover image path switched to
  gpt-image-2-prompts-cover-{en,zh}.png, arenaUrl points at the
  gallery page (the side-by-side arena page doesn't exist yet)
- GitHub Actions:
    * update-readme.yml runs on cron 0 0,12 * * * (twice daily
      per product request, instead of every 4 hours)
    * sync-approved-to-cms.yml wired to gpt-image-2 model
- Cover images, issue templates, docs, LICENSE (year 2026) updated
- Initial 16 README_*.md files generated from live CMS (78 prompts,
  44 categories) so the repo renders immediately without waiting
  for the first Action run

Secrets the repo needs before the Action runs on the remote:
  - CMS_HOST
  - CMS_API_KEY

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-20 14:42:24 +08:00

4.3 KiB

🛠️ Local Development Guide

📦 Prerequisites

  • Node.js 20+
  • pnpm (recommended) or npm
  • Access to Payload CMS instance

🚀 Quick Start

1. Install Dependencies

pnpm install
# or
npm install

2. Configure Environment Variables

Copy the example file and fill in your credentials:

cp .env.example .env

Edit .env and add your CMS credentials:

# Required for all scripts
CMS_HOST=https://your-cms-host.com
CMS_API_KEY=your-api-key-here

3. Test README Generation

pnpm run generate
# or
npm run generate

This will:

  • Load environment variables from .env automatically
  • Fetch prompts from your CMS
  • Generate README.md in the root directory

🧪 Testing Issue Sync (Optional)

If you want to test the Issue-to-CMS sync script locally:

1. Add GitHub Configuration to .env

# Optional - only for testing sync script
GITHUB_TOKEN=ghp_your_personal_access_token
GITHUB_REPOSITORY=YouMind-OpenLab/awesome-gpt-image-2
ISSUE_NUMBER=123
ISSUE_BODY="### Prompt Title
My Awesome Prompt

### Prompt
Create a beautiful sunset...

### Description
This prompt generates stunning sunset images...
"

2. Get GitHub Personal Access Token

  1. Go to GitHub Settings → Tokens
  2. Click "Generate new token (classic)"
  3. Select scopes: repo (full control)
  4. Copy the token to .env

3. Run Sync Script

pnpm run sync
# or
npm run sync

📝 Available Scripts

Script Command Description
Generate README pnpm run generate Fetch prompts and generate README.md
Sync Issue to CMS pnpm run sync Parse issue and sync to CMS (local testing)

🔧 How dotenv Works

Both scripts now automatically load .env via:

import 'dotenv/config';

This happens before any code runs, so process.env.CMS_HOST is available immediately.

Environment Variable Priority

  1. System environment variables (highest priority)
  2. .env file (loaded by dotenv)
  3. Default values (in code, if any)

Example:

# This overrides .env for this command only
CMS_HOST=https://staging.cms.com pnpm run generate

🔐 Security Best Practices

DO

  • Keep .env in .gitignore (already configured)
  • Use .env.example for documentation
  • Store production secrets in GitHub Secrets
  • Use different API keys for local/production

DON'T

  • Commit .env to git
  • Share your .env file
  • Use production credentials locally
  • Hardcode credentials in code

🐛 Troubleshooting

Error: "CMS API error: 401"

  • Check CMS_API_KEY is correct
  • Verify API key has required permissions
  • Ensure CMS_HOST doesn't have trailing slash

Error: "ISSUE_NUMBER not provided"

  • Only needed for pnpm run sync
  • Add ISSUE_NUMBER=123 to .env
  • Or run: ISSUE_NUMBER=123 pnpm run sync

Error: "Failed to fetch image"

  • Check image URL is publicly accessible
  • Verify CMS media upload endpoint is working
  • Try uploading manually to CMS first

📚 Project Structure

.
├── .env                  # Your local config (not in git)
├── .env.example          # Template for .env
├── scripts/
│   ├── generate-readme.ts    # Loads dotenv, generates README
│   ├── sync-approved-to-cms.ts  # Loads dotenv, syncs issues
│   └── utils/            # Utility modules
└── README.md             # Auto-generated (don't edit)

🎯 Workflow

Local Development

Edit .env → Run script → Test locally

Production (GitHub Actions)

Push code → Actions run → Secrets injected → Scripts run

💡 Tips

  1. Use different CMS instances

    • Local: CMS_HOST=http://localhost:3000
    • Staging: CMS_HOST=https://staging.cms.com
    • Production: Set in GitHub Secrets
  2. Test with dummy data

    • Create a test prompt in CMS
    • Mark it as featured
    • Run pnpm run generate
    • Check README output
  3. Debug mode

    • Add console.logs to scripts
    • Use TypeScript debugger
    • Check CMS API responses

🆘 Need Help?


Happy coding! 🚀