人工智能之web前端开发（deepSeek与文心一言结合版）

文章目录 隐藏

一.项目功能：

智能问答（实时聊天+流畅打字机效果+自动滚动）
停止生成（取消接口调用）、重新生成
复制功能、问答分页

二.效果展示：

三.技术分析：

fetchEventSource：传统axios请求是等接口将所有数据一次性响应回来后再渲染到页面上，当数据量较大时，响应速度较慢，且无法做到实时输出。而fetchEventSource允许客户端接收来自服务器的实时更新，前端可以实时的将流式数据展示到页面上，类似于打字机的效果。

 fetchEventSource(url, {
        method: "GET",
        headers: {
          "Content-type": "application/json",
          Accept: "text/event-stream"
        },
        openWhenHidden: true,
        onopen: (e) => {
          //接口请求成功，但此时数据还未响应回来
        },
        onmessage: (event) => {
         //响应数据持续数据 
        },
        onclose: () => {
         //请求关闭
        },
        onerror: () => {
          //请求错误
        }
      })

MarkdownIt ：SSE响应的数据格式是markdown，无法直接展示，需要使用MarkdownIt第三方库转换成html，然后通过v-model展示到页面上。
```
    // 1、新建实例md：
    const md = new MarkdownIt()
    // 2.将markdown转化为html
    const htmlStr= md.render(markdownStr)
```

Clipboard+html-to-text：复制时，需要使用html-to-text第三方库将html转化为text，然后借助Clipboard复制到粘贴板上。

//1.在html中设置“copy”类名，并绑定data-clipboard-text


//2.先将html转化成text，然后复制到粘贴板
const copyFn = (copyHtmlStr) => {
     copyText.value=htmlToText(copyHtmlStr)
      const clipboard = new Clipboard(".copy")
      // 成功
      clipboard.on("success", function (e) {
        ElMessage.success("复制成功")
        e.clearSelection()
        // 释放内存
        clipboard.destroy()
      })
      // 失败
      clipboard.on("error", function (e) {
        ElMessage.error("复制失败")
        clipboard.destroy()
      })
    }

scrollEvent：由于数据流式输出，页面内容持续增加，可能会溢出屏幕，因此需要在fetchEventSource接收消息onmessage的过程中，通过设置scrollTop =scrollHeight让页面实现自动滚动。
```
 fetchEventSource(url, {
        ...,
        onmessage: (event) => { 
         chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
        },
        ...
      })
```

四：疑难点及解决方案：

1. 问题描述：当页面请求fetchEventSource已发出时，切换url到其他网站再切换回来到这个页面时，fetchEventSource会重复请求，导致这两次请求的内容重复。

解决方案：设置openWhenHidden为true,表示当页面退至后台时仍保持连接，默认值为false

2. 问题描述：前端调用AbortController的abort()方法取消请求时，只有第一次取消生效，当重新请求时，再次点击停止按钮不生效。

解决方案：每请求一次创建一个新的AbortController()实例，因为AbortController实例的abort()方法被设计为只能调用一次来取消请求，一旦调用了abort()，与AbortController相关的AbortSigal的aborted属性就会被设置成true,表示请求已取消，当再次调用abort()不会有任何效果。

3. 问题描述：当在fetchEventSource的onmessage中设置scrollTop =scrollHeight时，在生成问题的过程中无法向上滚动，但业务想要边生成边滚动查看。

解决方案：监听鼠标滚轮事件，在设置scrollTop =scrollHeight时添加判断，如果鼠标滚轮滑动且未到页面底部，则不自动滚动。

const isRolling = ref(false) //鼠标滚轮是否滚动
const isBottom = ref(false) //滚动参数

// 处理鼠标滚轮事件
const moveWheel1 = ref(true)
const moveWheel2 = ref(false)
const wheelClock = ref()
const stopWheel=()=> {
      if (moveWheel2.value == true) {
        moveWheel2.value = false
        moveWheel1.value = true
      }
    }
const moveWheel=()=> {
      if (moveWheel1.value == true) {
        isRolling.value = true
        moveWheel1.value = false
        moveWheel2.value = true
        //这里写开始滚动时调用的方法
        wheelClock.value = setTimeout(stopWheel, 200)
      } else {
        clearTimeout(wheelClock.value)
        wheelClock.value = setTimeout(stopWheel, 150)
      }
    }
const sendFn=()=>{
     fetchEventSource(url, {
        ...,
        onmessage: (event) => { 
            if (isRolling.value === false) {
              chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
              isRolling.value = false
            }
            if (isBottom.value) {
              isRolling.value = false
              chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
            }
        },
        ...
      })
}

4. 问题描述：SSE响应回来的数据中表格样式未生效。

解决方案：MarkdownIt第三方库将markdown转换成html时，部分样式会丢失，需使用github-markdown-css添加样式。

