COS-130 - feat: WASM support and yew example app

Sortium-io · Dec 19, 2022 · 858a2d4 · 858a2d4
1 parent fd6feef
commit 858a2d4
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 1 deletion.
diff --git a/Cargo.toml b/Cargo.toml
@@ -11,8 +11,13 @@ image = "0.24.5"
 reqwest = { version = "0.11.13", features = ["json"] }
 serde = { version = "1.0.151", features = ["derive"] }
 serde_json = "1.0.89"
+
+[target.'cfg(any(target_arch = "x86_64", target_arch = "aarch64"))'.dependencies]
 tokio = { version = "1.23.0", features = ["full"] }
 
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen = "0.2.83"
+
 [[example]]
 name = "clap-text"
 path = "examples/clap/text2img.rs"
@@ -35,4 +40,4 @@ keywords = ["stable", "diffusion", "api", "client", "clap"]
 
 [dev-dependencies]
 clap = { version = "4.0.29", features = ["derive"] }
-dotenv = "0.15.0"
+dotenv = "0.15.0"
diff --git a/examples/yew-app/.env.example b/examples/yew-app/.env.example
@@ -0,0 +1 @@
+SD_API_URL=https://example.com/api
diff --git a/examples/yew-app/.gitignore b/examples/yew-app/.gitignore
@@ -0,0 +1,3 @@
+target/
+Cargo.lock
+dist/
diff --git a/examples/yew-app/Cargo.toml b/examples/yew-app/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "yew-app"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+yew = { version = "0.20.0", features = ["csr"] }
+sd_client = { path = "../../" }
+wasm-bindgen-futures = "0.4.33"
+wasm-bindgen = { version = "0.2.83", features = ["serde-serialize"] }
+web-sys = { version = "0.3.60" }
+dotenv = "0.15.0"
+load-dotenv = "0.1.2"
diff --git a/examples/yew-app/index.html b/examples/yew-app/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Yew App</title>
+    </head>
+</html>
diff --git a/examples/yew-app/src/main.rs b/examples/yew-app/src/main.rs
@@ -0,0 +1,54 @@
+use yew::prelude::*;
+use sd_client::stable_diffusion::{    
+    StableDiffusionClient, StableDiffusionParameters,
+};
+use wasm_bindgen_futures::spawn_local;
+use web_sys::console;
+use load_dotenv::load_dotenv;
+
+load_dotenv!();
+
+pub async fn call_sd() -> String {
+
+    let sd_api_url = std::env!("SD_API_URL").to_string();
+
+    let params = StableDiffusionParameters {
+        prompt: Some("A prompt".to_string()),
+        steps: Some(50),
+        ..Default::default()
+    };
+
+    let sd_api = StableDiffusionClient::new(sd_api_url);
+
+    match sd_api.text2img(params).await {
+        Ok(res) => {
+            res.images[0].clone()
+        }
+        Err(err) => {
+            err.to_string().into()
+        }
+    }
+}
+
+#[function_component]
+fn App() -> Html {
+
+    let app_title: String = "Yew Example".into();
+
+    // Spawn a task to call the SD API
+    // This is needed to call async api in a wasm context
+    spawn_local(async {
+        let res = call_sd().await;
+        console::log_1(&res.into());
+    });
+
+    html! {
+        <div>
+            <p>{ &app_title }</p>
+        </div>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}