Web based GUI for UCI chess engine: YouTube series

[maksimKorzh]

Hey what's up guys, Code Monkey King's here.
Many programmers creating websites to showcase their work but not many websites are actually allowing to play online vs a UCI chess engine written in C/C++
This is the exact entry point I'm starting my new work at, so the idea is very simple - create a web based GUI for my engine BBC, connect it to the engine and deploy at free hosting so people could play with my engine online.

Here's a quick demo of the bare minimum prototype I've made a couple of days ago.
https://www.youtube.com/watch?v=_0uKZbHWVKM
It's still pretty early development stage but it already allows to play vs UCI chess engine written in C completely in browser!
I'm going to live code the entire project on youtube and end the series with deploying the web app (most likely at pythonanywhere.com)

Toolchain:
- Python/Flask (minimalist web framework)
- python-chess (UCI wrapper)
- chessboardjs (board widget used on lichess.org)
- chessjs (helper library to handle game state in UI)

Some cool things about this idea:
1.Using pyinstaller one can convert web app to desktop app (single binary executable that starts HTTP server on local machine, so you can open browser an play chess!)
2. Using this technology it should be possible to create a GUI like Arena but completely in web interface!

I'm waiting for all interested to join my new dead simple tutorial series everyone can follow!
https://www.youtube.com/watch?v=_0uKZbH ... jiLhkQm0DB

P.S. I bought a new mic, so sound quality is much better now!

[BrendanJNorman]

Hey what's up guys, Code Monkey King's here.
Many programmers creating websites to showcase their work but not many websites are actually allowing to play online vs a UCI chess engine written in C/C++
This is the exact entry point I'm starting my new work at, so the idea is very simple - create a web based GUI for my engine BBC, connect it to the engine and deploy at free hosting so people could play with my engine online.

Here's a quick demo of the bare minimum prototype I've made a couple of days ago.
https://www.youtube.com/watch?v=_0uKZbHWVKM
It's still pretty early development stage but it already allows to play vs UCI chess engine written in C completely in browser!
I'm going to live code the entire project on youtube and end the series with deploying the web app (most likely at pythonanywhere.com)

Toolchain:
- Python/Flask (minimalist web framework)
- python-chess (UCI wrapper)
- chessboardjs (board widget used on lichess.org)
- chessjs (helper library to handle game state in UI)

Some cool things about this idea:
1.Using pyinstaller one can convert web app to desktop app (single binary executable that starts HTTP server on local machine, so you can open browser an play chess!)
2. Using this technology it should be possible to create a GUI like Arena but completely in web interface!

I'm waiting for all interested to join my new dead simple tutorial series everyone can follow!
https://www.youtube.com/watch?v=_0uKZbH ... jiLhkQm0DB

P.S. I bought a new mic, so sound quality is much better now!

What you are doing is great. Makes me want to study chess programming once my other study (language) goals are reached.

Thanks for your work.

[maksimKorzh]

Hey what's up guys, Code Monkey King's here.
Many programmers creating websites to showcase their work but not many websites are actually allowing to play online vs a UCI chess engine written in C/C++
This is the exact entry point I'm starting my new work at, so the idea is very simple - create a web based GUI for my engine BBC, connect it to the engine and deploy at free hosting so people could play with my engine online.

Here's a quick demo of the bare minimum prototype I've made a couple of days ago.
https://www.youtube.com/watch?v=_0uKZbHWVKM
It's still pretty early development stage but it already allows to play vs UCI chess engine written in C completely in browser!
I'm going to live code the entire project on youtube and end the series with deploying the web app (most likely at pythonanywhere.com)

Toolchain:
- Python/Flask (minimalist web framework)
- python-chess (UCI wrapper)
- chessboardjs (board widget used on lichess.org)
- chessjs (helper library to handle game state in UI)

Some cool things about this idea:
1.Using pyinstaller one can convert web app to desktop app (single binary executable that starts HTTP server on local machine, so you can open browser an play chess!)
2. Using this technology it should be possible to create a GUI like Arena but completely in web interface!

I'm waiting for all interested to join my new dead simple tutorial series everyone can follow!
https://www.youtube.com/watch?v=_0uKZbH ... jiLhkQm0DB

P.S. I bought a new mic, so sound quality is much better now!

What you are doing is great. Makes me want to study chess programming once my other study (language) goals are reached.

Thanks for your work.

Cool! What kind of language are you studying?

[mvanthoor]

On the one hand I think it's a cool project, but on the other hand I feel it's a bit much library gluing.

What I was thinking about is to, at some point, implement a new GUI based on Electron (like Visual Studio Code, and many other programs), Because of Electron, it'll basically be a webapp running on the desktop, because Electron uses Chrome for its frontend / GUI. (If I'd need a backend, I'd use Rust as the webassembly backend.)

