1# webapp
2
3This is a web version of [dominant_colours], which is available at <https://dominant-colours.glitch.me/>
4
5<img src="screenshot_wide.png" alt="A screenshot of the web app. It says 'find the dominant colours in an image' in bold letters at the top, then an illustration of two people in a Chinese dragon costume. On the right hand side are the dominant colours from that image: brown, blue, red and yellow, along with hex codes. At the bottom is a red-coloured link 'try another image'.">
6
7It's not meant to replace the command-line tool -- it won't get all the options, and uploading the image over HTTP means it's a lot slower.
8It's meant to be a quick replacement when I don't have easy access to a command line, e.g. when I'm on my phone.
9
10[dominant_colours]: https://github.com/alexwlchan/dominant_colours
11
12
13
14## How it works
15
16It's a web app written in [Flask], which shells out to the command-line tool to process an uploaded image.
17I've deployed it on [Glitch], because I already had several projects running there and I knew how to get started quickly.
18
19I have to [compile MUSL libc-based versions][compile] of the CLI tool to get it working in Glitch.
20
21[Flask]: https://pypi.org/project/Flask/
22[Glitch]: https://glitch.com/
23[compile]: https://alexwlchan.net/2022/05/rust-on-glitch/
24
25
26
27## Development
28
29You should only need to run the web app for development; if you can install packages locally the CLI is probably a better option.
30
311.  Install the [latest release] of the CLI
322.  Install the Python requirements:
33
34    ```console
35    $ pip3 install -r requirements.txt
36    ```
37
383.  Run the web server script:
39
40    ```console
41    $ python3 server.py
42    ```
43
44This will start a debug version of the web app at <http://localhost:4711>
45
46[latest release]: https://github.com/alexwlchan/dominant_colours/releases