From df4c8096dc52bc00bbb2ec8407d2dd99380a74e3 Mon Sep 17 00:00:00 2001 From: Shreya Shankar Date: Wed, 1 Jan 2025 18:49:31 -0800 Subject: [PATCH] refactor: updating UI text to docwrangler (#257) * rebrand to docwrangler * refactor: rebranding to docwrangler * refactor: rebranding to docwrangler * refactor: edit vercel.json --- server/app/routes/convert.py | 1 + vercel.json | 7 - website/src/app/page.tsx | 16 +- website/src/app/playground/page.tsx | 71 ++++++-- website/src/components/AIChatPanel.tsx | 6 +- website/src/components/OperationCard.tsx | 70 ++++---- .../components/PromptImprovementDialog.tsx | 161 +++++++++++------- website/vercel.json | 7 +- 8 files changed, 211 insertions(+), 128 deletions(-) delete mode 100644 vercel.json diff --git a/server/app/routes/convert.py b/server/app/routes/convert.py index 173a27d5..8472dc29 100644 --- a/server/app/routes/convert.py +++ b/server/app/routes/convert.py @@ -26,6 +26,7 @@ router = APIRouter() MODAL_ENDPOINT = "https://ucbepic--docling-converter-convert-documents.modal.run" +# MODAL_ENDPOINT = "https://ucbepic--docling-converter-convert-documents-dev.modal.run" def process_document_with_azure(file_path: str, endpoint: str, key: str) -> str: """Process a single document with Azure Document Intelligence""" diff --git a/vercel.json b/vercel.json deleted file mode 100644 index 53eda188..00000000 --- a/vercel.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "git": { - "deploymentEnabled": { - "main": false - } - } -} \ No newline at end of file diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx index 3d9c0f65..81cc5398 100644 --- a/website/src/app/page.tsx +++ b/website/src/app/page.tsx @@ -60,9 +60,9 @@ export default function Home() { const newsItems = [ { - highlight: "Launched our IDE!", + highlight: "Launched DocWrangler!", content: - "Making prompt engineering easier than ever with our new interactive playground.", + "Making prompt engineering easier than ever with DocWrangler, our new interactive playground.", link: "/playground", linkText: "Try it now", date: "Dec 2024", @@ -101,7 +101,7 @@ export default function Home() { className="w-12 h-12 sm:w-16 sm:h-16 mr-2 text-primary" strokeWidth={1.5} /> - docetl + DocETL

A system for LLM-powered data processing @@ -142,7 +142,7 @@ export default function Home() { ))}

