本文是对谷歌最新发布的 Gemma 4 开源模型进行测试，验证了其在视觉理解和代码生成方面的能力，并与千问进行了对比测试。小模型虽然在视觉处理上的不足，但在文本理解和代码生成能力上仍表现出色，说明了表达能力在 AI 使用中的重要性。

1. 引言

就在 4 月 2 日深夜，谷歌没有任何预热，突然“突袭式”发布了全新的 Gemma 4 系列开源大模型。

最让人震撼的是：其中的 31B（310 亿参数）模型，在多项基准测试中，竟然击败了参数量大其 20 倍的巨型对手。

这不仅仅是“以小博大”，这简直是开源界的“超凡进化”。

更重要的是：采用 Apache 2.0 协议，彻底免费开源！商用无忧！

作为一个长期混迹开源社区的 AI 迷，当然要第一时间上手实测，看看这款“小卡也能跑”的视觉模型到底有多强。

2. 为什么 Gemma 4 值得关注？

Gemma 4 不是 Gemma 3 的简单升级，而是一次架构级跃迁。

过去我们总以为“大模型 = 大参数”，但 Gemma 4 打破了这个认知。它的核心亮点在于：

• Apache 2.0 协议：完全免费商用，无法律风险。
• 原生多模态支持：不仅能聊天，还能“看图说话”、处理音频。
• 最高 256K 上下文：轻松应对整本手册或大型代码库。
• MoE 架构设计：实现“激活参数少，智能水平高”的极致效率。
• 更重要的是，这些能力不再只属于数据中心。你可以把它装进自己的电脑，甚至手机里。

本次测试我选用的是由 unsloth 发布的 gemma-4-26B-A4B-it-UD-Q5_K_M.gguf 版本。这是一个基于 MoE 架构的 26B 规格模型，量化后约 19.68 GB，适合在消费级显卡上运行。

属性	说明
属性	26B A4B MoE
总参数量	252 亿
激活参数量	38 亿
层数	30
滑动窗口	1024 个 token
上下文长度	256K 个 token
词表大小	262K
专家数量	8 个激活专家 / 共 128 个专家 + 1 个共享专家
支持的模态	文本、图像
视觉编码器参数量	~5.5 亿

这个参数量和尺寸，对于大多数拥有一块不错显卡的个人用户来说，是本地能跑起来的临界点。更多模型信息，请参考官方模型卡。

测试模型下载地址： https://www.modelscope.cn/models/unsloth/gemma-4-E4B-it-GGUF

3. 实测环境

测试用的自己平时的主力机，配置如下：

• CPU：13th Gen Intel® Core™ i5-13600K (3.50 GHz)
• GPU：NVIDIA GeForce RTX 4070 Ti SUPER 16GB
• 内存：64GB DDR4
• 操作系统：Windows 11 Pro 25H2
• Cuda：12.5

4. 实测结果

注意：本次测试只是简单的功能验证，未进行严格的性能评测或对比测试。

由于我们需要测试视觉能力，需要下载模型本身（GGUF）和视觉编码器文件（mmproj）。

视觉编码器下载，可以通过前面模型下载地址的同一页面下下载 mmproj-F16.gguf。

下载后，将它们放在同一个目录下（例如：D:\models\gemma-4\A4B\）。

4.1 启动方式

这里使用的是 llama.cpp 的 Windows 版本，配合 gguf 模型文件来运行。版本是 2026 年 4 月 4 日发布的最新版本 b8660。

打开 Windows 终端（PowerShell 或 CMD），进入到 llama.cpp 解压的目录下，执行以下长指令。

./llama-b8660/llama-server.exe -m ./models/gemma-4/A4B/gemma-4-26B-A4B-it-UD-Q5_K_M.gguf --mmproj ./models/gemma-4/A4B/mmproj-F16.gguf  -c 128000 -ngl 999 --port 8000 -a gemma4 --threads 2 --batch-size 512 --flash-attn on

指令重要参数详解：

