በOpenAI API በተገነባው የእኔ Alt Tag Generation መተግበሪያ በኩል መጥፎ ምስል Alt መለያዎችን ፃፍ

Alt tags ተደራሽ ድረ-ገጾችን የመገንባት በጣም የታወቁ ገፅታዎች ናቸው, ግን በሚያሳዝን ሁኔታ ብዙውን ጊዜ ችላ ይባላሉ ወይም በደንብ ያልተተገበሩ ናቸው. Alt መለያዎች ወደ ምስሎች የታከሉ አጭር የጽሑፍ መግለጫዎች ናቸው። ስክሪን አንባቢዎች የድረ-ገጹን ይዘቶች ለተጠቃሚዎች ያነባሉ እና የምስሉ መግለጫዎች ማየት ስለማይችሉ በገጹ ላይ በምስሎች ውስጥ ያለውን ነገር ለተጠቃሚዎች ለማስተላለፍ የሚያነቡት ነው።

እንደ አለመታደል ሆኖ ምስሎች ምንም አይነት alt tags ሙሉ በሙሉ መጥፋታቸው የተለመደ ነው። እንዲሁም alt tags ማየት ለተሳነው ተጠቃሚ ነገሮችን አስቸጋሪ በሚያደርግ መንገድ አላግባብ ጥቅም ላይ ሲውል አይቻለሁ፣ ለምሳሌ “ስዕል” ወይም “ምስል” የሚሉ መለያዎች፣ በምስሉ ላይ ያለውን ምንም ሳይጠቅስ ደራሲው የጨመረው ደስ የሚል መግለጫ ፅሁፍ ነው ( ማለትም የቡና እና ላፕቶፕ ምስል በብሎግ ገጽ ላይ፣ “ውድ ማስታወሻ ደብተር፣ እንደ እንግዳ ጸሐፊ ብመረጥ ደስ ይለኛል” ከሚል መግለጫ ጽሁፍ ጋር)። 3 የ SEO ቁልፍ ቃላትን የሚያካትቱ alt tagsንም አይቻለሁ። “የሥዕል ምስል” ወይም ረጅም የ SEO ቁልፍ ቃላትን ለመስማት ብቻ በድረ-ገጽ ላይ ያለውን ነገር ለማዳመጥ መሞከር ይችላሉ?

ይህ ማየት ለተሳናቸው ተጠቃሚዎች መጥፎ alt tags እንዲፅፉ እና በ AI የመነጩ መግለጫዎችን ለማስገባት ክፍት AIን በመጠቀም ለማብቃት የተነደፈ የChrome ቅጥያ ነው። ይህ ማየት የተሳነው ተጠቃሚ ማየት የተሳነው ተጠቃሚ ሊደርስበት የሚችለውን ሁሉንም ይዘቶች በድረ-ገጽ ላይ እንዲያገኝ ያስችለዋል (ወይም ቢያንስ በረዥም የ SEO ቁልፍ ቃላት ዝርዝር አይዘገይም)።

ቅጥያውን ብቻ ከፈለጉ፣ ይህን repo ለማውረድ እና በ README ውስጥ ያሉትን መመሪያዎች ለመከተል እንኳን ደህና መጡ።

ነገር ግን፣ የChrome ቅጥያ በOpenAI እንዴት እንደሚገነቡ የደረጃ በደረጃ መመሪያ ከፈለጉ፣ የሚከተለው የእግር ጉዞ ነው።

ቅጥያውን መገንባት;

1. መሰረታዊ 'Hello World' Chrome ቅጥያ ወደላይ እና እየሄደ ያግኙ

በመጀመሪያ፣ መሰረታዊ የChrome ቦይለር ፕሌትን እናስራ። ይህንን ማከማቻ ዝጋ እና በ README ውስጥ ያሉትን መመሪያዎች ይከተሉ

አንዴ ከጫኑ እና ከጫኑ በኋላ በኤክስቴንሽን አሞሌው ላይ የምስል አዶ ሊኖርዎት ይገባል (ሙከራን የበለጠ ፈጣን ለማድረግ እንዲሰኩት እመክራለሁ) እና እሱን ጠቅ ሲያደርጉ “ሄሎ ዓለም” ያለው ብቅ-ባይ ማየት አለብዎት።

የቦይለር ኮዱን እንክፈት፣ እና ባሉት ፋይሎች ውስጥ እንሂድ። ይህ እንዲሁም አንዳንድ የChrome ቅጥያ መሰረታዊ ነገሮችን ይሸፍናል፡-

