Blog | ANGForever 2026-02-07T17:18:45.027Z https://blog.angforever.top/ ANGForever Hexo Hello World https://blog.angforever.top/2026/02/07/hello-world/ 2026-02-07T17:18:45.027Z 2026-02-07T17:18:45.027Z Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

]]> <p>Welcome to <a class="link" href="https://hexo.io/" >Hexo<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text- ASFConnector | 更现代的开源ArchiSteamFarm Python API库 | ASF 挂卡 API框架 | ArchiSteamFarm | Steam 挂卡 https://blog.angforever.top/2025/10/30/ASFConnector/ 2025-10-30T12:02:07.000Z 2026-02-07T17:18:45.027Z

​ASFConnector已开源在GitHub（https://github.com/ANGJustinl/ASFConnector），欢迎大家试用并提出宝贵意见。项目采用GPL-3.0许可证。

​ASFConnector

最近在考虑制作基于ASF（ArchiSteamFarm）的自动化脚本时，我发现现存的ASFIPC类客户端普遍存在三个痛点：不支持Python 3.10+的类型提示、配置管理混乱、错误调试如同猜谜。更让人头疼的是，这些库大多停留在python3.6时代，完全无法满足现代异步应用的性能需求。

作为一个闲的没事干的人, 我决定自己动手解决这些问题。经过半周的开发和测试，我实现了一个基于Pydantic v2和httpx构建的现代化客户端 ASFConnector，这下了兼容性问题，而且具备连接池复用和更精细的错误溯源。

为什么需要重新造轮子

现存的ASF IPC库主要面临四个核心问题：

  • 首先是配置管理混乱。大多数库要么要求硬编码参数，要么使用简单的字典存储配置，既没有类型校验也不支持环境变量。

  • 其次是错误处理原始。当ASF返回404或500错误时，直接使用http method的库只会抛出模糊的HTTP异常，开发者需要手动解析响应体才能定位问题。更糟糕的是，不同错误场景的异常类型完全一致，无法通过try-except块精准捕获。

  • 第三是或许会有性能瓶颈。在批量操作多个Bot时，每个API请求都创建新的HTTP连接，100次连续调用耗时超过1秒。

  • 最后是Python版本滞后。官方wiki上现有的相关库仍在使用Python 3.6的语法，不支持asyncio的最新特性，更别提类型注解了。

核心特性：现代Python技术栈的实践

ASFConnector从设计之初就坚持”现代化”和”开发者友好”两个原则，主要体现在以下四个方面：

Pydantic v2驱动的配置系统

我采用Pydantic v2构建了完整的配置管理体系。通过ASFConfig类，配置参数不仅支持自动验证（比如端口号必须是1-65535之间的整数），还能从.env文件、环境变量或字典中灵活加载。

​

1
2
3
4
5
6
7
8
9
10
11
12
from ASFConnector.config import ASFConfig


# 自动从.env文件加载配置并验证
config = ASFConfig.from_env()

# 或者手动构建配置
config = ASFConfig(
asf_host="192.168.1.100",
asf_port=1242,
asf_password="your_secure_password"
)

最实用的是，Pydantic会自动处理类型转换和默认值。比如当你传入字符串类型的端口号”1242”，它会自动转换为整数；如果忘记设置asf_path，会默认使用”/Api”。这种设计极大减少了配置相关的bug。

模块化控制器架构

借鉴了FastAPI的路由设计思想，我将ASF的API按功能拆分为多个控制器：

  • ASFController：处理全局操作（获取信息、更新配置、重启等）
  • BotController：管理Bot相关操作（启动、停止、激活密钥等）
  • NLogController：日志文件检索功能
  • TypeController：类型信息查询接口
    这种设计让代码结构更清晰，也让按需加载成为可能。使用时通过主连接器对象直接访问：
    ​
1
2
3
4
5
6
7
8
async with ASFConnector.from_config() as connector:

# 获取ASF版本信息
asf_info = await connector.asf.get_info()
print(f"ASF Version: {asf_info['Result']['Version']}")

# 激活游戏密钥
result = await connector.bot.redeem('main_bot', 'XXXXX-XXXXX-XXXXX')

连接池带来的性能飞跃

性能优化是ASFConnector的重头戏。通过httpx.AsyncClient的连接池功能，我的这个库实现了异步对TCP连接的复用。测试数据显示，在连续执行10次API调用时：

  • 传统无连接池方式：总耗时0.111秒（平均11.1ms/请求）
  • ASFConnector连接池模式：总耗时0.004秒（平均0.4ms/请求）
    28.51倍的速度提升意味着什么？对于需要同时管理50个Bot的场景，批量操作时间从原来的22秒缩短到0.77秒，这在生产环境中是质的飞跃。

实现这一优化的核心是上下文管理器设计：

​

推荐用法：连接池自动管理

1
2
3
async with ASFConnector.from_config() as connector:
    for bot in bot_list:
        await connector.bot.start(bot) # 所有请求复用同一连接池

​结构化错误溯源系统

调试ASF API我觉得会是用户往往最经常出现问题的地方。为此，我设计了完整的错误处理体系：

所有API调用返回统一格式的字典，包含Success、Result/Message字段。当发生错误时，还会附加ExceptionType、StatusCode和ResponsePayload：

1
2
3
4
5
6
​response = await connector.bot.get_info('invalid_bot')

