【Gradio系列】使用 Gradio 快速构建对话式 AI 应用

【Gradio系列】使用 Gradio 快速构建对话式 AI 应用
import os import gradio as gr from openai import OpenAI client = OpenAI( api_key=os.getenv("OPENAI_API_KEY","sk-"), base_url=os.getenv("OPENAI_BASE_URL", "https://dashscope.aliyuncs.com/compatible-mode/v1"), ) MODEL_NAME = os.getenv("MODEL_NAME", "qwen-plus") SYSTEM_PROMPT = "你是一个友好、专业、谨慎的中文智能助手。" def chat_stream(message, history): messages = [{"role": "system", "content": SYSTEM_PROMPT}] for item in history: if item.get("role") in ["user", "assistant"]: messages.append(item) messages.append({"role": "user", "content": message}) stream = client.chat.completions.create( model=MODEL_NAME, messages=messages, stream=True, temperature=0.7, ) for chunk in stream: delta = chunk.choices[0].delta.content or "" partial += delta yield partial demo = gr.ChatInterface( fn=chat_stream, title="AI智能助手", description="基于Gradio", ) if __name__ == "__main__": demo.launch(server_name="0.0.0.0", server_port=7860)

gr.ChatInterface 本质上是一个高级封装组件,它帮你自动完成了:聊天界面(前端 UI)。自动生成:对话气泡(用户 / AI),输入框,发送按钮,滚动聊天记录,不需要写 HTML / CSS / JS。

ChatInterface 的执行流程:用户输入 → ChatInterface → 调用 fn → 返回结果 → 渲染UI

chat_stream 是整个应用的核心函数,负责把用户输入和历史对话整理成模型需要的 messages 格式,然后调用大模型接口获取回复;其中通过遍历 history 实现多轮上下文记忆,再把当前 message 追加进去发送请求,并开启 stream=True 进行流式调用,最后用 yield 持续返回逐步生成的内容,从而在前端实现类似 ChatGPT 的“边生成边显示”的实时对话体验。

Read more

Qwen-Image-2512-Pixel-Art-LoRA效果实测:不同分辨率(512/768/1024/1280)对像素密度的影响

Qwen-Image-2512-Pixel-Art-LoRA效果实测:不同分辨率(512/768/1024/1280)对像素密度的影响 1. 引言:像素艺术的魅力与分辨率之谜 像素艺术,这种由一个个小方块构成的独特视觉语言,承载着无数人的童年记忆和复古情怀。从早期的8位机游戏到如今独立游戏的复兴,像素风格始终散发着独特的魅力。然而,当我们用AI来生成像素艺术时,一个看似简单却至关重要的问题浮出水面:分辨率到底如何影响最终的像素密度和艺术效果? 今天,我们就来深入实测Qwen-Image-2512-Pixel-Art-LoRA模型,看看在不同分辨率设置下,生成的像素艺术究竟会发生怎样的变化。这个基于通义万相Qwen-Image-2512大模型的微调版本,专门为像素艺术而生,由社区开发者prithivMLmods训练并开源。它通过LoRA技术,在强大的基座模型上精准注入了像素艺术的灵魂。 很多人可能会想,分辨率不就是图片大小吗?调高调低有什么好研究的?但事实是,在像素艺术这个特殊领域,分辨率的选择直接决定了作品的“像素感”强弱、细节丰富程度,甚至影响整体的艺术风格。选择512×5

【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题

【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题

【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题 在开发 Web 应用时,尤其是集成了 Unity WebGL 内容的页面,遇到一个问题:当 Unity WebGL 渲染内容嵌入到一个 Tab 中时,切换 Tab 后画面会变黑,直到用户点击黑屏区域,才会恢复显示。 这个问题通常是因为 Unity 渲染在 Tab 切换时被暂停或未能获得焦点所致。 在本文中,我们将介绍如何在使用 Layui 框架时,通过监听 Tab 切换事件并强制 Unity WebGL 渲染恢复,来解决这一问题。 1. 问题描述 当 Unity WebGL 内容嵌入到页面中的多个

2026年最火的前端神器!让AI帮你设计专业级UI,告别丑陋界面

2026年最火的前端神器!让AI帮你设计专业级UI,告别丑陋界面

痛点引入 你是否遇到过这些问题: * 写代码很溜,但设计的界面总是"程序员审美"? * 不知道该用什么颜色、字体,每次都要花大量时间调样式? * 想让 AI 帮你写 UI 代码,但生成的界面总是千篇一律、毫无设计感? * 看到别人的网站那么漂亮,自己却不知道从何下手? 如果你有以上困扰,那么今天要介绍的这个工具,将彻底改变你的开发体验! 🎯 UI UX Pro Max 是什么? UI UX Pro Max 是一个为 AI 编码助手提供设计智能的工具,它就像给你的 AI 助手配备了一个专业的 UI/UX 设计师大脑。 简单来说:它让 AI 不仅会写代码,还懂设计! 核心数据 * ✅ 57 种 UI 样式:

Nanbeige 4.1-3B WebUI开发者案例:CSS伪类动态布局在AI产品中的创新应用

Nanbeige 4.1-3B WebUI开发者案例:CSS伪类动态布局在AI产品中的创新应用 1. 引言 如果你用过一些AI对话工具,可能会发现一个普遍问题:界面太“技术”了。要么是侧边栏挤满了各种设置,要么是对话气泡呆板得像记事本,完全没有沉浸感。这种体验,就像在会议室里聊天,而不是在咖啡馆里和朋友对话。 今天要分享的,是一个完全不同的思路。我们基于Nanbeige 4.1-3B模型,开发了一个极简清爽的WebUI界面。这个界面最大的亮点,不是功能有多强大,而是体验有多舒服。它采用了类似手机短信和二次元游戏的对话风格,让你感觉就像在用一款精心设计的社交应用。 但更值得开发者关注的是,这个界面背后用了一个非常巧妙的CSS技巧——:has()伪类选择器。通过这个技巧,我们在纯Streamlit框架下,实现了原本需要复杂前端框架才能完成的动态布局效果。这篇文章,我就来详细拆解这个案例,看看CSS伪类如何在AI产品中创造惊艳的用户体验。 2. 项目概览:从技术工具到沉浸体验 2.1 传统AI界面的痛点 在开始讲技术细节之前,我们先看看传统AI对话界面有哪些问题: *