CoolFace
Apppublic

Rikishini/campaign-concept-studio

sourceHugging Faceupdated 4mo agoView on Hugging Face
0likes
App README

Campaign Concept Studio

A full-stack concepting tool for marketing teams. Users enter a campaign brief, audience, product details, tone, and channels; the app returns a concise campaign concept, three copy variants, a launch checklist, image prompts, and generated campaign direction images.

OpenAI API Pattern

This app uses the current OpenAI Responses API patterns:

  • —Text generation: openai.responses.parse() with Structured Outputs and a Zod schema.
  • —Image generation: openai.responses.create() with the Responses API image_generation built-in tool.
  • —Default text model: gpt-5.5, based on the latest model guide.
  • —Default image flow model: gpt-5.5, using the image generation tool.

Reference docs used during implementation:

Client/Server Boundary

The browser never imports the OpenAI SDK and never sees OPENAI_API_KEY.

  • —Client UI: app/page.tsx
  • —Server-only API route: app/api/generate/route.ts
  • —Shared request/response schemas: app/lib/schemas.ts
  • —Model and image defaults: app/lib/openai-config.ts

The client submits form data to POST /api/generate. The server validates the payload, calls OpenAI, and returns only the generated campaign payload and image data URLs.

Install

bash
npm install

Create .env.local:

bash
cp .env.example .env.local

Set your key:

bash
OPENAI_API_KEY=sk-proj-your-key-here

Optional tuning:

bash
OPENAI_TEXT_MODEL=gpt-5.5
OPENAI_IMAGE_MODEL=gpt-5.5
OPENAI_IMAGE_SIZE=1024x1024
OPENAI_IMAGE_QUALITY=low

Run

bash
npm run dev

Open http://localhost:3000.

Hugging Face Space

This repository is prepared as a Docker Space.

bash
docker build -t campaign-concept-studio-space .
docker run --rm -p 7860:7860 --env-file .env.local campaign-concept-studio-space

Open http://localhost:7860. Keep OPENAI_API_KEY in local environment files or Space secrets; do not commit it.

Verify

bash
npm run typecheck
npm run build

Small validation plan:

  1. 1.Empty-key path: run without OPENAI_API_KEY and confirm the UI shows the server configuration error.
  2. 2.Input validation: clear required fields and confirm generation stays disabled or returns field-safe errors.
  3. 3.Happy path: generate a campaign and verify the concept, three variants, checklist, prompts, and images render.
  4. 4.Channel coverage: try one channel and several channels; confirm copy/channel fit changes.
  5. 5.Latency/error handling: interrupt network or use a bad key and confirm the loading state clears and the error state is readable.

Deployment Notes

For Vercel:

  1. 1.Import the project.
  2. 2.Add OPENAI_API_KEY as a project environment variable.
  3. 3.Keep the API route on the Node.js runtime.
  4. 4.Deploy with the default Next.js build command: npm run build.

For other Node hosts:

bash
npm run build
npm run start

Set OPENAI_API_KEY in the host environment, not in client-side build variables.

Tuning Later

  • —Model selection: edit app/lib/openai-config.ts or set OPENAI_TEXT_MODEL / OPENAI_IMAGE_MODEL.
  • —Campaign output shape: edit CampaignConceptSchema in app/lib/schemas.ts.
  • —Prompt behavior: adjust instructions and buildCampaignInput() in app/api/generate/route.ts.
  • —Image settings: set OPENAI_IMAGE_SIZE and OPENAI_IMAGE_QUALITY, or update the image_generation tool options in app/api/generate/route.ts.