From 97990f4afcd4f918ade85db876f6de9e6d47803e Mon Sep 17 00:00:00 2001
From: Nicolas Patry <patry.nicolas@protonmail.com>
Date: Wed, 26 Jul 2023 14:57:20 +0200
Subject: [PATCH 1/3] Add number of tokens.

---
 candle-wasm-examples/llama2-c/src/app.rs | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/candle-wasm-examples/llama2-c/src/app.rs b/candle-wasm-examples/llama2-c/src/app.rs
index eab0aa6e..a2a6c53b 100644
--- a/candle-wasm-examples/llama2-c/src/app.rs
+++ b/candle-wasm-examples/llama2-c/src/app.rs
@@ -45,6 +45,7 @@ pub struct App {
     status: String,
     temperature: std::rc::Rc<std::cell::RefCell<f64>>,
     generated: String,
+    n_tokens: usize,
     current_decode: Option<CurrentDecode>,
     worker: Box<dyn Bridge<Worker>>,
 }
@@ -75,6 +76,7 @@ impl Component for App {
         let worker = Worker::bridge(std::rc::Rc::new(cb));
         Self {
             status,
+            n_tokens: 0,
             temperature: std::rc::Rc::new(std::cell::RefCell::new(0.)),
             generated: String::new(),
             current_decode: None,
@@ -134,11 +136,18 @@ impl Component for App {
                         });
                         self.status = match dt {
                             None => "generation succeeded!".to_string(),
-                            Some(dt) => format!("generation succeeded in {:.2}s", dt),
+                            Some(dt) => format!(
+                                "generation succeeded in {:.2}s ({:.1} ms/token)",
+                                dt,
+                                dt * 1000.0 / (self.n_tokens as f64)
+                            ),
                         };
                         self.current_decode = None
                     }
-                    Ok(WorkerOutput::Generated(token)) => self.generated.push_str(&token),
+                    Ok(WorkerOutput::Generated(token)) => {
+                        self.n_tokens += 1;
+                        self.generated.push_str(&token)
+                    }
                     Err(err) => {
                         self.status = format!("error in worker {err:?}");
                     }
