Это руководство по созданию расширения Chrome, использующего бессерверную архитектуру. В частности, мы будем использовать облачные функции Google в серверной части нашего расширения Chrome, чтобы творить за нас причудливую магию Python.
Мы создадим расширение SummarLight для Chrome:
Расширение SummarLight берет текст текущей веб-страницы, на которой вы находитесь (предположительно, классный блог на таком носителе, как мой), и выделяет наиболее важные части этой страницы / статьи.
Для этого мы настроим пользовательский интерфейс (в данном случае кнопку), который будет отправлять текст на нашей текущей веб-странице в наш Back-End. «Back-end» в этом случае будет функцией Google Cloud, которая проанализирует этот текст и вернет его извлекающее резюме (наиболее важные предложения этого текста).
Архитектура
Как видим, архитектура очень простая и гибкая. Вы можете настроить простой пользовательский интерфейс, например приложение или, в данном случае, расширение Chrome, и передать любую сложную работу своим бессерверным функциям. Вы можете легко изменить свою логику в функции и повторно развернуть ее, чтобы попробовать альтернативные методы. И, наконец, вы можете масштабировать его для любого количества вызовов API.
Это статья не о преимуществах бессерверного сервера, поэтому я не буду вдаваться в подробности о преимуществах его использования по сравнению с традиционными серверами. Но обычно бессерверное решение может быть намного дешевле и масштабируемым (но не всегда… зависит от вашего варианта использования).
Расширение Chrome
Вот хорошее руководство по настройке расширения Chrome:
А весь код для SummarLight Extension можно найти здесь:
В файле main.py в корневом каталоге мы определяем нашу облачную функцию Google. В папке extension_bundle есть все файлы, которые используются для создания расширения Chrome.
Облачная функция Google
Я выбрал Google вместо AWS Lamba, потому что у меня было несколько бесплатных кредитов (спасибо Google!), Но вы также можете легко сделать это с помощью AWS. Для меня было огромным плюсом, что они только что выпустили Google Cloud Functions для Python, поскольку я обрабатываю большую часть своих данных на этом прекрасном языке.
Вы можете узнать больше о развертывании Google Cloud Functions здесь:
Я настоятельно рекомендую использовать gcloud sdk и начать с примера hello_world. Вы можете отредактировать функцию в файле main.py, который они предоставляют, для ваших нужд. Вот моя функция:
import sys
from flask import escape
from gensim.summarization import summarize
import requests
import json
def read_article(file_json):
article = ''
filedata = json.dumps(file_json)
if len(filedata) < 100000:
article = filedata
return article
def generate_summary(request):
request_json = request.get_json(silent=True)
sentences = read_article(request_json)
summary = summarize(sentences, ratio=0.3)
summary_list = summary.split('.')
for i, v in enumerate(summary_list):
summary_list[i] = v.strip() + '.'
summary_list.remove('.')
return json.dumps(summary_list)
Довольно прямолинейно. Я получаю текст через функцию read_article (), а затем, используя замечательную библиотеку Gensim, возвращаю краткое изложение этого текста. Функция Gensim Summary работает, ранжируя все предложения в порядке важности. В этом случае я решил вернуть 30% самых важных предложений. Это выделит верхнюю треть статьи / блога.
Альтернативные подходы: Я пробовал разные методы для суммирования, включая использование встраиваемых слов в перчатках, но результаты были не намного лучше по сравнению с Gensim (особенно с учетом увеличения вычислительных ресурсов / времени обработки из-за загрузки в этих массивных вложениях). Однако здесь есть еще много возможностей для улучшения. Это активная область исследований, и в настоящее время разрабатываются более совершенные подходы к реферированию текста:
Как только мы освоимся с функцией, мы можем развернуть ее, и она будет доступна в конечной точке HTTP, которую мы можем вызвать из нашего приложения / расширения.
Набор расширений
Теперь о Front-End. Для начала нам понадобится файл popup.html. Это будет иметь дело с пользовательским интерфейсом. Он создаст меню с кнопкой.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>
<a><button id="clickme" class="dropbtn">Highlight Summary</button></a>
<script type="text/javascript" src="popup.js" charset="utf-8"></script>
</li>
</ul>
</body>
</html>
Как мы видим, кнопка «Highlight Summary» имеет событие onClick, которое запускает файл popup.js. Это, в свою очередь, вызовет функцию суммирования:
function summarize() {
chrome.tabs.executeScript(null, { file: "jquery-2.2.js" }, function() {
chrome.tabs.executeScript(null, { file: "content.js" });
});
}
document.getElementById('clickme').addEventListener('click', summarize);
Функция summarize вызывает сценарий content.js (да, да, я знаю, что мы могли бы избежать этого дополнительного шага…).
alert("Generating summary highlights. This may take up to 30 seconds depending on length of article.");
function unicodeToChar(text) {
return text.replace(/\\u[\dA-F]{4}/gi,
function (match) {
return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
});
}
// capture all text
var textToSend = document.body.innerText;
// summarize and send back
const api_url = 'YOUR_GOOGLE_CLOUD_FUNCTION_URL';
fetch(api_url, {
method: 'POST',
body: JSON.stringify(textToSend),
headers:{
'Content-Type': 'application/json'
} })
.then(data => { return data.json() })
.then(res => {
$.each(res, function( index, value ) {
value = unicodeToChar(value).replace(/\\n/g, '');
document.body.innerHTML = document.body.innerHTML.split(value).join('<span style="background-color: #fff799;">' + value + '</span>');
});
})
.catch(error => console.error('Error:', error));
Здесь мы анализируем html страницы, на которой мы сейчас находимся (document.body.innerText), и после некоторой предварительной обработки с помощью функции unicodeToChar отправляем его в нашу облачную функцию Google через Fetch API. Для этого вы можете добавить свой собственный URL-адрес конечной точки HTTP в переменную api_url.
Опять же, используя Fetch, мы возвращаем Promise, который представляет собой сводку, сгенерированную нашей бессерверной функцией. Как только мы решим эту проблему, мы сможем проанализировать цикл через HTML-содержимое нашей страницы и выделить предложения из нашего резюме.
Поскольку - для выполнения всей этой обработки может потребоваться некоторое время, мы добавляем предупреждение в верхней части страницы, которое будет указывать на это («Создание основных моментов. Это может занять до 30 секунд в зависимости от длины статьи). .
Наконец, нам нужно создать файл manifest.json, который необходим для публикации расширения:
{
"manifest_version": 2,
"name": "SummarLight",
"version": "0.7.5",
"permissions": ["activeTab", "YOUR_GOOGLE_CLOUD_FUNCTION_URL"],
"description": "Highlights the most important parts of posts/stories/articles!",
"icons": {"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"browser_action": {
"default_icon": "tab-icon.png",
"default_title": "Highlight the important stuff",
"default_popup": "popup.html"
}
}
Обратите внимание на вкладку разрешений. Мы должны добавить здесь URL-адрес нашей облачной функции Google, чтобы убедиться, что мы не получаем ошибку CORS при вызове нашей функции через Fetch API. Мы также заполняем детали, такие как имя / описание и значки, которые будут отображаться для нашего расширения Chrome в Google Store.
Вот и все! Мы создали расширение Chrome, которое использует бессерверную магистраль, известную как Google Cloud Function. Конечный эффект выглядит примерно так:
Это простой, но эффективный способ создания действительно интересных приложений и расширений. Подумайте о том, что вы сделали на Python. Теперь вы можете просто подключить свои скрипты к кнопке в расширении / приложении и сделать из этого хороший продукт. И все это, не беспокоясь о серверах или конфигурациях.
Вот репо на Github: https://github.com/btahir/summarlight
И вы можете использовать расширение самостоятельно. Он доступен в Google Store здесь:
Поделитесь своими идеями о расширениях (или приложениях), использующих функции Google Cloud, в комментариях. :)
Ваше здоровье.
