ჩვენ smolagents-ს დავუმატეთ ვიზუალური მხარდაჭერა, რაც ხსნის ვიზუალური ენობრივი მოდელების გამოყენების შესაძლებლობას აგენტურ პაიპლაინებში მშობლიური ინტეგრაციით. აგენტურ სამყაროში მრავალი შესაძლებლობა ვიზუალური ბარიერის მიღმაა დამალული. გავრცელებული მაგალითია ვებ-დათვალიერება: ვებ-გვერდები მდიდარ ვიზუალურ შინაარსს ატარებენ, რომლის სრულად აღდგენა მხოლოდ ტექსტის ამოღებით შეუძლებელია, იქნება ეს ობიექტების შედარებითი პოზიცია, ფერის მეშვეობით გადაცემული შეტყობინებები თუ კონკრეტული ხატულები. ამ შემთხვევაში, ხედვა აგენტებისთვის ნამდვილი სუპერძალაა. ამიტომ, ჩვენ ახლახან დავამატეთ ეს შესაძლებლობა ჩვენს smolagents-ს! მინიშნება იმის შესახებ, რასაც ეს იძლევა: აგენტური ბრაუზერი, რომელიც ვებ-სივრცეში სრულ ავტონომიაში ნავიგაციას ახორციელებს! აი, როგორ გამოიყურება ეს: 🤔 როგორ გვსურს სურათების გადაცემა აგენტებისთვის? სურათის გადაცემა ორი გზით შეიძლება განხორციელდეს: იმ შემთხვევაში, თუ გვსურს სურათების ერთდროულად გადაცემა, დავამატეთ შესაძლებლობა, რომ სურათების სია გადაეცეს აგენტს run მეთოდში: `agent.run("Describe these images:", images=[image_1, image_2])`. ეს სურათის შეყვანები შემდეგ ინახება TaskStep-ის `task_images` ატრიბუტში, იმ დავალების მოთხოვნასთან ერთად, რომლის შესრულებაც გსურთ. აგენტის გაშვებისას, ისინი გადაეცემა მოდელს. ეს გამოსადეგია იმ შემთხვევებში, როგორიცაა მოქმედებების განხორციელება გრძელ PDF ფაილებზე დაყრდნობით, რომლებიც ვიზუალურ ელემენტებს მოიცავს. როგორ დავამატოთ სურათები დინამიურად აგენტის მეხსიერებაში? ამის გასარკვევად, ჯერ უნდა გავიგოთ, როგორ მუშაობს ჩვენი აგენტები. smolagents-ის ყველა აგენტი ეფუძნება ერთიან `MultiStepAgent` კლასს, რომელიც ReAct ფრეიმვორკის აბსტრაქციაა. საბაზისო დონეზე, ეს კლასი ასრულებს მოქმედებებს შემდეგი ნაბიჯების ციკლზე, სადაც არსებული ცვლადები და ცოდნა ინტეგრირებულია აგენტის ლოგებში შემდეგნაირად: (აქ მოთავსებული იქნებოდა დიაგრამა). ქვემოთ მოცემული სურათი ამ პროცესს აზუსტებს. როგორც ხედავთ, იმ გამოყენების შემთხვევებისთვის, სადაც სურათები დინამიურად მოიპოვება (მაგ., ვებ-ბრაუზერის აგენტი), ჩვენ ვუჭერთ მხარს სურათების დამატებას მოდელის ActionStep-ში, ატრიბუტ `step_log.observation_images`-ში. ეს შეიძლება გაკეთდეს ქოლბექის (callback) მეშვეობით, რომელიც შესრულდება ყოველი ნაბიჯის ბოლოს. მოდით ვაჩვენოთ, როგორ შევქმნათ ასეთი ქოლბექი და გამოვიყენოთ ის ვებ-ბრაუზერის აგენტის ასაშენებლად. 👇👇 ჩვენ გამოვიყენებთ helium-ს. ის უზრუნველყოფს ბრაუზერის ავტომატიზაციას selenium-ზე დაყრდნობით: ეს იქნება უფრო მარტივი გზა ჩვენი აგენტისთვის ვებ-გვერდების მანიპულირებისთვის. თავად აგენტს შეუძლია helium-ის პირდაპირ გამოყენება, ასე რომ, კონკრეტული ხელსაწყოები არ არის საჭირო: მას შეუძლია პირდაპირ გამოიყენოს helium მოქმედებების შესასრულებლად, როგორიცაა `click("top 10")` ღილაკზე "top 10"-ზე დაწკაპუნება, რომელიც გვერდზე ჩანს. ჩვენ ჯერ კიდევ გვჭირდება გარკვეული ხელსაწყოების შექმნა, რათა დავეხმაროთ აგენტს ვებ-სივრცეში ნავიგაციაში: ხელსაწყო წინა გვერდზე დასაბრუნებლად და კიდევ ერთი ხელსაწყო ამომხტარი ფანჯრების (pop-ups) დასახურად, რადგან helium-ისთვის მათი დაჭერა საკმაოდ რთულია, რადგან მათ არ აქვთ ტექსტი დახურვის ღილაკებზე. ამ დროისთვის, აგენტს არ აქვს ვიზუალური შეყვანა. მოდით, ვაჩვენოთ, როგორ მივაწოდოთ მას სურათები დინამიურად მის step ლოგებში ქოლბექის გამოყენებით. ჩვენ ვქმნით ქოლბექს `save_screenshot`, რომელიც შესრულდება ყოველი ნაბიჯის ბოლოს. ყველაზე მნიშვნელოვანი სტრიქონი აქ არის, როდესაც სურათს ვამატებთ ჩვენს დაკვირვების სურათებში: `step_log.observations_images = [image.copy()]`. ეს ქოლბექი იღებს როგორც `step_log`-ს, ასევე თავად აგენტს არგუმენტებად. აგენტის შეყვანად ქონა საშუალებას იძლევა შევასრულოთ უფრო ღრმა ოპერაციები, ვიდრე უბრალოდ ბოლო ლოგების შეცვლა. მოდით შევქმნათ მოდელი. ჩვენ დავამატეთ სურათების მხარდაჭერა ყველა მოდელში. მხოლოდ ერთი დაზუსტება: `TransformersModel`-ის VLM-თან გამოყენებისას, მისი სწორად მუშაობისთვის საჭიროა initialization-ისას `flatten_messages_as_text`-ის `False`-ად გადაცემა, მაგალითად: (კოდის მაგალითი). ამ დემოსთვის, მოდით გამოვიყენოთ უფრო დიდი Qwen2VL Fireworks API-ის მეშვეობით: (კოდის მაგალითი). ახლა გადავიდეთ ჩვენი აგენტის განსაზღვრაზე. ჩვენ დავაყენეთ მაქსიმალური `verbosity_level`, რათა გამოჩნდეს LLM-ის სრული გამომავალი შეტყობინებები მისი ფიქრების სანახავად, და გავზარდეთ `max_steps` 20-მდე, რათა აგენტს მივცეთ მეტი ნაბიჯი ვებ-ის შესასწავლად. ჩვენ ასევე მივაწოდეთ მას ჩვენი ზემოთ განსაზღვრული ქოლბექი `save_screenshot`. საბოლოოდ, ჩვენ მივაწოდეთ ჩვენს აგენტს გარკვეული მითითებები helium-ის გამოყენების შესახებ. ახლა ყველაფერი მზადაა: მოდით გავუშვათ ჩვენი აგენტი! თუმცა, გაითვალისწინეთ, რომ ეს დავალება მართლაც რთულია: VLM-ის მიხედვით, რომელსაც იყენებთ, ეს შეიძლება ყოველთვის არ იმუშაოს. ძლიერი VLM-ები, როგორიცაა Qwen2VL-72B ან GPT-4o, უფრო ხშირად აღწევენ წარმატებას. ეს მოგცემთ წარმოდგენას ვიზუალური შესაძლებლობების მქონე CodeAgent-ის შესაძლებლობებზე, მაგრამ კიდევ ბევრია გასაკეთებელი! ჩვენ მოუთმენლად ველით, რას შექმნით ვიზუალური ენობრივი მოდელებითა და smolagents-ით! მეტი სტატია ჩვენი ბლოგიდან შენიშვნა: მოდალური ფანჯრების დახურვის სელექტორებისთვის, გთხოვთ, გაითვალისწინოთ, რომ მოდალური ფანჯრები ასევე ცნობილია როგორც დიალოგური ელემენტები და თუ ისინი მყარად არის აგებული, მათ უნდა ჰქონდეთ `role="dialog"` ატრიბუტი; ეს არის ის, რისი მოძიებაც შესაძლებელია ამ ამომხტარი ფანჯრების იდენტიფიცირებისას. გარდა ამისა, ნებისმიერი დიალოგური/მოდალური ფანჯარა უნდა იხურებოდეს escape ღილაკითაც! იმედია, ეს დაგეხმარებათ მოდალური/დიალოგური ფანჯრების უფრო ფართო გაგებით იდენტიფიცირებაში და/ან მათ უფრო მარტივად დახურვაში! შესაბამისი კოდის ნაწილი ზემოდან მითითებისთვის :) ოჰ, ეს შესანიშნავი შენიშვნაა, დიდი მადლობა! ამას კარგად გამოვიყენებთ! თუ გაქვთ ძალა ამის გასაკეთებლად, მაშინ: დახმარება! დახმარება! დახმარება! https://arxiv.org/auth/endorse?x=VMBF4S `@tool def accept_cookie_popup() -> str: """ accept any visible cookie consent banners. """ wait = WebDriverWait(d`