update example

Author: ifsheldon

examples/openai-web-app/.gitignore renamed to examples/openai-web-app-chat/.gitignore

@@ -1,15 +1,15 @@
 [package]
-name = "openai-web-app"
+name = "openai-web-app-chat"
 version = "0.1.0"
 edition = "2021"
 publish = false
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = "~0.4"
-dioxus-web = "~0.4"
-futures = "0.3.28"
+dioxus = {version = "~0.5", features = ["web"]}
+futures = "0.3.30"
 async-openai-wasm = { path = "../../async-openai-wasm" }
-console_log = "1.0"
-log = "0.4"
+# Debug
+tracing = "0.1.40"
+dioxus-logger = "~0.5"

examples/openai-web-app/Cargo.toml renamed to examples/openai-web-app-chat/Cargo.toml

@@ -0,0 +1,40 @@
+[application]
+
+# App (Project) Name
+name = "openai-web-app-chat-dioxus"
+
+# Dioxus App Default Platform
+# desktop, web
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+[web.app]
+
+# HTML title tag content
+title = "openai-web-app-chat-dioxus"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+
+style = []
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

examples/openai-web-app-chat/Dioxus.toml

@@ -0,0 +1,10 @@
+# OpenAI Web App - Chat
+
+This builds a `dioxus` web App that uses OpenAI ChatCompletion APIs to generate text.
+
+To run it, you need:
+1. Set OpenAI secrets in `./src/main.rs`. Please do NOT take this demo into production without using a secure secret store
+2. Install `dioxus-cli` by `cargo install dioxus-cli`.
+3. Run `dx serve`
+
+Note: Safari may not work due to CORS issues. Please use Chrome or Edge.

examples/openai-web-app-chat/README.md

@@ -0,0 +1,68 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+use dioxus_logger::tracing::{Level, info, error};
+use futures::stream::StreamExt;
+use async_openai_wasm::Client;
+use async_openai_wasm::config::OpenAIConfig;
+use async_openai_wasm::types::{ChatCompletionRequestMessage, ChatCompletionRequestUserMessageArgs, CreateChatCompletionRequestArgs};
+
+
+const API_BASE: &str = "...";
+const API_KEY: &str = "...";
+
+pub fn App() -> Element {
+    const GREETING: &str = "Hello! How are you?";
+    let request = CreateChatCompletionRequestArgs::default()
+        .max_tokens(512u16)
+        .model("gpt-3.5-turbo")
+        .messages([
+            ChatCompletionRequestMessage::User(
+                ChatCompletionRequestUserMessageArgs::default()
+                    .content(GREETING)
+                    .build()
+                    .unwrap()
+            )
+        ])
+        .build().unwrap();
+    let response_string = use_signal(String::new);
+    let _fetch_completion_chunks: Coroutine<()> = use_coroutine(|_rx| {
+        let mut response_string = response_string.to_owned();
+        async move {
+            let config = OpenAIConfig::new()
+                .with_api_key(API_KEY);
+            let config = if API_BASE != "..." {
+                config.with_api_base(API_BASE)
+            } else {
+                config
+            };
+            let client = Client::with_config(config);
+            let mut stream = client.chat().create_stream(request).await.unwrap();
+            while let Some(chunk) = stream.next().await {
+                match chunk {
+                    Ok(response) =>
+                        response_string.with_mut(|string| {
+                            if let Some(content) = response.choices[0].delta.content.as_ref() {
+                                info!("Response chunk: {:?}", content);
+                                string.push_str(content);
+                            }
+                        }),
+                    Err(e) => error!("OpenAI Error: {:?}", e)
+                }
+            }
+        }
+    });
+
+    rsx! {
+        div {
+            p { "Using OpenAI" }
+            p { "User: {GREETING}" }
+            p { "Assistant: {response_string}" }
+        }
+    }
+}
+
+fn main() {
+    dioxus_logger::init(Level::INFO).expect("failed to init logger");
+    launch(App);
+}