Hugging Face's logo

Spaces:
limenous
/
bulk-watermark-app
Sleeping

App Files Community
limenous commited on
Commit
e7f5cfc
·
1 Parent(s): bd4d527

Updated UI with new header, footer and ACO logo styling

Browse files
Files changed (5) hide show
  1. docker +0 -0
  2. static/images/aco-logo.png +0 -0
  3. templates/form_content.html +67 -0
  4. templates/index.html +132 -99
  5. templates/results.html +196 -39
docker ADDED
File without changes
static/images/aco-logo.png ADDED
templates/form_content.html ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div class="form-container">
2
+ <div class="image-preview">
3
+ <div id="preview-container"></div>
4
+ <p id="preview-text">Image Preview</p>
5
+ </div>
6
+ <div class="form-fields">
7
+ <form id="watermark-form" method="post" action="/upload" enctype="multipart/form-data">
8
+ <div class="form-group">
9
+ <label for="files">Images to be Watermarked:</label>
10
+ <div class="file-input-wrapper">
11
+ <button class="btn-file-input" type="button">Choose files</button>
12
+ <input type="file" id="files" name="files" multiple style="display: none;">
13
+ <span class="file-name">No files selected</span>
14
+ </div>
15
+ </div>
16
+ <div class="form-group">
17
+ <label for="watermark-text">Watermark Text:</label>
18
+ <input type="text" name="watermark_text" id="watermark-text">
19
+ </div>
20
+ <div class="form-group">
21
+ <label for="text-position">Text Position:</label>
22
+ <select name="text_position" id="text-position">
23
+ <option value="top-left">Top Left</option>
24
+ <option value="top-right">Top Right</option>
25
+ <option value="center">Center</option>
26
+ <option value="bottom-left">Bottom Left</option>
27
+ <option value="bottom-right">Bottom Right</option>
28
+ </select>
29
+ </div>
30
+ <div class="form-group">
31
+ <label for="text-transparency">Text Transparency (0-100):</label>
32
+ <input type="range" name="text_transparency" id="text-transparency" value="100" min="0" max="100">
33
+ </div>
34
+ <div class="form-group">
35
+ <label for="text-size">Text Size (0.1-5.0):</label>
36
+ <input type="range" step="0.1" name="text_size" id="text-size" value="1.0" min="0.1" max="5.0">
37
+ </div>
38
+ <div class="form-group">
39
+ <label for="watermark-image">Watermark Image:</label>
40
+ <div class="file-input-wrapper">
41
+ <button class="btn-file-input" type="button">Choose file</button>
42
+ <input type="file" id="watermark-image" name="watermark_image" style="display: none;">
43
+ <span class="file-name">No file selected</span>
44
+ </div>
45
+ </div>
46
+ <div class="form-group">
47
+ <label for="image-position">Image Position:</label>
48
+ <select name="image_position" id="image-position">
49
+ <option value="top-left">Top Left</option>
50
+ <option value="top-right">Top Right</option>
51
+ <option value="center">Center</option>
52
+ <option value="bottom-left">Bottom Left</option>
53
+ <option value="bottom-right">Bottom Right</option>
54
+ </select>
55
+ </div>
56
+ <div class="form-group">
57
+ <label for="image-transparency">Image Transparency (0-100):</label>
58
+ <input type="range" name="image_transparency" id="image-transparency" value="100" min="0" max="100">
59
+ </div>
60
+ <div class="form-group">
61
+ <label for="image-size">Image Size (0.1-5.0):</label>
62
+ <input type="range" step="0.1" name="image_size" id="image-size" value="1.0" min="0.1" max="5.0">
63
+ </div>
64
+ <button type="submit">Apply Watermark</button>
65
+ </form>
66
+ </div>
67
+ </div>
templates/index.html CHANGED
@@ -1,123 +1,156 @@
1
- <!doctype html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Image Watermarking</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
8
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
9
  <style>
10
- /* Additional styles to reduce dimensions */
11
- .container {
12
- max-width: 600px;
13
- padding: 15px;
 
 
 
 
14
  }
