Реализация эффектов столбцов и страниц в Gradio (2)
Реализация эффектов столбцов и страниц в Gradio (2)

продолжать【Важные функции Gradio и несколько примеров кода для изучения (1)


1 fastapi+gradioсовместное использование:mount_gradio_app

1.1 mount_gradio_appДва модуля на одной странице

Реализация эффекта Пагинация,в основном полагаться наmount_gradio_app,вдохновленный:Support multiple pages in a gradio app

Язык кода:javascript
копировать
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
import gradio as gr

app = FastAPI()

HELLO_ROUTE = "/hello"
GOODBYE_ROUTE = "/goodbye"
iframe_dimensions = "height=300px width=1000px"

index_html = f'''
<h1>Put header here</h1>

<h3>
You can mount multiple gradio apps on a single FastAPI object for a multi-page app.
However if you mount a gradio app downstream of another gradio app, the downstream
apps will be stuck loading. 
</h3>

<h3>
So in particular if you mount a gradio app at the index route "/", then all your 
other mounted gradio apps will be stuck loading. But don't worry, you can still embed
your downstream gradio apps into the index route using iframes like I do here. In fact,
you probably want to do this anyway since its your index page, which you want to detail 
more fully with a jinja template. 
For a full example, you can see my <a href=https://yfu.one/>generative avatar webapp</a>
</h3>

<div>
<iframe src={HELLO_ROUTE} {iframe_dimensions}></iframe>
</div>

<div>
<iframe src={GOODBYE_ROUTE} {iframe_dimensions}></iframe>
</div>

'''

@app.get("/", response_class=HTMLResponse)
def index():
    return index_html


hello_app = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
goodbye_app = gr.Interface(lambda x: "Goodbye, " + x + "!", "textbox", "textbox")


app = gr.mount_gradio_app(app, hello_app, path=HELLO_ROUTE)
app = gr.mount_gradio_app(app, goodbye_app, path=GOODBYE_ROUTE)

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app)

Прошло в это времяmount_gradio_appсуществоватьfastapiРазвертывание двух модулей одновременно,Давайте посмотрим на пример:

1.2 mount_gradio_appДве страницы и два модуля

вдохновленный:230902-Развертывание Gradio на существующем FastAPI и сервере.

Язык кода:javascript
копировать
import gradio as gr


def greet(text: str) -> str:
    return text


demo1 = gr.Interface(
    fn=greet,
    inputs=gr.components.Textbox(label='Input-1'),
    outputs=gr.components.Textbox(label='Output-1'),
    allow_flagging='never'
)

demo2 = gr.Interface(
    fn=greet,
    inputs=gr.components.Textbox(label='Input-2'),
    outputs=gr.components.Textbox(label='Output-2'),
    allow_flagging='never'
)



from fastapi import FastAPI
import gradio as gr



app = FastAPI()

@app.get('/')
async def root():
    return 'Gradio app is running at /gradio', 200

app = gr.mount_gradio_app(app, demo1, path='/gradio1')
app = gr.mount_gradio_app(app, demo2, path='/gradio2')

import uvicorn
uvicorn.run(app)

Здесь определены два модуля градиента.,demo1иdemo2,проходитьmount_gradio_app,сопоставлен с двумя подпутями,gradio1иgradio2 Итак, здесь,нуждатьсяпроходитьhttp://127.0.0.1:8000/gradio2/иhttp://127.0.0.1:8000/gradio1/ Достигните двух страниц:


2 Компонент TabbedInterface для макета вкладок

Официальный учебник:tabbedinterface

вдохновленный:Введение в использование градиента и Элегантное сочетание, эффективное взаимодействие: Gradio Combining Анализ модулей интерфейсов TabbedInterface можно создать, предоставив список интерфейсов, каждый из которых будет отображаться на отдельной вкладке. Если хотите, вы можете дать каждой вкладке имя или использовать имя по умолчанию «Вкладка». 1"、"Tab 2» и другие названия. Состав нескольких параметров:

2.1 Параллельность: случай параллельного сравнения

Параллельность позволяет нескольким интерфейсам параллельно сравнивать свои выходные данные. Чтобы разместить интерфейсы в параллельном режиме, они должны использовать одни и те же входные компоненты, но могут иметь разные выходные компоненты.

Язык кода:javascript
копировать
import gradio as gr

greeter_1 = gr.Interface(lambda name: f"Hello {name}!", inputs="textbox", outputs=gr.Textbox(label="Greeter 1"))
greeter_2 = gr.Interface(lambda name: f"Greetings {name}!", inputs="textbox", outputs=gr.Textbox(label="Greeter 2"))
demo = gr.Parallel(greeter_1, greeter_2)

if __name__ == "__main__":
    demo.launch()

Вы можете видеть один вход и два выхода

2.2 Серия: последовательное соединение

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

Пример использования:

Язык кода:javascript
копировать
import gradio as gr

get_name = gr.Interface(lambda name: name, inputs="textbox", outputs="textbox")
prepend_hello = gr.Interface(lambda name: f"Hello {name}!", inputs="textbox", outputs="textbox")
append_nice = gr.Interface(lambda greeting: f"{greeting} Nice to meet you!",
                           inputs="textbox", outputs=gr.Textbox(label="Greeting"))
demo = gr.Series(get_name, prepend_hello, append_nice)

if __name__ == "__main__":
    demo.launch()