Static/manifest.json - እያንዳንዱ የChrome ቅጥያ የ manifest.json ፋይል አለው። ስለ ቅጥያው መሰረታዊ መረጃ እና ማዋቀርን ያካትታል። በማኒፌስት ፋይላችን ውስጥ ስም፣ መግለጫ፣ የጀርባ ፋይል ወደ src/background.js የተቀናበረ፣ ወደ image-icon.png የተቀናበረ አዶ (ይህ በቅጥያ ምናሌው ላይ ቅጥያውን የሚወክል ምልክት ነው) አለን። እና popup.html ለኛ ብቅ ባይ የፋይል ምንጭ አድርጎ ያስቀምጣል።

src/background.js - በእኛ መግለጫ ውስጥ የተዋቀረው background.js ፋይል። በዚህ ፋይል ውስጥ ያለው ኮድ ከበስተጀርባ ይሰራል እና በቅጥያው ውስጥ ተግባራዊነትን የሚቀሰቅሱ ክስተቶችን ይከታተላል።

src/content.js - በድረ-ገጹ አውድ ውስጥ የሚሰራ ወይም ድረ-ገጹን የሚያስተካክል ማንኛውም ስክሪፕት በይዘት ስክሪፕት ውስጥ ይገባል።

src/popup.js፣ static/popup.css እና static/popup.html - እነዚህ ፋይሎች የኤክስቴንሽን አዶውን ሲጫኑ የሚያዩትን ብቅ-ባይ ይቆጣጠራሉ።

አንዳንድ መሰረታዊ ነገሮችን እናዘጋጅ - static/manifest.json ን ይክፈቱ እና ስሙን እና መግለጫውን ወደ “የማያ ገጽ አንባቢ ምስል መግለጫ ጀነሬተር” (ወይንም የፈለጉትን) ይለውጡ።

2. የይዘት ስክሪፕት በመጠቀም ከድረ-ገጾች ጋር ​​መስተጋብርን አንቃ

   
   

የእኛ ቅጥያ ተጠቃሚው ባለበት ድረ-ገጽ ላይ alt tags ሊተካ ነው፣ ይህ ማለት የኤችቲኤምኤል ገጹን ማግኘት ያስፈልገናል ማለት ነው። ይህንን በChrome ቅጥያዎች ውስጥ ማድረግ የሚቻልበት መንገድ በይዘት ስክሪፕቶች ነው። የእኛ የይዘት ስክሪፕት በእኛ src/content.js ፋይል ውስጥ ይሆናል።

የይዘት ስክሪፕት ለማስገባት ቀላሉ መንገድ የ js ፋይልን በማጣቀስ የ"ስክሪፕት" መስክ ወደ መግለጫው ላይ ማከል ነው። የይዘት ስክሪፕት በዚህ መንገድ ሲያዘጋጁ፣ የተገናኘው ስክሪፕት ቅጥያው በተጫነ ቁጥር ይሰራል። ነገር ግን፣ በእኛ ሁኔታ፣ ተጠቃሚው ቅጥያውን ሲከፍት የእኛ ቅጥያ በራስ-ሰር እንዲሰራ አንፈልግም። አንዳንድ ድረ-ገጾች በምስሎች ላይ የተቀመጡ ጥሩ የአልት መለያዎች አሏቸው፣ ስለዚህ ኮዱን ማስኬድ የምንፈልገው ተጠቃሚው አስፈላጊ መሆኑን ሲወስን ብቻ ነው።

ተጠቃሚው አዝራሩን ጠቅ ሲያደርግ የይዘት ስክሪፕቱ እንዲጫን በእኛ የይዘት ስክሪፕት ውስጥ አንድ ቁልፍ እና የኮንሶል ሎግ እንጨምራለን እና የእኛን መግለጫ በChrome ኮንሶል ውስጥ ታትሞ በማየት ማረጋገጥ እንችላለን።

ብቅ-ባይ.html

 <button id="generate-alt-tags-button">Generate image descriptions</button>

src/content.js

 console.log('hello console')

ያንን ቁልፍ የሚገናኙበት መንገድ ብቅ-ባይን ከይዘት ስክሪፕት ጋር ጠቅ ያድርጉ ሁለቱንም popup.js እና background.jsን ያካትታል።