if not response['Success']:
    print(f"错误类型: {response['ExceptionType']}") # ASF_NotFound
    print(f"状态码: {response['StatusCode']}") # 404
    print(f"原始响应: {response['ResponsePayload']}") # ASF返回的详细错误信息

同时定义了12种细分异常类型，从ASF_BadRequest到ASF_NotImplemented，覆盖所有可能的HTTP状态码和业务错误场景。这意味着你可以精准捕获特定异常：

1
2
3
4
5
6
​from ASFConnector import ASF_NotFound

try:
    await connector.type.get_type('UnknownType')
except ASF_NotFound as e:
    print(f"类型不存在: {e.status_code}")

​快速上手：5分钟集成指南

前置配置

使用前需要确保ASF已正确设置DefaultBot（在ASF.json中）：

1
2
3
{
"DefaultBot": "your_primary_bot_name"
}

​
然后创建.env配置文件（可从.env.example复制）：

1
2
3
4
5
ASF_HOST=127.0.0.1

ASF_PORT=1242

ASF_PASSWORD=your_ipc_password

基础用法示例

下面是一个完整的示例，演示如何连接ASF并获取Bot信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
​import asyncio
from ASFConnector import ASFConnector


async def main():
    # 从.env文件加载配置并创建连接器
    async with ASFConnector.from_config() as connector:

    # 获取指定Bot的信息
    bot_info = await connector.bot.get_info('main_bot')


    if bot_info['Success']:
        print(f"Bot状态: {bot_info['Result']['Status']}")
        print(f"在线时间: {bot_info['Result']['OnlineTime']}")

    else:
        print(f"获取失败: {bot_info['Message']}")

    asyncio.run(main())

高级场景：批量操作与日志跟踪

对于需要批量管理多个Bot的场景，ASFConnector的异步特性可以充分发挥威力：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
​async def batch_redeem_keys(connector, bot_names, keys):
"""批量为多个Bot激活密钥"""
    results = []

    for bot in bot_names:
        for key in keys:
            result = await connector.bot.redeem(bot, key)
            results.append({
            'bot': bot,
            'key': key,
            'success': result['Success'],
            'message': result.get('Message', '')
            })
    return results

# 使用示例
async with ASFConnector.from_config() as connector:
    bots = ['bot1', 'bot2', 'bot3']
    keys = ['KEY1', 'KEY2', 'KEY3']
    results = await batch_redeem_keys(connector, bots, keys)

​

未来 roadmap

目前ASFConnector已实现ASF IPC API的核心功能，接下来计划添加：

  • [] 完整的单元测试和集成测试（当前测试覆盖率85%）
  • [] 命令行工具，支持无需编写代码的快速操作
  • [] WebSocket支持，用于实时日志流监控 (可能)
  • [] 所有这些功能都会保持对现代Python特性的拥抱，包括更完善的类型注解和异步支持。

如何获取与贡献

ASFConnector已开源在GitHub（https://github.com/ANGJustinl/ASFConnector），欢迎大家试用并提出宝贵意见。项目采用**GPL-3.0许可证**，完全免费商用。

如果你在使用过程中遇到问题，或者有功能建议，欢迎提交issue或PR。我特别期待社区能帮助完善文档和测试用例，让这个工具变得更加健壮。

作为一个希望解决实际痛点而开发的工具(天啊我是重复造轮子高手)。希望这个项目能帮助更多开发者更高效地使用ASF，让Steam卡牌 farming 和游戏管理变得更加自动化、智能化。

期待你的Star和贡献！

]]> <blockquote> <p>​ASFConnector已开源在GitHub（<a class="link" href="https://github.com/ANGJustinl/ASFConnector%EF%BC%89%EF%BC%8C%E6%AC%A2%E8%BF%8E 一些回忆,一些往事 https://blog.angforever.top/2025/08/01/%E4%B8%80%E4%BA%9B%E5%9B%9E%E5%BF%86,%E4%B8%80%E4%BA%9B%E5%BE%80%E4%BA%8B/ 2025-08-01T08:02:07.000Z 2026-02-07T17:18:45.027Z 2023年初，我第一次拥有了一台属于自己的物理服务器。那是一台我亲手组装的便宜小机器，核心是“神秘”的最后一代 赛扬 G6900。朋友笑我说“这U也太闲了”，我却想：既然有了这台主机，何不部署点什么玩玩？就这样，我打开了属于自己的博客世界。

一开始我选的是 Hexo，静态博客，轻量好用。摸索着写配置、套主题、改样式，一切都那么新鲜。到后来，我完成了备案、开启了 HTTPS (摸索了ngnix和cdn) ，把博客挂在了二级域名下，还接入了在线监测工具——那段日子里，每一次成功部署、每一次访问的日志跳动，都都会让我开心许久。

年中，我换了主题，用了很久的时间研究迁移，界面一下子精致了许多，仿佛博客也有了自己的性格。

可惜好景不长。2024年5月，针对我线上服务器的勒索攻击，直接摧毁了我当时部署的大部分网页。博客和网盘数据全部丢失，备份滞后、权限配置疏忽……曾经投入无数时间的网站就此归零。

那段时间，我几乎失去了重新搭建的勇气。

直到一年后，2025年8月，高考一月后，我才决定重新出发。这一次，我选择了全部部署到 NAS 上, 使用内网，同时备份markdown至github：远离公网攻击，所有数据由我掌控。我也抛弃了繁复的主题和功能，转而使用轻量级的 Redefine v2.8.2，只保留最纯粹的写作与发布功能。经历了崩溃与重构，我对“掌控自己数据”和“简洁可持续”的理解比以往更深。

