웹사이트용 AI 이미지 생성 위젯 코드
방문자가 원하는 그림을 설명하면 페이지에서 바로 생성됩니다. 이미지 위젯 코드, 배치 옵션, 중요한 설정을 안내합니다.
게시일:
이미지 생성 위젯은 짧은 텍스트 설명을 그림으로 바꿔 페이지에 바로 보여 줍니다. 방문자가 보고 싶은 것을 입력하면 선택한 모델이 이미지를 만들고, 결과가 다운로드 링크와 함께 위젯에 나타납니다. 프런트엔드를 만들거나 서버에서 파일을 처리할 필요가 없습니다.
이미지 위젯의 작동 방식
- 방문자가 설명을 입력합니다. 예: "해 질 녘 수채화풍 등대".
- 위젯이 위젯 ID를 통해 프롬프트를 api14로 보냅니다. API 키와 설정은 서버에 그대로 남아 있습니다.
- 이미지 모델이 그림을 생성하고, 위젯이 다운로드 링크와 함께 보여 줍니다.
모든 요청은 모델의 정상 가격으로 USD 잔액에서 차감되며, 아래에서 설명할 관리 설정이 위젯의 지출 범위를 정합니다.
위젯 코드
위젯에서 위젯을 만들고 유형으로 이미지를 선택한 뒤 저장하세요. 그러면 편집기에 코드가 표시됩니다.
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
생성기가 나타날 위치에 붙여 넣으세요. 기존 요소 안에 그리려면 data-target="#gallery"를, 결과에 더 넓은 공간을 주려면 data-height="520px"를 사용하세요(이미지 위젯의 기본값은 420px). 모서리 버튼으로 생성기를 열고 싶다면 떠 있는 버튼 배치를 선택하세요.
잠깐 살펴볼 만한 설정
- 모델: 선택기에 카탈로그의 이미지 모델이 가격과 함께 표시됩니다. 기존 이미지를 편집하거나 업스케일만 하는 모델은 여기서 쓸모가 없습니다. 위젯은 텍스트 프롬프트에서 시작하기 때문입니다.
- API 키: 위젯을 실행할 키를 선택하거나 목록 끝의 새 API 키 만들기를 고르세요. 해당 키의 일일 지출 한도, 요청 속도, 허용 모델이 위젯에 적용됩니다.
- 문구: 제목, 입력창 안내 문구(좋은 예시 프롬프트가 있으면 방문자가 쉽게 시작합니다), 버튼 문구를 정하세요.
- 모양: 강조 색상, 테마(방문자 설정 따르기, 라이트, 다크), 모서리 둥글기를 디자인에 맞추세요.
이미지 위젯이 잘 어울리는 곳
- 블로그와 창작 커뮤니티: 방문자가 자신의 아이디어를 직접 그림으로 표현합니다.
- 에이전시와 스튜디오: 랜딩 페이지의 빠른 콘셉트 도구로 활용합니다.
- 교육: 학생들이 설명을 시각 자료로 바꿔 함께 이야기합니다.
게시 전에
설정, 위젯 사이트에 도메인을 등록하세요. 위젯은 등록된 사이트의 요청에만 응답합니다. 일일 지출 한도를 설정하고, 편집기 미리보기에서 프롬프트 몇 개를 시험해 본 뒤, 데스크톱과 휴대폰 모두에서 결과를 확인하세요.
계정 없이 위젯 페이지에서 이미지 위젯을 디자인할 수 있습니다. 모든 옵션은 위젯 문서에 자세히 나와 있습니다.