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()
@@ -58,8 +98,8 @@ impl Solver {
             .collect()
     }
 
-    pub fn solution_space(&self) -> u64 {
+    pub fn solution_space(&self) -> u32 {
-        self.0.stats().0
+        self.0.stats().0 as u32
     }
 
     pub fn solution_space_uncertainty(&self) -> f64 {

web/src/App.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
     import { Color } from "wordle-solver";
     import WordleLine from "./components/WordleLine.svelte";
-    import { solver_guess } from "./solver/solver.ts";
+    import {
+        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([
         {
@@ -16,12 +27,26 @@
         },
     ]);
 
-    let infos_gained: (Promise<number> | null)[] = $state([null]);
+    let infos_gained: (Promise<GuessResult> | null)[] = $state([null]);
+
+    let solution_space: Promise<SolutionSpaceResult> = $state(
+        solver_solution_space(),
+    );
+    self.setTimeout(() => {
+        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) {
@@ -33,6 +58,7 @@
                 guess.colors,
             );
             infos_gained.push(null);
+            solution_space = solver_solution_space();
 
             cursor = 0;
 
@@ -53,14 +79,22 @@
 <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>
 
-        <p class="mt-4 text-sm text-zinc-500">SolutionSpace</p>
+        <p class="mt-4 text-sm text-zinc-500">
+            {#await solution_space then s}
+                Solution-space: {s.size}, Uncertainty: {s.uncertainty.toFixed(
+                    2,
+                )}bits
+            {:catch e}
+                {e}
+            {/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}
@@ -72,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/components/WordleLine.svelte

@@ -74,7 +74,7 @@
         </div>
     {/each}
     <span
-        class="w-12 text-sm text-zinc-500 self-center flex items-center justify-center"
+        class="w-16 text-sm text-zinc-500 self-center flex items-center justify-center"
     >
         {#if info_gained === null}
             ↵
@@ -84,7 +84,7 @@
                     class="size-3 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700"
                 ></div>
             {:then i}
-                {i.toFixed(2)}
+                {i.info_gained.toFixed(2)} bits
             {:catch e}
                 <span
                     title={e}

web/src/solver/solver.ts

@@ -1,6 +1,6 @@
 import type { Color } from "wordle-solver";
 import SolverWorker from "./worker?worker";
-import type { SolverRequest, SolverResponse } from "./types";
+import type { GuessResult, SolutionSpaceResult, EvaluateWordsResult, SolverRequest, SolverResponse, EvaluateWordsProgress } from "./types";
 
 let solver_worker = new SolverWorker();
 
@@ -11,7 +11,9 @@ const pending = new Map<number, {
   reject: (error: unknown) => void;
 }>();
 
-export function solver_guess(word: string[], colors: Color[]): Promise<number> {
+const progresses = new Map<number, (p: EvaluateWordsProgress) => void>();
+
+export function solver_guess(word: string[], colors: Color[]): Promise<GuessResult> {
   const id = msg_id++;
 
   return new Promise((resolve, reject) => {
@@ -27,9 +29,56 @@ export function solver_guess(word: string[], colors: Color[]): Promise<number> {
   });
 }
 
+export function solver_solution_space(): Promise<SolutionSpaceResult> {
+  const id = msg_id++;
+
+  return new Promise((resolve, reject) => {
+    pending.set(id, { resolve, reject });
+
+    const r: SolverRequest = {
+      type: "solution_space",
+      id: id,
+      input: null,
+    };
+
+    solver_worker.postMessage(JSON.parse(JSON.stringify(r)));
+  });
+}
+
+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) {
@@ -37,12 +86,13 @@ solver_worker.onmessage = (event: MessageEvent<SolverResponse>) => {
   }
 
   pending.delete(res.id);
+  progresses.delete(res.id);
 
   if (res.error) {
-    pendingRequest.reject(res.result);
+    pendingRequest.reject(res.error);
-  } else if (res.type == "guess") {
+  } else if (res.result) {
-    pendingRequest.resolve(res.result.info_gained);
+    pendingRequest.resolve(res.result);
-  } else if (event.type == "evaluate_words") {
+  } else {
-    pendingRequest.resolve(res.result.stats);
+    pendingRequest.reject("No result");
   }
 };

web/src/solver/types.ts

@@ -10,20 +10,36 @@ export type SolverRequest =
     type: "evaluate_words",
     id: number,
     input: EvaluateWords
+  }
+  | {
+    type: "solution_space",
+    id: number,
+    input: null,
   };
 
 export type SolverResponse =
   | {
     type: "guess",
     id: number,
-    error: boolean,
+    error: string | null,
-    result: GuessResult | string
+    result: GuessResult | null
   }
   | {
     type: "evaluate_words",
     id: number,
-    error: boolean,
+    error: string | null,
-    result: EvaluateWordsResult | string
+    result: EvaluateWordsResult | null
+  }
+  | {
+    type: "evaluate_words_progress",
+    id: number,
+    result: EvaluateWordsProgress
+  }
+  | {
+    type: "solution_space",
+    id: number,
+    error: string | null,
+    result: SolutionSpaceResult | null
   };
 
 export type Guess = {
@@ -36,9 +52,20 @@ 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[]
 };
+export type SolutionSpaceResult = {
+  size: number,
+  uncertainty: number
+};

web/src/solver/worker.ts

@@ -1,6 +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();
 
@@ -16,39 +15,77 @@ self.onmessage = (event: MessageEvent<SolverRequest>) => {
         const response: SolverResponse = {
           type: "guess",
           id: request.id,
-          error: false,
+          error: null,
           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",
           id: request.id,
-          error: true,
+          error: e,
-          result: e,
+          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: true,
+            type: "evaluate_words_progress",
-        result: "Not implemented"
+            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)));
+      }
+
+      break;
+    };
+    case "solution_space": {
+      const response: SolverResponse = {
+        type: "solution_space",
+        id: request.id,
+        error: null,
+        result: {
+          size: solver.solution_space(),
+          uncertainty: solver.solution_space_uncertainty()
+        }
+      };
       self.postMessage(JSON.parse(JSON.stringify(response)));
       break;
     };
   }
 };
+
+