Руководство пользователя Screph Screph User Manual

В этом руководстве описаны функции Screph: выделение элементов, аннотации, граф связей, эмуляция действий, сохранение/загрузка, экспорт данных и интеграция с IDE. This guide details all Screph features: element selection, annotations, relation graph, action emulation, saving/loading, data export and IDE integration.

1. Выделение и редактирование элементов 1. Selecting and Editing Elements

Screph предоставляет инструменты для точного выделения и редактирования элементов интерфейса. Screph provides flexible tools for precise selection and editing of interface elements.

Режимы работыWorking Modes

  • ВыделениеSelect Mode: Выбор существующих элементов на холсте. Кликните на элемент — он подсветится, свойства отобразятся на панели.Select existing elements on canvas. Click on an element — it will be highlighted and properties displayed in the panel.
  • СозданиеCreate Mode: Добавление новых элементов. Кликните и потяните для рисования прямоугольной области.Add new elements. Click and drag to draw a rectangular area.
  • ПеремещениеMove Mode: Изменение положения. Выберите элемент и перетащите на новое место.Change position. Select element and drag to new location.
  • Изменение размераResize Mode: Изменение габаритов. Тяните за границы или углы элемента.Change dimensions. Drag element borders or corners.
  • ИерархияHierarchy Mode: Установка родительско-дочерних связей между элементами.Establish parent-child relationships between elements.

ВзаимодействиеInteraction

  • ВыборSelection: Клик на элемент в режиме выделения.Click on element in Select Mode.
  • Множественный выборMulti-select: Удерживайте Ctrl (Cmd на macOS) при клике.Hold Ctrl (Cmd on macOS) while clicking.
  • Контекстное менюContext Menu: Правый клик — удаление, дублирование, изменение свойств.Right-click — delete, duplicate, modify properties.
  • УдалениеDelete: Выберите элемент и нажмите Delete.Select element and press Delete.

Свойства элементаElement Properties

  • ИмяName: Уникальное имя (авто или пользовательское).Unique name (auto or user-defined).
  • ТипType: Категория элемента (кнопка, поле ввода и т.д.).Element category (button, input field, etc.).
  • Координаты и размерыCoordinates and Dimensions: Положение (X, Y) и размеры.Position (X, Y) and size.
  • ИерархияHierarchy: Информация о связях с другими элементами.Information about relationships with other elements.
  • АннотацияAnnotation: Текстовое описание элемента.Text description of the element.

2. Аннотации (текст/голос) 2. Annotations (Text/Voice)

Каждому элементу можно добавить текстовое описание или "промпт". Объясните его роль, какие данные он содержит, или какое действие нужно совершить. Поддерживается голосовой ввод! Add text description or "prompt" to each element. Explain its role, what data it should contain, or what action to perform. Voice input is supported!

Возможности аннотированияAnnotation Features

  • Текстовый вводText Input: Классический способ добавления описаний.Classic way to add descriptions.
  • Голосовой вводVoice Input: Ускоряет процесс — надиктовывайте инструкции.Speeds up the process — dictate instructions.
  • Указание действийSpecifying Actions: "кликнуть", "ввести текст", "выбрать из списка"."click", "enter text", "select from list".
  • Описание данныхDescribing Data: "поле для email", "сумма заказа"."email field", "order amount".

Голосовая аннотацияVoice Annotation

Screph поддерживает голосовой ввод через внешний провайдер или офлайн с локальными моделями Vosk. Screph supports voice input via external provider or offline with local Vosk models.

  1. Выберите элемент для аннотации.Select element for annotation.
  2. Активируйте "Голосовая Аннотация" на панели инструментов.Activate "Voice Annotation" in the toolbar.
  3. Говорите чётко в микрофон.Speak clearly into the microphone.
  4. Нажмите "Стоп" и проверьте распознанный текст.Press "Stop" and review recognized text.

3. Сохранение и загрузка проектов 3. Saving and Loading Projects