በpoup.js ውስጥ፣ ከDOM ላይ ያለውን ቁልፍ እንይዛለን እና የክስተት አድማጭ እንጨምራለን ። አንድ ተጠቃሚ ያንን ቁልፍ ጠቅ ሲያደርግ የይዘት ስክሪፕቱ መከተብ እንዳለበት የሚያመለክት መልእክት እንልካለን። መልእክቱን "የይዘት ስክሪፕት" ብለን እንጠራዋለን

 const generateAltTagButton = document.body.querySelector('#generate-alt-tags-button'); generateAltTagButton.addEventListener('click', async () => { chrome.runtime.sendMessage({action: 'injectContentScript'}) });

በ background.js ውስጥ ክስተቶችን የሚቆጣጠር እና ለእነሱ ምላሽ የሚሰጥ ኮድ አለን። እዚህ፣ የክስተት አድማጭ እያዘጋጀን ነው፣ እና የተቀበለው መልእክት 'InjectContentScript' ከሆነ፣ የይዘት ስክሪፕቱን በንቃት ትር (የተጠቃሚው የአሁኑ ድረ-ገጽ) ያስፈጽማል።

 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.action === 'injectContentScript') { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.scripting.executeScript({ target: { tabId: tabs[0].id }, files: ['content.js'] }); }); } });

ይህንን ለማዋቀር የመጨረሻው እርምጃ የ"አክቲቭታብ" እና "ስክሪፕት" ፈቃዶችን ወደ እኛ አንጸባራቂ ማከል ነው። ማንኛውንም የይዘት ስክሪፕት ለማሄድ የ"ስክሪፕት" ፍቃድ ያስፈልጋል። እንዲሁም ስክሪፕቱን ላስገባንባቸው ገፆች ፈቃዶችን ማከል አለብን። በዚህ አጋጣሚ ስክሪፕቱን ወደ ተጠቃሚው የአሁኑ ድረ-ገጽ ማለትም የእነሱ አክቲቭ ታብ እናስገባዋለን እና የነቃ ታብ ፍቃድ የሚፈቅደው ይህንኑ ነው።

በ manifest.json:

 "permissions": [ "activeTab", "scripting" ],

በዚህ ጊዜ ቅጥያውን ከ Chrome ን ​​ማስወገድ እና በትክክል እንዲሰራ እንደገና መጫን ሊኖርብዎ ይችላል። አንዴ እየሄደ ከሆነ የኮንሶል ሎግያችንን በChrome ኮንሶል ውስጥ ማየት አለብን።

በዚህ ደረጃ ለሪፖ የሥራ ኮድ የ github አገናኝ እዚህ አለ ።

3. የገጽ ምስሎችን መሰብሰብ እና የሙከራ alt መለያዎችን ማስገባት

   
   

ቀጣዩ እርምጃችን የይዘት ስክሪፕት ፋይላችንን በመጠቀም በገጹ ላይ ያሉትን ምስሎች በሙሉ ለመያዝ ነው፣ ስለዚህ የምስል መግለጫዎችን ለማግኘት በኤፒአይ ጥሪዎቻችን ለመላክ የተዘጋጀ መረጃ አለን። ለምስሎች ጥሪዎችን የምናደርግ መሆናችንን ማረጋገጥ እንፈልጋለን መግለጫዎች ሲኖሩት ጠቃሚ ነው። አንዳንድ ምስሎች ብቻ ያጌጡ ናቸው እና በማብራሪያቸው የስክሪን አንባቢዎችን ፍጥነት መቀነስ አያስፈልጋቸውም። ለምሳሌ፣ ሁለቱም መለያ "ፈልግ" እና የማጉያ መነጽር ያለው የፍለጋ አሞሌ ካለዎት። ምስሉ alt tag ወደ ባዶ ሕብረቁምፊ ከተቀናበረ ወይም ኤሪያ-ስውር ወደ እውነት ከሆነ፣ ይህ ማለት ምስሉ በስክሪን አንባቢ ውስጥ መካተት አያስፈልገውም ማለት ነው፣ እና ለእሱ መግለጫ መፍጠርን መዝለል እንችላለን።

ስለዚህ በመጀመሪያ በይዘት.js ውስጥ ሁሉንም ምስሎች በገጹ ላይ እንሰበስባለን. በትክክል እየሰራ መሆኑን በፍጥነት ለማረጋገጥ ኮንሶል.ሎግ እየጨመርኩ ነው።

 const images = document.querySelectorAll("img"); console.log(images)

