😁 Код открыт, приглашаем учиться и общаться (большие парни, не брызгайте, самоучка JavaScript) 😁

⚠️ Отказываемся от любых попыток бесплатно использовать или монетизировать чужие наработки ⚠️ (уже участвовал в конкурсе мини-программ)

Если вам это пригодится, можете поставить звезду ✨

Insight — мини-программа для распознавания изображений в WeChat

1. Обзор продукта

1.1 Введение и требования

Insight — это бесплатная мини-программа, которая быстро распознаёт изображения, получает соответствующие знания и улучшает понимание информации о жизни. Программа использует технологии искусственного интеллекта для быстрого анализа изображений и быстро предоставляет пользователям обратную связь.

Мини-программа Insight может помочь вам распознавать животных, растения, автомобили, продукты питания, предметы, логотипы/названия компаний, текст (включая рукописный) и даже записывать результаты распознавания для последующего просмотра.

1.2 Целевая аудитория

Продукт является инструментом и подходит для всех возрастов. Он ориентирован на различные группы людей, включая:

• Исследователи растений и животных, а также связанные с ними преподаватели и студенты.
• Любители растений и животных или новички, которые плохо разбираются в растениях и животных.
• Пользователи, которым необходимо получить содержание текста на изображении.
• Автомобильные энтузиасты, которые хотят узнать модель автомобиля.
• Люди, которые видят еду, но не знают её названия.
• Дизайнеры логотипов, которым нужно получить название товара или бренда.

1.3 Сценарии использования

• Хотите знать, что это такое: в повседневной жизни или при просмотре интернета вы видите животных, растения, автомобили, еду, логотипы или предметы и хотите узнать их названия и соответствующую информацию; родители сталкиваются с трудностями при ответе на вопросы детей о растениях, животных и т. д.
• Получение соответствующих знаний: студенты выполняют задания, связанные с растениями, животными и т.д., подготовленные преподавателями; садоводы накапливают соответствующие знания.
• Распознавание текста: запись лекций и встреч PPT, преобразование бумажных заметок в электронные версии, сохранение чеков и т. п.

1.4 Болевые точки пользователей, потребности и решения

1.5 Инновации и применение

1.5.1 Инновационные аспекты

• Быстро и удобно: согласно предварительному исследованию рынка, программы для распознавания изображений обычно требуют установки приложения. Такие программы, как «Форма и цвет» и «OCR для рукописных текстов», требуют больше места на телефоне. В отличие от них, Insight можно использовать сразу после завершения задачи, обеспечивая более быстрый и удобный опыт.
• Низкие затраты на эксплуатацию: Insight использует функции облачной разработки TencentTCB (Tencent Cloud Development), что значительно упрощает разработку — в отличие от традиционных приложений, требующих серверов, доменов и других сложных предварительных условий. Insight использует облачное хранилище, облачные функции и облачную базу данных, снижая затраты на разработку, обновление, обслуживание и продвижение по сравнению с традиционными приложениями.
• Полные функции и простота в использовании: по сравнению с другими программами для распознавания изображений, Insight предлагает более широкий спектр функций, объединяя распознавание растений, животных, предметов, автомобилей, еды, логотипов, текста и рукописного ввода в одном приложении. Кроме того, приложение предоставляет подробную информацию о результатах распознавания, позволяя пользователям лучше понять результаты. В области распознавания текста приложение предлагает редактируемые тексты и функцию копирования одним щелчком мыши. Также доступна функция просмотра истории распознавания.

С точки зрения пользовательского интерфейса Insight использует карточную структуру, где функции чётко разделены, что позволяет пользователям легко понять, как работает приложение, и быстро начать им пользоваться.

1.5.2 Практическое применение

В статистике бэкенда мини-приложения можно увидеть, что доля пользователей, переходящих из панели задач, составляет 75%. Это указывает на то, что Insight стал привычным инструментом для пользователей, предоставляя быстрые и удобные решения для их потребностей.

Insight выделяется среди традиционных программ для распознавания изображений благодаря своей способности быстро решать проблемы пользователей и повышать их осведомлённость о жизни. «Идентификация» и «Моя страница»: использование иконок Font Awesome

