【01基础配置篇】0到1打造基于文心大模型和飞桨小模型的智能在线编辑器

已于 2024-06-05 00:08:17 修改
阅读量4.5k 收藏 48
点赞数 35
文章标签： paddlepaddle 编辑器 中间件 文心一言 vue.js node.js
于 2024-06-04 23:48:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38898884/article/details/139456620
版权

【01基础配置篇】AI创意编辑器：开启数字创作新纪元

配套教学视频：https://www.bilibili.com/video/BV16z421872n/

一、背景介绍

AI技术日益成熟，我们迎来了一个全新的数字创作时代。在这个时代里，传统的创作方式正在经历着前所未有的变革，AI技术的融入让创作变得更加高效、便捷和个性化。为了满足广大创作者对高效、智能、个性化编辑的迫切需求，我们致力于打造一个集高交互性、美观性、易用性、智能化、多协同于一体的AI创意编辑器。外卖开发的编辑器需要让每一位创作者都能轻松驾驭智能化创作的魅力，释放无限创意。
AI创意编辑器需要以用户为中心，注重用户体验和个性化设置。每位创作者都有自己独特的创作风格和需求，因此编辑器需要提供丰富的自定义选项和强大的AI辅助功能，帮助用户轻松实现个性化的编辑和创作。为了开发这款AI创意编辑器，创作者可以内置大模型算法和一些ai功能，使之能够智能识别文本内容、分析语法结构，并提供精准的编辑建议。无论是文字排版、段落调整，还是内容优化、风格转换，AI创意编辑器都能够迅速响应并给出专业的指导。
同时，设计开发的AI创意编辑器尽量支持多种格式的导入和导出，方便用户与其他创作工具的无缝对接。用户可以将自己的作品轻松分享到各大社交媒体平台，与更多人分享自己的创意和成果。
本文将详细阐述一款AI创意编辑器的整体框架构建，并通过引入一个具体的AI功能作为起点，旨在激发大家对于开发多样化、高交互性、美观性、易用性、智能化以及多协同功能的AI创意编辑器的热情与想象。

二、环境准备

1、Node.js准备

Node.js 简称Node,是一个可以使JavaScript运行在服务器端的开发平台,JavaScript是一种Web前端语言,Node.js让JavaScript成为服务器端脚本语言。
官网地址:https://nodejs.org/en，官网首页如下所示。
image.png
进入官网后进行下载，推荐使用历史版本，更加稳定，当然也可以使用最新版本，这里直接选择下载**v20.13.1，**是目前的最新版本，下载好msi程序安装文件。
image.png
下载好后打开安装程序进行安装。
image.png
image.png
image.png
点击Add to PATH再进行下一步，配置环境变量。
image.png
image.png
image.png
image.png
进行安装即可。
打开命令提示符(cmd),输入：node --version，查看node版本，如果出现版本信息，则代表安装完成。
新版的nodejs已经集成了npm，所以npm也一并安装好了。同样可以使用cmd命令行输入npm -v来测试是否安装成功，如果出现版本信息，代表安装完成。
image.png
设置淘宝镜像，执行下面代码：

npm config set registry https://registry.npmmirror.com/

2、vscode安装

Visual Studio Code（以下简称vscode）是一个轻量且强大的跨平台开源代码编辑器（IDE），支持Windows，OSX和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统。使用vscode进行Vue项目构建和代码编写。
官网地址：https://code.visualstudio.com/
image.png
下载好安装包后进行安装，直接选定好路径进行安装即可，可以选择性安装需要的工具组件，比如说代码提示、代码美化等工具。
可以先设置成中文语言环境，打开vscode，然后输入快捷键【Ctrl+Shift+P】,在弹出的搜索框中输入【Configure Display Language】，然后选择搜索出来的【Configure Display Language】
image.png
选择中文。
image.png
重启即可。
image.png
image.png
安装完成后，可以取消Typescript语法校验，少一些类型不匹配等问题的报错。方法如下，在vscode左下角找到设置的图标，打开设置。
image.png
image.png
保存后，重启一下vscode即可。

3、创建Vue新项目

寻找合适的路径创建EditJob文件夹，并在vscode打开这个文件夹。
image.png
在vscode打开终端或者直接在vscode中打开终端，
image.png
image.png

在vscode左上角选择终端->新建终端，执行代码创建项目：

npm create vite EditFront

后续安装其他依赖、运行项目、发布项目都在此终端进行。
配置如下，先输入y，接着默认项目名称，回车。
image.png
再选择Vue、TypeScript。
image.png
image.png
就在Editjob下创建了Editfront项目，重新用vscode打开Editfront项目。
image.png
用vscode打开此项目，在终端执行如下代码安装必须的库包：

npm install -force

如下安装好依赖。
image.png
执行如下代码 运行项目:

npm run dev