ከዚያ ምስሎቹን እናዞራለን እና alt tag ለመፍጠር የምንፈልጋቸውን ምስሎችን እንፈትሻለን። ያ ሁሉ አልት ታግ የሌላቸውን ምስሎች፣ እና ባዶ ህብረቁምፊ ያልሆነ alt tag ያላቸው ምስሎች፣ እና ከስክሪን አንባቢዎች በግልጽ የተደበቀ አሪያ-ስውር ባህሪ ያላቸውን ምስሎች ያካትታል።

 for (let image of images) { const imageHasAltTag = image.hasAttribute('alt'); const imageAltTagIsEmptyString = image.hasAttribute('alt') && image.alt === ""; const isAriaHidden = image.ariaHidden ?? false; if (!imageHasAltTag || !imageAltTagIsEmptyString || !isAriaHidden) { // this is an image we want to generate an alt tag for! } }

ከዚያ alt tagsን ለማዘጋጀት የሙከራ ሕብረቁምፊ ማከል እንችላለን፣ስለዚህ ወደ OpenAI ጥሪዎቻችን ከመቀጠላችን በፊት እነሱን ለማዘጋጀት ተግባራዊ መንገድ እንዳለን ማረጋገጥ እንችላለን። የኛ ይዘት.js አሁን ይህን ይመስላል፡-

 function scanPhotos() { const images = document.querySelectorAll("img"); console.log(images) for (let image of images) { const imageHasAltTag = image.hasAttribute('alt'); const imageAltTagIsEmptyString = image.hasAttribute('alt') && image.alt === ""; const isAriaHidden = image.ariaHidden ?? false; if (!imageHasAltTag || !imageAltTagIsEmptyString || !isAriaHidden) { image.alt = 'Test Alt Text' } } } scanPhotos()

በዚህ ነጥብ ላይ የChrome ዴቭ መሳሪያዎች ኤለመንቶችን ከከፈትን፣ ምስል ላይ ጠቅ ያድርጉ፣ “Test Alt Text” እንደ alt tag ተቀናብሮ ማየት አለብን።

ኮዱ በዚህ ደረጃ ላይ ባለበት ቦታ የሚሰራ ሪፖ እዚህ አለ።

4. OpenAI ን ጫን እና የምስል መግለጫዎችን ፍጠር

   
   

OpenAI ለመጠቀም የOpenAI ቁልፍ መፍጠር እና እንዲሁም ወደ መለያዎ ክሬዲት ማከል ያስፈልግዎታል። የOpenAI ቁልፍ ለማመንጨት፡-

1. ወደ https://platform.openai.com/docs/overview ይሂዱ እና በ"የ API ቁልፎችን ያግኙ" ስር "ይመዝገቡ" ን ጠቅ ያድርጉ።
2. የOpenAI መለያ ለመፍጠር መመሪያዎቹን ይከተሉ
3. በ"የመጀመሪያ ጥሪህን አድርግ" ስክሪን ላይ ለኤፒአይ ቁልፍህ የሚመረጥ ስም አስገባ ለምሳሌ "Chrome Image Description Generator Key"
4. "ኤፒአይ ቁልፍ ፍጠር" ን ጠቅ ያድርጉ

ይህን ቁልፍ አስቀምጥ። እንዲሁም፣ ግላዊ ያድርጉት - ወደ ማንኛውም ይፋዊ git repos እንዳይገፉት እርግጠኛ ይሁኑ።

አሁን፣ ወደ ሪፖችን ተመለስን፣ መጀመሪያ OpenAi ን መጫን እንፈልጋለን። በፕሮጀክት ማውጫው ውስጥ ባለው ተርሚናል ውስጥ፣ አሂድ፡-

 npm install openai

አሁን በcontent.js ውስጥ፣ በመስመር 1 ላይ የተለጠፈ የOpenAI ቁልፍዎን በፋይሉ አናት ላይ ይህን ኮድ በማከል OpenAI እናስገባለን።

 const openAiSecretKey = 'YOUR_KEY_GOES_HERE' import OpenAI from "openai"; const openai = new OpenAI({ apiKey: openAiSecretKey, dangerouslyAllowBrowser: true });

"DangerouslyAllowBrowser" ጥሪውን ከአሳሹ ቁልፍዎ ጋር እንዲደረግ ይፈቅዳል። በአጠቃላይ ይህ ደህንነቱ ያልተጠበቀ አሰራር ነው። ይህንን ፕሮጀክት የምናካሂደው በአገር ውስጥ ብቻ ስለሆነ፣ ከኋላ-መጨረሻ ሰርስሮ ለማውጣት ከማዘጋጀት ይልቅ በዚህ መልኩ እንተወዋለን። በሌሎች ፕሮጄክቶች ውስጥ OpenAI ን የሚጠቀሙ ከሆነ ቁልፍን ሚስጥር መጠበቅን በተመለከተ ምርጥ ልምዶችን መከተልዎን ያረጋግጡ።

አሁን OpenAI የምስል መግለጫዎችን እንዲያመነጭ ጥሪያችንን እንጨምራለን ። የፍጠር የውይይት ማጠናቀቂያ የመጨረሻ ነጥብ ( OpenAI docs for the chat completions endpoint ) ብለን እንጠራዋለን።

የራሳችንን መጠየቂያ መፃፍ እና እንዲሁም በምስሉ src URL ( በ AI ፈጣን ምህንድስና ላይ ተጨማሪ መረጃ ) ውስጥ ማለፍ አለብን። መጠየቂያውን እንደፈለጉ ማስተካከል ይችላሉ። OpenAI ረጅም መግለጫዎችን እየመለሰ ስለነበረ መግለጫዎቹን በ20 ስራዎች ለመገደብ መርጫለሁ። በተጨማሪም፣ እንደ ዬልፕ ወይም የፌስቡክ ሎጎዎች (ማለትም፣ 'ትልቅ ሰማያዊ ሣጥን በውስጡ ነጭ ትንሽ ሆሄ ያለው') ያሉ አርማዎችን ሙሉ በሙሉ ሲገልፅ አስተውያለሁ፣ ይህም ጠቃሚ አልነበሩም። ምናልባት ኢንፎግራፊ ከሆነ፣ የቃሉ ገደብ ችላ ተብሎ ሙሉ የምስል ጽሁፍ እንዲጋራ እጠይቃለሁ።

የመጀመሪያውን AI ምላሽ ይዘት የሚመልስ እና እንዲሁም ስህተቱን ወደ "handleError" ተግባር የሚያስተላልፈው ሙሉ ጥሪ ይኸውና. ጥሪው የተሳካ ወይም ያልተሳካ ከሆነ ፈጣን ግብረመልስ እንድናገኝ የእያንዳንዱን ምላሽ console.log አካትቻለሁ፡-

 async function generateDescription(imageSrcUrl) { const response = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "user", content: [ { type: "text", text: "Describe this image in 20 words or less. If the image looks like the logo of a large company, just say the company name and then the word logo. If the image has text, share the text. If the image has text and it is more than 20 words, ignore the earlier instruction to limit the words and share the full text."}, { type: "image_url", image_url: { "url": imageSrcUrl, }, }, ], }, ], }).catch(handleError); console.log(response) if (response) { return response.choices[0].message.content;} } function handleError(err) { console.log(err); }

