工作记录（二）——关于大模型的学习（二）以及vue的回顾

工作记录（2）：学习transformer的学习训练过程，回顾vue知识

接上文

二、Transformer

2.Decoder self-attention

预测下一个词，只能考虑前面的单词对当前词的影响，在矩阵中，后面单词的影响用0表示，可以通过MasMatrix（掩码矩阵）实现，encoder中该矩阵为全零，decoder中矩阵为

3.三种Attention的计算方式

encoder和encoder-decoderM掩码矩阵为零矩阵

4.Layer Normalization

作用：归一化，控制数值区间，使学习更加稳定

实现：计算每一行的均值和方差（标准差），对于初始矩阵Z中的每个元素，减去均值后初除以准差进行归一化，输出时乘以α，加上β。后面两个参数可以在学习中获得最优值。

5.Decoder  预测输出下一个单词

从log_pros中获取概率最大的下标，输出下标对应的单词。但是采样法可能有多样化输出，不一定是概率最大的。

（1）Greedy Decoding

每次输出概率最大的，输入y1，得到概率分布，输出概率最大的y2，之后再输入y2，以此类推。

缺点：如果y2生成的不太对，那么可能对后续其他生成都有影响。

（2）Beam search

例子：beam size（3）：输入I，得到概率分布，选出几个概率值（本例为top3：like、hate、am），每个单词本身有概率，计算log probability，值变为负数（比如-1.2、-1.5、-0.7）。假设下一个单词是like，还会有一个分布（top3：this、food、him，取log后为-0.7，-0.6，-0.3）；假设下一个单词是hate，同样取top3（him、this、the|-0.3、-0.1、-1.2）；对于am同理。现在扩展为了9个，在这一轮节点中做取舍，取舍标准为：留下目前为止这条路径的分值之和最大的前3个。对这三个继续延展，重复之前的操作。

如果size为k，最后生成的规模为length（T），那么复杂度为O（k^2*T）。

6.Label smoothing

我们实际知道期望生成的真实值（标签label），在训练阶段我们依次输入的是标签值。

loss为损失函数，有多种不同的计算方式，比如均方误差、交叉熵误差。

注意：左右两个向量本质上是不一样的，左边是0-1向量，右边是一个概率分布向量。我们希望得到接近左边的值，在softmax之前，这个值是0对应负无穷，1对应正无穷，而这个值是通过线性变换得到的，数值不稳定，使训练也不稳定。

如何解决这个问题，其中一个简单方法是，就是不希望算法逼近左边0-1向量，而是缓和一点：label  smoothing。

比如：soft label

三、vue安装与回顾

1.1 安装 Vue与创建vue项目

（1）CDN 引入：CDN（Content Delivery Network）：内容分发网络，可快速分发静态资源

\<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">\</script>

（2）官网安装与配置：

我跟着一位博主的文章安装配置的，非常详细，链接：Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了-优快云博客

（3）创建vue项目

命令如下，以创建vue3项目为例

npm create vue@latest
cd 项目根目录下
npm install
npm run dev

1.2 Vue 模板语法

Vue 实例：Vue 应用的根对象，管理着应用的所有组件和数据

挂载点：Vue 实例控制的 DOM 元素

数据对象：存储组件状态的数据集合

方法：可以在模板中调用的函数

<div id="app">

   {{ message }}  <!-- 文本插值 -->

   <p v-bind:title="message">悬停查看提示\</p>

  <button v-on:click="reverseMessage">反转消息\</button>

</div>

文本插值：使用双大括号语法将数据渲染到 DOM 中

指令：带有 v - 前缀的特殊属性，用于响应式地作用于 DOM

2.1常用指令

（1）v-if / v-else / v-show：条件渲染

区别：v-if是真正的条件渲染，会销毁 / 重建元素；v-show只是切换 display 属性

（2）v-for：列表渲染

<li v-for="(item, index) in items" :key="item.id">

    {{ index }} - {{ item.text }}

</li>

key 属性：帮助 Vue 识别节点身份，优化重渲染过程

（3）v-bind：动态绑定属性（简写 :）
（4）v-on：事件监听（简写 @）

<button @click="doSomething">点击\</button>

（5）v-model：表单输入双向绑定

2.2Vue 组件化开发

（1）单文件组件 (SFC)：将模板、脚本和样式封装在单个.vue 文件中

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

（2）组件通信机制

父传子（Props）
Props：父组件向子组件传递数据的自定义属性。
Prop 验证：能指定类型、必需性等约束条

Vue.component('child', {
  props: {
    // 基础类型检查
    title: String,
    // 多个可能的类型
    likes: [String, Number],
    // 必填且为 Number
    age: {
      type: Number,
      required: true
    }
  },
  template: '<div>{{ title }}, {{ likes }}, {{ age }}</div>'
})

子传父（自定义事件）
$emit：触发当前实例上的事件，附加参数会传给监听器回调。

// 子组件
this.$emit('update', newValue)

// 父组件
<child @update="handleUpdate"></child>

2.3 插槽（Slot）系统

插槽：内容分发的 API，使组件能够接收模板片段。
具名插槽：带有 name 属性的插槽，用于存在多个插槽的情形。
作用域插槽：让插槽内容能够访问子组件中的数据。

<!-- 子组件 -->
<div class="container">
  <slot name="header" :user="user"></slot>
  <slot></slot>
</div>

<!-- 父组件使用 -->
<child-component>
  <template v-slot:header="slotProps">
    <h1>欢迎回来，{{ slotProps.user.name }}</h1>
  </template>
  <p>这是默认插槽内容</p>
</child-component>

2.4 生命周期钩子

生命周期钩子：Vue 实例在创建、更新、销毁过程中自动调用的函数。
常用钩子：
created：实例创建完成后调用，此时 DOM 还未生成。
mounted：实例挂载到 DOM 后调用。
updated：数据更改导致 DOM 重新渲染后调用。
destroyed：实例销毁后调用。

2.5Vue Router 核心概念

javascript
router.beforeEach((to, from, next) => {
  // ...
  next()
})

路由：依据 URL 路径显示不同内容。
动态路由：能够匹配不同模式的路由。示例：{ path: '/user/:id', component: User }
导航守卫：控制路由跳转的钩子函数，如上所示。