![](/static/img/fdce3e1e2293a51344ce38cdc4c37bb4.2025-03-19_124521_300.webp)

> 作为第一批90后已经35岁了，虽然早早做了准备，但是好像一直在准备。上次琢磨还是毕业之后靠啥吃饭，现在又到被毕业的阶段了，各种成功手段到我这都成玄学了，因为开始走的就不是人脉路线，就得自己找船，唯一能安慰自己的就是只要眼前的船够多总有一个能上去。

**所以就得折腾**





## 1. 文生图

最近`Gemini 2.0 flash` 不是挺火么，原生文生图很厉害，接口我也测试了，返回的是`Base64`，需要自己转一下，我用 `cloudflare` 做了转换和图床，这里记录下别的白嫖平台，`智谱` 和 `硅基流动` 还有 `image.pollinations.ai` 都有免费的文生图服务，生成的效果反正就是抽卡，多抽几次呗；

## 2. 查询API

智谱的免费查询接口收费了 0.03元每次，博查是 0.036元每次，比 bing 什么的便宜多了，返回的数据还是比较详细的，省着自己再爬，我又部署了`firecrawl `效果还不错。别的`jina` `Tavily` `Brave`都有免费额度，但是收费也挺贵的，感兴趣的可以搜一搜。

## 3. MCP


`Cherry Studio`支持MCP了，测试了一下，准备自己写服务试试
```
{
  "mcpServers": {
    "fetch": {
      "isActive": true,
      "description": "fetch爬虫",
      "command": "uvx",
      "args": [
        "mcp-server-fetch"
      ]
    },
    "everything-search": {
      "isActive": true,
      "description": "everything-search",
      "command": "uvx",
      "args": [
        "mcp-server-everything-search"
      ],
      "env": {
        "EVERYTHING_SDK_PATH": "D:\\Soft\\EverythingToolbar-0.5.2\\Everything64.dll"
      }
    },
    "mcp-server-firecrawl": {
      "isActive": true,
      "command": "npx",
      "args": [
        "-y",
        "firecrawl-mcp"
      ],
      "env": {
        "FIRECRAWL_API_URL": "http://148.135.77.70:3002",
        "FIRECRAWL_API_KEY": "fc-search"
      }
    },
    "filesystem": {
      "isActive": false,
      "command": "cmd",
      "description": " Read/write files Create/list/delete directories Move files/directories Search files Get file metadata",
      "args": [
        "/c",
        "bunx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Program Files\\Cherry Studio"
      ],
      "autoApprove": [
        "read_file",
        "read_multiple_files",
        "list_directory",
        "directory_tree",
        "search_files",
        "get_file_info",
        "list_allowed_directories"
      ]
    }
  }
}
```

杂七杂八2025年3月19日

<div style="background: linear-gradient(135deg, #1a1a1a 0%, #0a3d62 100%);padding: 4rem 2rem;text-align: center;border-radius: 8px;border: 1px solid rgba(0, 255, 255, 0.2);box-shadow: 0 4px 20px rgba(0, 191, 255, 0.1);"><h1 style="color: #00ff88;font-family: Arial, sans-serif;font-size: 4rem;text-align: center;background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;position: relative;text-transform: uppercase;letter-spacing: 4px;transition: 0.3s ease;transform: scale(1);filter: drop-shadow(0 0 40px #00ff88);">HTML转为图片输出</h1></div>

# HTML转为图片输出

## 问题

就是让AI 给我写了一个，将HTML片段转为图片的工具，比如这个`Banner`
```
<div style="
    background: linear-gradient(135deg, #1a1a1a 0%, #0a3d62 100%);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 191, 255, 0.1);
">
     <h1 style="
        color: #00ff88;
        font-family: Arial, sans-serif;
        font-size: 4rem;
        text-align: center;
        background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 4px;
        transition: 0.3s ease;
        transform: scale(1);
        filter: drop-shadow(0 0 40px #00ff88);
    ">HTML转为图片输出</h1>
</div>
```



AI选用的是`Puppeteer`这个组件，我没接触过，反正就是能自己配置，谷歌 火狐什么的浏览器，代码的，没有界面，叫无头浏览器，`路易十六很喜欢`

然后各种问题，首先 `Puppeteer` 这玩意压根不能用，我让用`C#`写，写的方法名压根不对，可能是版本问题；然后自己下的`Chrome`浏览器内核也不能用，好不容易本地调试完了，`Docker`里又报错了；

