第16章3——项目十六Gradio应用拓展为Website Widget16.3 项目十六Gradio应用拓展为Website Widget16.3.1 HTML和CSS创建并定制聊天插件16.3.2 嵌入JavaScript代码实现交互16.3.3 操作网页插件与自定义设置16.3 项目十六Gradio应用拓展为Website Widget除了在Discord、Slack中使用Gradio App还可以将Gradio应用作为聊天插件添加到网站中比如Intercom等常见的客服工具。适合场景①为文档页面添加AI助手②在作品集或产品官网上提供互动帮助③为Gradio应用创建自定义聊天界面。工作原理。在已建成的网站加入聊天插件Website Widget它会以浮动按钮形式显示在网站角落。用户点击后将通过JavaScript客户端API接口与Gradio应用进行实时交互所有问答对话都将在弹出窗口中直接完成。在开始之前做好准备工作其前置条件为(1)某个已建成网站任意包含完整head和body的可运行HTML文件。(2) 确保已部署可运行的Gradio应用可运行于本地或Spaces。本示例将使用与16.1节相同的Gradio Playground Bot。16.3.1 HTML和CSS创建并定制聊天插件首先在示例网页的部分加入HTML和CSS代码如代码16-6所示代码16-6dividchat-widgetclasschat-widgetbuttonidchat-toggleclasschat-toggle/buttondividchat-containerclasschat-container hiddendividchat-headerh3Gradio Assistant/h3buttonidclose-chat×/button/divdividchat-messages/divdividchat-input-areainputtypetextidchat-inputplaceholderAsk a question...buttonidsend-messageSend/button/div/div/divstyle.chat-widget{position:fixed;bottom:20px;right:20px;z-index:1000;}.../style上述代码包含网页中的HTML和CSS代码解读如下(1)在网页放置div分区id为chat-widget其CSS格式表示它位于底部、置前显示z-index0且格式固定。它的内容包括一个聊天切换键chat-toggle和一个隐藏的聊天界面chat-container。(2)在聊天容器中首先在聊天标题chat-header中定义聊天标题名和关闭键close-chat然后定义聊天信息显示区域chat-messages最后定义聊天输入区域chat-input-area包括输入文本框和发送键。(3)在格式style中为上面定义的各个部分渲染格式省略部分请查看线上源码。CSS代码能力强的读者可根据自己需求更改。16.3.2 嵌入JavaScript代码实现交互JavaScript代码实现主体功能它引入聊天机器人并与之交互。在网站的头部加入以下JavaScript代码其中Gradio的JavaScript客户端通过Space网址与Space建立连接而非Space ID注意区别。如代码16-7所示代码16-7scriptsrchttps://cdn.jsdelivr.net/npm/marked/marked.min.js/scriptscripttypemoduleimport{Client}fromhttps://cdn.jsdelivr.net/npm/gradio/client/dist/index.min.js;asyncfunctioninitChatWidget(){constclientawaitClient.connect(https://abidlabs-gradio-playground-bot.hf.space);constchatToggledocument.getElementById(chat-toggle);constchatContainerdocument.getElementById(chat-container);constcloseChatdocument.getElementById(close-chat);constchatInputdocument.getElementById(chat-input);constsendButtondocument.getElementById(send-message);constmessagesContainerdocument.getElementById(chat-messages);chatToggle.addEventListener(click,(){chatContainer.classList.remove(hidden);});closeChat.addEventListener(click,(){chatContainer.classList.add(hidden);});asyncfunctionsendMessage(){constuserMessagechatInput.value.trim();if(!userMessage)return;appendMessage(userMessage,user);chatInput.value;try{constresultawaitclient.predict(/chat,{message:{text:userMessage,files:[]}});constmessageresult.data[0];console.log(result.data[0]);constbotMessageresult.data[0].join(\n);appendMessage(botMessage,bot);}catch(error){console.error(Error:,error);appendMessage(Sorry, an error when processing your request.,bot);}}functionappendMessage(text,sender){constmessageDivdocument.createElement(div);messageDiv.classNamemessage${sender}-message;if(senderbot){messageDiv.innerHTMLmarked.parse(text);}else{messageDiv.textContenttext;}messagesContainer.appendChild(messageDiv);messagesContainer.scrollTopmessagesContainer.scrollHeight;}sendButton.addEventListener(click,sendMessage);chatInput.addEventListener(keypress,(e){if(e.keyEnter)sendMessage();});}initChatWidget();/script作为主体功能实现部分代码稍显复杂解读如下(1)通过CDN方式引入marked.js库。这是一个将Markdown转换为HTML的JavaScript库可以直接在浏览器中使用该库功能来解析和渲染Markdown内容。(2)通过CDN方式并使用ES模块语法script type“module”导入Gradio客户端的JavaScript库这是为了在浏览器中与Gradio服务端进行交互。两者都使用了jsDelivr CDN服务这是一个可靠的公共CDN服务。这种代码组合用于创建一个既能处理Markdown内容又能与Gradio后端服务交互的Web应用。(3)定义主体函数initChatWidget。首先定义各种常量其中比较重要的是客户端通过URL连接Hugging Face上的应用以及各种需要操作的网页组件然后添加事件监听器在点击和关闭窗口时去除和添加隐藏属性。(4)定义发送消息函数sendMessage。函数中首先清理用户发送的消息并以身份“user”追加到历史聊天记录messageDiv.textContent然后通过客户端API接口/chat向Gradio Playground Bot发送消息并获取回复最后将回复内容整理后添加到日志并以身份“bot”将回复添加到消息messageDiv.innerHTML中。(5)定义追加消息函数appendMessage。首先定义显示消息分区messageDiv根据不同消息类型将消息内容加入到messageDiv的不同部分然后添加到消息容器中messagesContainer最后将滚动条位置设置为容器总高度即自动滚动到底部‌。(6)添加事件监听器实现两种发送消息的方式。一是通过点击发送按钮二是通过回车键发送消息。16.3.3 操作网页插件与自定义设置大功告成现在已经有网页版的插件Gradio Bot如何使用及扩展它呢与插件交互。作者使用任意浏览器打开保存的website-widget.html文件稍等片刻便会加载完成如图16-24所示图16-24可以看到网页右下角出现了添加的网页插件图标。单击它在输入框输入make a simple gradio app会得到一个简单Gradio应用如图16-25所示图16-25现在网站已经成功接入Gradio应用用户只需点击聊天按钮就能打开窗口与Gradio应用实时互动。还可以通过修改CSS来个性化组件外观例如①更改配色以匹配网站主题②调整组件尺寸和显示位置③添加图片等文件④添加展开/收起动画效果⑤自定义消息气泡样式等。本书讲解Gradio几乎所有基础及高级技术为用户奠定了开发复杂AI应用的基础。Gradio虽然入门简单但麻雀虽小五脏俱全它可与各类文字、图像、音频和视频大模型结合展示并引入实时流、智能体和MCP等当前流行技术还可拓展到Discord、Slack及网页。Gradio版本仍在快速迭代中在修正Bug同时引入更多紧跟技术前沿的实用功能未来会更贴合当前智能领域的应用为用户带来更精彩的体验。