Гайд · TNWS AI
Как показать код рядом с ответом AI в Gradio через additional_outputs
Возвращаем текст и gr.Code как два выхода чат-функции; проверяем отсутствие кода при запросе вне сценария.
Задача и применимость
Русскоязычный вопрос: «как вывести код отдельным блоком рядом с ответом gradio chatbot». Для ChatInterface внутри Blocks, где дополнительный компонент уже создан в том же контексте. Документация ChatInterface проверена 20 сентября 2026 года. Демонстрация выдаёт фиксированный код без вызова генеративной модели, чтобы показать контракт вывода и не представлять непроверенную генерацию как исполняемый скрипт.
Что подтверждено производителем
ChatInterface поддерживает additional_outputs — компонент или список компонентов, определённых в том же Blocks. Если параметр указан, fn возвращает также значения для дополнительных компонентов. Официальный пример показывает gr.Code рядом с ответом ChatInterface; для разных веток функция должна возвращать согласованное количество выходов.
Порядок действий
- Создайте gr.Code(render=False) внутри Blocks и расположите его отдельной колонкой.
- Передайте компонент в additional_outputs ChatInterface.
- Возвращайте пару: текстовое сообщение и строку кода.
- В ветке без кода возвращайте None для дополнительного выхода.
- Проверьте обе ветки, затем подключайте LLM с отдельной проверкой безопасности сгенерированного текста.
Готовый шаблон
Сохраните пример в отдельном файле Python. В коде нет реального секрета или скрытого вызова модели: если подключён внешний API, его адрес и параметры указаны явно. Установите gradio в отдельном окружении; дополнительные пакеты требуются только там, где они импортированы в примере.
import gradio as gr
def respond(message, history):
if "python" in message.lower():
code = "def double(x: int) -> int:\n return x * 2"
return "Проверяемая функция удваивания числа.", code
return "Попросите пример на Python.", None
with gr.Blocks() as demo:
code_view = gr.Code(language="python", render=False)
with gr.Row():
with gr.Column():
gr.ChatInterface(respond, additional_outputs=[code_view])
with gr.Column():
code_view.render()
demo.launch(server_name="127.0.0.1")
Вход и ожидаемый результат
Вход «Покажи Python» даёт короткое текстовое пояснение и функцию double(3) == 6 в панели кода. Вход «Расскажи про ввод» должен убрать прежний код через None, не оставляя устаревший скрипт рядом с новым ответом. Это важнее оформления: иначе пользователь может скопировать код от другого вопроса.
Проверка контракта
Если код создаёт LLM, его отображение в gr.Code не равно безопасности выполнения. Никогда не выполняйте текст модели автоматически на сервере или в браузере. Для продуктовой функции добавьте синтаксический анализ, статические проверки, лимит размера, человеческое одобрение и изолированное тестирование только там, где это действительно нужно. Даже валидный Python может удалять файлы или отправлять данные наружу. Данная статья показывает лишь разделение текста и артефакта интерфейса.
Работа с данными пользователя
Количество возвращаемых элементов — часть контракта. Когда указан один additional_output, обработчик возвращает два значения; одиночная строка не обновит панель ожидаемым образом. Для веток отказа, исключения или пустого ответа спроектируйте одинаковую структуру. Тестируйте смену запроса после уже отображённого кода: наличие старого артефакта при новом сообщении опаснее пустой панели.
Что проверить перед развёртыванием
Добавьте контрольные данные: описание функции, вход 3 и ожидаемый результат 6. Затем проверьте AST Python и отдельный запускаемый тест без внешнего доступа, если ваша среда это позволяет. При подключении модели не доверяйте форматированию Markdown с кодовыми ограждениями; извлекайте код структурированным форматом или отделяйте его в ответе сервиса. Публичный интерфейс должен различать предложение модели и официально утверждённый фрагмент приложения.
Готовый промпт будущей модели: «Составь чистую функцию Python double(x: int) -> int, которая возвращает x*2. Не импортируй модули, не выполняй код и не делай сетевых запросов. Отдельно сформулируй один тест double(3)==6». Это инструкция модели, не доказательство соблюдения ограничений. Если задача пользователя не про код, возвращайте None в gr.Code и текстовую просьбу уточнить запрос.
В интерфейсе для команды разработки удобно добавить метку «Черновик AI, требует проверки» рядом с кодом. Если второй выход — ссылка на файл, следите за правами скачивания и сроком жизни артефакта; нельзя случайно выдать чужую сборку. Отдельно протестируйте экранирование и показ строк с кириллицей. Даже если функция double проходит один тест, на реальном генераторе требуются случаи для отрицательных, дробных и очень больших входов.
Критерии приёмки
- Ветка Python возвращает две согласованные части.
- Следующий нерелевантный вопрос сбрасывает код.
- Код не запускается без отдельного разрешённого контура.
Типичные ошибки и чего не делать
- Не выполнять сгенерированный код автоматически.
- Не оставлять старый скрипт при новом ответе.
- Не возвращать один элемент при объявленных двух выходах.
FAQ
Зачем render=False?
Компонент можно сначала определить, а отобразить в выбранной колонке.
Сколько значений вернуть?
Ответ чата плюс одно значение на каждый дополнительный output.
Является ли gr.Code песочницей?
Нет, это компонент отображения/редактирования.
Официальные источники
Частые вопросы
Зачем render=False?
Компонент можно сначала определить, а отобразить в выбранной колонке.
Сколько значений вернуть?
Ответ чата плюс одно значение на каждый дополнительный output.
Является ли gr.Code песочницей?
Нет, это компонент отображения/редактирования.
Читайте также
Как добавить ползунок temperature к AI-чату через additional_inputs в Gradio
Связываем Slider и функцию чат-бота без ошибки порядка аргументов; проверяем значение до вызова нейросети.
Как добавить примеры вопросов в Gradio, не вызывая нейросеть по клику
Настраиваем examples и run_examples_on_click=False, чтобы пользователь отредактировал вопрос перед дорогим вызовом модели.
Как группировать запросы к ML-модели через batch=True в Gradio Interface
Сверяем сигнатуру пакетной функции, tuple of lists и max_batch_size на детерминированном тесте.
Комментарии
Пока тихо. Скажите первое слово