anichart.js 是一款将数据转化为动态柱状图/线性图的 js/ts 工具，可导出视频。

github: https://github.com/Jannchie/anichart.js

中文使用指南：https://github.com/Jannchie/anichart.js/blob/main/README-CN.md

docs 目录中有更详细的使用方法（英文）。

在线演示：https://xoyozo.net/Demo/BarGraph

目前 release 版本 3.0.0。

这里有一点常用设置示例：https://codesandbox.io/s/anichart-2x-m3xbz?file=/main.js

设置画布尺寸

stage.canvas.width = 1000;
stage.canvas.height = 500;

重设尺寸不会重新计算内部元素的大小和位置，因此对响应式布局不太友好。

配置柱状图

示例：

const barChart = new ani.BarChart({
    dy: 2, // 文字下沉
    imageField: 'logo', // 图标字段名
    itemCount: 16, // 最多显示条数
    dateFormat: '%Y年%-m月', // 日期格式
    barGap: 10, // 柱条间距
    barInfoFormat: () => '', // 隐藏柱条上的文字
});
stage.addChild(barChart);

循环播放

setInterval(function () {
    if (!stage.playing) {
        stage.sec = 0;
        stage.play();
    }
}, 1000);

本文过程较为复杂，且部分内容已无法实现，建议点击这里查阅最新的操作方法！

前言：本文操作需要你具备浏览器安装和使用扩展插件的能力、以及简单的使用命令行的能力。

第一步：下载视频

首先我使用 Edge 浏览器（Chrome 操作类似，不过安装扩展需要科学上网）。

2023 年初的时候，用 FetchV 这个扩展是非常方便的，它会自动嗅到网页中的视频，即使没有嗅到也可以用录制的方式来保存。

但到了过了一两个月发现 FetchV（及其马甲）经常打不开，或者无法嗅到视频流，更别提录制了。

所以我找到了另一款专业视频下载神器：

当然它的马甲们用法也是大同小异，主界面是这样的：

开启捕获，同意下载多个文件，然后播放视频，耐心等待。

心急的朋友可以用修改播放速度的扩展（如 视频加速减速控制），例如用 16 倍速，那么一个 16 分钟的视频用 1 分钟就播放完成了。（或者在 F12 的控制台中使用 JS 代码加速：document.querySelector('video').playbackRate = 16; ）

等小浮框提示“捕获完成 点击下载”的时候就可以保存到磁盘上了。

第二步：音频修复

下载后它会有两个 .mp4 文件保存到电脑上，其中较大的是视频部分，较小的是音频部分。

但是有个小问题是，这个音频文件用 Windows 自带播放器播放正常，用 potplayer 等第三方播放器或者一些视频编辑软件播放就会有问题。

我在 Microsoft Store 中找了一款叫 Movie Maker - Video Editor 的应用，

在这个软件中添加刚才的只有音轨的视频文件会提示转码，转码后的 .mp4 文件音轨就正常了。

具体步骤是依次点击“Create New Project”，“Add clip”，“Photo/Video”，选择文件后“Transcode”，保存以后默认会在文件名后加上“ (Transcoded).mp4”。

第三步：音视频合成

接下来是合成视频和音频，将视频文件命名为 v.mp4，音频文件命名为 a.mp4。

在 FFmpeg 官网下载 Windows 版，然后使用这个命令从音频文件中提取音轨：

ffmpeg -i a.mp4 -vn -acodec copy a.aac

再用这个命令将 v.mp4 的视频和 a.aac 的音频合成一个新的文件

ffmpeg -i v.mp4 -i a.aac -c:v copy -c:a copy -map 0:v:0 -map 1:a:0 output.mp4

相比于其它的视频转换工具，ffmpeg 直接提取合并的速度是极快的。

Tips：

• 小鹅通中学习过的课程再次打开会从上次关闭的地方开始播放，这会导致捕获不全，可以将进度条手动拖到末尾，这样它会停止播放，再次刷新就会从头开始播放。

• 浮框中“点击下载”可能没反应，估计是在合成文件，过几秒钟多点几下，不会重复下载。

• 如果要下载的视频比较长或者比较多，可以像我一样在虚拟机里进行，把视频播放器的音量开到最大，把操作系统的声音关闭。

本文将详细介绍 stable diffusion webui 的下载、安装及问题解决。
Stable Diffusion 是 2022 年发布的深度学习文本到图像生成模型。它主要用于根据文本的描述产生详细图像，尽管它也可以应用于其他任务，如内补绘制、外补绘制，以及在提示词（英语）指导下产生图生图的翻译。它是一种潜在扩散模型，由慕尼黑大学的 CompVis 研究团体开发的各种生成性人工神经网络。它是由初创公司 StabilityAI，CompVis 与 Runway 合作开发的，并得到 EleutherAI 和 LAION 的支持。
其它问题请参考：