## 契机

后来放弃了，调着调着发现服务器空间不够了，由于我一直瞎搞，`100G` 就玩`Docker`，玩没了，我就清理，后来发现一个 `browserless/chrome`，我也没用上啊，发现在 `rsshub` 里挂着，看着名字是浏览器，一艘还真是，`rsshub`就是用这个[browserless](https://github.com/browserless/browserless)监听网页变化的

要不说瞎折腾有好处，指不定哪就藏个`路易十六`

## 宽高问题

因为我就录入一个div,一段，这里的宽高就不是浏览器的高度，Puppeteer默认高度是600，继续问AI，改了一天也没改对；

最后是有两处，默认的高度要给够，写了个8000，然后再算一次，就是 `document.querySelector('body > div').getBoundingClientRect().height`，只能是元素的高度，`body`也不行，`document`也不行

## 代码

一共没多少行
``` c#
using Microsoft.AspNetCore.Mvc;
using PuppeteerSharp;

namespace HtmlToImageApi.Controllers
{
    public class HtmlRequest
    {
        public string DIV { get; set; }

        public int MaxWidth { get; set; } = 600;
    }

    [ApiController]
    [Route("[controller]")]
    public class HtmlToImageController : ControllerBase
    {
        private readonly string _imageDirectory = $"{AppContext.BaseDirectory}images";

        [HttpPost]
        public async Task<IActionResult> Post([FromBody] HtmlRequest _request)
        {
            var html = _request.DIV;

            if (string.IsNullOrEmpty(html))
            {
                return BadRequest("HTML content is required.");
            }

            try
            {
                var browser = await Puppeteer.ConnectAsync(new ConnectOptions
                {
                    BrowserWSEndpoint = "ws://browserless:1201",//browserless地址
                    DefaultViewport = new ViewPortOptions { Width = _request.MaxWidth, Height = 8000 }
                });

                var page = await browser.NewPageAsync();

                if (!html.Trim().StartsWith("<html", StringComparison.OrdinalIgnoreCase))
                {
                    html = $"<html><head><style>body {{ font-family: 'Noto Sans SC', sans-serif; margin: 0 auto;height: auto; }}</style></head><body>{html}</body></html>";
                }

                await page.SetContentAsync(html);
                // 等待所有字体加载完成
                await page.EvaluateFunctionAsync(@"async () => {
                     await document.fonts.ready;
                }");

                // 获取元素内容高度
                var contentHeight = await page.EvaluateFunctionAsync<decimal>(@"() => {
                    return document.querySelector('body > div').getBoundingClientRect().height;
                }");
                var contentWidth = await page.EvaluateFunctionAsync<decimal>(@"() => {
                    return document.querySelector('body > div').getBoundingClientRect().width;
                }");

                // 根据内容高度重新设置视口
                await page.SetViewportAsync(new ViewPortOptions { Width = Convert.ToInt32(contentWidth), Height = Convert.ToInt32(contentHeight) });

                var fileName = $"{Guid.NewGuid()}.png";
                var filePath = Path.Combine(_imageDirectory, fileName);

                await page.ScreenshotAsync(filePath, options: new ScreenshotOptions
                {
                    FullPage = true,
                });
                await browser.CloseAsync();

                return Ok(fileName);
            }
            catch (Exception ex)
            {
                return StatusCode(500, $"Error: {ex.Message}");
            }
        }
    }
}
```

browserless Docker
```yml
browserless:
    # marked
    image: browserless/chrome # marked
    restart: always # marked
    ulimits:
      # marked
      core:
        # marked
        hard: 0 # marked
        soft: 0 # marked
    healthcheck:
      test:
        - CMD
        - curl
        - -f
        - http://localhost:3000/pressure
      interval: 30s
      timeout: 10s
      retries: 3
    ports:
      - 1201:3000
```

Dockerfile
```yml
# 使用官方 ASP.NET Core 运行时镜像
FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base
WORKDIR /app


# 安装字体
RUN apt-get update && apt-get install -y fonts-noto-cjk fonts-noto-color-emoji

# 使用官方 .NET Core SDK 镜像构建应用
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
WORKDIR /src
COPY ["HtmlToImageApi.csproj", "."]
RUN dotnet restore "./HtmlToImageApi.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "HtmlToImageApi.csproj" -c Release -o /app/build

# 发布应用
FROM build AS publish
RUN dotnet publish "HtmlToImageApi.csproj" -c Release -o /app/publish

# 最终镜像
FROM base AS final
WORKDIR /app

COPY --from=publish /app/publish .
EXPOSE 5000
ENTRYPOINT ["dotnet", "HtmlToImageApi.dll"]
```


![3cf86a25-0275-493a-b0d9-6e7fb094634d.png](/static/img/d929f279f865c672dae701ce4f9d63bb.3cf86a25-0275-493a-b0d9-6e7fb094634d.webp)

将一段HTML转为图片输出

<div style="background: #1a1f2c; padding: 3rem; border-left: 4px solid #3b82f6; 
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);">
  <h1 style="font-family: 'Helvetica Neue', sans-serif; font-size: 2.75rem; 
    color: #f1f5f9; margin: 0; display: flex; align-items: center; gap: 1rem;">
    <span style="display: inline-block; width: 8px; height: 40px; background: #3b82f6;"></span>
    TraeCN
    <span style="color: #94a3b8; font-weight: 300;">测试</span>
  </h1>
