Hugging Face's logo

Spaces:
DIAMONIK7777
/
wa_gc_api
Sleeping

App Files Community
DmitrMakeev commited on
Commit
3293cdd
•
1 Parent(s): 2138b6a

Update se_mes_im2.html

Browse files
Files changed (1) hide show
  1. se_mes_im2.html +127 -42
se_mes_im2.html CHANGED
@@ -1,43 +1,128 @@
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.0">
6
- <title>Camera Image</title>
7
- </head>
8
- <body>
9
- <h1>Upload Image</h1>
10
- <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
11
- <input type="file" name="photo">
12
- <button type="submit">Upload</button>
13
- </form>
14
- <div id="message"></div>
15
- <h1>Latest Image</h1>
16
- <img id="cameraImage" src="/image" alt="Image" style="width:100%;">
17
- <script>
18
- document.getElementById('uploadForm').addEventListener('submit', function(event) {
19
- event.preventDefault();
20
- var formData = new FormData(this);
21
- fetch('/upload', {
22
- method: 'POST',
23
- body: formData
24
- })
25
- .then(response => {
26
- if (response.ok) {
27
- return response.text();
28
- }
29
- throw new Error('Network response was not ok.');
30
- })
31
- .then(data => {
32
- document.getElementById('message').innerText = data;
33
- var image = document.getElementById("cameraImage");
34
- var fullUrl = data.split('saved to ')[1];
35
- image.src = fullUrl + "?" + new Date().getTime();
36
- })
37
- .catch(error => {
38
- document.getElementById('message').innerText = 'Error: ' + error.message;
39
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  });
41
- </script>
42
- </body>
43
- </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.0">
6
+ <title>Camera Image</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ text-align: center;
11
+ background-color: #f0f0f0;
12
+ margin: 0;
13
+ padding: 0;
14
+ }
15
+ h1 {
16
+ background-color: #4CAF50;
17
+ color: white;
18
+ padding: 20px;
19
+ margin: 0;
20
+ border-bottom: 2px solid #388E3C;
21
+ }
22
+ .input-row {
23
+ display: flex;
24
+ justify-content: center;
25
+ gap: 10px;
26
+ margin-top: 20px;
27
+ }
28
+ .input-row input, .input-row textarea {
29
+ padding: 10px;
30
+ font-size: 16px;
31
+ border: 1px solid #ccc;
32
+ border-radius: 5px;
33
+ }
34
+ #messageInput, #urlFileInput, #fileNameInput {
35
+ width: 80%;
36
+ margin-top: 20px;
37
+ }
38
+ #progressBarContainer {
39
+ width: 80%;
40
+ margin: 20px auto;
41
+ }
42
+ #progressBar {
43
+ width: 100%;
44
+ background-color: #ddd;
45
+ }
46
+ #progress {
47
+ width: 0%;
48
+ height: 30px;
49
+ background-color: #4CAF50;
50
+ text-align: center;
51
+ line-height: 30px;
52
+ color: white;
53
+ }
54
+ #sendButton {
55
+ color: white;
56
+ background-color: #4CAF50;
57
+ border: none;
58
+ cursor: pointer;
59
+ padding: 10px 20px;
60
+ font-size: 16px;
61
+ border-radius: 5px;
62
+ margin-top: 20px;
63
+ }
64
+ #sendButton:hover {
65
+ background-color: #388E3C;
66
+ }
67
+ #cameraImage {
68
+ width: 300px;
69
+ height: 300px;
70
+ margin-top: 20px;
71
+ }
72
+ #imageUrl {
73
+ margin-top: 20px;
74
+ font-size: 16px;
75
+ color: #333;
76
+ cursor: pointer;
77
+ text-decoration: underline;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body>
82
+ <h1>Upload Image</h1>
83
+ <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
84
+ <input type="file" name="photo">
85
+ <button type="submit">Upload</button>
86
+ </form>
87
+ <div id="message"></div>
88
+ <h1>Latest Image</h1>
89
+ <img id="cameraImage" src="/image" alt="Image">
90
+ <div id="imageUrl" onclick="copyToClipboard(this)">Click to copy URL</div>
91
+ <script>
92
+ document.getElementById('uploadForm').addEventListener('submit', function(event) {
93
+ event.preventDefault();
94
+ var formData = new FormData(this);
95
+ fetch('/upload', {
96
+ method: 'POST',
97
+ body: formData
98
+ })
99
+ .then(response => {
100
+ if (response.ok) {
101
+ return response.text();
102
+ }
103
+ throw new Error('Network response was not ok.');
104
+ })
105
+ .then(data => {
106
+ document.getElementById('message').innerText = data;
107
+ var image = document.getElementById("cameraImage");
108
+ var fullUrl = data.split('saved to ')[1];
109
+ image.src = fullUrl + "?" + new Date().getTime();
110
+ document.getElementById('imageUrl').innerText = fullUrl;
111
+ })
112
+ .catch(error => {
113
+ document.getElementById('message').innerText = 'Error: ' + error.message;
114
  });
115
+ });
116
+
117
+ function copyToClipboard(element) {
118
+ var tempInput = document.createElement("input");
119
+ tempInput.value = element.innerText;
120
+ document.body.appendChild(tempInput);
121
+ tempInput.select();
122
+ document.execCommand("copy");
123
+ document.body.removeChild(tempInput);
124
+ alert("URL copied to clipboard: " + element.innerText);
125
+ }
126
+ </script>
127
+ </body>
128
+ </html>