Accusedbold/Youtube_Math
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Websocket stuff

Browse Source
This commit is contained in:
Accusedbold
2026-05-02 18:26:02 -04:00
parent 7f49abd5e1
commit f34125d67b
10 changed files with 140 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
app.log

BIN
__pycache__/main.cpython-313.pyc Normal file
View File

Binary file not shown.

69
main.py
View File

@@ -1,26 +1,65 @@
#All Rights Reserved John Salguero #All Rights Reserved John Salguero
#Starts the backend to my Youtube stream #Starts the backend to my Youtube stream
import json
import asyncio
import logging
from problem_generator import generate_problem from problem_generator import generate_problem
from steps_generator import generate_steps from steps_generator import generate_steps
from sympy import init_printing, sympify from sympy import init_printing, sympify
import time from fastapi import FastAPI, WebSocket, WebSocketDisconnect
import json
#define the entry point to the programs logging.basicConfig(
def main(): level=logging.INFO,
init_printing(order='lex') format="%(asctime)s [%(levelname)s] %(message)s",
count = -1 handlers=[
no_problem = True logging.FileHandler("app.log"),
logging.StreamHandler() # prints to console
]
)
problem = generate_problem() log = logging.getLogger(__name__)
problem["steps"] = generate_steps(problem);
app = FastAPI()
no_problem = check_solution(problem["steps"][-1]["after"], problem["solution"]) clients = []
if no_problem:
with open("www/data/data.json", "w") as f: @app.websocket("/ws")
json.dump(problem, f) async def websocket_endpoint(ws: WebSocket):
await ws.accept()
clients.append(ws)
try:
while True:
data = json.loads(await ws.receive_text())
log.info(f"Received from browser: {data}")
if data.get("type") == "query_problem":
problem = generate_problem_message()
await ws.send_text(json.dumps(problem))
except WebSocketDisconnect:
log.info("Client disconnected")
except Exception as e:
log.error(f"Unexpected error: {e}")
finally:
if ws in clients:
clients.remove(ws)
# example loop
def generate_problem_message():
problem_solved = False
problem = {}
while not problem_solved:
problem["type"] = "generated_problem"
problem["data"] = generate_problem()
problem["data"]["steps"] = generate_steps(problem["data"]);
problem_solved = check_solution(problem["data"]["steps"][-1]["after"], problem["data"]["solution"])
if not problem_solved:
log.warning(f"issue with problem: {problem}")
return problem
def check_solution(got, solution): def check_solution(got, solution):
values = set([sympify(r.split("=")[1].strip()) for r in got.split(",")]) values = set([sympify(r.split("=")[1].strip()) for r in got.split(",")])
@@ -54,7 +93,3 @@ def is_iterable(obj):
return True return True
except TypeError: except TypeError:
return False return False
#Starts the program
if __name__ == "__main__":
main()

1
www/data/data.json
View File

@@ -1 +0,0 @@
{"type": "two_sides", "problem": "-4*x - 3 = x + 32", "solution": -7, "steps": [{"before": "-4*x - 3 = x + 32", "after": "-5*x - 3 = 32", "step": "Subtract x from both sides", "rule": "Subtraction Property of Equality"}, {"before": "-5*x - 3 = 32", "after": "-5*x = 35", "step": "Add 3 to both sides", "rule": "Addition Property of Equality"}, {"before": "-5*x = 35", "after": "x = -7", "step": "Divide both sides by -5", "rule": "Division Property of Equality"}]}

7
www/overlay.html
View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="style/styles.css">
</head> </head>
<body> <body>
<canvas id="waveCanvas"></canvas> <canvas id="waveCanvas"></canvas>
@@ -10,7 +10,8 @@
<div id="problem">Loading...</div> <div id="problem">Loading...</div>
<div id="steps"></div> <div id="steps"></div>
<script src="background.js"></script> <script src="scripts/background.js"></script>
<script src="problem.js"></script> <script src="scripts/problem.js"></script>
<script src="scripts/web_sockets.js"></script>
</body> </body>
</html> </html>

79
www/problem.js
View File

@@ -1,79 +0,0 @@
let state = "problem"; // problem | steps | done
let stepIndex = 0;
let currentData = null;
// Load the data to draw
async function loadData() {
const res = await fetch("data/data.json");
currentData = await res.json();
state = "problem";
stepIndex = 0;
render();
}
function render() {
if (!currentData) return;
const problemEl = document.getElementById("problem");
const stepsEl = document.getElementById("steps");
if (state === "problem") {
problemEl.innerHTML = `\\(${currentData.problem}\\)`;
stepsEl.innerHTML = "";
}
if (state === "step") {
problemEl.innerHTML = `\\(${currentData.problem}\\)`;
let html = "";
for (let i = 0; i <= stepIndex; i++) {
const s = currentData.steps[i];
html += `
<div class="step">
<div>\\(${s.before}\\)</div>
<div>${s.step}</div>
<div>\\(${s.after}\\)</div>
</div>
<hr/>
`;
}
stepsEl.innerHTML = html;
}
MathJax.typesetPromise();
}
function startSequence() {
// 1. show problem
state = "problem";
render();
setTimeout(() => {
state = "step";
stepIndex = 0;
render();
let interval = setInterval(() => {
stepIndex++;
render();
if (stepIndex >= currentData.steps.length - 1) {
clearInterval(interval);
setTimeout(() => {
loadData(); // next problem
}, 3000);
}
}, 2000); // time between steps
}, 4000); // thinking time before reveal
}
loadData().then(() => {
startSequence();
});

0
www/background.js → www/scripts/background.js
View File

50
www/scripts/problem.js Normal file
View File

@@ -0,0 +1,50 @@
let state = "problem"; // problem | steps | done
function showProblem() {
const problemEl = document.getElementById("problem");
const stepsEl = document.getElementById("steps");
problemEl.innerHTML = `\\(${problemData.problem}\\)`;
stepsEl.innerHTML = "";
MathJax.typesetPromise();
}
function startSequence() {
setTimeout(() => {
showNextStep();
}, 3000); // thinking time
}
function showNextStep() {
const stepsEl = document.getElementById("steps");
if (stepIndex >= problemData.steps.length) {
// finished → request next problem
setTimeout(() => {
requestNextProblem();
}, 3000);
return;
}
const s = problemData.steps[stepIndex];
const html = `
<div class="step">
<div>\\(${s.before}\\)</div>
<div>${s.step}</div>
<div>\\(${s.after}\\)</div>
</div>
<hr/>
`;
stepsEl.innerHTML += html;
MathJax.typesetPromise();
stepIndex++;
setTimeout(showNextStep, 2000); // time between steps
}

31
www/scripts/web_sockets.js Normal file
View File

@@ -0,0 +1,31 @@
const socket = new WebSocket("ws://localhost:8000/ws");
let problemData = null;
let stepIndex = 0;
socket.onopen = () => {
console.log("Connected to server");
socket.send(JSON.stringify({
type: "query_problem"
}));
};
socket.onmessage = (event) => {
const msg = JSON.parse(event.data);
if (msg.type === "generated_problem") {
problemData = msg.data;
stepIndex = 0;
showProblem();
// start animation sequence
startSequence();
}
};
function requestNextProblem() {
socket.send(JSON.stringify({
type: "query_problem"
}));
}

0
www/styles.css → www/style/styles.css
View File