Glöm inte bildbeskärningen!

En av idéerna till nya TV4.se som kom förra året var att mycket av materialet till sajten skulle komma från automatiska flöden. I den tidigare versionen fanns tablådata med men de var helt frikopplade från de sidor om programmet som redaktionen skapat manuellt.

För att göra sidorna grafiskt tilltalande och för att tydligt särskilja programmen från varandra ville vi ha en topp som visade ett foto från programmet, programmets titel och den kanal programmet tillhör. Toppbilden är när den visas på desktop väldigt bred.

Eftersom det totala antalet program är stort ville vi kunna använda bilder från TV4:s presstjänst rakt av och enbart för de mest populära programmen manuellt ladda upp en ny bild som det lagts mer arbete bakom för att passa på webbplatsen. I de fall där det saknades pressbild tänkte vi oss kunna använda bilder från avsnitten på TV4 Play.

Det visade sig dock att vi varit för optimistiska. I stort sett alla foton och alla screen grabs är i format som inte är lika breda. Under projektets gång blev det uppenbart att regelmässig beskärning utan hänsyn till bildens innehåll inte sällan ger upphov till lustiga, groteska eller vad som verkar vara kroppsfixerade resultat.

Skärmavbild 2013-01-26 kl. 22.39.37

Även på Facebook kan man se detta fenomen. Tydligast är det i mobil- eller surfplatteklienterna där stora delar av bilden försvinner när man ser dem i flödet. Den verkar förutsätta att det intressanta finns mitt i och skär lika mycket nedtill som upptill.

Med en bättre heuristik hade man nog sett till att klippa lite längre upp i bilden eftersom det intressanta (läs: ansikten) oftare finns där.

Bild på deltagare i Gladiatorerna visade i Facebooks iPad-klient. Ansiktena syns inte.

Bild på Niklas Wikegård och Leif Boork i Facebooks iPad-klient. Ansiktena syns inte.

Ett sätt att oftare beskära fram det intressanta är att automatiskt försöka avgöra vilken del som är mest intressant. Om vi börjar med den enklaste delen, ansikten, så skulle man t.ex. kunna avgöra var alla ansikten i bilden finns och göra en beskärning så att många som möjligt av dem kommer med.

Tjänsten Face.com som hade ett API för detta finns inte längre kvar efter att ha köpts upp av Facebook. Alternativ finns dock i t.ex. Sky Biometrys och Lambda labs API-er. Notera att vi inte behöver identifiera vems ansikte det är utan bara att det finns ett ansikte.

När det inte finns några ansikten i bilden blir det förstås mer besvärligt. För att hålla det enkelt vill man inte behöva identifiera typ av objekt i bilden utan bara var man tror det finns sådana. Forskningen inom bildbehandling och bildanalys har gett en del olika energimått som skulle kunna användas, t.ex.: gradientmagnitud, entropi och visual saliency (ungefär: visuellt framträdande).

Ta som exempel följande två bilder:

Denna bild från Mia på Grötö visas i Facebooks app som grönt te och vad som ser ut att vara en korg.

groto

Denna bild från avgående hallåan Fredrik Östling visas i Facebooks app utan det som gör bilden speciell, vilket i och för sig skulle kunna vara en fördel så att det avslöjas först när betraktaren klickar för att se hela bilden.

14983_421868577888047_869195362_n

En enkel tumregel skulle vara att lokalisera delen med mest energi och se till att denna finns inom den del av bilden som är kvar efter beskärning. Den behöver nödvändigtvis inte vara i mitten av den resulterande bilden.

På den första bilden ser vi att fatet med innehåll längst ner i bild är det som algoritmen tyckte var den mest framträdande detaljen i bilden.

grotosaliency

Den andra bilden har sina två mest intressanta regioner i varsitt hörn. Dels kameran längst upp till vänster och dels Fredriks bara ben längst ned till höger. Så det är i det här fallet inte helt självklart vilken del man hade plockat ut om man följt denna regel.

ostlingsaliency

I slutändan blev lösningen för oss en annan. Vi låter helt enkelt manuellt klippa bilder för alla program som sänds. Det arbetet genomförs av vår partner Red bee media som ansvarar för förädling av metadata kring våra program sedan ungefär ett år. Det är förstås inte en lösning som skulle fungera för t.ex. Facebook i någon större utsträckning så de kanske borde titta på teknikerna beskrivna ovan.

