render photo node for photo blocks

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -34,6 +34,7 @@ import { FlowContext } from "./Flow";
 import { Badge } from "./ui/badge";
 import DataTable from "./DataTable";
 import { IconCoin } from "./ui/icons";
+import PhotoNodeComponent from "@/components/PhotoNodeComponent";
 
 type ParsedKey = { key: string; index?: number };
 
@@ -535,6 +536,25 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
       ),
     );
   console.debug(`Block cost ${inputValues}|${data.blockCosts}=${blockCost}`);
+  if (data.blockType === "PhotoAnalysisBlock" ) {
+  return (
+    <div className={`${blockClasses} ${errorClass} ${statusClass}`}>
+      <div className={`mb-2 p-3 ${getPrimaryCategoryColor(data.categories)} rounded-t-xl`}>
+        <div className="flex items-center justify-between">
+          <div className="font-roboto p-3 text-lg font-semibold">
+            {beautifyString(data.blockType?.replace(/Block$/, "") || data.title)}
+          </div>
+          <SchemaTooltip description={data.description} />
+        </div>
+      </div>
+      <PhotoNodeComponent
+        data={data}
+        handleInputChange={handleInputChange}
+        generateOutputHandles={generateOutputHandles}
+      />
+    </div>
+
+  );
 
   return (
     <div

autogpt_platform/frontend/src/components/PhotoNodeComponent.tsx

@@ -1,17 +1,21 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import { Camera, X } from 'lucide-react';
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Camera, X } from "lucide-react";
 
-const PhotoNodeComponent = ({ data, handleInputChange, generateOutputHandles }) => {
+const PhotoNodeComponent = ({
+  data,
+  handleInputChange,
+  generateOutputHandles,
+}) => {
   const [isCameraActive, setIsCameraActive] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState("");
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
   const streamRef = useRef(null);
 
   const stopCamera = useCallback(() => {
     if (streamRef.current) {
-      streamRef.current.getTracks().forEach(track => track.stop());
+      streamRef.current.getTracks().forEach((track) => track.stop());
       streamRef.current = null;
     }
     if (videoRef.current) {
@@ -27,7 +31,7 @@ const PhotoNodeComponent = ({ data, handleInputChange, generateOutputHandles })
   }, [stopCamera]);
 
   const startCamera = async () => {
-    setErrorMessage('');
+    setErrorMessage("");
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ video: true });
       streamRef.current = stream;
@@ -41,56 +45,60 @@ const PhotoNodeComponent = ({ data, handleInputChange, generateOutputHandles })
         throw new Error("Video element is not available");
       }
     } catch (error) {
-      console.error('Error accessing camera:', error);
+      console.error("Error accessing camera:", error);
       setErrorMessage(`Failed to start camera: ${error.message}`);
     }
   };
 
   const capturePhoto = () => {
     if (!videoRef.current || !canvasRef.current) {
-      setErrorMessage("Failed to capture photo: Camera not initialized properly");
+      setErrorMessage(
+        "Failed to capture photo: Camera not initialized properly",
+      );
       return;
     }
     const video = videoRef.current;
     const canvas = canvasRef.current;
     canvas.width = video.videoWidth;
     canvas.height = video.videoHeight;
-    canvas.getContext('2d').drawImage(video, 0, 0);
-    const imageDataUrl = canvas.toDataURL('image/jpeg');
-    handleInputChange('image_data', imageDataUrl.split(',')[1]);
+    canvas.getContext("2d").drawImage(video, 0, 0);
+    const imageDataUrl = canvas.toDataURL("image/jpeg");
+    handleInputChange("image_data", imageDataUrl.split(",")[1]);
     stopCamera();
   };
 
   return (
     <div className="p-3">
-      {errorMessage && (
-        <div className="text-red-500 mb-2">{errorMessage}</div>
-      )}
+      {errorMessage && <div className="mb-2 text-red-500">{errorMessage}</div>}
       <input
         type="text"
-        value={data.hardcodedValues?.image_data || ''}
-        onChange={(e) => handleInputChange('image_data', e.target.value)}
+        value={data.hardcodedValues?.image_data || ""}
+        onChange={(e) => handleInputChange("image_data", e.target.value)}
         placeholder="Enter Image Data"
-        className="w-full p-2 border rounded mb-2"
+        className="mb-2 w-full rounded border p-2"
       />
-      <div style={{ display: isCameraActive ? 'block' : 'none' }}>
+      <div style={{ display: isCameraActive ? "block" : "none" }}>
         <video
           ref={videoRef}
-          style={{ width: '100%', maxHeight: '200px', objectFit: 'cover' }}
+          style={{ width: "100%", maxHeight: "200px", objectFit: "cover" }}
           playsInline
         />
       </div>
-      <canvas ref={canvasRef} style={{ display: 'none' }} />
+      <canvas ref={canvasRef} style={{ display: "none" }} />
       {!isCameraActive ? (
         <Button onClick={startCamera} className="w-full">
           <Camera className="mr-2 h-4 w-4" /> Open Camera
         </Button>
       ) : (
         <div className="flex justify-between">
-          <Button onClick={capturePhoto} className="flex-1 mr-2">
+          <Button onClick={capturePhoto} className="mr-2 flex-1">
             <Camera className="mr-2 h-4 w-4" /> Capture
           </Button>
-          <Button onClick={stopCamera} variant="outline" className="flex-1 ml-2">
+          <Button
+            onClick={stopCamera}
+            variant="outline"
+            className="ml-2 flex-1"
+          >
             <X className="mr-2 h-4 w-4" /> Close Camera
           </Button>
         </div>
@@ -100,4 +108,4 @@ const PhotoNodeComponent = ({ data, handleInputChange, generateOutputHandles })
   );
 };
 
-export default PhotoNodeComponent;
+export default PhotoNodeComponent;