Веб -сайт Pokemon Card Grader с использованием Sashido и обучаемой машины

Будучи увлеченным покемоном всю свою жизнь, я решил поработать над проектом, который позволил бы мне оценить состояние и качество карт, которые люди имеют вместо того, чтобы отправлять их крупным компаниям за несколько сотен долларов. Проект – это веб -сайт, который использует Google Обучаемая машина и Сашидо Бэкэнд. Более поздние функции позволят загружать изображения, но на его бета -стадии это позволит использовать только веб -камеру для карт.

Обучаемая машина

Чтобы начать работу с этим проектом, я впервые использовал Обучаемая машина Чтобы настроить 4 качества карты. Я сделал это, используя карты, которые у меня уже есть дома, и оценивая их от 1, который является самым низким до 4, является лучшим. Я использовал несколько карт аналогичных классов, чтобы настроить относительно точную модель изображения для текущей системы оценки.

Внешний интерфейс

Имея основное представление о том, что я хотел, чтобы сайт выглядел в виду, я быстро разработал скелет фронта, используя HTML, CSS и начальную загрузку, которые помогали получить чистые кнопки и оповещения. Используя начальную загрузку, которая имеет чрезвычайно доступную и понятную документацию, я смог быстро сделать базу того, на что будет функционировать остальное приложение.

Click to start Web Cam:

    if (bestClass == "Grade 4" || bestClass == "Grade 3" ) {
        newlabel.className = "alert alert-info";
    }
    else {
        newlabel.className = "alert alert-warning";
    }

Сашидо

После этого используя хорошо написанную документацию Сашидо Я смог легко подключить его к остальной части моего сайта. Хотя я использовал JavaScript, Сашидо Документация имеет пошаговые инструкции для многих языков в зависимости от вашего использования.

Parse.initialize(
    "l0nk4cQ8dQPGMJvXRVbu3QuC8D4QmSqVNJGfRbQP",
    "GQGu6n32obuLduR9QwG5PkYWRNQ5PKpS8CmTbMQf"
  );
  Parse.serverURL = 'https://pg-app-ji0j5566g3pgtzkb4ptq68lts1q3dy.scalabl.cloud/1/';

Экспорт модели изображения

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

const URL = "https://teachablemachine.withgoogle.com/models/AkFBx6T6U/";

Убирать

Как только все это было сделано, моей главной целью было очистка приборной панели и управление любыми небольшими ошибками, которые появились. Я использовал несколько градиентов и картин, которые я нашел в Интернете, чтобы сайт выглядел немного лучше и доступным. В конце концов, это было сделано, у меня был проект, который смог оценивать карты с 1-4.

* {
  margin: 0;
  box-sizing: border-box;
  font-weight: 600;
}

.title {
  padding-left: 10px;
}

#brand {
  font-weight: 700;
}

#detect {
  font-weight: 600;
}

body {
  background: url(Images/mat2.jpg) no-repeat center fixed;
  background-size: cover;
}

nav {
  background: rgb(22, 0, 152);
  background: linear-gradient(
    90deg,
    rgba(22, 0, 152, 1) 24%,
    rgba(255, 0, 0, 1) 100%
  );
}

.card-body {
  background: rgb(0, 121, 152);
  background: linear-gradient(
    90deg,
    rgba(0, 121, 152, 0.4096989137451855) 24%,
    rgba(255, 0, 0, 0.23322832550989148) 100%
  );
}

Следующие шаги/заключение

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

Ресурсы

Учебник Sashido – https://blog.sashido.io/sashidos-getting-started-guide/ https://blog.sashido.io/sashidos-getting-started-guide-part-2/ Обучаемая машина – https://teachablemachine.withgoogle.com/ Обучаемая машинная библиотека – https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image Bootstrap – https://getbootstrap.com/docs/4.0/components/buttons/ GitHub – https://github.com/vishnudevp/pokemon-card grader

Оригинал: “https://dev.to/vishnudev2021/pokemon-card-grader-website-using-sashido-and-teachable-machine-287a”

Оглавление