Bildehjelp til nettsider

Høres det bare ut som ekstraarbeid? Fortvil ikke, for det finnes verktøy som kan hjelpe deg med dette. Du kan for eksempel bruke Google Vision for å hente ut informasjon om et bilde. Men, da er du bundet til akkurat det denne modellen støtter.

Hva hvis du ønsker å hente ut annen informasjon? Kanskje ønsker du oversikt over hvilke farger som blir brukt på nettsiden? Sliter du med å lage Twitter card/X card-tekster til bildene? Som utvikler er du kanskje opptatt av LD+json informasjon om bildet?

Da er faktisk dagens store språkmodeller (LLM) med bildegjenkjenning bedre.

Jeg har satt opp en GPT på ChatGPT som viser et praktisk eksempel på hvordan AI kan gjøre hverdagen din enklere.

Så la oss prøve et bilde. Alle bildene er tatt fra nettsiden vår.

{
  "content": [
    {
      "word": "smarttelefon",
      "explanation": "En hånd som holder en smarttelefon med en fargerik app-skjerm synlig."
    },
    {
      "word": "app",
      "explanation": "Skjermen viser flere app-ikoner med forskjellige funksjoner."
    },
    {
      "word": "notisbok",
      "explanation": "Det er en åpen notisbok under telefonen."
    },
    {
      "word": "penn",
      "explanation": "En penn ligger ved siden av notisboken."
    },
    {
      "word": "kaffekopp",
      "explanation": "Det er en svart kaffekopp til venstre for notisboken."
    }
  ],
  "palette": [
    { "rgb": "#FFFFFF" },
    { "rgb": "#F4F4F4" },
    { "rgb": "#2D82B7" },
    { "rgb": "#6A737D" },
    { "rgb": "#F28B82" }
  ],
  "words": ["smarttelefon", "hånd", "app", "app-ikoner", "notisbok", "penn", "kaffekopp", "farger", "mønster", "tekstil"],
  "alt": "En person som holder en smarttelefon med fargerike app-ikoner, ved siden av en notisbok og penn på et hvitt bord.",
  "figcaption": "En hånd som viser en smarttelefon med app-ikoner, med skriveutstyr og en kaffekopp til venstre, klar for produktivitet eller en arbeidsøkt.",
  "description": "Bilde av en hånd som holder en smarttelefon med en åpen applikasjon med fargerike ikoner. På bordet ved siden av smarttelefonen ligger en åpen notisbok og en penn, og en kaffekopp er plassert til venstre.",
  "twitter": "Arbeid på farten: En smarttelefon med fargerike apper i fokus, flankert av notatmaterialer og en kaffekopp, et snapshot av moderne produktivitet."
}

Men hva hvis vi ønsker kun wcag informasjon? Da legger vi på wcag når vi sender inn et bildet.

{
  "alt": "Illustrasjon av helsepersonell og pasientar med ulike helseaktiviteter, i ein stilisert form med hovedsakelig rosa, rød, og hvit fargepalett.",
  "figcaption": "Grafisk framstilling av helseomsorg med tegnede figurer som representerer leger, pasienter og helseaktiviteter i en forenklet og fargerik stil."
}

Kanskje du bare ønsker alt-taggen til bildet?

{
  "alt": "Eit lite barn med lyst krøllete hår som lager mat saman med ein vaksen med langt brunt hår og skjegg."
}

Så hva sender du inn til GPT for å få til dette? Når du lager en egen GPT så legger du dette i Instructions feltet. Hvis du bruker API-et vil det være en systemmelding:

Du er en ekspert på bilder som svarer standard på nynorsk. Når det legges inn et bilde så vil du forklare hva som finnes i bildet, si hvilke 5 farger som er mest av i bildet, som palett. Du vil også skrive ut absolutt alle ord om hva som finnes i bildet som en array (words). Svaret skal være på json format, og kun json.

Hvis jeg skriver et eller flere av nøkkelordene i json, så skal du kun ta med dem i svaret og ikke legge ved de andre nøkkelordene. Hvis jeg ikke ber om spesifikke nøkkelord skal alle vises. Hvis jeg kun skriver ordet “hjelp” så skal du gi en forklaring, ikke json, på hva du kan gjøre, inkludert nøkkelord jeg kan sende inn.

Nøkkelord:
content, palette, words, alt, figcaption, description, twitter, wcag

wcag betyr å vise både alt og figcaption taggene.

{
content: [
{
“word”: <Kva er i bildet>
“explanation”: <beskriv>
},
…
],
palette: [
{ rbg: “#…” }
],
words: [ord,…],
alt: <wcag alt tekst for bildet>,
figcaption: <wcag figcaption for bildet>,
description: <ld-json description for bildet>,
twitter: <twitter:card forklaring for bildet>
}

Det som er viktig når du skal lage prompt (instruksjoner til GPT) er å si hva modellen skal gjøre og også si hva den ikke skal gjøre. For eksempel så kan du ikke skrive Svaret skal være på json format. Da vil den ta med annen tekst også. Du må legge til og kun json for å sikre at den ikke legger med mer.

Da er det bare å leke seg med Bildehjelp, eller ta teksten og endre den til ditt behov: ChatGPT – Bildehjelp

Kan vi hjelpe deg med å gjøre dine nettsider smartere?

Kontakt Bjørnar Tollaksen, teknolog og daglig leder, (bjornar@grensesnitt.no/911 00 918) og vi hjelper deg gjerne:-)

P.S. Denne bildehjelpen her har vi allerede innebygd i våre WordPress-løsninger, hvis du skulle trenge hjelp til det.