Spaces:
Sleeping
Sleeping
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>AI Model Cut Studio</title> | |
| <link rel="stylesheet" href="./styles.css" /> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <aside class="sidebar"> | |
| <div class="shoot-header"> | |
| <h1>AI 촬영</h1> | |
| <div> | |
| <button class="ghost-button tiny" type="button">초기화</button> | |
| </div> | |
| </div> | |
| <section class="left-section"> | |
| <h2>모델 얼굴 <span>ⓘ</span></h2> | |
| <div class="model-face-row"> | |
| <label class="face-upload" for="modelFaceUpload"> | |
| <input id="modelFaceUpload" name="model_face" type="file" accept="image/*" /> | |
| <span>＋</span> | |
| <em>업로드</em> | |
| </label> | |
| <button class="face-preset active" id="presetFaceButton" type="button" aria-label="기본 모델 얼굴"> | |
| <img src="/model_face_preset.png" alt="기본 모델 얼굴" /> | |
| </button> | |
| <label class="visually-hidden"> | |
| <input id="useUploadedFace" type="checkbox" /> | |
| 업로드 얼굴을 우선 사용 | |
| </label> | |
| </div> | |
| <div class="model-spec"> | |
| <div class="model-spec-head"> | |
| <strong>기본 모델</strong> | |
| <span>모델 스펙</span> | |
| </div> | |
| <dl> | |
| <div><dt>키</dt><dd>168cm</dd></div> | |
| <div><dt>몸무게</dt><dd>47kg</dd></div> | |
| <div><dt>상의</dt><dd>55 size</dd></div> | |
| <div><dt>하의</dt><dd>26 inch</dd></div> | |
| <div><dt>성별</dt><dd>여성</dd></div> | |
| </dl> | |
| </div> | |
| </section> | |
| <section class="left-section"> | |
| <h2>메인 제품</h2> | |
| <div class="product-grid" id="uploadPreview"> | |
| <div class="product-pair"> | |
| <h3>제품 1</h3> | |
| <label class="product-slot active"> | |
| <input name="product_1_front" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>앞면</em> | |
| </label> | |
| <label class="product-slot"> | |
| <input name="product_1_back" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>뒷면 (옵션)</em> | |
| </label> | |
| </div> | |
| <div class="product-pair"> | |
| <h3>제품 2</h3> | |
| <label class="product-slot"> | |
| <input name="product_2_front" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>앞면</em> | |
| </label> | |
| <label class="product-slot"> | |
| <input name="product_2_back" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>뒷면 (옵션)</em> | |
| </label> | |
| </div> | |
| <div class="product-pair"> | |
| <h3>제품 3</h3> | |
| <label class="product-slot"> | |
| <input name="product_3_front" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>앞면</em> | |
| </label> | |
| <label class="product-slot"> | |
| <input name="product_3_back" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>뒷면 (옵션)</em> | |
| </label> | |
| </div> | |
| <div class="product-pair"> | |
| <h3>제품 4</h3> | |
| <label class="product-slot"> | |
| <input name="product_4_front" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>앞면</em> | |
| </label> | |
| <label class="product-slot"> | |
| <input name="product_4_back" type="file" accept="image/*" /> | |
| <span class="upload-icon">↥</span> | |
| <em>뒷면 (옵션)</em> | |
| </label> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="left-section"> | |
| <h2>제품 정보</h2> | |
| <div class="product-tabs" data-group="selected-product"> | |
| <button class="active" type="button">제품 1</button> | |
| <button type="button">제품 2</button> | |
| <button type="button">제품 3</button> | |
| <button type="button">제품 4</button> | |
| </div> | |
| <div class="option-row"> | |
| <span>카테고리</span> | |
| <div class="tag-group" data-group="category"> | |
| <button type="button">상의</button> | |
| <button type="button">하의</button> | |
| <button type="button">스커트</button> | |
| <button type="button">원피스</button> | |
| <button class="active" type="button">아우터</button> | |
| </div> | |
| </div> | |
| <div class="option-row"> | |
| <span>길이</span> | |
| <div class="tag-group" data-group="length" id="lengthTags"> | |
| <button type="button">허리</button> | |
| <button class="active" type="button">골반</button> | |
| <button type="button">허벅지</button> | |
| </div> | |
| </div> | |
| <div class="option-row"> | |
| <span>핏</span> | |
| <div class="tag-group" data-group="fit"> | |
| <button type="button">슬림</button> | |
| <button class="active" type="button">표준</button> | |
| <button type="button">오버</button> | |
| </div> | |
| </div> | |
| <div class="length-summary"> | |
| 예상 총장 <strong id="totalLength">57.1cm</strong> | |
| <span>기본 모델 168cm 기준</span> | |
| </div> | |
| </section> | |
| <section class="left-section"> | |
| <h2>스타일</h2> | |
| <div class="option-row"> | |
| <span>샷 구성</span> | |
| <div class="tag-group" data-group="shot-target"> | |
| <button class="active" type="button">상의</button> | |
| <button type="button">하의</button> | |
| <button type="button">원피스</button> | |
| </div> | |
| </div> | |
| <div class="shot-grid" id="shotGrid"></div> | |
| <button class="batch-shot-button" id="batchShotButton" type="button" disabled>샷을 선택하면 일괄 생성할 수 있어요</button> | |
| <label class="prompt-label"> | |
| <input type="checkbox" checked /> | |
| 추가 요청 사항 | |
| </label> | |
| <textarea id="prompt" rows="4" spellcheck="false" placeholder="예: 옷 밑단은 둥근 형태, 벌룬핏 바지..."></textarea> | |
| <div class="control-row model-row"> | |
| <label for="imageModel">모델</label> | |
| <select id="imageModel"> | |
| <option value="openai:gpt-image-2">GPT Image 2</option> | |
| <option value="openai:gpt-image-1.5">GPT Image 1.5</option> | |
| <option value="openai:gpt-image-1">GPT Image 1</option> | |
| <option value="gemini:gemini-3.1-flash-image-preview">Gemini 3.1 Flash Image Preview</option> | |
| <option value="gemini:gemini-3-pro-image-preview">Gemini 3 Pro Image Preview</option> | |
| <option value="gemini:gemini-2.5-flash-image">Gemini 2.5 Flash Image</option> | |
| </select> | |
| </div> | |
| <div class="generation-controls"> | |
| <div class="segmented resolution" data-group="resolution"> | |
| <button class="active" type="button">1K</button> | |
| <button type="button">2K</button> | |
| </div> | |
| <button class="generate-button" id="generateButton" type="button">전신(정면) 3장 생성</button> | |
| </div> | |
| </section> | |
| </aside> | |
| <main class="workspace"> | |
| <header class="topbar"> | |
| <div> | |
| <h1>AI 모델 얼굴, 제품 이미지, 기장, 포즈를 조합해 선명한 모델컷을 생성합니다.</h1> | |
| </div> | |
| <div class="top-actions"> | |
| <button class="ghost-button" id="applyAiLabelButton" type="button">AI 표기</button> | |
| <button class="ghost-button" type="button">선택 삭제</button> | |
| <div class="download-menu"> | |
| <button class="primary-button" id="downloadMenuButton" type="button">선택 다운로드</button> | |
| <div class="download-options" id="downloadOptions"> | |
| <button type="button" data-format="jpg"><strong>JPG</strong><span>고효율성</span></button> | |
| <button type="button" data-format="png"><strong>PNG</strong><span>무손실</span></button> | |
| <button type="button" data-format="webp"><strong>WEBP</strong><span>경량</span></button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="status-strip"> | |
| <article> | |
| <span>입력 품질</span> | |
| <strong>원본 보존</strong> | |
| <em>제품 텍스처, 로고, 실루엣 잠금</em> | |
| </article> | |
| <article> | |
| <span>생성 예상</span> | |
| <strong id="elapsedTime">대기 중</strong> | |
| <em id="elapsedDetail">전신(정면) 후보 생성 전</em> | |
| </article> | |
| <article> | |
| <span>출력 구조</span> | |
| <strong>선택 컷 기반 확장</strong> | |
| <em>얼굴/의상 유지, 샷 구도만 변경</em> | |
| </article> | |
| </section> | |
| <section class="results"> | |
| <div class="section-heading"> | |
| <div> | |
| <span>생성 결과</span> | |
| <h2>모델컷 미리보기</h2> | |
| </div> | |
| </div> | |
| <div class="result-grid" id="resultGrid"> | |
| <article class="empty-state"> | |
| <strong>전신(정면) 후보 3장을 먼저 생성하세요.</strong> | |
| <span>제품 이미지와 모델 얼굴을 기준으로 후보 컷이 이 영역에 표시됩니다.</span> | |
| </article> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <div class="image-modal" id="imageModal" aria-hidden="true"> | |
| <div class="image-modal-backdrop" data-close-modal></div> | |
| <div class="image-modal-content" role="dialog" aria-modal="true" aria-label="생성 이미지 편집"> | |
| <div class="image-preview-pane"> | |
| <img id="modalImage" alt="선택한 생성 이미지 크게 보기" /> | |
| <strong id="modalTitle"></strong> | |
| </div> | |
| <aside class="edit-panel"> | |
| <div class="edit-panel-head"> | |
| <strong>Edit Image</strong> | |
| <button class="image-modal-close" type="button" data-close-modal>×</button> | |
| </div> | |
| <p class="edit-help">선택한 모델컷을 기준으로 참조 이미지와 지시어를 추가해 수정합니다.</p> | |
| <h3>참조 이미지</h3> | |
| <label class="edit-upload" for="editReferenceImages"> | |
| <input id="editReferenceImages" type="file" accept="image/*" multiple /> | |
| <span>＋</span> | |
| 참조 이미지 추가 | |
| </label> | |
| <div class="edit-reference-list" id="editReferenceList"></div> | |
| <h3>배경 변경</h3> | |
| <div class="edit-backgrounds" id="editBackgrounds"> | |
| <button type="button" data-bg="AI 디렉터">AI 디렉터</button> | |
| <button type="button" data-bg="순백">순백</button> | |
| <button type="button" data-bg="홈">홈</button> | |
| <button type="button" data-bg="카페">카페</button> | |
| <button type="button" data-bg="거리">거리</button> | |
| <button type="button" data-bg="쇼룸">쇼룸</button> | |
| <button type="button" data-bg="자연">자연</button> | |
| <button type="button" data-bg="해변">해변</button> | |
| <button type="button" data-bg="스튜디오">스튜디오</button> | |
| <button type="button" data-bg="야경">야경</button> | |
| </div> | |
| <h3>수정 지시어</h3> | |
| <textarea id="editInstruction" rows="6" placeholder="예: 조명을 더 밝게 해줘, 배경에 그림자를 추가해줘..."></textarea> | |
| <button class="edit-action" id="modalAiLabelButton" type="button">AI 표기 미리보기</button> | |
| <button class="edit-action primary" id="requestEditButton" type="button">수정 요청하기</button> | |
| <button class="edit-action" id="regenerateButton" type="button">기존 설정으로 재생성</button> | |
| <div class="edit-save-row"> | |
| <button class="edit-action" id="saveOriginalButton" type="button">원본 저장</button> | |
| <button class="edit-action" id="saveCurrentButton" type="button">현재 이미지 저장</button> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <script src="./script.js"></script> | |
| </body> | |
| </html> | |