show markdown solutions

Author: austinvhuang

experimental/fasthtml/gpu_puzzles/client.js

@@ -9,6 +9,7 @@ const State = {
   isDispatchReady: true, // don't allow multiple overlapping dispatches
   puzzleIndex: 0,
   wgslStatus: "",
+  showSolution: false,
 };
 
 codeState = [];
@@ -122,7 +123,6 @@ function initializeEditor() {
   });
   AppState.editor.setKeyboardHandler("ace/keyboard/vim");
   // AppState.editor.setValue(initialContent || "");
-  console.log("Initial content:\n", initialContent);
   console.log("Editor initialized");
 }
 
@@ -151,6 +151,9 @@ function setupEventListeners() {
   document.getElementById("next").addEventListener("click", () => {
     update({ type: "selectPuzzle", value: "next" });
   });
+  document.getElementById("solution").addEventListener("click", () => {
+    update({ type: "clickedSolution" });
+  });
 }
 
 ////////////////////////////////////////
@@ -271,8 +274,15 @@ async function update(event) {
     } else {
       AppState.editor.setValue(AppState.module.getTemplate(AppState.puzzleIndex));
     }
+    // reset showSolution when starting a new puzzle
+    AppState.showSolution = false;
+  }
+  if (event.type === "clickedSolution") {
+    AppState.showSolution = !AppState.showSolution;
+    console.log("showSolution: ", AppState.showSolution);
   }
 
+
   updateEditor();
   render();
 }
@@ -286,7 +296,7 @@ function render() {
   console.log("AppState.checkAnswer: ", AppState.checkAnswer);
   document.getElementById("correct").textContent = AppState.checkAnswer
     ? "Tests passed!"
-    : "Some tests failed.";
+    : "Some tests failed."
   if (AppState.checkAnswer) {
     document.getElementById("correct").style.color = "LimeGreen";
     document.getElementById("correct").style.fontWeight = "bold";
@@ -301,4 +311,14 @@ function render() {
     PuzzleSpec[AppState.puzzleIndex].name;
   document.getElementById("puzzle_description").textContent =
     PuzzleSpec[AppState.puzzleIndex].description;
+  if (AppState.showSolution) {
+    document.getElementById("output").style.display = "none";
+    // use puzzleIndex to get markdown
+    document.getElementById("writeup").innerHTML = "<zero-md src=\"/assets/markdown/puzzle" + (AppState.puzzleIndex + 1) + ".md\"></zero-md>";
+    console.log("writeup: ", document.getElementById("writeup").innerHTML);
+    document.getElementById("writeup").style.display = "block";
+  } else {
+    document.getElementById("output").style.display = "block";
+    document.getElementById("writeup").style.display = "none";
+  }
 }

experimental/fasthtml/gpu_puzzles/evaluator.h

@@ -1091,8 +1091,6 @@ bool evaluate(Context &ctx, const std::string &kernelCode, int puzzleIndex) {
                     "Number of Workgroups    (%s %s %s)\n\033[0m\n\r",
                     reset, toString(testCase.gridSize).c_str(), grey);
 
-    // wprintf("%s", buf);
-
     char titleBuf[kBufSize];
     if (testCase.nInputs > 1) {
       for (size_t inp = 0; inp < testCase.nInputs; ++inp) {
@@ -1111,16 +1109,13 @@ bool evaluate(Context &ctx, const std::string &kernelCode, int puzzleIndex) {
     }
     ptr += snprintf(buf + ptr, kBufSize, "\n");
     if (compilePassed) {
-      // wprintf("");
       snprintf(titleBuf, sizeof(titleBuf), "%sGot      %s", successColor, reset);
       printVecBuf(output, titleBuf, buf, ptr);
-      // wprintf("");
     }
 
     snprintf(titleBuf, sizeof(titleBuf), "%sExpected %s", successColor, reset);
     printVecBuf(testCase.expectedOutput, titleBuf, buf, ptr);
     wprintf("%s", buf);
-    // wprintf("");
   }
 
   return allPassed;

experimental/fasthtml/gpu_puzzles/run.py

@@ -76,6 +76,7 @@ def init_app() -> str:
     Link(rel="stylesheet", href="https://unpkg.com/tippy.js@6/dist/tippy.css"),
     Script(src="https://unpkg.com/@popperjs/core@2"),
     Script(src="https://unpkg.com/tippy.js@6"),
+    Script(src="https://cdn.jsdelivr.net/npm/zero-md@2.2", type="module"),
     Script(src="/client.js"),
     Script(init_app()),
     *Socials(
@@ -108,6 +109,13 @@ async def serve_js():
 async def serve_wasm():
     return FileResponse(f"build/run.wasm")
 
+@app.get("/assets/markdown/{fname:path}.md")
+async def serve_writeups(fname: str):
+    return FileResponse(f"assets/markdown/{fname}.md")
+
+@app.get("/assets/images/{fname:path}.png")
+async def serve_images(fname: str):
+    return FileResponse(f"assets/images/{fname}.png")
 
 def output():
     correctHeight = 27
@@ -121,7 +129,9 @@ def output():
             button("Solution", "solution"),
             style=f"width: 49vw; height:{correctHeight / 3 * 2}vh; float: right; font-size: 2rem; text-align: center; align-items: center; justify-content: center; margin-top: {correctHeight / 3}vh;",
         ),
-        Div(id="output", style=f"width: 49vw; height:{outputHeight}vh; float: right;"),
+        Div(id="output", cls="overlay", style=f"width: 49vw; height:{outputHeight}vh; float: right;"),
+        Div("", id="writeup", cls="overlay hidden", style=f"width: 49vw; height: {outputHeight}vh; float: right; background-color: white; padding: 2rem; overflow-y: scroll;"),
+
     )