Hugging Face's logo

Spaces:
khoaliamle
/
Sall-eGarbageDetection
Paused

App Files Community
Sall-eGarbageDetection
File size: 3,179 Bytes
57328cd
 
 
 
 
 
 
 
 
 
b75ea7b
142c453
b75ea7b
57328cd
142c453
57328cd
 
b75ea7b
57328cd
 
 
 
 
 
 
 
 
b75ea7b
57328cd
 
 
 
 
 
 
 
 
 
 
 
 
15598ab
 
 
 
 
 
142c453
 
 
 
 
 
57328cd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
body {
    font-family: 'Roboto', sans-serif; background: linear-gradient(270deg, rgb(44, 13, 58), rgb(13, 58, 56)); color: white; text-align: center; margin: 0; padding: 50px;
}
h1 {
    font-size: 40px;
    background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: bold;
}
/* Uploader */
#upload-container, #upload-container2, #upload-container3 {
    background: rgba(255, 255, 255, 0.2); padding: 20px; margin-bottom: 30px; width: 70%; border-radius: 10px; display: inline-block; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
#upload, #upload2, #upload3 {
    font-size: 18px; padding: 10px; border-radius: 5px; border: none; background: #fff; cursor: pointer;
}
/* Utils */
#loader {
    margin-top: 10px; margin-left: auto; margin-right: auto; width: 60px; height: 60px; font-size: 12px; text-align: center;
}
p {
    margin-top: 10px; font-size: 12px; color: #3498db;
}
#spinner {
    border: 8px solid #f3f3f3; border-top: 8px solid rgb(117 7 7); border-radius: 50%; animation: spin 1s linear infinite; width: 40px; height: 40px; margin: auto;
}
/* Dynamic screening */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#outputVideo {
    margin-top: 20px; width: 70%; margin-left: auto; margin-right: auto; max-width: 640px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
#downloadBtn {
    display: block; visibility: hidden; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none;
}
#downloadBtn:hover {
    background: #950606;
}
#checkAnimalBtn {
    display: block; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #2752ae; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none;
}
#checkAnimalBtn:hover {
    background: #8127ae;
}
#checkTrashBtn {
    display: block; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #147712; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none;
}
#checkTrashBtn:hover {
    background: #105e5d;
}
.hidden {
    display: none;
}
@media (max-width: 860px) {
    h1 { font-size: 30px; }
}
@media (max-width: 720px) {
    h1 { font-size: 25px; }
    #upload { font-size: 15px; }
    #downloadBtn { font-size: 13px; }
}
@media (max-width: 580px) {
    h1 { font-size: 20px; }
    #upload { font-size: 10px; }
    #downloadBtn { font-size: 10px; }
}
@media (max-width: 580px) {
    h1 { font-size: 10px; }
}
@media (max-width: 460px) {
    #upload { font-size: 7px; }
}
@media (max-width: 400px) {
    h1 { font-size: 14px; }
}
@media (max-width: 370px) {
    h1 { font-size: 11px; }
    #upload { font-size: 5px; }
    #downloadBtn { font-size: 7px; }
}
@media (max-width: 330px) {
    h1 { font-size: 8px; }
    #upload { font-size: 3px; }
    #downloadBtn { font-size: 5px; }
}