推荐使用 SignalR 来平替 WebSocket，参考教程。

【服务端（.NET）】

一、创建 WebSocketHandler 类，用于处理客户端发送过来的消息，并分发到其它客户端

public class WebSocketHandler
{
    private static List<WebSocket> connectedClients = [];

    public static async Task Handle(WebSocket webSocket)
    {
        connectedClients.Add(webSocket);

        byte[] buffer = new byte[1024];
        WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        while (!result.CloseStatus.HasValue)
        {
            string message = Encoding.UTF8.GetString(buffer, 0, result.Count);
            Console.WriteLine($"Received message: {message}");

            // 处理接收到的消息，例如广播给其他客户端
            await BroadcastMessage(message, webSocket);

            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }

        connectedClients.Remove(webSocket);
        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
    }

    private static async Task BroadcastMessage(string message, WebSocket sender)
    {
        foreach (var client in connectedClients)
        {
            if (client != sender && client.State == WebSocketState.Open)
            {
                await client.SendAsync(Encoding.UTF8.GetBytes(message), WebSocketMessageType.Text, true, CancellationToken.None);
            }
        }
    }
}

二、在 Program.cs 或 Startup.cs 中插入：

// 添加 WebSocket 路由
app.UseWebSockets();
app.Use(async (context, next) =>
{
    if (context.Request.Path == "/chat")
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
            await WebSocketHandler.Handle(webSocket);
        }
        else
        {
            context.Response.StatusCode = 400;
        }
    }
    else
    {
        await next();
    }
});

这里的路由路径可以更改，此处将会创建一个 WebSocket 连接，并将其传递给 WebSocketHandler.Handle 方法进行处理。

也可以用控制器来接收 WebSocket 消息。

【客户端（JS）】

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>WebSocket 示例（JS + ASP.NET）</title>
    <style>
        #list { width: 100%; max-width: 500px; }
        .tip { color: red; }
    </style>
</head>
<body>
    <h2>WebSocket 示例（JS + ASP.NET）</h2>
    <textarea id="list" readonly rows="20"></textarea>
    <div>
        <input type="text" id="msg" />
        <button onclick="fn_send()">发送</button>
        <button onclick="fn_disconnect()">断开</button>
    </div>
    <p id="tip_required">请输入要发送的内容</p>
    <p id="tip_closed">WebSocket 连接未建立</p>

    <script>
        var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port + "/chat";
        var webSocket;
        var domList = document.getElementById('list');

        // 初始化 WebSocket 并连接
        function fn_ConnectWebSocket() {
            webSocket = new WebSocket(wsUrl);

            // 向服务端发送连接请求
            webSocket.onopen = function (event) {
                var content = domList.value;
                content += "[ WebSocket 连接已建立 ]" + '\r\n';
                domList.innerHTML = content;

                document.getElementById('tip_closed').style.display = 'none';

                webSocket.send(JSON.stringify({
                    msg: 'Hello'
                }));
            };

            // 接收服务端发送的消息
            webSocket.onmessage = function (event) {
                if (event.data) {
                    var content = domList.value;
                    content += event.data + '\r\n';
                    domList.innerHTML = content;
                    domList.scrollTop = domList.scrollHeight;
                }
            };

            // 各种情况导致的连接关闭或失败
            webSocket.onclose = function (event) {
                var content = domList.value;
                content += "[ WebSocket 连接已关闭，3 秒后自动重连 ]" + '\r\n';
                domList.innerHTML = content;

                document.getElementById('tip_closed').style.display = 'block';

                setTimeout(function () {
                    var content = domList.value;
                    content += "[ 正在重连... ]" + '\r\n';
                    domList.innerHTML = content;
                    fn_ConnectWebSocket();
                }, 3000); // 3 秒后重连
            };
        }

        // 检查连接状态
        function fn_IsWebSocketConnected() {
            if (webSocket.readyState === WebSocket.OPEN) {
                document.getElementById('tip_closed').style.display = 'none';
                return true;
            } else {
                document.getElementById('tip_closed').style.display = 'block';
                return false;
            }
        }

        // 发送内容
        function fn_send() {
            if (fn_IsWebSocketConnected()) {
                var message = document.getElementById('msg').value;
                document.getElementById('tip_required').style.display = message ? 'none' : 'block';
                if (message) {
                    webSocket.send(JSON.stringify({
                        msg: message
                    }));
                }
            }
        }

        // 断开连接
        function fn_disconnect() {
            if (fn_IsWebSocketConnected()) {
                // 部分浏览器调用 close() 方法关闭 WebSocket 时不支持传参
                // webSocket.close(001, "Reason");
                webSocket.close();
            }
        }

        // 执行连接
        fn_ConnectWebSocket();
    </script>
