使用 NiceGUI 与 Replicate 构建 AI 接口Whisper 语音转写与 Stable Diffusion 文生图实战【免费下载链接】niceguiCreate web-based user interfaces with Python. The nice way.项目地址: https://gitcode.com/GitHub_Trending/ni/nicegui本指南以仓库中的 AI 接口示例 为骨架完整讲解如何用 NiceGUI 构建一个双栏 AI Web 界面左侧基于 OpenAI Whisper 模型实现音频上传与语音转写右侧基于 Stable Diffusion 模型实现输入提示词生成图片。通过本指南你将掌握 Replicate 云端模型调用、NiceGUI 文件上传事件处理、异步 I/O 任务调度run.io_bound以及界面布局组合的完整实战方案。示例概览一个文件串联两个 AI 模型仓库中的示例由两个文件构成结构极为精简文件作用examples/ai_interface/main.py完整的应用代码界面布局 两个 AI 调用逻辑examples/ai_interface/requirements.txt依赖清单nicegui3.0与replicate0.25示例的核心思路是UI 全部由 NiceGUI 构建AI 模型则通过 Replicate 的云端 API 调用。Replicate 提供拿来即用的模型托管服务只需传入模型标识owner/name:version与输入参数即可同步或异步获取推理结果无需本地部署任何深度学习模型。这正是 README 中所强调的 very nice API to run AI models 的落地方式。应用在页面中并排渲染两块独立面板OpenAI Whisper语音转写文件上传后自动触发转写结果实时写入页面标签Stable Diffusion图片生成输入提示词并点击按钮或按回车生成的图片以网格形式展示在页面中。环境准备安装依赖与配置 API Token依赖安装requirements.txt声明了两个运行必需的包安装命令如下pip install nicegui3.0 replicate0.25nicegui本仓库的核心框架用于构建所有 Web 组件与事件系统本示例要求 3.0 及以上版本replicateReplicate 的官方 Python 客户端提供replicate.run()等高层 API。配置 API Token调用 Replicate 服务必须先取得访问令牌。示例代码在模块顶部通过环境变量注入 Tokenos.environ[REPLICATE_API_TOKEN] ... # TODO: set your Replicate API token herefrom nicegui import events, run, ui实际操作中建议将真实 Token 设置为系统环境变量或通过配置文件注入避免硬编码泄露示例中的...占位符需要替换为你在 Replicate 平台申请的 Token。语音转写用 Whisper 处理上传的音频上传组件与事件回调Whisper 面板的构建代码非常简洁with ui.column().classes(w-100 items-stretch): ui.label(OpenAI Whisper (voice transcription)).classes(text-2xl) ui.upload(on_uploadtranscribe_audio, auto_uploadTrue) transcription ui.label().classes(text-xl)ui.upload是 NiceGUI 基于 QuasarQUploader封装的文件上传组件。从 上传组件源码 可以看到它支持丰富的参数示例中用到的两个关键参数说明如下参数默认值作用on_uploadNone每个文件上传完成后触发回调收到UploadEventArguments事件对象auto_uploadFalse设为True时文件被选中后立即自动上传无需额外点击上传按钮除on_upload外组件还提供on_begin_upload上传开始、on_multi_upload全部文件上传完成、on_rejected文件被拒绝等事件另可通过multiple、max_file_size、max_total_size、max_files等参数控制多文件与大小限制。从事件定义源码 nicegui/events.py 可以看到UploadEventArguments携带一个file: FileUpload字段回调内通过e.file.read()读取文件二进制内容。转写逻辑异步 I/O 调度async def transcribe_audio(e: events.UploadEventArguments): transcription.text Transcribing... output await run.io_bound( replicate.run, openai/whisper:8099696689d249cf8b122d833c36ac3f75505c666a395ca40ef26f68e7d3d16e, input{audio: io.BytesIO(await e.file.read())}, ) transcription.text output.get(transcription, Transcription failed.)这段代码演示了三个重要实践即时状态反馈上传事件触发后先将标签文本置为Transcribing...让用户感知任务已开始模型调用放在run.io_bound中执行replicate.run是一次网络请求属于 I/O 密集型操作。run.io_bound会将其调度到独立的线程池中执行避免阻塞 NiceGUI 的事件循环。从 run.py 源码 可以看到其底层实现是通过asyncio.get_running_loop().run_in_executor(thread_pool, ...)把同步函数交给线程池从而让async def处理器既能await同步库调用又不卡住 UI异步读取上传文件await e.file.read()读取上传的音频二进制再包装为io.BytesIO作为 Whisper 模型的audio输入参数。replicate.run的模型标识串是完整格式模型作者/模型名:版本哈希该版本哈希锁定了 Whisper 的具体 checkpoint保证调用结果的确定性。返回的output是字典示例通过output.get(transcription, Transcription failed.)提取转写文本并在取不到结果时给出兜底提示。文生图用 Stable Diffusion 生成图片输入、按钮与加载态with ui.column().classes(w-100 items-stretch): ui.label(Stable Diffusion (image generator)).classes(text-2xl) prompt ui.input(Your prompt).on(keydown.enter, generate_image) image_button ui.button(Generate image, on_clickgenerate_image) images ui.column()这里组合了三个 NiceGUI 组件ui.input(Your prompt)提示词输入框通过.on(keydown.enter, generate_image)绑定键盘事件在输入框内按回车即可直接触发生成ui.button(Generate image, on_clickgenerate_image)生成按钮点击触发同样的回调ui.column()用作图片输出容器生成结果将被动态追加到其中。生成逻辑loading 状态与结果渲染async def generate_image(): image_button.props(loading) output await run.io_bound( replicate.run, stability-ai/stable-diffusion:db21e45d3f7023abc2a46ee38a23973f6dce16bb082a930b0c49861f96d1e5bf, input{prompt: prompt.value}, ) image_button.props(removeloading) images.clear() for image in output: ui.image(image.url).classes(w-100 border border-gray-300 rounded-md)关键点拆解按钮 loading 态调用前通过image_button.props(loading)给按钮添加 Quasar 的loading属性禁用并显示加载动画调用结束后用image_button.props(removeloading)移除避免生成期间用户重复点击同样的run.io_bound调度Stable Diffusion 推理同样是远程 HTTP 调用与转写逻辑一样放入线程池执行等待期间界面保持可响应结果渲染Replicate 的 Stable Diffusion 模型返回一个可迭代的输出序列每个元素是图片对象示例遍历输出并逐个用ui.image(image.url)展示同时通过.classes(w-100 border border-gray-300 rounded-md)应用宽度 100%、灰色边框与圆角样式旧结果清理images.clear()在生成新图前清空容器保证每次生成只展示最新结果。从 图片组件源码 可以看到ui.image的source参数支持 URL、本地文件路径、Base64 字符串或 PIL 图像这里直接传入 Replicate 返回的图片 URL 即可。界面布局Row Column 双栏结构with ui.row().classes(gap-16): with ui.column().classes(w-100 items-stretch): # ... Whisper 面板 with ui.column().classes(w-100 items-stretch): # ... Stable Diffusion 面板布局采用 NiceGUI 典型的上下文管理器语法ui.row()水平排列两个子面板gap-16为 Quasar/UnoCSS 间距工具类控制两栏间距每个ui.column()垂直堆叠面板内部元素w-100 items-stretch让子元素占满宽度并拉伸对齐面板标题使用text-2xl/text-xl工具类区分层级面板标题与状态文本。运行与验证启动应用在示例目录下执行python main.pyNiceGUI 会启动本地开发服务器默认http://localhost:8080浏览器打开后即可看到双栏界面。启动前请确保已正确设置REPLICATE_API_TOKEN否则调用模型时会收到鉴权错误。交互流程验证转写验证在左侧上传一个音频/视频文件auto_uploadTrue会自动开始上传状态标签先显示Transcribing...随后替换为 Whisper 返回的转写文本若失败则显示Transcription failed.生成验证在右侧输入提示词如 Create a nicegui logo点击按钮或按回车按钮进入 loading 态输出区先显示生成中的占位内容完成后渲染返回的图片。仓库中的 screenshot.webp 展示了上述完整界面与交互状态。源码级原理补充为了让读者理解示例背后 NiceGUI 的支撑机制这里补充三处源码事实run.io_bound与线程池见 nicegui/run.pyio_bound将回调放入全局ThreadPoolExecutor通过run_in_executor与 asyncio 事件循环桥接因此可以安全地在async处理器中await同步的 Replicate 调用。若任务在应用关闭或取消时未完成会返回None这是当前版本的过渡行为4.0 将改为抛出CancelledError示例代码通过字典的get兜底与 loading 属性管理规避了这类边界情况。同类 API 还有run.cpu_bound放入独立进程池适合本地 CPU 密集计算场景上传事件的完整链路ui.upload在客户端通过注册的内部路由/_nicegui/client/{client.id}/upload/{element.id}将文件 POST 到服务端服务端解析 multipart 表单后按顺序触发on_begin_upload→on_upload→on_multi_upload事件见 upload.py 与 events.py 的UploadEventArguments定义ui.image的渲染能力Image元素基于 QuasarQImg封装source支持多种输入类型URL / 路径 / Base64 / PIL 图像并额外提供force_reload()方法用于强制刷新网络图片见 image.py。小结与扩展建议本示例用约 40 行 Python 代码完成了上传音频 → 语音转写与输入提示词 → 生成图片两个完整的 AI 工作流其可迁移的通用模式包括run.io_bound包裹远程模型调用保持 UI 事件循环不被阻塞是接入任意 HTTP/云端 AI 服务的标准姿势ui.upload的auto_uploadon_upload组合适合选择即处理的文件驱动型任务props(loading)/props(removeloading)动态切换按钮状态为长时间推理任务提供基础的用户体验保障。在此基础上可以继续扩展为转写面板增加多文件支持multipleTrue、为生成结果增加下载链接结合ui.download、或使用run.cpu_bound将本地后处理如图片裁剪、字幕对齐放入进程池执行。完整的可运行代码位于 examples/ai_interface/main.py依赖清单见 examples/ai_interface/requirements.txt可供直接参考与二次开发。【免费下载链接】niceguiCreate web-based user interfaces with Python. The nice way.项目地址: https://gitcode.com/GitHub_Trending/ni/nicegui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考