Hugging Face's logo

Spaces:
coreviz
/
coresole
Running

App Files Community
teamcoreviz commited on
Commit
724f01a
·
1 Parent(s): 3f4ac4f

styling

Browse files
Files changed (2) hide show
  1. index.html +29 -7
  2. style.css +60 -42
index.html CHANGED
@@ -10,15 +10,37 @@
10
  </head>
11
 
12
  <body>
13
- <h1>CoreSole™ Forensics AI – Image Embeddings for Shoeprint Recognition</h1>
14
- <p>Upload two images of shoeprints to get a similarity score using the CoreSole™ Vision AI model.</p>
15
- <p>This space is intended for demonstration purposes only. For production use and to index full shoe and shoeprint
16
- image collections, please contact <a href="https://coresole.com">CoreSole™</a>.</p>
 
 
 
 
 
 
 
 
 
 
 
17
 
18
- <iframe src="https://coreviz.io/tools/shoeprint-similarity/embed" width="100%" height="100%"
19
- style="min-height: 890px;">
20
 
21
- </iframe>
 
 
 
 
 
 
 
 
 
 
 
 
22
  </body>
23
 
24
  </html>
 
10
  </head>
11
 
12
  <body>
13
+ <div class="header">
14
+ <h1 style="color: white;">CoreSole™ Shoeprint AI</h1>
15
+ <p style="color: #ccc;">CoreSole™ is a vision AI model that generates accurate image embeddings for shoeprint
16
+ recognition tasks.</p>
17
+ <a href="https://coresole.com">
18
+ <div class="button">
19
+ Get Started
20
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
21
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
22
+ class="lucide lucide-arrow-right">
23
+ <path d="M5 12h14"></path>
24
+ <path d="m12 5 7 7-7 7"></path>
25
+ </svg>
26
+ </div>
27
+ </a>
28
 
29
+ </div>
 
30
 
31
+ <div class="body">
32
+ <iframe src="https://coreviz.io/tools/shoeprint-similarity/embed" width="100%" height="100%"
33
+ style="min-height: 890px; border: none;" scrolling="no" />
34
+
35
+ </iframe>
36
+ <div class="demo-header">
37
+ <p class="disclaimer">This space is intended for demonstration purposes only. For production use and to
38
+ index
39
+ full
40
+ shoe and shoeprint
41
+ image collections, please contact us.</p>
42
+ </div>
43
+ </div>
44
  </body>
45
 
46
  </html>
style.css CHANGED
@@ -11,66 +11,84 @@ body {
11
  }
12
 
13
  body {
 
14
  padding: 32px;
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
19
- display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
- align-items: center;
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
 
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
 
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
44
  }
45
 
46
- #upload {
47
- display: none;
 
 
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
 
 
 
 
 
 
 
 
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
68
  }
69
 
70
- .bounding-box-label {
71
- color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
76
  }
 
11
  }
12
 
13
  body {
14
+ background: rgb(21 21 21);
15
  padding: 32px;
16
+ font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
17
+ color: #ccc;
18
+ line-height: 1.5;
19
+ font-size: 16px;
20
+ font-weight: 400;
21
  }
22
 
23
+ body iframe {
24
+ border: none;
25
+ overflow: hidden;
 
 
 
26
  }
27
 
28
+ .header {
29
+ max-width: 600px;
30
+ margin: 0 auto;
31
+ text-align: center;
32
+ margin-bottom: 32px;
33
+ }
34
 
35
+ .header p {
36
+ color: #ccc;
37
+ margin-bottom: 16px;
38
+ }
39
 
40
+ .demo-header {
41
+ max-width: 800px;
42
+ margin: 0 auto;
43
+ text-align: left;
44
+ margin-bottom: 32px;
45
+ }
46
 
47
+ .demo-header p {
48
+ color: #ccc;
49
+ margin-bottom: 16px;
 
50
  }
51
 
52
+ .demo-header strong {
53
+ display: block;
54
+ text-align: left;
55
+ margin-bottom: 8px;
56
  }
57
 
58
+ .button {
59
+ display: inline-flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ padding: 12px 24px;
63
+ border-radius: 9999px;
64
+ background: #ea580c;
65
+ color: #fff;
66
+ font-size: 16px;
67
+ font-weight: 600;
68
+ text-decoration: none;
69
+ gap: 8px;
70
  }
71
 
72
+ .body {
73
+ max-width: 1200px;
74
+ margin: 0 auto;
 
75
  }
76
 
77
+ .demo {
78
+ margin-bottom: 16px;
79
  }
80
 
81
+ .demo strong {
82
+ display: block;
83
+ margin-bottom: 8px;
 
84
  }
85
 
86
+ .disclaimer {
87
+ margin-top: 8px;
88
+ color: #777;
89
+ font-size: 14px;
90
+ text-align: center;
91
+ font-weight: 400;
92
+ line-height: 1.5;
93
+ margin-bottom: 32px;
94
  }