image-resizer: compute the main color automatically (#324)

* image-resizer: compute the main color automatically

Use ImageMagick to compute the main color automatically.
Remove that data from metadata.json.
Bump Go to 1.24.

* Install imagemagick-dev

Author: qbarrand

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
 
     steps:
       - name: Install dependencies
-        run: apk add gcc git make musl-dev pkgconfig vips-dev
+        run: apk add gcc git imagemagick-dev make musl-dev pkgconfig vips-dev
 
       - name: Check out the repo
         uses: actions/checkout@v4
@@ -34,7 +34,7 @@ jobs:
 
     steps:
       - name: Install dependencies
-        run: apk add gcc musl-dev pkgconfig tar vips-dev
+        run: apk add gcc imagemagick-dev musl-dev pkgconfig tar vips-dev
 
       - name: Check out the repo
         uses: actions/checkout@v4

Dockerfile

@@ -11,7 +11,7 @@ COPY go.mod go.mod
 COPY go.sum go.sum
 COPY pkg/ pkg/
 
-RUN ["apk", "add", "gcc", "git", "make", "musl-dev", "pkgconfig", "vips-dev"]
+RUN ["apk", "add", "gcc", "git", "imagemagick-dev", "make", "musl-dev", "pkgconfig", "vips-dev"]
 RUN ["make", "server", "img-out"]
 
 FROM python:3 as python-builder

cmd/image-resizer/main.go

@@ -14,6 +14,7 @@ import (
 
 	"github.com/davidbyttow/govips/v2/vips"
 	"github.com/qbarrand/quba.fr/internal/metadata"
+	"gopkg.in/gographics/imagick.v3/imagick"
 )
 
 type breakpoints struct {
@@ -142,6 +143,34 @@ func (r *processor) resize(ctx context.Context, p *params) error {
 	return nil
 }
 
+func mainColor(fullPath string) (string, error) {
+	mw := imagick.NewMagickWand()
+	defer mw.Destroy()
+
+	if err := mw.ReadImage(fullPath); err != nil {
+		return "", fmt.Errorf("could not read image %s: %v", fullPath, err)
+	}
+
+	if err := mw.SetDepth(8); err != nil {
+		return "", fmt.Errorf("could not set image depth: %v", err)
+	}
+
+	if err := mw.QuantizeImage(1, imagick.COLORSPACE_UNDEFINED, 0, imagick.DITHER_METHOD_FLOYD_STEINBERG, false); err != nil {
+		return "", fmt.Errorf("error quantizing image: %v", err)
+	}
+
+	colors, pws := mw.GetImageHistogram()
+	if colors != 1 {
+		return "", fmt.Errorf("expected 1 color, got %d", colors)
+	}
+
+	red := uint(pws[0].GetRed() * 256)
+	green := uint(pws[0].GetGreen() * 256)
+	blue := uint(pws[0].GetBlue() * 256)
+
+	return fmt.Sprintf("#%X%X%X", red, green, blue), nil
+}
+
 func main() {
 	var (
 		breakpointsFile string
@@ -167,6 +196,9 @@ func main() {
 	vips.Startup(&vips.Config{ConcurrencyLevel: concurrency})
 	defer vips.Shutdown()
 
+	imagick.Initialize()
+	defer imagick.Terminate()
+
 	ctx, cancel := context.WithCancel(context.Background())
 	defer cancel()
 
@@ -201,20 +233,24 @@ func main() {
 		log.Fatalf("Could not initialize the database: %v", err)
 	}
 
-	// Add image metadata
-	for k, v := range meta {
-		if err = mdb.AddImage(ctx, k, v.Date, v.Location, v.MainColor); err != nil {
-			log.Fatalf("Could not add %s to the metadata DB: %v", k, err)
-		}
-	}
-
 	rs := &processor{mdb: mdb}
 
-	for baseName := range meta {
+	for baseName, m := range meta {
 		log.Printf("Processing %s", baseName)
 
 		fullPath := filepath.Join(imgInDir, baseName)
 
+		log.Printf("Getting main color")
+
+		mainColor, err := mainColor(fullPath)
+		if err != nil {
+			log.Fatalf("Could not get the main color: %v", err)
+		}
+
+		if err = mdb.AddImage(ctx, baseName, m.Date, m.Location, mainColor); err != nil {
+			log.Fatalf("Could not add %s to the metadata DB: %v", baseName, err)
+		}
+
 		origImg, err := vips.LoadImageFromFile(fullPath, vips.NewImportParams())
 		if err != nil {
 			log.Fatalf("Could not load image %s", fullPath)

cmd/image-resizer/metadata.go

@@ -8,11 +8,10 @@ import (
 )
 
 type ImageMetadata struct {
-	Date      string   `json:"date"`
-	Formats   []string `json:"formats"`
-	Heights   []int    `json:"heights"`
-	Location  string   `json:"location"`
-	MainColor string   `json:"main_color"`
+	Date     string   `json:"date"`
+	Formats  []string `json:"formats"`
+	Heights  []int    `json:"heights"`
+	Location string   `json:"location"`
 }
 
 type Metadata map[string]*ImageMetadata

go.mod

@@ -1,6 +1,8 @@
 module github.com/qbarrand/quba.fr
 
-go 1.20
+go 1.24
+
+toolchain go1.24.1
 
 require (
 	github.com/Masterminds/squirrel v1.5.4
@@ -29,5 +31,6 @@ require (
 	golang.org/x/sys v0.28.0 // indirect
 	golang.org/x/text v0.21.0 // indirect
 	google.golang.org/protobuf v1.34.2 // indirect
+	gopkg.in/gographics/imagick.v3 v3.7.2 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

go.sum

@@ -121,6 +121,8 @@ google.golang.org/protobuf v1.34.2/go.mod h1:qYOHts0dSfpeUzUFpOMr/WGzszTmLH+DiWn
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20200902074654-038fdea0a05b/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
+gopkg.in/gographics/imagick.v3 v3.7.2 h1:PmsYCf60YS/7f1omBTDaoS6yp4817Wv61S0JpWH4cMc=
+gopkg.in/gographics/imagick.v3 v3.7.2/go.mod h1:7I4S9VWdwr88yzYi7g+ZL4H8oZuH9cmSQI7GsZCcYFM=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

img-src/metadata.json

@@ -1,172 +1,138 @@
 {
     "aurlandsfjord_1.jpg": {
       "date": "September 2021",
-      "location": "Aurlandsfjord, Norway",
-      "main_color": "#6B7477"
+      "location": "Aurlandsfjord, Norway"
     },
     "chicago_1.jpg": {
         "date": "November 2023",
-        "location": "Chicago, USA",
-        "main_color": "#77838A"
+        "location": "Chicago, USA"
     },
     "dents_du_midi_1.jpg": {
         "date": "January 2020",
-        "location": "Dents du Midi, Switzerland",
-        "main_color": "#4279AC"
+        "location": "Dents du Midi, Switzerland"
     },
     "dubai_1.jpg": {
         "date": "June 2017",
-        "location": "Dubai, UAE",
-        "main_color": "#4F4C42"
+        "location": "Dubai, UAE"
     },
     "fuji_1.jpg": {
         "date": "October 2017",
-        "location": "Mount Fuji, Japan",
-        "main_color": "#68809E"
+        "location": "Mount Fuji, Japan"
     },
     "geneva_1.jpg": {
         "date": "June 2016",
-        "location": "Geneva, Switzerland",
-        "main_color": "#717D85"
+        "location": "Geneva, Switzerland"
     },
     "grindelwald_1.jpg": {
         "date": "August 2021",
-        "location": "Grindelwald, Switzerland",
-        "main_color": "#568AB2"
+        "location": "Grindelwald, Switzerland"
     },
     "kawaguchiko_1.jpg": {
         "date": "December 2023",
-        "location": "Kawaguchi-ko, Japan",
-        "main_color": "#7299B2"
+        "location": "Kawaguchi-ko, Japan"
     },
     "kyoto_2.jpg": {
         "date": "April 2023",
-        "location": "Kyoto, Japan",
-        "main_color": "#BC5B1E"
+        "location": "Kyoto, Japan"
     },
     "lhc_1.jpg": {
         "date": "August 2019",
-        "location": "LHC, France / Switzerland",
-        "main_color": "#827366"
+        "location": "LHC, France / Switzerland"
     },
     "malibu_1.jpg": {
         "date": "March 2019",
-        "location": "Malibu, USA",
-        "main_color": "#744930"
+        "location": "Malibu, USA"
     },
     "marseille_1.jpg": {
         "date": "March 2023",
-        "location": "Marseille, France",
-        "main_color": "#497C88"
+        "location": "Marseille, France"
     },
     "montreux_1.jpg": {
         "date": "October 2016",
-        "location": "Montreux, Switzerland",
-        "main_color": "#768692"
+        "location": "Montreux, Switzerland"
     },
     "monument_valley_1.jpg": {
         "date": "May 2022",
-        "location": "Monument Valley, USA",
-        "main_color": "#514745"
+        "location": "Monument Valley, USA"
     },
     "nantes_1.jpg": {
         "date": "December 2019",
-        "location": "Nantes, France",
-        "main_color": "#807B66"
+        "location": "Nantes, France"
     },
     "new_delhi_1.jpg": {
         "date": "June 2017",
-        "location": "New Delhi, India",
-        "main_color": "#807B66"
+        "location": "New Delhi, India"
     },
     "newyork_3.jpg": {
         "date": "October 2023",
-        "location": "New York, USA",
-        "main_color": "#464240"
+        "location": "New York, USA"
     },
     "newyork_4.jpg": {
         "date": "October 2023",
-        "location": "New York, USA",
-        "main_color": "#587C7E"
+        "location": "New York, USA"
     },
     "newyork_5.jpg": {
         "date": "October 2023",
-        "location": "New York, USA",
-        "main_color": "#3A342D"
+        "location": "New York, USA"
     },
     "nuggets_point_1.jpg": {
         "date": "January 2019",
-        "location": "Nuggets Point, New Zealand",
-        "main_color": "#526F7F"
+        "location": "Nuggets Point, New Zealand"
     },
     "reine_1.jpg": {
         "date": "September 2021",
-        "location": "Reine, Norway",
-        "main_color": "#7C8D9A"
+        "location": "Reine, Norway"
     },
     "san_francisco_1.jpg": {
         "date": "June 2022",
-        "location": "San Francisco, USA",
-        "main_color": "#789DA4"
+        "location": "San Francisco, USA"
     },
     "shenzhen_1.jpg": {
         "date": "August 2014",
-        "location": "Shenzhen, China",
-        "main_color": "#5C0C1A"
+        "location": "Shenzhen, China"
     },
     "shikotsuko_1.jpg": {
         "date": "April 2023",
-        "location": "Shikotsu-ko, Japan",
-        "main_color": "#7D8996"
+        "location": "Shikotsu-ko, Japan"
     },
     "singapore_1.jpg": {
         "date": "January 2019",
-        "location": "Singapore",
-        "main_color": "#483D39"
+        "location": "Singapore"
     },
     "thun_1.jpg": {
         "date": "May 2016",
-        "location": "Thun, Switzerland",
-        "main_color": "#587FA4"
+        "location": "Thun, Switzerland"
     },
     "tokyo_1.jpg": {
         "date": "April 2023",
-        "location": "Tokyo, Japan",
-        "main_color": "#A4A7A7"
+        "location": "Tokyo, Japan"
     },
     "tokyo_2.jpg": {
         "date": "April 2023",
-        "location": "Tokyo, Japan",
-        "main_color": "#898D83"
+        "location": "Tokyo, Japan"
     },
     "tongariro_1.jpg": {
         "date": "January 2019",
-        "location": "Tongariro National Park, New Zealand",
-        "main_color": "#595553"
+        "location": "Tongariro National Park, New Zealand"
     },
     "touffailles_1.jpg": {
         "date": "August 2023",
-        "location": "Touffailles, France",
-        "main_color": "#776F5B"
+        "location": "Touffailles, France"
     },
     "whaikiti_beach_1.jpg": {
         "date": "January 2019",
-        "location": "Whaikiti Beach, New Zealand",
-        "main_color": "#6C8296"
+        "location": "Whaikiti Beach, New Zealand"
     },
     "yosemite_1.jpg": {
         "date": "May 2022",
-        "location": "Yosemite National Park, USA",
-        "main_color": "#445C68"
+        "location": "Yosemite National Park, USA"
     },
     "zermatt_1.jpg": {
         "date": "February 2021",
-        "location": "Zermatt, Switzerland",
-        "main_color": "#3B6796"
+        "location": "Zermatt, Switzerland"
     },
     "zurich_1.jpg": {
         "date": "August 2023",
-        "location": "Zürich, Switzerland",
-        "main_color": "#4F5E5D"
+        "location": "Zürich, Switzerland"
     }
 }