• -m：指向 GGUF 模型文件路径。
• --mmproj：指向视觉编码器文件路径（开启 Vision 能力的关键）。
• -c 128000：设置上下文大小为 128,000 tokens（Gemma 4 超大上下文支持）。显存不够时可以适当调小这个值。
• -ngl 999：将几乎所有层都卸载到 GPU 上计算。如果你的显存不足，llama.cpp 会自动将部分层放在 CPU 上。
• --port 8000：本地服务器端口。
• --flash-attn on：开启 Flash Attention，大幅提升长上下文下的性能和显存效率。

4.2 任务设计

这里的测试我设计了一个稍微具有挑战性的任务，使用了之前的截图，微信的 Openclaw 插件界面，来验证模型的视觉理解和代码生成能力。

Prompt 非常简单：

使用 html 设计这个页面

说实话，这类任务对布局理解、细节还原和 CSS 技巧要求还是比较高的。

4.3 输出结果

它不仅准确识别了所有文字内容，连那些细微的设计元素都还原得一模一样：

• 头像上的两个白点，用 CSS 的 ::before 和 ::after 实现了。
• 气泡对齐方式、圆角大小、颜色值，全部匹配原图。
• 整体层级结构清晰，绿色背景 + 白色卡片容器的视觉分层感极强。

整体输出速度还算可以，在消费级显卡上至少比人工完成设计要快一些的，而且无需任何修正，就能直接在浏览器中渲染出几乎一致的效果。

这不是 OCR + 模板填充，这是真正意义上的视觉语义理解与代码生成一体化。

在 128,000 tokens 的庞大上下文设置下：

• Prompt 处理速度：49.56 tokens/s (5.6s 完成加载)
• Token 输出速度：10.70 tokens/s (连续输出 3,075 个 tokens 毫无卡顿)
• 显存负载：15.6/16.0 GB（基本吃满，建议开启共享内存或使用 Q4 量化）

4.4 与 Qwen 3.5 的对比

为了更直观地展示 Gemma 4 的视觉能力，我还用同样的 Prompt 和截图，在千问（Qwen 3.5 27B）上进行了对比测试。

毫无疑问，Qwen 3.5 的还原度更高一些，尤其是在细节处理上（比如对话气泡的小三角，也可能是文化差异？），但它的输出速度明显慢了很多。

速度约 2.05 t/s，生成 3268 tokens 耗时 26 分钟。

效果是全场最好的，但真的太慢了。等你跑完页面，奶茶都凉了。对没有高性能显卡的用户来说，可能只能望而却步了。

这里我先把 Qwen 3.5 的思考过程贴出来，后面会用到的：

用户希望我使用 HTML 和 CSS 来还原提供的图片中的界面。

**1. 界面分析：**
*   **背景：** 纯绿色背景 (`#4CAF50` 或类似的微信绿)。
*   **顶部导航栏：**
    *   左侧有一个“返回”箭头。
    *   中间有标题“插件”。
*   **主要内容区域（白色卡片）：**
    *   圆角矩形，有轻微的阴影。
*   **卡片内部结构：**
    *   **头部区域：**
        *   左侧：一个红色的圆形图标，上面有两个小白点（看起来像 OpenClaw 的 logo）。
        *   中间：
            *   标题：“微信ClawBot” (加粗)。
            *   副标题：“连接 OpenClaw 与微信” (灰色)。
        *   右侧：一个绿色的按钮“详情”。
    *   **中间插图区域：**
        *   一个灰色的背景块。
        *   右上角有一个绿色的气泡（模拟微信发送的消息）。
        *   左下角有一个白色的气泡（模拟接收的消息）。
    *   **底部文本区域：**
        *   标题：“发送指令” (加粗，居中)。
        *   描述：“随时随地控制 OpenClaw” (灰色，居中)。

**2. 技术栈选择：**
*   **HTML5:** 语义化标签。
*   **CSS3:** 使用 Flexbox 进行布局，因为它非常适合这种对齐操作。使用 `border-radius` 制作圆角，`background-color` 设置颜色，`box-shadow` 制作阴影。
*   **Font Awesome (可选):** 为了简便，我可以用 SVG 或者纯 CSS 绘制那个返回箭头，或者使用 Unicode 字符。为了代码的独立性和易读性，我尽量用 CSS 绘制或 Unicode。
*   **SVG:** 用于绘制那个红色的 Logo，因为它包含特定的图形（两个白点）。

