Hugging Face's logo

Spaces:
aiqtech
/
FastVLM-YoloV8n-v2
Running

App Files Community
Quazim0t0 commited on
Commit
abf908c
·
verified ·
1 Parent(s): 5da44b8

Update src/components/WelcomeScreen.tsx

Browse files
Files changed (1) hide show
  1. src/components/WelcomeScreen.tsx +122 -122
src/components/WelcomeScreen.tsx CHANGED
@@ -1,122 +1,122 @@
1
- import HfIcon from "./HfIcon";
2
- import GlassContainer from "./GlassContainer";
3
- import GlassButton from "./GlassButton";
4
- import { GLASS_EFFECTS } from "../constants";
5
-
6
- interface WelcomeScreenProps {
7
- onStart: () => void;
8
- }
9
-
10
- export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
11
- return (
12
- <div className="absolute inset-0 text-white flex items-center justify-center p-8">
13
- <div className="max-w-2xl w-full space-y-8">
14
- {/* Main Title Card */}
15
- <GlassContainer
16
- className="rounded-3xl shadow-2xl hover:scale-105 transition-transform duration-200"
17
- role="banner"
18
- >
19
- <div className="p-8 text-center">
20
- <h1 className="text-5xl font-bold text-gray-100 mb-4">FastVLM WebGPU</h1>
21
- <p className="text-xl text-gray-300 leading-relaxed">
22
- Real-time video captioning powered by{" "}
23
- <a
24
- href="https://huggingface.co/onnx-community/FastVLM-0.5B-ONNX"
25
- className="text-blue-400 underline hover:text-blue-300 transition-colors"
26
- target="_blank"
27
- rel="noopener noreferrer"
28
- aria-label="FastVLM-0.5B model on Hugging Face"
29
- >
30
- FastVLM-0.5B
31
- </a>
32
- </p>
33
- </div>
34
- </GlassContainer>
35
-
36
- {/* Webcam Status Card */}
37
- <GlassContainer
38
- bgColor={GLASS_EFFECTS.COLORS.SUCCESS_BG}
39
- className="rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-200"
40
- role="status"
41
- aria-label="Camera status"
42
- >
43
- <div className="p-4">
44
- <div className="flex items-center justify-center space-x-2">
45
- <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
46
- <p className="text-green-400 font-medium">Camera ready</p>
47
- </div>
48
- </div>
49
- </GlassContainer>
50
-
51
- {/* How It Works Card */}
52
- <GlassContainer
53
- className="rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-200"
54
- role="region"
55
- aria-labelledby="how-it-works-title"
56
- >
57
- <div className="p-6">
58
- <h2 id="how-it-works-title" className="text-lg font-semibold text-gray-200 mb-4 text-center">
59
- How it works:
60
- </h2>
61
- <div className="space-y-3">
62
- <div className="flex items-start space-x-3">
63
- <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold mt-0.5 flex-shrink-0">
64
- 1
65
- </div>
66
- <p className="text-gray-300">
67
- You are about to load{" "}
68
- <a
69
- href="https://huggingface.co/onnx-community/FastVLM-0.5B-ONNX"
70
- className="text-blue-400 underline"
71
- target="_blank"
72
- rel="noopener noreferrer"
73
- >
74
- FastVLM-0.5B
75
- </a>
76
- , a powerful multimodal model optimized for in-browser inference.
77
- </p>
78
- </div>
79
- <div className="flex items-start space-x-3">
80
- <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold mt-0.5 flex-shrink-0">
81
- 2
82
- </div>
83
- <p className="text-gray-300">
84
- Everything runs entirely in your browser with{" "}
85
- <a
86
- href="https://github.com/huggingface/transformers.js"
87
- className="text-blue-400 underline"
88
- target="_blank"
89
- rel="noopener noreferrer"
90
- >
91
- <HfIcon className="inline-flex w-7 h-7 pointer-events-none" />
92
- Transformers.js
93
- </a>{" "}
94
- and ONNX Runtime Web, meaning no data is sent to a server. It can even run offline!
95
- </p>
96
- </div>
97
- <div className="flex items-start space-x-3">
98
- <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold mt-0.5 flex-shrink-0">
99
- 3
100
- </div>
101
- <p className="text-gray-300">Get started by clicking the button below.</p>
102
- </div>
103
- </div>
104
- </div>
105
- </GlassContainer>
106
-
107
- {/* Start Button */}
108
- <div className="flex flex-col items-center space-y-4">
109
- <GlassButton
110
- onClick={onStart}
111
- className="px-8 py-4 rounded-2xl"
112
- aria-label="Start live captioning with AI model"
113
- >
114
- <span className="font-semibold text-lg">Start Live Captioning</span>
115
- </GlassButton>
116
-
117
- <p className="text-sm text-gray-400 opacity-80">AI model will load when you click start</p>
118
- </div>
119
- </div>
120
- </div>
121
- );
122
- }
 
