Web based GUI for UCI chess engine: YouTube series

Discussion of anything and everything relating to chess playing software and machines.

Moderators: hgm, Dann Corbit, Harvey Williamson

Forum rules
This textbox is used to restore diagrams posted with the [d] tag before the upgrade.
User avatar
maksimKorzh
Posts: 630
Joined: Sat Sep 08, 2018 3:37 pm
Location: Ukraine
Full name: Maksim Korzh
Contact:

Web based GUI for UCI chess engine: YouTube series

Post by maksimKorzh » Sat Oct 10, 2020 10:46 am

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!
Wukong Xiangqi (Chinese chess engine + apps to embed into 3rd party websites):
https://github.com/maksimKorzh/wukong-xiangqi

Chess programming YouTube channel:
https://www.youtube.com/channel/UCB9-pr ... KKqDgXhsMQ

BrendanJNorman
Posts: 2360
Joined: Sun Feb 07, 2016 11:43 pm
Full name: Brendan J Norman

Re: Web based GUI for UCI chess engine: YouTube series

Post by BrendanJNorman » Sat Oct 10, 2020 11:30 am

maksimKorzh wrote:
Sat Oct 10, 2020 10:46 am
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.

User avatar
maksimKorzh
Posts: 630
Joined: Sat Sep 08, 2018 3:37 pm
Location: Ukraine
Full name: Maksim Korzh
Contact:

Re: Web based GUI for UCI chess engine: YouTube series

Post by maksimKorzh » Sat Oct 10, 2020 12:05 pm

BrendanJNorman wrote:
Sat Oct 10, 2020 11:30 am
maksimKorzh wrote:
Sat Oct 10, 2020 10:46 am
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?
Wukong Xiangqi (Chinese chess engine + apps to embed into 3rd party websites):
https://github.com/maksimKorzh/wukong-xiangqi

Chess programming YouTube channel:
https://www.youtube.com/channel/UCB9-pr ... KKqDgXhsMQ

User avatar
mvanthoor
Posts: 776
Joined: Wed Jul 03, 2019 2:42 pm
Full name: Marcel Vanthoor

Re: Web based GUI for UCI chess engine: YouTube series

Post by mvanthoor » Sat Oct 10, 2020 12:44 pm

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.
Author of Rustic.
Releases | Code | Docs

User avatar
hgm
Posts: 25887
Joined: Fri Mar 10, 2006 9:06 am
Location: Amsterdam
Full name: H G Muller
Contact:

Re: Web based GUI for UCI chess engine: YouTube series

Post by hgm » Sat Oct 10, 2020 1:59 pm

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

User avatar
maksimKorzh
Posts: 630
Joined: Sat Sep 08, 2018 3:37 pm
Location: Ukraine
Full name: Maksim Korzh
Contact:

Re: Web based GUI for UCI chess engine: YouTube series

Post by maksimKorzh » Sat Oct 10, 2020 2:06 pm

hgm wrote:
Sat Oct 10, 2020 1:59 pm
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.
Wukong Xiangqi (Chinese chess engine + apps to embed into 3rd party websites):
https://github.com/maksimKorzh/wukong-xiangqi

Chess programming YouTube channel:
https://www.youtube.com/channel/UCB9-pr ... KKqDgXhsMQ

User avatar
maksimKorzh
Posts: 630
Joined: Sat Sep 08, 2018 3:37 pm
Location: Ukraine
Full name: Maksim Korzh
Contact:

Re: Web based GUI for UCI chess engine: YouTube series

Post by maksimKorzh » Sat Oct 10, 2020 2:08 pm

mvanthoor wrote:
Sat Oct 10, 2020 12:44 pm
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)
Wukong Xiangqi (Chinese chess engine + apps to embed into 3rd party websites):
https://github.com/maksimKorzh/wukong-xiangqi

Chess programming YouTube channel:
https://www.youtube.com/channel/UCB9-pr ... KKqDgXhsMQ

User avatar
hgm
Posts: 25887
Joined: Fri Mar 10, 2006 9:06 am
Location: Amsterdam
Full name: H G Muller
Contact:

Re: Web based GUI for UCI chess engine: YouTube series

Post by hgm » Sat Oct 10, 2020 2:23 pm

maksimKorzh wrote:
Sat Oct 10, 2020 2:06 pm
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!

User avatar
mvanthoor
Posts: 776
Joined: Wed Jul 03, 2019 2:42 pm
Full name: Marcel Vanthoor

Re: Web based GUI for UCI chess engine: YouTube series

Post by mvanthoor » Sat Oct 10, 2020 2:55 pm

hgm wrote:
Sat Oct 10, 2020 1:59 pm
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%.
Author of Rustic.
Releases | Code | Docs

User avatar
maksimKorzh
Posts: 630
Joined: Sat Sep 08, 2018 3:37 pm
Location: Ukraine
Full name: Maksim Korzh
Contact:

Re: Web based GUI for UCI chess engine: YouTube series

Post by maksimKorzh » Sat Oct 10, 2020 3:25 pm

hgm wrote:
Sat Oct 10, 2020 2:23 pm
maksimKorzh wrote:
Sat Oct 10, 2020 2:06 pm
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!
Wukong Xiangqi (Chinese chess engine + apps to embed into 3rd party websites):
https://github.com/maksimKorzh/wukong-xiangqi

Chess programming YouTube channel:
https://www.youtube.com/channel/UCB9-pr ... KKqDgXhsMQ

Post Reply