**3. 逐步实现：**

*   **Step 1: 基础布局 (HTML Structure)**
    ```html
    <div class="container">
        <header>...</header>
        <main class="card">
            <div class="card-header">...</div>
            <div class="card-image">...</div>
            <div class="card-footer">...</div>
        </main>
    </div>
    ```

*   **Step 2: 样式细化 (CSS Styling)**

    *   *背景色:* `background-color: #57a65a;` (目测颜色)。
    *   *卡片:* `background: white; border-radius: 20px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);`
    *   *Flexbox:* 大量使用 `display: flex; align-items: center;` 来对齐元素。

    *   *Logo:* 红色圆圈 `width: 60px; height: 60px; background: #e74c3c; border-radius: 50%;`。里面的白点可以用 `::before` 和 `::after` 伪元素实现。
    *   *气泡图:* 这是一个难点。可以用两个 `div` 加上 `border-radius` 和 `::before/after` 来模拟气泡的“小尾巴”。
        *   绿色气泡：右下角或右上角有个小三角。
        *   白色气泡：左上角有个小三角。

*   **Step 3: 细节调整**
    *   字体大小、颜色（标题黑，副标题灰）。
    *   间距（Margin/Padding）。

**4. 代码编写与优化 (Self-Correction during coding):**
*   *箭头:* 使用 `<` 符号最简单。
*   *气泡:* 使用 CSS `clip-path` 或者简单的 `border` hack 来画气泡尾巴。为了保持代码整洁，我使用简单的 `border-radius` 和伪元素来画尾巴。
*   *颜色:* 尽量接近原图。
    *   背景绿: `#56ae5f`
    *   按钮绿: `#7ecf84`
    *   Logo 红: `#d8584e`
    *   气泡绿: `#a3e678`

**5. 最终输出结构：**
将 HTML 和 CSS 整合到一个文件中，方便用户直接复制使用。

**(Self-Correction on the image):** 仔细看 Logo，红色的圆圈里是两个白点，看起来像眼睛。
仔细看气泡图，它是灰色的背景上叠了两个气泡。

让我们开始写代码。

4.5 Gemma 4 的其他几个小模型

这里我也测试了 Gemma 4 的其他几个小模型（E2B、E4B），它们的视觉能力和速度表现都不如 26B A4B 版本，尤其是 E 系列的小模型，虽然支持音频输入，但在这个测试中的表现明显逊色。

不过，这个速度是真的快，98 ~ 155 t/s (生成 2000+ tokens 仅需 15-28 秒)，对于一些简单的视觉任务或者需要快速响应的场景，还是非常有吸引力的。

5. 小模型欠缺的到底是什么

我们看到的设计效果只是表象，那么对于 Gemma 4 的小模型（E2B、E4B）来说，欠缺的到底是什么呢？

这里我又继续做了测试，绕过了视觉输入，直接用 Qwen 3.5 的思考过程作为 Prompt，来测试它们的文本理解和代码生成能力。

结果非常惊喜：

虽然不是很完美，但已经能够正确理解任务需求，生成结构合理的 HTML 和 CSS 代码了，可以拿到70分左右了。

这说明，小模型的任务理解和代码生成能力并不差，真正欠缺的可能是对视觉输入的理解和处理能力。

当然，这样不难解释，毕竟小模型的视觉编码器参数量更少，E2B 和 E4B 的视觉编码器参数量只有约 1.5 亿，而 26B A4B 的视觉编码器参数量约 5.5 亿，这个差距可能就是导致它们在视觉任务上表现不佳的主要原因了。

6. 总结

总的来说，Gemma 4 的视觉能力确实非常强大，尤其是 26B A4B 版本，在本地运行的情况下，能够实现非常高质量的视觉理解和代码生成。

通过后面的测试，我们也发现了小模型在视觉处理上的不足，但当提示词直接描述任务时，它们的文本理解和代码生成能力还是不错的。

这也从侧面说明了，当今时代表达能力的重要性，如何描述好一个任务，已经成为了 AI 使用者的核心技能。这也是为什么当前文科生在 AI 时代的就业前景被普遍看好的原因。