</body>
</html>

【在线示例】

https://xoyozo.net/Demo/JsNetWebSocket

【其它】

服务端以 IIS 作为 Web 服务器，那么需要安装 WebSocket 协议
一个连接对应一个客户端（即 JS 中的 WebSocket 对象），注意与会话 Session 的区别
在实际项目中使用应考虑兼容性问题
程序设计应避免 XSS、CSRF 等安全隐患
参考文档：https://learn.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets

xoyozo 1 年前

1,269

手机网页保持竖屏

如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 api，用 css 设置旋转。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>保持竖屏示例</title>
</head>
<body>
    <div id="app">
        <div class="page">
            <div>把手机横过来试试</div>
            <div>页面永远保持竖屏方向</div>
        </div>
    </div>
</body>
</html>

CSS：

body { margin: 0; }
.page { text-align: center; padding-top: 100px; }

@media screen and (orientation: landscape) {
    body { width: 100vh; height: 100vw; overflow: hidden; }
    .page.landscape-primary { transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 100%; left: 0; }
    .page.landscape-secondary { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 100%; }
}

JS:

function fn_set_orientation() {
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation;
    const div = document.querySelector('.page');
    console.log(orientation.type)
    switch (orientation.type) {
        case 'landscape-primary': {
            div.classList.remove('landscape-secondary');
            div.classList.add('landscape-primary');
            break;
        }
        case 'landscape-secondary': {
            div.classList.remove('landscape-primary');
            div.classList.add('landscape-secondary');
            break;
        }
        default: {
            div.classList.remove('landscape-primary');
            div.classList.remove('landscape-secondary');
            break;
        }
    }
}
window.addEventListener("orientationchange", function () {
    fn_set_orientation();
});
fn_set_orientation();

示例：

https://xoyozo.net/Demo/Orientation

xoyozo 1 年前

1,117

取消前一个 jQuery Ajax 请求

以下是使用定时器每秒钟请求服务器，并在后一个请求的响应比前一个请求的响应先到达客户端时抛弃前一个请求的响应的代码：

（以 $.post 为例，$.ajax 同理）

let previousXHR = null; // 存储前一个请求的 jqXHR 对象

function sendRequest() {
  // 取消前一个请求
  if (previousXHR) {
    previousXHR.abort();
  }

  // 发送新的请求
  const currentXHR = $.post(url, data, function(response) {
    // 请求成功的回调函数
    console.log(response);
  });

  // 更新前一个请求的 jqXHR 对象
  previousXHR = currentXHR;
}

// 每秒钟发送请求
setInterval(sendRequest, 1000);

如果你用 axios，请参此文。

xoyozo 1 年前

1,094

未能找到路径“\roslyn\csc.exe”的一部分。

解决方法：

在 nuget 中直接卸载 Microsoft.CodeDom.Providers.DotNetCompilerPlatform

如果 web.config 报错，删除与 Microsoft.CodeDom.Providers.DotNetCompilerPlatform 相关的项，如：

<system.codedom>
	<compilers>
		<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701;612;618" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
		<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008,40000,40008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
	</compilers>
</system.codedom>

然后遇到错误：

功能 空传播运算符 在 C# 5 中不可用。请使用 6 或更高的语言版本

所以还是少不了 Microsoft.CodeDom.Providers.DotNetCompilerPlatform

又把这货装上了，竟然不报错了。

这期间我更改过在 Release 模式下调试，将 .NET Framework 4.8 升级到 .NET Framework 4.8.1 等，然后又退回到原来的状态和版本，竟然都正常了。

就这样吧！

xoyozo 1 年前

1,456

.NET 桌面应用程序如何实时更新界面

本文由 ChatGTP 3.5 提供

在 .NET C# 桌面应用程序中，你可以使用委托和事件来实现在窗体页面处理事务过程中实时更新界面。下面是一个示例，展示了在不同情况下如何更新主界面：

首先，在窗体页面中定义一个委托和一个事件，用于更新界面：

public delegate void UpdateUIHandler(string msg);
public event UpdateUIHandler UpdateUIEvent;

然后，在窗体的构造函数中订阅事件，并在事件处理程序中更新界面：

public Form1()
{
    InitializeComponent();
    UpdateUIEvent += UpdateUI;
}