npm i github-markdown-css
import "github-markdown-css"

五.完整代码示例：

index.vue:


    
      
        
          
            {{ item.message[0] }}
            
          
            
              
                
                  
                  
                    <{{ item.answerIndex + 1 }} / {{ item.message.length
                    }}>
                  
                

                
                  
                    
                  
                  
                    
                    
                  
                
              
              
                
                  
                    
                    重新生成
                  
                
                
                  

              
            
          
        
      
      
        
        思考中…
        
      
      
        
          

        
          

      
    
    
      
        停止生成

index.ts:

import "./index.scss"
import { defineComponent, ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue"
import { fetchEventSource } from "@microsoft/fetch-event-source"
import { ElMessageBox, ElMessage } from "element-plus"
import MarkdownIt from "markdown-it"
import "github-markdown-css"
import Clipboard from "clipboard"
import { htmlToText } from "html-to-text"
import type { ChatItem } from "../../../types/chat"
export default defineComponent({
  components: { },
  setup() {
    const inputValue = ref("")
    const preInputValue = ref("") //上一次查询输入内容,用于重新生成使用
    const isLoading = ref(false) //节流loading
    const loadingStatus = ref(false) //加载状态显示loading
    const chatList = ref([])
    const contentItems = ref("") //当前正在输出的数据流
    const chatContainerRef = ref()
    const isRegenerate = ref(false) //是否重新生成
    const controller = ref()
    const signal = ref()
    const copyText = ref("") //复制的文字
    const copyIndex = ref()
    const scrollTopShow = ref(false)
    const scrollBottomShow = ref(false)
    const isRolling = ref(false) //鼠标滚轮是否滚动
    const isBottom = ref(false) //滚动参数
    onMounted(() => {
      initFn()
      chatContainerRef.value.addEventListener("wheel", moveWheel)
      window.addEventListener("message", function (event) {
        // 处理接收到的消息
        if (event.data && event.data.message) {
          inputValue.value = event.data.message
          sendFn()
        }
      })
    })
    // 处理鼠标滚轮事件
    const moveWheel1 = ref(true)
    const moveWheel2 = ref(false)
    const wheelClock = ref()
    function stopWheel() {
      if (moveWheel2.value == true) {
        // console.log("滚轮停止了")
        // isRolling.value = false
        moveWheel2.value = false
        moveWheel1.value = true
      }
    }
    function moveWheel() {
      if (moveWheel1.value == true) {
        // console.log("滚动了")
        isRolling.value = true
        moveWheel1.value = false
        moveWheel2.value = true
        //这里写开始滚动时调用的方法
        wheelClock.value = setTimeout(stopWheel, 200)
      } else {
        clearTimeout(wheelClock.value)
        wheelClock.value = setTimeout(stopWheel, 150)
      }
    }

    //初始化
    const initFn = () => {
      chatList.value = []
    }
    //上一页
    const preFn = (index: number, answerIndex: number) => {
      if (isLoading.value) return ElMessage.error("正在生成内容,请勿切换。")
      if (answerIndex === 0) {
        chatList.value[index].answerIndex = chatList.value[index].message.length - 1
      } else {
        chatList.value[index].answerIndex = chatList.value[index].answerIndex - 1
      }
    }
    //下一页
    const nextFn = (index: number, answerIndex: number) => {
      if (isLoading.value) return ElMessage.error("正在生成内容,请勿切换。")
      if (answerIndex === chatList.value[index].message.length - 1) {
        chatList.value[index].answerIndex = 0
      } else {
        chatList.value[index].answerIndex = chatList.value[index].answerIndex + 1
      }
    }
    // 1、新建实例md：
    const md = new MarkdownIt()
    const currentHTML = computed(() => {
      // 先判断存不存在，因为一开始currentPost有可能是undefined，在没有拿回数据的时候。
      if (contentItems.value) {
        if (contentItems.value.includes("")) {
          const arr = contentItems.value.split("")
          const thinkStr = `
           师爷模型深度思考中...
          ${arr[0]}
          

         `
          return thinkStr + md.render(arr[1])
        } else {
          const thinkStr = `
           师爷模型深度思考中...
          ${contentItems.value}
          

          `
          return thinkStr
        }
      }
    })
    //发送问题调用接口
    const sendFn = () => {
      showList.value = false
      controller.value = new AbortController()
      signal.value = controller.value.signal
      //先判断inputStr有没有值,isRegenerate表示是否重新生成
      const inputStr = isRegenerate.value ? preInputValue.value : inputValue.value
      if (!inputStr) return ElMessage.error("请输入要查询的问题。")
      if (isLoading.value) return ElMessage.error("正在生成内容,请稍后。")
      isLoading.value = true
      if (!isRegenerate.value) {
        //第一次生成
        chatList.value.push({ type: "user", message: [inputStr], answerIndex: 0, isLoading: false, reportFlag: null })
      }
      loadingStatus.value = true
      const url = `/recheck-web/open/shiye/chat?message=${inputStr}`
      fetchEventSource(url, {
        method: "GET",
        headers: {
          "Content-type": "application/json",
          Accept: "text/event-stream"
        },
        signal: signal.value,
        openWhenHidden: true,
        // params: JSON.stringify({ message: inputStr }),
        onopen: (e) => {
          if (e.status === 500) return ElMessage.error("服务器忙，请稍后再试。")
          if (isRegenerate.value) {
            //重新生成
            chatList.value[chatList.value.length - 1].message.push("")
            chatList.value[chatList.value.length - 1].answerIndex =
              chatList.value[chatList.value.length - 1].message.length - 1
          } else {
            chatList.value.push({ type: "ai", message: [], answerIndex: 0, isLoading: true })
            preInputValue.value = inputValue.value
          }
          chatList.value[chatList.value.length - 1].isLoading = true
          inputValue.value = ""
          isLoading.value = true
          loadingStatus.value = false
        },
        onmessage: (event) => {
          const data = JSON.parse(event.data)
          const newItem = data ? data.content : ""
          contentItems.value = contentItems.value + newItem
          if (data.status !== "end") {
          } else {
            if (isRegenerate.value) {
              //重新生成
              chatList.value[chatList.value.length - 1].message[
                chatList.value[chatList.value.length - 1].message.length - 1
              ] = currentHTML.value + ""
            } else {
              //第一次生成
              chatList.value[chatList.value.length - 1].message.push(currentHTML.value + "")
            }
            if (data.type) {
              chatList.value[chatList.value.length - 1].reportFlag = data.type
            }
          }
          nextTick(() => {
            if (isRolling.value === false) {
              chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
              isRolling.value = false
            }
            if (isBottom.value) {
              isRolling.value = false
              chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
            }
          })
        },
        onclose: () => {
          isLoading.value = false
          loadingStatus.value = false
          chatList.value[chatList.value.length - 1].isLoading = false
          contentItems.value = ""
        },
        onerror: () => {
          isLoading.value = false
          loadingStatus.value = false
          chatList.value[chatList.value.length - 1].isLoading = false
          contentItems.value = ""
        }
      })
    }
    //停止生成
    const stopFn = () => {
      isLoading.value = false
      loadingStatus.value = false
      controller.value.abort()
      //chatList最后一项
      const lastChatItem = chatList.value[chatList.value.length - 1]
      if (isRegenerate.value) {
        // lastChatItem.message[lastChatItem.message.length - 1] = md.render(contentItems.value + "n" + "n" + "停止生成")
        lastChatItem.message[lastChatItem.message.length - 1] =
          currentHTML.value + "停止生成"
      } else {
        // lastChatItem.message.push(md.render(contentItems.value + "n" + "n" + "停止生成"))
        lastChatItem.message.push(currentHTML.value + "停止生成")
      }
      contentItems.value = ""
      lastChatItem.isLoading = false
    }
    //重新生成
    const regenerateFn = () => {
      isRegenerate.value = true
      sendFn()
    }
    //发送
    const inputBlurFn = (event: any) => {
      if (!event.ctrlKey) {
        // 如果没有按下组合键ctrl，则会阻止默认事件
        event.preventDefault()
        isRegenerate.value = false
        sendFn()
      } else {
        // 如果同时按下ctrl+回车键，则会换行
        inputValue.value += "n"
      }
    }
    //复制功能
    const copyFn = (index: number, answerIndex: number) => {
      copyIndex.value = index
      copyText.value = htmlToText(chatList.value[index].message[answerIndex])
      const clipboard = new Clipboard(".copy")
      // 成功
      clipboard.on("success", function (e) {
        ElMessage.success("复制成功")
        e.clearSelection()
        // 释放内存
        clipboard.destroy()
      })
      // 失败
      clipboard.on("error", function (e) {
        ElMessage.error("复制失败")
        clipboard.destroy()
      })
    }
    //试问
    const askFn = (question: string) => {
      inputValue.value = question
      isRegenerate.value = false
      sendFn()
    }
    //滚动事件
    const scrollEvent = (e: any) => {
      //如果滚动到底部,显示向上滚动按钮
      //如果滚动到顶部,显示向下滚动按钮
      const scrollTop = e.target.scrollTop
      const scrollHeight = e.target.scrollHeight
      const offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
      const currentHeight = scrollTop + offsetHeight

      if (currentHeight >= scrollHeight) {
        scrollTopShow.value = true
        isBottom.value = true
      } else {
        isBottom.value = false
        scrollTopShow.value = false
      }

      if (scrollHeight > offsetHeight) {
        scrollBottomShow.value = true
      } else {
        scrollBottomShow.value = false
      }
    }
    //向上滚动
    const scrollTopFn = () => {
      chatContainerRef.value.scrollTop = 0
    }
    //向下滚动
    const scrollBottomFn = () => {
      chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight + 250
    }
    //下载尽调报告
    const downloadReport = (index: number, answerIndex: number) => {
      const downStr = chatList.value[index].message[answerIndex]
      const arr = downStr.split("
")
      const blob = new Blob([arr[1]], { type: "text/plain" })
      const link = document.createElement("a")
      link.href = URL.createObjectURL(blob)
      link.download = "尽调报告.docx"
      link.click()
    }
    const generateReport = (question: string) => {
      inputValue.value = question
      isRegenerate.value = false
      sendFn()
    }
    const viewDialogRef = ref()
    const viewFn = () => {
      viewDialogRef.value.dialogVisible = true
    }
    watch(
      () => chatList.value,
      () => {
        if (chatList.value && chatList.value.length > 0) {
          chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight + 250
        }
      },
      { deep: true }
    )
    onUnmounted(() => {
      if (isLoading.value) {
        isLoading.value = false
        loadingStatus.value = false
        controller.value.abort()
      }
    })
    return {
      inputValue,
      isLoading,
      chatList,
      preFn,
      nextFn,
      sendFn,
      contentItems,
      stopFn,
      preInputValue,
      currentHTML,
      chatContainerRef,
      regenerateFn,
      inputBlurFn,
      copyFn,
      copyText,
      askFn,
      loadingStatus,
      copyIndex,
      downloadReport,
      generateReport,
      showList,
      scrollEvent,
      scrollTopFn,
      scrollBottomFn,
      scrollTopShow,
      scrollBottomShow,
      viewDialogRef,
      viewFn
    }
  }
})
 
   index.scss: 
.report-page {
  height: 100%;
  width: 1201px;
  margin: 20px calc((100% - 1201px) / 2 - 35px) 20px calc((100% - 1201px) / 2 + 35px);
  .chat-container::-webkit-scrollbar {
    width: 0; /* 对于垂直滚动条 */
  }
  .chat-container {
    height: 85vh;
    overflow-y: auto;
    padding-bottom: 170px;
    margin-top: 0px;
    box-sizing: border-box;
    .chat-list-container {
      margin-top: 30px;
      .chat-item {
        display: flex;
        margin-bottom: 20px;
        .avatar {
          width: 40px;
          height: 40px;
        }
        .question {
          display: flex;
          margin-bottom: 30px;
          margin-left: 70px;
          margin-right: 10px;
          .message {
            padding: 12px 10px 10px;
            border-radius: 14px 0px 14px 14px;
            background: linear-gradient(128deg, #4672ff -1.27%, #7daafc 109.62%);
            color: #fff;
          }
          .avatar {
            margin-left: 20px;
          }
        }
        .answer-container {
          margin-right: 70px;
          margin-bottom: 30px;
          .answer {
            display: flex;
            .avatar-page {
              width: 70px;
              position: relative;
              .avatar {
                width: 60px;
                height: 60px;
                margin-right: 10px;
              }

              .page-container {
                position: absolute;
                top: 60px;
                left: 3px;
                color: #000;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                .pre-page {
                  margin-right: 1px;
                  cursor: pointer;
                }
                .next-page {
                  margin-left: 1px;
                  cursor: pointer;
                }
              }
            }
            .answer-message {
              background-color: #fff;
              padding: 20px;
              border-radius: 0 14px 14px 14px;
              min-width: 500px;
              .download-btn {
                color: #333;
                text-align: center;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 14px;
                background-color: #f2f3f8;
                height: 34px;
                margin-top: 20px;
                border-radius: 6px;
                border-color: transparent;
                .icon-img {
                  width: 17px;
                  height: 17px;
                  margin-right: 5px;
                }
                &:hover {
                  background: linear-gradient(128deg, #4672ff -1.27%, #7daafc 109.62%);
                  color: #fff;
                }
              }
            }
          }
          .btn-container {
            margin-left: 80px;
            margin-top: 18px;
            text-align: left;
            display: flex;
            justify-content: space-between;
            .opt-container {
              .stop-btn,
              .regenerate-btn {
                cursor: pointer;
                color: #57f;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
              }
            }
            .tool-container {
              background-color: #fff;
              padding: 6px 10px 8px;
              height: 40px;
              border-radius: 20px;
              min-width: 70px;
              text-align: center;
              .copy {
                width: 28px;
                height: 28px;
                cursor: pointer;
              }
              .copy-acive {
                color: #5577ff;
              }
            }
          }
        }
      }
    }
    .user {
      flex-direction: row-reverse;
    }
    .loading-status {
      display: flex;
      .avatar {
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }
      .think {
        height: 52px;
        line-height: 52px;
        background-color: #fff;
        text-align: center;
        border-radius: 0 14px 14px 14px;
        width: 100px;
        color: #999;
      }
      .loading-img {
        width: 40px;
        height: 40px;
      }
    }
    .scroll-container {
      width: 38px;
      height: 38px;
      background-color: #fff;
      border-radius: 19px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      left: calc((100% - 1201px) / 2 + 175px + 1061px);
    }
    .scroll-top {
      bottom: 200px;
    }
    .scroll-bottom {
      top: 53px;
    }
  }
  .input-container {
    position: fixed;
    left: calc((100% - 1061px) / 2 + 35px);
    bottom: 5%;
    width: 1061px;
    .stop-container {
      cursor: pointer;
      width: 104px;
      height: 36px;
      background-color: #fff;
      color: #5863ff;
      line-height: 36px;
      text-align: center;
      border-radius: 18px;
      position: absolute;
      top: -50px;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      .stop-img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        margin-right: 3px;
      }
    }
    .input {
      .el-textarea__inner {
        padding: 15px;
        border-radius: 14px;
        box-shadow: 14px 27px 45px 0px rgba(112, 144, 176, 0.2);
      }
      .el-textarea__inner::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      .el-textarea__inner::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #c3c3c3;
      }
      .el-textarea__inner::-webkit-scrollbar-track {
        background-color: transparent;
      }
    }
    .icon-container {
      position: absolute;
      right: 10px;
      bottom: 35px;
      z-index: 999;
      .loading-icon {
        width: 40px;
        height: 40px;
      }
      .send-icon {
        width: 35px;
        height: 35px;
      }
    }
  }
}
.markdown-body {
  box-sizing: border-box;
  max-width: 1021px !important;
  hr {
    display: none !important;
  }
}




    $(function() {

      setTimeout(function () {

        var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');

        if (mathcodeList.length > 0) {

          for (let i = 0; i < mathcodeList.length; i++) {

            if (mathcodeList[i].complete) {

              if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {

                var alt = mathcodeList[i].alt;

                alt = '(' + alt + ')';

                var curSpan = $('');

                curSpan.text(alt);

                $(mathcodeList[i]).before(curSpan);

                $(mathcodeList[i]).remove();

              }

            } else {

              mathcodeList[i].onerror = function() {

                var alt = mathcodeList[i].alt;

                alt = '(' + alt + ')';

                var curSpan = $('');

                curSpan.text(alt);

                $(mathcodeList[i]).before(curSpan);

                $(mathcodeList[i]).remove();

              };

            }

          }

          MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

        }

      }, 500)

    });



  

      
        确定要放弃本次机会？
      
      福利倒计时

        
:

:

      


          立减 ¥

        
        普通VIP年卡可用
      
      立即使用
  





              

                  辣辣1


            

                关注
关注
            



              


                    25


点赞


              


踩


              


                    13




                  

                    收藏

                



                  觉得还不错?


                    一键收藏






                
              
                


                      0


评论


              
分享




                    复制链接
                  

                    分享到 QQ
                  

                    分享到新浪微博
                  



                      扫一扫
                    





            




                
举报

              

                
举报

              












				

web前端三大主流框架
				
			


					数字人生
				

					06-06


					4352

				



			
它采用MVVM（Model-View-ViewModel）模式，通过数据绑定和依赖注入，将界面的状态和数据进行统一管理，提供了丰富的功能和特性，如路由管理、表单验证、模块化等。随着前端技术的发展，新的工具和框架也可能会逐渐崛起，成为开发者的新选择。这三个框架都具有自己独特的特性和优势，选择合适的框架取决于项目的需求、团队的技术栈和个人的偏好。总结来说，Angular、React和Vue.js是目前web前端开发领域的三大主流框架，它们各有特点，适用于不同的开发场景和需求。
			
		







				
探索微软Edge
				
			


					数字人生
				

					05-27


					1112

				



			
总的来说，微软Edge浏览器以其卓越的性能、增强的隐私保护、优化的工作效率和丰富的功能价值，成为了一款值得推荐的现代网络浏览器。2. Edge集成了新的Copilot功能，能够回答复杂问题，提供全面的答案，总结页面上的信息，深入研究引文，开始撰写草稿，以及与DALL·E 3一起创建图像，全都在一边浏览的同时完成，无需在标签页之间切换或离开浏览器。综上所述，微软Edge是一款不断进化的现代浏览器，旨在满足用户多样化的网络需求，无论是日常浏览、工作学习还是娱乐消费，都力求提供高效、安全、个性化的浏览体验。
			
		





          参与评论
您还未登录，请先
登录
后发表或查看评论
      







				
AI应用实战：DeepSeek+Dify构建知识库、Agent、工作流与聊天助手
				
			


					2401_84495872的博客
				

					02-19


					1371

				



			
在我第一篇关于AI的文章中《[【AI】初体验AI大模型应用平台]》，我有简单提到Dify，那个时候对于Dify的理解是一款大语言模型的应用开发平台，就是类似一个微信的小程序开发平台，每个个体，每个公司都可以在上面开发属于自己的应用。最近深入了解之后，又对其有了更进一步的理解。昨天看到一个网友说"不会使用DeepSeek，那么这东西到普通人手里，就是百度Plus版"，这么说也不无道理。
			
		






				

DeepSeek与Playwright结合：利用AI提升自动化测试脚本生成与覆盖率优化
				
			


					霍格沃兹测试学院的博客
				

					02-13


					1015

				



			
Playwright是由微软开发的开源自动化测试工具，旨在提供跨浏览器的自动化测试支持。跨浏览器支持：能够在多个浏览器（包括Chromium、Firefox和Safari）上进行自动化测试，确保软件在不同平台的兼容性。强大的功能支持：支持页面元素的动态交互、网络请求拦截、浏览器上下文模拟等高级功能，能够高效地模拟用户操作。快速执行：Playwright具有极高的执行速度，适用于需要快速反馈的自动化测试任务。Playwright因此成为现代前端应用和复杂web平台测试的理想选择。
			
		






				
【AI】DeepSeek+Dify构建知识库、Agent（智能体）、工作流、聊天助手
				
			


					python1234567_的博客
				

					02-18


					2936

				



			
昨天看到一个网友说"不会使用DeepSeek，那么这东西到普通人手里，就是百度Plus版"，这么说也不无道理。为什么DeepSeek会掀起这么大的浪潮，是因为过去我们想实现的很多事情都要基于机器对自然语言的理解，比如机器人发展了很久，现在有了机器狗、人形机器人，但还是需要遥控去控制，而不具备自主思维。再比如刚出来的Gpt、文心一言，更像是拼凑起来的文字，具有浓重的程序化风格。
			
		






				
【2.23更新版】Linkreate wordperssAI插件：AI图文+视频+长尾关键词自动生成，批量上传下载关键词生成文章，前端AI客服对话窗口，已内置腾讯云deepseek满血版可联网
				
			


					dddds22的博客
				

					02-23


					1617

				



			
插件后台支持配置自定义API，只需要填写需要的APIurl、模型名字、key即可让插件功能调用自定义API（插件后台有自定义接入腾讯云deepseek模型的示例），其它更多的API、模型同理插件新增集成腾讯云deepseek模型应用API，该API调用稳定，支持R1和V3模型，支持联网搜索、模型自我学习等功能-生成文章用R1模型推理会消耗时间很长，会超过服务器等待时间，建议选择V3模型。
			
		






				
大模型部署新方案：Ollama结合WebUI实现应用实践
				
			


					2401_84495872的博客
				

					02-14


					823

				



			
易于使用：它提供了一个简洁的界面和命令行工具，使得用户可以方便地管理和运行不同的大语言模型。多种模型支持：可以运行多种开源的大语言模型，为用户提供了更多的选择。本地运行：允许用户在本地设备上运行模型，保护数据隐私，同时减少对网络连接的依赖。自定义配置：用户可以根据自己的需求进行自定义配置，如调整模型参数、设置内存限制等。开发和测试：对于开发者来说，Ollama 是一个方便的工具，可以在本地进行模型的开发和测试，提高开发效率。
			
		






				
盘点｜AI大模型时代，2024医疗器械网络安全应对与挑战（上）
				
			


					kaka0722ww的博客
				

					06-13


					1293

				



			
6月5日，以“AI驱动安全”为主题，2024全球数字经济大会数字安全高层论坛，暨北京网络安全大会战略峰会在北京国家会议中心开幕。与会专家指出，攻击者可利用人工智能技术生成网络攻击和网络钓鱼工具，网络安全从人人对抗、人机对抗逐渐向基于人工智能的攻防对抗演化。随着技术的不断进步，人工智能设备越来越普遍，也为新的利益和风险打开了大门。医疗器械网络安全，便是在这个大背景下，目前医疗行业面临的最大风险之一。
			
		






				
【2.21更新版】Linkreate wordperssAI插件：AI图文+视频+长尾关键词自动生成，批量上传下载关键词，批量关键词生成文章，已内置deepseek、kimi全模型
				
			


					dddds22的博客
				

					02-21


					1018

				



			
插件后台支持配置自定义API，只需要填写需要的APIurl、模型名字、key即可让插件功能调用自定义API（插件后台有自定义接入腾讯云deepseek模型的示例），其它更多的API、模型同理插件新增集成腾讯云deepseek模型应用API，该API调用稳定，支持R1和V3模型，支持联网搜索、模型自我学习等功能。
			
		






				
低代码工具大开箱，都哪些平台深度拥抱了Deepseek

				
			


					weixin_52213728的博客
				

					02-27


					1169

				



			
本文汇总了8款国内外低代码平台，包括织信、织信Informat、织信云等。这些平台以高可用性、可扩展性、可定制化和AI融合等特点，在数据处理、AI应用开发等方面具有优势。
			
		






				
PHP框架详解- symfony框架
				
			


					数字人生
				

					06-12


					916

				



			
Symfony 是一个功能强大、灵活可扩展的 PHP 框架，适用于构建各种复杂的 web 应用程序。通过组件化的设计、强大的路由系统、依赖注入和服务容器、模板引擎、ORM 支持、安全性、缓存系统、命令行工具、插件和扩展以及文档和社区支持等特性，Symfony 可以帮助你更加高效、有组织地开发应用。
			
		






				
postman接口测试工具详解
				
			


					数字人生
				

					07-24


					1608

				



			
Postman 是一款非常流行的API开发和测试工具，广泛用于API的构建、测试、修改和调试。综上所述，Postman凭借其强大的功能、用户友好的界面以及广泛的集成能力，成为了API开发和测试领域的重要工具。Postman是一款广泛使用的API开发工具和接口测试工具，具有强大的功能和用户友好的界面，适用于开发、测试和文档编写等多种场景。：对于POST等方法，可以设置请求体，支持form-data、x-www-form-urlencoded、raw（文本、JSON、XML等）和binary（文件上传）。
			
		






				
Laravel为什么会成为最优雅的PHP框架?
				
			


					数字人生
				

					07-24


					753

				



			
综上所述，Laravel以其优雅的语法、丰富的功能模块、良好的文档和社区支持、便捷的开发工具、独特的路由系统以及强大的模板引擎等特点，成为了最优雅的PHP框架之一。综上所述，Laravel 之所以成为最优雅的 PHP 框架之一，是因为它提供了简洁的语法、强大的功能集、高度模块化和可扩展性、优雅的 ORM、内置认证系统、丰富的社区支持和测试友好等诸多优点。Laravel 提供了一套简洁且功能强大的 API，使得开发者能够用较少的代码完成更多的功能，同时保持代码的可读性和可维护性。
			
		






				

DeepSeek 助力 Vue 开发：打造丝滑的分割线（Divider）
				
			


					宝码香车的博客
				

					02-25


					1918

				



			

DeepSeek 建立了严格的数据治理体系。在数据收集阶段，采用多源数据采集策略，确保数据的多样性。除了从互联网上收集大量的文本数据外，还与专业的数据库合作，获取高质量的专业领域数据。在金融领域，与金融数据提供商合作，获取准确的金融市场数据和企业财务数据。在数据清洗阶段，运用基于主动学习的数据清洗框架，通过置信度阈值筛选和不确定性采样，去除数据中的噪声和错误标注，将标注准确率提升至 98.6%。在数据增强阶段，开发领域自适应增强模块，运用对抗生成网络（GAN）合成长尾场景数据，使小样本场景识别率提升 37%
			
		






				

前端或者后端通常用到数组使用方式
				
			


					baidu_34873973的博客
				

					02-27


					519

				



			
arr.splice( 0 , 1 , 11 ) // 从 0 的位置,删除一个元素,并添加一个 11 元素 返回值为删除的元素数组 [5]arr.slice( 1 , 3 ) // 从索引为 1 的位置,取到 3 的位置,但不包含 3 ,返回值为 新数组 ['b', 'c']Array.from('abcdef') // 返回值['a1', 'b1', 'c1', 'd1', 'e1', 'f1']console.log(arr) // ['a', 'b', 'c', 'd'] 原数组不会改变。
			
		






				

前端学习——HTML
最新发布
				
			


					qq_44807946的博客
				

					03-02


					291

				



			
代码格式化：Shift+Alt+F向上或向下移动一行：Alt+Up或Alt+Down快速复制一行代码：Shift+Alt+Up或者Shift+Alt+Down快速替换：Ctrl+H。
			
		






				
AI驱动的前端技术选型：告别选择困难症，拥抱高效开发时代
				
			


					liangruimi的专栏
				

					02-27


					659

				



			
在快节奏的互联网时代，选择合适的前端技术栈对于项目的成功至关重要。然而，面对层出不穷的新技术和框架，前端开发者常常面临着技术选型难题，例如技术更新迭代快，选择困难，以及传统方法效率低下等问题。因此，利用等AI工具辅助前端技术选型，已成为提升效率、降低风险的关键。本文将探讨如何借助AI的力量，轻松应对前端技术选型挑战，高效完成项目开发。
			
		






				
关于后端使用Boolean或boolean时前端收到的参数的区别
				
			


					2302_79900935的博客
				

					03-02


					177

				



			
封装类和基本数据类型在使用时需要注意一些细微的差别
			
		






				
Apifox 后置操作中发送请求
				
			


					weixin_42286658的博客
				

					02-28


					249

				



			
遇到这样一个问题，A 接口提交完数据，立马要通过B接口查出最新提交的数据，前端跟我说刚提交完B接口查不到最新数据，过一会才能查到。为了复现这个问题我通过Apifox发送请求A接口提交数据，在这个请求上添加后置操作 自定义脚本。这样每次提交完A接口，立马请求B接口，并把查到的数据打印到控制台，就可以看到能不能查到最新的数据。
			
		



    window.csdn.csdnFooter.options = {

        el: '.blog-footer-bottom',

        type: 2

    }



            

        


                
辣辣1




CSDN认证博客专家


CSDN认证企业博客

            

                码龄3年




                    暂无认证


            



  
4
原创
            
        

118万+
周排名
            
        

10万+
总排名
            
        
2402
访问



            
等级



103
积分
24
粉丝
58
获赞
0
评论
31
收藏






                        



                        






        私信
        

            关注
        





        

    



热门文章


				

				人工智能之web前端开发（deepSeek与文心一言结合版）
1037


				

				js如何将deepSeek生成的报告添加封面并下载成word
549

			

				

				接入deepSeek后，前端如何给“深度思考“内容单独设置样式？
400

			

				

				微信小程序--接入SSE在微信开发者工具中对话框正常展示，但在真机上无法展示
385

			



最新评论


                接入deepSeek后，前端如何给“深度思考“内容单独设置样式？

                    election3: 

                




大家在看


				

				PyTorch系列教程：揭秘PyTorch主要模型组件
209

			

				

				为什么数组传参不需要指定第一个维度信息
1

			

				

				Oracle数据库安全防护体系构建与核心技术解析
2

			

				

				大模型系列——Imagen 3虚拟试穿实现
56


				

				Navicat Premium v17.0.12 中文注册版

			



最新文章


            js如何将deepSeek生成的报告添加封面并下载成word
            

            接入deepSeek后，前端如何给“深度思考“内容单独设置样式？
            

            微信小程序--接入SSE在微信开发者工具中对话框正常展示，但在真机上无法展示
            


2025年4篇







     (adsbygoogle = window.adsbygoogle || []).push({});





目录









	$("a.flexible-btn").click(function(){

		$(this).parents('div.aside-box').removeClass('flexible-box');

		$(this).parents("p.text-center").remove();

	})











目录












.wwads-img img {width: 150px; margin-top:10px}



最新文章


            js如何将deepSeek生成的报告添加封面并下载成word
            

            接入deepSeek后，前端如何给“深度思考“内容单独设置样式？
            

            微信小程序--接入SSE在微信开发者工具中对话框正常展示，但在真机上无法展示
            


2025年4篇








目录












        var timert = setInterval(function() {

          sideToolbar = $(".csdn-side-toolbar");

          if (sideToolbar.length > 0) {

            sideToolbar.css('cssText', 'bottom:64px !important;')

            clearInterval(timert);

          }

        }, 200);





		评论


	


被折叠的  条评论
为什么被折叠?

到【灌水乐园】发言
		


			查看更多评论
		





      添加红包

    

        祝福语

          
        
请填写红包祝福语或标题


        红包数量

          个
        
红包个数最小为10个


        红包总金额

          元
        
红包金额最低5元


        余额支付

          当前余额3.43元
前往充值 >
        



          需支付：10.00元
        
        

      




    
  

    
  







成就一亿技术人!




            领取后你会自动成为博主和红包主的粉丝
规则
          






hope_wisdom
 发出的红包
            



          







实付元

使用余额支付



            点击重新获取
          


扫码支付





        钱包余额
0

            

抵扣说明：
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。




      余额充值
    

      


文章来源于互联网:人工智能之web前端开发（deepSeek与文心一言结合版）
相关推荐: 文心一言插件开发全流程
文心一言插件开发全流程 文心一言插件开发全流程ERNIE-Bot-SDK可以调用文心一言的能力 项目地址: https://gitcode.com/Resource-Bundle-Collection/69ac8 简介 本资源文件详细介绍了如何开发和注册文心一…

人工智能之web前端开发（deepSeek与文心一言结合版）

一.项目功能：

二.效果展示：

三.技术分析：

四：疑难点及解决方案：

五.完整代码示例：

师爷模型深度思考中...

师爷模型深度思考中...

相关推荐

对比kimi、通义千问、文心一言的写代码能力

热门文章

AI大模型,我们的未来