ወደዚህ ተግባር ጥሪ ከዚህ በፊት በጻፍነው መግለጫ ውስጥ እንጨምራለን (ይህን ያልተመሳሰለ ጥሪ ለማካተት በስካን ምስሎች ተግባር መጀመሪያ ላይ ያልተመሳሰለ ቁልፍ ቃል ማከል አለብን)

 const imageDescription = await generateDescription(image.src) if (!imageDescription) { return; } image.alt = imageDescription

እዚህ ላይ ወደ ሙሉ ይዘት.js እና repo የሚወስድ አገናኝ እዚህ አለ።

5. UI መገንባት

   
   

በመቀጠል፣ መለያዎቹን ለማመንጨት አዝራሩን ጠቅ ካደረጉ በኋላ ተጠቃሚው ምን እየተፈጠረ እንዳለ እንዲያውቅ የእኛን UI መገንባት እንፈልጋለን። መለያዎቹ ለመጫን ጥቂት ሰከንዶችን ይወስዳል፣ ስለዚህ ተጠቃሚው እየሰራ መሆኑን እንዲያውቅ 'ሎድንግ' መልእክት እንፈልጋለን። በተጨማሪም፣ ስኬታማ መሆኑን ወይም ስህተት ካለ እንዲያውቁ እንፈልጋለን። ነገሩን ቀላል ለማድረግ በኤችቲኤምኤል ውስጥ አጠቃላይ የተጠቃሚ መልእክት ይኖረናል እና በመቀጠል popup.js ን በመጠቀም በቅጥያው ላይ እየተፈጠረ ባለው ነገር ላይ ተገቢውን መልዕክት ለተጠቃሚው ለማስገባት።

