Hugging Face's logo

Spaces:
ssboost
/
swq2f
Running

App Files Community
swq2f
File size: 6,192 Bytes 
2c51ce3
 
 
 
 
 
 
 
 
8c6f346
 
 
 
2c51ce3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12bf249
2c51ce3
12bf249
 
 
 
 
 
 
2c51ce3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 겹치기 편집기 (여러 이미지 지원)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>이미지 겹치기 편집기</h1>
        <p>배경 이미지 위에 여러 개의 배경 제거된 이미지를 배치하고 각각 조절한 후, 조절된 이미지들만 PNG로 추출합니다.</p>
        
        <div class="upload-container">
            <div class="upload-box">
                <span class="upload-label">1. 원본 이미지 선택</span>
                <input type="file" id="background-input" class="file-input" accept="image/*">
                <label for="background-input" class="upload-button">원본 이미지 업로드</label>
            </div>
            <div class="upload-box">
                <span class="upload-label">2. 배경 제거된 이미지 선택 (추출될 PNG, 여러 개 가능)</span>
                <input type="file" id="overlay-input" class="file-input" accept="image/*">
                <label for="overlay-input" class="upload-button">겹칠 이미지 업로드</label>
            </div>
        </div>
        
        <div class="control-panel">
            <div class="control-group">
                <h3>위치 및 크기 (선택된 이미지)</h3> 
                <div class="slider-container">
                    <label for="scale-slider">크기:</label>
                    <input type="range" id="scale-slider" min="10" max="500" value="100" disabled> 
                    <span id="scale-value" class="value-display">100%</span>
                </div>
                <div class="slider-container">
                    <label for="rotation-slider">회전:</label>
                    <input type="range" id="rotation-slider" min="0" max="360" value="0" disabled> 
                    <span id="rotation-value" class="value-display">0°</span> 
                </div>
            </div>

            <div class="control-group">
                <h3>예시 이미지 선택</h3>
                <div id="example-images-container" style="display: flex; justify-content: space-around; margin-top: 15px;">
                    <img src="1.png" alt="Example 1" class="example-img" data-filename="1.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
                    <img src="2.png" alt="Example 2" class="example-img" data-filename="2.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
                    <img src="3.png" alt="Example 3" class="example-img" data-filename="3.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
                    <img src="4.png" alt="Example 4" class="example-img" data-filename="4.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
                </div>
            </div>
            <div class="control-group filter-panel">
            </div>

            <div class="control-group" id="layers-panel">
                <h3>레이어 목록</h3>
                <div class="layer-option">
                    <button id="delete-layer-btn" class="danger-btn" disabled>선택 레이어 삭제</button>
                </div>
                <div id="layers-list" class="layers-list">
                </div>
            </div>
        </div>
        
        <div class="canvas-container">
            <canvas id="canvas" width="800" height="600"></canvas>
        </div>
        
        <!-- 필터 설정 섹션을 이미지 아래로 이동 -->
        <div class="filter-panel">
            <h3>필터 설정 (선택 레이어에 적용)</h3>
            
            <div class="filter-sliders">
                <div class="filter-slider-container">
                    <label for="temperature-slider">색온도:</label>
                    <input type="range" id="temperature-slider" min="-100" max="100" value="0" step="5" class="large-slider"> 
                    <span id="temperature-value" class="value-display">0</span>
                </div>
                
                <div class="filter-slider-container">
                    <label for="brightness-slider">밝기:</label>
                    <input type="range" id="brightness-slider" min="0" max="200" value="100" step="5" class="large-slider"> 
                    <span id="brightness-value" class="value-display">100%</span>
                </div>
                
                <div class="filter-slider-container">
                    <label for="contrast-slider">대비:</label>
                    <input type="range" id="contrast-slider" min="50" max="150" value="100" step="5" class="large-slider"> 
                    <span id="contrast-value" class="value-display">100%</span>
                </div>
                
                <div class="filter-slider-container">
                    <label for="saturation-slider">채도:</label>
                    <input type="range" id="saturation-slider" min="0" max="200" value="100" step="5" class="large-slider"> 
                    <span id="saturation-value" class="value-display">100%</span>
                </div>
            </div>
            
            <div class="filter-buttons">
                <button id="reset-filter-btn" class="danger-btn">필터 초기화</button>
            </div>
        </div>
        
        <div class="button-container">
            <button id="generate-btn" class="primary-btn" disabled>이미지 합치기</button>
            <button id="reset-all-btn" class="danger-btn">처음부터</button>
            <button id="download-btn" class="info-btn" disabled>다운로드</button>
        </div>
          
        <div class="preview-container" id="preview-container">
            <h3>합성된 이미지 미리보기</h3>
            <img id="preview-img" alt="합성 이미지 미리보기">
        </div>
    </div>
    
    <!-- 스크립트 파일 로드 -->
    <script src="filter.js"></script>
    <script src="script.js"></script>
</body>
</html>