TYPO3图片Alt文本自动生成：AI驱动的SEO与无障碍优化

2025-03-18 18:22:28

TYPO3 上传图片时自动生成 AI Alt 文本：方法与扩展

最近我遇到一个需求：如何在 TYPO3 后台上传图片时，自动生成图片的 alt 文本？我找了一圈，发现没有现成的、直接满足需求的扩展。理想情况下，我想要一个类似 alttext.ai 的 TYPO3 扩展（ alttext.ai 是一个 WordPress 插件，能自动生成图片 alt 文本），可惜没有找到。不过，这个问题并非无解。下面就分享下我的探索过程和几个可行的解决方案。

一、问题剖析：为什么需要自动生成 Alt 文本？

图片 Alt 文本 (alternative text，替代文本) 的重要性不言而喻：

可访问性： 屏幕阅读器会朗读 Alt 文本，帮助视障用户理解图片内容。这是网页内容无障碍访问的重要组成部分。
SEO： 搜索引擎会参考 Alt 文本理解图片，并将其作为排名因素之一。合适的 Alt 文本可以提高网站在搜索结果中的可见性。
图片加载失败： 如果图片无法加载，浏览器会显示 Alt 文本，让用户了解图片的大致内容。

手动编写 Alt 文本既耗时又容易遗漏。使用 AI 自动生成是一个高效且保证覆盖率的方案。

二、解决方案

既然没有 “一键搞定” 的扩展，我们可以考虑以下几个替代方案。它们都能实现类似的效果，只是实现方式和集成程度有所不同：

1. 使用第三方 AI 服务 + TYPO3 钩子 (Hooks)

原理：

利用 TYPO3 强大的钩子系统，在文件上传或更新后，将图片发送到第三方 AI 图像识别服务 (如 Google Cloud Vision API、Amazon Rekognition、Microsoft Azure Computer Vision 等)，获取返回的，并将其写入图片的 Alt 文本字段。

实现步骤：

选择 AI 服务： 对比各家服务的功能、定价和 SDK，选择适合自己的。这里以 Google Cloud Vision API 为例。
创建 TYPO3 扩展： 创建一个新的自定义 TYPO3 扩展。

编写钩子： 在扩展中，使用 AfterFileAdded 或 AfterFileReplaced 钩子。 TYPO3 文档里能找到具体用哪个. (https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Hooks/Index.html)

// 示例代码 (my_extension/Classes/Hooks/FileProcessing.php)

namespace MyVendor\MyExtension\Hooks;

use TYPO3\CMS\Core\Resource\Event\AfterFileAddedEvent;
use TYPO3\CMS\Core\Resource\Event\AfterFileReplacedEvent;
use Google\Cloud\Vision\V1\ImageAnnotatorClient; // 引入 Google Cloud Vision SDK
use TYPO3\CMS\Core\Resource\FileRepository;
use TYPO3\CMS\Core\Utility\GeneralUtility;

class FileProcessing
{
	  protected FileRepository $fileRepository;

		public function __construct() {
        $this->fileRepository = GeneralUtility::makeInstance(FileRepository::class);
    }

    public function afterFileAdded(AfterFileAddedEvent $event): void
    {
         $this->processFile($event->getFile());
    }

    public function afterFileReplaced(AfterFileReplacedEvent $event): void
    {
		   $this->processFile($event->getFile());
    }

		private function processFile($file)
		{
      if ($file->getMimeType() === 'image/jpeg' || $file->getMimeType() === 'image/png') { //只处理jpeg和png文件
          try {
             $imageAnnotator = new ImageAnnotatorClient([
				             'credentials' => '/path/to/your/google-cloud-credentials.json'  // 你的 Google Cloud 凭证文件路径
						     ]);
            	$image = file_get_contents($file->getForLocalProcessing(false));
                $response = $imageAnnotator->labelDetection($image);
								$labels = $response->getLabelAnnotations();

               $altText = '';
								if ($labels) {
                    foreach ($labels as $label) {
                          $altText .= $label->getDescription() . ', ';
                   	}
                 	$altText = rtrim($altText, ', '); // 去除末尾的逗号和空格

                    $file = $this->fileRepository->findByUid($file->getUid()); //需要从repository再找一次
								}


            if($altText !== '') { //如果检测到alt文本,写入数据库

						     $file->updateProperties(['alternative' => $altText]);
					  	}

            $imageAnnotator->close();


						} catch (\Exception $e) {
						   //错误处理
          	}
        }

		}
}