private void UpdateUI(string msg)
{
    if (InvokeRequired)
    {
        Invoke(new UpdateUIHandler(UpdateUI), msg);
    }
    else
    {
        // 在这里更新界面
        label1.Text = msg;
    }
}

现在，你可以在窗体页面的任何地方调用 UpdateUIEvent 来触发更新界面的事件。例如，在按钮点击事件中：

private void button1_Click(object sender, EventArgs e)
{
    // 处理事务过程中实时更新界面
    string msg = "处理事务中...";
    UpdateUIEvent?.Invoke(msg);

    // 异步调用一个类方法中的方法，并在方法内部实时更新主界面
    Task.Run(() =>
    {
        MyClass myClass = new MyClass();
        myClass.LongRunningMethod(UpdateUIEvent);
    });
}

在上面的示例中，MyClass 是一个自定义的类，其中的 LongRunningMethod 是一个耗时的方法。在这个方法内部，你可以通过传递 UpdateUIEvent 来实时更新主界面：

public class MyClass
{
    public void LongRunningMethod(UpdateUIHandler updateUI)
    {
        // 处理事务过程中实时更新界面
        string msg = "处理事务中...";
        updateUI?.Invoke(msg);

        // 其他耗时操作...
    }
}

通过以上示例，你可以在窗体页面处理事务过程中实时更新界面，并且在异步调用的方法内部也能实时更新主界面。记得在更新界面时使用 Invoke 方法，以确保在主线程上更新界面，避免跨线程访问 UI 的问题。

xoyozo 2 年前

2,117

Windows Defender Credential Guard 不允许使用已保存的凭据。请输入你的凭据

使用远程桌面连接时提示你的凭据不工作：

解决方法一：关闭 Windows Defender Credential Guard

打开组策略编辑器（gpedit.msc）
展开：计算机配置 - 管理模板 - 系统 - Device Guard，双击右侧的“打开基于虚拟化的安全”，改为“已禁用”
重启电脑

解决方法二【推荐】：使用其他远程桌面客户端

在 Microsoft Store 中查找“Microsoft 远程桌面”，或者点此安装

这个应用同样来自微软，使用方式与传统的远程桌面连接略有区别，如果你在 iPhone 或安卓上使用过，那么就能快速上手。

若要共享剪贴板，在“编辑电脑”中开启，并且在设置 - 隐私与安全 - 文件系统中允许“远程桌面”。

相对于传统的远程桌面连接，对高 DPI 兼容性不完美。

xoyozo 2 年前

2,292

LINQ

语言集成查询（LINQ）为 C# 和 VB 提供语言级查询功能和高阶函数 API，让你能够编写具有很高表达力度的声明性代码。

LINQ 有两种写法：查询语法和方法语法，查询语法又称查询表达式语法。

查询语法：

from 变量名 in 集合 where 条件 select 结果变量

方法语法：

集合.Where(变量名 => 条件)

LINQ 的标准查询运算符及语法示例

类型	操作符	功能	方法语法	查询语法
投影操作符	Select	用于从集合中选择指定的属性或转换元素	`cats.Select(cat => cat.color)`	`from cat in cats select cat.color`
投影操作符	SelectMany	用于在嵌套集合中选择并平铺元素	`families.SelectMany(family => family.members .Select(member => member.name))`	`from family in families from member in family.members select member.name`
限制操作符	Where	根据指定的条件筛选集合中的元素	`cats.Where(cat => cat.color == "white")`	`from cat in cats where cat.color == "white" select cat`
排序操作符	OrderBy、OrderByDescending、ThenBy、ThenByDescending	用于对集合中的元素进行排序	`cats.OrderBy(cat => cat.age)`	`from cat in cats order by cat.age select cat`
排序操作符	Reverse	将集合中的元素顺序反转	`cats.Reverse()`
联接操作符	Join GroupJoin	用于在两个集合之间执行内连接（Join）操作，或者对一个集合进行分组连接（GroupJoin）操作	内联接 `families.Join( members, family => family.familyId, member => member.familyId, (family, member) => new { family.familyId, member.name, })` 左连接 `families.GroupJoin( members, family => family.familyId, member => member.familyId, (family, familyMembers) => new { family.familyId, name = familyMembers.FirstOrDefault()?.name })`	内联接 `from family in families join member in members on family.familyId equals member.familyId select new { family.familyId, member.name, }` 左连接 `from family in families join member in members on family.familyId equals member.familyId into g from member in g.DefaultIfEmpty() select new { family.familyId, name = member?.name, }`
分组操作符	GroupBy	根据指定的键对集合中的元素进行分组
串联操作符	Concat	将两个集合连接成一个新集合
聚合操作符	Aggregate、Average、Count、LongCount、Max、Min、Sum	Aggregate 可以用于在集合上执行自定义的累积函数，其他方法用于计算集合中的元素的平均值、总数、最大值、最小值和总和
集合操作符	Distinct、Union、Intersect、Except	用于执行集合间的不同操作，Distinct 移除重复元素，Union 计算两个集合的并集，Intersect 计算两个集合的交集，Except 计算一个集合相对于另一个集合的差集
生成操作符	Empty、Range、Repeat	Empty 创建一个空集合，Range 创建一个包含一系列连续数字的集合，Repeat 创建一个重复多次相同元素的集合
转换操作符	AsEnumerable、Cast、OfType、ToArray、ToDictionary、ToList、ToLookup	这些方法用于将集合转换为不同类型的集合或字典
元素操作符	DefaultIfEmpty、ElementAt、ElementAtOrDefault、First、Last、FirstOrDefault、LastOrDefault、Single、SingleOrDefault	这些方法用于获取集合中的元素，处理可能的空集合或超出索引的情况
相等操作符	SequenceEqual	用于比较两个集合是否包含相同的元素，顺序也需要相同
量词操作符	All、Any、Contains	用于检查集合中的元素是否满足特定条件，All 检查是否所有元素都满足条件，Any 检查是否有任何元素满足条件，Contains 检查集合是否包含特定元素
分割操作符	Skip、SkipWhile、Take、TakeWhile	用于从集合中跳过一些元素或只取一部分元素，可以结合特定条件进行操作

