网站建设每月工作多少e wordpress rest api

网站建设每月工作多少,e wordpress rest api,国家公示系统企业信息查询,企业简介介绍华为MateChat组件是为AI生成内容#xff08;AIGC#xff09;场景设计的UI库。MateChat#xff0c;作为华为专为AIGC场景精心打造的UI库#xff0c;旨在助力开发者高效构建AI对话应用。实际上#xff0c;它不仅支撑了华为内部多个应用的对话需求#xff0c;还融入了CodeAr…华为MateChat组件是为AI生成内容AIGC场景设计的UI库。MateChat作为华为专为AIGC场景精心打造的UI库旨在助力开发者高效构建AI对话应用。实际上它不仅支撑了华为内部多个应用的对话需求还融入了CodeArts、InsCode AI IDE等智能化助手的构建之中。MateChat 是由华为 DevUI 团队开发的一款开源前端 AI 组件库旨在帮助开发者快速构建智能对话应用。它专注于生成式 AIGenAI场景提供了一套完整的对话式交互组件如消息气泡、输入框和过程监督组件以实现流畅、易用的用户体验。 其核心特点包括即插即用轻量化设计支持快速集成到 React、Vue 等主流前端框架中降低开发门槛。高扩展性允许自定义消息格式、主题样式和对话逻辑兼容 OpenAI、Gemini 等主流 AI 模型。多场景适配不仅适用于通用网站如企业官网、电商平台还特别优化了研发工具领域如 IDE 插件支持沉浸式、情境化的交互体验。MateChat 已在华为内部多个应用及 CodeArts、InsCode AI IDE 等产品中落地体现了其在实际项目中的可靠性。 通过提供开箱即用的组件和灵活的定制能力它致力于简化 AI 对话功能的开发流程助力应用智能化升级。在安装完成MateChat 后我们需要将AI大模型进行对接进来。OpenAI在搭建完成页面后我们可以开始对接模型服务如 DeepSeek、盘古大模型、ChatGPT 等优秀大模型。在注册并生成对应模型的调用API_Key后可以参考如下方法进行调用通过 npm 安装 openai:$ npm install openai使用OpenAI初始化并调用模型接口如下为一段代码示例注意通常openai-node用于node环境如果在浏览器环境使用需要开启dangerouslyAllowBrowser开启该配置存在安全风险API凭证泄露请确保在安全环境中使用详见openai-node官方文档说明。importOpenAIfromopenai;constclientref();client.valuenewOpenAI({apiKey:,// 模型APIKeybaseURL:,// 模型API地址dangerouslyAllowBrowser:true,// 浏览器环境使用需要开启});constfetchData(ques){constcompletionawaitclient.value!.chat.completions.create({model:my-model,// 替换为自己的model名称messages:[{role:user,content:ques},],stream:true,// 为 true 则开启接口的流式返回});forawait(constchunkofcompletion){console.log(content: ,chunk.choices[0]?.delta?.content||);console.log(chatId: ,chunk.id);}}结合MateChat【快速开始】示例代码修改onSubmit函数代码如下importOpenAIfromopenai;constclientrefOpenAI();client.valuenewOpenAI({apiKey:,// 模型APIKeybaseURL:,// 模型API地址dangerouslyAllowBrowser:true,});constonSubmit(evt){inputValue.value;startPage.valuefalse;// 用户发送消息messages.value.push({from:user,content:evt,avatarConfig:{name:user},});fetchData(evt);};constfetchDataasync(ques){// 消息响应气泡messages.value.push({from:model,content:,avatarConfig:{name:model},id:,loading:true,});constcompletionawaitclient.value!.chat.completions.create({model:my-model,// 替换为自己的model名称messages:[{role:user,content:ques}],stream:true,// 为 true 则开启接口的流式返回});messages.value[messages.value.length-1].loadingfalse;// 将流式返回拼接到消息内容中forawait(constchunkofcompletion){constcontentchunk.choices[0]?.delta?.content||;constchatIdchunk.id;messages.value[messages.value.length-1].contentcontent;messages.value[messages.value.length-1].idchatId;}};完成模型API地址与APIKey填充后即拥有了一个对接大模型的简单应用。DeepSeek这里我们以DeepSeek为例介绍如何在MateChat搭建的应用中接入DeepSeek提供的模型服务。DeepSeek API 使用与 OpenAI 兼容的 API 格式详见官方文档DeepSeek - 首次调用APIbaseURL获取https://api-docs.deepseek.com/zh-cn/apiKey获取https://platform.deepseek.com/api\_keys前往DeepSeek开发平台获取相关的baseURL和apiKey后可以参考如下方法对【快速开始】中示例代码进行调整constonSubmit(evt){inputValue.value;startPage.valuefalse;// 用户发送消息messages.value.push({from:user,content:evt,});setTimeout((){// 模型返回消息messages.value.push({from:model,content:evt,});},200);};修改为importOpenAIfromopenai;constclientrefOpenAI();client.valuenewOpenAI({apiKey:,// 模型APIKeybaseURL:,// 模型API地址dangerouslyAllowBrowser:true,// 浏览器环境使用需要开启});constonSubmit(evt){inputValue.value;startPage.valuefalse;// 用户发送消息messages.value.push({from:user,content:evt,avatarConfig:{name:user},});fetchData(evt);};constfetchDataasync(ques){messages.value.push({from:model,content:,avatarConfig:{name:model},id:,loading:true,});constcompletionawaitclient.value!.chat.completions.create({model:deepseek-reasoner,// 根据deepseek模型列表进行替换messages:[{role:user,content:ques}],stream:true,// 为 true 则开启接口的流式返回});messages.value[messages.value.length-1].loadingfalse;forawait(constchunkofcompletion){constcontentchunk.choices[0]?.delta?.content||;constchatIdchunk.id;messages.value[messages.value.length-1].contentcontent;messages.value[messages.value.length-1].idchatId;}};完成模型API地址与APIKey填充后即拥有了一个对接DeepSeek大模型的简单应用。如果你想要参考更完整的页面示例.其他当前大部分大模型服务 API 接口都使用与 OpenAI 兼容的 API 格式但直到目前还没有标准的协议定义模型接口规范所以仍会存在协议不兼容的问题。这里补充介绍如下 fetch SSE 的接入方案供参考Fetch Event SourceFetch Event Source 是一个用于处理服务器发送事件Server-Sent Events, SSE的 JavaScript 库并具有 Fetch API 中所提供的所有功能。安装依赖npm install microsoft/fetch-event-source使用 fetchEventSource 调用模型接口import{fetchEventSource}frommicrosoft/fetch-event-source;constgetAIAnswer(content,type){abortControllernewAbortController();constaiAnswer{from:assistant,content:,type,avatarPosition:side-left,avatarConfig:{...aiModelAvatar},loading:true,};messages.value.push(aiAnswer);constsourcefetchEventSource(apiUrl,{method:POST,headers:{Content-Type:application/json,},body:JSON.stringify({messages:[{role:user,content,},],apikey:apiKey,}),signal:abortController.signal,onopen:(response){},onmessage:(msg){messages.value.at(-1).loadingfalse;if(msg.data[DONE]){nextTick((){conversationRef.value?.scrollTo({top:conversationRef.value.scrollHeight,behavior:smooth,});});return;}constdataJSON.parse(msg.data);constresponseContentdata.choices[0].delta.content;messages.value.at(-1).contentresponseContent;},onerror:(err){messages.value.at(-1).loadingfalse;messages.value.at(-1).content请求失败;throwerr;},});};conststop(){if(abortController){abortController.abort();abortControllernull;// 更新最后一条消息的状态if(messages.value.length0){messages.value.at(-1).loadingfalse;messages.value.at(-1).content已中止对话;}}};使用MateChat的多种方式当前MateChat主要基于Vue3开发但我们仍可以通过多种方式将MateChat与您的项目集成。以下是一些可行方案供参考一、在Vue3项目中集成MateChat主流方式适用场景需要深度定制AI助手功能并与现有Vue项目无缝融合的场景。步骤 参考 快速开始 的使用方式import{createApp}fromvue;importAppfrom./App.vue;importMateChatfrommatechat/core;importdevui-design/icons/icomoon/devui-icon.css;createApp(App).use(MateChat).mount(#app);二、通过iframe嵌入独立页面适用场景需快速为第三方平台添加AI助手且不希望侵入宿主环境。步骤构建独立MateChat页面: 创建一个包含MateChat组件的独立Vue项目并打包为静态资源或独立部署。嵌入iframe在宿主页面中通过iframe加载matechat应用。三、与其他框架集成如React/Angular适用场景需与现有其他框架的宿主应用集成方案建议封装Web Component: 将MateChat组件打包为自定义元素供任意框架调用。通过微前端架构: 使用qiankun、microApp等微前端方案将MateChat作为独立子应用加载。华为MateChat组件是为AI生成内容AIGC场景设计的UI库。MateChat作为华为专为AIGC场景精心打造的UI库旨在助力开发者高效构建AI对话应用。实际上它不仅支撑了华为内部多个应用的对话需求还融入了CodeArts、InsCode AI IDE等智能化助手的构建之中。MateChat 是由华为 DevUI 团队开发的一款开源前端 AI 组件库旨在帮助开发者快速构建智能对话应用。MateChathttps://gitcode.com/DevCloudFE/MateChatMateChat官网https://matechat.gitcode.comDevUI官网https://devui.design/home