無障礙化(簡稱 "a11y")正在迅速成為網頁開發和電子商務中的重要組成部分。過去,開發者和公司並不太重視像是替代文字或色盲友善的配色方案等無障礙輔助功能。但現在,隨著來自歐洲和美國的無障礙法規,讓您的網站無障礙化比以往任何時候都更加重要。
但是,要如何為網站上的每張圖片建立替代文字呢?手動檢視每張圖片並撰寫替代文字可能需要花費大量時間,特別是當您有數千(或數百萬)張圖片時。而且如果每天都在新增圖片,這將成為一場永無止境的戰鬥。
這就是 SceneXplain 發揮作用的地方。它是您的無障礙助手!您只需上傳一張圖片,就能獲得它的替代文字,無需絞盡腦汁思考用詞。
如果您有幾十張圖片,這是一個讓大腦休息的好方法。但您仍然需要自己進行所有的點擊和拖曳操作。您的大腦贏了,但您的手指卻輸了。如果您有幾千張圖片呢?現在就預約醫生看腕隧道症候群吧。
要是能夠將整個過程自動化就好了。這樣您的大腦和手指就都能專注在更有趣的事情上。
這就是 SceneXplain 的 API 發揮作用的地方。您可以編寫一個腳本,遍歷您的數千張圖片,批次發送到 SceneXplain,並生成包含結果的 CSV 檔案(或者再多寫一些程式碼,直接整合到您的工作流程中。)
畢竟,您也知道他們怎麼說。沒有 API 就沒有快樂。
tag什麼是 API?
在我們深入討論「如何」之前,讓我們先來看看「是什麼」。牛津英語詞典對 API 的定義是:

然而,大家最喜歡的 AI,GPT-4 對 API 的定義是:

或者,如果您想要觀看影片說明:
簡而言之,您可以編寫一個 Python(或任何其他語言)程式透過其 API 與 SceneXplain 通訊,並自動化您的整個替代文字標記過程。我們有一段 Python 程式碼可以做到這一點。
以下是使用方法:
- 安裝 requests 函式庫:
pip install requests
- 前往 SceneXplain 的 API 頁面生成密鑰並複製到剪貼簿。
- 將其貼到下方的 Python 程式碼中。
- 將圖片 URL 複製到程式碼中標示
....
的位置。 - 執行程式碼!
import requests
import json
# generate token on SceneXplain's API page
YOUR_GENERATED_SECRET = "your_generated_secret_here"
data = {
"data": [
{
"task_id": "alt_text",
"languages": [
"en"
],
"image": "..." # change to image URL
}
]
}
headers = {
"x-api-key": f"token {YOUR_GENERATED_SECRET}",
"content-type": "application/json",
}
response = requests.post("https://api.scenex.jina.ai/v1/describe", headers=headers, json=data)
print(response.json())
(我們稍後會提供更多 cURL 和 JavaScript 的程式碼片段)
tagAPI 實戰:在筆記本中使用 SceneXplain
既然我們想要看到實際操作,我們將在筆記本中即時使用這段程式碼。這讓您可以使用真實資料即時查看發生的情況,並讓您自己檢查和試驗 Python 程式碼。

筆記本的內容不僅僅是上面的簡單 Python 程式碼片段。它還會下載示例資料集並將結果匯出到 CSV 檔案。
tag超越筆記本:在現實世界中使用 API
當然,使用 SceneXplain 的 API 時,您不限於使用 Python。任何具有 HTTP 函式庫的語言都應該可以正常運作。
以下是上面相同的程式碼片段,這次用 JavaScript 編寫:
const body = {
"data": [
{
"task_id": "alt_text",
"languages": [
"en"
],
"image": "..."
}
]
};
const YOUR_GENERATED_SECRET = 'your_generated_secret_here';
fetch('https://api.scenex.jina.ai/v1/describe', {
headers: {
'x-api-key': `token ${YOUR_GENERATED_SECRET}`,
'content-type': 'application/json'
},
body: JSON.stringify(body),
method: 'POST'
}).then(async (resp) => {
if (resp.ok) {
const data = await resp.json();
console.log(data);
}
});
這次用 cURL 命令:
curl "https://api.scenex.jina.ai/v1/describe" \
-H "x-api-key: token $YOUR_GENERATED_SECRET" \
-H "content-type: application/json" \
--data '{
"data": [
{
"task_id": "alt_text",
"languages": [
"en"
],
"image": "..."
}
]
}'
tag使用 SceneXplain 的 API 改善你的圖片無障礙功能
要開始使用,請前往 SceneXplain 的 API 頁面了解其運作方式,生成密鑰,然後你可以修改我們的範例程式或創建自己的程式碼,立即開始改善無障礙功能!