了解立即执行与延迟执行可以大大改善性能。

xoyozo 2 年前

1,801

Windows 安装 Stable Diffusion WebUI 及问题解决记录

本文将详细介绍 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）。

类型	文件格式	存放目录	备注
check point	.ckpt，.safetensors	\models\Stable-diffusion	文件较大
vae	名字带有 vae 的	\models\vae	细节更好地恢复，特别是眼睛和文字
Textual Inversion	*.pt	\embeddings	一般文件很小，额外的 tag
Lora	*.pt	\models\Lora	调整模型，理解为风格化也可以
Hypernetworks	.pt，.ckpt，*.safetensors	\models\hypernetworks	和 lora 工作方式相似，算法不同

这里可以学习一下模型的基本概念《解析不同种类的 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？修改一个配置就行
 整合包

暂

转自暂时先用这个名字 2 年前

4,674

使用 JS 实现粘贴到 <input type="date" />

不知道从哪个版本的 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);

xoyozo 2 年前

1,813

Azure.AI.OpenAI 使用入门指南（未完善）

资料：

.NET Blog：

https://devblogs.microsoft.com/dotnet/getting-started-azure-openai-dotnet/

Azure OpenAI .NET SDK：

https://www.nuget.org/packages/Azure.AI.OpenAI/

什么是 Azure OpenAI 服务？

https://learn.microsoft.com/zh-cn/azure/cognitive-services/openai/overview#how-do-i-get-access-to-azure-openai

OpenAI .NET samples：

https://github.com/Azure-Samples/openai-dotnet-samples

xoyozo 2 年前

2,376

1 2 3 4 5

一、环境准备

（一）硬件方面：

1. 显存

2. 硬盘

（二）软件方面：

1. Git

2. Python

3. Nvidia CUDA

4. stable-diffusion-webui

5. 中文语言包

6. 扩展（可选）

7. 模型

二、安装流程

1. 安装 Git

2. 安装 Python

3. 安装 Nvidia CUDA

4. 安装 stable-diffusion-webui

三、问题及注意点

1. python 版本错误

2. pip版本错误

3. 安装或执行停滞

4. xFormers 安装不上

5. 其他安装问题

6. 硬件问题

大家在看

最新发布

查询 / 检测

编程

前端

行业

本站 API

博客 (102)

一、环境准备

（一）硬件方面：

1. 显存

2. 硬盘

（二）软件方面：

1. Git

2. Python

3. Nvidia CUDA

4. stable-diffusion-webui

5. 中文语言包

6. 扩展（可选）

7. 模型

二、安装流程

1. 安装 Git

2. 安装 Python

3. 安装 Nvidia CUDA

4. 安装 stable-diffusion-webui

三、问题及注意点

1. python 版本错误

2. pip版本错误

3. 安装或执行停滞

4. xFormers 安装不上

5. 其他安装问题

6. 硬件问题

大家在看

最新发布