Gradio-Lite Безсерверный Gradio, работающий полностью в вашем браузере
Gradio-Lite Безсерверный Градио, работающий напрямую в вашем браузере
Gradio – это популярная библиотека Python для создания интерактивных приложений машинного обучения. Традиционно приложения Gradio требуют серверной инфраструктуры для работы, что может вызвать затруднения у разработчиков, нуждающихся в размещении своих приложений.
Вот где на сцену выходит Gradio-lite (@gradio/lite): библиотека, которая использует Pyodide для запуска Gradio прямо в вашем браузере. В этой статье мы рассмотрим, что такое @gradio/lite, приведем пример кода и обсудим преимущества его использования для запуска приложений Gradio.
Что такое @gradio/lite?
@gradio/lite – это JavaScript-библиотека, которая позволяет запускать приложения Gradio непосредственно в вашем веб-браузере. Она достигает этого, используя Pyodide, рантайм Python для WebAssembly, позволяющий выполнять код на Python в среде браузера. С @gradio/lite вы можете писать обычный код на Python для ваших приложений Gradio, которые будут бесшовно работать в браузере без необходимости серверной инфраструктуры.
Начало работы
Давайте создадим приложение Gradio “Hello World” в @gradio/lite
- Приходите в игру транслируйте «Counter-Strike 2» из облака для самых высоких кадровых частот
- Топ компаний в Индии, на которые стоит обратить внимание при поиске работы
- Adobe ведет будущее дизайна с помощью новых генеративных моделей искусственного интеллекта
1. Импортировать JS и CSS
Начните с создания нового HTML-файла, если у вас его еще нет. Импортируйте JavaScript и CSS, соответствующие пакету @gradio/lite, используя следующий код:
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head></html>Обратите внимание, что вы обычно должны использовать последнюю доступную версию @gradio/lite. Доступные версии можно увидеть здесь.
2. Создайте теги <gradio-lite>
Где-то в теле вашей HTML-страницы (где вы хотите, чтобы Gradio-приложение отображалось), создайте открывающие и закрывающие теги <gradio-lite>.
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> </gradio-lite> </body></html>Примечание: вы можете добавить атрибут theme к тегу <gradio-lite>, чтобы принудительно установить тему на темную или светлую (по умолчанию она следует системной теме). Например:
<gradio-lite theme="dark">...</gradio-lite>3. Напишите ваше Gradio-приложение внутри тегов
Теперь напишите ваше Gradio-приложение, как обычно, на Python! Имейте в виду, что, так как это Python, пробелы и отступы важны.
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> import gradio as gr def greet(name): return "Hello, " + name + "!" gr.Interface(greet, "textbox", "textbox").launch() </gradio-lite> </body></html>Вот и все! Теперь вы должны иметь возможность открыть свою HTML-страницу в браузере и увидеть отрисованное приложение Gradio! Обратите внимание, что при первом запуске приложения Gradio может потребоваться некоторое время для загрузки, так как Pyodide может занимать некоторое время для установки в вашем браузере.
Примечание о отладке: чтобы увидеть ошибки в вашем Gradio-lite приложении, откройте инспектор веб-браузера. Все ошибки (включая ошибки Python) будут выведены там.
Еще примеры: добавление дополнительных файлов и требований
Что, если вы хотите создать Gradio-приложение, которое занимает несколько файлов? Или которое имеет дополнительные требования к Python? Все это возможно с помощью @gradio/lite!
Несколько файлов
Добавление нескольких файлов в рамках приложения @gradio/lite очень просто: используйте тег <gradio-file>. Вы можете иметь столько тегов <gradio-file>, сколько вам нужно, но каждый из них должен иметь атрибут name, а точка входа в ваше Gradio-приложение должна иметь атрибут entrypoint.
Вот пример:
<gradio-lite><gradio-file name="app.py" entrypoint>import gradio as grfrom utils import adddemo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")demo.launch()</gradio-file><gradio-file name="utils.py" >def add(a, b): return a + b</gradio-file></gradio-lite>Дополнительные требования
Если ваше Gradio-приложение имеет дополнительные требования, есть возможность установить их в браузер с помощью micropip. Мы создали оболочку, чтобы это было особенно удобно: просто перечислите ваши требования в том же синтаксисе, что и requirements.txt, и заключите их в теги <gradio-requirements>.
Вот здесь мы устанавливаем transformers_js_py, чтобы запустить модель классификации текста непосредственно в браузере!
<gradio-lite><gradio-requirements>transformers_js_py</gradio-requirements><gradio-file name="app.py" entrypoint>from transformers_js import import_transformers_jsimport gradio as grtransformers = await import_transformers_js()pipeline = transformers.pipelinepipe = await pipeline('sentiment-analysis')async def classify(text): return await pipe(text)demo = gr.Interface(classify, "textbox", "json")demo.launch()</gradio-file></gradio-lite>Попробуйте сами: Вы можете увидеть этот пример, запустив его в этом статическом пространстве Hugging Face, которое позволяет бесплатно размещать статические (без сервера) веб-приложения. Посетите страницу и вы сможете запустить модель машинного обучения без доступа к интернету!
Преимущества использования @gradio/lite
1. Безсерверное развертывание
Основное преимущество @gradio/lite в том, что оно устраняет необходимость в серверной инфраструктуре. Это упрощает развертывание, снижает затраты на сервер и упрощает обмен вашими Gradio-приложениями с другими.
2. Низкая задержка
Запуск @gradio/lite в браузере обеспечивает взаимодействие с низкой задержкой для пользователей. Нет необходимости передавать данные на сервер и обратно, что приводит к более быстрым ответам и более гладкому пользовательскому опыту.
3. Конфиденциальность и безопасность
Поскольку вся обработка происходит в браузере пользователя, @gradio/lite повышает конфиденциальность и безопасность. Данные пользователя остаются на его устройстве, обеспечивая безопасность обработки данных.
Ограничения
-
В настоящее время наибольшим ограничением при использовании
@gradio/liteявляется то, что ваши Gradio-приложения обычно требуют больше времени (обычно 5-15 секунд) на первоначальную загрузку в браузере. Это связано с тем, что браузеру нужно загрузить среду выполнения Pyodide перед отображением кода Python. -
Не все пакеты Python поддерживаются Pyodide. Хотя
gradioи многие другие популярные пакеты (включаяnumpy,scikit-learnиtransformers-js) могут быть установлены в Pyodide, если у вашего приложения много зависимостей, стоит убедиться, включены ли зависимости в Pyodide, или их можно установить с помощьюmicropip.
Попробуйте сами!
Вы можете немедленно попробовать @gradio/lite, скопировав и вставив этот код в локальный файл index.html и открыв его в браузере:
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> import gradio as gr def greet(name): return "Привет, " + name + "!" gr.Interface(greet, "textbox", "textbox").launch() </gradio-lite> </body></html>Мы также создали игровую площадку на веб-сайте Gradio, которая позволяет вам взаимодействовать с кодом и немедленно видеть результаты!
Игровая площадка: https://www.gradio.app/playground
