【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

Moectf2025-web&misc&crypto (持续更新

Moectf2025-web&misc&crypto (持续更新

目录 moectf2025: 签到: Crypto 入门: ez_des ezBSGS: web: 111 签到 第一章 神秘的手镯: 第二章 初识金曦玄轨 第三章 问剑石!篡天改命! 第四章 金曦破禁与七绝傀儡阵 1: 2: 3: 4: 5: 6: 7: 第五章 打上门来! 第六章 藏经禁制?玄机初探! 第七章 灵蛛探穴与阴阳双生符 第八章 天衍真言,星图显圣: Moe笑传之猜猜爆 222 第九章 星墟禁制·天机问路 第十章 天机符阵 第十一章 千机变·破妄之眼 这是...Webshell?: 第十章

前端岗面试30万字原题含答案

前端岗面试30万字原题含答案

我们正处在前端发展的一个微妙节点。 曾几何时,几句 HTML、CSS 加个 jQuery 特效就能轻松拿 Offer;后来,掌握 Vue 或 React 便能成为市场宠儿。但现在,当你翻开这本“前端岗面试30万字原题含答案”时,我们所面对的前端世界,已经悄然变成了一场 “冰与火之歌”。 大环境的“冰”:在存量博弈中寻找缺口 当下的技术招聘市场,用一个字形容就是 “卷”。互联网行业从野蛮生长步入精耕细作,HC(招聘名额)紧缩,而涌入的求职者却依旧庞大。大厂不再仅仅为了业务扩张而招人,更看重候选人的不可替代性。 你不仅要与同级的毕业生竞争,还要与众多因公司业务调整而释放出来的、经验丰富的中高级开发者同台竞技。这就导致了一个现象:面试难度呈指数级上升。以前“背八股”就能通关,现在面试官更擅长从一个简单的知识点出发,逐步深挖到你知识体系的盲区。 面试的“火”:从“会用”到“

前端图像生成终极优化:5个简单策略让性能飙升300%

前端图像生成终极优化:5个简单策略让性能飙升300% 【免费下载链接】dom-to-imagedom-to-image: 是一个JavaScript库,可以将任意DOM节点转换成矢量(SVG)或光栅(PNG或JPEG)图像。 项目地址: https://gitcode.com/gh_mirrors/do/dom-to-image 还在为前端图像生成卡顿而烦恼吗?每次导出复杂页面时浏览器都要崩溃几次?别担心,今天我要分享的这5个简单策略,能让你的dom-to-image性能瞬间提升3倍以上!🚀 作为前端开发者,我们经常需要在浏览器中将DOM节点转换为图像,无论是生成报表、保存页面快照,还是创建分享图片,性能优化都是绕不开的话题。 为什么前端图像生成总是那么慢? 你有没有发现,当页面包含大量图表、复杂样式时,调用dom-to-image生成图像的过程简直像在等待蜗牛爬行?其实问题出在三个关键环节: * 内存瓶颈:浏览器处理大尺寸DOM时内存占用飙升 * 计算压力:复杂的CSS样式和布局计算消耗大量CPU资源 * 渲染差异:不同浏览器对SVG和Canvas的支持不一致

1分钟,图文并茂手把手教你用Trae AI将你的设计稿自动生成前端代码 One-Minute Guide with Visuals: Turn Design Mockups into Code wit

1分钟,图文并茂手把手教你用Trae AI将你的设计稿自动生成前端代码 One-Minute Guide with Visuals: Turn Design Mockups into Code wit

1分钟,图文并茂手把手教你用Trae AI将你的设计稿自动生成前端代码 One-Minute Guide with Visuals: Turn Design Mockups into Code with Trae AI * 准备工作: * 实操 * 第1步:上传设计图 * 第2步:下达指令 * 指令模板 * 具体示例 * 补充信息(让AI更准确) * 第3步:AI自动解析 * 授权AI自动执行命令,创建编写代码 * 第4步:AI自动生成高质量代码 * 第5步:实时预览与调整 * 总结 * Preparation: * Practical Steps * Step 1: Upload Design Mockup * Step 2: Give Instructions * Instruction Template * Specific Example