joeseesun/qiaomu-artist-style

Qiaomu Artist Style

동일한 프롬프트로 383명 화가의 스타일 차이를 확인하세요.

이것은 화가 스타일 비교 웹사이트입니다: 모든 이미지가 동일한 장면 프롬프트를 사용하고 화가 이름만 변경하여, 다양한 예술가의 구도, 색채, 붓 터치, 분위기 차이를 직관적으로 볼 수 있습니다.

현재 /Users/joe/Downloads/1260位绘图艺术家名单.md에서 500명의 화가를 선별하여 생성 시도했으며, 로컬 WebP 이미지가 생성된 383명의 화가만 유지했습니다. 페이지는 이미지가 없는 작가를 표시하지 않습니다.

샘플 스타일

통일 프롬프트:

멀리 산이 있고, 가까이 깊은 숲과 시냇물이 있는, {화가 이름} 스타일의 그림

기능

• 화가의 영어 이름, 중국어 이름 및 스타일 태그 검색
• 장르별 필터링
• 마음에 드는 스타일을 즐겨찾기에 추가하여 로컬 브라우저에 저장
• 썸네일 클릭 시 라이트박스로 보기
• 방향키로 좌우 이미지 전환
• 한 번의 클릭으로 화가 이름 프롬프트 복사
• 각 이미지에 중국어 번역, 원본 스타일 이름 및 속성 정보 표시

모바일

페이지는 모바일 친화적입니다: 작은 화면에서는 단일 열 이미지 스트림으로 전환되고, 필터 태그는 가로 스크롤되며, 라이트박스는 큰 이미지와 세부 정보를 상하로 배치하여 가로 오버플로를 방지합니다.

<p align="center"> <img src="docs/assets/mobile-screenshot.png" alt="Qiaomu Artist Style 모바일 스크린샷" width="360" /> </p>

원클릭 배포

!Deploy with Vercel

배포 설명:

1. 버튼을 클릭합니다.
2. Vercel에 로그인하고 GitHub 계정을 선택합니다.
3. 기본 설정을 유지하고 바로 Deploy를 클릭합니다.

배포 시 환경 변수가 필요하지 않습니다. 현재 페이지는 저장소 내의 정적 WebP 이미지를 직접 읽기 때문입니다.

로컬 개발

npm install
npm run dev

나만의 동일 장면 갤러리로 변경하기

이 프로젝트의 핵심은 "동일한 장면 + 다른 예술가 스타일"입니다. 다른 주제로 변경하려면 먼저 한 줄의 설정을 변경하세요:

// data/site-config.ts
promptTemplate: "창가에서 자고 있는 가필드 고양이, {artist} 스타일의 그림"

그런 다음 이미지를 다시 생성합니다:

export HIAPI_API_KEY="your_key"
npm run generate:images -- --limit=12 --force=true

설명:

• {artist}는 플레이스홀더로, 스크립트가 각 화가의 영어 이름으로 대체합니다.
• --force=true를 추가하지 않으면 스크립트가 기존 WebP를 건너뜁니다.
• 기존 이미지를 유지하려면 먼저 public/generated/를 백업한 후 강제 재생성하세요.

자동 스크린샷 업데이트

README 상단의 제품 스크린샷은 Playwright로 자동 생성됩니다. 로컬 서버를 시작한 후 스크린샷 스크립트를 실행하세요:

npm run build
npm run start
SCREENSHOT_URL=http://127.0.0.1:3000 npm run capture:screenshots

스크린샷은 다음 위치에 저장됩니다:

• docs/assets/product-screenshot.png
• docs/assets/artist-card-sample.png
• docs/assets/mobile-screenshot.png

이미지 생성

이미지는 HiAPI로 생성된 후 정적 리소스로 저장됩니다. 이미지를 다시 보충할 때만 로컬 API 키가 필요하며, 배포 및 탐색에는 필요하지 않습니다.

export HIAPI_API_KEY="your_key"
npm run generate:images -- --limit=12

스크립트는 이미 존재하는 WebP 파일을 건너뜁니다. 생성 결과는 public/generated/에 위치합니다. HiAPI의 단일 배치 타임아웃을 피하기 위해 배치로 생성하는 것이 좋습니다:

npm run generate:images -- --offset=12 --limit=25
npm run generate:images -- --offset=37 --limit=25

선택적 매개변수:

• --limit=25: 이 배치에서 최대 처리할 화가 수
• --offset=50: 몇 번째 화가부터 시작할지
• --quality=82: WebP 압축 품질
• --force=true: 기존 WebP를 덮어씀, 통일 장면을 변경한 후 재생성에 적합
• --stop-on-error=true: 단일 화가 실패 시 즉시 중단, 기본값은 실패를 기록하고 계속 진행

최종 사이트 데이터는 로컬 WebP 이미지가 있는 작가만 포함하며, 이미지가 없는 자리 표시자 카드는 표시하지 않습니다. 이미지가 없는 작가는 docs/generated-artists.md에 백업되며, 나중에 이미지를 보충한 후 데이터를 다시 정리할 수 있습니다.

작가 목록

원본 목록에서 500명 데이터를 다시 생성:

npm run build:artists

현재 필터 규칙:

1. 처음 테스트한 6명의 화가는 고정 유지.
2. 명확한 스타일 분류에 이미 속한 예술가를 우선 선택.
3. 목록에서 중국어 이름이나 굵게 표시된 예술가를 우선 유지.
4. 마지막으로 원본 목록 순서대로 500명을 채움.

최종 출시 목록:

• 원본 필터: 500명
• 생성 및 유지: 383명
• 생성되지 않음 및 백업: 117명, docs/generated-artists.md 참조

문제 해결