从一颗闲置的赛扬 G6900，到文档博客重生。也许这就是“自托管”的意义——它记录了我一个普通技术爱好者，从硬件点亮、到拥有属于我自己的一片网络上的小小天地的全过程。

]]> <p>2023年初，我第一次拥有了一台属于自己的物理服务器。那是一台我亲手组装的便宜小机器，核心是“神秘”的最后一代 赛扬 G6900。朋友笑我说“这U也太闲了”，我却想：既然有了这台主机，何不部署点什么玩玩？就这样，我打开了属于自己的博客世界。</p> <p>一开始我选的是 H Opus_Magnum留档 https://blog.angforever.top/2025/07/30/Opus_Magnum%E7%95%99%E6%A1%A3/ 2025-07-30T08:02:07.000Z 2026-02-07T17:18:45.027Z Steam Profile Widget https://blog.angforever.top/2025/05/30/Steam%20Profile%20Widget/ 2025-05-30T08:02:07.000Z 2026-02-07T17:18:45.027Z Steam Profile Widget

一个独立的Steam个人资料展示组件，可以轻松嵌入到任何网站或博客中。

🚀 快速开始

基本使用

  1. 下载文件

    • steam-profile-widget.js - 主要的widget文件 从我的cdn

  2. 在HTML中引入

    1
    2
    3
    4
    5
    <!-- 创建容器 -->
    <div id="my-steam-profile" data-steam-id="你的Steam用户名"></div>

    <!-- 引入widget脚本 -->
    <script src="steam-profile-widget.js"></script>

高级用法

手动初始化

1
2
// 手动创建widget实例
const widget = new SteamProfileWidget('container-id', 'steam-username');

多个widget

1
2
3
4
5
<!-- 可以在同一页面放置多个Steam profile -->
<div id="profile1" data-steam-id="ANGJustinl"></div>
<div id="profile2" data-steam-id="另一个用户名"></div>

<script src="https://upyuncloud.angforever.top/js/steam_profile_widget/v0.1/steam-profile-widget.js"></script>

📋 配置选项

HTML属性

  • data-steam-id: Steam用户名或自定义URL ID（必需）
  • id: 容器的唯一标识符

自定义Steam ID

替换 data-steam-id 中的值为你的Steam个人资料URL中的ID：

  • 如果你的Steam URL是 https://steamcommunity.com/id/YourUsername/
  • 那么使用 data-steam-id="YourUsername"

🎨 样式自定义

Widget使用了独立的CSS类名（以spw-前缀），不会与你网站的样式冲突。

自定义颜色

1
2
3
4
5
/* 覆盖默认颜色 */
.spw-profile-customization {
    --primary-color: #your-color;
    --secondary-color: #your-secondary-color;
}

调整大小

1
2
3
4
.steam-profile-widget {
    max-width: 600px; /* 自定义宽度 */
    margin: 10px 0;   /* 自定义间距 */
}

🌐 跨域支持

Widget使用 allorigins.win 代理服务来解决跨域问题，无需额外配置。

📱 响应式设计

Widget自动适配移动设备，在小屏幕上会调整布局和字体大小。

⚡ 性能特性

  • 轻量级: 单文件，无依赖
  • 缓存友好: 自动处理样式注入
  • 防冲突: 使用独立的CSS类名
  • 优雅降级: 网络错误时显示静态内容

🔧 故障排除

常见问题

  1. Widget不显示

    • 检查容器ID是否正确
    • 确保Steam用户名存在且公开

  2. 样式冲突

    • Widget使用spw-前缀的类名，避免冲突
    • 如有问题，检查CSS优先级

  3. 加载缓慢

    • 这是正常现象，因为需要从Steam获取数据
    • 加载期间会显示动画

📝 HTML使用示例

简单HTML示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steam个人资料组件演示</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 20px;
            background: #1b2838;
            color: white;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="container">
<h1>🎮 我的Steam个人资料</h1>
        
<!-- Steam个人资料组件 -->
<script src="https://upyuncloud.angforever.top/js/steam_profile_widget/v0.1/steam-profile-widget.js"></script>
<div id="steam-profile" data-steam-id="ANGJustinl"></div>
        
<p>查看我在上面的游戏成就！</p>
</div>
    
</body>
</html>

在线演示：

🎮 我的Steam个人资料

Steam个人资料组件将在这里加载

查看我在上面的游戏成就！

