import{s as Xl,n as Sl,o as _l}from"../chunks/scheduler.f9cad8c1.js";import{S as xl,i as Rl,e as M,s as n,c as y,h as Fl,a as o,d as t,b as a,f as El,g as p,j as J,k as dl,l as Al,m as e,n as U,t as i,o as c,p as w}from"../chunks/index.6e06ef99.js";import{C as Yl,H as Hl,E as zl}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.c4302a62.js";import{C as j}from"../chunks/CodeBlock.72594161.js";import{D as $l}from"../chunks/DocNotebookDropdown.77f2c2c1.js";function ql(rl){let m,H,A,z,b,$,u,q,d,D,r,hl="이 노트북에서는 <strong>에이전트 기반 웹 브라우저 자동화 시스템</strong>을 구축해보겠습니다! 이 시스템은 웹사이트 탐색, 요소 상호작용, 정보 자동 추출이 가능합니다.",K,h,Il="에이전트는 다음과 같은 기능을 수행할 수 있습니다.",L,T,Cl='<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>',O,I,Bl="단계별로 이 시스템을 구축해보겠습니다!",P,C,Vl="먼저 필요한 의존성을 설치하기 위해 다음을 실행하세요.",ll,B,sl,V,Zl="필요한 라이브러리를 가져오고 환경 변수를 설정해보겠습니다.",tl,Z,el,W,Wl="이제 에이전트가 웹 페이지를 탐색하고 상호작용할 수 있도록 하는 핵심 브라우저 상호작용 도구들을 만들어보겠습니다.",nl,G,al,v,Gl="Chrome으로 브라우저를 설정하고 스크린샷 기능을 구성해보겠습니다.",Ml,k,ol,f,vl="이제 웹 자동화 에이전트를 만들어보겠습니다.",Jl,g,yl,Q,kl="에이전트가 웹 자동화를 위해 Helium을 사용하려면 지침이 필요합니다. 다음은 제공할 지침입니다.",pl,N,Ul,E,fl="이제 작업과 함께 에이전트를 실행할 수 있습니다! Wikipedia에서 정보를 찾는 것을 시도해보겠습니다.",il,X,cl,S,gl="요청을 수정하여 다른 작업을 실행할 수 있습니다. 예를 들어, 제가 얼마나 열심히 일해야 하는지 알아보는 작업입니다.",wl,_,ml,x,Ql="이 시스템은 특히 다음과 같은 작업에 효과적입니다.",Tl,R,Nl="<li>웹사이트에서 데이터 추출</li> <li>웹 리서치 자동화</li> <li>UI 테스트 및 검증</li> <li>콘텐츠 모니터링</li>",jl,F,bl,Y,ul;return b=new Yl({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),u=new $l({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;",options:[{label:"Mixed",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/main/smolagents_doc/ko/web_browser.ipynb"},{label:"PyTorch",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/main/smolagents_doc/ko/pytorch/web_browser.ipynb"},{label:"TensorFlow",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/main/smolagents_doc/ko/tensorflow/web_browser.ipynb"},{label:"Mixed",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/main/smolagents_doc/ko/web_browser.ipynb"},{label:"PyTorch",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/main/smolagents_doc/ko/pytorch/web_browser.ipynb"},{label:"TensorFlow",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/main/smolagents_doc/ko/tensorflow/web_browser.ipynb"}]}}),d=new Hl({props:{title:"에이전트를 활용한 웹 브라우저 자동화 🤖🌐",local:"web-browser-automation-with-agents-🤖🌐",headingTag:"h1"}}),B=new j({props:{code:"cGlwJTIwaW5zdGFsbCUyMHNtb2xhZ2VudHMlMjBzZWxlbml1bSUyMGhlbGl1bSUyMHBpbGxvdyUyMC1x",highlighted:"pip install smolagents selenium helium pillow -q",wrap:!1}}),Z=new j({props:{code:"ZnJvbSUyMGlvJTIwaW1wb3J0JTIwQnl0ZXNJTyUwQWZyb20lMjB0aW1lJTIwaW1wb3J0JTIwc2xlZXAlMEElMEFpbXBvcnQlMjBoZWxpdW0lMEFmcm9tJTIwZG90ZW52JTIwaW1wb3J0JTIwbG9hZF9kb3RlbnYlMEFmcm9tJTIwUElMJTIwaW1wb3J0JTIwSW1hZ2UlMEFmcm9tJTIwc2VsZW5pdW0lMjBpbXBvcnQlMjB3ZWJkcml2ZXIlMEFmcm9tJTIwc2VsZW5pdW0ud2ViZHJpdmVyLmNvbW1vbi5ieSUyMGltcG9ydCUyMEJ5JTBBZnJvbSUyMHNlbGVuaXVtLndlYmRyaXZlci5jb21tb24ua2V5cyUyMGltcG9ydCUyMEtleXMlMEElMEFmcm9tJTIwc21vbGFnZW50cyUyMGltcG9ydCUyMENvZGVBZ2VudCUyQyUyMHRvb2wlMEFmcm9tJTIwc21vbGFnZW50cy5hZ2VudHMlMjBpbXBvcnQlMjBBY3Rpb25TdGVwJTBBJTBBJTIzJTIwJUVEJTk5JTk4JUVBJUIyJUJEJTIwJUVCJUIzJTgwJUVDJTg4JTk4JUVCJUE1JUJDJTIwJUVCJUI2JTg4JUVCJTlGJUFDJUVDJTk4JUI1JUVCJThCJTg4JUVCJThCJUE0LiUwQWxvYWRfZG90ZW52KCk=",highlighted:`<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()`,wrap:!1}}),G=new j({props:{code:"JTQwdG9vbCUwQWRlZiUyMHNlYXJjaF9pdGVtX2N0cmxfZih0ZXh0JTNBJTIwc3RyJTJDJTIwbnRoX3Jlc3VsdCUzQSUyMGludCUyMCUzRCUyMDEpJTIwLSUzRSUyMHN0ciUzQSUwQSUyMCUyMCUyMCUyMCUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMCVFRCU5OCU4NCVFQyU5RSVBQyUyMCVFRCU4RSU5OCVFQyU5RCVCNCVFQyVBNyU4MCVFQyU5NyU5MCVFQyU4NCU5QyUyMEN0cmwlMjAlMkIlMjBGJUVCJUE1JUJDJTIwJUVDJTgyJUFDJUVDJTlBJUE5JUVEJTk1JUI0JTIwJUVDJUE3JTgwJUVDJUEwJTk1JUVCJTkwJTlDJTIwJUVEJTg1JThEJUVDJThBJUE0JUVEJThBJUI4JUVCJUE1JUJDJTIwJUVBJUIyJTgwJUVDJTgzJTg5JUVEJTk1JTk4JUVBJUIzJUEwJTJDJTIwbiVFQiVCMiU4OCVFQyVBNyVCOCVFQiVBMSU5QyUyMCVFQiU5MyVCMSVFQyU5RSVBNSVFRCU5NSU5OCVFQiU4QSU5NCUyMCVFQyU5QyU4NCVFQyVCOSU5OCVFQiVBMSU5QyUyMCVFQyU5RCVCNCVFQiU4RiU5OSVFRCU5NSVBOSVFQiU4QiU4OCVFQiU4QiVBNC4lMEElMjAlMjAlMjAlMjAlRUMlOUQlQjglRUMlOUUlOTAlM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjB0ZXh0JTNBJTIwJUVBJUIyJTgwJUVDJTgzJTg5JUVEJTk1JUEwJTIwJUVEJTg1JThEJUVDJThBJUE0JUVEJThBJUI4JTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbnRoX3Jlc3VsdCUzQSUyMCVFQyU5RCVCNCVFQiU4RiU5OSVFRCU5NSVBMCUyMG4lRUIlQjIlODglRUMlQTclQjglMjAlRUElQjIlODAlRUMlODMlODklMjAlRUElQjIlQjAlRUElQjMlQkMlMjAoJUVBJUI4JUIwJUVCJUIzJUI4JUVBJUIwJTkyJTNBJTIwMSklMEElMjAlMjAlMjAlMjAlMjIlMjIlMjIlMEElMjAlMjAlMjAlMjBlbGVtZW50cyUyMCUzRCUyMGRyaXZlci5maW5kX2VsZW1lbnRzKEJ5LlhQQVRIJTJDJTIwZiUyMiUyRiUyRiolNUJjb250YWlucyh0ZXh0KCklMkMlMjAnJTdCdGV4dCU3RCcpJTVEJTIyKSUwQSUyMCUyMCUyMCUyMGlmJTIwbnRoX3Jlc3VsdCUyMCUzRSUyMGxlbihlbGVtZW50cyklM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjByYWlzZSUyMEV4Y2VwdGlvbihmJTIyTWF0Y2glMjBuJUMyJUIwJTdCbnRoX3Jlc3VsdCU3RCUyMG5vdCUyMGZvdW5kJTIwKG9ubHklMjAlN0JsZW4oZWxlbWVudHMpJTdEJTIwbWF0Y2hlcyUyMGZvdW5kKSUyMiklMEElMjAlMjAlMjAlMjByZXN1bHQlMjAlM0QlMjBmJTIyRm91bmQlMjAlN0JsZW4oZWxlbWVudHMpJTdEJTIwbWF0Y2hlcyUyMGZvciUyMCclN0J0ZXh0JTdEJy4lMjIlMEElMjAlMjAlMjAlMjBlbGVtJTIwJTNEJTIwZWxlbWVudHMlNUJudGhfcmVzdWx0JTIwLSUyMDElNUQlMEElMjAlMjAlMjAlMjBkcml2ZXIuZXhlY3V0ZV9zY3JpcHQoJTIyYXJndW1lbnRzJTVCMCU1RC5zY3JvbGxJbnRvVmlldyh0cnVlKSUzQiUyMiUyQyUyMGVsZW0pJTBBJTIwJTIwJTIwJTIwcmVzdWx0JTIwJTJCJTNEJTIwZiUyMkZvY3VzZWQlMjBvbiUyMGVsZW1lbnQlMjAlN0JudGhfcmVzdWx0JTdEJTIwb2YlMjAlN0JsZW4oZWxlbWVudHMpJTdEJTIyJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwcmVzdWx0JTBBJTBBJTQwdG9vbCUwQWRlZiUyMGdvX2JhY2soKSUyMC0lM0UlMjBOb25lJTNBJTBBJTIwJTIwJTIwJTIwJTIyJTIyJTIyJUVDJTlEJUI0JUVDJUEwJTg0JTIwJUVEJThFJTk4JUVDJTlEJUI0JUVDJUE3JTgwJUVCJUExJTlDJTIwJUVCJThGJThDJUVDJTk1JTg0JUVBJUIwJTkxJUVCJThCJTg4JUVCJThCJUE0LiUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMGRyaXZlci5iYWNrKCklMEElMEElNDB0b29sJTBBZGVmJTIwY2xvc2VfcG9wdXBzKCklMjAtJTNFJTIwc3RyJTNBJTBBJTIwJTIwJTIwJTIwJTIyJTIyJTIyJTBBJTIwJTIwJTIwJTIwQ2xvc2VzJTIwYW55JTIwdmlzaWJsZSUyMG1vZGFsJTIwb3IlMjBwb3AtdXAlMjBvbiUyMHRoZSUyMHBhZ2UuJTIwVXNlJTIwdGhpcyUyMHRvJTIwZGlzbWlzcyUyMHBvcC11cCUyMHdpbmRvd3MhJTBBJTIwJTIwJTIwJTIwVGhpcyUyMGRvZXMlMjBub3QlMjB3b3JrJTIwb24lMjBjb29raWUlMjBjb25zZW50JTIwYmFubmVycy4lMEElMjAlMjAlMjAlMjAlMjIlMjIlMjIlMEElMjAlMjAlMjAlMjB3ZWJkcml2ZXIuQWN0aW9uQ2hhaW5zKGRyaXZlcikuc2VuZF9rZXlzKEtleXMuRVNDQVBFKS5wZXJmb3JtKCk=",highlighted:`<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>) -&gt; <span class="hljs-built_in">str</span>:
    <span class="hljs-string">&quot;&quot;&quot;
    현재 페이지에서 Ctrl + F를 사용해 지정된 텍스트를 검색하고, n번째로 등장하는 위치로 이동합니다.
    인자:
        text: 검색할 텍스트
        nth_result: 이동할 n번째 검색 결과 (기본값: 1)
    &quot;&quot;&quot;</span>
    elements = driver.find_elements(By.XPATH, <span class="hljs-string">f&quot;//*[contains(text(), &#x27;<span class="hljs-subst">{text}</span>&#x27;)]&quot;</span>)
    <span class="hljs-keyword">if</span> nth_result &gt; <span class="hljs-built_in">len</span>(elements):
        <span class="hljs-keyword">raise</span> Exception(<span class="hljs-string">f&quot;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)&quot;</span>)
    result = <span class="hljs-string">f&quot;Found <span class="hljs-subst">{<span class="hljs-built_in">len</span>(elements)}</span> matches for &#x27;<span class="hljs-subst">{text}</span>&#x27;.&quot;</span>
    elem = elements[nth_result - <span class="hljs-number">1</span>]
    driver.execute_script(<span class="hljs-string">&quot;arguments[0].scrollIntoView(true);&quot;</span>, elem)
    result += <span class="hljs-string">f&quot;Focused on element <span class="hljs-subst">{nth_result}</span> of <span class="hljs-subst">{<span class="hljs-built_in">len</span>(elements)}</span>&quot;</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>() -&gt; <span class="hljs-literal">None</span>:
    <span class="hljs-string">&quot;&quot;&quot;이전 페이지로 돌아갑니다.&quot;&quot;&quot;</span>
    driver.back()

<span class="hljs-meta">@tool</span>
<span class="hljs-keyword">def</span> <span class="hljs-title function_">close_popups</span>() -&gt; <span class="hljs-built_in">str</span>:
    <span class="hljs-string">&quot;&quot;&quot;
    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.
    &quot;&quot;&quot;</span>
    webdriver.ActionChains(driver).send_keys(Keys.ESCAPE).perform()`,wrap:!1}}),k=new j({props:{code:"JTIzJTIwQ29uZmlndXJlJTIwQ2hyb21lJTIwb3B0aW9ucyUwQWNocm9tZV9vcHRpb25zJTIwJTNEJTIwd2ViZHJpdmVyLkNocm9tZU9wdGlvbnMoKSUwQWNocm9tZV9vcHRpb25zLmFkZF9hcmd1bWVudCglMjItLWZvcmNlLWRldmljZS1zY2FsZS1mYWN0b3IlM0QxJTIyKSUwQWNocm9tZV9vcHRpb25zLmFkZF9hcmd1bWVudCglMjItLXdpbmRvdy1zaXplJTNEMTAwMCUyQzEzNTAlMjIpJTBBY2hyb21lX29wdGlvbnMuYWRkX2FyZ3VtZW50KCUyMi0tZGlzYWJsZS1wZGYtdmlld2VyJTIyKSUwQWNocm9tZV9vcHRpb25zLmFkZF9hcmd1bWVudCglMjItLXdpbmRvdy1wb3NpdGlvbiUzRDAlMkMwJTIyKSUwQSUwQSUyMyUyMEluaXRpYWxpemUlMjB0aGUlMjBicm93c2VyJTBBZHJpdmVyJTIwJTNEJTIwaGVsaXVtLnN0YXJ0X2Nocm9tZShoZWFkbGVzcyUzREZhbHNlJTJDJTIwb3B0aW9ucyUzRGNocm9tZV9vcHRpb25zKSUwQSUwQSUyMyUyMFNldCUyMHVwJTIwc2NyZWVuc2hvdCUyMGNhbGxiYWNrJTBBZGVmJTIwc2F2ZV9zY3JlZW5zaG90KG1lbW9yeV9zdGVwJTNBJTIwQWN0aW9uU3RlcCUyQyUyMGFnZW50JTNBJTIwQ29kZUFnZW50KSUyMC0lM0UlMjBOb25lJTNBJTBBJTIwJTIwJTIwJTIwc2xlZXAoMS4wKSUyMCUyMCUyMyUyMExldCUyMEphdmFTY3JpcHQlMjBhbmltYXRpb25zJTIwaGFwcGVuJTIwYmVmb3JlJTIwdGFraW5nJTIwdGhlJTIwc2NyZWVuc2hvdCUwQSUyMCUyMCUyMCUyMGRyaXZlciUyMCUzRCUyMGhlbGl1bS5nZXRfZHJpdmVyKCklMEElMjAlMjAlMjAlMjBjdXJyZW50X3N0ZXAlMjAlM0QlMjBtZW1vcnlfc3RlcC5zdGVwX251bWJlciUwQSUyMCUyMCUyMCUyMGlmJTIwZHJpdmVyJTIwaXMlMjBub3QlMjBOb25lJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZm9yJTIwcHJldmlvdXNfbWVtb3J5X3N0ZXAlMjBpbiUyMGFnZW50Lm1lbW9yeS5zdGVwcyUzQSUyMCUyMCUyMyUyMFJlbW92ZSUyMHByZXZpb3VzJTIwc2NyZWVuc2hvdHMlMjBmb3IlMjBsZWFuJTIwcHJvY2Vzc2luZyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGlmJTIwaXNpbnN0YW5jZShwcmV2aW91c19tZW1vcnlfc3RlcCUyQyUyMEFjdGlvblN0ZXApJTIwYW5kJTIwcHJldmlvdXNfbWVtb3J5X3N0ZXAuc3RlcF9udW1iZXIlMjAlM0MlM0QlMjBjdXJyZW50X3N0ZXAlMjAtJTIwMiUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHByZXZpb3VzX21lbW9yeV9zdGVwLm9ic2VydmF0aW9uc19pbWFnZXMlMjAlM0QlMjBOb25lJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcG5nX2J5dGVzJTIwJTNEJTIwZHJpdmVyLmdldF9zY3JlZW5zaG90X2FzX3BuZygpJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaW1hZ2UlMjAlM0QlMjBJbWFnZS5vcGVuKEJ5dGVzSU8ocG5nX2J5dGVzKSklMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBwcmludChmJTIyQ2FwdHVyZWQlMjBhJTIwYnJvd3NlciUyMHNjcmVlbnNob3QlM0ElMjAlN0JpbWFnZS5zaXplJTdEJTIwcGl4ZWxzJTIyKSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMG1lbW9yeV9zdGVwLm9ic2VydmF0aW9uc19pbWFnZXMlMjAlM0QlMjAlNUJpbWFnZS5jb3B5KCklNUQlMjAlMjAlMjMlMjBDcmVhdGUlMjBhJTIwY29weSUyMHRvJTIwZW5zdXJlJTIwaXQlMjBwZXJzaXN0cyUwQSUwQSUyMCUyMCUyMCUyMCUyMyUyMFVwZGF0ZSUyMG9ic2VydmF0aW9ucyUyMHdpdGglMjBjdXJyZW50JTIwVVJMJTBBJTIwJTIwJTIwJTIwdXJsX2luZm8lMjAlM0QlMjBmJTIyQ3VycmVudCUyMHVybCUzQSUyMCU3QmRyaXZlci5jdXJyZW50X3VybCU3RCUyMiUwQSUyMCUyMCUyMCUyMG1lbW9yeV9zdGVwLm9ic2VydmF0aW9ucyUyMCUzRCUyMCglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjB1cmxfaW5mbyUyMGlmJTIwbWVtb3J5X3N0ZXAub2JzZXJ2YXRpb25zJTIwaXMlMjBOb25lJTIwZWxzZSUyMG1lbW9yeV9zdGVwLm9ic2VydmF0aW9ucyUyMCUyQiUyMCUyMiU1Q24lMjIlMjAlMkIlMjB1cmxfaW5mbyUwQSUyMCUyMCUyMCUyMCk=",highlighted:`<span class="hljs-comment"># Configure Chrome options</span>
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument(<span class="hljs-string">&quot;--force-device-scale-factor=1&quot;</span>)
chrome_options.add_argument(<span class="hljs-string">&quot;--window-size=1000,1350&quot;</span>)
chrome_options.add_argument(<span class="hljs-string">&quot;--disable-pdf-viewer&quot;</span>)
chrome_options.add_argument(<span class="hljs-string">&quot;--window-position=0,0&quot;</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>) -&gt; <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 &lt;= 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&quot;Captured a browser screenshot: <span class="hljs-subst">{image.size}</span> pixels&quot;</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&quot;Current url: <span class="hljs-subst">{driver.current_url}</span>&quot;</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">&quot;\\n&quot;</span> + url_info
    )`,wrap:!1}}),g=new j({props:{code:"ZnJvbSUyMHNtb2xhZ2VudHMlMjBpbXBvcnQlMjBJbmZlcmVuY2VDbGllbnRNb2RlbCUwQSUwQSUyMyUyMEluaXRpYWxpemUlMjB0aGUlMjBtb2RlbCUwQW1vZGVsX2lkJTIwJTNEJTIwJTIyUXdlbiUyRlF3ZW4yLVZMLTcyQi1JbnN0cnVjdCUyMiUyMCUyMCUyMyUyMFlvdSUyMGNhbiUyMGNoYW5nZSUyMHRoaXMlMjB0byUyMHlvdXIlMjBwcmVmZXJyZWQlMjBWTE0lMjBtb2RlbCUwQW1vZGVsJTIwJTNEJTIwSW5mZXJlbmNlQ2xpZW50TW9kZWwobW9kZWxfaWQlM0Rtb2RlbF9pZCklMEElMEElMjMlMjBDcmVhdGUlMjB0aGUlMjBhZ2VudCUwQWFnZW50JTIwJTNEJTIwQ29kZUFnZW50KCUwQSUyMCUyMCUyMCUyMHRvb2xzJTNEJTVCZ29fYmFjayUyQyUyMGNsb3NlX3BvcHVwcyUyQyUyMHNlYXJjaF9pdGVtX2N0cmxfZiU1RCUyQyUwQSUyMCUyMCUyMCUyMG1vZGVsJTNEbW9kZWwlMkMlMEElMjAlMjAlMjAlMjBhZGRpdGlvbmFsX2F1dGhvcml6ZWRfaW1wb3J0cyUzRCU1QiUyMmhlbGl1bSUyMiU1RCUyQyUwQSUyMCUyMCUyMCUyMHN0ZXBfY2FsbGJhY2tzJTNEJTVCc2F2ZV9zY3JlZW5zaG90JTVEJTJDJTBBJTIwJTIwJTIwJTIwbWF4X3N0ZXBzJTNEMjAlMkMlMEElMjAlMjAlMjAlMjB2ZXJib3NpdHlfbGV2ZWwlM0QyJTJDJTBBKSUwQSUwQSUyMyUyMEltcG9ydCUyMGhlbGl1bSUyMGZvciUyMHRoZSUyMGFnZW50JTBBYWdlbnQucHl0aG9uX2V4ZWN1dG9yKCUyMmZyb20lMjBoZWxpdW0lMjBpbXBvcnQlMjAqJTIyJTJDJTIwYWdlbnQuc3RhdGUp",highlighted:`<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">&quot;Qwen/Qwen2-VL-72B-Instruct&quot;</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">&quot;helium&quot;</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">&quot;from helium import *&quot;</span>, agent.state)`,wrap:!1}}),N=new j({props:{code:"aGVsaXVtX2luc3RydWN0aW9ucyUyMCUzRCUyMCUyMiUyMiUyMiUwQVlvdSUyMGNhbiUyMHVzZSUyMGhlbGl1bSUyMHRvJTIwYWNjZXNzJTIwd2Vic2l0ZXMuJTIwRG9uJ3QlMjBib3RoZXIlMjBhYm91dCUyMHRoZSUyMGhlbGl1bSUyMGRyaXZlciUyQyUyMGl0J3MlMjBhbHJlYWR5JTIwbWFuYWdlZC4lMEFXZSd2ZSUyMGFscmVhZHklMjByYW4lMjAlMjJmcm9tJTIwaGVsaXVtJTIwaW1wb3J0JTIwKiUyMiUwQVRoZW4lMjB5b3UlMjBjYW4lMjBnbyUyMHRvJTIwcGFnZXMhJTBBQ29kZSUzQSUwQSU2MCU2MCU2MHB5JTBBZ29fdG8oJ2dpdGh1Yi5jb20lMkZ0cmVuZGluZycpJTBBJTYwJTYwJTYwJTNDZW5kX2NvZGUlM0UlMEElMEFZb3UlMjBjYW4lMjBkaXJlY3RseSUyMGNsaWNrJTIwY2xpY2thYmxlJTIwZWxlbWVudHMlMjBieSUyMGlucHV0dGluZyUyMHRoZSUyMHRleHQlMjB0aGF0JTIwYXBwZWFycyUyMG9uJTIwdGhlbS4lMEFDb2RlJTNBJTBBJTYwJTYwJTYwcHklMEFjbGljayglMjJUb3AlMjBwcm9kdWN0cyUyMiklMEElNjAlNjAlNjAlM0NlbmRfY29kZSUzRSUwQSUwQUlmJTIwaXQncyUyMGElMjBsaW5rJTNBJTBBQ29kZSUzQSUwQSU2MCU2MCU2MHB5JTBBY2xpY2soTGluayglMjJUb3AlMjBwcm9kdWN0cyUyMikpJTBBJTYwJTYwJTYwJTNDZW5kX2NvZGUlM0UlMEElMEFJZiUyMHlvdSUyMHRyeSUyMHRvJTIwaW50ZXJhY3QlMjB3aXRoJTIwYW4lMjBlbGVtZW50JTIwYW5kJTIwaXQncyUyMG5vdCUyMGZvdW5kJTJDJTIweW91J2xsJTIwZ2V0JTIwYSUyMExvb2t1cEVycm9yLiUwQUluJTIwZ2VuZXJhbCUyMHN0b3AlMjB5b3VyJTIwYWN0aW9uJTIwYWZ0ZXIlMjBlYWNoJTIwYnV0dG9uJTIwY2xpY2slMjB0byUyMHNlZSUyMHdoYXQlMjBoYXBwZW5zJTIwb24lMjB5b3VyJTIwc2NyZWVuc2hvdC4lMEFOZXZlciUyMHRyeSUyMHRvJTIwbG9naW4lMjBpbiUyMGElMjBwYWdlLiUwQSUwQVRvJTIwc2Nyb2xsJTIwdXAlMjBvciUyMGRvd24lMkMlMjB1c2UlMjBzY3JvbGxfZG93biUyMG9yJTIwc2Nyb2xsX3VwJTIwd2l0aCUyMGFzJTIwYW4lMjBhcmd1bWVudCUyMHRoZSUyMG51bWJlciUyMG9mJTIwcGl4ZWxzJTIwdG8lMjBzY3JvbGwlMjBmcm9tLiUwQUNvZGUlM0ElMEElNjAlNjAlNjBweSUwQXNjcm9sbF9kb3duKG51bV9waXhlbHMlM0QxMjAwKSUyMCUyMyUyMFRoaXMlMjB3aWxsJTIwc2Nyb2xsJTIwb25lJTIwdmlld3BvcnQlMjBkb3duJTBBJTYwJTYwJTYwJTNDZW5kX2NvZGUlM0UlMEElMEFXaGVuJTIweW91JTIwaGF2ZSUyMHBvcC11cHMlMjB3aXRoJTIwYSUyMGNyb3NzJTIwaWNvbiUyMHRvJTIwY2xvc2UlMkMlMjBkb24ndCUyMHRyeSUyMHRvJTIwY2xpY2slMjB0aGUlMjBjbG9zZSUyMGljb24lMjBieSUyMGZpbmRpbmclMjBpdHMlMjBlbGVtZW50JTIwb3IlMjB0YXJnZXRpbmclMjBhbiUyMCdYJyUyMGVsZW1lbnQlMjAodGhpcyUyMG1vc3QlMjBvZnRlbiUyMGZhaWxzKS4lMEFKdXN0JTIwdXNlJTIweW91ciUyMGJ1aWx0LWluJTIwdG9vbCUyMCU2MGNsb3NlX3BvcHVwcyU2MCUyMHRvJTIwY2xvc2UlMjB0aGVtJTNBJTBBQ29kZSUzQSUwQSU2MCU2MCU2MHB5JTBBY2xvc2VfcG9wdXBzKCklMEElNjAlNjAlNjAlM0NlbmRfY29kZSUzRSUwQSUwQVlvdSUyMGNhbiUyMHVzZSUyMC5leGlzdHMoKSUyMHRvJTIwY2hlY2slMjBmb3IlMjB0aGUlMjBleGlzdGVuY2UlMjBvZiUyMGFuJTIwZWxlbWVudC4lMjBGb3IlMjBleGFtcGxlJTNBJTBBQ29kZSUzQSUwQSU2MCU2MCU2MHB5JTBBaWYlMjBUZXh0KCdBY2NlcHQlMjBjb29raWVzJTNGJykuZXhpc3RzKCklM0ElMEElMjAlMjAlMjAlMjBjbGljaygnSSUyMGFjY2VwdCcpJTBBJTYwJTYwJTYwJTNDZW5kX2NvZGUlM0UlMEElMjIlMjIlMjI=",highlighted:`helium_instructions = <span class="hljs-string">&quot;&quot;&quot;
You can use helium to access websites. Don&#x27;t bother about the helium driver, it&#x27;s already managed.
We&#x27;ve already ran &quot;from helium import *&quot;
Then you can go to pages!
Code:
\`\`\`py
go_to(&#x27;github.com/trending&#x27;)
\`\`\`&lt;end_code&gt;

You can directly click clickable elements by inputting the text that appears on them.
Code:
\`\`\`py
click(&quot;Top products&quot;)
\`\`\`&lt;end_code&gt;

If it&#x27;s a link:
Code:
\`\`\`py
click(Link(&quot;Top products&quot;))
\`\`\`&lt;end_code&gt;

If you try to interact with an element and it&#x27;s not found, you&#x27;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
\`\`\`&lt;end_code&gt;

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

You can use .exists() to check for the existence of an element. For example:
Code:
\`\`\`py
if Text(&#x27;Accept cookies?&#x27;).exists():
    click(&#x27;I accept&#x27;)
\`\`\`&lt;end_code&gt;
&quot;&quot;&quot;</span>`,wrap:!1}}),X=new j({props:{code:"c2VhcmNoX3JlcXVlc3QlMjAlM0QlMjAlMjIlMjIlMjIlMEFQbGVhc2UlMjBuYXZpZ2F0ZSUyMHRvJTIwaHR0cHMlM0ElMkYlMkZlbi53aWtpcGVkaWEub3JnJTJGd2lraSUyRkNoaWNhZ28lMjBhbmQlMjBnaXZlJTIwbWUlMjBhJTIwc2VudGVuY2UlMjBjb250YWluaW5nJTIwdGhlJTIwd29yZCUyMCUyMjE5OTIlMjIlMjB0aGF0JTIwbWVudGlvbnMlMjBhJTIwY29uc3RydWN0aW9uJTIwYWNjaWRlbnQuJTBBJTIyJTIyJTIyJTBBJTBBYWdlbnRfb3V0cHV0JTIwJTNEJTIwYWdlbnQucnVuKHNlYXJjaF9yZXF1ZXN0JTIwJTJCJTIwaGVsaXVtX2luc3RydWN0aW9ucyklMEFwcmludCglMjJGaW5hbCUyMG91dHB1dCUzQSUyMiklMEFwcmludChhZ2VudF9vdXRwdXQp",highlighted:`search_request = <span class="hljs-string">&quot;&quot;&quot;
Please navigate to https://en.wikipedia.org/wiki/Chicago and give me a sentence containing the word &quot;1992&quot; that mentions a construction accident.
&quot;&quot;&quot;</span>

agent_output = agent.run(search_request + helium_instructions)
<span class="hljs-built_in">print</span>(<span class="hljs-string">&quot;Final output:&quot;</span>)
<span class="hljs-built_in">print</span>(agent_output)`,wrap:!1}}),_=new j({props:{code:"Z2l0aHViX3JlcXVlc3QlMjAlM0QlMjAlMjIlMjIlMjIlMEFJJ20lMjB0cnlpbmclMjB0byUyMGZpbmQlMjBob3clMjBoYXJkJTIwSSUyMGhhdmUlMjB0byUyMHdvcmslMjB0byUyMGdldCUyMGElMjByZXBvJTIwaW4lMjBnaXRodWIuY29tJTJGdHJlbmRpbmcuJTBBQ2FuJTIweW91JTIwbmF2aWdhdGUlMjB0byUyMHRoZSUyMHByb2ZpbGUlMjBmb3IlMjB0aGUlMjB0b3AlMjBhdXRob3IlMjBvZiUyMHRoZSUyMHRvcCUyMHRyZW5kaW5nJTIwcmVwbyUyQyUyMGFuZCUyMGdpdmUlMjBtZSUyMHRoZWlyJTIwdG90YWwlMjBudW1iZXIlMjBvZiUyMGNvbW1pdHMlMjBvdmVyJTIwdGhlJTIwbGFzdCUyMHllYXIlM0YlMEElMjIlMjIlMjIlMEElMEFhZ2VudF9vdXRwdXQlMjAlM0QlMjBhZ2VudC5ydW4oZ2l0aHViX3JlcXVlc3QlMjAlMkIlMjBoZWxpdW1faW5zdHJ1Y3Rpb25zKSUwQXByaW50KCUyMkZpbmFsJTIwb3V0cHV0JTNBJTIyKSUwQXByaW50KGFnZW50X291dHB1dCk=",highlighted:`github_request = <span class="hljs-string">&quot;&quot;&quot;
I&#x27;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?
&quot;&quot;&quot;</span>

agent_output = agent.run(github_request + helium_instructions)
<span class="hljs-built_in">print</span>(<span class="hljs-string">&quot;Final output:&quot;</span>)
<span class="hljs-built_in">print</span>(agent_output)`,wrap:!1}}),F=new zl({props:{source:"https://github.com/huggingface/smolagents/blob/main/docs/source/ko/examples/web_browser.md"}}),{c(){m=M("meta"),H=n(),A=M("p"),z=n(),y(b.$$.fragment),$=n(),y(u.$$.fragment),q=n(),y(d.$$.fragment),D=n(),r=M("p"),r.innerHTML=hl,K=n(),h=M("p"),h.textContent=Il,L=n(),T=M("ul"),T.innerHTML=Cl,O=n(),I=M("p"),I.textContent=Bl,P=n(),C=M("p"),C.textContent=Vl,ll=n(),y(B.$$.fragment),sl=n(),V=M("p"),V.textContent=Zl,tl=n(),y(Z.$$.fragment),el=n(),W=M("p"),W.textContent=Wl,nl=n(),y(G.$$.fragment),al=n(),v=M("p"),v.textContent=Gl,Ml=n(),y(k.$$.fragment),ol=n(),f=M("p"),f.textContent=vl,Jl=n(),y(g.$$.fragment),yl=n(),Q=M("p"),Q.textContent=kl,pl=n(),y(N.$$.fragment),Ul=n(),E=M("p"),E.textContent=fl,il=n(),y(X.$$.fragment),cl=n(),S=M("p"),S.textContent=gl,wl=n(),y(_.$$.fragment),ml=n(),x=M("p"),x.textContent=Ql,Tl=n(),R=M("ul"),R.innerHTML=Nl,jl=n(),y(F.$$.fragment),bl=n(),Y=M("p"),this.h()},l(l){const s=Fl("svelte-u9bgzb",document.head);m=o(s,"META",{name:!0,content:!0}),s.forEach(t),H=a(l),A=o(l,"P",{}),El(A).forEach(t),z=a(l),p(b.$$.fragment,l),$=a(l),p(u.$$.fragment,l),q=a(l),p(d.$$.fragment,l),D=a(l),r=o(l,"P",{"data-svelte-h":!0}),J(r)!=="svelte-1ucalxs"&&(r.innerHTML=hl),K=a(l),h=o(l,"P",{"data-svelte-h":!0}),J(h)!=="svelte-1q2p0ju"&&(h.textContent=Il),L=a(l),T=o(l,"UL",{class:!0,"data-svelte-h":!0}),J(T)!=="svelte-1mpppjw"&&(T.innerHTML=Cl),O=a(l),I=o(l,"P",{"data-svelte-h":!0}),J(I)!=="svelte-dwlwhv"&&(I.textContent=Bl),P=a(l),C=o(l,"P",{"data-svelte-h":!0}),J(C)!=="svelte-1163xb6"&&(C.textContent=Vl),ll=a(l),p(B.$$.fragment,l),sl=a(l),V=o(l,"P",{"data-svelte-h":!0}),J(V)!=="svelte-1ehyo4z"&&(V.textContent=Zl),tl=a(l),p(Z.$$.fragment,l),el=a(l),W=o(l,"P",{"data-svelte-h":!0}),J(W)!=="svelte-1bzcqe3"&&(W.textContent=Wl),nl=a(l),p(G.$$.fragment,l),al=a(l),v=o(l,"P",{"data-svelte-h":!0}),J(v)!=="svelte-tofv"&&(v.textContent=Gl),Ml=a(l),p(k.$$.fragment,l),ol=a(l),f=o(l,"P",{"data-svelte-h":!0}),J(f)!=="svelte-14mo0j"&&(f.textContent=vl),Jl=a(l),p(g.$$.fragment,l),yl=a(l),Q=o(l,"P",{"data-svelte-h":!0}),J(Q)!=="svelte-1m7jvms"&&(Q.textContent=kl),pl=a(l),p(N.$$.fragment,l),Ul=a(l),E=o(l,"P",{"data-svelte-h":!0}),J(E)!=="svelte-mpjmif"&&(E.textContent=fl),il=a(l),p(X.$$.fragment,l),cl=a(l),S=o(l,"P",{"data-svelte-h":!0}),J(S)!=="svelte-xc0qy1"&&(S.textContent=gl),wl=a(l),p(_.$$.fragment,l),ml=a(l),x=o(l,"P",{"data-svelte-h":!0}),J(x)!=="svelte-12o3fac"&&(x.textContent=Ql),Tl=a(l),R=o(l,"UL",{"data-svelte-h":!0}),J(R)!=="svelte-1myvd86"&&(R.innerHTML=Nl),jl=a(l),p(F.$$.fragment,l),bl=a(l),Y=o(l,"P",{}),El(Y).forEach(t),this.h()},h(){dl(m,"name","hf:doc:metadata"),dl(m,"content",Dl),dl(T,"class","contains-task-list")},m(l,s){Al(document.head,m),e(l,H,s),e(l,A,s),e(l,z,s),U(b,l,s),e(l,$,s),U(u,l,s),e(l,q,s),U(d,l,s),e(l,D,s),e(l,r,s),e(l,K,s),e(l,h,s),e(l,L,s),e(l,T,s),e(l,O,s),e(l,I,s),e(l,P,s),e(l,C,s),e(l,ll,s),U(B,l,s),e(l,sl,s),e(l,V,s),e(l,tl,s),U(Z,l,s),e(l,el,s),e(l,W,s),e(l,nl,s),U(G,l,s),e(l,al,s),e(l,v,s),e(l,Ml,s),U(k,l,s),e(l,ol,s),e(l,f,s),e(l,Jl,s),U(g,l,s),e(l,yl,s),e(l,Q,s),e(l,pl,s),U(N,l,s),e(l,Ul,s),e(l,E,s),e(l,il,s),U(X,l,s),e(l,cl,s),e(l,S,s),e(l,wl,s),U(_,l,s),e(l,ml,s),e(l,x,s),e(l,Tl,s),e(l,R,s),e(l,jl,s),U(F,l,s),e(l,bl,s),e(l,Y,s),ul=!0},p:Sl,i(l){ul||(i(b.$$.fragment,l),i(u.$$.fragment,l),i(d.$$.fragment,l),i(B.$$.fragment,l),i(Z.$$.fragment,l),i(G.$$.fragment,l),i(k.$$.fragment,l),i(g.$$.fragment,l),i(N.$$.fragment,l),i(X.$$.fragment,l),i(_.$$.fragment,l),i(F.$$.fragment,l),ul=!0)},o(l){c(b.$$.fragment,l),c(u.$$.fragment,l),c(d.$$.fragment,l),c(B.$$.fragment,l),c(Z.$$.fragment,l),c(G.$$.fragment,l),c(k.$$.fragment,l),c(g.$$.fragment,l),c(N.$$.fragment,l),c(X.$$.fragment,l),c(_.$$.fragment,l),c(F.$$.fragment,l),ul=!1},d(l){l&&(t(H),t(A),t(z),t($),t(q),t(D),t(r),t(K),t(h),t(L),t(T),t(O),t(I),t(P),t(C),t(ll),t(sl),t(V),t(tl),t(el),t(W),t(nl),t(al),t(v),t(Ml),t(ol),t(f),t(Jl),t(yl),t(Q),t(pl),t(Ul),t(E),t(il),t(cl),t(S),t(wl),t(ml),t(x),t(Tl),t(R),t(jl),t(bl),t(Y)),t(m),w(b,l),w(u,l),w(d,l),w(B,l),w(Z,l),w(G,l),w(k,l),w(g,l),w(N,l),w(X,l),w(_,l),w(F,l)}}}const Dl='{"title":"에이전트를 활용한 웹 브라우저 자동화 🤖🌐","local":"web-browser-automation-with-agents-🤖🌐","sections":[],"depth":1}';function Kl(rl){return _l(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class ts extends xl{constructor(m){super(),Rl(this,m,Kl,ql,Xl,{})}}export{ts as component};