Страницы «Идентификация» и «Моя» используют систему иконок Font Awesome. На странице «Идентификация» используются незаполненные контурные иконки для помощи пользователям в быстром нахождении нужной функции. После выбора они становятся основным синим цветом (#2e51ff). В не выбранном состоянии они чёрные.

На странице «Моя» используется иконка «Дополнительно» в качестве вспомогательной. Она отличается от иконки «Ещё работы» ниже, чтобы показать её важность и приоритет.

Цветовая система

• Функция Insight: основные цвета — синий, что создаёт ощущение чистоты и ясности и позволяет пользователю сформировать точное и интеллектуальное первое впечатление о продукте.
• Навигация по страницам, заголовки списков результатов и другие элементы: используются градиенты синего цвета для контраста: от синего к серому (linear-gradient(45deg, #0081ff, #1cbbb4)).
• Интервалы между элементами: дизайн следует принципу 8px. Широко используются интервалы 40px и 80px для обеспечения достаточного пространства и читаемости текста.

Стандарты интерфейса

• Расстояние между карточками: общий дизайн соответствует принципу 8px, с использованием интервалов 40px и 80px. Это обеспечивает достаточное пространство для отображения контента и улучшает читаемость.
• Закруглённые углы карточек: в дизайне широко используются карточки как основа для представления информации. Закруглённые углы имеют радиус 20rpx (или 10px), что делает интерфейс более живым и уменьшает монотонность.
• Соотношение сторон изображений: изображения на странице «Знания» обычно имеют соотношение сторон 2:1. Изображения на странице «Идентификация» представлены в виде встроенных карточек и требуют учёта общего размера карточки. Они обычно имеют соотношение 4:3. Изображения на странице результатов идентификации используют соотношение 5:4.
• Высота панелей: высота TabBar и NavBar соответствует стандартам малых программ. Это предотвращает излишнее использование пространства и облегчает взаимодействие с пользователем.

Дизайн навигации

1. Главная страница имеет раздел «Идентификация», где функции разделены на карточки. Пользователь может перемещаться между различными типами идентификации, скользя вверх или вниз. Навигация осуществляется через боковую панель, которая помогает пользователю быстро найти нужную функцию. Панель расположена справа для удобства использования одной рукой.
2. Простой и лаконичный дизайн интерфейса позволяет пользователям легко понять и использовать приложение. Например, на странице «Идентификация» пользователь может выбрать тип идентификации (камера или галерея) и перейти к результатам после нажатия.

Техническая реализация

• Функция идентификации: используется API-интерфейс технологии распознавания изображений Baidu AI и облачные функции для упаковки и развёртывания в малых программах. Когда пользователь выбирает тип идентификации и загружает изображение, оно сохраняется в облачном хранилище. Затем изображение отправляется в облачную функцию, которая возвращает результат распознавания. Результат обрабатывается и отображается на странице, обеспечивая интерактивность.
• Хранение данных: используются облачное хранилище и облачная база данных малых программ для хранения текстовых данных, изображений, результатов распознавания и других элементов. При отображении данные извлекаются из базы данных и отображаются на странице.
• Запись распознавания: изображения сохраняются в облачном хранилище, а результаты распознавания и URL-адреса изображений записываются в облачной базе данных. При открытии страницы «Запись распознавания» или использовании функции «Поделиться» данные фильтруются по идентификатору пользователя и отображаются в списке. При нажатии данные передаются на страницу результатов для отображения.
• Публикация статей: контент управляется и публикуется с помощью облачных функций управления контентом.

Реализация системы

• Идентификация: процесс включает в себя загрузку изображения, распознавание, обработку результата и отображение на странице. Используются облачные функции.
• Переход и обмен:
  • Статьи: карточки со статьями находятся на странице «Знание». Содержание карточек берётся из облачной базы данных, кэшируется и отображается с помощью цикла wx:for. Переход на страницу статьи осуществляется с помощью уникального идентификатора (_id), который используется для поиска в базе данных на подробной странице статьи.
  • Результаты идентификации: переход к истории распознавания осуществляется с использованием уникального идентификатора пользователя (_openid) для поиска соответствующих данных в облачной базе данных. Результаты (URL-адрес изображения в облачном хранилище, результат распознавания и тип идентификации) отображаются на странице и могут быть переданы на страницу результатов при нажатии.
  • Обмен: данные кодируются с помощью encodeURIComponent() перед передачей. На принимающей стороне используется decodeURIComponent(). Официальный механизм обмена используется для передачи данных через параметр path.

Тестирование

• Стабильность: приложение имеет простой и понятный функционал. Функция идентификации работает путём загрузки изображения. Статьи представляют собой содержимое базы данных, которое отображается корректно. История распознавания считывается из базы данных с использованием уникального идентификатора и не вызывает ошибок. Приложение было протестировано более чем 200 пользователями после запуска и показало стабильную работу. Облачная разработка TCB обеспечивает дополнительную стабильность.
• Модели устройств: поскольку приложение использует облачные функции, основное внимание уделяется стилю и адаптации под различные модели устройств. Разработчики использовали rpx для хорошей адаптации к различным моделям, и приложение работает без проблем на разных устройствах.