运行好项目后打开给出的地址即可访问项目。
image.png
初始化项目如下所示，代表项目构建完成。
image.png
至此，前端环境准备完成。
需要下载几个vscode的插件方便编写代码和查找错误，在左侧第四个图标，点击后搜索对应插件进行安装即可。
image.png
vscode插件 Vetur(v0.35.0)不支持最新写法 卸载 并 安装 Vue - Official 插件。
①、Vue-Official

  • 提供 Vue 文件的语法高亮。
  • 支持 Vue 文件的智能感知和自动完成。
  • 提供了 Vue 文件的格式化工具。

image.png
②、Baidu Comate
基于文心大模型，结合百度编程大数据，为你生成优质编程代码。
image.png

4、Vue项目配置(vueRouter+pinia+axios+element-plus+Sass+Remix Icon）

4.1 路由配置

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

安装vue-router依赖,在vscode终端执行如下安装语句:

npm install vue-router -force

image.png
先在项目的src文件下创建views文件夹，新建两个测试页面HomePage/index.vue和Edit/index.vue:
image.png
HomePage下的index.vue内容如下:

<template>
  <div class="mainbody">
    <h1 class="headtitle">首页</h1>
  </div>
</template>
<script setup lang="ts">

</script>

<style scoped>
  .mainbody {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .headtitle {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
</style>

Edit下的index.vue文件内容如下:

<template>
  <div class="mainbody">
    <h1 class="headtitle">编辑器页面</h1>
  </div>
</template>
<script setup lang="ts">

</script>

<style scoped>
  .mainbody {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .headtitle {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
</style>

在项目的src文件下创建router/index.ts文件:
image.png
编写如下代码

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

// createRouter 创建路由实例，===> new VueRouter()
// history 是路由模式，hash模式，history模式
// createWebHistory() 是开启history模块 
// createWebHashHistory() 是开启hash模式   

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/HomePage/index.vue')
  },
  {
    path: '/Edit',
    name: 'Edit',
    component: () => import('../views/Edit/index.vue')
  }
] as RouteRecordRaw[]
const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

export default router

在main.ts中引入router。
image.png
编写代码如下:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

修改App.vue:
image.png
代码如下所示:

<script setup lang="ts">
</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>

重新运行项目后,进行测试两个页面:
http://localhost:5174/页面如下:
image.png
http://localhost:5174/Edit页面如下:
image.png
至此，路由配置完成。

4.2 Pinia配置

Pinia是Vue.js的专属状态管理库，允许跨组件或页面共享状态，提供了更简洁的API和TypeScript支持，是Vuex的轻量级替代品，Vuex对TS的语法支持不是完整的。
安装 Pinia，在vscode终端执行如下安装指令:

npm install pinia -force

image.png
安装完成后修改main.ts如下，引入Pinia:

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import './style.css'
import App from './App.vue'
import router from './router'

const pinia=createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

在src目录下，新建一个store文件夹。在此文件夹下再创建一个index.ts文件。
image.png
在index文件下主要进行三项操作:

  1. 定义状态容器(仓库)
  2. 修改容器(仓库)中的 state
  3. 仓库中的 action 的使用

在Store里定义一个State，这里就编写"你好 Pinia!",代码如下:

import { defineStore} from 'pinia'

export const mainStore = defineStore('main',{
  state:()=>{
    return {
        helloPinia:'你好 Pinia!'
    }
  },
  getters:{},
  actions:{}
})

接下来就可以在vue3组件里读取Store数据了。
在之前准备好的HomePage/index.vue文件中编写如下代码:

<template>
  <div class="mainbody">
    <h1 class="headtitle">首页</h1>
    <div>
      <h2 class="">{{ demoStore.helloPinia}}</h2>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { mainStore} from '../../store/index'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'
  //storeToRefs只会关注sotre中数据，不会对方法进行ref包裹

  /* 得到countStore */
  const demoStore =mainStore()
</script>

<style scoped>
  .mainbody {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .headtitle {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
</style>

重新运行后，页面执行效果如下：
image.png
至此，Pinia配置完成。

4.3 网络请求配置

axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发送HTTP请求。它支持各种HTTP请求方法，如GET、POST、PUT、DELETE等，并且可以拦截请求和响应，设置请求超时等功能。它可以与现代前端框架（如Vue.js、React、Angular等）进行集成。
先安装axios,在vscode的终端进行安装。

npm install axios -force

image.png
可以直接使用axios进行请求，在需要使用的页面引入axios模块:

import axios from 'axios';

并使用类似下面的代码直接请求后端：

const adduser=()=>{
    let formData = new FormData();
    formData.append("username","12345");
    formData.append("password","54321");
    let url = 'http://127.0.0.1:5000/adduser' //访问后端接口的url
    let method = 'post'
    axios({
      method,
      url,
      data: formData,
    }).then(res => {
      alert(res.data)
    });
}
adduser()

不过，axios.get().then() 这样的书写,会有缺陷,在以下缺点:
①、请求头能不能统一处理
②、不便于接口的统一管理 **
以下配置可选择性**使用。
在 src 下创建一个 utils文件夹，并添加一个 request.ts 文件,写入代码如下所示:

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'

class HttpRequest {
    private readonly baseUrl: string;
    constructor() {
        this.baseUrl = 'http://localhost:8080'
    }
    getInsideConfig() {
        const config = {
            baseURL: this.baseUrl,// 所有的请求地址前缀部分(没有后端请求不用写)  
            timeout: 80000, // 请求超时时间(毫秒)
            withCredentials: true,// 异步请求携带cookie
            // headers: {
            // 设置后端需要的传参类型
            // 'Content-Type': 'application/json',
            // 'token': x-auth-token',//一开始就要token
            // 'X-Requested-With': 'XMLHttpRequest',
            // },
        }
        return config
    }

    // 请求拦截
    interceptors(instance: AxiosInstance, url: string | number | undefined) {
        instance.interceptors.request.use(config => {
            // 添加全局的loading..
            // 请求头携带token
            return config
        }, (error: any) => {
            return Promise.reject(error)
        })
        //响应拦截
        instance.interceptors.response.use(res => {
            //返回数据
            const { data } = res
            console.log('返回数据处理', res)
            return data
        }, (error: any) => {
            console.log('error==>', error)
            return Promise.reject(error)
        })
    }

    request(options: AxiosRequestConfig) {
        const instance = axios.create()
        options = Object.assign(this.getInsideConfig(), options)
        this.interceptors(instance, options.url)
        return instance(options)
    }
}

const http = new HttpRequest()
export default http

src文件夹下新建api文件夹，新建api.ts文件，里面写请求后台的接口。
image.png
比如这里的请求地址是/test, 加上axios的baseURL,完整的请求路径就是http://localhost:8080/test,代码如下:

import http from '../utils/request'
//get有值
export function getTest(params: any) {
  return http.request({
    url: '/test',
    method: 'get',
    params
  })
}

//get无值
export function (params: any) {
  return http.request({
    url: '/test',
    method: 'get',
    params
  })
}

在请求的组件上使用的话用下面类似的代码:

import { ref, onMounted } from "vue";
import { getFileList } from "../../api/index";

export default {
  setup() {
    onMounted(() => {
      getTest().then((res: any) => {
        console.log(res);
      });
    });
  },
};

可选择性配置结束，下面是需要配置的。
最后一点需要注意的是，需要解决跨域问题，修改vite.config.ts代理配置。
image.png
代码如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
  },
  css: {
  },
  server: {
    proxy: {
      '/api': {
        // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
        ws: true,
        target: 'http://127.0.0.1:8000', //这里填入你要请求的接口的前缀
        changeOrigin: true,   //是否跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

至此，网络请求配置完成。

4.4 element-plus配置

官网地址:https://element-plus.org/zh-CN/
Element Plus是一个基于Vue.js 3.0的UI库，是Element UI的升级版。它提供了一套漂亮、易于使用和自定义的组件，如按钮、输入框、表格、弹窗、日期选择器等。Element Plus的设计理念注重用户体验和响应式设计，所有组件都可以自适应不同屏幕大小以提供良好的用户体验。
首先进行安装:

npm install element-plus -force

image.png
完整引入
在main.ts中引入，修改代码如下:

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const pinia=createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')

在HomePage/index.vue中进行测试,修改代码如下：

<template>
    <div class="mainbody">
      <h1 class="headtitle">首页</h1>
      <div>
        <h2 class="">{{ demoStore.helloPinia}}</h2>
      </div>
      <el-button type="primary">你好，这里使用Elemet-Plus</el-button>
    </div>
  </template>
  <script setup lang="ts">
    import { mainStore} from '../../store/index'
    /* 引入storeToRefs */
    import { storeToRefs } from 'pinia'
    //storeToRefs只会关注sotre中数据，不会对方法进行ref包裹

    /* 得到countStore */
    const demoStore =mainStore()
  </script>
  
  <style scoped>
  .mainbody {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .headtitle {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  </style>

修改保存后查看页面，如下效果:
image.png
其他一些相关库也可以使用类似方法进行引入，至此，基本的一些Vue项目配置完成了。

4.5 Sass预处理器

Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。
安装方式:
在VSCode终端执行如下安装语句:

npm install -D sass sass-loader -force

image.png
在vue文件的style部分使用，lang=“scss”，表示使用的是sass样式，一般还在style标签添加scoped关键字，目的是避免样式污染，让标签内的样式只生效于当前的vue文件。
使用方式，引入标签，在HomePage/index.vue中进行测试,修改代码如下：

<template>
    <div class="mainbody">
      <h1 class="headtitle">首页</h1>
      <div>
        <h2 class="">{{ demoStore.helloPinia}}</h2>
      </div>
      <el-button type="primary">你好，这里使用Elemet-Plus</el-button>
    </div>
  </template>
  <script setup lang="ts">
    import { mainStore} from '../../store/index'
    /* 引入storeToRefs */
    import { storeToRefs } from 'pinia'
    //storeToRefs只会关注sotre中数据，不会对方法进行ref包裹

    /* 得到countStore */
    const demoStore =mainStore()
  </script>
  
  <style scoped>
  .mainbody {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .headtitle {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  </style>
  <style lang="scss" scoped>
  /* #在此处编写代码 */
  .mainbody{
    background: #76cfe5;
  }
  </style>

打开页面进行测试，保存后不报错，且页面实现对应效果，代表安装完成。
image.png

4.6 Remix Icon图标库

Remix Icon是一个开源的图标库,旨在提供一套统一、高质量、可定制的SVG图标,适用于Web和移动应用设计，所有图标均可免费用于个人和商业用途。官网地址:https://remixicon.com/
image.png
安装方式:在vscode终端执行如下安装指令:

npm install remixicon -force

image.png
使用方式：在需要使用到图标的vue文件中进行引入：

import 'remixicon/fonts/remixicon.css'

4.7 路径别名

在vite.config.ts中加入如下代码:

alias: {
      '@': path.resolve(__dirname, './src')
  }

完整代码为:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
  },
  server: {
    proxy: {
      '/api': {
        // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
        ws: true,
        target: 'http://127.0.0.1:8000', //这里填入你要请求的接口的前缀
        changeOrigin: true,   //是否跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

编辑tsconfig.json,加入如下代码：

    "baseUrl": ".",
    "paths": {
       "@/*": ["src/*"]
    },

意味着@/代表src/，后面加入对应文件地址即可。tsconfig.json完整代码如下:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    
    "baseUrl": ".",
    "paths": {
       "@/*": ["src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

5、后端搭建

5.1 Pycharm下载与安装

后端框架有许多，不过多介绍，这里以python的后端框架flask为例，进行示例的搭建。
PyCharm 是一个非常强大的 Python 集成开发环境（IDE），它为 Flask 应用的开发、调试、优化及拓展提供了丰富的功能和支持。
官网地址:https://www.jetbrains.com/pycharm/，可以免费使用30天。
image.png
点击Download进行下载，大概下载二十多分钟。
image.png

下载好后，安装即可打开安装包进行安装。
image.png
image.png
image.png
image.png
image.png
耐心等待。
image.png
image.png
可以下一个Anaconda进行虚拟环境管理，这里不作介绍了，安装好之后重启电脑即可安装完成。

5.2 Anaconda下载与安装

Anaconda可以便捷获取包且对包能够进行管理，包括了python和很多常见的软件库和一个包管理器conda。常见的科学计算类的库都包含在里面了，使得安装比常规python安装要容易，同时对环境可以统一管理的发行版本。
Anaconda官网如下:https://www.anaconda.com/download
image.png
可以使用清华镜像进行快速下载:
https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/?C=M&O=D
选择适合自己操作系统的安装包。
image.png
点击即可下载，下载完成后运行安装程序。
下一步。
image.png
I Agree
image.png
下一步。
image.png
选择合适的安装路径，下一步。
image.png
记得勾选添加到环境变量。
image.png
进行安装。
image.png
安装完成后点击下一步。
image.png
image.png
安装完成。
image.png
在任务栏找到搜索，搜索Anaconda，打开Anaconda Prompt。
image.png
执行下面代码创建EditJob虚拟环境。

conda create -n EditJob python=3.10

image.png
输入y，回车，耐心等待安装完成。
image.png
可以输入如下指令切换到EditJob环境，输入python可以查看到对应的版本，至此，Anaconda环境配置完成。

conda activate EditJob

image.png

5.3 后端项目搭建

在之前的EditJob中创建EditEnd，打开pycharm，在pycharm中打开这个文件夹。
image.pngimage.png
点击open，选择EditEnd。
image.png
image.png
新建一个python文件，命名为main.py。
image.png
需要先配置interpreter，在File下打开Settings。
image.png
依次点击。
image.png
image.png
找到安装Anaconda的文件夹下的condabin/conda.bat文件，选择后，点击ok。
image.png
接着点击右侧加载环境。
image.png
选择已有环境EditJob即可，点击OK。
image.png
关闭终端，再次打开后，可以发现环境切换至EditJob环境了。
image.png
接下来需要修改一下项目的路径配置，不然后面导入库包会爆红，但是可以正常运行。
右键单击项目，点击项目的Mark Directory as→Sources Root。
image.png
重启一下即可。
重启后，打开终端，在终端安装相关库包:

pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple

image.png
安装flask-cors，Flask-Cors是一个优秀的解决跨域问题的Python库。它可以让Flask应用程序支持跨域请求,并提供了简单易用的API,以便我们在代码中快速配置和调用。

pip install flask-cors -i https://pypi.tuna.tsinghua.edu.cn/simple

image.png
安装pymysql,PyMySQL 是一个纯 Python 实现的 MySQL 客户端操作库，支持事务、存储过程、批量执行等。

pip install pymysql -i https://pypi.tuna.tsinghua.edu.cn/simple

image.png
测试下面代码，在main.py中写入下面代码并执行。

from flask import Flask, json, request, jsonify
from flask_cors import CORS
import pymysql
DEBUG = True
app = Flask(__name__)
app.config.from_object(__name__)
CORS(app, resource={r'/*': {'origins': '*'}})


if __name__ == '__main__':
    app.run(host="127.0.0.1", port=5000, debug=True)

执行结果如下：
image.png
代表后端环境已准备好。

6、前后端交互

Vue已经安装好axios，在HomePage/index.vue编写代码测试，以从前端传入用户的用户名和密码为列子。先引入axios，定义adduser函数，并发送一次请求，测试代码如下:

import axios from 'axios'
//进行测试接口调用
const adduser=()=>{
  let formData = new FormData();
  formData.append("username","12345");
  formData.append("password","54321");
  let url = 'http://127.0.0.1:5000/adduser' //访问后端接口的url
  let method = 'post'
  axios({
    method,
    url,
    data: formData,
  }).then(res => {
    alert(res.data)
  });
}
adduser()

完整代码如下:

<template>
    <div class="mainbody">
      <h1 class="headtitle">首页</h1>
      <div>
        <h2 class="">{{ demoStore.helloPinia}}</h2>
      </div>
      <el-button type="primary">你好，这里使用Elemet-Plus</el-button>
    </div>
  </template>
  <script setup lang="ts">
    import { mainStore} from '../../store/index'
    /* 引入storeToRefs */
    import { storeToRefs } from 'pinia'
    //storeToRefs只会关注sotre中数据，不会对方法进行ref包裹

    /* 得到countStore */
    const demoStore =mainStore()
    import axios from 'axios'
    //进行测试接口调用
    const adduser=()=>{
      let formData = new FormData();
      formData.append("username","12345");
      formData.append("password","54321");
      let url = 'http://127.0.0.1:5000/adduser' //访问后端接口的url
      let method = 'post'
      axios({
        method,
        url,
        data: formData,
      }).then(res => {
        alert(res.data)
      });
    }
    adduser()
  </script>
  
  <style scoped>
  .mainbody {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .headtitle {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  </style>
  <style lang="scss" scoped>
  /* #在此处编写代码 */
  .mainbody{
    background: #76cfe5;
  }
  </style>

后端编写相关测试接口adduser，完整main.py代码如下:

from flask import Flask, json, request, jsonify
from flask_cors import CORS
import pymysql
DEBUG = True
app = Flask(__name__)
app.config.from_object(__name__)
CORS(app, resource={r'/*': {'origins': '*'}})

@app.route('/adduser', methods=['get', 'post'])
def adduser():
    username = request.form.get("username")
    password = request.form.get("password")
    print(username)
    print(password)
    return "已接收用户信息"

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=5000, debug=True)

运行后端项目，接着运行前端项目，打开页面后，前端效果如下：
image.png
后端接受数据和输出如下:
image.png
至此，前后端数据交互完成。

7、数据库环境准备

因为在整个项目过程中需要使用到数据库，数据库种类、管理方式有很多，这里推荐一个比较简单的方式。使用phpStudy，它是一款针对PHP开发的集成环境套装软件，特别为中国用户设计，简化了PHP环境的搭建过程。它集成了Web服务器（如Apache、Nginx）、PHP解释器、MySQL数据库服务器以及其他常用组件如phpMyAdmin和Zend Optimizer等，提供了一个即装即用的环境，让用户无需手动配置即可快速搭建起支持PHP的本地服务器环境。虽然是针对PHP开发的，但是其在配置数据库、Apache、项目部署等功能上具有通用性，能够极大简化开发过程。
官网地址:https://www.xp.cn/。
image.png
下载好后解压压缩包，双击后，默认进行安装。
image.png
image.png
安装好后的界面如下所示:
image.png
在软件管理部分可以下载相关的软件，Mysql版本、Apache等等。运行方式为进行启动Apache、MySQL。
image.png
当然可以根据自己需求进行配置。
同时，在软件管理部分下载 phpMyAdmin进行数据库的可视化管理。
image.png
在首页的数据库工具中打开phpMyadmin，登录的初始账号和密码均为:root
image.png
image.png
登录成功后即可数据库可视化管理，其他创建数据库、数据表等各项功能可以自己摸索一下。
image.png
至此，数据库环境搭建完成。

8、Python后端链接数据库

先在数据库中创建好数据库和对应的数据表，这里以连接数据库用户表为例，测试代码如下所示:

from flask import Flask, json, request, jsonify
from flask_cors import CORS
import pymysql
DEBUG = True
app = Flask(__name__)
app.config.from_object(__name__)
CORS(app, resource={r'/*': {'origins': '*'}})

# #添加用户节点
@app.route('/adduser', methods=['get', 'post'])
def adduser():
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='root', charset='utf8')
    cursor = conn.cursor()
    conn.commit()
    cursor.execute('use gpaper')
    datalist = []
    datalist.append(request.form.get("account"))
    datalist.append(request.form.get("password"))
    print(datalist)
    # 进入数据库bdjs
    # 向newscontent添加数据
    sql = "SELECT * FROM `userinfo` WHERE `account`= '" + str(datalist[0]) + "';"
    res1 = cursor.execute(sql)
    if res1 == 1:
        return "no"
    sql2 = "INSERT INTO `userinfo`(`account`, `password`) VALUES('" + str(datalist[0]) + "','" + str(
        datalist[1]) + "');"
    res = cursor.execute(sql2)
    conn.commit()
    cursor.close()
    conn.close()
    return "ok"


if __name__ == '__main__':
    app.run(host="127.0.0.1", port=5000, debug=True)

这里可以直接使用前端进行请求，也可以使用Apifox或postman等方式进行接口测试。至此，如果连接成功，则完美打通后端与数据库的连接。

9、paddlepaddle-gpu环境搭建

9.1、安装显卡驱动

您需要准备一台配备NVIDA显卡的电脑，尽量显存大于等于4G。如果您的电脑没有显卡驱动，需要安装，如果有，则跳过这一步骤。
N卡的驱动下载过程都是一样的，先进入官网驱动程序下载，选择您电脑显卡版本的驱动进行下载，笔记本需要选择NoteBooks版本，我这台笔记本的显卡为RTX 4060，所以如下选择，您需要根据显卡型号进行配置。
image.png
点击搜索后进行驱动的下载：
image.png
image.png
下载完成后，打开exe安装程序，选择安装路径。
image.png
等待安装。
image.png
等待。
image.png
image.png
image.png
image.png
等待。
image.png
等待安装，此过程需要等待十分钟左右，安装完成后点击关闭即可。
image.png
出现NVIDIA控制面板则代表成功了，可以登录进行查看。
image.png
登录后，也可以查看到驱动程序已经安装。
image.png

9.2、安装CUDA

各个版本CUDA下载地址如下:https://developer.nvidia.com/cuda-toolkit-archive
选择您需要的CUDA版本进行下载，我这里选择CUDA Toolkit 12.0.0版本进行下载。
image.png
点击上图箭头指向后进入下载配置界面。
image.png
根据操作系统环境进行配置后下载。
image.png
下载完成后打开安装程序，选择合适的路径，点击ok。
image.png
等待安装。
image.png
image.png
image.png
点击同意并继续。
image.png
选择自定义安装!
image.png
按照如下进行配置后点击下一步。
image.png
选择好安装位置后，等待下一步，记住这个路径，后面安装cuDNN需要用到：
image.png
等待安装。
image.png
点击下一步。
image.png
至此，安装完成，可以关闭了。
image.png
接下来验证是否安装完成，打开cmd命令提示符，输入下面指令查看版本。

nvcc --version

输出如下，代表安装完成：
image.png

9.3、安装cuDNN

可以到官网查看CUDA和cuDNN的对应关系:
https://developer.nvidia.com/rdp/cudnn-archive#a-collapse742-10
image.png
因为之前下载的是CUDA12.0.0，所以下载for CUDA12.x的都行。可能需要注册账号密码，其实有时候挺卡的，不过注册应该还是比较简单的。注册好后下载时候还需要填一个表单，随便填就行，机构随便输入一个，会自动补全，选上就行，提交后会自动下载好,选一个for CUDA12.x的，然后下载一个for Windows的。
image.png
登录账号后下载,耐心等待一会，大概六百多M。
image.png
接下来配置cuDNN，解压刚才下载好的文件，会得到下列文件。
image.png
将上面三个文件夹复制到CUDA安装路径里面。我的安装路径是默认的，所以在:

C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.0

点击继续复制至此处。
image.png
image.png

9.4、安装paddlepaddle-gpu

打开官网：https://www.paddlepaddle.org.cn/
image.png
打开之前配置好的pycharm，在终端执行安装命令进行快速安装,需要耐心等待，加一个清华镜像会快很多，执行如下指令。

python -m pip install paddlepaddle-gpu==2.6.1.post120 -f https://www.paddlepaddle.org.cn/whl/windows/mkl/avx/stable.html -i https://pypi.tuna.tsinghua.edu.cn/simple

image.png
可以根据开发文档进行上手练习与测试:
https://www.paddlepaddle.org.cn/documentation/docs/zh/guides/beginner/quick_start_cn.html
安装完成后，新建一个test.py，写入下面代码进行测试一下:

import paddle

print(paddle.__version__)
paddle.utils.run_check()

如果出现如下输出，则代表配置完成。
image.png

参考文章

1、https://www.yuque.com/u33023518/qoge4g/ze6bghhvg7h3ta7o?singleDoc#
2、https://blog.csdn.net/weixin_42365757/article/details/123848276
3、https://blog.csdn.net/qq_40295331/article/details/136340494
4、https://blog.csdn.net/Anorry/article/details/131742365
5、https://blog.csdn.net/weixin_48998573/article/details/129950675
6、https://blog.csdn.net/xhc6666/article/details/135442684

Jungle是丛林
关注
G.3 PaddleHub--飞桨预训练模型应用工具{风格迁移模型、词法分析情感分析、Fine-tune API微调}【一】
丨汀、的博客
05-31 2216
【模型种类丰富】: 涵盖CV、NLP、Audio、Video、工业应用主流五大品类的 350+ 预训练模型，全部开源下载，离线可运行 【超低使用门槛】：无需深度学习背景、无需数据与训练过程，可快速使用AI模型 【一键模型快速预测】：通过一行命令行或者极简的Python API实现模型调用，可快速体验模型效果 【一键模型转服务化】：一行命令，搭建深度学习模型API服务化部署能力 【十行代码迁移学习】：十行代码完成图片分类、文本分类的迁移学习任务 【跨平台兼容性】：可运行于Linux、Window..
未来已来：LLMops如何重塑AI-native新范式的运维格局[行业范式]、以及主流LLMops推荐
丨汀、的博客
07-22 955
未来已来：LLMops如何重塑AI-native新范式的运维格局[行业范式]、以及主流LLMops推荐
四步搞定国赛！快速入门大小模型融合的AI产品开发
PaddlePaddle
01-29 706
从比赛中，获得AI产品开发的全栈经验。
AI基础软件：如何自主构建大+小模型？
weixin_46880696的博客
10-24 419
例如，数据科学家可以按照自己的建模习惯进行建模，开发人员可以从工程的角度去构建大模型，而业务专家则可以从业务的角度出发，在平台上构建自己的大模型和小模型。DingoDB是大模型时代的必备软件，作为一个分布式向量数据库，存储多模态的任意大小的数据，具备高并发、低延迟的实时分析能力，处理多模数据，通过 SQL 实现结构化和非结构化数据的 ETL。通过可视化界面，用户可以设定私域数据、预训练模型以及相应的训练参数，进行记忆训练，并且可以选择性扩充词表，避免灾难性遗忘，提高模型推理精度。
【03编辑器与大模型篇】0到1打造基于文心大模型和飞桨小模型的智能在线编辑器
weixin_38898884的博客
06-19 3236
文心大模型的植入和编辑器功能的实现！
国内 AI大模型产业发展深度分析 2024_模型层与应用层边界减弱,形成紧跟世界前沿的多模态大模型产业群；
qingkahui24689的博客
07-27 703
文心一言是百度研发的人工智能大语言模型产品，具备跨模态、跨语言的深度语义理解与生成能力，在文学创作、文案创作、搜索问答、多模态生成、数理逻辑推算等众多领域都能为用户提供高质量服务。文心一言拥有四大基础能力：理解能力、生成能力、逻辑能力、记忆能力。（2）大模型优势：2023 年 10 月发布的“文心大模型 4.0”，相比上一代文心大模型，四大能力显著升级，其中逻辑提升幅度是理解的 3 倍，记忆提升幅度是理解的 2 倍。
国内 AI大模型产业发展深度分析 2024
2401_85280106的博客
07-16 845
文心一言是百度研发的人工智能大语言模型产品，具备跨模态、跨语言的深度语义理解与生成能力，在文学创作、文案创作、搜索问答、多模态生成、数理逻辑推算等众多领域都能为用户提供高质量服务。文心一言拥有四大基础能力：理解能力、生成能力、逻辑能力、记忆能力。（2）大模型优势：2023 年 10 月发布的“文心大模型 4.0”，相比上一代文心大模型，四大能力显著升级，其中逻辑提升幅度是理解的 3 倍，记忆提升幅度是理解的 2 倍。
邬贺铨院士：大模型赋能企业数字化转型
python12345_的博客
06-19 1348
大模型为SaaS带来了全新的定义。SaaS作为一种将软件应用程序作为服务提供的模式，广泛涵盖了企业资源规划(ERP)、客户关系管理(CRM)、协作工具和电子邮件等领域，具备即插即用、按需定制、资源共享等特点，适用于降低部署和维护成本、快速获取软件功能的场景，例如办公协作、客户关系管理和人力资源管理等。然而，B端应用(面向企业用户的互联网产品)在模型专业深度、迭代效率、数据安全以及高算力成本等方面存在一系列问题。
自然语言处理NLP——ERNIE-M：基于回译机制的“预训练-微调”多语言模型
转载请标明出处，完整项目/代码详见github：https://github.com/yiru1225
12-01 4708
本篇博客主要介绍一种基于回译机制的预训练-微调多语言模型——ERNIE-M。
文心大模型python源码
11-02
本篇文章将深入探讨文心大模型的Python源码，帮助读者理解其工作原理，为AI和深度学习的实践提供理论基础。 首先，我们要明确"大模型"的概念。大模型通常指的是参数量非常庞大的神经网络模型，如BERT、GPT系列和...
基于文心大模型的AI机器人画画python源码
09-04
基于文心大模型的AI机器人画画python源码 前提: nonebot2的部署 这里推荐两篇机器人部署教程 通过nb-cli安装（推荐） nb plugin install nonebot-plugin-drawer 通过pip安装 1.pip install nonebot-plugin-drawer ...
《AI大模型应用》--人工智能实训作业，基于SwinTransformer和文心一言的中草药识别与推荐系统.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所...
基于文心大模型的AI机器人画画插件。.zip
03-14
总的来说，基于文心大模型的AI机器人画画插件结合了人工智能、多模态技术和垂直领域的专业知识，为艺术创作者提供了一种全新的创作方式。通过这种技术，我们不仅可以见证AI在艺术领域的独特魅力，也能感受到科技对...
基于飞桨paddle2.6.1+cuda11.7+paddleRS开发版的目标提取-道路数据集训练和预测代码
hsg77的专栏
09-04 1388
基于飞桨paddle2.6.1+cuda11.7+paddleRS开发版的目标提取-道路数据集训练和预测代码
LaTeX 编辑器-TeXstudio
ejinxian的专栏
09-25 457
TeXstudio 是一款开源跨平台 LaTeX 编辑软件，界面与 Texmaker 类似。TeXstudio 为用户提供互动式拼写检查、代码折叠、语法高亮、代码提示和自动完成等特性，功能丰富，界面美观，但软件本身不提供底层功能，需要使用者自行安装 LaTeX（XeLaTeX）等编译软件，例如 MiKTeX 或 TeXLive ，软件源于 Texmaker，基于 Qt 开发。TeXstudio 是开源的，适用于所有主要操作系统。
Chat2DB：AI驱动SQL编辑器，开启智能数据库管理新时代
进击的码农
09-25 950
SQL编辑器是帮助数据库开发者编写、执行和调试SQL语句的工具。虽然许多开发环境和网页工具都支持SQL编写，但要做到优秀的SQL编辑器并非易事。一个理想的SQL编辑器不仅需要提供语法高亮、自动补全等基础功能，还需要具备高效的语法校验、错误提示、代码格式化和高性能的执行结果展示能力。
CORE 中间件、wwwroot
最新发布
u013400314的博客
09-26 844
index.htmindex.html//定义默认页面// 可以访问静态文件》》》必须在启用静态文件中间件之前，先启用默认文件中间件// 清空默认的// 可以访问静态文件**注意：**您需要在UseStaticFiles（）中间件之前添加UseDefaultFiles（）中间件，以便提供默认文件。您需要记住的一点是UseDefaultFiles（）中间件只是URL重写器，它永远不会提供静态文件。
Tomcat中间件常见漏洞复现
qq_65852138的博客
09-22 395
Tomcat中间件常见漏洞复现
基于文心千帆大模型的图像风格迁移研究目的和意义
11-30
基于文心千帆大模型的图像风格迁移研究具有以下目的和意义： 1. **丰富艺术创作形式**：传统的艺术创作通常需要画家手动绘制，借助图像风格迁移技术，可以让计算机生成符合要求的艺术作品，从而丰富艺术创作的形式和内容。 2. **提升图片处理效率**：在许多领域，如社交媒体、广告和修复应用，现有的图像风格迁移技术可以大大提升图片处理的效率。 3. **辅助设计**：通过将一种风格的图像迁移到另一种风格的图像上，设计师和工程师可以更快地创建新的设计或原型。 4. **推动计算机视觉发展**：图像风格迁移是计算机视觉领域的一个重要研究方向，它的研究有助于推动该领域的发展。 5. **帮助视觉障碍人群**：对于视觉障碍人群，图像风格迁移技术可以帮助他们更好地理解和感受图像。 6. **教育应用**：在教育领域，图像风格迁移技术可以帮助学生更好地理解和掌握艺术和设计知识。 基于文心千帆大模型的图像风格迁移研究目的主要是利用大模型强大的特征提取和生成能力，以及精细的控制能力，实现更高效、更高质量的图像风格迁移。这有助于提升研究的质量和影响力，也可能推动相关产业的发展。 以上介绍是基于文心千帆大模型的图像风格迁移的研究目的和意义，希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值