@@ -147,6 +156,7 @@ impl Component for App {
             }
             Msg::WorkerInMsg(inp) => {
                 self.worker.send(inp);
+                self.n_tokens = 0;
                 true
             }
             Msg::UpdateStatus(status) => {

From 035372248e73ea5138bcae58f49904f499ba9d28 Mon Sep 17 00:00:00 2001
From: Nicolas Patry <patry.nicolas@protonmail.com>
Date: Wed, 26 Jul 2023 15:17:32 +0200
Subject: [PATCH 2/3] Simple QOL.

- Add ms/token on llama2.c (15ms/token on my personal machine)
- Hide `Run` buttons while models are not ready
- Add dummy `progress` while weights are downloading (I briefly looked
  at putting a real progressbar.. and nothing easy enough came up.)
---
 candle-wasm-examples/llama2-c/src/app.rs | 13 ++++++++++++-
 candle-wasm-examples/whisper/src/app.rs  | 12 ++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/candle-wasm-examples/llama2-c/src/app.rs b/candle-wasm-examples/llama2-c/src/app.rs
index a2a6c53b..a2307471 100644
--- a/candle-wasm-examples/llama2-c/src/app.rs
+++ b/candle-wasm-examples/llama2-c/src/app.rs
@@ -43,6 +43,7 @@ pub struct CurrentDecode {
 
 pub struct App {
     status: String,
+    loaded: bool,
     temperature: std::rc::Rc<std::cell::RefCell<f64>>,
     generated: String,
     n_tokens: usize,
@@ -81,6 +82,7 @@ impl Component for App {
             generated: String::new(),
             current_decode: None,
             worker,
+            loaded: false,
         }
     }
 
@@ -102,6 +104,7 @@ impl Component for App {
         match msg {
             Msg::SetModel(md) => {
                 self.status = "weights loaded succesfully!".to_string();
+                self.loaded = true;
                 console_log!("loaded weights");
                 self.worker.send(WorkerInput::ModelData(md));
                 true
@@ -186,7 +189,15 @@ impl Component for App {
                 </p>
                 </div>
                 {"temperature: "}<input type="range" min="0." max="1.2" step="0.1" value={self.temperature.borrow().to_string()} {oninput} id="temp"/>
-                <button class="button" onclick={ctx.link().callback(move |_| Msg::Run)}> { "run" }</button>
+
+                <br/ >
+                {
+                    if self.loaded{
+                        html!(<button class="button" onclick={ctx.link().callback(move |_| Msg::Run)}> { "run" }</button>)
+                    }else{
+                        html! { <progress id="progress-bar" aria-label="Loading weights..."></progress> }
+                    }
+                }
                 <br/ >
                 <h3>
                   {&self.status}
diff --git a/candle-wasm-examples/whisper/src/app.rs b/candle-wasm-examples/whisper/src/app.rs
index 23519ebd..03ae1d9f 100644
--- a/candle-wasm-examples/whisper/src/app.rs
+++ b/candle-wasm-examples/whisper/src/app.rs
@@ -47,6 +47,7 @@ pub struct CurrentDecode {
 
 pub struct App {
     status: String,
+    loaded: bool,
     segments: Vec<Segment>,
     current_decode: Option<CurrentDecode>,
     worker: Box<dyn Bridge<Worker>>,
@@ -86,6 +87,7 @@ impl Component for App {
             segments: vec![],
             current_decode: None,
             worker,
+            loaded: false,
         }
     }
 
@@ -107,6 +109,7 @@ impl Component for App {
         match msg {
             Msg::SetDecoder(md) => {
                 self.status = "weights loaded succesfully!".to_string();
+                self.loaded = true;
                 console_log!("loaded weights");
                 self.worker.send(WorkerInput::ModelData(md));
                 true
@@ -186,7 +189,10 @@ impl Component for App {
                 <tr>
                   <th>{name}</th>
                   <th><audio controls=true src={format!("./{name}")}></audio></th>
-                  <th><button class="button" onclick={ctx.link().callback(move |_| Msg::Run(i))}> { "run" }</button></th>
+                  { if self.loaded {
+                      html!(<th><button class="button" onclick={ctx.link().callback(move |_| Msg::Run(i))}> { "run" }</button></th>)
+                       }else{html!()}
+                  }
                 </tr>
                     }
                     }).collect::<Html>()
@@ -197,7 +203,9 @@ impl Component for App {
                   {&self.status}
                 </h2>
                 {
-                    if self.current_decode.is_some() {
+                    if !self.loaded{
+                        html! { <progress id="progress-bar" aria-label="loading weights…"></progress> }
+                    } else if self.current_decode.is_some() {
                         html! { <progress id="progress-bar" aria-label="decoding…"></progress> }
                     } else { html!{
                 <blockquote>

From 81bfa46702f35a4fca8e88b7b5402bfdbf3d8f07 Mon Sep 17 00:00:00 2001
From: Nicolas Patry <patry.nicolas@protonmail.com>
Date: Wed, 26 Jul 2023 15:21:50 +0200
Subject: [PATCH 3/3] Updated.

---
 candle-wasm-examples/llama2-c/src/app.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/candle-wasm-examples/llama2-c/src/app.rs b/candle-wasm-examples/llama2-c/src/app.rs
index a2307471..2ecd771e 100644
--- a/candle-wasm-examples/llama2-c/src/app.rs
+++ b/candle-wasm-examples/llama2-c/src/app.rs
@@ -116,6 +116,7 @@ impl Component for App {
                     let start_time = performance_now();
                     self.current_decode = Some(CurrentDecode { start_time });
                     self.status = "generating...".to_string();
+                    self.n_tokens = 0;
                     self.generated.clear();
                     let temp = *self.temperature.borrow();
                     console_log!("temp: {}", temp);
@@ -159,7 +160,6 @@ impl Component for App {
             }
             Msg::WorkerInMsg(inp) => {
                 self.worker.send(inp);
-                self.n_tokens = 0;
                 true
             }
             Msg::UpdateStatus(status) => {