This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Browser Extension

The repo includes an unpacked browser extension at public/designit-extension.

To install it in Chrome or Edge:

1. Open the browser extensions page.
2. Turn on Developer mode.
3. Choose Load unpacked.
4. Select the public/designit-extension folder.

After installation, right-click any image and choose Open in DesignIt. The extension opens Studio with the image preloaded into Source through /studio?source=....

Python Dependencies

Some Studio features use local Python helpers, including source article detection.

Install the Python dependencies with:

pip install -r requirements.txt

Required packages currently include:

• numpy
• Pillow
• torch
• torchvision
• transformers

If article detection fails with ModuleNotFoundError: No module named 'torch' or a SegformerImageProcessor requires the Torchvision library import error, your Python environment is missing these dependencies.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Environment Variables

Create a .env.local file in the project root with your Google advertising IDs:

NEXT_PUBLIC_GOOGLE_ADSENSE_CLIENT=ca-pub-your-client-id
NEXT_PUBLIC_GOOGLE_ADSENSE_HOME_SLOT=your-homepage-ad-slot
NEXT_PUBLIC_GOOGLE_ADS_ID=AW-your-google-ads-id

Notes:

• NEXT_PUBLIC_GOOGLE_ADSENSE_CLIENT is your AdSense publisher ID.
• NEXT_PUBLIC_GOOGLE_ADSENSE_HOME_SLOT is the ad unit slot used on the homepage.
• NEXT_PUBLIC_GOOGLE_ADS_ID is optional and only needed if you want Google Ads conversion tracking.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.