የChrome ቅጥያዎች የሚዋቀሩበት መንገድ የኛ የይዘት ስክሪፕት (content.js) ከኛ popup.js ተለይቷል እና ተለዋዋጮችን በተለመደው የጃቫስክሪፕት ፋይሎች ማጋራት አይችሉም። የይዘት ስክሪፕቱ ብቅ ባይ መለያዎቹ እየተጫኑ ወይም በተሳካ ሁኔታ እንደተጫኑ እንዲያውቅ የሚያደርግበት መንገድ በመልእክት ማስተላለፍ ነው። ተጠቃሚው ዋናውን ቁልፍ ሲነካ የይዘት ስክሪፕቱን እንዲያስገባ የበስተጀርባ ሰራተኛው እንዲያውቅ ስናሳውቅ የመልእክት ማስተላለፍን እንጠቀማለን።

በመጀመሪያ፣ በእኛ ኤችቲኤምኤል፣ ከመታወቂያው 'user-message' ጋር በኛ አዝራር ስር ዲቪ እንጨምራለን። ለመጀመሪያው መልእክት ትንሽ ተጨማሪ መግለጫ ጨምሬያለሁ።

 <div id="user-message"> <img src="image-icon.png" width="40" class="icon" alt=""/> This extension uses OpenAI to generate alternative image descriptions for screen readers. </div>

ከዚያ፣ በእኛ popup.js፣ ወደ ቅጥያ ሁኔታ ማሻሻያ ሊይዝ የሚችል ማንኛውንም የተላኩ መልዕክቶችን የሚያዳምጥ አድማጭ እንጨምራለን። ከይዘት ስክሪፕቱ ባገኘነው በማንኛውም የግዛት ውጤት መሰረት ለመወጋት የተወሰነ ኤችቲኤምኤል እንጽፋለን።

 const userMessage = document.body.querySelector('#user-message'); chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { renderUI(message.action) } ); function renderUI(extensionState) { generateAltTagButton.disabled=true; if (extensionState === 'loading') { userMessage.innerHTML = '<img src="loading-icon.png" width="50" class="icon" alt=""/> New image descriptions are loading... <br> <br>Please wait. We will update you when the descriptions have loaded.' } else if (extensionState === 'success') { userMessage.innerHTML = '<img src="success-icon.png" width="50" class="icon" alt=""/> New image descriptions have been loaded! <br> <br> If you would like to return to the original image descriptions set by the web page author, please refresh the page.' } else if (extensionState === 'errorGeneric') { userMessage.innerHTML = '<img src="error-icon.png" width="50" class="icon"alt=""/> There was an error generating new image descriptions. <br> <br> Please refresh the page and try again.' } else if (extensionState === 'errorAuthentication') { userMessage.innerHTML = '<img src="error-icon.png" width="50" class="icon"alt=""/> There was an error generating new image descriptions. <br> <br> Your OpenAI key is not valid. Please double check your key and try again.' } else if (extensionState === 'errorMaxQuota') { userMessage.innerHTML = '<img src="error-icon.png" width="50" class="icon"alt=""/> There was an error generating new image descriptions. <br> <br> You\'ve either used up your current OpenAI plan and need to add more credit, or you\'ve made too many requests too quickly. Please check your plan, add funds if needed, or slow down the requests.' } }

በእኛ የይዘት ስክሪፕት ውስጥ፣ 'extensionState' የሚባል አዲስ ተለዋዋጭ እንገልፃለን፣ እሱም ወይ 'መጀመሪያ' ሊሆን ይችላል ( ቅጥያው ተጭኗል ግን እስካሁን ምንም ነገር አልተፈጠረም)፣ 'መጫን'፣ 'ስኬት' ወይም 'ስህተት' (እኛ በ OpenAI የስህተት መልእክቶች ላይ በመመስረት አንዳንድ ሌሎች የስህተት ሁኔታዎችን ይጨምራል)። እንዲሁም የኤክስቴንሽን ሁኔታ ተለዋዋጭን እናዘምነዋለን እና ግዛቱ በተቀየረ ቁጥር ወደ popup.js መልእክት እንልካለን።

 ​​let extensionState = 'initial';

