一、引言

        本文的目的在于快速搭建一个前端Ai对话模型，模型基于已有的LLM模型和自己构建的知识库回答用户问题。本文将分为以下部分：

        Dify本地部署、LLM模型的调用、上线Ai小助手。

二、Dify本地部署

        部署Dify需要先安装好docker ，安装docker的教程可以参考其他博主，这一步比较简单不再赘述。参考链接：Docker 安装 (完整详细版)_docker安装-CSDN博客

        下一步需要从github仓库拉取代码：

git拉取：

git clone https://github.com/langgenius/dify.git

或者直接zip下载，一样的。

然后需要在后台运行docker：

打开刚刚拉取完docker的源代码，进入到docker目录下：

然后cmd到这个目录之下 输入以下命令：

docker compose up -d

以上表示你的Dify运行成功！   

Dify默认运行在80端口 ，所以直接在浏览器输入http://127.0.0.1就可以访问到dify ，在浏览器输入：

http://127.0.0.1/apps

会让你注册登录，按要求注册登录即可，成功登录：

下一步需要配置LLM模型，以及Embedding模型。

三、LLM模型的调用

        点击自己的头像，点击设置。

在模型提供商里可以看到有很多家公司可供使用。

        2.1本地部署LLM使用。

                这里推荐使用OLLAMA本地化部署，首先你需要下载好OLLAMA并做好相应的配置。OLLAMA官网：Ollama    直接download即可，很好下载。但是必须要做好相关的配置任务。比如在自己的环境变量里配置好OLLAMA模型的端口。相关问题可参考以下博客：RagFlow添加OLLAMA模型失败--解决方案-CSDN博客               

                 你可以在OLLAMA中下载自己想使用的模型，比如qwq、deepseek等，我这里以deepseek为例：

复制右侧的运行 命令，在命令行终端运行，下载。

ollama run deepseek-r1:1.5b

可以看到正在下载：

下载完成后再次输入以上命令可以进入对话终端。

然后就可以在Dify中添加模型了

如下先添加chat模型：之后也需要添加Text Embedding模型 不然在解析自己的文本知识库的时候会非常的慢。

ollama添加text embedding模型运行以下命令：

ollama pull nomic-embed-text

至此LLM模型添加成功。

其实也可以直接添加deepseek的APi直接调用 会很方便很多 但是花钱，LLM模型调用deepseek 的api：

 

也可以使用阿里的通义千问模型，里面有大模型 也Embedding模型，比较方便

三、Ai小助手

        以上内容全部配置完成以后，现在可以开始配置自己的Ai小助手了。首先需要搭建自己的知识库，

然后添加自己的知识库文件，处理文本

然后开始创建自己的应用：

 

然后点击发布点击更新，里面有个嵌入的方式，认为比较方便可以快速构建ai小助手。

 

这个直接copy到html页面即可，但是后面提供了一种vue的导入Component的方法，如下：

<template>
    <div></div>
</template>

<script setup>
import { onMounted } from 'vue';
// 设置全局配置
window.difyChatbotConfig = {
    token: 'xxxxxxxxx',
    baseUrl: "https://xxxxxxx/",
    systemVariables: {
        // user_id: 'YOU CAN DEFINE USER ID HERE',
    },
};

// 动态加载外部 JS
const loadScript = () => {
    const script = document.createElement('script');
    script.src = "https://xxxxxxxx/embed.min.js";
    script.id = 'xxxxxxxxxx';
    script.defer = true;
    document.body.appendChild(script);
};

// 在组件挂载后加载
onMounted(() => {
    loadScript();
});
</script>

<style>
#dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
}

#dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
}
</style>

 以上便是所有内容 ，以下是测试效果：