博客集成示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的游戏博客</title>
    <style>
        .gaming-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px;
            border-radius: 15px;
            margin: 20px 0;
        }
        .widget-container {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }
        h1, h2 { color: white; }
        p { color: #f0f0f0; }
    </style>
</head>
<body>
    <article>
        <h1>关于我的游戏装备</h1>
        <p>这里是我的Steam个人资料，带有自定义样式：</p>
        
        <div class="gaming-section">
            <h2>🎮 游戏档案</h2>
            <div class="widget-container">
                <!-- 带自定义样式的Steam个人资料组件 -->
                <div id="steam-widget" data-steam-id="你的用户名"></div>
            </div>
        </div>
        
        <p>更多博客内容...</p>
    </article>
    
    <script src="https://upyuncloud.angforever.top/js/steam_profile_widget/v0.1/steam-profile-widget.js"></script>
</body>
</html>

在线演示：

🎮 游戏档案

带自定义样式的Steam个人资料组件

个人作品集网站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发者作品集</title>
    <style>
        .portfolio-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 40px 0;
        }
        .gaming-card {
            background: #171a21;
            border: 2px solid #2a475e;
            border-radius: 12px;
            padding: 25px;
            transition: transform 0.3s ease;
            color: white;
        }
        .gaming-card:hover {
            transform: translateY(-5px);
            border-color: #66c0f4;
        }
        .skills-card {
            background: #2a2a2a;
            padding: 25px;
            border-radius: 12px;
            color: white;
        }
        @media (max-width: 768px) {
            .portfolio-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <main class="portfolio">
        <section class="about-section">
            <h1>张三 - 全栈开发工程师</h1>
            
            <div class="portfolio-grid">
                <div class="skills-card">
                    <h2>💻 技术技能</h2>
                    <ul>
                        <li>JavaScript, TypeScript</li>
                        <li>React, Vue.js</li>
                        <li>Node.js, Python</li>
                        <li>游戏开发</li>
                    </ul>
                </div>
                
                <div class="gaming-card">
                    <h2>🎮 游戏经历</h2>
                    <p>当我不在编码时，我在游戏！</p>
                    <!-- Steam个人资料组件 -->
                    <div id="my-gaming-profile" data-steam-id="你的用户名"></div>
                </div>
            </div>
        </section>
    </main>

    <script src="https://upyuncloud.angforever.top/js/steam_profile_widget/v0.1/steam-profile-widget.js"></script>
</body>
</html>

在线演示：

💻 技术技能

  • JavaScript, TypeScript
  • React, Vue.js
  • Node.js, Python
  • 游戏开发

🎮 游戏经历

当我不在编码时，我在游戏！

Steam个人资料组件

游戏商城团队介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>游戏商城 - 认识我们的团队</title>
    <style>
        .team-section {
            padding: 60px 0;
            background: linear-gradient(45deg, #1e3c72, #2a5298);
        }
        .team-member {
            display: flex;
            align-items: center;
            gap: 30px;
            margin: 40px 0;
            padding: 30px;
            background: rgba(255,255,255,0.05);
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }
        .member-info {
            flex: 1;
            color: white;
        }
        .steam-profile-section {
            flex: 1;
            min-width: 300px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <section class="team-section">
        <div class="container">
            <h1 style="color: white; text-align: center;">认识我们的游戏专家</h1>
            
            <div class="team-member">
                <div class="member-info">
                    <h3>王小明</h3>
                    <p>首席游戏策展人</p>
                    <p>15年以上游戏经验，专精独立游戏和3A大作。</p>
                </div>
                <div class="steam-profile-section">
                    <!-- 团队成员的Steam个人资料组件 -->
                    <div id="curator-profile" data-steam-id="团队成员用户名"></div>
                </div>
            </div>
            
            <div class="team-member">
                <div class="member-info">
                    <h3>李小红</h3>
                    <p>社区经理</p>
                    <p>构建游戏社区，连接全球玩家。</p>
                </div>
                <div class="steam-profile-section">
                    <!-- 另一个Steam个人资料组件 -->
                    <div id="community-profile" data-steam-id="另一个用户名"></div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://upyuncloud.angforever.top/js/steam_profile_widget/v0.1/steam-profile-widget.js"></script>
</body>
</html>

在线演示：

认识我们的游戏专家

王小明

首席游戏策展人

15年以上游戏经验，专精独立游戏和3A大作。

团队成员的Steam个人资料组件

游戏评测网站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>专业玩家游戏评测</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .reviewer-card {
            border: 1px solid #ddd;
            border-radius: 15px;
            padding: 25px;
            margin: 30px 0;
            background: white;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .reviewer-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.15);
        }
        .reviewer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 15px;
        }
        .review-content {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin: 15px 0;
        }
        .rating {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <main>
        <h1 style="text-align: center;">🎮 专业游戏评测</h1>
        
        <article class="reviewer-card">
            <div class="reviewer-header">
                <div>
                    <h2>评测：《赛博朋克2077》</h2>
                    <p>评测者：<strong>专业玩家2024</strong></p>
                </div>
                <div class="rating">⭐⭐⭐⭐☆</div>
            </div>
            
            <div class="review-content">
                <p>在夜之城度过100多个小时后，这是我的详细评测...</p>
                <p><em>查看我的游戏资历：</em></p>
            </div>
            
            <!-- 评测者的Steam个人资料 -->
            <div id="reviewer-steam" data-steam-id="专业玩家用户名"></div>
        </article>
        
        <article class="reviewer-card">
            <div class="reviewer-header">
                <div>
                    <h2>评测：《艾尔登法环》</h2>
                    <p>评测者：<strong>魂系老兵</strong></p>
                </div>
                <div class="rating">⭐⭐⭐⭐⭐</div>
            </div>
            
            <div class="review-content">
                <p>FromSoftware再次超越了自己...</p>
                <p><em>查看我的魂系游戏通关记录：</em></p>
            </div>
            
            <!-- 另一个评测者的Steam个人资料 -->
            <div id="souls-reviewer" data-steam-id="魂系专家用户名"></div>
        </article>
    </main>

    <script src="https://upyuncloud.angforever.top/js/steam_profile_widget/v0.1/steam-profile-widget.js"></script>
</body>
</html>

在线演示：

🎮 专业游戏评测

<div style="border: 1px solid #ddd; border-radius: 15px; padding: 25px; margin: 30px 0; background: white; box-shadow: 0 8px 25px rgba(0,0,0,0.1);">    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px;">        <div>            <h2 style="margin: 0 0 5px 0;">评测：《赛博朋克2077》</h2>            <p style="margin: 0; color: #666;">评测者：<strong>专业玩家2024</strong></p>        </div>        <div style="font-size: 24px;">⭐⭐⭐⭐☆</div>    </div>        <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 15px 0;">        <p style="margin: 0 0 10px 0;">在夜之城度过100多个小时后，这是我的详细评测...</p>        <p style="margin: 0; font-style: italic;"><em>查看我的游戏资历：</em></p>    </div>        <div id="reviewer-steam-demo-cn" data-steam-id="专业玩家用户名" style="background: rgba(102,192,244,0.1); padding: 15px; border-radius: 8px; text-align: center; border: 2px dashed #66c0f4; margin-top: 15px;">        <p style="margin: 0; color: #66c0f4;">评测者的Steam个人资料组件</p>    </div></div>

响应式设计示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式Steam组件示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .responsive-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .profile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin: 30px 0;
        }
        
        .profile-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .profile-card h3 {
            color: white;
            margin-bottom: 15px;
            text-align: center;
        }
        
        h1 {
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .profile-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .profile-card {
                padding: 20px;
            }
            
            h1 {
                font-size: 24px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .profile-card {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="responsive-container">
        <h1>🎮 游戏玩家展示墙</h1>
        
        <div class="profile-grid">
            <div class="profile-card">
                <h3>团队队长</h3>
                <div id="leader-profile" data-steam-id="队长用户名"></div>
            </div>
            
            <div class="profile-card">
                <h3>策略专家</h3>
                <div id="strategist-profile" data-steam-id="策略家用户名"></div>
            </div>
            
            <div class="profile-card">
                <h3>射击高手</h3>
                <div id="shooter-profile" data-steam-id="射击专家用户名"></div>
            </div>
        </div>
    </div>

    <script src="https://upyuncloud.angforever.top/js/steam_profile_widget/v0.1/steam-profile-widget.js"></script>
</body>
</html>

在线演示：

🎮 游戏玩家展示墙

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin: 30px 0;">        <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.2);">            <h3 style="color: white; margin-bottom: 15px; text-align: center;">团队队长</h3>            <div id="leader-profile-demo" data-steam-id="队长用户名" style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center; border: 2px dashed #fff;">                <p style="margin: 0; color: white;">Steam个人资料组件</p>            </div>        </div>                <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.2);">            <h3 style="color: white; margin-bottom: 15px; text-align: center;">策略专家</h3>            <div id="strategist-profile-demo" data-steam-id="策略家用户名" style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center; border: 2px dashed #fff;">                <p style="margin: 0; color: white;">Steam个人资料组件</p>            </div>        </div>                <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.2);">            <h3 style="color: white; margin-bottom: 15px; text-align: center;">射击高手</h3>            <div id="shooter-profile-demo" data-steam-id="射击专家用户名" style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center; border: 2px dashed #fff;">                <p style="margin: 0; color: white;">Steam个人资料组件</p>            </div>        </div>    </div></div>

文件结构

1
2
3
4
5
steam-profile-widget/
├── steam-profile-widget.js    # 主要widget文件
├── widget-example.html        # 使用示例
├── README.md                  # 英文说明文档
└── README-CN.md              # 中文说明文档

🎯 兼容性

  • ✅ Chrome 60+
  • ✅ Firefox 55+
  • ✅ Safari 12+
  • ✅ Edge 79+
  • ✅ 移动端浏览器

📄 许可证

MIT License - 可自由使用和修改

🤝 贡献

欢迎提交Issue和Pull Request！

🔗 相关链接

享受展示你的Steam个人资料！ 🎮

]]> <h1 id="Steam-Profile-Widget"><a href="#Steam-Profile-Widget" class="headerlink" title="Steam Profile Widget"></a>Steam Profile Widget</h1>< 曲线积分探秘：积分值与路径有关吗？ https://blog.angforever.top/2025/05/12/mathjax/ 2025-05-12T08:02:07.000Z 2026-02-07T17:18:45.027Z 曲线积分探秘：路径变，积分值变不变？

当我们计算一个函数（或者更准确地说，一个向量场）沿着一条曲线的积分时，一个自然而然的问题是：如果保持起点和终点不变，而被积的函数也完全相同，那么换条路径，积分的结果会改变吗？

答案是：不一定！ 这完全取决于被积函数所代表的“场”的性质。

核心概念：保守场与路径无关性

在物理学和数学中，有一类特殊的向量场被称为保守场 (Conservative Vector Field)。对于保守场而言，其在两点之间的线积分值仅取决于起点和终点，而与所选择的具体路径无关。

想象一下重力场：你将一个物体从A点移动到B点，重力对物体所做的功只取决于A和B两点的高度差，而跟你选择是走楼梯、乘电梯还是走斜坡（即路径）无关。重力场就是一个典型的保守场。

相反，如果存在摩擦力（一个非保守力），你将物体从A点推到B点，摩擦力做的负功就和你选择的路径长度直接相关。路径越长，克服摩擦做的功就越多。

如何判断一个场是否保守？（数学家的工具箱）

一个向量场 是保守场，等价于以下几个（在适当区域内，如单连通区域）互为充要的条件：

  1. 存在势函数 (Potential Function)：
    存在一个标量函数 (称为势函数)，使得 (即 是 的梯度)。
    如果满足这个条件，那么曲线积分可以大大简化：

    显然，这个结果只和起点、终点处的势函数值有关。

  2. 环路积分为零：
    对于任意闭合路径 （起点和终点重合），曲线积分为零：

  3. 旋度 (Curl) 为零：
    这是实践中最常用的检验方法。向量场 的旋度 。

    • 对于二维向量场 ，条件简化为：
    • 对于三维向量场 ，条件是：



      注意：旋度为零是场保守的必要条件。在*单连通区域（简单说就是区域内没有“洞”），它也是充分条件。*

实战演练：两个例子见分晓

让我们通过具体的例子来看看路径无关和路径相关是如何体现的。

例1：保守场 —— 积分与路径无关

考虑向量场 。
起点 A 为 ，终点 B 为 。
积分形式为 。

1. 检验保守性：
,


由于 ，该场是保守场。

2. 路径1 ()：直线 从 到
参数化： (); 。

3. 路径2 ()：沿x轴从 到 ，再平行y轴从 到

  • (): .
  • (): .
    总积分 = 。

结果： 两条不同路径的积分值都是 2，与保守场的性质相符。
(其势函数为 ，则 。)

例2：非保守场 —— 积分与路径相关

考虑向量场 。
起点 A 为 ，终点 B 为 。
积分形式为 。

1. 检验保守性：
,


由于 ，该场是非保守场。

2. 路径1 ()：沿x轴从 到
参数化：. 从 到 。

3. 路径2 ()：沿单位圆上半圆从 到
参数化： (); 。

结果： 两条不同路径的积分值分别为 0 和 ，不相同。这与非保守场的性质相符。

结论

回到最初的问题：曲线积分，被积函数相同，起始终点不变，沿不同路径得出的积分值到底相同还是不同？

  • 如果被积函数（向量场）是保守的 (例如旋度为零)，则积分值相同，与路径无关。
  • 如果被积函数（向量场）是非保守的 (例如旋度不为零)，则积分值通常不同，与具体路径有关。

理解保守场的概念及其判据，是掌握曲线积分和许多物理学（如电磁学、流体力学）及工程学问题的关键。希望这些解释和例子能帮助你更好地理解这一重要概念！

]]> <h1 id="曲线积分探秘：路径变，积分值变不变？"><a href="#曲线积分探秘：路径变，积分值变不变？" class="headerlink" title="曲线积分探秘：路径变，积分值变不变？"></a>曲线积分探秘：路径变，积分值变不变？</h1><p>当我们计算一 昂昂Bot https://blog.angforever.top/2023/09/12/AABT/ 2023-09-12T08:02:07.000Z 2026-02-07T17:18:45.027Z aabt

