Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / smolagents /pr_2060 /ko /examples /web_browser.html

rtrm

about 2 months ago

download

raw

29.6 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"에이전트를 활용한 웹 브라우저 자동화 🤖🌐","local":"web-browser-automation-with-agents-🤖🌐","sections":[],"depth":1}">
	<link href="/docs/smolagents/pr_2060/ko/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/entry/start.f21eb17e.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/scheduler.00b97157.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/singletons.956410eb.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/index.78ea7f15.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/paths.0924b2d9.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/entry/app.43bd0d34.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/preload-helper.a0a022f1.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/index.a7c1a7a1.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/nodes/0.ab3c5f86.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/nodes/9.3b19dff4.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.8d2aa6d9.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/CodeBlock.74fa11a7.js">
	<link rel="modulepreload" href="/docs/smolagents/pr_2060/ko/_app/immutable/chunks/DocNotebookDropdown.be7b60e3.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"에이전트를 활용한 웹 브라우저 자동화 🤖🌐","local":"web-browser-automation-with-agents-🤖🌐","sections":[],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <div class="flex space-x-1 " style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"> <div class="relative colab-dropdown "> <button class=" " type="button"> <img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"> </button> </div> <div class="relative colab-dropdown "> <button class=" " type="button"> <img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"> </button> </div></div> <h1 class="relative group"><a id="web-browser-automation-with-agents-🤖🌐" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#web-browser-automation-with-agents-🤖🌐"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>에이전트를 활용한 웹 브라우저 자동화 🤖🌐</span></h1> <p data-svelte-h="svelte-1ucalxs">이 노트북에서는 <strong>에이전트 기반 웹 브라우저 자동화 시스템</strong>을 구축해보겠습니다! 이 시스템은 웹사이트 탐색, 요소 상호작용, 정보 자동 추출이 가능합니다.</p> <p data-svelte-h="svelte-1q2p0ju">에이전트는 다음과 같은 기능을 수행할 수 있습니다.</p> <ul class="contains-task-list" data-svelte-h="svelte-1mpppjw"><li class="task-list-item"><input type="checkbox" checked disabled> 웹 페이지 탐색</li> <li class="task-list-item"><input type="checkbox" checked disabled> 요소 클릭</li> <li class="task-list-item"><input type="checkbox" checked disabled> 페이지 내 검색</li> <li class="task-list-item"><input type="checkbox" checked disabled> 팝업 및 모달 처리</li> <li class="task-list-item"><input type="checkbox" checked disabled> 정보 추출</li></ul> <p data-svelte-h="svelte-dwlwhv">단계별로 이 시스템을 구축해보겠습니다!</p> <p data-svelte-h="svelte-1163xb6">먼저 필요한 의존성을 설치하기 위해 다음을 실행하세요.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->pip install smolagents selenium helium pillow -q<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1ehyo4z">필요한 라이브러리를 가져오고 환경 변수를 설정해보겠습니다.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">from</span> io <span class="hljs-keyword">import</span> BytesIO
	<span class="hljs-keyword">from</span> time <span class="hljs-keyword">import</span> sleep

	<span class="hljs-keyword">import</span> helium
	<span class="hljs-keyword">from</span> dotenv <span class="hljs-keyword">import</span> load_dotenv
	<span class="hljs-keyword">from</span> PIL <span class="hljs-keyword">import</span> Image
	<span class="hljs-keyword">from</span> selenium <span class="hljs-keyword">import</span> webdriver
	<span class="hljs-keyword">from</span> selenium.webdriver.common.by <span class="hljs-keyword">import</span> By
	<span class="hljs-keyword">from</span> selenium.webdriver.common.keys <span class="hljs-keyword">import</span> Keys

	<span class="hljs-keyword">from</span> smolagents <span class="hljs-keyword">import</span> CodeAgent, tool
	<span class="hljs-keyword">from</span> smolagents.agents <span class="hljs-keyword">import</span> ActionStep

	<span class="hljs-comment"># 환경 변수를 불러옵니다.</span>
	load_dotenv()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1bzcqe3">이제 에이전트가 웹 페이지를 탐색하고 상호작용할 수 있도록 하는 핵심 브라우저 상호작용 도구들을 만들어보겠습니다.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-meta">@tool</span>
	<span class="hljs-keyword">def</span> <span class="hljs-title function_">search_item_ctrl_f</span>(<span class="hljs-params">text: <span class="hljs-built_in">str</span>, nth_result: <span class="hljs-built_in">int</span> = <span class="hljs-number">1</span></span>) -> <span class="hljs-built_in">str</span>:
	<span class="hljs-string">"""
	현재 페이지에서 Ctrl + F를 사용해 지정된 텍스트를 검색하고, n번째로 등장하는 위치로 이동합니다.
	인자:
	text: 검색할 텍스트
	nth_result: 이동할 n번째 검색 결과 (기본값: 1)
	"""</span>
	elements = driver.find_elements(By.XPATH, <span class="hljs-string">f"//*[contains(text(), '<span class="hljs-subst">{text}</span>')]"</span>)
	<span class="hljs-keyword">if</span> nth_result > <span class="hljs-built_in">len</span>(elements):
	<span class="hljs-keyword">raise</span> Exception(<span class="hljs-string">f"Match n°<span class="hljs-subst">{nth_result}</span> not found (only <span class="hljs-subst">{<span class="hljs-built_in">len</span>(elements)}</span> matches found)"</span>)
	result = <span class="hljs-string">f"Found <span class="hljs-subst">{<span class="hljs-built_in">len</span>(elements)}</span> matches for '<span class="hljs-subst">{text}</span>'."</span>
	elem = elements[nth_result - <span class="hljs-number">1</span>]
	driver.execute_script(<span class="hljs-string">"arguments[0].scrollIntoView(true);"</span>, elem)
	result += <span class="hljs-string">f"Focused on element <span class="hljs-subst">{nth_result}</span> of <span class="hljs-subst">{<span class="hljs-built_in">len</span>(elements)}</span>"</span>
	<span class="hljs-keyword">return</span> result

	<span class="hljs-meta">@tool</span>
	<span class="hljs-keyword">def</span> <span class="hljs-title function_">go_back</span>() -> <span class="hljs-literal">None</span>:
	<span class="hljs-string">"""이전 페이지로 돌아갑니다."""</span>
	driver.back()

	<span class="hljs-meta">@tool</span>
	<span class="hljs-keyword">def</span> <span class="hljs-title function_">close_popups</span>() -> <span class="hljs-built_in">str</span>:
	<span class="hljs-string">"""
	Closes any visible modal or pop-up on the page. Use this to dismiss pop-up windows!
	This does not work on cookie consent banners.
	"""</span>
	webdriver.ActionChains(driver).send_keys(Keys.ESCAPE).perform()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-tofv">Chrome으로 브라우저를 설정하고 스크린샷 기능을 구성해보겠습니다.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-comment"># Configure Chrome options</span>
	chrome_options = webdriver.ChromeOptions()
	chrome_options.add_argument(<span class="hljs-string">"--force-device-scale-factor=1"</span>)
	chrome_options.add_argument(<span class="hljs-string">"--window-size=1000,1350"</span>)
	chrome_options.add_argument(<span class="hljs-string">"--disable-pdf-viewer"</span>)
	chrome_options.add_argument(<span class="hljs-string">"--window-position=0,0"</span>)

	<span class="hljs-comment"># Initialize the browser</span>
	driver = helium.start_chrome(headless=<span class="hljs-literal">False</span>, options=chrome_options)

	<span class="hljs-comment"># Set up screenshot callback</span>
	<span class="hljs-keyword">def</span> <span class="hljs-title function_">save_screenshot</span>(<span class="hljs-params">memory_step: ActionStep, agent: CodeAgent</span>) -> <span class="hljs-literal">None</span>:
	sleep(<span class="hljs-number">1.0</span>) <span class="hljs-comment"># Let JavaScript animations happen before taking the screenshot</span>
	driver = helium.get_driver()
	current_step = memory_step.step_number
	<span class="hljs-keyword">if</span> driver <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-literal">None</span>:
	<span class="hljs-keyword">for</span> previous_memory_step <span class="hljs-keyword">in</span> agent.memory.steps: <span class="hljs-comment"># Remove previous screenshots for lean processing</span>
	<span class="hljs-keyword">if</span> <span class="hljs-built_in">isinstance</span>(previous_memory_step, ActionStep) <span class="hljs-keyword">and</span> previous_memory_step.step_number <= current_step - <span class="hljs-number">2</span>:
	previous_memory_step.observations_images = <span class="hljs-literal">None</span>
	png_bytes = driver.get_screenshot_as_png()
	image = Image.<span class="hljs-built_in">open</span>(BytesIO(png_bytes))
	<span class="hljs-built_in">print</span>(<span class="hljs-string">f"Captured a browser screenshot: <span class="hljs-subst">{image.size}</span> pixels"</span>)
	memory_step.observations_images = [image.copy()] <span class="hljs-comment"># Create a copy to ensure it persists</span>

	<span class="hljs-comment"># Update observations with current URL</span>
	url_info = <span class="hljs-string">f"Current url: <span class="hljs-subst">{driver.current_url}</span>"</span>
	memory_step.observations = (
	url_info <span class="hljs-keyword">if</span> memory_step.observations <span class="hljs-keyword">is</span> <span class="hljs-literal">None</span> <span class="hljs-keyword">else</span> memory_step.observations + <span class="hljs-string">"\n"</span> + url_info
	)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-14mo0j">이제 웹 자동화 에이전트를 만들어보겠습니다.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">from</span> smolagents <span class="hljs-keyword">import</span> InferenceClientModel

	<span class="hljs-comment"># Initialize the model</span>
	model_id = <span class="hljs-string">"Qwen/Qwen2-VL-72B-Instruct"</span> <span class="hljs-comment"># You can change this to your preferred VLM model</span>
	model = InferenceClientModel(model_id=model_id)

	<span class="hljs-comment"># Create the agent</span>
	agent = CodeAgent(
	tools=[go_back, close_popups, search_item_ctrl_f],
	model=model,
	additional_authorized_imports=[<span class="hljs-string">"helium"</span>],
	step_callbacks=[save_screenshot],
	max_steps=<span class="hljs-number">20</span>,
	verbosity_level=<span class="hljs-number">2</span>,
	)

	<span class="hljs-comment"># Import helium for the agent</span>
	agent.python_executor(<span class="hljs-string">"from helium import *"</span>, agent.state)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1m7jvms">에이전트가 웹 자동화를 위해 Helium을 사용하려면 지침이 필요합니다. 다음은 제공할 지침입니다.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->helium_instructions = <span class="hljs-string">"""
	You can use helium to access websites. Don't bother about the helium driver, it's already managed.
	We've already ran "from helium import *"
	Then you can go to pages!
	Code:
	```py
	go_to('github.com/trending')
	```<end_code>

	You can directly click clickable elements by inputting the text that appears on them.
	Code:
	```py
	click("Top products")
	```<end_code>

	If it's a link:
	Code:
	```py
	click(Link("Top products"))
	```<end_code>

	If you try to interact with an element and it's not found, you'll get a LookupError.
	In general stop your action after each button click to see what happens on your screenshot.
	Never try to login in a page.

	To scroll up or down, use scroll_down or scroll_up with as an argument the number of pixels to scroll from.
	Code:
	```py
	scroll_down(num_pixels=1200) # This will scroll one viewport down
	```<end_code>

	When you have pop-ups with a cross icon to close, don't try to click the close icon by finding its element or targeting an 'X' element (this most often fails).
	Just use your built-in tool `close_popups` to close them:
	Code:
	```py
	close_popups()
	```<end_code>

	You can use .exists() to check for the existence of an element. For example:
	Code:
	```py
	if Text('Accept cookies?').exists():
	click('I accept')
	```<end_code>
	"""</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-mpjmif">이제 작업과 함께 에이전트를 실행할 수 있습니다! Wikipedia에서 정보를 찾는 것을 시도해보겠습니다.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->search_request = <span class="hljs-string">"""
	Please navigate to https://en.wikipedia.org/wiki/Chicago and give me a sentence containing the word "1992" that mentions a construction accident.
	"""</span>

	agent_output = agent.run(search_request + helium_instructions)
	<span class="hljs-built_in">print</span>(<span class="hljs-string">"Final output:"</span>)
	<span class="hljs-built_in">print</span>(agent_output)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-xc0qy1">요청을 수정하여 다른 작업을 실행할 수 있습니다. 예를 들어, 제가 얼마나 열심히 일해야 하는지 알아보는 작업입니다.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->github_request = <span class="hljs-string">"""
	I'm trying to find how hard I have to work to get a repo in github.com/trending.
	Can you navigate to the profile for the top author of the top trending repo, and give me their total number of commits over the last year?
	"""</span>

	agent_output = agent.run(github_request + helium_instructions)
	<span class="hljs-built_in">print</span>(<span class="hljs-string">"Final output:"</span>)
	<span class="hljs-built_in">print</span>(agent_output)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-12o3fac">이 시스템은 특히 다음과 같은 작업에 효과적입니다.</p> <ul data-svelte-h="svelte-1myvd86"><li>웹사이트에서 데이터 추출</li> <li>웹 리서치 자동화</li> <li>UI 테스트 및 검증</li> <li>콘텐츠 모니터링</li></ul> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/smolagents/blob/main/docs/source/ko/examples/web_browser.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_9tuyt9 = {
	assets: "/docs/smolagents/pr_2060/ko",
	base: "/docs/smolagents/pr_2060/ko",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/smolagents/pr_2060/ko/_app/immutable/entry/start.f21eb17e.js"),
	import("/docs/smolagents/pr_2060/ko/_app/immutable/entry/app.43bd0d34.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 9],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 29.6 kB
Xet hash:: 70f76708885877b8b862a77b971d2ac699695625fdb43c0429f66e1ad73c52e9

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.