• 运行使用时问题《Windows 使用 Stable Diffusion 时遇到的各种问题整理》；

• 模型运用及参数《Stable Diffusion 个人推荐的各种模型及设置参数、扩展应用等合集》；

• 提示词生图咒语《Stable Diffusion 提示词词缀使用指南（Prompt）》；

• 不同类的模型Models说明《解析不同种类的 Stable Diffusion 模型 Models》；

• 绘制人物动作及手脚细节《Stable Diffusion 准确绘制人物动作及手脚细节（需 ControlNet 扩展）》；

• 各种风格对比及实际运用《AI绘图风格对照表/画风样稿详细研究记录及经验总结》；

一、环境准备

（一）硬件方面：

1. 显存

4G 起步，4G 显存支持生成 512*512 大小图片，超过这个大小将卡爆失败。

2. 硬盘

10G 起步，模型基本都在 5G 以上，有个 30G 硬盘不为过吧？现在硬盘容量应该不是个问题。

（二）软件方面：

1. Git

https://git-scm.com/download/win
下载最新版即可，对版本没有要求。

2. Python

https://www.python.org/downloads/
截止发稿（2023.3.6）时，最高版本只能用 3.10.*，用 3.11.* 会出问题。

3. Nvidia CUDA

https://developer.download.nvidia.cn/compute/cuda/11.7.1/local_installers/cuda_11.7.1_516.94_windows.exe
版本 11.7.1，搭配 Nvidia 驱动 516.94，可使用最新版。

4. stable-diffusion-webui

https://github.com/AUTOMATIC1111/stable-diffusion-webui
核心部件当然用最新版本~~但注意上面三个的版本的兼容性。

5. 中文语言包

https://github.com/VinsonLaro/stable-diffusion-webui-chinese
下载 chinese-all-0306.json 和 chinese-english-0306.json 文件

6. 扩展（可选）

https://github.com/Mikubill/sd-webui-controlnet
下载整个 sd-webui-controlnet 压缩包

https://huggingface.co/Hetaneko/Controlnet-models/tree/main/controlnet_safetensors
https://huggingface.co/lllyasviel/ControlNet/tree/main/models
https://huggingface.co/TencentARC/T2I-Adapter/tree/main
试用时先下载第一个链接中的 control_openpose.safetensors 或 第二个链接中的 control_sd15_openpose.pth 文件

7. 模型

https://huggingface.co/models
https://civitai.com
可以网上去找推荐的一些模型，一般后缀名为 ckpt、pt、pth、safetensors ，有时也会附带 VAE（.vae.pt）或配置文件（.yaml）。

这里可以学习一下模型的基本概念《解析不同种类的 Stable Diffusion 模型 Models，再也不用担心该用什么了》

二、安装流程

1. 安装 Git

就正常安装，无问题。

2. 安装 Python

建议安装在非 program files、非 C 盘目录，以防出现目录权限问题。
注意安装时勾选 Add Python to PATH，这样可以在安装时自动加入 windows 环境变量 PATH 所需的 Python 路径。

3. 安装 Nvidia CUDA

正常安装，无问题。

4. 安装 stable-diffusion-webui

国内需要用到代理和镜像，请按照下面的步骤操作：

a) 编辑根目录下 launch.py 文件
将 https://github.com  替换为 https://ghproxy.com/https://github.com，即使用  Ghproxy 代理，加速国内 Git。
如图将代码中所有类似地址都改掉（注意：不仅仅是图中所展示的这些）。

b) 执行根目录下 webui.bat 文件
根目录下将生成 tmp 和 venv 目录。

c) 编辑 venv 目录下 pyvenv.cfg 文件
将 include-system-site-packages = false 改为 include-system-site-packages = true。

d) 配置 python 库管理器 pip
方便起见，在 \venv\Scripts 下打开 cmd 后执行如下命令：

pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ # 镜像
pip freeze > requirements_versions.txt # 创建文件
pip install -r requirements_versions.txt # 执行此条命令前，请检查你的剩余磁盘空间
pip install xformer # 如果不执行此条命令，启动 Stable Diffusion 时可能会出现错误。xformer 还可以在后续使用中降低显卡占用。

xformer 会安装到 \venv\Lib\site-packages 中，安装失败可以用 pip install -U xformers 命试试。

e) 安装语言包
将文件 chinese-all-0306.json 和 chinese-english-0306.json 放到目录 \localizations 目录中。
运行 webui 后进行配置，操作方法见下。

