mirror of
https://github.com/langchain-ai/langgraph.git
synced 2026-08-30 11:49:38 +02:00
docs: Tutorials up to date (#1734)
* edits * add js code to web voyager
This commit is contained in:
Isaac Francisco
@@ -83,8 +83,8 @@
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"# %pip install --upgrade --quiet playwright > /dev/null\n",
|
||||
"# !playwright install"
|
||||
"%pip install --upgrade --quiet playwright > /dev/null\n",
|
||||
"!playwright install"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -100,6 +100,192 @@
|
||||
"nest_asyncio.apply()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "9ac0be81",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## Helper File\n",
|
||||
"\n",
|
||||
"We will use some JS code for this tutorial, which you should place in a file called `mark_page.js` in the same directory as the notebook you are running this tutorial from.\n",
|
||||
"\n",
|
||||
"<div>\n",
|
||||
" <button type=\"button\" style=\"border: 1px solid black; border-radius: 5px; padding: 5px; background-color: lightgrey;\" onclick=\"toggleVisibility('helper-functions')\">Show/Hide JS Code</button>\n",
|
||||
" <div id=\"helper-functions\" style=\"display:none;\">\n",
|
||||
" <!-- Helper functions -->\n",
|
||||
" <pre>\n",
|
||||
"\n",
|
||||
" const customCSS = `\n",
|
||||
" ::-webkit-scrollbar {\n",
|
||||
" width: 10px;\n",
|
||||
" }\n",
|
||||
" ::-webkit-scrollbar-track {\n",
|
||||
" background: #27272a;\n",
|
||||
" }\n",
|
||||
" ::-webkit-scrollbar-thumb {\n",
|
||||
" background: #888;\n",
|
||||
" border-radius: 0.375rem;\n",
|
||||
" }\n",
|
||||
" ::-webkit-scrollbar-thumb:hover {\n",
|
||||
" background: #555;\n",
|
||||
" }\n",
|
||||
" `;\n",
|
||||
"\n",
|
||||
" const styleTag = document.createElement(\"style\");\n",
|
||||
" styleTag.textContent = customCSS;\n",
|
||||
" document.head.append(styleTag);\n",
|
||||
"\n",
|
||||
" let labels = [];\n",
|
||||
"\n",
|
||||
" function unmarkPage() {\n",
|
||||
" // Unmark page logic\n",
|
||||
" for (const label of labels) {\n",
|
||||
" document.body.removeChild(label);\n",
|
||||
" }\n",
|
||||
" labels = [];\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" function markPage() {\n",
|
||||
" unmarkPage();\n",
|
||||
"\n",
|
||||
" var bodyRect = document.body.getBoundingClientRect();\n",
|
||||
"\n",
|
||||
" var items = Array.prototype.slice\n",
|
||||
" .call(document.querySelectorAll(\"*\"))\n",
|
||||
" .map(function (element) {\n",
|
||||
" var vw = Math.max(\n",
|
||||
" document.documentElement.clientWidth || 0,\n",
|
||||
" window.innerWidth || 0\n",
|
||||
" );\n",
|
||||
" var vh = Math.max(\n",
|
||||
" document.documentElement.clientHeight || 0,\n",
|
||||
" window.innerHeight || 0\n",
|
||||
" );\n",
|
||||
" var textualContent = element.textContent.trim().replace(/\\s{2,}/g, \" \");\n",
|
||||
" var elementType = element.tagName.toLowerCase();\n",
|
||||
" var ariaLabel = element.getAttribute(\"aria-label\") || \"\";\n",
|
||||
"\n",
|
||||
" var rects = [...element.getClientRects()]\n",
|
||||
" .filter((bb) => {\n",
|
||||
" var center_x = bb.left + bb.width / 2;\n",
|
||||
" var center_y = bb.top + bb.height / 2;\n",
|
||||
" var elAtCenter = document.elementFromPoint(center_x, center_y);\n",
|
||||
"\n",
|
||||
" return elAtCenter === element || element.contains(elAtCenter);\n",
|
||||
" })\n",
|
||||
" .map((bb) => {\n",
|
||||
" const rect = {\n",
|
||||
" left: Math.max(0, bb.left),\n",
|
||||
" top: Math.max(0, bb.top),\n",
|
||||
" right: Math.min(vw, bb.right),\n",
|
||||
" bottom: Math.min(vh, bb.bottom),\n",
|
||||
" };\n",
|
||||
" return {\n",
|
||||
" ...rect,\n",
|
||||
" width: rect.right - rect.left,\n",
|
||||
" height: rect.bottom - rect.top,\n",
|
||||
" };\n",
|
||||
" });\n",
|
||||
"\n",
|
||||
" var area = rects.reduce((acc, rect) => acc + rect.width * rect.height, 0);\n",
|
||||
"\n",
|
||||
" return {\n",
|
||||
" element: element,\n",
|
||||
" include:\n",
|
||||
" element.tagName === \"INPUT\" ||\n",
|
||||
" element.tagName === \"TEXTAREA\" ||\n",
|
||||
" element.tagName === \"SELECT\" ||\n",
|
||||
" element.tagName === \"BUTTON\" ||\n",
|
||||
" element.tagName === \"A\" ||\n",
|
||||
" element.onclick != null ||\n",
|
||||
" window.getComputedStyle(element).cursor == \"pointer\" ||\n",
|
||||
" element.tagName === \"IFRAME\" ||\n",
|
||||
" element.tagName === \"VIDEO\",\n",
|
||||
" area,\n",
|
||||
" rects,\n",
|
||||
" text: textualContent,\n",
|
||||
" type: elementType,\n",
|
||||
" ariaLabel: ariaLabel,\n",
|
||||
" };\n",
|
||||
" })\n",
|
||||
" .filter((item) => item.include && item.area >= 20);\n",
|
||||
"\n",
|
||||
" // Only keep inner clickable items\n",
|
||||
" items = items.filter(\n",
|
||||
" (x) => !items.some((y) => x.element.contains(y.element) && !(x == y))\n",
|
||||
" );\n",
|
||||
"\n",
|
||||
" // Function to generate random colors\n",
|
||||
" function getRandomColor() {\n",
|
||||
" var letters = \"0123456789ABCDEF\";\n",
|
||||
" var color = \"#\";\n",
|
||||
" for (var i = 0; i < 6; i++) {\n",
|
||||
" color += letters[Math.floor(Math.random() * 16)];\n",
|
||||
" }\n",
|
||||
" return color;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" // Lets create a floating border on top of these elements that will always be visible\n",
|
||||
" items.forEach(function (item, index) {\n",
|
||||
" item.rects.forEach((bbox) => {\n",
|
||||
" newElement = document.createElement(\"div\");\n",
|
||||
" var borderColor = getRandomColor();\n",
|
||||
" newElement.style.outline = `2px dashed ${borderColor}`;\n",
|
||||
" newElement.style.position = \"fixed\";\n",
|
||||
" newElement.style.left = bbox.left + \"px\";\n",
|
||||
" newElement.style.top = bbox.top + \"px\";\n",
|
||||
" newElement.style.width = bbox.width + \"px\";\n",
|
||||
" newElement.style.height = bbox.height + \"px\";\n",
|
||||
" newElement.style.pointerEvents = \"none\";\n",
|
||||
" newElement.style.boxSizing = \"border-box\";\n",
|
||||
" newElement.style.zIndex = 2147483647;\n",
|
||||
" // newElement.style.background = `${borderColor}80`;\n",
|
||||
"\n",
|
||||
" // Add floating label at the corner\n",
|
||||
" var label = document.createElement(\"span\");\n",
|
||||
" label.textContent = index;\n",
|
||||
" label.style.position = \"absolute\";\n",
|
||||
" // These we can tweak if we want\n",
|
||||
" label.style.top = \"-19px\";\n",
|
||||
" label.style.left = \"0px\";\n",
|
||||
" label.style.background = borderColor;\n",
|
||||
" // label.style.background = \"black\";\n",
|
||||
" label.style.color = \"white\";\n",
|
||||
" label.style.padding = \"2px 4px\";\n",
|
||||
" label.style.fontSize = \"12px\";\n",
|
||||
" label.style.borderRadius = \"2px\";\n",
|
||||
" newElement.appendChild(label);\n",
|
||||
"\n",
|
||||
" document.body.appendChild(newElement);\n",
|
||||
" labels.push(newElement);\n",
|
||||
" // item.element.setAttribute(\"-ai-label\", label.textContent);\n",
|
||||
" });\n",
|
||||
" });\n",
|
||||
" const coordinates = items.flatMap((item) =>\n",
|
||||
" item.rects.map(({ left, top, width, height }) => ({\n",
|
||||
" x: (left + left + width) / 2,\n",
|
||||
" y: (top + top + height) / 2,\n",
|
||||
" type: item.type,\n",
|
||||
" text: item.text,\n",
|
||||
" ariaLabel: item.ariaLabel,\n",
|
||||
" }))\n",
|
||||
" );\n",
|
||||
" return coordinates;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
"\n",
|
||||
"</pre>\n",
|
||||
" </div>\n",
|
||||
"</div>\n",
|
||||
"\n",
|
||||
"<script>\n",
|
||||
" function toggleVisibility(id) {\n",
|
||||
" var element = document.getElementById(id);\n",
|
||||
" element.style.display = (element.style.display === \"none\") ? \"block\" : \"none\";\n",
|
||||
" }\n",
|
||||
"</script>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "a0ee0f97-eb4e-4a13-b4f4-fc6439eec6a6",
|
||||
|
||||
Reference in New Issue
Block a user