Два компонента могут быть связаны

2.3 третийTabbedInterfaceслучай:

Язык кода:javascript
копировать
import gradio as gr
css = """
#warning {background-color: #FFCCCB}
.feedback textarea {font-size: 24px !important}
"""
 
with gr.Blocks(css=css) as demo1:
    with gr.Row():
        with gr.Column(scale=1):
            gr.Textbox(label="name", elem_id="warning")
            gr.Textbox(label="age", elem_classes="feedback")
        with gr.Column(scale=2):
            gr.Dropdown(["one", "two", "tree"], label="class")
            gr.CheckboxGroup(["male", "female"], label="sex")
        with gr.Column(scale=1):
            gr.Radio(["is_girl"], label="is_girl")
            gr.Slider(1, 100, 20)
    with gr.Row():
        gr.Button(value="Submit")
        gr.Button(value="Clear")


with gr.Blocks(css=css) as demo2:
    with gr.Row():
        with gr.Column(scale=1):
            gr.Textbox(label="name", elem_id="warning")
            gr.Textbox(label="age", elem_classes="feedback")
        with gr.Column(scale=2):
            gr.Dropdown(["one", "two", "tree"], label="class")
            gr.CheckboxGroup(["male", "female"], label="sex")
        with gr.Column(scale=1):
            gr.Radio(["is_girl"], label="is_girl")
            gr.Slider(1, 100, 20)
    with gr.Row():
        gr.Button(value="Submit")
        gr.Button(value="Clear")


app = gr.TabbedInterface([demo1, demo2], ["First", "Second"])
app.launch()

Если одновременный трафик приложения велик, Gradio также предоставляет механизм обработки очереди. Количество одновременных обработок можно указать, например, в demo.queue().

Язык кода:javascript
копировать
with gr.Blocks() as demo:
    #...
demo.queue(concurrency_count=3)
demo.launch()

Конечный эффект:

Вы можете видеть, что вверху есть две опции для выбора различных компонентов управления.

3 не проверено

Реализация эффекта Пагинация,в основном полагаться наmount_gradio_app,вдохновленный:Support multiple pages in a gradio app

Язык кода:javascript
копировать
import gradio as gr

gr.Blocks():
  gr.Page("My amazing page", route="/"):
    gr.Markdown("# My amazing page")
    gr.Textbox("Page one")
  gr.Page("My second amazing page", route="/page-two"):
    gr.Markdown("# My second amazing page")
    gr.Textbox("Page two")
boy illustration
Псевдостатическая конфигурация ThinkPHP
boy illustration
Код изображения для загрузки апплета WeChat: последний доступный (код серверной части + код внешнего интерфейса)
boy illustration
Используйте растровое изображение Redis для реализации эффективной функции статистики регистрации пользователей.
boy illustration
[Nginx29] Обучение Nginx: буфер прокси-модуля (3) и обработка файлов cookie
boy illustration
[Весна] SpringBoot интегрирует ShardingSphere и реализует многопоточную вставку 10 000 фрагментов данных в пакетном режиме (выполнение операций с базой данных и таблицами).
boy illustration
SpringBoot обрабатывает форму данных формы для получения массива объектов
boy illustration
Nginx от новичка до новичка 01 - Установка Nginx через установку исходного кода
boy illustration
Проект flask развертывается на облачном сервере и получает доступ к серверной службе через доменное имя.
boy illustration
Порт запуска проекта Spring Boot часто занят, полное решение
boy illustration
Java вызывает стороннюю платформу для отправки мобильных текстовых сообщений
boy illustration
Практическое руководство по серверной части: как использовать Node.js для разработки интерфейса RESTful API (Node.js + Express + Sequelize + MySQL)
boy illustration
Введение в параметры конфигурации большого экрана мониторинга Grafana (2)
boy illustration
В статье «Научно-популярная статья» подробно объясняется протокол NTP: анализ точной синхронизации времени.
boy illustration
Пример разработки: серверная часть Java и интерфейсная часть vue реализуют функции комментариев и ответов.
boy illustration
Nodejs реализует сжатие и распаковку файлов/каталогов.
boy illustration
SpringBootИнтегрироватьEasyExcelСложно реализоватьExcelлистимпортировать&Функция экспорта
boy illustration
Настройка среды под Mac (используйте Brew для установки go и protoc)
boy illustration
Навыки разрешения конфликтов в Git
boy illustration
Распределенная система журналов: развертывание Plumelog и доступ к системе
boy illustration
Артефакт, который делает код элегантным и лаконичным: программирование на Java8 Stream
boy illustration
Spring Boot(06): Spring Boot в сочетании с MySQL создает минималистскую и эффективную систему управления данными.
boy illustration
Как использовать ArrayPool
boy illustration
Интегрируйте iText в Spring Boot для реализации замены контента на основе шаблонов PDF.
boy illustration
Redis реализует очередь задержки на основе zset
boy illustration
Получить текущий пакет jar. path_java получает файл jar.
boy illustration
Краткое обсуждение высокопроизводительного шлюза Apache ShenYu
boy illustration
Если вы этого не понимаете, то на собеседовании даже не осмелитесь сказать, что знакомы с Redis.
boy illustration
elasticsearch медленный запрос, устранение неполадок записи, запрос с подстановочными знаками
boy illustration
По какому стандарту взимается плата за обслуживание программного обеспечения?
boy illustration
IP-адрес Получить