f) 安装扩展（可选）
将 sd-webui-controlnet 解压缩到 \extensions 目录中。
将 control_sd15_openpose.pth 文件复制到 /extensions/sd-webui-controlnet/models 目录中。
不同的扩展可能还需要安装对应的系统，比如 controlnet 要正常使用则还需要安装 ffmpeg 等。

g) 安装模型
下载的各种模型放在 \models\Stable-diffusion 目录中即可。

h) 再次执行根目录下 webui.bat 文件
用浏览器打开 webui.bat 所提供的网址即可运行。

其中提供了网址：http://127.0.0.1:7860。

打开该网址后在 Settings -> User interface -> Localization (requires restart) 设置语言，在菜单中选择 chinese-all-0220（前提是已经在目录中放入了对应语言包，见上），点击 Apply Settings 确定，并且点击 Reload UI 重启界面后即可。

好了，现在可以开始使用了~~

三、问题及注意点

1. python 版本错误

错误：


ERROR: Could not find a version that satisfies the requirement torch==1.13.1+cu117
ERROR: No matching distribution found for torch==1.13.1+cu117

这是由于 python 版本不对导致的（上面提过了，截止发稿时不能追求新版本），要用 python 3.10.* 版本。
解决来源：https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/7166

2. pip版本错误

警告：

[notice] A new release of pip available: 22.3.1 -> 23.0.1
[notice] To update, run: D:\stable-diffusion-webui\venv\Scripts\python.exe -m pip install --upgrade pip

提示中已经给出了解决方案：
在 \venv\Scripts\ 目录中打开 cmd，执行

python.exe -m pip install --upgrade pip

3. 安装或执行停滞

如果在执行 webui.bat 进行包下载安装时或者生成图片时会卡很久都没反应，那么这时可以复制包名，进入 python 安装目录或 \venv\Scripts\ 目录中打开 cmd，执行

pip install 包名

也可以通过任务管理查看网络状态，如果网络在玩命下载，那么就等着吧~~

4. xFormers 安装不上

很多同学都反应 xformers 无法安装，可以用以下的方法试试：

• 检查 Dreambooth 要求的 Python 版本：
  如果您的 Python 版本低于 3.6，请安装最新的 Python 版本，并重复尝试安装 xformers。

# 据此可以在终端中运行以下命令，以检查您的 Python 版本：
python --version

• 安装依赖项：xformers 有许多依赖项，如果这些依赖项没有正确安装可能会导致升级失败。您可以尝试安装以下依赖项：

pip install numpy scipy torch torchaudio transformers

• 清除 pip 缓存并重新安装：

# 清除 xformers 缓存：运行以下命令清除 xformers 缓存。
pip uninstall -y xformers
pip cache purge

# 更新 pip：确保您正在使用最新版本的 pip，可以运行以下命令更新 pip。
pip install --upgrade pip

# 安装 xformers：在清除了缓存并更新了 pip 之后，重新安装 xformers。
pip install xformers

• 手动安装 xformers 指定版本
  如果上述步骤仍然无法解决问题，可尝试手动安装 Dreambooth 所需的 xformers 版本。在 Dreambooth 的文档中，可以找到 xformers 的版本要求。

pip install xformers==0.0.17.dev465

• 使用 conda 环境
  如果您使用的是 conda 环境，请尝试在 conda 环境中安装 xformers。

# 创建 conda 环境
conda create --name myenv

# 激活 conda 环境并安装 xformers
conda activate myenv
pip install xformers

• 网络问题
  如果已经配置好了代理，就不要考虑这个了。
  检查网络连接：请确保您的计算机与互联网连接，并且网络连接没有被防火墙或代理服务器阻止：

# 检查网络连接是否正常
ping google.com

• 非必要
  你确定需要使用 xformers 么？如果不需要，可以在 webui-user.bat 中把 --xformers 去掉试试。

• 其它
  如果上述方法还是无法解决问题，请尝试在 OpenAI 的论坛或者 Dreambooth 的 GitHub 页面上寻求更多帮助。-_-!

5. 其他安装问题

删除 /tmp 和 /venv 目录后重启 webui.bat 试试。

6. 硬件问题

一般显卡不达标，就会爆卡，解决办法就是编辑根目录下 webui-user.bat 文件，试一下修改参数 COMMANDLINE_ARGS 即可。

以下几个设置逐一测试看看哪个适合自己。

set COMMANDLINE_ARGS=--lowvram --precision full --no-half --skip-torch-cuda-test
set COMMANDLINE_ARGS=--lowvram --precision full --no-half
set COMMANDLINE_ARGS=--lowvram

本机显存 4G，使用最后一个配置方法，可以烧出 2048*1080 的图，前两种方法反而会在最后爆卡。

最后，预祝各位成功~~

dog drink~~ where is dog?