The predominant GUI's for chess programs at the moment are:

Chessbase ("Fritz" GUI; the engine hasn't been Fritz for a long time now)
Shredder GUI
Arena
Winboard / XBoard
Then there are some others, sutch as Chess Assistant, Aquarium, Tarrash...

Most of these GUI's work fine if you have a 'normal' monitor and Windows with completely default settings, but if you have a high-resolution monitor, or non-default settings, all of these GUI's display some really weird quirks or fall apart entirely. I don't know about Linux (Chessbase doesn't even run on Linux), because I don't use Linux on the desktop at this time.

I have not yet looked at the Banksia GUI.

So yes, a web-like interface for chess engines is a great idea, but I'd prefer it to be within a framework such as Electron, on the desktop.

[hgm]

Can you give an example where WinBoard displays some really weird quirks because of the resolution?

[maksimKorzh]

Can you give an example where WinBoard displays some really weird quirks because of the resolution?

Excuse me sir, I didn't understand the question (if it was addressed to me)

Btw current version would only target UCI protocol, but XBorard is supported by python-chess library so I think it won't be a problem.
So if I'm ever to dare to create Arena like GUI ( much worse actually))) ) then obviously taking care of winboard protocol would make sense.
For now I just want to have a site allowing to play versus my engine online and that's it.

[maksimKorzh]

On the one hand I think it's a cool project, but on the other hand I feel it's a bit much library gluing.

What I was thinking about is to, at some point, implement a new GUI based on Electron (like Visual Studio Code, and many other programs), Because of Electron, it'll basically be a webapp running on the desktop, because Electron uses Chrome for its frontend / GUI. (If I'd need a backend, I'd use Rust as the webassembly backend.)

The predominant GUI's for chess programs at the moment are:

Chessbase ("Fritz" GUI; the engine hasn't been Fritz for a long time now)
Shredder GUI
Arena
Winboard / XBoard
Then there are some others, sutch as Chess Assistant, Aquarium, Tarrash...

Most of these GUI's work fine if you have a 'normal' monitor and Windows with completely default settings, but if you have a high-resolution monitor, or non-default settings, all of these GUI's display some really weird quirks or fall apart entirely. I don't know about Linux (Chessbase doesn't even run on Linux), because I don't use Linux on the desktop at this time.

I have not yet looked at the Banksia GUI.

So yes, a web-like interface for chess engines is a great idea, but I'd prefer it to be within a framework such as Electron, on the desktop.

Marcel, I think you're taking it too serious)
I'm not about to compete with REAL GUIS like arena.

re: Electron
- it's too complicated for me + I want to play versus engine in the browser and creating single file native binary executable just make the life easier for the users so they can simply download 1 file, run it, open browser and play chess - that's it)

[hgm]

Excuse me sir, I didn't understand the question (if it was addressed to me)

It was addressed to mvanthoor, who had made the preceding posting.

About your project: it is interesting, but I don't see why anyone would want to do that. My computer is already busy enough, so why would I want to run engines on behalf of some unknown engine on the internet?

When I offer chess games on a website, I make very sure that all the heavy-duty computing takes place on the client machine!

[mvanthoor]

Can you give an example where WinBoard displays some really weird quirks because of the resolution?

I'll install it on my laptop and test the latest version.

Quirks can be as simple as a user interface not scaling correctly in all dialog screens (Chessbase) or a GUI being unsharp (old Chessbase GUI's, Arena) if one is using a high-dpi screen with scaling set to something else than 100%.

[maksimKorzh]

Excuse me sir, I didn't understand the question (if it was addressed to me)

It was addressed to mvanthoor, who had made the preceding posting.

About your project: it is interesting, but I don't see why anyone would want to do that. My computer is already busy enough, so why would I want to run engines on behalf of some unknown engine on the internet?

When I offer chess games on a website, I make very sure that all the heavy-duty computing takes place on the client machine!

Oh.. I see, sorry.

re: project
- maybe you have a slight misunderstanding. Current series would end up with DEPLOYING my website allowing to play with my engine ONLINE. It's not intended to play vs other engines and the reason to calculate on the remote server is just to make engine stronger. To run on client side, say in browser it would need to be written in javascript and would be much slower, but current implementation allows the user to experience the gameplay vs engine as if it was running natively on his system but without a need to download and install it. Say you as a human want to feel how strong my engine is but you're too busy to download, compile and play with it say in Arena, now what you can do is just go to the website and play online in your browser, so it saves time.

(e.g. I want to play microMax but I'm too dumb to compile it and connect to GUI, so Imagine I go to your site and play microMax online, cool right?)

And regarding the future possible project of creating arena like gui - that won't be a website but a single file executable starting HTTP server on local machine so you can use like arena but within a browser.

Thanks for your interest!