Screph позволяет сохранять работу в файлы проектов (.sgaip) и загружать их позже. Screph allows saving work to project files (.sgaip) and loading them later.

СохранениеSaving

  • Файл → Сохранить проектFile → Save Project: Перезаписывает существующий файл или создаёт новый. Горячая клавиша: Ctrl+S.Overwrites existing file or creates new. Hotkey: Ctrl+S.
  • Файл → Сохранить проект как...File → Save Project As...: Выбор нового имени/места. Горячая клавиша: Ctrl+Shift+S.Choose new name/location. Hotkey: Ctrl+Shift+S.

Что сохраняетсяWhat Gets Saved

  • Снимки фона (все изображения серии)Background snapshots (all images in series)
  • Элементы с именами, типами, координатамиElements with names, types, coordinates
  • Иерархия и связи элементовElement hierarchy and relationships
  • АннотацииAnnotations
  • Настройки проектаProject settings

ЗагрузкаLoading

Файл → Загрузить проект (Ctrl+O) — выберите файл .sgaip. File → Load Project (Ctrl+O) — select a .sgaip file.

4. Работа с сериями изображений 4. Working with Image Series

Серии изображений для многошаговых сценариев и динамических интерфейсов. Image series for multi-step scenarios and dynamic interfaces.

КонцепцияConcept

Серия — упорядоченный набор снимков, представляющих разные состояния приложения. Элементы и аннотации привязаны к конкретному кадру. A series is an ordered set of screenshots representing different application states. Elements and annotations are bound to specific frames.

УправлениеManagement

  • ДобавлениеAdding: "Захват экрана" или Файл → Добавить изображение."Capture Screen" or File → Add Image.
  • НавигацияNavigation: Кнопки "Следующее/Предыдущее изображение"."Next/Previous Image" buttons.
  • УдалениеDeletion: "Удалить текущее изображение"."Delete Current Image".

5. Граф взаимодействий 5. Interaction Graph

Screph позволяет визуально определять связи и зависимости между элементами, выстраивая граф. Узлы — элементы, рёбра — логические переходы. Screph allows visually defining connections and dependencies between elements, building a graph. Nodes are elements, edges are logical transitions.

ПреимуществаAdvantages

  • КонтекстуализацияContextualization: Понимание взаимосвязей элементов.Understanding element relationships.
  • ПоследовательностьSequence: Чёткий порядок действий.Clear action order.
  • ВетвленияBranching: Описание разных сценариев.Describing different scenarios.
  • ВизуализацияVisualization: Контроль логики скрипта.Script logic control.

6. Подготовка данных и эмуляция 6. Data Preparation and Emulation

Screph формирует структурированный набор данных (изображения, выделения, аннотации, граф) и эмулирует действия пользователя. Данные экспортируются (например, JSON) для генерации кода. Screph creates a structured dataset (images, selections, annotations, graph) and emulates user actions. Data is exported (e.g., JSON) for code generation.

ОсобенностиFeatures

  • ЯзыкиLanguages: Фокус на Python, расширяемо на другие.Focus on Python, extendable to others.
  • БиблиотекиLibraries: pyautogui, Selenium, Playwright.pyautogui, Selenium, Playwright.
  • ЧитаемостьReadability: Понятный и модифицируемый код.Clear and modifiable code.

7. Интеграция с IDE 7. IDE Integration

Данные и код легко экспортируются в вашу IDE (Cursor, VS Code, Trae). Screph дополняет IDE, предоставляя визуальный инструмент для подготовки данных. Data and code easily export to your IDE (Cursor, VS Code, Trae). Screph complements IDE by providing a visual tool for data preparation.

Способы интеграцииIntegration Methods

  • Экспорт данныхExport Data: Сохранение в формате для импорта в другие инструменты.Save in format for import to other tools.
  • Копирование кодаCopy Code: Буфер обмена → IDE.Clipboard → IDE.
  • Файловая системаFile System: Сохранение в виде файлов.Save as files.

← Вернуться к оглавлению ← Back to Table of Contents