From cee8c5de8611d4a35cb5423a6303ceddc6827bb6 Mon Sep 17 00:00:00 2001
From: Nate Brake <33383515+njbrake@users.noreply.github.com>
Date: Tue, 12 Nov 2024 08:44:40 -0500
Subject: [PATCH 1/3] Sagemaker doesn't yet support tools

https://github.com/ucbepic/docetl/issues/160
---
 docetl/operations/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docetl/operations/utils.py b/docetl/operations/utils.py
index 5dd60237..7d6331e1 100644
--- a/docetl/operations/utils.py
+++ b/docetl/operations/utils.py
@@ -765,7 +765,7 @@ def _call_llm_with_cache(
             len(props) == 1
             and list(props.values())[0].get("type") == "string"
             and scratchpad is None
-            and ("ollama" in model or "azure/gpt-4o-mini" in model)
+            and ("ollama" in model or "azure/gpt-4o-mini" in model or "sagemaker" in model)
         ):
             use_tools = False
 

From 92fd4f73b809667104ba6b6027895e4ed8d053ee Mon Sep 17 00:00:00 2001
From: Shreya Shankar <ss.shankar505@gmail.com>
Date: Tue, 12 Nov 2024 23:31:43 +0000
Subject: [PATCH 2/3] fix: save validation and gleaning

---
 website/src/components/OperationCard.tsx   |  31 +-
 website/src/components/operations/args.tsx | 418 +++++++++++----------
 2 files changed, 241 insertions(+), 208 deletions(-)

