linting

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,129 +536,152 @@ 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
-      className={`${data.uiType === BlockUIType.NOTE ? "w-[300px]" : "w-[500px]"} ${blockClasses} ${errorClass} ${statusClass} ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : "bg-white"}`}
-      onMouseEnter={handleHovered}
-      onMouseLeave={handleMouseLeave}
-      data-id={`custom-node-${id}`}
-    >
+    return (
       <div
-        className={`mb-2 p-3 ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : getPrimaryCategoryColor(data.categories)} rounded-t-xl`}
+        className={`${data.uiType === BlockUIType.NOTE ? "w-[300px]" : "w-[500px]"} ${blockClasses} ${errorClass} ${statusClass} ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : "bg-white"}`}
+        onMouseEnter={handleHovered}
+        onMouseLeave={handleMouseLeave}
+        data-id={`custom-node-${id}`}
       >
-        <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
+          className={`mb-2 p-3 ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : 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 className="flex gap-[5px]">
+            {isHovered && (
+              <>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={copyNode}
+                  title="Copy node"
+                >
+                  <Copy size={18} />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={deleteNode}
+                  title="Delete node"
+                >
+                  <Trash2 size={18} />
+                </Button>
+              </>
             )}
           </div>
-          <SchemaTooltip description={data.description} />
         </div>
-        <div className="flex gap-[5px]">
-          {isHovered && (
-            <>
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={copyNode}
-                title="Copy node"
-              >
-                <Copy size={18} />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={deleteNode}
-                title="Delete node"
-              >
-                <Trash2 size={18} />
-              </Button>
-            </>
-          )}
-        </div>
-      </div>
-      {blockCost && (
-        <div className="p-3 font-semibold">
-          <span className="ml-auto flex items-center">
-            <IconCoin /> {blockCost.cost_amount} per {blockCost.cost_type}
-          </span>
-        </div>
-      )}
-      {data.uiType !== BlockUIType.NOTE ? (
-        <div className="flex items-start justify-between p-3">
+        {blockCost && (
+          <div className="p-3 font-semibold">
+            <span className="ml-auto flex items-center">
+              <IconCoin /> {blockCost.cost_amount} per {blockCost.cost_type}
+            </span>
+          </div>
+        )}
+        {data.uiType !== BlockUIType.NOTE ? (
+          <div className="flex items-start justify-between p-3">
+            <div>
+              {data.inputSchema &&
+                generateInputHandles(data.inputSchema, data.uiType)}
+            </div>
+            <div className="flex-none">
+              {data.outputSchema &&
+                generateOutputHandles(data.outputSchema, data.uiType)}
+            </div>
+          </div>
+        ) : (
           <div>
             {data.inputSchema &&
               generateInputHandles(data.inputSchema, data.uiType)}
           </div>
-          <div className="flex-none">
-            {data.outputSchema &&
-              generateOutputHandles(data.outputSchema, data.uiType)}
+        )}
+        {isOutputOpen && data.uiType !== BlockUIType.NOTE && (
+          <div
+            data-id="latest-output"
+            className="nodrag m-3 break-words rounded-md border-[1.5px] p-2"
+          >
+            {(data.executionResults?.length ?? 0) > 0 ? (
+              <>
+                <DataTable
+                  title="Latest Output"
+                  truncateLongData
+                  data={data.executionResults!.at(-1)?.data || {}}
+                />
+                <div className="flex justify-end">
+                  <Button variant="ghost" onClick={handleOutputClick}>
+                    View More
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <span>No outputs yet</span>
+            )}
           </div>
-        </div>
-      ) : (
-        <div>
-          {data.inputSchema &&
-            generateInputHandles(data.inputSchema, data.uiType)}
-        </div>
-      )}
-      {isOutputOpen && data.uiType !== BlockUIType.NOTE && (
-        <div
-          data-id="latest-output"
-          className="nodrag m-3 break-words rounded-md border-[1.5px] p-2"
-        >
-          {(data.executionResults?.length ?? 0) > 0 ? (
-            <>
-              <DataTable
-                title="Latest Output"
-                truncateLongData
-                data={data.executionResults!.at(-1)?.data || {}}
-              />
-              <div className="flex justify-end">
-                <Button variant="ghost" onClick={handleOutputClick}>
-                  View More
-                </Button>
-              </div>
-            </>
-          ) : (
-            <span>No outputs yet</span>
-          )}
-        </div>
-      )}
-      {data.uiType !== BlockUIType.NOTE && (
-        <div className="mt-2.5 flex items-center pb-4 pl-4">
-          <Switch checked={isOutputOpen} onCheckedChange={toggleOutput} />
-          <span className="m-1 mr-4">Output</span>
-          {hasAdvancedFields && (
-            <>
-              <Switch onCheckedChange={toggleAdvancedSettings} />
-              <span className="m-1">Advanced</span>
-            </>
-          )}
-          {data.status && (
-            <Badge
-              variant="outline"
-              data-id={`badge-${id}-${data.status}`}
-              className={cn(data.status.toLowerCase(), "ml-auto mr-5")}
-            >
-              {data.status}
-            </Badge>
-          )}
-        </div>
-      )}
-      <InputModalComponent
-        title={activeKey ? `Enter ${beautifyString(activeKey)}` : undefined}
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        onSave={handleModalSave}
-        defaultValue={inputModalValue}
-        key={activeKey}
-      />
-      <OutputModalComponent
-        isOpen={isOutputModalOpen}
-        onClose={() => setIsOutputModalOpen(false)}
-        executionResults={data.executionResults?.toReversed() || []}
-      />
-    </div>
-  );
+        )}
+        {data.uiType !== BlockUIType.NOTE && (
+          <div className="mt-2.5 flex items-center pb-4 pl-4">
+            <Switch checked={isOutputOpen} onCheckedChange={toggleOutput} />
+            <span className="m-1 mr-4">Output</span>
+            {hasAdvancedFields && (
+              <>
+                <Switch onCheckedChange={toggleAdvancedSettings} />
+                <span className="m-1">Advanced</span>
+              </>
+            )}
+            {data.status && (
+              <Badge
+                variant="outline"
+                data-id={`badge-${id}-${data.status}`}
+                className={cn(data.status.toLowerCase(), "ml-auto mr-5")}
+              >
+                {data.status}
+              </Badge>
+            )}
+          </div>
+        )}
+        <InputModalComponent
+          title={activeKey ? `Enter ${beautifyString(activeKey)}` : undefined}
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSave={handleModalSave}
+          defaultValue={inputModalValue}
+          key={activeKey}
+        />
+        <OutputModalComponent
+          isOpen={isOutputModalOpen}
+          onClose={() => setIsOutputModalOpen(false)}
+          executionResults={data.executionResults?.toReversed() || []}
+        />
+      </div>
+    );
+  }
 }

autogpt_platform/frontend/src/components/PhotoNodeComponent.tsx

@@ -0,0 +1,111 @@
+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 [isCameraActive, setIsCameraActive] = useState(false);
+  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 = null;
+    }
+    if (videoRef.current) {
+      videoRef.current.srcObject = null;
+    }
+    setIsCameraActive(false);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      stopCamera();
+    };
+  }, [stopCamera]);
+
+  const startCamera = async () => {
+    setErrorMessage("");
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      streamRef.current = stream;
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        videoRef.current.onloadedmetadata = () => {
+          videoRef.current.play();
+          setIsCameraActive(true);
+        };
+      } else {
+        throw new Error("Video element is not available");
+      }
+    } catch (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",
+      );
+      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]);
+    stopCamera();
+  };
+
+  return (
+    <div className="p-3">
+      {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)}
+        placeholder="Enter Image Data"
+        className="mb-2 w-full rounded border p-2"
+      />
+      <div style={{ display: isCameraActive ? "block" : "none" }}>
+        <video
+          ref={videoRef}
+          style={{ width: "100%", maxHeight: "200px", objectFit: "cover" }}
+          playsInline
+        />
+      </div>
+      <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="mr-2 flex-1">
+            <Camera className="mr-2 h-4 w-4" /> Capture
+          </Button>
+          <Button
+            onClick={stopCamera}
+            variant="outline"
+            className="ml-2 flex-1"
+          >
+            <X className="mr-2 h-4 w-4" /> Close Camera
+          </Button>
+        </div>
+      )}
+      {generateOutputHandles(data.outputSchema, data.uiType)}
+    </div>
+  );
+};
+
+export default PhotoNodeComponent;