1
+ import HfIcon from "./HfIcon";
2
+ import GlassContainer from "./GlassContainer";
3
+ import GlassButton from "./GlassButton";
4
+ import { GLASS_EFFECTS } from "../constants";
5
+
6
+ interface WelcomeScreenProps {
7
+ onStart: () => void;
8
+ }
9
+
10
+ export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
11
+ return (
12
+ <div className="absolute inset-0 text-white flex items-center justify-center p-8">
13
+ <div className="max-w-2xl w-full space-y-8">
14
+ {/* Main Title Card */}
15
+ <GlassContainer
16
+ className="rounded-3xl shadow-2xl hover:scale-105 transition-transform duration-200"
17
+ role="banner"
18
+ >
19
+ <div className="p-8 text-center">
20
+ <h1 className="text-5xl font-bold text-gray-100 mb-4">FastVLM&YoloV8n Onnx WebGPU</h1>
21
+ <p className="text-xl text-gray-300 leading-relaxed">
22
+ Real-time video captioning & Object Detection powered by{" "}
23
+ <a
24
+ href="https://huggingface.co/onnx-community/FastVLM-0.5B-ONNX"
25
+ className="text-blue-400 underline hover:text-blue-300 transition-colors"
26
+ target="_blank"
27
+ rel="noopener noreferrer"
28
+ aria-label="FastVLM-0.5B & YoloV8n model on Hugging Face"
29
+ >
30
+ FastVLM-0.5B
31
+ </a>
32
+ </p>
33
+ </div>
34
+ </GlassContainer>
35
+
36
+ {/* Webcam Status Card */}
37
+ <GlassContainer
38
+ bgColor={GLASS_EFFECTS.COLORS.SUCCESS_BG}
39
+ className="rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-200"
40
+ role="status"
41
+ aria-label="Camera status"
42
+ >
43
+ <div className="p-4">
44
+ <div className="flex items-center justify-center space-x-2">
45
+ <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
46
+ <p className="text-green-400 font-medium">Camera ready</p>
47
+ </div>
48
+ </div>
49
+ </GlassContainer>
50
+
51
+ {/* How It Works Card */}
52
+ <GlassContainer
53
+ className="rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-200"
54
+ role="region"
55
+ aria-labelledby="how-it-works-title"
56
+ >
57
+ <div className="p-6">
58
+ <h2 id="how-it-works-title" className="text-lg font-semibold text-gray-200 mb-4 text-center">
59
+ How it works:
60
+ </h2>
61
+ <div className="space-y-3">
62
+ <div className="flex items-start space-x-3">
63
+ <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold mt-0.5 flex-shrink-0">
64
+ 1
65
+ </div>
66
+ <p className="text-gray-300">
67
+ You are about to load{" "}
68
+ <a
69
+ href="https://huggingface.co/onnx-community/FastVLM-0.5B-ONNX"
70
+ className="text-blue-400 underline"
71
+ target="_blank"
72
+ rel="noopener noreferrer"
73
+ >
74
+ FastVLM-0.5B
75
+ </a>
76
+ , a powerful multimodal model optimized for in-browser inference.
77
+ </p>
78
+ </div>
79
+ <div className="flex items-start space-x-3">
80
+ <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold mt-0.5 flex-shrink-0">
81
+ 2
82
+ </div>
83
+ <p className="text-gray-300">
84
+ Everything runs entirely in your browser with{" "}
85
+ <a
86
+ href="https://github.com/huggingface/transformers.js"
87
+ className="text-blue-400 underline"
88
+ target="_blank"
89
+ rel="noopener noreferrer"
90
+ >
91
+ <HfIcon className="inline-flex w-7 h-7 pointer-events-none" />
92
+ Transformers.js
93
+ </a>{" "}
94
+ and ONNX Runtime Web, meaning no data is sent to a server. It can even run offline!
95
+ </p>
96
+ </div>
97
+ <div className="flex items-start space-x-3">
98
+ <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold mt-0.5 flex-shrink-0">
99
+ 3
100
+ </div>
101
+ <p className="text-gray-300">Get started by clicking the button below.</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </GlassContainer>
106
+
107
+ {/* Start Button */}
108
+ <div className="flex flex-col items-center space-y-4">
109
+ <GlassButton
110
+ onClick={onStart}
111
+ className="px-8 py-4 rounded-2xl"
112
+ aria-label="Start live captioning with AI model"
113
+ >
114
+ <span className="font-semibold text-lg">Start Live Captioning</span>
115
+ </GlassButton>
116
+
117
+ <p className="text-sm text-gray-400 opacity-80">AI model will load when you click start</p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ );
122
+ }