</div>



# TraeCN 测试


[Trae](https://www.trae.com.cn) 挺火的，我也测了以下**Builder 测试版本**，这里放几个截图，

## Builder 测试版本

模型支持DeepSeekV3 和 DeepSeekR1，这里显示`DeepSeek-Reasoner` 和 `DeepSeek-Chat`，应该指向的是官方模型，目前没有使用限制；还有个豆包模型但是现在是灰色的，是得灰这玩意怕比；



这里我输入了一个需求：



![wechat_2025-03-04_092109_941.png](/static/img/a43a97e01bdd5f17a3a95655b757412e.wechat_2025-03-04_092109_941.webp)

然后自己进行了思考和编写代码，`main.py` `requirements.txt` `Dockerfile`;

#### 构建 
直接构建，遇见了网络问题... `python:3.9-slim` 镜像执行 `apt-get install`时候会无网络，R1开始尝试修复;


![wechat_2025-03-04_094753_362.png](/static/img/b9f98cefd1e9617f6aaa9360b1a7c764.wechat_2025-03-04_094753_362.webp)

可以看到，`Trae` 尝试修改`Dockerfile`，然后人工确认修改，执行构建命令，人工确认执行，监听终端窗口，发现问题，再次尝试修改`Dockerfile` ... ，然后就报错了，**官方模型实锤**。

#### 修改代码

然后修改代码也会失败，哈；

![wechat_2025-03-04_100333_525.png](/static/img/d0bc0d69cd0428a3706013494032aa70.wechat_2025-03-04_100333_525.webp)

#### 历史

后来我发现AI修改的怎么退回呢，这里有个时间线，从这回退；


![wechat_2025-03-04_101002_806.png](/static/img/8b3207d896602696a5cd8bb14ffbf044.wechat_2025-03-04_101002_806.webp)

---

HTML到底怎么转成图片保存，这里我用了 `PuppeteerSharp` ，下次分享。

TreaCN测试

这不是到年底了么，除了工作总结，生活也要总结下，尤其是线上的生活




以下内容部分先后

# 1. 个人服务折腾

## 1.1 域名
申请了一个域名，shizhuoran.top 我闺女名字，腾讯云申请的，服务器是阿里云；

## 1.2 博客搬家
博客从Gitea搬家到了云服务Docker，`VanBlog`;

## 1.3 个人RSS
服务端`FreshRSS`，客户端 `Fluent Reader` `FeedMe`，添加了一些感兴趣的内容，可以集合到一快看了；

## 1.4 ZeroTier
部署了异地组网，部署了自己的moon服务，手机，平板，个人电脑，公司电脑，4个云服务器都连一块了；EasyTier也不赖，正在测试，可以切换；

## 1.5 Docker
使用Docker安装各种工具，`Nginx Proxy Manager` `Uptime Kuma` `Dockge` ...

# 2. 大模型元年

## 2.1 本地ollama
我发现我的笔记本还可以跑一些大模型，就试了试；7B-14B 都差不多能跑，跑了个遍，发现小模型是有壁垒的；

## 2.2 FastGPT & Dify || RAG & GraphRag
又学习测试了两个AI工作流，体验不错，写了一堆的工作流，目前没有太大的应用，作为积累；
初步的RAG探索，因为不会Python，没有精进；

## 2.3 OneAPI
大模型转发工具，可以连接本地模型，管理各平台模型；

## 2.4 微调
跟着跑了一次微调，发现训练数据会成为企业的核心资产；大胆预测针对训练数据和垂直领域的微调模型可能在将来可能会成为市场，像通用模型一样；

# 3. 开发

## 3.1 FineUI11的学习
没用上，就看了看，开发点公共库啥的，目前搁置状态；

## 3.2 FineUI扩展
卖不出去

## 3.3 MermaidHelp
自研开源生成流程图的AI项目，很有用，随时都会用；

## 3.4 GitReport
自研开源Git周报AI生成，研究了GIT的接口，拿一些数据，给AI总结，也一直在用，提交写的好周报次不了；

## 3.5 FineUIDesignerVSIX
自研FineUI的VS扩展工具；简化开发，省了不少事；

## 3.6 油猴脚本
使用油猴脚本（就是JS）开发了几个插件，这回浏览器也是私有的了；

# 4. 读书 & 影视 & 娱乐

《认知红利》还没读完，听了《国富论》《乔布斯传》《朱元璋演绎》，参加了2个AI论坛，1个新质生产的讲座，2个生产制造论坛，去了3次图书馆；

待读书单：《机·智 从数字化车间走向智能制造》《AI赋能 企业智能化实践》《智能制造之路》《对话时代》

影视：《毒液》《变形金刚：起源》《X战警97》《死侍与金刚狼》《辐射》《飞驰人生2》《洛基第二季》《超异能族》《哈莉奎因》《珍的不一样第二季》

游戏：《恶月十三》《棕色尘埃2》

B站一期不拉：波士顿圆脸，小约翰可汗，顺仙，燕三嘤嘤嘤，王全行，老6使命召唤，AIGCLINK，温大愚，小熊flippy，科学透镜，啊粥粥啊粥，小Lin说，... 太多了，反正配米饭很香

2024年终总结

本来买的vps闲着，然后部署了个H5的游戏，又想着ip访问不方便，就想打包APP。网上搜了一下，在线打包好多都花钱，本地的，装`HBuilderX`或者`Android Studio`，后来AI告诉我 `Cordova` 可以，是`Node.js`的一个工具`Node.js`我本地倒是有，安装也不麻烦，使用倒是还行，但是还要安装一堆的环境。我手上有`docker`，原来已经有人打包好`Cordova安卓环境`了，直接用就行，`docker`还能当工具用，我也是第一次知道这么玩。


![cordovaapparchitecture-20230712.svg](/static/img/2e2060deec538c91e6373dcbe762b213.cordovaapparchitecture-20230712.svg)



# 1. 环境
在`dokerhub` 和 `github` 上找了一圈，试验了几个环境，内部的版本比较老，导致各种失败，终于找到了一个能用的:
* [GitHub-cordova-android-builder](https://github.com/hamdifourati/cordova-android-builder)
* [docker](https://hub.docker.com/r/hamdifourati/cordova-android-builder/)

命令如下：
```
docker run -it -v "$(pwd)":/opt/src --rm hamdifourati/cordova-android-builder bash
```
> * --rm 就是使用后删除，容器退出后就删除实例了
> * $(pwd) 是取当前目录，这里会创建`cordova`的工作目录，指定目录也行，把引号去掉，如果是静态的文件包含index.html的就很方便
> * 最后的 `bash` 是进入该容器实例控制台的意思，就是所有的操作都在 `cordova` 容器内部

# 2. 补丁
进入到容器后，会到默认的`/opt/src` 目录，这里就印射的本地目录，但是还得打补丁才能用（注意这里都是容器内部），一遍一遍试才总结出来的:

```
#sdkmanager包升级
sdkmanager "platforms;android-34"
sdkmanager "build-tools;34.0.0"

#java环境
#https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html
wget https://download.oracle.com/java/17/archive/jdk-17.0.12_linux-x64_bin.deb
dpkg -i jdk-17.0.12_linux-x64_bin.deb
export JAVA_HOME=/usr/lib/jvm/jdk-17.0.12-oracle-x64
export PATH=$JAVA_HOME/bin:$PATH

#vim 酌情安装
#apt-get install -y vim

```

# 3. 打包
到这就可以正式用了，
* 基本命令：

```
#创建项目
cordova create MyApp
cd MyApp

#部署环境
cordova platform add android

#构建
cordova build android
```
最后会提示成功，第一次会很慢，后面就好了，去印射的路径`$(pwd)`拿就行了

![图片.png](/static/img/6d5986c5c37c64ce9683ea23ca9b5c8a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

如果不用了，使用`exit`退出

* 允许HTTP（默认https）
```
vim platforms/android/app/src/main/AndroidManifest.xml
```

```
#android:usesCleartextTraffic="true"
<application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:usesCleartextTraffic="true">
```

* 配置

![图片.png](/static/img/c31341c996525ea9928384449442e363.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

```
vim config.xml
```
```
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    
    <name>XYAPP</name>
    <description>Sample Apache Cordova App</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Meixianghao
    </author>
    
    <content src="http://XXX:8889/" />
     
    <preference name="Orientation" value="portrait" />
    
    <allow-navigation href="http://*/*" /> 
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
</widget>

```

后续还要配置图标，启动页面，等，目前我用不上

# 4. 新的构建

由于每次进入都要打补丁，我本地又构建了一个，没上传，这里是 `Dockerfile`

``` Dockerfile
#https://hub.docker.com/_/openjdk
ARG OPENJDK_VERSION=17
FROM eclipse-temurin:${OPENJDK_VERSION}

# Reference default value
ARG OPENJDK_VERSION
#https://github.com/nodesource/distributions/blob/master/README.md
ARG NODEJS_VERSION=20
#https://gradle.org/releases/
ARG GRADLE_VERSION=8.7
#https://www.npmjs.com/package/cordova?activeTab=versions
ARG CORDOVA_VERSION=12.0.0
#https://developer.android.com/studio#command-tools
ARG ANDROID_CMDTOOLS_VERSION=11076708


LABEL maintainer="Hamdi Fourati <contact@hamdifourati.info>"

WORKDIR /opt/src

ENV JAVA_HOME /opt/java/openjdk/
ENV ANDROID_SDK_ROOT /usr/local/android-sdk-linux
ENV ANDROID_HOME $ANDROID_SDK_ROOT
ENV GRADLE_USER_HOME /opt/gradle
ENV PATH $PATH:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$GRADLE_USER_HOME/bin

# Tools
RUN apt update && apt -qq install -y git

# NodeJS
RUN echo https://deb.nodesource.com/setup_${NODEJS_VERSION}.x
RUN curl -sL https://deb.nodesource.com/setup_${NODEJS_VERSION}.x | bash -
RUN apt -qq install -y nodejs

# Cordova
RUN npm i -g cordova@${CORDOVA_VERSION}

# Gradle
RUN apt -qq install -y unzip
RUN curl -so /tmp/gradle-${GRADLE_VERSION}-bin.zip https://downloads.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip && \
    unzip -qd /opt /tmp/gradle-${GRADLE_VERSION}-bin.zip && \
    ln -s /opt/gradle-${GRADLE_VERSION} /opt/gradle

# Android
RUN curl -so /tmp/commandlinetools-linux-${ANDROID_CMDTOOLS_VERSION}_latest.zip https://dl.google.com/android/repository/commandlinetools-linux-${ANDROID_CMDTOOLS_VERSION}_latest.zip && \
    mkdir -p $ANDROID_SDK_ROOT/cmdline-tools/ && \
    unzip -qd $ANDROID_SDK_ROOT/cmdline-tools/ /tmp/commandlinetools-linux-${ANDROID_CMDTOOLS_VERSION}_latest.zip && \
    mv $ANDROID_SDK_ROOT/cmdline-tools/cmdline-tools $ANDROID_SDK_ROOT/cmdline-tools/latest

# 打补丁
RUN sdkmanager "platforms;android-34"
RUN sdkmanager "build-tools;34.0.0"
RUN wget https://download.oracle.com/java/17/archive/jdk-17.0.12_linux-x64_bin.deb
RUN dpkg -i jdk-17.0.12_linux-x64_bin.deb
RUN export JAVA_HOME=/usr/lib/jvm/jdk-17.0.12-oracle-x64
RUN export PATH=$JAVA_HOME/bin:$PATH
RUN apt-get install -y vim

# Update and accept licences
COPY android.packages android.packages
RUN ( sleep 5 && while [ 1 ]; do sleep 1; echo y; done ) | sdkmanager --package_file=android.packages

```
android.packages
``` 
platforms;android-34
build-tools;34.0.0
```