ANGANGBOT

✨ 基于NoneBot2的交互bot ✨

languages pythononebot11nonebot2blackAABT AABT

Alt

一切开发旨在学习，请勿用于非法用途

旧版文档请见 https://github.com/ANGJustinl/ANGANGBOT/README.md (v2以前)

| 🚀部署 (可参照 https://angjustinl.github.io/2023/01/06/ANGANGBOT1/ )

| 自建可能会遇到各种花里胡哨的麻烦，如果没有一些基础的话，前面可是困难重重啊少年| 本文内容请您自行判断是否可信可靠可用，若您根据本文内容建立和使用AABT时出了任何问题和不良结果，鄙人概不负责。

至少需要Python3.8及以上版本(推荐3.10)，可通过python -V或python3 -V查看版本号

此 README 提供了最低程度的基于 nonebot 进行安装的教程与支持。

建议您至少拥有一定的编程基础之后再尝试使用本工具。

  1. 安装 Python (推荐>=3.9)
  2. 前往 https://github.com/ANGJustinl/ANGANGBOT/releases 下载
  3. 安装依赖

推荐使用nb-cil脚手架 pip install nb-cli + 在项目的根目录（即 bot.py 文件所在的位置)按下 Shift + 右键，点击【在此处打开 CMD/PowerShell 窗口】 后

