Hugging Face's logo

Spaces:
ssboost
/
swq2f
Running

App Files Community
swq2f
File size: 5,879 Bytes 
2c51ce3
 
 
 
 
 
 
 
 
20604cb
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
 
<!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">        
        <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">
              </div>
              <div id="layers-list" class="layers-list">
            </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>
          
    </div>
    
    <!-- ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ๋กœ๋“œ -->
    <script src="filter.js"></script>
    <script src="script.js"></script>
</body>
</html>