Skärmavbild 2013-01-26 kl. 22.39.52

Se mer om visual saliency i den vetenskapliga artikeln Itti, Koch, Niebur: A Model of Saliency-Based Visual Attention for Rapid Scene Analysis (PDF-format).

Bilderna med exempel är framtagna med kod från artikeln Static and Space-time Visual Saliency Detection by Self-Resemblance av Hae Jong Seo och Peyman Milanfar, publicerad i The Journal of Vision 9(12):15, 1-27.

Facebooks Graph search otäckt och lättanvänt

Tittar man på Facebooks nya Graph search är det inte bara det omdiskuterade problemet med integriteten för Facebooks användare som slår en utan också hur man lyckats göra sökningar som tidigare hade varit komplicerade att få till blir ganska enkla med ett genomtänkt gränssnitt. Wired berättar om historien bakom den nya funktionen och där hittar man bl.a. dansken Lars Rasmussen som Facebook lockade över från Google där han bl.a. låg bakom det hypade men floppande Google Wave.

Kanske kan man ana rötter bak till sjuttiotalets Query by example men man kan hitta liknande exempel av senare datum som är än mer lika. Hur som helst innebär autocompletion på frågorna att man slipper hålla en massa syntax i huvudet och snabbt kan fråga det man avser.

Det kan dock behövas en hel del masserande av datat från Facebooks sida.

My colleagues at TV4 who like WordPress” och “My colleagues at TV4 who like WordPress” ser identiska ut men den första ger tre träffar och den andra noll. Den första gäller programvaran WordPress och den andra intresset WordPress. I vissa fall kan två distinkta saker ha exakt samma namn men i det här fallet borde de nog hanteras som synonyma. Samma sak gäller förresten TV4 och TV4. Väljer jag företaget TV4 och inte sidan TV4 av typen “Media/News/Publishing” är det istället fem personer som gillar WordPress. Med två parametrar (oräknat “My colleagues”) med två alternativ på varje blir det fyra olika kombinationer där två ger olika många resultat och två inga resultat alls. Detta trots att det var samma sak som avsågs med både WordPress och TV4. Behovet av data integration tydliggörs alltså ganska snabbt.

graphsearch

Vi på TV4 står inför utmaningar som rör datakvalitet också. Tablådatat som ligger bakom mycket av innehållet på TV4.se har egentligen aldrig varit ägnat till annat än enkla listningar i TV-tidningar. Bristen på sammanhängande data blir väldigt tydligt när man t.ex. inte enkelt kan se om två sändningar är av samma program. Den enda ledtråd vi har är då att de har en titel som är snarlik men det är upplagt för missar. Är t.ex. Dallas anno 2012 samma serie som den från åttiotalet?

Nya användarmönster på www.tv4.se

För snart ett år sedan började vi implementera de första spikerna av nya tv4.se. Ett tidigt beslut i processen (inte bara baserat på buzzwords) var att sajten skulle vara responsive och anpassas automatiskt till mobil-, pekplatte- och webbläge. Ett stort tack till Peter och Svante (fleecelabs) och Robert Piirainen (Valtech) som har guidat oss rätt i detta arbete. Vi i webbgruppen menar att vi jobbar snabbare och mer kvalitetsinriktat samt levererar bättre om vi väljer roliga och utmanande teknologiska lösningar, därför är beslutprocessen ofta kort från idé till implementering om vi kan visa önskat resultat i spikes.

Nu bara ett år efter första embryot till ny sajt kan vi se hur snabbt användarbeteendet har ändrat sig på webben och att beslutet om responsiv sajt var rätta vägen att gå.

Under ser ni statistik över använda webbläsare i augusti 2011 respektive augusti 2012.

Användare (webbläsare) augusti 2011:
Browser aug. 2011

Användare (webbläsare) augusti 2012:
Browser aug. 2012

Under samma period har antal besök från mobila enheter på tv4.se ökat från 7.5% till strax över 25%. Utvecklingen går i en rasande takt och om ett år kanske största delen av besökarna kommer från mobila enheter?