В этом сообщении блога мы продемонстрируем возможности Ably и Tensorflow.js. Все будет только на фронтенде, всего в одном HTML. Это демонстрация, в производственной среде вы можете не делать этого таким образом, но вы можете почувствовать, насколько мощна Ably и как вы можете использовать модель глубокого обучения с помощью всего нескольких строк кода.
Что такое способности?
Умело предоставлять API для легкой обработки большого количества публикаций / подписок в реальном времени. В Ably вы можете выбирать из библиотеки Realtime, REST, MQTT или SSE, которая реализована на большинстве популярных языков и фреймворков. Для получения дополнительной информации об Ably, вы можете посетить их веб-страницу.
Если вы хотите следовать этой демонстрации и создать свою собственную, вам необходимо зарегистрироваться для получения бесплатной учетной записи Ably и получить ключ API здесь.
Давайте начнем!
Во-первых, нам понадобятся все основные компоненты в HTML. Начнем с этого файла в виде скелета:
<html>
<body>
<h1>TfL traffic notifier</h1>
<p></p>
<div>
Your update: <input type="text" id="message-text" value=""> <button id="send-message">Submit an update</button>
</div>
<textarea id="result" rows="10" style="width: 60%; margin-top: 10px; font-family: courier, courier new; background-color: #333; color: orange" disabled=""></textarea>
</div>
</body>
</html>
Это очень просто и просто. Нас больше интересует функциональность, а не графический дизайн. У нас есть поле для ввода данных пользователем и кнопка для отправки обновления. Черная текстовая область внизу предназначена для сообщений от всех пользователей.
Умелое использование в реальном времени
Мы будем использовать соединение Ably Realtime WebSocket для публикации и подписки на канал для пользователей обновленной формы. (Убедитесь, что у вас есть ключ API) Поместите это после </body> и перед </html>:
<!-- Include the latest Ably Library --> <script src="https://cdn.ably.io/lib/ably.min-1.js"></script> <!-- Instance the Ably library --> <script type="text/javascript"> // Set up Ably's channel var realtime = new Ably.Realtime(<your API key>; // put your API key here var channel = realtime.channels.get("my_channel"); // Helper function for getting the timestamp function get_current_time(){ return '[' + Date().toLocaleString() + ']\n'; } // Getting the update from users channel.subscribe(function(msg) { document.getElementById("result").innerHTML = (get_current_time() + "User update: " + msg.data + "\n\n") + document.getElementById("result").innerHTML; }); document.getElementById("send-message").addEventListener("click", function(){ let input_text = document.getElementById("message-text").value; if (input_text != ""){ channel.publish("update", input_text); document.getElementById("message-text").value = "" } }) </script>
Мы тут:
- Включите библиотеку Ably
- Подключитесь к Ably (не забудьте заменить ключом API)
- Подпишитесь на my_channel и если есть обновление, добавьте его в текст
- Когда пользователь вводит обновление и нажимает кнопку, оно публикуется в my_channel.
Теперь попробуйте наше приложение. Поместите что-нибудь в поле ввода и нажмите кнопку.
Вы можете увидеть, как появилось обновление, вы также можете провести эксперимент для нескольких пользователей. Откройте html-файлы в другом окне или на другой вкладке и повторите публикацию обновления. Вы можете видеть, что «другой пользователь» также получит обновление.
Я также хотел бы отметить, что использование ключа API, подобного тому, что мы сделали, не является хорошей практикой в производственном коде, поскольку это сделает ваш ключ доступным для общественности. Чтобы понять, как это сделать правильно, обратитесь к документации Ably.
Информация о tfL - Ably Hub
Теперь мы будем добавлять обновления TfL. Умело Hub, который обеспечивает бесплатную потоковую передачу данных с открытым исходным кодом для любого использования (различие лицензионных ограничений может применяться к разным источникам данных). Если у вас есть источник для пожертвования, свяжитесь с командой Ably.
Использование Ably Hub очень похоже на использование Ably Realtime, вы также можете обратиться к этой странице для документации, относящейся к данным TfL. Добавление нового канала:
var tfl_channel = realtime.channels.get("[product:ably-tfl/tube]tube:disruptions");
Это сообщит нам, когда у нас будут перебои на каких-либо линиях. Если нет, мы получим пустой список. Затем мы можем проверить наше обновление, чтобы увидеть, содержит ли оно информацию о поврежденных строках:
// Getting the update form TfL streamer
tfl_channel.subscribe(function(msg) {
if (msg.data.length == 0) {
document.getElementById("result").innerHTML = (get_current_time() + "TfL: Good service on all lines." + "\n\n") + document.getElementById("result").innerHTML;
}else{
msg.data.forEach(function(each_issue){
document.getElementById("result").innerHTML = (get_current_time() + each_issue.description + "\n\n") + document.getElementById("result").innerHTML;
})
}
});
Детектор токсичных веществ - Tensorflow.js
Пока все пользователи могут обновляться, что бы они ни говорили, что плохо. Можем ли мы запретить людям публиковать опасные новости на нашем канале? Давайте попробуем использовать ИИ, чтобы обнаружить токсичные комментарии и заблокировать их. Здесь мы будем использовать предварительно обученную модель, и это очень просто, просто добавьте Tensorflow.js и модель:
<!-- Include tf model --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/toxicity"></script>
И обновите функцию публикации:
// When the user send an update, check if it is a toxic comment, publish if it is not.
document.getElementById("send-message").addEventListener("click", function(){
let input_text = document.getElementById("message-text").value;
let threshold = 0.9;
var all_prediction = false;
if (input_text != ""){
toxicity.load(threshold).then(function(model){
model.classify(input_text).then(function(predictions){
predictions.forEach(function(each_prediction){
let results = each_prediction.results
if (results[0].match){
all_prediction = true;
return 0;
}
});
if (all_prediction){
alert("Please be nice.")
}else{
channel.publish("update", input_text);
document.getElementById("message-text").value = ""
}
});
});
}
})
Здесь мы устанавливаем порог 0,9, поэтому, если наша модель очень уверена в том, что она содержит токсичный текст в любой форме, она предотвратит публикацию, вместо этого она будет напоминать пользователю, чтобы он был вежливым.
Попробовав, вы увидите, что скорость нашего сообщения значительно снизилась. Ably - это быстрый API, поскольку он использует WebSocket и обновление практически мгновенно. Однако создание прогнозов с помощью модели ИИ занимает немного времени и не является идеальным с точки зрения производительности. Может быть, не стоит делать все на фронтенде!
Я надеюсь, тебе было весело! Чтобы увидеть готовый html файл целиком, обратитесь к файлу на GitHub.
