Hugging Face's logo

Spaces:
Quazim0t0
/
FastVLMBoxes
Running

App Files Community
Quazim0t0 commited on
Commit
bf84bd5
·
verified ·
1 Parent(s): 1a9c884

Upload 36 files

Browse files
Files changed (1) hide show
  1. src/components/MultiSourceCaptioningView.tsx +8 -17
src/components/MultiSourceCaptioningView.tsx CHANGED
@@ -1,5 +1,4 @@
1
  import React, { useState, useRef, useEffect } from "react";
2
- import { FASTVLM_BOXING_PROMPT } from "../constants";
3
  import { useVLMContext } from "../context/useVLMContext";
4
  import { extractJsonFromMarkdown, drawBoundingBoxesOnCanvas } from "./BoxAnnotator";
5
 
@@ -28,13 +27,12 @@ export default function MultiSourceCaptioningView() {
28
  useEffect(() => {
29
  if (mode !== "Webcam") {
30
  if (webcamStreamRef.current) {
31
- webcamStreamRef.current.getTracks().forEach((track) => track.stop());
32
  webcamStreamRef.current = null;
33
  }
34
  setWebcamActive(false);
35
  return;
36
  }
37
- let stopped = false;
38
  const setupWebcam = async () => {
39
  try {
40
  setError(null);
@@ -51,9 +49,8 @@ export default function MultiSourceCaptioningView() {
51
  };
52
  setupWebcam();
53
  return () => {
54
- stopped = true;
55
  if (webcamStreamRef.current) {
56
- webcamStreamRef.current.getTracks().forEach((track) => track.stop());
57
  webcamStreamRef.current = null;
58
  }
59
  setWebcamActive(false);
@@ -63,8 +60,7 @@ export default function MultiSourceCaptioningView() {
63
  // Process webcam frames
64
  useEffect(() => {
65
  if (mode !== "Webcam" || !isLoaded || !webcamActive) return;
66
- let interval: NodeJS.Timeout | null = null;
67
- let stopped = false;
68
  const processFrame = async () => {
69
  if (!videoRef.current || !canvasRef.current) return;
70
  const video = videoRef.current;
@@ -82,9 +78,8 @@ export default function MultiSourceCaptioningView() {
82
  const fakeVideo = {
83
  videoWidth: canvas.width,
84
  videoHeight: canvas.height,
85
- // @ts-ignore
86
  getContext: () => ctx,
87
- } as HTMLVideoElement;
88
  const result = await runInference(fakeVideo, prompt);
89
  // Clear canvas and redraw frame
90
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
@@ -98,10 +93,9 @@ export default function MultiSourceCaptioningView() {
98
  }
99
  };
100
  interval = setInterval(() => {
101
- if (!stopped) processFrame();
102
  }, 1000);
103
  return () => {
104
- stopped = true;
105
  if (interval) clearInterval(interval);
106
  };
107
  }, [mode, isLoaded, prompt, runInference, webcamActive]);
@@ -109,8 +103,7 @@ export default function MultiSourceCaptioningView() {
109
  // Process video frames for URL mode
110
  useEffect(() => {
111
  if (mode !== "URL" || !isLoaded) return;
112
- let interval: NodeJS.Timeout | null = null;
113
- let stopped = false;
114
  const processFrame = async () => {
115
  if (!videoRef.current || !canvasRef.current) return;
116
  const video = videoRef.current;
@@ -128,9 +121,8 @@ export default function MultiSourceCaptioningView() {
128
  const fakeVideo = {
129
  videoWidth: canvas.width,
130
  videoHeight: canvas.height,
131
- // @ts-ignore
132
  getContext: () => ctx,
133
- } as HTMLVideoElement;
134
  const result = await runInference(fakeVideo, prompt);
135
  // Clear canvas and redraw frame
136
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
@@ -144,10 +136,9 @@ export default function MultiSourceCaptioningView() {
144
  }
145
  };
146
  interval = setInterval(() => {
147
- if (!stopped) processFrame();
148
  }, 1000);
149
  return () => {
150
- stopped = true;
151
  if (interval) clearInterval(interval);
152
  };
153
  }, [mode, isLoaded, prompt, runInference]);
 
1
  import React, { useState, useRef, useEffect } from "react";
 
2
  import { useVLMContext } from "../context/useVLMContext";
3
  import { extractJsonFromMarkdown, drawBoundingBoxesOnCanvas } from "./BoxAnnotator";
4
 
 
27
  useEffect(() => {
28
  if (mode !== "Webcam") {
29
  if (webcamStreamRef.current) {
30
+ webcamStreamRef.current.getTracks().forEach((track: MediaStreamTrack) => track.stop());
31
  webcamStreamRef.current = null;
32
  }
33
  setWebcamActive(false);
34
  return;
35
  }
 
36
  const setupWebcam = async () => {
37
  try {
38
  setError(null);
 
49
  };
50
  setupWebcam();
51
  return () => {
 
52
  if (webcamStreamRef.current) {
53
+ webcamStreamRef.current.getTracks().forEach((track: MediaStreamTrack) => track.stop());
54
  webcamStreamRef.current = null;
55
  }
56
  setWebcamActive(false);
 
60
  // Process webcam frames
61
  useEffect(() => {
62
  if (mode !== "Webcam" || !isLoaded || !webcamActive) return;
63
+ let interval: ReturnType<typeof setInterval> | null = null;
 
64
  const processFrame = async () => {
65
  if (!videoRef.current || !canvasRef.current) return;
66
  const video = videoRef.current;
 
78
  const fakeVideo = {
79
  videoWidth: canvas.width,
80
  videoHeight: canvas.height,
 
81
  getContext: () => ctx,
82
+ } as unknown as HTMLVideoElement;
83
  const result = await runInference(fakeVideo, prompt);
84
  // Clear canvas and redraw frame
85
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
93
  }
94
  };
95
  interval = setInterval(() => {
96
+ processFrame();
97
  }, 1000);
98
  return () => {
 
99
  if (interval) clearInterval(interval);
100
  };
101
  }, [mode, isLoaded, prompt, runInference, webcamActive]);
 
103
  // Process video frames for URL mode
104
  useEffect(() => {
105
  if (mode !== "URL" || !isLoaded) return;
106
+ let interval: ReturnType<typeof setInterval> | null = null;
 
107
  const processFrame = async () => {
108
  if (!videoRef.current || !canvasRef.current) return;
109
  const video = videoRef.current;
 
121
  const fakeVideo = {
122
  videoWidth: canvas.width,
123
  videoHeight: canvas.height,
 
124
  getContext: () => ctx,
125
+ } as unknown as HTMLVideoElement;
126
  const result = await runInference(fakeVideo, prompt);
127
  // Clear canvas and redraw frame
128
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
136
  }
137
  };
138
  interval = setInterval(() => {
139
+ processFrame();
140
  }, 1000);
141
  return () => {
 
142
  if (interval) clearInterval(interval);
143
  };
144
  }, [mode, isLoaded, prompt, runInference]);