- Launched our IDE! Making prompt engineering + Launched DocWrangler! Making prompt engineering easier than ever with our new interactive playground{" "} Prompts are the primary interface between humans and LLM-powered data systems, but crafting them is more art - than science. Our IDE explores new ways to make prompt - engineering systematic and intuitive, with interactive - tools that help users express their intent clearly and - debug unexpected behaviors.{" "} + than science. DocWrangler, our IDE, explores new ways to + make prompt engineering systematic and intuitive, with + interactive tools that help users express their intent + clearly and debug unexpected behaviors.{" "} ( Desktop Required

- DocETL requires a larger screen for the best experience. Please switch - to a desktop or laptop computer to access all features. + DocWrangler requires a larger screen for the best experience. Please + switch to a desktop or laptop computer to access all features.

Recommended minimum screen width: 768px @@ -221,7 +221,7 @@ const LoadingScreen: React.FC = () => (

- DocETL + DocWrangler

@@ -518,6 +518,16 @@ const CodeEditorPipelineApp: React.FC = () => { > Show Documentation + + window.open( + "https://discord.com/invite/fHp7B2X3xx", + "_blank" + ) + } + > + Ask a Question on Discord + Tutorials @@ -580,38 +590,63 @@ const CodeEditorPipelineApp: React.FC = () => { Info - -

About DocETL

-
-

- DocETL is a research project by the EPIC Data Lab at UC - Berkeley. Learn more at{" "} + +

+ About DocWrangler and DocETL +

+
+

+ DocWrangler and DocETL are research projects from UC + Berkeley's EPIC Data Lab. DocWrangler provides an + interactive playground for building data processing + pipelines, powered by DocETL - our system that combines a + domain-specific language, query optimizer, and execution + engine. Learn more at{" "} docetl.org .

-

- The AI Chat and Improve Prompt features use our system and - log usage data by default. For privacy, you can use your own - OpenAI key: Go to Edit > Edit API keys and enable - "use personal openai key" in these features. +

+ DocWrangler's AI Chat and Improve Prompt features use our + experimental LLM and log usage data. For privacy, you can + use your own API key instead by going to Edit > Edit API + keys and enabling "Use personal API key" in the + features.

-

+

Want to run DocETL or the playground locally? Check out our{" "} self-hosted version + . For DocETL documentation, visit{" "} + + our docs + + . Have questions? Join our{" "} + + Discord community + .

@@ -620,7 +655,7 @@ const CodeEditorPipelineApp: React.FC = () => {
-

DocETL

+

DocWrangler

{isMounted && ( ({namespace}) )} diff --git a/website/src/components/AIChatPanel.tsx b/website/src/components/AIChatPanel.tsx index 92976260..65f1a802 100644 --- a/website/src/components/AIChatPanel.tsx +++ b/website/src/components/AIChatPanel.tsx @@ -184,12 +184,12 @@ const AIChatPanel: React.FC = ({ onClose }) => { { id: String(Date.now()), role: "system", - content: `You are the DocETL assistant, helping users build and refine data analysis pipelines. You are an expert at data analysis. + content: `You are the DocWrangler assistant, helping users build and refine data analysis pipelines. You are an expert at data analysis. Core Capabilities: -- DocETL enables users to create sophisticated data processing workflows with LLM calls, like crowdsourcing pipelines +- DocWrangler is an interface that enables users to create sophisticated data processing workflows with LLM calls, like crowdsourcing pipelines. It uses the DocETL DSL and query engine. - Each pipeline processes documents through a sequence of operations -- Operations can be LLM-based (map, reduce, resolve, filter) or utility-based (unnest, split, gather, sample) or code-based (python for map, reduce, and filter) +- DocETL Operations can be LLM-based (map, reduce, resolve, filter) or utility-based (unnest, split, gather, sample) or code-based (python for map, reduce, and filter) Operation Details: - Every LLM operation has: diff --git a/website/src/components/OperationCard.tsx b/website/src/components/OperationCard.tsx index ddb60ff7..fb4cd7a4 100644 --- a/website/src/components/OperationCard.tsx +++ b/website/src/components/OperationCard.tsx @@ -220,43 +220,45 @@ const OperationHeader: React.FC = React.memo( )}
- {isEditing ? ( - setEditedName(e.target.value)} - onBlur={() => { - setIsEditing(false); - onEdit(editedName); - }} - onKeyPress={(e) => { - if (e.key === "Enter") { +
+ {isEditing ? ( + setEditedName(e.target.value)} + onBlur={() => { setIsEditing(false); onEdit(editedName); - } - }} - className="max-w-[200px] h-6 text-sm font-medium" - autoFocus - /> - ) : ( -
setIsEditing(true)} - > - - {name} - - { + if (e.key === "Enter") { + setIsEditing(false); + onEdit(editedName); + } + }} + className="max-w-[200px] h-6 text-sm font-medium" + autoFocus /> -
- )} + ) : ( +
setIsEditing(true)} + > + + {name} + + +
+ )} +
{/* Action Bar - Keep only the most essential actions */} diff --git a/website/src/components/PromptImprovementDialog.tsx b/website/src/components/PromptImprovementDialog.tsx index b543633a..3cc067e2 100644 --- a/website/src/components/PromptImprovementDialog.tsx +++ b/website/src/components/PromptImprovementDialog.tsx @@ -457,6 +457,7 @@ export function PromptImprovementDialog({ const [showSaveConfirm, setShowSaveConfirm] = useState(false); const [usePersonalOpenAI, setUsePersonalOpenAI] = useState(false); const [ignoreMissingKey, setIgnoreMissingKey] = useState(false); + const [additionalInstructions, setAdditionalInstructions] = useState(""); const selectedOperation = operations.find( (op) => op.id === selectedOperationId @@ -649,6 +650,10 @@ export function PromptImprovementDialog({ .join("\n")}` : "\nNo feedback found for this operation."; + const instructionsSection = additionalInstructions + ? `\nAdditional Instructions:\n${additionalInstructions}` + : ""; + const pipelineState = await serializeState(); const systemContent = getSystemContent(pipelineState, selectedOperation); @@ -666,7 +671,18 @@ export function PromptImprovementDialog({ role: "user", content: `Please analyze and improve my prompt${ selectedOperation.type === "resolve" ? "s" : "" - }:${ + } following these best practices: + +1. Be specific and unambiguous in instructions +2. Break down complex tasks into steps +3. Include examples where helpful +4. Use clear formatting and structure +5. Specify the desired output format +6. Include relevant context and constraints +7. Use consistent terminology +8. Avoid vague or subjective language + +Here is the current prompt to improve:${ selectedOperation.type === "resolve" ? `\nComparison prompt:\n${ selectedOperation.otherKwargs?.comparison_prompt || "" @@ -674,7 +690,7 @@ export function PromptImprovementDialog({ selectedOperation.otherKwargs?.resolution_prompt || "" }` : `\n${selectedOperation.prompt}` - }${bookmarksSection}`, + }${bookmarksSection}${instructionsSection}`, id: "user-1", }); @@ -689,6 +705,7 @@ export function PromptImprovementDialog({ relevantBookmarks, hasOpenAIKey, usePersonalOpenAI, + additionalInstructions, ]); const handleBack = () => { @@ -818,6 +835,7 @@ Remember to ${ onOpenChange(false); setStep("select"); setShowSaveConfirm(false); + setAdditionalInstructions(""); } }; @@ -837,7 +855,7 @@ Remember to ${ )} - Rewrite Prompt + Improve Prompt
{step === "select" - ? "Select an operation to improve its prompt" - : "DocETL is analyzing and suggesting improvements"} + ? "Select the operation you want to improve the prompt for" + : "DocWrangler is analyzing and suggesting improvements"} @@ -918,69 +936,98 @@ Remember to ${ {selectedOperation && ( <> -
-
- Current Prompt - {selectedOperation.type === "resolve" ? "s" : ""}: -
- {selectedOperation.type === "resolve" ? ( -
-
-
- Comparison Prompt: +
+
+
+ Current Prompt + {selectedOperation.type === "resolve" ? "s" : ""}: +
+ {selectedOperation.type === "resolve" ? ( +
+
+
+ Comparison Prompt: +
+ 
+                                {selectedOperation.otherKwargs
+                                  ?.comparison_prompt || ""}
+
- 
-                              {selectedOperation.otherKwargs
-                                ?.comparison_prompt || ""}
-
-
-
-
- Resolution Prompt: +
+
+ Resolution Prompt: +
+ 
+                                {selectedOperation.otherKwargs
+                                  ?.resolution_prompt || ""}
+
- 
-                              {selectedOperation.otherKwargs
-                                ?.resolution_prompt || ""}
-
+ ) : ( + 
+                            {selectedOperation.prompt}
+
+ )} +
+ +
+
+ Your Notes:
- ) : ( - 
-                          {selectedOperation.prompt}
-
- )} -
+
+ {relevantBookmarks.length > 0 ? ( +
    + {relevantBookmarks.map((note, index) => ( +
  • {note.note}
    • + ))} +
+ ) : ( +

+ No feedback or bookmarks found for this operation. +

+ )} +
+
-
-
Feedback:
-
- {relevantBookmarks.length > 0 ? ( -
    - {relevantBookmarks.map((note, index) => ( -
  • {note.note}
    • - ))} -
- ) : ( -

- No feedback or bookmarks found for this operation. +

+
+ Additional Instructions + + (optional) + +
+