参考：
【AI 繪畫】Stable-Diffusion 通過骨架分析插件 ControlNet 來製作超有意境的圖片
Stable Diffusion 2.1 + WebUI 的安装与使用（极详细）
低配显卡想玩 Stable Diffusion？修改一个配置就行
整合包

不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。

方式一、监听 paste 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
    input.value = event.clipboardData.getData('text');
});

这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。

经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。

方式二、监听 keydown 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        input.value = clipboardData.getData('text');
    }
});

测试发现报错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getData')

Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')

看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        window.navigator.clipboard.readText().then(text => {
            input.value = text;
        });
    }
});

缺点是需要用户授权：

仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。

以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。

兼容更多时间格式，并调整时区

<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：

const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
    input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}

以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。

当然如果希望支持中文的年月日，可以先用正则表达式替换一下：

text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");

处理页面上的所有 <input type="date" />

const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
    input.addEventListener(...);
});

封装为独立域

避免全局变量污染，使用 IIFE 函数表达式：

(function() {
  // 将代码放在这里
})();

或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。

在 Vue 中使用

如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：

<div id="app">
    <input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
    {{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data: function () {
            return {
                a: null,
            }
        },
        methods: {
            fn_pasteToDateInput: function (event) {
                const text = event.clipboardData.getData('text');
                const parsedDate = new Date(text);
                if (!isNaN(parsedDate.getTime())) {
                    const att = event.target.getAttribute('data-model');
                    this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
                }
            },
        }
    });
    const vm = app.mount('#app');
</script>

示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。 

如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值

let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
    target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);

在代码

app.Run();

处报错：

System.IO.IOException:“Failed to bind to address http://localhost:5182.”

SocketException: 以一种访问权限不允许的方式做了一个访问套接字的尝试。

原因是端口被占用，解决方法：

方法一、重启电脑可能解决该问题。

方法二、使用命令 netstat -ano 找到占用该端口的进程，关闭即可。

方法三、修改运行端口。展开解决方案资源管理器中项目根目录下的“Properties”目录，打开“launchSettings.json”，找到对应你运行方式的配置，修改相应 Url 中的端口。

一般我们使用原生 JS 的时候使用 abort() 来取消 fetch 请求。

在使用 axios 发送请求时，如果我们想要取消请求，可以使用 axios 提供的 CancelToken 和 cancel 方法。下面是具体的实现步骤：

// 创建 CacnelToken 实例
const cancelTokenSource = axios.CancelToken.source();
// GET 方式请求
axios.get(url, {
    cancelToken: cancelTokenSource.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    console.log('An error occurred', thrown);
  }
});
// POST 方式请求
axios.post(url, data, {
    cancelToken: cancelTokenSource.token
});
// 取消请求
cancelTokenSource.cancel('请求被取消');

get 请求的时候，cancelToken 是放在第二个参数里；post 的时候，cancelToken 是放在第三个参数里。axios-0.27.2 中测试成功。

在即时响应的搜索框中可以这样处理：（vue3）

let cancelTokenSource;
const app = Vue.createApp({
    methods: {
        fn_list: function () {
            // 如果已有请求则取消
            cancelTokenSource && cancelTokenSource.cancel();
            // 创建一个新的请求
            cancelTokenSource = axios.CancelToken.source();
            axios.post(url, data, {
                cancelToken: cancelTokenSource.token
            }).then(function (response) {
                // 请求成功
            }).catch(function (error) {
                // 请求失败/取消
            });
        },
    }
});
const vm = app.mount('#app');

如果你用 jQuery，请参此文。

有对象模型：

{ "list": { "1": "a", "2": "b" } }

那么绑定循环：

<option v-for="(value, key) in list" :key="key" :value="key">{{value}}</option>

效果：

<option value="1">a</option>
<option value="2">b</option>

若循环内部需要双向绑定，则：

<input type="text" v-model="list[key]" />

又例：

<div v-for="(value, key) in list" :key="key">{{key}}</div>

效果：

<div>1</div>
<div>2</div>

错误 BLAZOR102     The scoped css file was defined but no associated razor component or view was found for it.

错误 BLAZOR106 The JS module file was defined but no associated razor component or view was found for it.

解决方法：将相关文件从项目中排除，再包括到项目中即可正常生成。

若仍报错，备份这些文件，删除并新建文件，复制代码进去尝试生成。

若仍报错，通过注释代码的方式排查问题原因。

bundleconfig.json 有格式错误

如果在发布的时候遇到以下错误：

资产文件“\obj\project.assets.json”没有“net6.0”的目标。确保已运行还原，且“net6.0”已包含在项目的 TargetFrameworks 中。

在发布设置中更改正确的目标框架版本即可。