Поиск фотографий товаров
Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:
Написать в чат Написать в Telegram
Пресет используется для задач, когда от исполнителя требуется найти фото продукта в интернете по названию и артикулу.
В пресете по умолчанию для создания интерфейса задания используется редактор HTML/JS/CSS. В этом разделе описано, как использовать Конструктор шаблонов для этой же цели. В разделе Интерфейс проекта выберите Конструктор шаблонов и вставьте код из примера в раздел Конфигурация.
В этом примере интерфейс содержит:
- текстовые поля;
- ссылки для поиска в Google,
- область загрузки;
- переключатель.
Из каких компонентов состоит этот пример
- view.list — отображает данные списком;
- view.text — показывает текст;
Показать код
{
"type": "view.text",
"label": "Название продукта",
"content": {
"type": "data.input",
"path": "name"
}
},
{
"type": "view.text",
"label": "Бренд",
"content": {
"type": "data.input",
"path": "brand"
}
},
{
"type": "view.text",
"label": "Артикул",
"content": {
"type": "data.input",
"path": "sku"
}
}
- view.link-group — объединяет ссылки в группы;
Сочетание условий condition.any и condition.link-opened внутри свойства validation
проверяет просмотр исполнителем хотя бы одной ссылки.
Компонент helper.search-query создает строку с ссылкой на поисковый запрос.
Показать код
{
"type": "view.link-group",
"validation": {
"type": "condition.any",
"hint": "Поиск по названию или артикулу",
"conditions": [
{
"type": "condition.link-opened",
"url": {
"$ref": "view.items.3.links.0.url"
}
},
{
"type": "condition.link-opened",
"url": {
"$ref": "view.items.3.links.1.url"
}
}
]
},
"links": [
{
"url": {
"type": "helper.search-query",
"query": {
"type": "data.input",
"path": "name"
},
"engine": "google/images"
},
"content": "Поиск по названию",
"theme": "primary"
},
{
"url": {
"type": "helper.search-query",
"query": {
"type": "data.input",
"path": "sku"
},
"engine": "google/images"
},
"content": "Поиск по артикулу",
"theme": "primary"
}
]
}
-
Сочетание helper.if и condition.equals скрывает поле загрузки фото, если выбран вариант Фото не найдено.
Показать код
{ "type": "helper.if", "condition": { "type": "condition.equals", "data": { "type": "data.output", "path": "not_found" }, "to": false }, "then": { "type": "view.list", "items": [ { "type": "field.file", "label": "Фото продукта", "data": { "type": "data.output", "path": "image" } } ] } }
- field.file — показывает кнопку для загрузки файла;
Показать код
{
"type": "field.file",
"label": "Фото продукта",
"data": {
"type": "data.output",
"path": "image"
}
}
- field.checkbox — добавляет чекбокс;
Показать код
{
"type": "field.checkbox",
"label": "Фото не найдено",
"preserveFalse": true,
"data": {
"type": "data.output",
"path": "not_found"
}
}
-
Сочетание компонентов condition.any, condition.required и condition.equals в свойстве
validation
проверяет загрузку изображения или выбор варианта Фото не найдено.Показать код
{ "type": "condition.any", "conditions": [ { "type": "condition.required", "data": { "type": "data.output", "path": "image" } }, { "type": "condition.equals", "data": { "type": "data.output", "path": "not_found" }, "to": true } ], "hint": "Добавьте файл или нажмите \"Фото не найдено\"" }
- plugin.toloka — настраивает внешний вид задания.
Показать код
"plugins": [
{
"type": "plugin.toloka",
"layout": {
"kind": "scroll",
"taskWidth": 500
}
}
]
Примечание
Вы можете добавлять медиафайлы (аудио, видео, картинки) со своего сервера или из облачных хранилищ, таких как Yandex Cloud, Google Cloud, Amazon AWS и т.п.
Если вам не подходит этот пресет, посмотрите другие примеры в этом разделе.
Добавить описание
Чтобы добавить описание к заданию, воспользуйтесь компонентом view.text.
Показать код
{
"type": "view.text",
"content": "Поиск фото по названию или артикулу. Если вы не смогли найти фото, выберите опцию “Фото не найдено”."
},
Добавить поле ответа
Чтобы исполнители могли оставить комментарий, добавьте компонент для ввода многострочного текста field.textarea.
Показать код
{
"type": "field.textarea",
"label": "Комментарий",
"placeholder": "Введите текст",
"data": {
"type": "data.output",
"path": "comment"
}
}
Добавить оформление
Чтобы исполнитель легче ориентировался в задании, оформите разные типы данных цветом с помощью компонента view.alert. Вы можете расположить его внутри view.list вместе с другими компонентами.
В этом примере описание задания выделено синим цветом.
Показать код
{
"type": "view.alert",
"theme": "info",
"content": {
"type": "view.text",
"content": "Поиск фото по названию или артикулу. Если вы не смогли найти фото, выберите опцию “Фото не найдено”."
}
},
Добавить условия
Чтобы отобразить дополнительный компонент интерфейса, если выполнено определенное условие, используйте компонент helper.switch. В примере в зависимости от ответа исполнителем на вопрос Вы смогли найти фото? отображается:
- поле загрузки фото, если ответ Да;
- поле для добавления комментария, если ответ Нет.
Показать код
{
"type": "field.radio-group",
"label": "Вы смогли найти фото?",
"data": {
"type": "data.output",
"path": "photo"
},
"options": [
{
"label": "Да",
"value": "yes"
},
{
"label": "Нет",
"value": "no"
}
],
"validation": {
"type": "condition.required",
"hint": "Выберите один из вариантов"
}
},
{
"type": "helper.switch",
"cases": [
{
"condition": {
"type": "condition.equals",
"data": {
"type": "data.output",
"path": "photo"
},
"to": "yes"
},
"result": {
"type": "field.file",
"label": "Фото продукта",
"data": {
"type": "data.output",
"path": "image"
},
"validation": {
"type": "condition.required",
"hint": "Прикрепите фото"
}
}
},
{
"condition": {
"type": "condition.equals",
"data": {
"type": "data.output",
"path": "photo"
},
"to": "no"
},
"result": {
"type": "field.textarea",
"label": "Почему?",
"placeholder": "Добавьте комментарий",
"data": {
"type": "data.output",
"path": "comment"
},
"validation": {
"type": "condition.required",
"hint": "Добавьте комментарий."
}
}
}
]
}