[Python] Interract with Raspberry PI 4b GPIO from HTML

I'm working on a project and I need to control my Raspberry PI 4b's GPIO from a web page (local-hosted).

I've looked at this tutorial already: https://www.youtube.com/watch?v=owgRkU_-4lw

The guy creates a python web server that generates a web page and allows user interaction with the RasPI's GPIO. But of course that doesn't fit my needs perfectly.

So I've tried to modify his project, but I'm struggling. I've already developed my web page in HTML and CSS and I need to adapt his project to fit.

I've already adapted parts of his code to get rid of what I didn't need (like the ability to read the temperature) and to be able to display my own web page instead of his. I've mainly edited the do_GET() method as follows:

def do_GET(self):

with open('index.html', 'rb') as file:
html = file.read()
self.do_HEAD()
self.wfile.write(html)


I now need to adapt the HTML-Python communication so that my HTML actually interacts with the GPIO. My main issues are:

1. I suck at Python (big time)
2. My buttons are SVGs that were previously used to trigger JS functions using the onmousedown and onmouseup events (but JS doesn't work so...)
3. I need to GPIO to be equal to 1 when the button is pressed and 0 when released
4. Have I mentioned that I suck at Python?

Jokes aside, here's a sample of my HTML:

<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="8%" viewBox="0 0 600.000000 1308.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1308.000000) scale(0.100000,-0.100000)" fill="#FF0000" stroke="none">
<!-- SVG path content -->
</g>
</svg>
</div>


Previously, with the trigger events, it looked like this:

<div>
<svg onmousedown="funcOnDown()" onmouseup="funcOnUp()" version="1.0" xmlns="http://www.w3.org/2000/svg" width="8%" viewBox="0 0 600.000000 1308.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1308.000000) scale(0.100000,-0.100000)" fill="#FF0000" stroke="none">
<!-- SVG path content -->
</g>
</svg>
</div>


And... That's about it. If you have any ideas or need more info, please let me know!

EDIT

1. 
   "Why use SVGs?"/"Put it in a button element to use with JS" Because of practicality. And I can technically use JS without using a button element, as shown above. But thanks for the suggestion
   
   
2. 
   "Why don't you use JS?" I've tried, but it doesn't work anymore and I have been advised not to use it. But just in case, if you have a JS solution, shoot it and I'll see if it can work!
   
   
3. 
   "Your post isn't a question, it's a statement that you hate Python" It was humour but ok...? Oh and there's a question. Twice. Please read before judging based on false ideas.
   
   
4. 
   "Try Rubby, PHP or JS"/"Try Flask" What do you have in mind regarding Rubby/PHP/Flask? Btw I have little to no experience with both, just in case...
   

Continue reading...