feat(web): add solver output

Cargo.lock

@@ -476,6 +476,7 @@ dependencies = [
  "derive_more",
  "getrandom",
  "indicatif",
+ "js-sys",
  "rand",
  "rayon",
  "tabular",

Cargo.toml

@@ -24,6 +24,7 @@ colored = "3.1.1"
 derive_more = { version = "2.1.1", features = [ "debug", "display" ] }
 getrandom = { version = "0.4.3", optional = true }
 indicatif = { version = "0.18.6", features = ["rayon"] }
+js-sys = { version = "0.3.104", optional = true }
 rand = "0.10.2"
 rayon = "1.12.0"
 tabular = { version = "0.2.0", features = ["ansi-cell"] }
@@ -31,4 +32,4 @@ wasm-bindgen = { version = "0.2.127", optional = true }
 
 [features]
 default = []
-wasm-bindgen = ["dep:wasm-bindgen", "getrandom/wasm_js"]
+wasm-bindgen = ["dep:wasm-bindgen", "getrandom/wasm_js", "dep:js-sys"]

src/lib/solver.rs

@@ -151,6 +151,31 @@ impl Solver {
         SolverJob { receiver: rc }
     }
 
+    pub fn evaluate_all_words_cb<F>(&self, progress: F) -> Result<Vec<WordStats>, String>
+    where
+        F: Fn(usize, usize) + Send + Sync + 'static,
+    {
+        let mut completed = 0;
+        let mut result = self
+            .valid_words
+            .words()
+            .map(|w| {
+                let r = self.evaluate_word(w);
+                completed += 1;
+                progress(completed, self.valid_words.len());
+                r
+            })
+            .collect::<Result<Vec<WordStats>, String>>();
+
+        if let Ok(result) = &mut result {
+            result.sort_by(|a, b| {
+                a.expected_score_after_guess
+                    .total_cmp(&b.expected_score_after_guess)
+            });
+        }
+        result
+    }
+
     pub fn evaluate_all_words(&mut self) -> Result<Vec<WordStats>, String> {
         let mut best_words: Vec<WordStats> = self
             .valid_words

src/lib/wasm.rs

@@ -21,6 +21,30 @@ pub enum Color {
     GREEN,
 }
 
+#[wasm_bindgen]
+pub struct WordStats(solver::WordStats);
+
+#[allow(dead_code)]
+#[wasm_bindgen]
+impl WordStats {
+    #[wasm_bindgen(getter)]
+    pub fn word(&self) -> String {
+        self.0.word.clone()
+    }
+    #[wasm_bindgen(getter)]
+    pub fn solution_probability(&self) -> f64 {
+        self.0.solution_probability
+    }
+    #[wasm_bindgen(getter)]
+    pub fn expected_information_gained(&self) -> f64 {
+        self.0.expected_information_gained
+    }
+    #[wasm_bindgen(getter)]
+    pub fn expected_score_after_guess(&self) -> f64 {
+        self.0.expected_score_after_guess
+    }
+}
+
 #[allow(dead_code)]
 #[wasm_bindgen]
 impl Solver {
@@ -50,6 +74,22 @@ impl Solver {
         Ok(())
     }
 
+    pub fn evaluate_words(
+        &self,
+        n: u32,
+        progress: js_sys::Function,
+    ) -> Result<Vec<WordStats>, String> {
+        Ok(self
+            .0
+            .evaluate_all_words_cb(move |i, n| {
+                let _ = progress.call2(&JsValue::NULL, &JsValue::from(i), &JsValue::from(n));
+            })?
+            .into_iter()
+            .take(n as usize)
+            .map(|ws| WordStats(ws))
+            .collect())
+    }
+
     pub fn guess_infos(&self) -> Vec<f64> {
         self.0
             .guesses()

web/src/App.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
     import { Color } from "wordle-solver";
     import WordleLine from "./components/WordleLine.svelte";
-    import { solver_guess, solver_solution_space } from "./solver/solver.ts";
+    import {
-    import type { GuessResult, SolutionSpaceResult } from "./solver/types.ts";
+        solver_evaluate_words,
+        solver_guess,
+        solver_solution_space,
+    } from "./solver/solver.ts";
+    import type {
+        GuessResult,
+        SolutionSpaceResult,
+        EvaluateWordsResult,
+        EvaluateWordsProgress,
+    } from "./solver/types.ts";
+    import SolverOutput from "./components/SolverOutput.svelte";
 
     let guesses = $state([
         {
@@ -26,10 +36,17 @@
         solution_space = solver_solution_space();
     }, 300);
 
+    let best_words: Promise<EvaluateWordsResult> | null = $state(null);
+    let best_words_progress: EvaluateWordsProgress | null = $state(null);
+
     let cursor = $state(0);
 
     function handleKey(event: KeyboardEvent) {
-        if (event.key === "Enter") {
+        if (event.key === "Enter" && event.shiftKey) {
+            best_words = solver_evaluate_words(5, (p) => {
+                best_words_progress = p;
+            });
+        } else if (event.key === "Enter") {
             const guess = guesses[guesses.length - 1];
 
             if (guess.letters.join("").length != 5) {
@@ -62,7 +79,7 @@
 <svelte:window onkeydown={handleKey} />
 
 <div
-    class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center"
+    class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center gap-8"
 >
     <div class="text-center">
         <h1 class="mb-6 text-3xl font-bold">Wordle Solver</h1>
@@ -77,7 +94,7 @@
             {/await}
         </p>
 
-        <div class="mt-4 flex flex-col gap-2">
+        <div class="ml-16 mt-4 flex flex-col gap-2">
             {#each guesses as g, i (g)}
                 <WordleLine
                     active={i === guesses.length - 1}
@@ -89,9 +106,12 @@
             {/each}
         </div>
 
-        <p class="mt-4 text-sm text-zinc-500">
+        <p class="mt-4 text-sm text-zinc-500 mx-auto w-1/2">
             Type letters · ← → navigate · Space cycle color · Backspace delete ·
-            Enter apply
+            Enter apply · Shift+Enter solve
         </p>
     </div>
+    {#if best_words}
+        <SolverOutput data={best_words} progress={best_words_progress} />
+    {/if}
 </div>

web/src/components/SolverOutput.svelte

@@ -1,2 +1,59 @@
 <script lang="ts">
+    import type {
+        EvaluateWordsProgress,
+        EvaluateWordsResult,
+    } from "../solver/types";
+
+    let {
+        data,
+        progress = null,
+    }: {
+        data: Promise<EvaluateWordsResult>;
+        progress: EvaluateWordsProgress | null;
+    } = $props();
 </script>
+
+{#await data}
+    <div class="flex items-center justify-center gap-2 p-6 text-gray-600">
+        Solving...
+        {#if progress}
+            <span class="text-sm">
+                {progress.i} / {progress.n}
+            </span>
+        {/if}
+    </div>
+{:then d}
+    <div class="overflow-x-auto rounded-lg border border-gray-500 shadow-sm">
+        <table class="w-full text-left text-sm text-gray-700">
+            <thead class="bg-gray-800 text-xs uppercase text-gray-600">
+                <tr>
+                    <th class="px-4 py-3">Word</th>
+                    <th class="px-4 py-3">p[solution]</th>
+                    <th class="px-4 py-3">E[Inf.]</th>
+                    <th class="px-4 py-3">E[Score]</th>
+                </tr>
+            </thead>
+
+            <tbody class="divide-y divide-gray-500">
+                {#each d.stats as s}
+                    <tr class="transition-colors hover:bg-gray-50">
+                        <td class="px-4 py-3 font-bold">{s.word}</td>
+                        <td class="px-4 py-3"
+                            >{s.solution_probability.toFixed(3)}</td
+                        >
+                        <td class="px-4 py-3"
+                            >{s.expected_information_gained.toFixed(3)}</td
+                        >
+                        <td class="px-4 py-3"
+                            >{s.expected_score_after_guess.toFixed(3)}</td
+                        >
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+{:catch e}
+    <div class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
+        {e}
+    </div>
+{/await}

web/src/solver/solver.ts

@@ -1,6 +1,6 @@
 import type { Color } from "wordle-solver";
 import SolverWorker from "./worker?worker";
-import type { GuessResult, SolutionSpaceResult, SolverRequest, SolverResponse } from "./types";
+import type { GuessResult, SolutionSpaceResult, EvaluateWordsResult, SolverRequest, SolverResponse, EvaluateWordsProgress } from "./types";
 
 let solver_worker = new SolverWorker();
 
@@ -11,6 +11,8 @@ const pending = new Map<number, {
   reject: (error: unknown) => void;
 }>();
 
+const progresses = new Map<number, (p: EvaluateWordsProgress) => void>();
+
 export function solver_guess(word: string[], colors: Color[]): Promise<GuessResult> {
   const id = msg_id++;
 
@@ -29,7 +31,7 @@ export function solver_guess(word: string[], colors: Color[]): Promise<GuessResu
 
 export function solver_solution_space(): Promise<SolutionSpaceResult> {
   const id = msg_id++;
-  
+
   return new Promise((resolve, reject) => {
     pending.set(id, { resolve, reject });
 
@@ -43,9 +45,40 @@ export function solver_solution_space(): Promise<SolutionSpaceResult> {
   });
 }
 
+export function solver_evaluate_words(n: number, progress: ((p: EvaluateWordsProgress) => void) | null): Promise<EvaluateWordsResult> {
+  const id = msg_id++;
+  
+  if (progress) {
+    progresses.set(id, progress);
+  }
+  
+  return new Promise((resolve, reject) => {
+    pending.set(id, { resolve, reject });
+
+    const r: SolverRequest = {
+      type: "evaluate_words",
+      id: id,
+      input: { n },
+    };
+
+    solver_worker.postMessage(JSON.parse(JSON.stringify(r)));
+  });
+}
+
 
 solver_worker.onmessage = (event: MessageEvent<SolverResponse>) => {
   let res = event.data;
+  
+  if (res.type == "evaluate_words_progress") {
+    let progress = progresses.get(res.id);
+    
+    if (progress) {
+      progress(res.result);
+    }
+
+    return;
+  }
+
   const pendingRequest = pending.get(res.id);
 
   if (!pendingRequest) {
@@ -53,6 +86,7 @@ solver_worker.onmessage = (event: MessageEvent<SolverResponse>) => {
   }
 
   pending.delete(res.id);
+  progresses.delete(res.id);
 
   if (res.error) {
     pendingRequest.reject(res.error);

web/src/solver/types.ts

@@ -30,6 +30,11 @@ export type SolverResponse =
     error: string | null,
     result: EvaluateWordsResult | null
   }
+  | {
+    type: "evaluate_words_progress",
+    id: number,
+    result: EvaluateWordsProgress
+  }
   | {
     type: "solution_space",
     id: number,
@@ -47,8 +52,15 @@ export type GuessResult = {
 export type EvaluateWords = {
   n: number,
 };
+export type EvaluateWordsProgress = {
+  i: number,
+  n: number
+};
 export type WordStats = {
   word: string,
+  solution_probability: number,
+  expected_information_gained: number,
+  expected_score_after_guess: number
 };
 export type EvaluateWordsResult = {
   stats: WordStats[]

web/src/solver/worker.ts

@@ -1,5 +1,5 @@
-import { Solver } from "wordle-solver";
+import { Solver, } from "wordle-solver";
-import type { SolverRequest, SolverResponse } from "./types";
+import type { EvaluateWordsProgress, SolverRequest, SolverResponse, WordStats } from "./types";
 
 let solver = Solver.new();
 
@@ -19,9 +19,7 @@ self.onmessage = (event: MessageEvent<SolverRequest>) => {
           result: { info_gained: infos[infos.length - 1] }
         };
 
-        self.setTimeout(() => {
+        self.postMessage(JSON.parse(JSON.stringify(response)));
-          self.postMessage(JSON.parse(JSON.stringify(response)));
-        }, 1000);
       } catch (e) {
         const response: SolverResponse = {
           type: "guess",
@@ -30,23 +28,48 @@ self.onmessage = (event: MessageEvent<SolverRequest>) => {
           result: null,
         };
 
-        self.setTimeout(() => {
+        self.postMessage(JSON.parse(JSON.stringify(response)));
-          self.postMessage(JSON.parse(JSON.stringify(response)));
-        }, 1000);
       }
 
 
       break;
     };
     case "evaluate_words": {
-      const response: SolverResponse = {
+      try {
-        type: "evaluate_words",
+        let stats = solver.evaluate_words(request.input.n, (i: number, n: number) => {
-        id: request.id,
+          let p: SolverResponse = {
-        error: "not implemented",
+            type: "evaluate_words_progress",
-        result: null,
+            id: request.id,
-      };
+            result: { i, n }
+          };
+          self.postMessage(JSON.parse(JSON.stringify(p)));
+        }).map((ws): WordStats => {
+          return {
+            word: ws.word,
+            solution_probability: ws.solution_probability,
+            expected_information_gained: ws.expected_information_gained,
+            expected_score_after_guess: ws.expected_score_after_guess
+          };
+        });
+        const response: SolverResponse = {
+          type: "evaluate_words",
+          id: request.id,
+          error: null,
+          result: { stats },
+        };
+
+        self.postMessage(JSON.parse(JSON.stringify(response)));
+      } catch (e) {
+        const response: SolverResponse = {
+          type: "evaluate_words",
+          id: request.id,
+          error: e,
+          result: null,
+        };
+
+        self.postMessage(JSON.parse(JSON.stringify(response)));
+      }
 
-      self.postMessage(JSON.parse(JSON.stringify(response)));
       break;
     };
     case "solution_space": {