pip install -r requirements.txt

3.1 修改 .env.prod 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
    
PORT=10219 # Nonebot监听的端口-----2
    
LOG_LEVEL=INFO # 日志等级-----3
    
SUPERUSERS=["12345678"] # 超级用户,修改12345678为你bot管理者的qq号-----4
    
NICKNAME=["aabt"] # 机器人的昵称-----5
    
COMMAND_START=[""] # 命令前缀,根据需要自行修改-----6
    
COMMAND_SEP=[" "] # 命令分隔符-----7

3.2 修改[.env]配置文件

pixiv功能

5 pixiv_refresh_token = '' 写入你p站的refresh_token,具体获取方法自行百度

setu功能 配置<- 点我

运势插件<- 点我

|可选填写部分
|详见[.env]配置文件内容

  1. 启动bot

使用nb-cil脚手架

Ⅰ.您可以直接在项目的根目录 打开 PowerShell 窗口 输入 nb run

运行项目。如果输出如下所示的内容，代表运行成功：(由于第一次安装不加载配置文件,或许会略有不同,不报错就是没问题的)

10-20 16:40:30 [SUCCESS] nonebot | NoneBot is initializing…

10-20 16:40:31 [SUCCESS] nonebot | Succeeded to import “example1”(这里是被加载的插件)

10-20 16:40:32 [SUCCESS] nonebot | Running NoneBot…

10-20 16:40:32 [INFO] uvicorn | Started server process [uid]

