inital deployment1

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm install
+
+COPY . ./
+
+RUN npm run build
+
+CMD ["npx", "serve", "-s", "build", "-l", "7860"]
+

WebcamImageSaver.js

@@ -0,0 +1,59 @@
+import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Download } from "lucide-react";
+
+export default function WebcamImageSaver() {
+  const videoRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [imageUrl, setImageUrl] = useState("");
+
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+      }
+    } catch (error) {
+      console.error("Error accessing webcam:", error);
+    }
+  };
+
+  const captureImage = () => {
+    if (!videoRef.current || !canvasRef.current) return;
+    const context = canvasRef.current.getContext("2d");
+    context.drawImage(videoRef.current, 0, 0, 640, 480);
+    const imageDataUrl = canvasRef.current.toDataURL("image/png");
+    setImageUrl(imageDataUrl);
+  };
+
+  const saveImage = () => {
+    if (!imageUrl) return;
+    const link = document.createElement("a");
+    link.href = imageUrl;
+    link.download = "webcam_image.png";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-4">
+      <Button onClick={startCamera}>Start Camera</Button>
+      <video ref={videoRef} autoPlay className="rounded-lg shadow-md" width={640} height={480} />
+      <canvas ref={canvasRef} width={640} height={480} className="hidden" />
+      <Button onClick={captureImage}>Capture Image</Button>
+      {imageUrl && (
+        <Card className="p-4">
+          <CardContent>
+            <img src={imageUrl} alt="Captured" className="rounded-lg shadow-md" />
+            <Button onClick={saveImage} className="mt-4 flex items-center">
+              <Download className="mr-2" /> Save Image
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "huggingface-webcam",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "lucide-react": "^0.24.0",
+    "tailwindcss": "^3.0.0",
+    "serve": "^14.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  }
+}

requirements.txt

@@ -0,0 +1,11 @@
+gradio
+opencv-python
+torch
+torchvision
+numpy
+diffusers
+transformers
+Pillow
+accelerate
+fastapi
+uvicorn