የኛ ስህተት ተቆጣጣሪ የሚሆነው፡-

 function handleError(err) { if (JSON.stringify(err).includes('401')) { extensionState = 'errorAuthentication' chrome.runtime.sendMessage({action: extensionState}) } else if (JSON.stringify(err).includes('429')) { extensionState = 'errorMaxQuota' chrome.runtime.sendMessage({action: extensionState}) } else { extensionState = 'errorGeneric' chrome.runtime.sendMessage({action: extensionState}) } console.log(err); }

እና በእኛ የScanPhotos ተግባር ውስጥ፣ በተግባሩ መጀመሪያ ላይ ሁኔታውን 'ለመጫን' እና ሙሉ በሙሉ ያለስህተቶች የሚሰራ ከሆነ 'እንዲሳካ' እናዘጋጃለን።

 async function scanPhotos() { extensionState = 'loading' chrome.runtime.sendMessage({action: extensionState}) const images = document.querySelectorAll("img"); for (let image of images) { const imageHasAltTag = image.hasAttribute('alt'); const imageAltTagIsEmptyString = image.hasAttribute('alt') && image.alt === ""; const isAriaHidden = image.ariaHidden ?? false; if (!imageHasAltTag || !imageAltTagIsEmptyString || !isAriaHidden) { const imageDescription = await generateDescription(image.src) if (!imageDescription) { return; } image.alt = imageDescription } } extensionState = 'success' chrome.runtime.sendMessage({action: extensionState}) }

6. ግራ የሚያጋባ የብቅ ባይ ባህሪን ማስተካከል - ብቅ-ባዮች ሲዘጉ እና እንደገና ሲከፈቱ የሚቆይ የማራዘሚያ ሁኔታ

   
   

alt tags ካመነጩ፣ የስኬት መልእክት ካገኙ እና ብቅ ባይን ከዘጉ እና እንደገና ከከፈቱ ተጠቃሚው አዲስ alt tags እንዲያመነጭ የሚገፋፋውን የመጀመሪያ መልእክት ያሳያል። ምንም እንኳን የተፈጠሩት alt tags አሁን በኮዱ ውስጥ ቢሆኑም!

በChrome ውስጥ የኤክስቴንሽን ብቅ ባይ በከፈቱ ቁጥር አዲስ ብቅ ባይ ነው። ከዚህ ቀደም በቅጥያው የተደረገ ወይም በይዘት ስክሪፕት ውስጥ የሚሰራውን ነገር አያስታውስም። ነገር ግን፣ ማንኛውም አዲስ የተከፈተ ብቅ ባይ እንዲደውል እና ሲከፈት የኤክስቴንሽን ሁኔታን በማጣራት ትክክለኛውን የቅጥያ ሁኔታ እያቀረበ መሆኑን ማረጋገጥ እንችላለን። ያን ለማድረግ፣ ብቅ ባይ ማለፊያ ሌላ መልእክት ይኖረናል፣ በዚህ ጊዜ የኤክስቴንሽን ሁኔታን እንጠይቃለን፣ እና በይዘታችን ውስጥ መልእክት አድማጭ እንጨምራለን.js ያንን መልእክት የሚያዳምጥ እና አሁን ያለውን ሁኔታ የሚልክ ነው።

ብቅ ባይ.js

 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: "getExtensionState"}, function(response) { // if the content script hasn't been injected, then the code in that script hasn't been run, and we'll get an error or no response if (chrome.runtime.lastError || !response) { return; } else if (response) { // if the code in content script HAS been injected, we'll get a response which tells us what state the code is at (loading, success, error, etc) renderUI(response.extensionState) } }); });

ይዘት.js

 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if (request.action === "getExtensionState") sendResponse({extensionState}); });

የይዘት ስክሪፕቱ በጭራሽ ካልተሰራ (ተጠቃሚው alt tags ለመፍጠር ቁልፉን ጠቅ አድርጎ አያውቅም) የኤክስቴንሽን ሁኔታ ተለዋዋጭ ወይም የክስተት አድማጭ አይኖርም። በዚህ አጋጣሚ፣ chrome በምላሹ የአሂድ ጊዜ ስህተትን ይመልሳል። ስለዚህ ለስህተት ቼክን እናካትታለን እና አንድ ከተቀበልን ነባሪውን UI እንዳለ ይተዉት።

7. የቅጥያ ተደራሽነት - አሪያ-ቀጥታ፣ የቀለም ንፅፅር እና የመዝጊያ ቁልፍ

   
   