10-20 16:40:32 [INFO] uvicorn | Waiting for application startup.

10-20 16:40:32 [INFO] uvicorn | Application startup complete.

10-20 16:40:32 [INFO] uvicorn | Uvicorn running on http://ip:port (Press CTRL+C to quit)

  1. 连接 CQ-HTTP [可自行搜索现版本使用方法 如https://www.bilibili.com/read/cv25444623/]

前往 https://github.com/Mrs4s/go-cqhttp > Releases，下载适合自己操作系统的可执行文件。 go-cqhttp 在初次启动时会询问代理方式，选择反向 websocket 代理即可。之后用任何文本编辑器打开config.yml文件，设置反向 ws 地址、上报方式：

1
2
3
servers:
    - ws-reverse:
        universal: ws://ip:port/onebot/v11/ws

然后设置您的 QQ 号和密码。您也可以不设置密码，选择扫码登陆的方式。

登陆成功后，后台应该会发送一条类似的信息：

10-20 16:40:32 [INFO] nonebot | WebSocket Connection from CQHTTP Bot Accepted!

至此，您可以和对应的 QQ 号聊天并使用 angangbot 的基础功能了。

| 插件：

对应插件的功能可以自己查询对应插件有关安装方法,此处先不予整合

| 引用:

Nonebot2

命令

1.Pic_menu <-点我查看

2.AnimalVoice_Convert

指令需要@范围说明
兽音加密/convert否群聊/私聊发送需要加密的文字
兽音解密/deconvert否群聊/私聊发送需要解密的文字
切噜一下/cherulize否群聊/私聊发送需要解密的文字
切噜～/decherulize否群聊/私聊发送需要解密的文字

3.[wallpaper]

发送壁纸获取一张壁纸

发送 运气检测

打开随机出一张壁纸

非酋还会刷出来风景图

api来自 http://api.iw233.cn/API/index.php

food 获取食物

4.nonebot_plugin_setu4 <-点我 查看详解

内置数据库的setu插件:

命令头: setu|色图|涩图|想色色|来份色色|来份色图|想涩涩|多来点|来点色图|来张setu|来张色图|来点色色|色色|涩涩 (任意一个)

张数: 1 2 3 4 ... 张|个|份 (可不填, 默认1)

r18: 不填则不会出现r18图片, 填了会根据r18模式管理中的数据判断是否可返回r18图片

关键词: 任意 (可不填)

参考 (空格可去掉):

setu 10张 r18 白丝
setu 10张 白丝
setu r18 白丝
setu 白丝
setu

5.nonebot_plugin_weather_lite

使用wttr.in的天气查询:
命令：

注：

1.以下天气命令均可以使用wttr、weather、tianqi等效替代,2.城市名可以使用各种语言，例如Beijing、Peking、北京是等效的。3.支持查询全球各种地区。例如莫斯科什么的都可以。

"天气 城市名" (可选，如不给出机器人会提示获取)

"天气 城市名_format=v2"

"天气 城市名_format=v3"

指定语言:

1
天气 城市名_lang=语言

语言可选于：

am ar af be bn ca da de el et fr fa hi hu ia id it lt mg nb nl oc pl pt-br ro ru ta tr th uk vi zh-cn zh-tw

甚至支持看月相：

1
"天气 Moon"

更多用法请参考wttr.in的文档！
地址：https://github.com/chubin/wttr.in

6.nonebot_plugin_fortune

占卜一下你的今日运势！🎉

一般抽签：今日运势、抽签、运势；

指定主题抽签：[xx抽签]，例如：pcr抽签、holo抽签、碧蓝抽签；

[群管或群主或超管] 配置抽签主题：设置[原神/pcr/东方/vtb/xxx]签：设置群抽签主题；

重置（抽签）主题：设置群抽签主题为随机；

抽签设置：查看当前群抽签主题的配置；

[超管] 刷新抽签 ：全局即刻刷新抽签，防止过0点未刷新；

今日运势帮助 ：显示插件帮助文案；

查看（抽签）主题 ：显示当前已启用主题；

7.pixiv_bot

看看<类型>榜<范围>：查看pixiv榜单 <类型>可省略

来<数量>张图：从推荐插画随机抽选一张插画（<数量>可省略，下同）

来<数量>张<关键字>图：搜索关键字，从搜索结果随机抽选一张插画

示例：来张初音ミク图、来五张初音ミク图

来<数量>张<用户>老师的图：搜索用户，从插画列表中随机抽选一张插画

看看图<插画ID>：查看ID对应的插画

示例：看看图114514

来<数量>张私家车：从书签中随机抽选一张插画（发送者需绑定Pixiv账号，或者在配置中指定默认Pixiv账号）

/pixivbot bind <pixiv_user_id>：绑定Pixiv账号（用于随机书签功能）

/pixivbot unbind：解绑Pixiv账号

/pixivbot、/pixivbot help：查看帮助

更详细请见 https://github.com/bot-ssttkkl/nonebot-plugin-pixivbot#%E8%A7%A6%E5%8F%91%E8%AF%AD%E5%8F%A5

| 👥反馈与交流

Issue for sure

QQ:77139032

群聊:696748432

点我加入群聊

bilibili:https://space.bilibili.com/213993950

tg:https://t.me/angangbot

| 更新记录

v2.5.4 2024.02.14 新版文档与全平台适配

v2.0.0 2023.09.01 完全重置 适配最新nb

v1.3.2 2023.01.13 细化了github readme

v1.3.1 2023.01.05 编辑了文档

v1.3 2022 12.30 推倒重来了大部分内容,1.3后的详见新的分支

v1.2 2022.12.20

v1.1.6 2022.10.23 重写了help获取帮助命令cv2内容

v1.1.5 2022.10.22 配置了APEX查分插件，改了部分插件内容

v1.1.4 2022.10.22 添加舞萌DX插件相关内容

v1.1.2 2022.10.21 添加了部分插件，优化了requirements.txt内容

v1.1.0 2022.10.20 上传至git

v1.0.1 2022.10.19 完成了bot的配置流程

v1.0.0 2022.10.19 bot初步成型

| 目标:

  • 重写机器人
  • 重写文档
  • Steam_asf的bot进行qq控制 bar

| EXTRA:

https://afdian.net/a/angjustinl

]]> <p align="center"> <a href="[https://github.com/ANGJustinl/ANGANGBOT"><img lazyload src="/imag 使用秋叶佬速通训练lora模型的杂类问题 https://blog.angforever.top/2023/04/02/%E4%BD%BF%E7%94%A8%E7%A7%8B%E5%8F%B6%E4%BD%AC%E9%80%9F%E9%80%9A%E8%AE%AD%E7%BB%83lora%E6%A8%A1%E5%9E%8B%E7%9A%84%E6%9D%82%E7%B1%BB%E9%97%AE%E9%A2%98/ 2023-04-02T08:02:07.000Z 2026-02-07T17:18:45.027Z 使用秋叶佬速通训练lora模型的杂类问题

