Source: Dev.to

使用 Gemini 3 Flash 生成 Alt 文本

在当今的网页和移动应用中，Alt 文本（替代文本）对于可访问性至关重要。它帮助屏幕阅读器用户理解图像内容，同时在图像加载失败时提供有意义的回退信息。本文将展示如何使用 Google Gemini 3 Flash 模型自动生成高质量的 Alt 文本。

---

目录

1. 为什么需要自动生成 Alt 文本？
2. 准备工作
3. 代码实现
4. 示例输出
5. 常见问题
6. 结论

---

为什么需要自动生成 Alt 文本？

• 提升可访问性：手动为每张图片编写 Alt 文本既费时又容易出错。
• SEO 优化：搜索引擎会利用 Alt 文本来理解页面内容，从而提升排名。
• 一致性：AI 能保持描述风格的一致性，避免不同作者之间的语气差异。

---

准备工作

1. Google Cloud 账户
   • 前往 Google Cloud Console 并启用 Vertex AI API。
2. 获取 API 密钥
   • 在 IAM & Admin → Service Accounts 中创建服务账号，下载 JSON 密钥文件。
3. 安装依赖

pip install google-cloud-aiplatform pillow

提示：确保 Python 版本 ≥ 3.8。

---

代码实现

下面的示例展示了如何使用 Gemini 3 Flash 对本地图片生成 Alt 文本。代码块保持原样，不进行翻译。

import os
from google.cloud import aiplatform
from PIL import Image
import base64

# 设置环境变量
os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = "path/to/your/service_account.json"

# 初始化 Vertex AI
aiplatform.init(project="YOUR_PROJECT_ID", location="us-central1")

# 加载模型
model = aiplatform.Model("projects/YOUR_PROJECT_ID/locations/us-central1/publishers/google/models/gemini-1.5-flash-001")

def image_to_base64(image_path: str) -> str:
    """将图片文件转换为 base64 编码字符串"""
    with open(image_path, "rb") as img_file:
        return base64.b64encode(img_file.read()).decode("utf-8")

def generate_alt_text(image_path: str) -> str:
    """调用 Gemini 3 Flash 生成 Alt 文本"""
    img_b64 = image_to_base64(image_path)
    prompt = f"""You are an expert accessibility engineer. Provide a concise, descriptive alt text (max 125 characters) for the following image. Do not include any extra commentary.

Image (base64):
{img_b64}
"""
    response = model.predict(instances=[{"prompt": prompt}])
    # 解析返回的文本
    alt_text = response.predictions[0].text.strip()
    return alt_text

# 示例
if __name__ == "__main__":
    img_path = "sample_image.jpg"
    alt = generate_alt_text(img_path)
    print(f"Generated Alt Text: {alt}")

关键点说明

---

示例输出

假设 sample_image.jpg 是一张 日落时分的海滩，运行上述脚本后可能得到：

Generated Alt Text: A golden sunset over a calm beach, with gentle waves lapping the shore and silhouettes of distant palm trees.

注意：实际输出会因图片内容和模型随机性略有差异。若需要更严格的字符限制，可在后处理阶段截断或使用正则进行检查。

---

常见问题

---

结论

使用 Gemini 3 Flash 自动生成 Alt 文本可以显著提升内容可访问性、降低人工成本，并保持描述的一致性。通过合理的 Prompt 工程 与 后处理，我们能够得到符合 WCAG（Web Content Accessibility Guidelines）标准的简洁描述。

下一步：将此脚本集成到 CI/CD 流程或 CMS（内容管理系统）插件中，实现批量图片的自动化 Alt 文本生成。

---

Forem 目录

Forem 动态

关注新的子 Forem 以优化你的动态

DEV 社区

DEV Community – 一个讨论并跟进软件开发、管理软件职业的空间。

Future

Future – 关于 AI、VR、加密货币、量子计算等科学技术的新闻与讨论。

Open Forem

Open Forem – Forem 社区的综合讨论空间。若某话题在其他地方没有归属，它就在这里。

Gamers Forem

Music Forem

Music Forem – 从作曲、演出到乐器、热门音乐话题以及所有相关内容。

Vibe Coding Forem

Vibe Coding Forem – 讨论 AI 软件开发，并展示我们正在构建的项目。

Popcorn Movies & TV

DUMB DEV Community

Design Community

Source: https://example.com/your-article-link

e/width=65,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff83jl8yxfp6c5srbo02f.png)

Security Forem

Security Forem – 您的安全中心枢纽，涵盖从道德黑客、CTF 到 GRC 以及职业发展，适合初学者和专业人士。

Golf Forem

Golf Forem – 高尔夫球手和高尔夫爱好者的社区。

Crypto Forem

Crypto Forem – 一个协作社区，涵盖所有加密相关内容——从比特币到协议开发、从 DeFi 到 NFT 以及市场分析。

Parenting

Parenting – 为父母提供一个分享养育孩子的喜悦、挑战和智慧的地方。我们彼此支持，共同成长。

Forem Core

Forem Core – 讨论核心 Forem 开源软件项目——功能、Bug、性能以及自托管。

Maker Forem

Maker Forem – 为创客、业余爱好者和专业人士提供的社区，讨论 Arduino、Raspberry Pi、3D 打印等众多主题。

HMPL.js Forem

l1tok1l7116unun3e9.png)

HMPL.js Forem – 为使用 HMPL.js 构建快速、轻量级 Web 应用的开发者提供的空间。一个分享项目、提问并讨论服务器驱动模板的社区。