15
- h1 {
16
- font-size: 1.25rem;
17
- margin-bottom: 15px;
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
- .form-container {
20
- gap: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
21
  }
22
- .image-preview {
23
- min-height: 150px;
24
- max-height: 300px;
25
- padding: 10px;
 
 
 
26
  }
27
- .form-group {
28
- margin-bottom: 10px;
 
29
  }
30
- label {
31
- margin-bottom: 4px;
32
- font-size: 0.8rem;
 
 
 
 
 
 
 
 
 
 
33
  }
34
- input[type="text"],
35
- select {
36
- padding: 5px;
37
- font-size: 0.8rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
- .btn-file-input {
40
- padding: 5px 8px;
41
- font-size: 0.8rem;
 
 
42
  }
43
- button[type="submit"] {
44
- padding: 6px 12px;
45
- font-size: 0.9rem;
46
- margin-top: 10px;
47
  }
 
 
 
 
 
 
 
 
 
48
  </style>
 
49
  </head>
50
  <body>
51
- <div class="container">
52
- <h1>Image Watermarking</h1>
53
- <div class="form-container">
54
- <div class="image-preview">
55
- <div id="preview-container"></div>
56
- <p id="preview-text">Image Preview</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  </div>
58
- <div class="form-fields">
59
- <form id="watermark-form" method="post" action="/upload" enctype="multipart/form-data">
60
- <div class="form-group">
61
- <label for="files">Images to be Watermarked:</label>
62
- <div class="file-input-wrapper">
63
- <button class="btn-file-input" type="button">Choose files</button>
64
- <input type="file" id="files" name="files" multiple style="display: none;">
65
- <span class="file-name">No files selected</span>
66
- </div>
67
- </div>
68
- <div class="form-group">
69
- <label for="watermark-text">Watermark Text:</label>
70
- <input type="text" name="watermark_text" id="watermark-text">
71
- </div>
72
- <div class="form-group">
73
- <label for="text-position">Text Position:</label>
74
- <select name="text_position" id="text-position">
75
- <option value="top-left">Top Left</option>
76
- <option value="top-right">Top Right</option>
77
- <option value="center">Center</option>
78
- <option value="bottom-left">Bottom Left</option>
79
- <option value="bottom-right">Bottom Right</option>
80
- </select>
81
- </div>
82
- <div class="form-group">
83
- <label for="text-transparency">Text Transparency (0-100):</label>
84
- <input type="range" name="text_transparency" id="text-transparency" value="100" min="0" max="100">
85
- </div>
86
- <div class="form-group">
87
- <label for="text-size">Text Size (0.1-5.0):</label>
88
- <input type="range" step="0.1" name="text_size" id="text-size" value="1.0" min="0.1" max="5.0">
89
- </div>
90
- <div class="form-group">
91
- <label for="watermark-image">Watermark Image:</label>
92
- <div class="file-input-wrapper">
93
- <button class="btn-file-input" type="button">Choose file</button>
94
- <input type="file" id="watermark-image" name="watermark_image" style="display: none;">
95
- <span class="file-name">No file selected</span>
96
- </div>
97
- </div>
98
- <div class="form-group">
99
- <label for="image-position">Image Position:</label>
100
- <select name="image_position" id="image-position">
101
- <option value="top-left">Top Left</option>
102
- <option value="top-right">Top Right</option>
103
- <option value="center">Center</option>
104
- <option value="bottom-left">Bottom Left</option>
105
- <option value="bottom-right">Bottom Right</option>
106
- </select>
107
- </div>
108
- <div class="form-group">
109
- <label for="image-transparency">Image Transparency (0-100):</label>
110
- <input type="range" name="image_transparency" id="image-transparency" value="100" min="0" max="100">
111
- </div>
112
- <div class="form-group">
113
- <label for="image-size">Image Size (0.1-5.0):</label>
114
- <input type="range" step="0.1" name="image_size" id="image-size" value="1.0" min="0.1" max="5.0">
115
- </div>
116
- <button type="submit">Apply Watermark</button>
117
- </form>
118
  </div>
119
  </div>
120
- </div>
 
 
 
 
121
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
122
  <script src="{{ url_for('static', filename='script.js') }}"></script>
123
  </body>
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Image Watermarking - ACO</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 
8
  <style>
9
+ :root {
10
+ --primary-color: #000000;
11
+ --secondary-color: #f5a623;
12
+ --background-color: #f7f9fc;
13
+ --text-color: #333333;
14
+ --border-color: #e0e0e0;
15
+ --header-height: 80px;
16
+ --footer-height: 60px;
17
  }
18
+
19
+ /* Header Styles */
20
+ .header {
21
+ background: #fff;
22
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
23
+ position: fixed;
24
+ top: 0;
25
+ left: 0;
26
+ right: 0;
27
+ height: var(--header-height);
28
+ display: flex;
29
+ align-items: center;
30
+ padding: 0 40px;
31
+ z-index: 1000;
32
  }
33
+
34
+ .header-logo {
35
+ height: 40px;
36
+ margin-right: 40px;
37
+ }
38
+
39
+ .header-logo img {
40
+ height: 100%;
41
+ width: auto;
42
+ }
43
+
44
+ .nav-links {
45
+ display: flex;
46
+ gap: 30px;
47
  }
48
+
49
+ .nav-links a {
50
+ color: var(--primary-color);
51
+ text-decoration: none;
52
+ font-weight: 500;
53
+ font-size: 16px;
54
+ transition: color 0.3s ease;
55
  }
56
+
57
+ .nav-links a:hover {
58
+ color: var(--secondary-color);
59
  }
60
+
61
+ /* Footer Styles */
62
+ .footer {
63
+ background: #000;
64
+ position: fixed;
65
+ bottom: 0;
66
+ left: 0;
67
+ right: 0;
68
+ height: var(--footer-height);
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: space-between;
72
+ padding: 0 40px;
73
  }
74
+
75
+ .footer-content {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 40px;
79
+ }
80
+
81
+ .footer-logo {
82
+ height: 30px;
83
+ }
84
+
85
+ .footer-logo img {
86
+ height: 100%;
87
+ width: auto;
88
+ filter: invert(1);
89
+ }
90
+
91
+ .footer-links {
92
+ display: flex;
93
+ gap: 20px;
94
  }
95
+
96
+ .footer-links a {
97
+ color: #fff;
98
+ text-decoration: none;
99
+ font-size: 14px;
100
  }
101
+
102
+ .copyright {
103
+ color: #fff;
104
+ font-size: 14px;
105
  }
106
+
107
+ /* Adjust main content for fixed header/footer */
108
+ .main-content {
109
+ margin-top: calc(var(--header-height) + 20px);
110
+ margin-bottom: calc(var(--footer-height) + 20px);
111
+ padding: 20px;
112
+ }
113
+
114
+ /* Your existing styles would go here */
115
  </style>
116
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
117
  </head>
118
  <body>
119
+ <header class="header">
120
+ <div class="header-logo">
121
+ <img src="{{ url_for('static', filename='images/aco-logo.png') }}" alt="ACO Logo">
122
+ </div>
123
+ <nav class="nav-links">
124
+ <a href="/">Home</a>
125
+ <a href="#">About</a>
126
+ <a href="#">Contact</a>
127
+ <a href="#">Help</a>
128
+ </nav>
129
+ </header>
130
+
131
+ <div class="main-content">
132
+ <div class="container">
133
+ <h1>Image Watermarking</h1>
134
+ {% include 'form_content.html' %}
135
+ </div>
136
+ </div>
137
+
138
+ <footer class="footer">
139
+ <div class="footer-content">
140
+ <div class="footer-logo">
141
+ <img src="{{ url_for('static', filename='images/aco-logo.png') }}" alt="ACO Logo">
142
  </div>
143
+ <div class="footer-links">
144
+ <a href="#">Terms of Service</a>
145
+ <a href="#">Privacy Policy</a>
146
+ <a href="#">Contact</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
  </div>
148
  </div>
149
+ <div class="copyright">
150
+ © 2024 ACO. All rights reserved.
151
+ </div>
152
+ </footer>
153
+
154
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
155
  <script src="{{ url_for('static', filename='script.js') }}"></script>
156
  </body>
templates/results.html CHANGED
@@ -1,63 +1,220 @@
1
- <!doctype html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Watermarking Results</title>
 
7
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
8
  <style>
9
- /* Additional styles to reduce dimensions */
10
- .container {
11
- max-width: 600px;
12
- padding: 15px;
 
 
 
 
13
  }
14
- h1 {
15
- font-size: 1.25rem;
16
- margin-bottom: 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  }
18
- .results-container {
19
- gap: 15px;
 
 
20
  }
21
- .thumbnail h2,
22
- .actions h2 {
23
- font-size: 1rem;
24
- margin-bottom: 10px;
 
25
  }
26
- .image-gallery {
27
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
28
- gap: 10px;
 
29
  }
 
30
  .action-button {
31
- padding: 6px 12px;
32
- font-size: 0.8rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  }
34
  </style>
35
  </head>
36
  <body>
37
- <div class="container">
38
- <h1>Watermarking Results</h1>
39
-
40
- <div class="results-container">
41
- <div class="thumbnail">
42
- <h2>Preview</h2>
43
- <div class="image-gallery">
44
- {% for thumbnail_url in thumbnail_urls %}
45
- <div class="gallery-item">
46
- <img src="{{ thumbnail_url }}" alt="Watermarked Image Thumbnail">
47
- </div>
48
- {% endfor %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </div>
50
- </div>
51
 
52
- <div class="actions">
53
- <h2>Actions</h2>
54
- <a href="{{ zip_url }}" class="action-button" download>Download All (ZIP)</a>
 
55
  </div>
56
  </div>
 
57
 
58
- <div class="upload-more">
59
- <a href="{{ url_for('index') }}" class="action-button">Watermark More Images</a>
 
 
 
 
 
 
 
 
60
  </div>
61
- </div>
 
 
 
62
  </body>
63
  </html>
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Watermarking Results - ACO</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
8
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
9
  <style>
10
+ :root {
11
+ --primary-color: #000000;
12
+ --secondary-color: #f5a623;
13
+ --background-color: #f7f9fc;
14
+ --text-color: #333333;
15
+ --border-color: #e0e0e0;
16
+ --header-height: 80px;
17
+ --footer-height: 60px;
18
  }
19
+
20
+ /* Header Styles */
21
+ .header {
22
+ background: #fff;
23
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
24
+ position: fixed;
25
+ top: 0;
26
+ left: 0;
27
+ right: 0;
28
+ height: var(--header-height);
29
+ display: flex;
30
+ align-items: center;
31
+ padding: 0 40px;
32
+ z-index: 1000;
33
+ }
34
+
35
+ .header-logo {
36
+ height: 40px;
37
+ margin-right: 40px;
38
+ }
39
+
40
+ .header-logo img {
41
+ height: 100%;
42
+ width: auto;
43
+ }
44
+
45
+ .nav-links {
46
+ display: flex;
47
+ gap: 30px;
48
+ }
49
+
50
+ .nav-links a {
51
+ color: var(--primary-color);
52
+ text-decoration: none;
53
+ font-weight: 500;
54
+ font-size: 16px;
55
+ transition: color 0.3s ease;
56
+ }
57
+
58
+ .nav-links a:hover {
59
+ color: var(--secondary-color);
60
+ }
61
+
62
+ /* Footer Styles */
63
+ .footer {
64
+ background: #000;
65
+ position: fixed;
66
+ bottom: 0;
67
+ left: 0;
68
+ right: 0;
69
+ height: var(--footer-height);
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: space-between;
73
+ padding: 0 40px;
74
+ }
75
+
76
+ .footer-content {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 40px;
80
+ }
81
+
82
+ .footer-logo {
83
+ height: 30px;
84
+ }
85
+
86
+ .footer-logo img {
87
+ height: 100%;
88
+ width: auto;
89
+ filter: invert(1);
90
+ }
91
+
92
+ .footer-links {
93
+ display: flex;
94
+ gap: 20px;
95
+ }
96
+
97
+ .footer-links a {
98
+ color: #fff;
99
+ text-decoration: none;
100
+ font-size: 14px;
101
+ }
102
+
103
+ .copyright {
104
+ color: #fff;
105
+ font-size: 14px;
106
+ }
107
+
108
+ /* Main Content Styles */
109
+ .main-content {
110
+ margin-top: calc(var(--header-height) + 20px);
111
+ margin-bottom: calc(var(--footer-height) + 20px);
112
+ padding: 20px;
113
+ }
114
+
115
+ /* Results specific styles */
116
+ .gallery-item {
117
+ position: relative;
118
+ border: 1px solid var(--border-color);
119
+ border-radius: 8px;
120
+ overflow: hidden;
121
+ transition: transform 0.3s ease;
122
+ }
123
+
124
+ .gallery-item:hover {
125
+ transform: translateY(-5px);
126
  }
127
+
128
+ .gallery-item a {
129
+ display: block;
130
+ text-decoration: none;
131
  }
132
+
133
+ .gallery-item img {
134
+ width: 100%;
135
+ height: auto;
136
+ display: block;
137
  }
138
+
139
+ .actions {
140
+ margin-top: 30px;
141
+ text-align: center;
142
  }
143
+
144
  .action-button {
145
+ background-color: var(--primary-color);
146
+ color: #fff;
147
+ padding: 12px 24px;
148
+ border-radius: 4px;
149
+ text-decoration: none;
150
+ font-weight: 500;
151
+ transition: background-color 0.3s ease;
152
+ display: inline-block;
153
+ margin: 0 10px;
154
+ }
155
+
156
+ .action-button:hover {
157
+ background-color: #333;
158
+ }
159
+
160
+ .upload-more {
161
+ text-align: center;
162
+ margin-top: 40px;
163
  }
164
  </style>
165
  </head>
166
  <body>
167
+ <header class="header">
168
+ <div class="header-logo">
169
+ <img src="{{ url_for('static', filename='images/aco-logo.png') }}" alt="ACO Logo">
170
+ </div>
171
+ <nav class="nav-links">
172
+ <a href="/">Home</a>
173
+ <a href="#">About</a>
174
+ <a href="#">Contact</a>
175
+ <a href="#">Help</a>
176
+ </nav>
177
+ </header>
178
+
179
+ <div class="main-content">
180
+ <div class="container">
181
+ <h1>Watermarking Results</h1>
182
+ <div class="results-container">
183
+ <div class="thumbnail">
184
+ <h2>Preview</h2>
185
+ <div class="image-gallery">
186
+ {% for thumbnail_url, watermarked_url in zip(thumbnail_urls, watermarked_file_urls) %}
187
+ <div class="gallery-item">
188
+ <a href="{{ watermarked_url }}" target="_blank">
189
+ <img src="{{ thumbnail_url }}" alt="Watermarked Image Thumbnail">
190
+ </a>
191
+ </div>
192
+ {% endfor %}
193
+ </div>
194
  </div>
 
195
 
196
+ <div class="actions">
197
+ <a href="{{ zip_url }}" class="action-button" download>Download All (ZIP)</a>
198
+ <a href="{{ url_for('index') }}" class="action-button">Watermark More Images</a>
199
+ </div>
200
  </div>
201
  </div>
202
+ </div>
203
 
204
+ <footer class="footer">
205
+ <div class="footer-content">
206
+ <div class="footer-logo">
207
+ <img src="{{ url_for('static', filename='images/aco-logo.png') }}" alt="ACO Logo">
208
+ </div>
209
+ <div class="footer-links">
210
+ <a href="#">Terms of Service</a>
211
+ <a href="#">Privacy Policy</a>
212
+ <a href="#">Contact</a>
213
+ </div>
214
  </div>
215
+ <div class="copyright">
216
+ © 2024 ACO. All rights reserved.
217
+ </div>
218
+ </footer>
219
  </body>
220
  </html>