diff --git a/website/src/components/OperationCard.tsx b/website/src/components/OperationCard.tsx
index d4095d74..e069f19d 100644
--- a/website/src/components/OperationCard.tsx
+++ b/website/src/components/OperationCard.tsx
@@ -401,6 +401,7 @@ function operationReducer(state: State, action: Action): State {
         : state;
 
     case "UPDATE_GUARDRAILS":
+      console.log("UPDATE_GUARDRAILS", state, action.payload);
       return state.operation
         ? {
             ...state,
@@ -757,6 +758,22 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
     [operation, handleOperationUpdate, toast]
   );
 
+  const handleGuardrailsUpdate = useCallback(
+    (newGuardrails: string[]) => {
+      dispatch({ type: "UPDATE_GUARDRAILS", payload: newGuardrails });
+      debouncedUpdate();
+    },
+    [debouncedUpdate]
+  );
+
+  const handleGleaningsUpdate = useCallback(
+    (newGleanings: { num_rounds: number; validation_prompt: string }) => {
+      dispatch({ type: "UPDATE_GLEANINGS", payload: newGleanings });
+      debouncedUpdate();
+    },
+    [debouncedUpdate]
+  );
+
   if (!operation) {
     return <SkeletonCard />;
   }
@@ -830,12 +847,7 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
                     <>
                       <Guardrails
                         guardrails={operation.validate || []}
-                        onUpdate={(newGuardrails) =>
-                          dispatch({
-                            type: "UPDATE_GUARDRAILS",
-                            payload: newGuardrails,
-                          })
-                        }
+                        onUpdate={handleGuardrailsUpdate}
                         isExpanded={isGuardrailsExpanded}
                         onToggle={() => dispatch({ type: "TOGGLE_GUARDRAILS" })}
                       />
@@ -846,12 +858,7 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
                     operation.type === "filter") && (
                     <GleaningConfig
                       gleaning={operation.gleaning || null}
-                      onUpdate={(newGleanings) =>
-                        dispatch({
-                          type: "UPDATE_GLEANINGS",
-                          payload: newGleanings,
-                        })
-                      }
+                      onUpdate={handleGleaningsUpdate}
                       isExpanded={isGleaningsExpanded}
                       onToggle={() => dispatch({ type: "TOGGLE_GLEANINGS" })}
                     />
diff --git a/website/src/components/operations/args.tsx b/website/src/components/operations/args.tsx
index abb8d9dc..659e8196 100644
--- a/website/src/components/operations/args.tsx
+++ b/website/src/components/operations/args.tsx
@@ -58,138 +58,158 @@ export const PromptInput: React.FC<PromptInputProps> = React.memo(
 
 PromptInput.displayName = "PromptInput";
 
-export const SchemaForm: React.FC<{
+interface SchemaFormProps {
   schema: SchemaItem[];
   onUpdate: (newSchema: SchemaItem[]) => void;
   level?: number;
   isList?: boolean;
-}> = React.memo(({ schema, onUpdate, level = 0, isList = false }) => {
-  const addItem = () => {
-    if (isList) return;
-    onUpdate([...schema, { key: "", type: "string" }]);
-  };
+}
+
+export const SchemaForm: React.FC<SchemaFormProps> = React.memo(
+  ({ schema, onUpdate, level = 0, isList = false }) => {
+    const addItem = () => {
+      if (isList) return;
+      onUpdate([...schema, { key: "", type: "string" }]);
+    };
 
-  const updateItem = (index: number, item: SchemaItem) => {
-    const newSchema = [...schema];
-    newSchema[index] = item;
-    onUpdate(newSchema);
-  };
+    const updateItem = (index: number, item: SchemaItem) => {
+      const newSchema = [...schema];
+      newSchema[index] = item;
+      onUpdate(newSchema);
+    };
 
-  const removeItem = (index: number) => {
-    if (isList) return;
-    const newSchema = schema.filter((_, i) => i !== index);
-    onUpdate(newSchema);
-  };
+    const removeItem = (index: number) => {
+      if (isList) return;
+      const newSchema = schema.filter((_, i) => i !== index);
+      onUpdate(newSchema);
+    };
 
-  return (
-    <div style={{ marginLeft: `${level * 20}px` }}>
-      {schema.map((item, index) => (
-        <div key={index} className="flex flex-wrap items-center space-x-2 mb-1">
-          {!isList && (
-            <Input
-              value={item.key}
-              onChange={(e) =>
-                updateItem(index, { ...item, key: e.target.value })
-              }
-              placeholder="Key"
-              className="w-1/3 min-w-[150px]"
-            />
-          )}
-          <Select
-            value={item.type}
-            onValueChange={(value: SchemaType) => {
-              updateItem(index, {
-                ...item,
-                type: value,
-                subType:
-                  value === "list"
-                    ? { key: "0", type: "string" }
-                    : value === "dict"
-                    ? [{ key: "", type: "string" }]
-                    : undefined,
-              });
-            }}
+    return (
+      <div style={{ marginLeft: `${level * 20}px` }}>
+        {schema.map((item, index) => (
+          <div
+            key={index}
+            className="flex flex-wrap items-center space-x-2 mb-1"
           >
-            <SelectTrigger
-              className={`w-1/3 min-w-[150px] ${isList ? "flex-grow" : ""}`}
-            >
-              <SelectValue placeholder="Type" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="string">string</SelectItem>
-              <SelectItem value="float">float</SelectItem>
-              <SelectItem value="int">int</SelectItem>
-              <SelectItem value="boolean">boolean</SelectItem>
-              <SelectItem value="list">list</SelectItem>
-              <SelectItem value="dict">dict</SelectItem>
-            </SelectContent>
-          </Select>
-          {!isList && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => removeItem(index)}
-              className="p-1"
-            >
-              <Trash2 size={16} />
-            </Button>
-          )}
-          {item.type === "list" && item.subType && (
-            <div className="w-full mt-1 ml-4 flex items-center">
-              <span className="mr-2 text-sm text-gray-500">List type:</span>
-              <SchemaForm
-                schema={[item.subType as SchemaItem]}
-                onUpdate={(newSubSchema) =>
-                  updateItem(index, { ...item, subType: newSubSchema[0] })
-                }
-                level={0}
-                isList={true}
-              />
-            </div>
-          )}
-          {item.type === "dict" && item.subType && (
-            <div className="w-full mt-1 ml-4">
-              <SchemaForm
-                schema={item.subType as SchemaItem[]}
-                onUpdate={(newSubSchema) =>
-                  updateItem(index, { ...item, subType: newSubSchema })
+            {!isList && (
+              <Input
+                value={item.key}
+                onChange={(e) =>
+                  updateItem(index, { ...item, key: e.target.value })
                 }
-                level={level + 1}
+                placeholder="Key"
+                className="w-1/3 min-w-[150px]"
               />
-            </div>
-          )}
-        </div>
-      ))}
-      {!isList && (
-        <Button variant="outline" size="sm" onClick={addItem} className="mt-1">
-          <Plus size={16} className="mr-2" /> Add Field
-        </Button>
-      )}
-    </div>
-  );
-});
+            )}
+            <Select
+              value={item.type}
+              onValueChange={(value: SchemaType) => {
+                updateItem(index, {
+                  ...item,
+                  type: value,
+                  subType:
+                    value === "list"
+                      ? { key: "0", type: "string" }
+                      : value === "dict"
+                      ? [{ key: "", type: "string" }]
+                      : undefined,
+                });
+              }}
+            >
+              <SelectTrigger
+                className={`w-1/3 min-w-[150px] ${isList ? "flex-grow" : ""}`}
+              >
+                <SelectValue placeholder="Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="string">string</SelectItem>
+                <SelectItem value="float">float</SelectItem>
+                <SelectItem value="int">int</SelectItem>
+                <SelectItem value="boolean">boolean</SelectItem>
+                <SelectItem value="list">list</SelectItem>
+                <SelectItem value="dict">dict</SelectItem>
+              </SelectContent>
+            </Select>
+            {!isList && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => removeItem(index)}
+                className="p-1"
+              >
+                <Trash2 size={16} />
+              </Button>
+            )}
+            {item.type === "list" && item.subType && (
+              <div className="w-full mt-1 ml-4 flex items-center">
+                <span className="mr-2 text-sm text-gray-500">List type:</span>
+                <SchemaForm
+                  schema={[item.subType as SchemaItem]}
+                  onUpdate={(newSubSchema) =>
+                    updateItem(index, { ...item, subType: newSubSchema[0] })
+                  }
+                  level={0}
+                  isList={true}
+                />
+              </div>
+            )}
+            {item.type === "dict" && item.subType && (
+              <div className="w-full mt-1 ml-4">
+                <SchemaForm
+                  schema={item.subType as SchemaItem[]}
+                  onUpdate={(newSubSchema) =>
+                    updateItem(index, { ...item, subType: newSubSchema })
+                  }
+                  level={level + 1}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+        {!isList && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={addItem}
+            className="mt-1"
+          >
+            <Plus size={16} className="mr-2" /> Add Field
+          </Button>
+        )}
+      </div>
+    );
+  }
+);
+
+SchemaForm.displayName = "SchemaForm";
 
-export const OutputSchema: React.FC<{
+interface OutputSchemaProps {
   schema: SchemaItem[];
   onUpdate: (newSchema: SchemaItem[]) => void;
   isExpanded: boolean;
   onToggle: () => void;
-}> = React.memo(({ schema, onUpdate, isExpanded, onToggle }) => {
-  return (
-    <div>
-      <Button variant="ghost" size="sm" onClick={onToggle} className="p-0">
-        <ChevronDown
-          size={16}
-          className={`mr-1 transition-transform duration-200 ${
-            isExpanded ? "transform rotate-180" : ""
-          }`}
-        />
-        <h4 className="text-xs font-semibold">Output Schema</h4>
-      </Button>
-      {isExpanded && <SchemaForm schema={schema} onUpdate={onUpdate} />}
-    </div>
-  );
-});
+}
+
+export const OutputSchema: React.FC<OutputSchemaProps> = React.memo(
+  ({ schema, onUpdate, isExpanded, onToggle }) => {
+    return (
+      <div>
+        <Button variant="ghost" size="sm" onClick={onToggle} className="p-0">
+          <ChevronDown
+            size={16}
+            className={`mr-1 transition-transform duration-200 ${
+              isExpanded ? "transform rotate-180" : ""
+            }`}
+          />
+          <h4 className="text-xs font-semibold">Output Schema</h4>
+        </Button>
+        {isExpanded && <SchemaForm schema={schema} onUpdate={onUpdate} />}
+      </div>
+    );
+  }
+);
+
+OutputSchema.displayName = "OutputSchema";
 
 export interface GleaningConfigProps {
   gleaning: { num_rounds: number; validation_prompt: string } | null;
@@ -286,89 +306,95 @@ export const GleaningConfig: React.FC<GleaningConfigProps> = React.memo(
 
 GleaningConfig.displayName = "GleaningConfig";
 
-export const Guardrails: React.FC<{
+interface GuardrailsProps {
   guardrails: string[];
   onUpdate: (newGuardrails: string[]) => void;
   isExpanded: boolean;
   onToggle: () => void;
-}> = React.memo(({ guardrails, onUpdate, isExpanded, onToggle }) => {
-  const handleGuardrailChange = (index: number, value: string) => {
-    const newGuardrails = [...guardrails];
-    newGuardrails[index] = value;
-    onUpdate(newGuardrails);
-  };
+}
 
-  const addGuardrail = () => {
-    onUpdate([...guardrails, ""]);
-  };
+export const Guardrails: React.FC<GuardrailsProps> = React.memo(
+  ({ guardrails, onUpdate, isExpanded, onToggle }) => {
+    const handleGuardrailChange = (index: number, value: string) => {
+      const newGuardrails = [...guardrails];
+      newGuardrails[index] = value;
+      onUpdate(newGuardrails);
+    };
 
-  const removeGuardrail = (index: number) => {
-    const newGuardrails = guardrails.filter((_, i) => i !== index);
-    onUpdate(newGuardrails);
-  };
+    const addGuardrail = () => {
+      onUpdate([...guardrails, ""]);
+    };
 
-  return (
-    <div className="border-t border-orange-500">
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onToggle}
-        className="w-full text-orange-500 hover:bg-orange-50 flex justify-between items-center"
-      >
-        <div className="flex items-center">
-          <span>Code-Based Guardrails ({guardrails.length})</span>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger>
-                <Info size={16} className="ml-2 text-orange-500" />
-              </TooltipTrigger>
-              <TooltipContent className="max-w-md whitespace-normal break-words text-left">
-                <p>
-                  Guardrails are Python statements to validate output. Example:
-                  "len(output["summary"]) {">"} 100" ensures a summary is at
-                  least 100 characters long.
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-        <ChevronDown
-          size={16}
-          className={`transition-transform duration-200 ${
-            isExpanded ? "transform rotate-180" : ""
-          }`}
-        />
-      </Button>
-      {isExpanded && (
-        <div className="bg-orange-50">
-          {guardrails.map((guardrail, index) => (
-            <div key={index} className="flex items-center mb-2">
-              <Input
-                value={guardrail}
-                onChange={(e) => handleGuardrailChange(index, e.target.value)}
-                placeholder="Enter guardrail"
-                className="flex-grow text-sm text-orange-700 font-mono"
-              />
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => removeGuardrail(index)}
-                className="ml-2 p-1 h-7 w-7 hover:bg-orange-100"
-              >
-                <Trash2 size={15} className="text-orange-500" />
-              </Button>
-            </div>
-          ))}
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={addGuardrail}
-            className="mb-1 text-orange-500 border-orange-500 hover:bg-orange-100"
-          >
-            <Plus size={16} className="mr-2" /> Add Guardrail
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-});
+    const removeGuardrail = (index: number) => {
+      const newGuardrails = guardrails.filter((_, i) => i !== index);
+      onUpdate(newGuardrails);
+    };
+
+    return (
+      <div className="border-t border-orange-500">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onToggle}
+          className="w-full text-orange-500 hover:bg-orange-50 flex justify-between items-center"
+        >
+          <div className="flex items-center">
+            <span>Code-Based Guardrails ({guardrails.length})</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Info size={16} className="ml-2 text-orange-500" />
+                </TooltipTrigger>
+                <TooltipContent className="max-w-md whitespace-normal break-words text-left">
+                  <p>
+                    Guardrails are Python statements to validate output.
+                    Example: "len(output["summary"]) {">"} 100" ensures a
+                    summary is at least 100 characters long.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          <ChevronDown
+            size={16}
+            className={`transition-transform duration-200 ${
+              isExpanded ? "transform rotate-180" : ""
+            }`}
+          />
+        </Button>
+        {isExpanded && (
+          <div className="bg-orange-50">
+            {guardrails.map((guardrail, index) => (
+              <div key={index} className="flex items-center mb-2">
+                <Input
+                  value={guardrail}
+                  onChange={(e) => handleGuardrailChange(index, e.target.value)}
+                  placeholder="Enter guardrail"
+                  className="flex-grow text-sm text-orange-700 font-mono"
+                />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => removeGuardrail(index)}
+                  className="ml-2 p-1 h-7 w-7 hover:bg-orange-100"
+                >
+                  <Trash2 size={15} className="text-orange-500" />
+                </Button>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={addGuardrail}
+              className="mb-1 text-orange-500 border-orange-500 hover:bg-orange-100"
+            >
+              <Plus size={16} className="mr-2" /> Add Guardrail
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Guardrails.displayName = "Guardrails";

From dcf87233cfb6aa027ddefc924dfc2f27520dc6a7 Mon Sep 17 00:00:00 2001
From: Shreya Shankar <ss.shankar505@gmail.com>
Date: Wed, 13 Nov 2024 01:08:26 +0000
Subject: [PATCH 3/3] Remove unnecessary console log statements

---
 website/src/components/OperationCard.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/website/src/components/OperationCard.tsx b/website/src/components/OperationCard.tsx
index e069f19d..1d48383c 100644
--- a/website/src/components/OperationCard.tsx
+++ b/website/src/components/OperationCard.tsx
@@ -401,7 +401,6 @@ function operationReducer(state: State, action: Action): State {
         : state;
 
     case "UPDATE_GUARDRAILS":
-      console.log("UPDATE_GUARDRAILS", state, action.payload);
       return state.operation
         ? {
             ...state,
@@ -619,7 +618,6 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
 
   const onOptimize = useCallback(async () => {
     if (!operation) return;
-    console.log("Optimizing operation", operation.id);
 
     try {
       // Clear the output