ይህ ቅጥያ የተሰራው ስክሪን አንባቢ ለሚጠቀሙ ሰዎች ነው፡ ስለዚህ አሁን በትክክል በስክሪን አንባቢ መጠቀም እንደሚቻል ማረጋገጥ አለብን! የእርስዎን ስክሪን አንባቢ ለማብራት እና ሁሉም ነገር በትክክል እንደሚሰራ ለማየት አሁን ጥሩ ጊዜ ነው።

ለተደራሽነት ማፅዳት የምንፈልጋቸው ጥቂት ነገሮች አሉ። በመጀመሪያ ደረጃ, ሁሉም ጽሑፎች በቂ የንፅፅር ደረጃ መሆናቸውን ማረጋገጥ እንፈልጋለን. ለአዝራሩ፣ ዳራውን ወደ #0250C5 እና ቅርጸ-ቁምፊውን ወደ ነጭ ደማቅ ለማዘጋጀት ወስኛለሁ። ይህ የ7.1 ንፅፅር ጥምርታ ያለው ሲሆን በሁለቱም AA እና AAA ደረጃዎች WCAG ታዛዥ ነው። እዚህ በWebAim Contrast Checker ላይ ለመጠቀም ለሚፈልጓቸው ቀለሞች የንፅፅር ሬሾን ማረጋገጥ ይችላሉ።

ሁለተኛ፣ የእኔን ስክሪን አንባቢ ስጠቀም የተጠቃሚው መልእክት ወደ ጭነት፣ ስኬት ወይም የስህተት መልእክት ሲቀየር የስክሪን አንባቢው ዝማኔዎችን በራስ-ሰር እንደማያነብ አስተውያለሁ። ይህንን ለማስተካከል፣ aria-live የሚባል የኤችቲኤምኤል ባህሪን እንጠቀማለን። Aria-live ገንቢዎች የለውጦችን ተጠቃሚዎች ለማዘመን የማያ ገጽ አንባቢዎች እንዲያውቁ ያስችላቸዋል። አሪያ-ላይቭን ወይ ወደ አረጋጋጭ ወይም ጨዋነት ማዋቀር ትችላለህ - ወደ አስረጅነት ከተዋቀረ ሌሎች በስክሪኑ አንባቢ ወረፋ ላይ ለማንበብ የሚጠባበቁ ነገሮች ካሉ ምንም ይሁን ምን ዝማኔዎች ወዲያውኑ ይነበባሉ። በትህትና ከተዋቀረ ማሻሻያው የሚነበበው ስክሪን አንባቢው በማንበብ ሂደት ላይ ባለ ሁሉም ነገር መጨረሻ ላይ ነው። በእኛ ሁኔታ ተጠቃሚውን በተቻለ ፍጥነት ማዘመን እንፈልጋለን። ስለዚህ የብቅ-ባይ ኮንቴይነር፣ የእኛ የተጠቃሚ መልእክት አባል ወላጅ አካል፣ ያንን ባህሪ እንጨምረዋለን።

 <div class="popup-container" aria-live="assertive">

በመጨረሻ ፣ የስክሪን አንባቢን በመጠቀም ፣ ብቅ-ባይን ለመዝጋት ቀላል መንገድ እንደሌለ አስተውያለሁ። አይጥ ሲጠቀሙ ከብቅ ባዩ ውጭ የትኛውም ቦታ ላይ ጠቅ ያድርጉ እና ይዘጋል ነገር ግን ኪቦርዱን በመጠቀም እንዴት እንደሚዘጋው በትክክል ማወቅ አልችልም። ስለዚህ ተጠቃሚዎች በቀላሉ መዝጋት እና ወደ ድረ-ገጹ መመለስ እንዲችሉ በብቅ-ባይ ግርጌ ላይ 'ዝግ' የሚለውን ቁልፍ እንጨምራለን።

በ popup.html ውስጥ፣ እንጨምራለን፡

 <div> <button id="close-button">Close</button> </div>

በpopup.js ውስጥ፣ በጠቅታ ላይ ያለውን ተግባር እንጨምራለን፡-

 const closeButton = document.body.querySelector('#close-button'); closeButton.addEventListener('click', async () => { window.close() });

እና ያ ነው! ማንኛቸውም ጥያቄዎች ወይም ጥቆማዎች ካሉዎት እባክዎን ያግኙ።

የመጨረሻው ሪፖ አገናኝ እዚህ አለ.