cardinalblue/dreamshaper-web

style transfer website

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

Getting Started

First, run the development server:

# install
yarn
# run
yarn dev

• Project Backlog on Notion
• Figma file

ENV File

# .env
NEXT_PUBLIC_TESTING_AMPLITUDE_KEY=YOUR_TEST_KEY
NEXT_PUBLIC_TESTING_GA_TRACKING_ID=YOUR_TEST_KEY

NEXT_PUBLIC_HOPTER_API_KEY=WEB_API_KEY

Style Transfer API

• API endpoint: https://serving.hopter.picc.co/api/v1/services/style-transfer-explorer/predictions
• WEB_API_KEY:

  eyJhbGciOiJBMjU2R0NNS1ciLCJlbmMiOiJBMjU2R0NNIiwiaXYiOiJYbk5TUzM1SVMwOE84Z04tIiwidGFnIjoidmllYjFvR0lCRFZuU1UyRGxZaXpZQSJ9.6JWQYstyjmYioNnXgPd4oB6LTi-BmQD0qB2U1yUQ72U.QldQBrW2aI_JfV_d.4I9ynw9D7rqCDeE3qNDgb6xySh5kXbNIDCCkQZFobLm0LlmM-LdhYcPwKO1V5bw8besHSLigbGVsfZNdHZOvzTI-_tX8t6u5j_a8wDbM-9qx6q1NbY0MiEMK7weblnBB1_2EDW4jnscl-A3DxYlW5E3itG2rfRcePLtrLqSz2DrlqYxsJXQHF4du3BJ360_UZn6lZqXEyNwIVb5JvHX_DcfnUl1YL0PfT4coEndJdtNb.Sv2kAiRX7TRuchZjlT-2pg
  

Style List

• File: src/utils/styleList.ts
• Style Transfer List

Dependencies

• UI component library: Radix UI
• CSS-in-JS: pandacss
• State management: Zustand
• Animation related: Lottie, GSAP