Hugging Face's logo

Spaces:
qubvel-hf
/
vjepa2-streaming-video-classification
Running on L4

App Files Community
qubvel-hf HF Staff commited on
Commit
167c640
·
1 Parent(s): 79f197e

Add initial static page

Browse files
Files changed (2) hide show
  1. index.html +74 -19
  2. style.css +137 -17
index.html CHANGED
@@ -1,19 +1,74 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>VJEPA2 Video Classification Demo</title>
8
+ <link rel="stylesheet" href="style.css" />
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
10
+ </head>
11
+
12
+ <body>
13
+ <div class="container">
14
+ <header>
15
+ <h1>VJEPA2 Video Classification Demo</h1>
16
+ <p class="subtitle">Real-time video classification using state-of-the-art VJEPA2 model</p>
17
+ </header>
18
+
19
+ <section class="description">
20
+ <h2>About the Project</h2>
21
+ <p>This demo showcases the VJEPA2 model's capabilities in real-time video classification. VJEPA2 is a
22
+ state-of-the-art video understanding model that can analyze and classify video content in real-time,
23
+ making it ideal for applications requiring immediate video content analysis.</p>
24
+ </section>
25
+
26
+ <section class="demo">
27
+ <h2>Live Demo</h2>
28
+ <div class="video-container">
29
+ <!-- Video will be embedded here -->
30
+ <div class="video-placeholder">
31
+ <p>Video demo will be displayed here</p>
32
+ </div>
33
+ </div>
34
+ </section>
35
+
36
+ <section class="installation">
37
+ <h2>Getting Started</h2>
38
+ <div class="instructions">
39
+ <h3>1. Clone the Repository</h3>
40
+ <pre><code>git clone https://github.com/huggingface/transformers.git
41
+ cd transformers</code></pre>
42
+
43
+ <h3>2. Set Up Environment</h3>
44
+ <pre><code># Create and activate virtual environment
45
+ python -m venv .venv
46
+ source .venv/bin/activate # On Windows: .venv\Scripts\activate
47
+
48
+ # Install requirements
49
+ pip install -r demo/requirements.txt</code></pre>
50
+
51
+ <h3>3. Run the Demo</h3>
52
+ <pre><code>cd demo
53
+ python app.py</code></pre>
54
+ </div>
55
+ </section>
56
+
57
+ <section class="requirements">
58
+ <h2>Requirements</h2>
59
+ <ul>
60
+ <li>Python 3.9+</li>
61
+ <li>PyTorch 2.1+</li>
62
+ <li>CUDA-compatible GPU (recommended)</li>
63
+ <li>Webcam or video input device</li>
64
+ </ul>
65
+ </section>
66
+
67
+ <footer>
68
+ <p>Built with ❤️ using <a href="https://huggingface.co/transformers" target="_blank">Hugging Face
69
+ Transformers</a></p>
70
+ </footer>
71
+ </div>
72
+ </body>
73
+
74
+ </html>
style.css CHANGED
@@ -1,28 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #2D3748;
3
+ --secondary-color: #4A5568;
4
+ --accent-color: #4299E1;
5
+ --background-color: #F7FAFC;
6
+ --card-background: #FFFFFF;
7
+ --text-color: #1A202C;
8
+ --border-radius: 8px;
9
+ --spacing-unit: 1rem;
10
+ }
11
+
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
  body {
19
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
20
+ line-height: 1.6;
21
+ color: var(--text-color);
22
+ background-color: var(--background-color);
23
+ }
24
+
25
+ .container {
26
+ max-width: 1200px;
27
+ margin: 0 auto;
28
+ padding: 2rem var(--spacing-unit);
29
+ }
30
+
31
+ header {
32
+ text-align: center;
33
+ margin-bottom: 3rem;
34
+ padding: 2rem 0;
35
  }
36
 
37
  h1 {
38
+ font-size: 2.5rem;
39
+ color: var(--primary-color);
40
+ margin-bottom: 0.5rem;
41
  }
42
 
43
+ .subtitle {
44
+ font-size: 1.25rem;
45
+ color: var(--secondary-color);
 
 
46
  }
47
 
48
+ section {
49
+ background: var(--card-background);
50
+ border-radius: var(--border-radius);
51
+ padding: 2rem;
52
+ margin-bottom: 2rem;
53
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
54
+ }
55
+
56
+ h2 {
57
+ color: var(--primary-color);
58
+ margin-bottom: 1.5rem;
59
+ font-size: 1.75rem;
60
+ }
61
+
62
+ h3 {
63
+ color: var(--secondary-color);
64
+ margin: 1.5rem 0 1rem;
65
+ font-size: 1.25rem;
66
+ }
67
+
68
+ .video-container {
69
+ width: 100%;
70
+ aspect-ratio: 16/9;
71
+ background: #EDF2F7;
72
+ border-radius: var(--border-radius);
73
+ overflow: hidden;
74
+ margin-bottom: 1rem;
75
+ }
76
+
77
+ .video-placeholder {
78
+ width: 100%;
79
+ height: 100%;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ color: var(--secondary-color);
84
+ font-size: 1.1rem;
85
+ }
86
+
87
+ .instructions {
88
+ background: #F8FAFC;
89
+ border-radius: var(--border-radius);
90
+ padding: 1.5rem;
91
+ }
92
+
93
+ pre {
94
+ background: #2D3748;
95
+ color: #E2E8F0;
96
+ padding: 1rem;
97
+ border-radius: var(--border-radius);
98
+ overflow-x: auto;
99
+ margin: 1rem 0;
100
  }
101
 
102
+ code {
103
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
104
+ font-size: 0.9rem;
105
  }
106
+
107
+ ul {
108
+ list-style-position: inside;
109
+ margin-left: 1rem;
110
+ }
111
+
112
+ li {
113
+ margin-bottom: 0.5rem;
114
+ }
115
+
116
+ footer {
117
+ text-align: center;
118
+ padding: 2rem 0;
119
+ color: var(--secondary-color);
120
+ }
121
+
122
+ a {
123
+ color: var(--accent-color);
124
+ text-decoration: none;
125
+ transition: color 0.2s ease;
126
+ }
127
+
128
+ a:hover {
129
+ color: #2B6CB0;
130
+ }
131
+
132
+ @media (max-width: 768px) {
133
+ .container {
134
+ padding: 1rem;
135
+ }
136
+
137
+ h1 {
138
+ font-size: 2rem;
139
+ }
140
+
141
+ section {
142
+ padding: 1.5rem;
143
+ }
144
+
145
+ pre {
146
+ padding: 0.75rem;
147
+ }
148
+ }