使用秋叶佬速通训练lora模型的杂类问题

训练整合包来自https://www.bilibili.com/video/BV1fs4y1x7p2/
1. xformers模型问题 ModuleNotFoundError: No module named ‘xformers’

秋叶佬的整合包默认使用虚拟环境
就这个install.ps1
但是在安装 [第13行] 的xformers时由于用pip安装了来自github的wheel，所以可能会出现

ERROR: Could not install packages due to an OSError: HTTPSConnectionPool(host=’github.com’, port=443): Max retries exceeded with url: /C43H66N12O12S2/stable-diffusion-webui/releases/download/f/xformers-0.0.14.dev0-cp310-cp310-win_amd64.whl (Caused by SSLError(SSLCertVerificationError(1, ‘[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify fail

解决方法：
在pip命令后加 [c1] –trusted-host github.com

如 

1
pip install -U -I --no-deps https://github.com/C43H66N12O12S2/stable-diffusion-webui/releases/download/f/xformers-0.0.14.dev0-cp310-cp310-win_amd64.whl --trusted-host github.com

然后发现好慢！
是这样的

pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host=’objects.githubusercontent.com’, port=443): Read timed out.

下载超时了…

我是自己用代理站下载然后 本地安装 的

2. ValueError: check_hostname requires server_hostname

这个是我自己纯纯nt没关代理

参考：c1.https://blog.csdn.net/m0_51963375/article/details/129028343)))

]]> <p><img lazyload="" src="/images/loading.svg" data-src="https://pic4.zhimg.com/80/v2-de137f467878e292ce19613d5b8c1c93_720w.webp" alt="使用秋叶佬速 STEAM创意工坊 GIF图 展柜制作 https://blog.angforever.top/2022/04/02/STEAM%E5%88%9B%E6%84%8F%E5%B7%A5%E5%9D%8A-GIF%E5%9B%BE-%E5%B1%95%E6%9F%9C%E5%88%B6%E4%BD%9C/ 2022-04-02T08:02:07.000Z 2026-02-07T17:18:45.027Z

创意工坊代码

J('[name=file_type]').val(0);$J('[name=visibility]').val(0);

效果如图

效果如图

写在这里的是我个人制作的步骤，尽可能的会便捷一些

全过程需开启加速器加速steam或本地反代

1.首先你需要一张合适大小横向视频或GIF图

视频转换GIF网站 https://ezgif.com/

或者用ps或其他视频工具导出为GIF

2.调整图片

调整图片网站：https://ezgif.com/

  • 缩放图片 ：（宽高可任意,后面steam有自己的拉伸,我是宽640,高360,为保证加载同步尽量大小在2MB左右）
  • 裁剪图片：五份每份宽度相同（如按照我的大小则每份宽128px，高360px） 每一张大小需小于8MB

[最重要的一步]调整图片的16进制编码（防止显示时存在黑边）：

网站：https://hexed.it/

将GIF格式的结尾3B改为21

  • 为防止格式化问题，建议在编辑器中以十六进制模式直接修改，不要用文本编辑器打开保存。
  • 操作步骤：在 hexed.it 打开 GIF 文件，找到文件末尾的 3B 字节，将其改为 21，然后保存文件。
  • 这样可以避免部分平台或工具自动格式化或损坏 GIF 文件结构。

改前

改前

改后

改后

3.上传图片

网站：https://steamcommunity.com/sharedfiles/edititem/767/3/

选择图片后按 F12 - 控制台 - 输入代码 - 回车键

J('[name=file_type]').val(0);$J('[name=visibility]').val(0);

输出结果填完点保存即可

输出结果填完点保存即可

放一下我的主页~

放一下我的主页~
]]> <blockquote> <p>创意工坊代码</p> <p><mjx-container class="MathJax" jax="SVG"><svg style="vertical-align: -0.566ex;" xmlns="http://www.w3.org/2000/