配置并注册钩子 ：在你的 ext_localconf.php 里注册

  //ext_localconf.php
   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS'][\TYPO3\CMS\Core\Resource\ResourceStorage::class]['postFileAdd'][] = \MyVendor\MyExtension\Hooks\FileProcessing::class . '->afterFileAdded';

   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS'][\TYPO3\CMS\Core\Resource\ResourceStorage::class]['postFileReplace'][] = \MyVendor\MyExtension\Hooks\FileProcessing::class . '->afterFileReplaced';

获取 Google Cloud Vision API 密钥： 按照 Google Cloud 文档，创建服务账号，下载 JSON 格式的密钥文件。把路径写进代码。

安全建议：

将 API 密钥存储在服务器安全的位置，不要硬编码在代码中。考虑使用环境变量或 TYPO3 的配置管理。
限制对 API 密钥的访问权限。
监控 API 使用情况，防止滥用和意外费用。

进阶技巧:

添加配置选项，让用户可以选择是否启用自动生成 Alt 文本，以及使用哪个 AI 服务。
提供一个后台模块，允许用户手动覆盖 AI 生成的 Alt 文本。
增加对不同语言的支持。

2. 自建图像识别服务

原理：

如果你不想依赖第三方服务，或有特殊需求，可以考虑搭建自己的图像识别服务。这通常涉及使用开源机器学习框架 (如 TensorFlow 或 PyTorch) 训练一个图像分类或图像模型。

实现步骤 (简要)：

数据收集与标注： 收集大量图片，并标注其内容，用于训练模型。
模型训练： 选择合适的模型架构 (如 ResNet、Inception 等)，使用收集的数据进行训练。
服务部署： 将训练好的模型部署为一个 Web 服务 (如使用 Flask 或 FastAPI)。
TYPO3 集成： 类似方案 1，使用 TYPO3 钩子，调用自建的图像识别服务。

这个方案实现起来较复杂，更适用于对深度学习有较深了解的开发者。

3. 使用现有扩展 + 少量修改

原理：

某些 TYPO3 扩展虽然没有直接提供 AI 生成 Alt 文本的功能，但可能提供了类似的文件处理机制或钩子。可以通过修改这些扩展，加入 AI 识别功能。

比如, 你可以查看是否有扩展已经可以连接外部服务获取一些metadata了。

看看filemetadata这个 TYPO3 自带扩展是否提供你想要的.
如果扩展有, 改起来更方便.

实现步骤 (举例)：

寻找合适的扩展： 浏览 TER (TYPO3 Extension Repository)，查找处理文件上传或提供类似功能的扩展。
分析扩展代码： 理解扩展的实现方式，找到可以插入 AI 识别逻辑的位置 (如钩子、事件监听器等)。
修改扩展： 添加调用 AI 服务并更新 Alt 文本的代码 (参考方案 1)。
测试： 确保修改后的扩展功能正常，且不会影响原有功能。

注意:修改别的开发者或者组织开发的扩展有版权问题。你也可以考虑复制它的代码,改一改作为你的新扩展使用.

4.使用本地已经有的数据

有些图片名称或者同一文件夹内文本文件已经有一些文本描述了. 比方说, 上传一个截图时，TYPO3 已经知道截图的文件名(通常含有时间信息), 也许文件名已经有足够的信息了. 我们可以利用这些已经存在的数据作为图片的alt文本


    //例子, 基于方案一的代码
    //只列出了 `processFile()`的部分
     private function processFile($file)
    {

        //优先使用文件名作为Alt 文本.
         $altText = pathinfo($file->getName(), PATHINFO_FILENAME);

        if ($file->getMimeType() === 'image/jpeg' || $file->getMimeType() === 'image/png') {

                //... 调用AI API的部分

                 if ($altText == "" && $labels) { //如果之前从文件名那儿没有获取信息, 再用AI的结果
                         foreach ($labels as $label) {
                                $altText .= $label->getDescription() . ', ';
                         }
                      $altText = rtrim($altText, ', ');
                 }

        	    //....后续代码

          }
    }