+ + +

+ {move || gems() .into_iter() .map(|(id, gem)| view! { }) .collect_view()} - - -

{move || selection.get().iter().map(|id| view! { }).collect_view()} diff --git a/rust/gemcraft-leptos/src/toggle.rs b/rust/gemcraft-leptos/src/toggle.rs new file mode 100644 index 000000000..4711b8c28 --- /dev/null +++ b/rust/gemcraft-leptos/src/toggle.rs @@ -0,0 +1,18 @@ +use js_sys::Math::random; +use leptos::*; + +#[component] +pub fn ToggleContent(children: Children) -> impl IntoView { + let toggle_id = random(); + let input_id = format!("toggle-{}", toggle_id); + + view! { +

+ + +

+ {children()} +

+ } +} From 605cdb4cef4d9b75e53641445a6ecb76575c7f38 Mon Sep 17 00:00:00 2001 From: Ben Follington <5009316+bfollington@users.noreply.github.com> Date: Tue, 30 Jul 2024 17:21:15 +1000 Subject: [PATCH 11/43] Refactoring --- rust/gemcraft-leptos/Cargo.toml | 1 + rust/gemcraft-leptos/src/llm.rs | 90 +++++++++++++++++---------------- 2 files changed, 48 insertions(+), 43 deletions(-) diff --git a/rust/gemcraft-leptos/Cargo.toml b/rust/gemcraft-leptos/Cargo.toml index 9c022b722..6a243bf27 100644 --- a/rust/gemcraft-leptos/Cargo.toml +++ b/rust/gemcraft-leptos/Cargo.toml @@ -20,3 +20,4 @@ js-sys = "0.3.50" web-sys = "0.3.69" gloo-storage = "0.3.0" gloo-utils = "0.2.0" +anyhow = "1.0.71" \ No newline at end of file diff --git a/rust/gemcraft-leptos/src/llm.rs b/rust/gemcraft-leptos/src/llm.rs index a1c24e1b4..20e294f29 100644 --- a/rust/gemcraft-leptos/src/llm.rs +++ b/rust/gemcraft-leptos/src/llm.rs @@ -1,7 +1,9 @@ use leptos::*; use logging::log; +use anyhow::{Context, Error, Result}; use serde::{Deserialize, Serialize}; use serde_wasm_bindgen; +use serde_json::json; use wasm_bindgen::{JsCast, JsValue}; use wasm_bindgen_futures::JsFuture; use web_sys::{Request, RequestInit, Response}; @@ -29,11 +31,7 @@ pub struct CreateThreadRequest { pub message: String, } -pub async fn classify_data( - json: String, - description: String, -) -> Result { - let win = window(); +pub fn build_classify_request(json: String, description: String) -> Result { let mut opts = RequestInit::new(); opts.method("POST"); @@ -43,38 +41,57 @@ pub async fn classify_data( ); // set body as JSON string - let body = CreateThreadRequest { - action: String::from("create"), - system: String::from("Examine the provided raw data and context and return a brief title, it's confidentiality/sensitivity (public, shared, personal, secret), the data type and emoji to describe the data. Respond with a JSON object containing the title and emoji, e.g. ```json\n{\"title\": \"Personal Budget\", \"contentType\": \"Spreadsheet\", \"emoji\": \"💸\", \"sensitivity\": \"personal/financial\"}``` wrapped in a block e.g. ```json\n{}\n```."), - message: msg, - }; + let body = json!({ + "action": String::from("create"), + "system": String::from("Examine the provided raw data and context and return a brief title, it's confidentiality/sensitivity (public, shared, personal, secret), the data type and emoji to describe the data. Respond with a JSON object containing the title and emoji, e.g. ```json\n{\"title\": \"Personal Budget\", \"contentType\": \"Spreadsheet\", \"emoji\": \"💸\", \"sensitivity\": \"personal/financial\"}``` wrapped in a block e.g. ```json\n{}\n```."), + "message": msg, + }); let body = serde_json::to_string(&body).unwrap(); opts.body(Some(&JsValue::from_str(&body))); - let request = Request::new_with_str_and_init(LLM_URL, &opts).unwrap(); + Request::new_with_str_and_init(LLM_URL, &opts) +} + +pub async fn send_request(window: &web_sys::Window, request: Request) -> Result { + let resp = JsFuture::from(window.fetch_with_request(&request)) + .await?; + + let resp: Response = resp.dyn_into()?; - let resp_value = JsFuture::from(win.fetch_with_request(&request)) - .await - .expect("failed to fetch"); - let resp: Response = resp_value.dyn_into().unwrap(); + let json = JsFuture::from(resp.json()?) + .await?; - let json = JsFuture::from(resp.json().unwrap()) - .await - .expect("failed to get response text"); + Ok(json) +} + +pub async fn classify_data( + json: String, + description: String, +) -> Result { + let win = window(); + + let request = build_classify_request(json, description)?; + let json = send_request(&win, request).await?; let llm_response: LlmResponse = - serde_wasm_bindgen::from_value(json).map_err(|_| "Failed to deserialize JSON")?; + serde_wasm_bindgen::from_value(json) + .map_err(|_| "Failed to deserialize JSON")?; log!("Response: {:?}", llm_response); - let classification_data = extract_code_blocks_from_markdown(&llm_response.output, "json"); + let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); + let data = blocks + .first() + .ok_or("No blocks")?; + let classification_data: ClassificationData = - serde_json::from_str(&classification_data[0]).unwrap(); + serde_json::from_str(data.clone().as_str()) + .map_err(|_| "Failed to deserialize ClassificationData")?; Ok(classification_data) } -pub async fn hallucinate_data(description: String) -> Result { +pub async fn hallucinate_data(description: String) -> Result { let win = window(); let mut opts = RequestInit::new(); opts.method("POST"); @@ -92,22 +109,16 @@ pub async fn hallucinate_data(description: String) -> Result { let request = Request::new_with_str_and_init(LLM_URL, &opts).unwrap(); - let resp_value = JsFuture::from(win.fetch_with_request(&request)) - .await - .expect("failed to fetch"); - let resp: Response = resp_value.dyn_into().unwrap(); - - let json = JsFuture::from(resp.json().unwrap()) - .await - .expect("failed to get response text"); + let json = send_request(&win, request).await?; let llm_response: LlmResponse = serde_wasm_bindgen::from_value(json).map_err(|_| "Failed to deserialize JSON")?; - let data = extract_code_blocks_from_markdown(&llm_response.output, "json"); + let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); + let data = blocks + .first() + .ok_or("No blocks")?; - log!("Response: {:?}", llm_response); - - Ok(data[0].clone()) + Ok(data.clone()) } pub fn format_gem_with_classification(gem: DataGem) -> String { @@ -119,7 +130,7 @@ pub fn format_gem_with_classification(gem: DataGem) -> String { ); } -pub async fn combine_data(gems: Vec, description: String) -> Result { +pub async fn combine_data(gems: Vec, description: String) -> Result { let win = window(); let mut opts = RequestInit::new(); opts.method("POST"); @@ -137,14 +148,7 @@ pub async fn combine_data(gems: Vec, description: String) -> Result Date: Wed, 31 Jul 2024 02:55:19 +0000 Subject: [PATCH 12/43] Remove all Tailwind CSS classes from the DataGemEditor component. --- rust/gemcraft-leptos/src/gem.rs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index 7d2eb0d80..ccba5eac6 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -86,7 +86,7 @@ pub fn DataGemEditor( @@ -119,7 +118,6 @@ pub fn DataGemEditor( set_json_data.set(event_target_value(&ev)); } prop:value=json_data - class="w-full p-2 border rounded font-mono" rows="10" > From a293ecb666e83913fef2ba293c13a80747b364d4 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 31 Jul 2024 12:57:31 +1000 Subject: [PATCH 13/43] Allow customization of LLM provider per-request --- Cargo.lock | 1 + rust/gemcraft-leptos/src/llm.rs | 19 ++++++++------ rust/gemcraft-leptos/src/main.rs | 11 +++++++- rust/gemcraft-leptos/src/micro_app.rs | 3 +-- .../packages/planning-server/src/actions.ts | 20 +++++++++------ .../packages/planning-server/src/llm.ts | 21 +++++++++++++--- .../packages/planning-server/src/server.ts | 25 ++++++++++++------- 7 files changed, 68 insertions(+), 32 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 9924e5e0f..a5eb54040 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1437,6 +1437,7 @@ dependencies = [ name = "gemcraft-leptos" version = "0.1.0" dependencies = [ + "anyhow", "console_error_panic_hook", "gloo-storage", "gloo-utils", diff --git a/rust/gemcraft-leptos/src/llm.rs b/rust/gemcraft-leptos/src/llm.rs index 20e294f29..961cb7cb3 100644 --- a/rust/gemcraft-leptos/src/llm.rs +++ b/rust/gemcraft-leptos/src/llm.rs @@ -45,6 +45,7 @@ pub fn build_classify_request(json: String, description: String) -> Result Result { system: String::from("imagine realistic JSON data based on the user request, respond with only JSON wrapped in a block e.g. ```json\n{}\n```."), message: msg, }; - let body = serde_json::to_string(&body).unwrap(); + let body = serde_json::to_string(&body) + .map_err(|_| "Failed to serialize JSON")?; opts.body(Some(&JsValue::from_str(&body))); - let request = Request::new_with_str_and_init(LLM_URL, &opts).unwrap(); + let request = Request::new_with_str_and_init(LLM_URL, &opts)?; let json = send_request(&win, request).await?; @@ -130,7 +132,7 @@ pub fn format_gem_with_classification(gem: DataGem) -> String { ); } -pub async fn combine_data(gems: Vec, description: String) -> Result { +pub async fn combine_data(gems: Vec, description: String, model: String) -> Result { let win = window(); let mut opts = RequestInit::new(); opts.method("POST"); @@ -138,11 +140,12 @@ pub async fn combine_data(gems: Vec, description: String) -> Result>().join("\n\n"), description); // set body as JSON string - let body = CreateThreadRequest { - action: String::from("create"), - system: String::from("Examine the provided data gems and imagine what kind of user interface / mini-app a user would like to use to explore, manipulate and interact with the data contained within. You must utilize all provided data gems and consider how to use them TOGETHER in an app. You should create a view model based on the source data + app concept. Describe each micro-app within a tag with a small spec listing what a user can do with a loose idea of the visual components and layout. Include an emoji as the icon and the code for an

= {}; const threadManager = new InMemoryConversationThreadManager(); @@ -36,7 +36,8 @@ type ErrorResponse = { export async function handleCreateConversationThread( system: string, message: string, - activeTools: CoreTool[] + activeTools: CoreTool[], + model?: ModelName ): Promise { const cacheKey = `${system}:${message}`; @@ -49,7 +50,7 @@ export async function handleCreateConversationThread( } const thread = threadManager.create(system, message, activeTools); - const result = await processConversationThread(thread); + const result = await processConversationThread(thread, model); if (result.type === "error") { throw new Error(result.error); } @@ -65,7 +66,8 @@ export async function handleCreateConversationThread( export async function handleAppendToConversationThread( threadId: string, - message?: string + message?: string, + model?: ModelName ): Promise { const thread = threadManager.get(threadId); if (!thread) { @@ -81,7 +83,7 @@ export async function handleAppendToConversationThread( ]); } - const result = await processConversationThread(thread); + const result = await processConversationThread(thread, model); if (result.type === "error") { return result; } @@ -105,14 +107,16 @@ type ProcessConversationThreadResult = | { type: "error"; error: string }; async function processConversationThread( - thread: ConversationThread + thread: ConversationThread, + model?: ModelName ): Promise { - console.log("Thread", thread); + console.log("Process thread", thread.id, model); const result = await ask( thread.conversation, thread.system, - thread.activeTools + thread.activeTools, + model ); if (!result) { return { type: "error", error: "No response from Anthropic" }; diff --git a/typescript/packages/planning-server/src/llm.ts b/typescript/packages/planning-server/src/llm.ts index 73094585e..82283b50d 100644 --- a/typescript/packages/planning-server/src/llm.ts +++ b/typescript/packages/planning-server/src/llm.ts @@ -3,14 +3,25 @@ import { CoreMessage } from "npm:ai"; import { CoreTool } from "npm:ai"; const { generateText, streamText } = ai; -export const OPUS = "claude-3-5-opus-20240307"; +export const OPUS = "claude-3-opus-20240229"; export const HAIKU = "claude-3-haiku-20240307"; export const SONNET = "claude-3-5-sonnet-20240620"; export const LLAMA_3_1_405B = "llama3-405b-instruct-maas"; export const GPT4O_MINI = "gpt-4o-mini"; +export const GPT4O = "gpt-4o"; -const model = anthropic(SONNET); +const models = { + [OPUS]: anthropic(OPUS), + [HAIKU]: anthropic(HAIKU), + [SONNET]: anthropic(SONNET), + [LLAMA_3_1_405B]: vertex(LLAMA_3_1_405B), + [GPT4O_MINI]: openai(GPT4O_MINI), + [GPT4O]: openai(GPT4O), +}; +const model = models[SONNET]; + +export type ModelName = keyof typeof models; type Model = typeof model; const MAX_TOKENS = 4096; @@ -33,14 +44,16 @@ export async function single(text: string, model: Model) { export async function ask( initialConversation: CoreMessage[] = [], systemPrompt: string = "", - activeTools: CoreTool[] + activeTools: CoreTool[], + modelOverride?: ModelName ) { const conversation: CoreMessage[] = [...initialConversation]; let running = true; while (running) { + console.log(`Asking ${modelOverride}...`); const { textStream, finishReason } = await streamText({ - model, + model: modelOverride ? models[modelOverride] : model, system: systemPrompt, messages: conversation, }); diff --git a/typescript/packages/planning-server/src/server.ts b/typescript/packages/planning-server/src/server.ts index 29712b544..294756599 100644 --- a/typescript/packages/planning-server/src/server.ts +++ b/typescript/packages/planning-server/src/server.ts @@ -5,18 +5,21 @@ import { handleAppendToConversationThread, handleCreateConversationThread, } from "./actions.ts"; +import { ModelName } from "./llm.ts"; type CreateConversationThreadRequest = { action: "create"; message: string; system: string; activeTools: CoreTool[]; + model?: ModelName; }; type AppendToConversationThreadRequest = { action: "append"; threadId: string; - message?: string; + message: string; + model?: ModelName; }; type ConversationThreadRequest = @@ -30,15 +33,14 @@ export async function start() { // make sure to initialize oakCors before the routers app.use( oakCors({ - origin: "http://localhost:8080", + origin: "http://localhost:8081", optionsSuccessStatus: 200, methods: "POST, OPTIONS", }) ); const router = new Router(); - - router.post("/", async (context) => { + const handler = async (context) => { const request = context.request; if (request.method === "POST") { try { @@ -47,21 +49,23 @@ export async function start() { switch (action) { case "create": { - const { message, system, activeTools } = body; + const { message, system, activeTools, model } = body; const result = await handleCreateConversationThread( system, message, - activeTools + activeTools, + model ); context.response.status = 200; context.response.body = result; break; } case "append": { - const { threadId, message } = body; + const { threadId, message, model } = body; const result = await handleAppendToConversationThread( threadId, - message + message, + model ); context.response.status = 200; context.response.body = result; @@ -79,7 +83,10 @@ export async function start() { context.response.status = 405; context.response.body = { error: "Method not allowed" }; } - }); + }; + + router.post("/", handler); + router.post("/api/v0/llm", handler); app.use(router.routes()); app.use(router.allowedMethods()); From 44d05d91f608906d25294ede2bc7b7b0edb44965 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Wed, 31 Jul 2024 02:59:16 +0000 Subject: [PATCH 14/43] Move CSS rules from micro_app.rs to the style tag in index.html. --- rust/gemcraft-leptos/index.html | 27 ++++++++++++++++++++++ rust/gemcraft-leptos/src/micro_app.rs | 33 +-------------------------- 2 files changed, 28 insertions(+), 32 deletions(-) diff --git a/rust/gemcraft-leptos/index.html b/rust/gemcraft-leptos/index.html index 9ff1068a5..46cef715e 100644 --- a/rust/gemcraft-leptos/index.html +++ b/rust/gemcraft-leptos/index.html @@ -136,6 +136,33 @@ flex-direction: row; flex-wrap: wrap; } + .micro-app-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + .micro-app-item { + border: 1px solid #ccc; + padding: 1rem; + border-radius: 0.5rem; + } + .micro-app-title { + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 0.5rem; + } + .micro-app-spec { + margin-top: 0.5rem; + } + .micro-app-spec-title { + font-weight: 600; + } + .micro-app-spec-content { + white-space: pre-wrap; + } + .micro-app-svg { + margin-top: 1rem; + } diff --git a/rust/gemcraft-leptos/src/micro_app.rs b/rust/gemcraft-leptos/src/micro_app.rs index 0dc23a58b..ef6013851 100644 --- a/rust/gemcraft-leptos/src/micro_app.rs +++ b/rust/gemcraft-leptos/src/micro_app.rs @@ -70,38 +70,7 @@ pub fn MicroAppGrid( ) -> impl IntoView { view! { - <> - + <>

Date: Wed, 31 Jul 2024 03:10:06 +0000 Subject: [PATCH 15/43] Simplify the JSON editor label by removing the `block mb-2 font-bold` classes. --- rust/gemcraft-leptos/src/gem.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index ccba5eac6..3dd973fef 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -111,7 +111,7 @@ pub fn DataGemEditor(

- + - - - - - - @@ -166,6 +167,7 @@ pub fn DataGemEditor( + + +

- Description + Description
JSON Editor	JSON Editor	<you@example.com> Date: Wed, 31 Jul 2024 03:10:07 +0000 Subject: [PATCH 16/43] Add an actions section to the gem editor with options to parameterize, explode, and make variations of a gem, plus a "Run" button. --- rust/gemcraft-leptos/src/gem.rs \| 52 +++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index 3dd973fef..9b308f3fa 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -7,6 +7,13 @@ use crate::{ toggle::ToggleContent, }; +#[derive(Clone, PartialEq)] +enum GemAction { + Parameterize, + Explode, + MakeVariations, +} + #[component] pub fn DataGemPreview(classification: ClassificationData) -> impl IntoView { view! { @@ -40,6 +47,7 @@ pub fn DataGemEditor( let id = store_value(id); let (description, set_description) = create_signal(gem.description.clone()); let (json_data, set_json_data) = create_signal(gem.json_data.clone()); + let (selected_action, set_selected_action) = create_signal(GemAction::Parameterize); let classify_data = create_action(move \|_\| async move { let json = move \|\| json_data.get(); @@ -75,6 +83,23 @@ pub fn DataGemEditor( } }); + let run_action = create_action(move \|_\| async move { + match selected_action.get() { + GemAction::Parameterize => { + log!("Parameterize action"); + todo!("Implement parameterize action"); + } + GemAction::Explode => { + log!("Explode action"); + todo!("Implement explode action"); + } + GemAction::MakeVariations => { + log!("Make variations action"); + todo!("Implement make variations action"); + } + } + }); + view! { <form class="gem-form"> <div> @@ -132,6 +157,33 @@ pub fn DataGemEditor( </button> </td> </tr> + <tr> + <td colspan="2"> + <div class="actions-section"> + <select + on:change=move \|ev\| { + let value = event_target_value(&ev); + set_selected_action.set(match value.as_str() { + "parameterize" => GemAction::Parameterize, + "explode" => GemAction::Explode, + "make-variations" => GemAction::MakeVariations, + _ => GemAction::Parameterize, + }); + } + > + <option value="parameterize">"Parameterize"</option> + <option value="explode">"Explode"</option> + <option value="make-variations">"Make Variations"</option> + </select> + <button + type="button" + on:click=move \|_\| run_action.dispatch(()) + > + "Run Action" + </button> + </div> + </td> + </tr> </table> </ToggleContent> </form> From 59b88e56eb2c737b14cf7103c5f579d22972c8f3 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" <you@example.com> Date: Wed, 31 Jul 2024 03:12:37 +0000 Subject: [PATCH 17/43] Implement Classify as a GemAction and move the handler logic into a function --- rust/gemcraft-leptos/src/gem.rs \| 41 +++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index 9b308f3fa..a232ef300 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -12,6 +12,7 @@ enum GemAction { Parameterize, Explode, MakeVariations, + Classify, } #[component] @@ -50,23 +51,7 @@ pub fn DataGemEditor( let (selected_action, set_selected_action) = create_signal(GemAction::Parameterize); let classify_data = create_action(move \|_\| async move { - let json = move \|\| json_data.get(); - let description = move \|\| description.get(); - - let data = llm::classify_data(json(), description()).await; - match data { - Ok(data) => { - on_classify(( - id.get_value().clone(), - data.clone(), - description(), - json_data(), - )); - } - Err(e) => { - log!("Error: {:?}", e); - } - } + handle_classify_action(id.get_value(), json_data.get(), description.get(), on_classify).await; }); let hallucinate_data = create_action(move \|_\| async move { @@ -97,9 +82,29 @@ pub fn DataGemEditor( log!("Make variations action"); todo!("Implement make variations action"); } + GemAction::Classify => { + handle_classify_action(id.get_value(), json_data.get(), description.get(), on_classify).await; + } } }); + async fn handle_classify_action( + id: String, + json_data: String, + description: String, + on_classify: Callback<(String, ClassificationData, String, String)>, + ) { + let data = llm::classify_data(json_data.clone(), description.clone()).await; + match data { + Ok(data) => { + on_classify((id, data.clone(), description, json_data)); + } + Err(e) => { + log!("Error: {:?}", e); + } + } + } + view! { <form class="gem-form"> <div> @@ -167,6 +172,7 @@ pub fn DataGemEditor( "parameterize" => GemAction::Parameterize, "explode" => GemAction::Explode, "make-variations" => GemAction::MakeVariations, + "classify" => GemAction::Classify, _ => GemAction::Parameterize, }); } @@ -174,6 +180,7 @@ pub fn DataGemEditor( <option value="parameterize">"Parameterize"</option> <option value="explode">"Explode"</option> <option value="make-variations">"Make Variations"</option> + <option value="classify">"Classify"</option> </select> <button type="button" From 86d1f885c945a64037387697e640cea7e06ae4e5 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" <you@example.com> Date: Wed, 31 Jul 2024 03:13:27 +0000 Subject: [PATCH 18/43] Make "Classify" the default action in the select block --- rust/gemcraft-leptos/src/gem.rs \| 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index a232ef300..0d7e2bfaf 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -48,7 +48,7 @@ pub fn DataGemEditor( let id = store_value(id); let (description, set_description) = create_signal(gem.description.clone()); let (json_data, set_json_data) = create_signal(gem.json_data.clone()); - let (selected_action, set_selected_action) = create_signal(GemAction::Parameterize); + let (selected_action, set_selected_action) = create_signal(GemAction::Classify); let classify_data = create_action(move \|_\| async move { handle_classify_action(id.get_value(), json_data.get(), description.get(), on_classify).await; @@ -169,18 +169,18 @@ pub fn DataGemEditor( on:change=move \|ev\| { let value = event_target_value(&ev); set_selected_action.set(match value.as_str() { + "classify" => GemAction::Classify, "parameterize" => GemAction::Parameterize, "explode" => GemAction::Explode, "make-variations" => GemAction::MakeVariations, - "classify" => GemAction::Classify, - _ => GemAction::Parameterize, + _ => GemAction::Classify, }); } > + <option value="classify">"Classify"</option> <option value="parameterize">"Parameterize"</option> <option value="explode">"Explode"</option> <option value="make-variations">"Make Variations"</option> - <option value="classify">"Classify"</option> </select> <button type="button" From a2e0d141ef841b57932b0b2a03edfc3f5e7a542c Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" <you@example.com> Date: Wed, 31 Jul 2024 03:14:02 +0000 Subject: [PATCH 19/43] Remove the "Classify Data" button as it is superseded by the actions menu --- rust/gemcraft-leptos/src/gem.rs \| 11 ----------- 1 file changed, 11 deletions(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index 0d7e2bfaf..c31b9cf82 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -151,17 +151,6 @@ pub fn DataGemEditor( rows="10" >
- -
From e8992adb879629784bea9f82a757d05bbefe3378 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 31 Jul 2024 03:15:56 +0000 Subject: [PATCH 20/43] Implement gem classification and hallucination actions in the gem editor --- rust/gemcraft-leptos/src/gem.rs \| 4 ---- 1 file changed, 4 deletions(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index c31b9cf82..bc2772dea 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -50,10 +50,6 @@ pub fn DataGemEditor( let (json_data, set_json_data) = create_signal(gem.json_data.clone()); let (selected_action, set_selected_action) = create_signal(GemAction::Classify); - let classify_data = create_action(move \|_\| async move { - handle_classify_action(id.get_value(), json_data.get(), description.get(), on_classify).await; - }); - let hallucinate_data = create_action(move \|_\| async move { let description = move \|\| description.get(); From 927c5c04fa8f708dbca24f949f3b37d98ed377f7 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Wed, 31 Jul 2024 03:15:57 +0000 Subject: [PATCH 21/43] Move the Hallucinate button underneath the label for the Description but within the same table cell --- rust/gemcraft-leptos/src/gem.rs \| 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index bc2772dea..2394324eb 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -113,6 +113,14 @@ pub fn DataGemEditor(
Description + +
- -
JSON Editor	<you@example.com> Date: Wed, 31 Jul 2024 13:18:05 +1000 Subject: [PATCH 22/43] Tweak form layout --- rust/gemcraft-leptos/src/gem.rs \| 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index 2394324eb..62350b14b 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -119,7 +119,7 @@ pub fn DataGemEditor( on:click=move \|_\| hallucinate_data.dispatch(()) class="classify" > - "Hallucinate Data" + "Hallucinate" </button> </td> <td> @@ -134,14 +134,15 @@ pub fn DataGemEditor( </td> </tr> <tr> - <td><label for="json-editor">JSON Editor</label></td> - <td><textarea + <td colspan="2"> + <textarea id="json-editor" on:input=move \|ev\| { set_json_data.set(event_target_value(&ev)); } prop:value=json_data rows="10" + cols="36" >
+ +

From 222916d35d633c941f58af5b8feb2889f3914f0b Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 31 Jul 2024 03:40:26 +0000 Subject: [PATCH 29/43] Adjust CSS styles for gem form, button, and toggle layout --- rust/gemcraft-leptos/index.html | 46 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/rust/gemcraft-leptos/index.html b/rust/gemcraft-leptos/index.html index 46cef715e..150bc6afe 100644 --- a/rust/gemcraft-leptos/index.html +++ b/rust/gemcraft-leptos/index.html @@ -57,7 +57,8 @@ flex-grow: 1; } .data-gem .title { - font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", + "Helvetica", "Arial", sans-serif; font-size: 1rem; font-weight: bold; margin: 0; @@ -77,10 +78,10 @@ } form.gem-form { - border: 1px solid #ccc; - padding: 1rem; - border-radius: 0.25rem; - margin: .5rem .5rem; + border: 1px solid #ccc; + padding: 1rem; + border-radius: 0.25rem; + margin: 0.5rem 0.5rem; } button.classify { @@ -90,51 +91,50 @@ padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; - width: 100%; } .app-ideas { - white-space: pre-wrap; + white-space: pre-wrap; } .toggle-container { - position: relative; + position: relative; } .toggle-input { - display: none; + display: none; } .toggle-label { - display: inline-block; - padding: 2px 8px; - border-radius: 4px; - cursor: pointer; + display: inline-block; + padding: 2px 8px; + border-radius: 4px; + cursor: pointer; } .toggle-content { - display: none; - padding: 10px; + display: none; + padding: 10px; } .toggle-input:checked ~ .toggle-content { - display: block; + display: block; } .toggle-label::after { - content: "\25B8"; - display: inline-block; + content: "\25B8"; + display: inline-block; } .toggle-input:checked ~ .toggle-label::after { - content: "\25BE"; - display: inline-block; + content: "\25BE"; + display: inline-block; } .gem-dock { - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: flex; + flex-direction: row; + flex-wrap: wrap; } .micro-app-grid { display: grid; From 865cfe55958b2ff8f125bc720e5e361ad213c085 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Wed, 31 Jul 2024 03:40:27 +0000 Subject: [PATCH 30/43] Rename `.classify` to `.primary` and create `.danger` class for destructive buttons, updating delete button in gem editor. --- rust/gemcraft-leptos/index.html | 11 ++++++++++- rust/gemcraft-leptos/src/gem.rs | 6 +++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/rust/gemcraft-leptos/index.html b/rust/gemcraft-leptos/index.html index 150bc6afe..f192d5752 100644 --- a/rust/gemcraft-leptos/index.html +++ b/rust/gemcraft-leptos/index.html @@ -84,7 +84,7 @@ margin: 0.5rem 0.5rem; } - button.classify { + button.primary { background-color: #007bff; color: #fff; border: none; @@ -93,6 +93,15 @@ cursor: pointer; } + button.danger { + background-color: #dc3545; + color: #fff; + border: none; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + cursor: pointer; + } + .app-ideas { white-space: pre-wrap; } diff --git a/rust/gemcraft-leptos/src/gem.rs b/rust/gemcraft-leptos/src/gem.rs index d223e20ed..015cdde01 100644 --- a/rust/gemcraft-leptos/src/gem.rs +++ b/rust/gemcraft-leptos/src/gem.rs @@ -151,7 +151,7 @@ pub fn DataGemEditor( @@ -201,7 +201,7 @@ pub fn DataGemEditor( -

- - - - - +

diff --git a/rust/gemcraft-leptos/src/main.rs b/rust/gemcraft-leptos/src/main.rs index c2f2de4b2..35183f1ce 100644 --- a/rust/gemcraft-leptos/src/main.rs +++ b/rust/gemcraft-leptos/src/main.rs @@ -42,6 +42,11 @@ fn App() -> impl IntoView { db::save("", &id, &gem); }; + let delete = |id: String, gems: &mut HashMap| { + gems.remove(&id); + db::delete("", &id); + }; + let on_toggle_selection = move |id| { set_selection.update(|current| { if current.contains(&id) { @@ -109,6 +114,10 @@ fn App() -> impl IntoView { }); }; + let on_delete = move |id| { + gems.update(|gems| delete(id, gems)); + }; + view! {

@@ -135,13 +144,29 @@ fn App() -> impl IntoView { {move || gems() .into_iter() - .map(|(id, gem)| view! { }) + .map(|(id, gem)| view! { + + }) .collect_view()}

- {move || selection.get().iter().map(|id| view! { }).collect_view()} + { move || selection + .get() + .iter() + .map(|id| view! { + + }) + .collect_view() + }

From cae9659dcd46ff5b75bddf89e16ec8d9c81b1e97 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Wed, 31 Jul 2024 03:43:43 +0000 Subject: [PATCH 32/43] Extract common ceremonial code into utility functions --- rust/gemcraft-leptos/src/llm.rs | 167 ++++++++------------------------ 1 file changed, 39 insertions(+), 128 deletions(-) diff --git a/rust/gemcraft-leptos/src/llm.rs b/rust/gemcraft-leptos/src/llm.rs index e0ec90bc0..80671a0a6 100644 --- a/rust/gemcraft-leptos/src/llm.rs +++ b/rust/gemcraft-leptos/src/llm.rs @@ -31,26 +31,27 @@ pub struct CreateThreadRequest { pub message: String, } -pub fn build_classify_request(json: String, description: String) -> Result { +async fn send_llm_request(body: CreateThreadRequest) -> Result { + let win = window(); let mut opts = RequestInit::new(); opts.method("POST"); - let msg = format!( - "Classify the following data:\n\n{}\n\nContext:\n\n{}", - json, description - ); - - // set body as JSON string - let body = json!({ - "action": String::from("create"), - "system": String::from("Examine the provided raw data and context and return a brief title, it's confidentiality/sensitivity (public, shared, personal, secret), the data type and emoji to describe the data. Respond with a JSON object containing the title and emoji, e.g. ```json\n{\"title\": \"Personal Budget\", \"contentType\": \"Spreadsheet\", \"emoji\": \"💸\", \"sensitivity\": \"personal/financial\"}``` wrapped in a block e.g. ```json\n{}\n```."), - "message": msg, - "model": "gpt-4o-mini" - }); - let body = serde_json::to_string(&body).unwrap(); + let body = serde_json::to_string(&body) + .map_err(|_| JsValue::from_str("Failed to serialize JSON"))?; opts.body(Some(&JsValue::from_str(&body))); - Request::new_with_str_and_init(LLM_URL, &opts) + let request = Request::new_with_str_and_init(LLM_URL, &opts)?; + let json = send_request(&win, request).await?; + + serde_wasm_bindgen::from_value(json) + .map_err(|_| JsValue::from_str("Failed to deserialize JSON")) +} + +fn extract_json_from_response(llm_response: &LlmResponse) -> Result { + let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); + blocks.first() + .cloned() + .ok_or_else(|| JsValue::from_str("No JSON blocks found in response")) } pub async fn send_request(window: &web_sys::Window, request: Request) -> Result { @@ -69,151 +70,74 @@ pub async fn classify_data( json: String, description: String, ) -> Result { - let win = window(); - - let request = build_classify_request(json, description)?; - let json = send_request(&win, request).await?; + let msg = format!( + "Classify the following data:\n\n{}\n\nContext:\n\n{}", + json, description + ); - let llm_response: LlmResponse = - serde_wasm_bindgen::from_value(json) - .map_err(|_| "Failed to deserialize JSON")?; + let body = CreateThreadRequest { + action: String::from("create"), + system: String::from("Examine the provided raw data and context and return a brief title, it's confidentiality/sensitivity (public, shared, personal, secret), the data type and emoji to describe the data. Respond with a JSON object containing the title and emoji, e.g. ```json\n{\"title\": \"Personal Budget\", \"contentType\": \"Spreadsheet\", \"emoji\": \"💸\", \"sensitivity\": \"personal/financial\"}``` wrapped in a block e.g. ```json\n{}\n```."), + message: msg, + }; + let llm_response = send_llm_request(body).await?; log!("Response: {:?}", llm_response); - let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); - let data = blocks - .first() - .ok_or("No blocks")?; + let data = extract_json_from_response(&llm_response)?; - let classification_data: ClassificationData = - serde_json::from_str(data.clone().as_str()) - .map_err(|_| "Failed to deserialize ClassificationData")?; - - Ok(classification_data) + serde_json::from_str(&data) + .map_err(|_| JsValue::from_str("Failed to deserialize ClassificationData")) } pub async fn hallucinate_data(description: String) -> Result { - let win = window(); - let mut opts = RequestInit::new(); - opts.method("POST"); - - let msg = format!("{}", description); - - // set body as JSON string let body = CreateThreadRequest { action: String::from("create"), system: String::from("imagine realistic JSON data based on the user request, respond with only JSON wrapped in a block e.g. ```json\n{}\n```."), - message: msg, + message: description, }; - let body = serde_json::to_string(&body) - .map_err(|_| "Failed to serialize JSON")?; - opts.body(Some(&JsValue::from_str(&body))); - - let request = Request::new_with_str_and_init(LLM_URL, &opts)?; - let json = send_request(&win, request).await?; - - let llm_response: LlmResponse = - serde_wasm_bindgen::from_value(json).map_err(|_| "Failed to deserialize JSON")?; - let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); - let data = blocks - .first() - .ok_or("No blocks")?; - - Ok(data.clone()) + let llm_response = send_llm_request(body).await?; + extract_json_from_response(&llm_response) } pub async fn explode_data(json: String) -> Result { - let win = window(); - let mut opts = RequestInit::new(); - opts.method("POST"); - let msg = format!("Explode the following JSON object into subcomponents:\n\njson```{}```", json); - // set body as JSON string let body = CreateThreadRequest { action: String::from("create"), system: String::from("Break down the provided JSON object into a list of smaller, logically related JSON objects. Each subcomponent should represent a meaningful part of the original data. Respond with only JSON wrapped in a block e.g. ```json\n[]\n```."), message: msg, }; - let body = serde_json::to_string(&body) - .map_err(|_| "Failed to serialize JSON")?; - opts.body(Some(&JsValue::from_str(&body))); - - let request = Request::new_with_str_and_init(LLM_URL, &opts)?; - - let json = send_request(&win, request).await?; - - let llm_response: LlmResponse = - serde_wasm_bindgen::from_value(json).map_err(|_| "Failed to deserialize JSON")?; - let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); - let data = blocks - .first() - .ok_or("No blocks")?; - Ok(data.clone()) + let llm_response = send_llm_request(body).await?; + extract_json_from_response(&llm_response) } pub async fn make_variations(json: String, description: String) -> Result { - let win = window(); - let mut opts = RequestInit::new(); - opts.method("POST"); - let msg = format!("Create variations of the following data:\n\nJSON: {}\n\nDescription: {}", json, description); - // set body as JSON string let body = CreateThreadRequest { action: String::from("create"), system: String::from("Create three variations of the provided data that are 'one step away' in idea space from the original. Each variation should be a complete JSON object. Respond with only JSON wrapped in a block e.g. ```json\n[{\"variation1\":{}},{\"variation2\":{}},{\"variation3\":{}}]\n```."), message: msg, }; - let body = serde_json::to_string(&body) - .map_err(|_| "Failed to serialize JSON")?; - opts.body(Some(&JsValue::from_str(&body))); - - let request = Request::new_with_str_and_init(LLM_URL, &opts)?; - - let json = send_request(&win, request).await?; - - let llm_response: LlmResponse = - serde_wasm_bindgen::from_value(json).map_err(|_| "Failed to deserialize JSON")?; - let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); - let data = blocks - .first() - .ok_or("No blocks")?; - Ok(data.clone()) + let llm_response = send_llm_request(body).await?; + extract_json_from_response(&llm_response) } pub async fn decompose_data(json: String) -> Result { - let win = window(); - let mut opts = RequestInit::new(); - opts.method("POST"); - let msg = format!("Decompose the following JSON object:\n\n{}", json); - // set body as JSON string let body = CreateThreadRequest { action: String::from("create"), system: String::from("Analyze the provided JSON object and identify regions within it that could be extracted to variables. These are typically embedded pieces of data that are statically defined but could be made dynamic. Return a JSON object containing two properties: 'templated' (the original object with {{mustache}} style placeholders replacing the extracted regions) and 'extracted' (an object containing the extracted regions as key-value pairs). Respond with only JSON wrapped in a block e.g. ```json\n{\"templated\": {}, \"extracted\": {}}\n```."), message: msg, }; - let body = serde_json::to_string(&body) - .map_err(|_| "Failed to serialize JSON")?; - opts.body(Some(&JsValue::from_str(&body))); - - let request = Request::new_with_str_and_init(LLM_URL, &opts)?; - - let json = send_request(&win, request).await?; - let llm_response: LlmResponse = - serde_wasm_bindgen::from_value(json).map_err(|_| "Failed to deserialize JSON")?; - let blocks = extract_code_blocks_from_markdown(&llm_response.output, "json"); - let data = blocks - .first() - .ok_or("No blocks")?; - - Ok(data.clone()) + let llm_response = send_llm_request(body).await?; + extract_json_from_response(&llm_response) } pub fn format_gem_with_classification(gem: DataGem) -> String { @@ -226,29 +150,16 @@ pub fn format_gem_with_classification(gem: DataGem) -> String { } pub async fn combine_data(gems: Vec, description: String, model: String) -> Result { - let win = window(); - let mut opts = RequestInit::new(); - opts.method("POST"); - let msg = format!("Imagine a micro-app that could operate on the following data gems: \n\n{}\n\nRemember, we are creating micro-apps that literally operate ON the provided data as their input. Inspired by: {}", gems.iter().map(|g| format_gem_with_classification(g.clone())).collect::>().join("\n\n"), description); - // set body as JSON string let body = json!({ "action": String::from("create"), "system": String::from("Examine the provided data gems and imagine what kind of user interface / mini-app a user would like to use to explore, manipulate and interact with the data contained within. You must utilize all provided data gems and consider how to use them TOGETHER in an app. You should create a view model based on the source data + app concept. Describe each micro-app within a tag with a small spec listing what a user can do with a loose idea of the visual components and layout. Include an emoji as the icon and the code for an diff --git a/rust/gemcraft-leptos/src/main.rs b/rust/gemcraft-leptos/src/main.rs index 3a711aca6..64dd73fbe 100644 --- a/rust/gemcraft-leptos/src/main.rs +++ b/rust/gemcraft-leptos/src/main.rs @@ -5,6 +5,7 @@ mod gem; mod llm; mod micro_app; mod toggle; +mod tabs; use html::Data; use leptos::*; @@ -17,6 +18,7 @@ use wasm_bindgen_futures::JsFuture; use data::{ClassificationData, DataGem}; use gem::{DataGemEditor, MiniDataGemPreview}; use micro_app::{parse_micro_app_ideas, MicroAppGrid}; +use tabs::{Tab, TabControl}; fn main() { console_error_panic_hook::set_once(); @@ -121,6 +123,24 @@ fn App() -> impl IntoView { gems.update(|gems| delete(id, gems)); }; + let tabs = vec![ + Tab { + id: "tab1".into(), + title: "Tab 1".into(), + content: "Content for Tab 1".into(), + }, + Tab { + id: "tab2".into(), + title: "Tab 2".into(), + content: "Content for Tab 2".into(), + }, + Tab { + id: "tab3".into(), + title: "Tab 3".into(), + content: "Content for Tab 3".into(), + }, + ]; + view! {

@@ -182,6 +202,7 @@ fn App() -> impl IntoView { +

diff --git a/rust/gemcraft-leptos/src/tabs.rs b/rust/gemcraft-leptos/src/tabs.rs new file mode 100644 index 000000000..5fcd5a202 --- /dev/null +++ b/rust/gemcraft-leptos/src/tabs.rs @@ -0,0 +1,54 @@ +use leptos::*; + +#[derive(Clone, PartialEq)] +pub struct Tab { + pub id: String, + pub title: String, + pub content: String, +} + +#[component] +pub fn TabControl(tabs: Vec, default_tab: String) -> impl IntoView { + let tabs = create_rw_signal(tabs); + let (active_tab, set_active_tab) = create_signal(default_tab); + + view! { +

+ + } + } + /> +

+ {tab.content.clone()} +

+ } + } + /> +

+ } +} \ No newline at end of file From ae5979804487e033267e405f5c9be932317f7f6f Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Thu, 1 Aug 2024 00:32:07 +0000 Subject: [PATCH 36/43] Extract styles to main.css file, use comments to divide into functional regions --- rust/gemcraft-leptos/index.html | 211 +---------------------------- rust/gemcraft-leptos/main.css | 227 ++++++++++++++++++++++++++++++++ 2 files changed, 228 insertions(+), 210 deletions(-) create mode 100644 rust/gemcraft-leptos/main.css diff --git a/rust/gemcraft-leptos/index.html b/rust/gemcraft-leptos/index.html index 89b3ca9d3..cab09abf8 100644 --- a/rust/gemcraft-leptos/index.html +++ b/rust/gemcraft-leptos/index.html @@ -1,216 +1,7 @@ - + diff --git a/rust/gemcraft-leptos/main.css b/rust/gemcraft-leptos/main.css new file mode 100644 index 000000000..1baa593c1 --- /dev/null +++ b/rust/gemcraft-leptos/main.css @@ -0,0 +1,227 @@ +/* Layout */ +.app { + display: flex; + flex-direction: row; +} + +.app > div { + flex: 1; +} + +app > div > pre { + overflow: auto; + max-width: 50%; +} + +/* Data Gem Styles */ +.data-gem { + display: flex; + align-items: center; + gap: 1rem; +} + +.data-gem .icon { + font-size: 3rem; + color: #ccc; + border: 1px solid #ccc; + border-radius: 50%; + padding: 0.5rem; + box-sizing: border-box; + width: 5rem; + text-align: center; + height: 5rem; + user-select: none; +} + +.gem-list { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + flex-direction: row; +} + +.data-gem.small .icon { + font-size: 1.5rem; + color: #ccc; + border: 1px solid #ccc; + border-radius: 50%; + padding: 0.33rem; + box-sizing: border-box; + width: 3rem; + text-align: center; + height: 3rem; + user-select: none; +} + +.data-gem .content { + flex-grow: 1; +} + +.data-gem .title { + font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 1rem; + font-weight: bold; + margin: 0; +} + +.data-gem .content-type { + font-size: 0.75rem; + color: #999; +} + +/* Form Styles */ +form table label { + font-family: monospace; +} + +form table td { + vertical-align: top; + padding: 0.5rem; +} + +form.gem-form { + border: 1px solid #ccc; + padding: 1rem; + border-radius: 0.25rem; + margin: 0.5rem 0.5rem; +} + +/* Button Styles */ +button.primary { + background-color: #007bff; + color: #fff; + border: none; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + cursor: pointer; +} + +button.danger { + background-color: #dc3545; + color: #fff; + border: none; + padding: 0.5rem 1rem; + border-radius: 0.25rem; + cursor: pointer; +} + +/* App Ideas */ +.app-ideas { + white-space: pre-wrap; +} + +/* Toggle Styles */ +.toggle-container { + position: relative; +} + +.toggle-input { + display: none; +} + +.toggle-label { + display: inline-block; + padding: 2px 8px; + border-radius: 4px; + cursor: pointer; +} + +.toggle-content { + display: none; + padding: 10px; +} + +.toggle-input:checked ~ .toggle-content { + display: block; +} + +.toggle-label::after { + content: "\25B8"; + display: inline-block; +} + +.toggle-input:checked ~ .toggle-label::after { + content: "\25BE"; + display: inline-block; +} + +/* Gem Dock */ +.gem-dock { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +/* Micro App Styles */ +.micro-app-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; +} + +.micro-app-item { + border: 1px solid #ccc; + padding: 1rem; + border-radius: 0.5rem; +} + +.micro-app-title { + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.micro-app-spec { + margin-top: 0.5rem; +} + +.micro-app-spec-title { + font-weight: 600; +} + +.micro-app-spec-content { + white-space: pre-wrap; +} + +.micro-app-svg { + margin-top: 1rem; +} + +/* Tab Control Styles */ +.tab-control { + font-family: Arial, sans-serif; +} + +.tab-header { + display: flex; + border-bottom: 1px solid #ccc; +} + +.tab-button { + padding: 10px 20px; + border: none; + background-color: #f1f1f1; + cursor: pointer; + transition: background-color 0.3s; +} + +.tab-button:hover { + background-color: #ddd; +} + +.tab-button.active { + background-color: #fff; + border-bottom: 2px solid #007bff; +} + +.tab-content { + padding: 20px; +} + +.tab-pane { + display: none; +} + +.tab-pane.active { + display: block; +} From fcf4eb4e179e7caf9767314ffaea1405b7c26261 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 1 Aug 2024 11:24:44 +1000 Subject: [PATCH 37/43] Fix Llama output --- rust/gemcraft-leptos/src/main.rs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/rust/gemcraft-leptos/src/main.rs b/rust/gemcraft-leptos/src/main.rs index 64dd73fbe..5877626d7 100644 --- a/rust/gemcraft-leptos/src/main.rs +++ b/rust/gemcraft-leptos/src/main.rs @@ -87,7 +87,8 @@ fn App() -> impl IntoView { match data { Ok(data) => { log!("Response: {:?}", data); - set_imagined_apps.set(data.output); + let output = data.output.replace("\\n", "\n"); + set_imagined_apps.set(output); } Err(e) => { log!("Error: {:?}", e); From cd7d68850498c22ae735bc4d41ed7b6ce92c25bf Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 1 Aug 2024 11:24:58 +1000 Subject: [PATCH 38/43] New layout + tabs --- Cargo.lock | 10 ++ rust/gemcraft-leptos/Cargo.toml | 3 +- rust/gemcraft-leptos/src/llm.rs | 30 +++++- rust/gemcraft-leptos/src/main.rs | 21 +--- rust/gemcraft-leptos/src/micro_app.rs | 145 +++++++++++++++++--------- rust/gemcraft-leptos/src/tabs.rs | 7 +- 6 files changed, 141 insertions(+), 75 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index a5eb54040..a6711b2d8 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1444,6 +1444,7 @@ dependencies = [ "indexed_db_futures", "js-sys", "leptos", + "quick-xml", "regex", "serde", "serde-wasm-bindgen", @@ -2729,6 +2730,15 @@ dependencies = [ "cc", ] +[[package]] +name = "quick-xml" +version = "0.22.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8533f14c8382aaad0d592c812ac3b826162128b65662331e1127b45c3d18536b" +dependencies = [ + "memchr", +] + [[package]] name = "quote" version = "1.0.36" diff --git a/rust/gemcraft-leptos/Cargo.toml b/rust/gemcraft-leptos/Cargo.toml index 6a243bf27..911c462bd 100644 --- a/rust/gemcraft-leptos/Cargo.toml +++ b/rust/gemcraft-leptos/Cargo.toml @@ -20,4 +20,5 @@ js-sys = "0.3.50" web-sys = "0.3.69" gloo-storage = "0.3.0" gloo-utils = "0.2.0" -anyhow = "1.0.71" \ No newline at end of file +anyhow = "1.0.71" +quick-xml = "0.22.0" diff --git a/rust/gemcraft-leptos/src/llm.rs b/rust/gemcraft-leptos/src/llm.rs index 80671a0a6..c0454c53d 100644 --- a/rust/gemcraft-leptos/src/llm.rs +++ b/rust/gemcraft-leptos/src/llm.rs @@ -29,6 +29,7 @@ pub struct CreateThreadRequest { pub action: String, pub system: String, pub message: String, + pub model: Option, } async fn send_llm_request(body: CreateThreadRequest) -> Result { @@ -79,6 +80,7 @@ pub async fn classify_data( action: String::from("create"), system: String::from("Examine the provided raw data and context and return a brief title, it's confidentiality/sensitivity (public, shared, personal, secret), the data type and emoji to describe the data. Respond with a JSON object containing the title and emoji, e.g. ```json\n{\"title\": \"Personal Budget\", \"contentType\": \"Spreadsheet\", \"emoji\": \"💸\", \"sensitivity\": \"personal/financial\"}``` wrapped in a block e.g. ```json\n{}\n```."), message: msg, + model: None, }; let llm_response = send_llm_request(body).await?; @@ -95,6 +97,7 @@ pub async fn hallucinate_data(description: String) -> Result { action: String::from("create"), system: String::from("imagine realistic JSON data based on the user request, respond with only JSON wrapped in a block e.g. ```json\n{}\n```."), message: description, + model: None, }; let llm_response = send_llm_request(body).await?; @@ -108,6 +111,7 @@ pub async fn explode_data(json: String) -> Result { action: String::from("create"), system: String::from("Break down the provided JSON object into a list of smaller, logically related JSON objects. Each subcomponent should represent a meaningful part of the original data. Respond with only JSON wrapped in a block e.g. ```json\n[]\n```."), message: msg, + model: None, }; let llm_response = send_llm_request(body).await?; @@ -121,6 +125,7 @@ pub async fn make_variations(json: String, description: String) -> Result Result { action: String::from("create"), system: String::from("Analyze the provided JSON object and identify regions within it that could be extracted to variables. These are typically embedded pieces of data that are statically defined but could be made dynamic. Return a JSON object containing two properties: 'templated' (the original object with {{mustache}} style placeholders replacing the extracted regions) and 'extracted' (an object containing the extracted regions as key-value pairs). Respond with only JSON wrapped in a block e.g. ```json\n{\"templated\": {}, \"extracted\": {}}\n```."), message: msg, + model: None, }; let llm_response = send_llm_request(body).await?; @@ -150,14 +156,34 @@ pub fn format_gem_with_classification(gem: DataGem) -> String { } pub async fn combine_data(gems: Vec, description: String, model: String) -> Result { + log!("Gems: {:?}, model: {:?}", gems, model); let msg = format!("Imagine a micro-app that could operate on the following data gems: \n\n{}\n\nRemember, we are creating micro-apps that literally operate ON the provided data as their input. Inspired by: {}", gems.iter().map(|g| format_gem_with_classification(g.clone())).collect::>().join("\n\n"), description); + let system = String::from("Examine the provided data gems and imagine what kind of user interface / mini-app a user would like to use to explore, manipulate and interact with the data contained within. + You must utilize all provided data gems and consider how to use them TOGETHER in an app. + You should create a view model based on the source data + app concept. Describe each micro-app within a tag with a small spec listing what a user can do with a loose idea of the visual components and layout. + + Include an emoji as the icon and the code for an

@@ -203,7 +185,8 @@ fn App() -> impl IntoView { - + {move || llm_model.get()} +

diff --git a/rust/gemcraft-leptos/src/micro_app.rs b/rust/gemcraft-leptos/src/micro_app.rs index ef6013851..c627906b5 100644 --- a/rust/gemcraft-leptos/src/micro_app.rs +++ b/rust/gemcraft-leptos/src/micro_app.rs @@ -1,63 +1,83 @@ use leptos::html::*; use leptos::*; +use regex::Regex; +use std::rc::Rc; +use crate::tabs::{Tab, TabControl}; -#[derive(Clone, Debug, PartialEq)] +use quick_xml::{events::Event, Reader}; +use std::io::Cursor; + +#[derive(Clone, Debug, PartialEq, Default)] pub struct MicroAppIdea { - pub title: String, + pub name: String, + pub tagline: String, + pub icon: String, pub spec: String, - pub svg: String, + pub sketch: String, pub view_model: String, } pub fn parse_micro_app_ideas(input: &str) -> Vec { - let mut ideas = Vec::new(); - let parts: Vec<&str> = input.split("").skip(1).collect(); + let sketches = extract_sketches(input); + parse_xml_and_combine(input, sketches) +} - for part in parts { - if let Some(end_idx) = part.find("") { - let content = &part[..end_idx]; - let mut lines = content.lines(); +fn extract_sketches(input: &str) -> Vec { + let re = Regex::new(r"(?s)(.*?)").unwrap(); + re.captures_iter(input) + .map(|cap| cap[1].to_string()) + .collect() +} - let title = lines.next().unwrap_or("").trim().to_string(); - let mut spec = String::new(); - let mut svg = String::new(); - let mut view_model = String::new(); - let mut in_svg = false; - let mut in_model = false; +fn parse_xml_and_combine(input: &str, sketches: Vec) -> Vec { + let mut reader = Reader::from_str(input); + reader.trim_text(true); - for line in lines { - if line.trim().starts_with("

{ + match e.name() { + b"micro-app-idea" => current_idea = MicroAppIdea::default(), + b"name" | b"tagline" | b"icon" | b"spec" | b"view-model" => { + current_field = String::from_utf8_lossy(e.name()).into_owned(); + } + b"sketch" => { + if let Some(sketch) = sketches.get(sketch_index) { + current_idea.sketch = sketch.clone(); + sketch_index += 1; + } + } + _ => {} } - if line.trim().starts_with("") { - in_svg = false; + } + Ok(Event::Text(e)) => { + let text = e.unescape_and_decode(&reader).unwrap(); + match current_field.as_str() { + "name" => current_idea.name = text, + "tagline" => current_idea.tagline = text, + "icon" => current_idea.icon = text, + "spec" => current_idea.spec = text, + "view-model" => current_idea.view_model = text, + _ => {} } - if line.trim().starts_with("") { - in_model = false; + } + Ok(Event::End(ref e)) => { + if e.name() == b"micro-app-idea" { + ideas.push(current_idea.clone()); } + current_field.clear(); } - - ideas.push(MicroAppIdea { - title, - spec: spec.trim().to_string(), - svg: svg.trim().to_string(), - view_model: view_model.trim().to_string(), - }); + Ok(Event::Eof) => break, + Err(e) => panic!("Error at position {}: {:?}", reader.buffer_position(), e), + _ => {} } + buf.clear(); } ideas @@ -69,24 +89,47 @@ pub fn MicroAppGrid( #[prop(into)] on_save: Callback<()>, ) -> impl IntoView { + view! { <>

{&idea.icon}

{&idea.name}

{&idea.spec}

+ }.into_any()), + }, + Tab { + id: "tab2".into(), + title: "Model".into(), + content: Rc::new(move || view! {

{&idea.view_model}

}.into_any()), + }, + Tab { + id: "tab3".into(), + title: "Code".into(), + content: Rc::new(move || view! {

"Content for Tab 3"

}.into_any()), + }, + ]; + view! {

{&idea.title}

Spec:

{&idea.spec}

{&idea.view_model}

} diff --git a/rust/gemcraft-leptos/src/tabs.rs b/rust/gemcraft-leptos/src/tabs.rs index 5fcd5a202..9fd3ac005 100644 --- a/rust/gemcraft-leptos/src/tabs.rs +++ b/rust/gemcraft-leptos/src/tabs.rs @@ -1,10 +1,13 @@ +use std::rc::Rc; + +use html::AnyElement; use leptos::*; -#[derive(Clone, PartialEq)] +#[derive(Clone)] pub struct Tab { pub id: String, pub title: String, - pub content: String, + pub content: Rc HtmlElement>, } #[component] From 4a730bd698f90d6f0d02bbeae1735b1cde844732 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 1 Aug 2024 11:37:52 +1000 Subject: [PATCH 39/43] App is generating nicely --- rust/gemcraft-leptos/main.css | 25 ++++++++++++++++++++++++- rust/gemcraft-leptos/src/llm.rs | 2 +- rust/gemcraft-leptos/src/micro_app.rs | 12 ++++++++---- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/rust/gemcraft-leptos/main.css b/rust/gemcraft-leptos/main.css index 1baa593c1..29e95b638 100644 --- a/rust/gemcraft-leptos/main.css +++ b/rust/gemcraft-leptos/main.css @@ -13,6 +13,16 @@ app > div > pre { max-width: 50%; } +.columns { + display: flex; + flex-direction: row; +} + +.rows { + display: flex; + flex-direction: column; +} + /* Data Gem Styles */ .data-gem { display: flex; @@ -168,7 +178,8 @@ button.danger { .micro-app-title { font-size: 1.25rem; font-weight: bold; - margin-bottom: 0.5rem; + margin: 0; + padding: 0.25rem ; } .micro-app-spec { @@ -179,7 +190,19 @@ button.danger { font-weight: 600; } +.margin-left { + margin-left: 1rem; +} + +.micro-app-tagline { + margin: 0; + font-weight: normal; + font-style: italic; + padding: 0.25rem; +} + .micro-app-spec-content { + margin-top: 2rem; white-space: pre-wrap; } diff --git a/rust/gemcraft-leptos/src/llm.rs b/rust/gemcraft-leptos/src/llm.rs index c0454c53d..5812ecb5c 100644 --- a/rust/gemcraft-leptos/src/llm.rs +++ b/rust/gemcraft-leptos/src/llm.rs @@ -162,7 +162,7 @@ pub async fn combine_data(gems: Vec, description: String, model: String You must utilize all provided data gems and consider how to use them TOGETHER in an app. You should create a view model based on the source data + app concept. Describe each micro-app within a tag with a small spec listing what a user can do with a loose idea of the visual components and layout. - Include an emoji as the icon and the code for an

{&idea.icon}

{&idea.name}

{&idea.tagline}

{&idea.name}

{&idea.spec}

}.into_any()), From f7afaeab066f00fd8d15f58f9586ef614ad8cd60 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Thu, 1 Aug 2024 01:39:41 +0000 Subject: [PATCH 40/43] Implement new `implement_app` function to generate app ideas from system prompt and data gems --- .../src/implement_app_prompt.md | 189 ++++++++++++++++++ rust/gemcraft-leptos/src/llm.rs | 21 ++ 2 files changed, 210 insertions(+) create mode 100644 rust/gemcraft-leptos/src/implement_app_prompt.md diff --git a/rust/gemcraft-leptos/src/implement_app_prompt.md b/rust/gemcraft-leptos/src/implement_app_prompt.md new file mode 100644 index 000000000..96119bf10 --- /dev/null +++ b/rust/gemcraft-leptos/src/implement_app_prompt.md @@ -0,0 +1,189 @@ +# Updated Instructions for Functional Reactive Web Framework + +When creating examples or applications using this framework, adhere to the following guidelines and constraints: + +1. Core Concepts: + + - Use `recipe` for creating components + - Use `asHandler` for event handlers + - Use `lift` for derived state and computations + - Use `setDefault` for default values in recipe props + - Use `curry` for binding cells to handlers or lifted functions + - Use `ifElse` for conditional rendering and conditional execution of operations + +2. Reactivity: + + - All state changes must be handled through handlers or lifted functions + - Do not perform direct state manipulations or computations within recipes + +3. Recipes: + + - Recipes define the UI and behavior of components + - Recipe functions receive props as an object and return an object with a `UI` property and optionally a `NAME` property + - Use the `html` tag function for defining UI templates + - IMPORTANT: Do not perform any computations, comparisons, or conditional logic directly within recipes + +4. Handlers: + + - Handlers created with `asHandler` must be entirely self-contained + - Do not reference external functions or variables within handlers + - Handlers receive an event object and a props object as arguments + +5. Lifted Functions: + + - Use `lift` for any computations or derived state + - Lifted functions must be entirely self-contained + - Do not reference external functions or variables within lifted functions + +6. State Management: + + - Use cell objects (e.g., `someState.set(newValue)`) for updating state + - You can set on subpaths directly. Use `someState.property.set(newValue)` instead of `someState.set({...someState, propery: newValue})`. + - Access current state values through props in handlers and lifted functions + +7. UI Rendering: + + - Use lifted functions for conditional rendering or styling + - Use `ifElse` for conditional rendering within recipes + - Do not use ternary operators or direct boolean checks in the UI template + +8. Event Binding: + + - Use the `@event=${handler({ props })}` syntax for binding events + - For inline handlers, use `handler(props, (event, props) => { ... })` + +9. Currying: + + - Use `curry` to bind cells to handlers or lifted functions when passing them to child components + - Example: `childComponent({ onUpdate: curry({ parentState }, updateParentState) })` + +10. Imports: + + - Always import necessary functions from "@commontools/common-ui" and "@commontools/common-runtime" + +11. Conditional Execution: + + - Use `ifElse` for conditional execution of operations, especially when dealing with asynchronous or expensive computations + - Example: `const { partial, pending } = ifElse(condition, operation(), defaultValue)` + +12. Data Generation: + + - When using `generateData`, prefer using only the `partial` result for a streaming experience + - Handle both `pending` and `partial` states to provide real-time updates to the user + +13. Derived State: + + - Use lifted functions to derive state from `partial` results + - Example: `const derivedState = lift(({ partial }) => processPartial(partial))` + +14. Async Operations: + + - Treat async operations as streams of data using `partial` results + - Update UI in real-time as `partial` data becomes available + +15. Error Handling: + - Implement error handling within lifted functions that process `partial` data + - Provide meaningful feedback to users when errors occur + +Strategies for Avoiding Computations in Recipes: + +1. Factor out computations into lifted functions: + + ```typescript + const getCountCategory = lift(({ count }) => (count > 5 ? "High" : "Low")); + // In recipe: + const category = getCountCategory({ count }); + ``` + +2. Use `ifElse` for conditional rendering: + + ```typescript + ifElse(isEnabled, enabledComponent(), disabledComponent()); + ``` + +3. Create lifted functions for complex conditions: + + ```typescript + const isEvenAndEnabled = lift( + ({ count, isEnabled }) => count % 2 === 0 && isEnabled + ); + // In recipe: + const evenAndEnabled = isEvenAndEnabled({ count, isEnabled }); + ``` + +4. Use lifted functions for string interpolation: + ```typescript + const getItemText = lift( + ({ count }) => `${count} item${count !== 1 ? "s" : ""}` + ); + // In recipe: + const itemText = getItemText({ count }); + ``` + +Example of a correct recipe using these concepts: + +```typescript +import { html } from "@commontools/common-ui"; +import { + recipe, + asHandler, + lift, + NAME, + WithDefault, + curry, + ifElse, +} from "@commontools/common-runtime"; + +const updateCount = asHandler((event, { count }) => { + count.set(count + 1); +}); + +const getButtonText = lift( + ({ count }) => `Clicked ${count} time${count === 1 ? "" : "s"}` +); + +export const counterExample = recipe<{ + count: number; + isEnabled: boolean; +}>("counter example", ({ count, isEnabled }) => { + count.setDefault(0); + isEnabled.setDefault(true); + + const buttonText = getButtonText({ count }); + + const { partial, pending } = ifElse( + isEnabled, + generateData({ + prompt: "Generate a fun fact about the number {{ count }}", + schema: { type: "object", properties: { fact: { type: "string" } } }, + vars: { count }, + }), + { partial: { fact: null }, pending: false } + ); + + const funFact = lift(({ partial }) => + partial && partial.fact ? partial.fact : "Generating fun fact..." + ); + const displayFact = funFact({ partial }); + + return { + UI: html` + + ${ifElse( + isEnabled, + html` + + ${buttonText} + +

${displayFact}

+ `, + html`

Counter is disabled

` + )} + + `, + [NAME]: "Counter Example", + }; +}); +``` + +This example demonstrates the use of `recipe`, `asHandler`, `lift`, `ifElse`, and `generateData` in accordance with the updated guidelines. It shows how to handle conditional rendering, async operations, and derived state in a functional reactive manner. \ No newline at end of file diff --git a/rust/gemcraft-leptos/src/llm.rs b/rust/gemcraft-leptos/src/llm.rs index 5812ecb5c..475aaa35a 100644 --- a/rust/gemcraft-leptos/src/llm.rs +++ b/rust/gemcraft-leptos/src/llm.rs @@ -190,3 +190,24 @@ pub async fn combine_data(gems: Vec, description: String, model: String Ok(llm_response) } + +pub async fn implement_app(app_idea: String, model: String) -> Result { + log!("Implementing app: {:?}, model: {:?}", app_idea, model); + + let system_prompt = include_str!("./implement_app_prompt.md"); + + let msg = format!("Implement the following micro-app idea: \n\n{}", app_idea); + + let body = json!({ + "action": String::from("create"), + "message": msg, + "model": model, + "system": system_prompt, + }); + log!("Body: {:?}", body); + + let llm_response = send_llm_request(serde_json::from_value(body).unwrap()).await?; + log!("Response: {:?}", llm_response); + + Ok(llm_response) +} From 3f1e530e8f62167975ccdbd2fc333ecb194b8738 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Thu, 1 Aug 2024 01:44:16 +0000 Subject: [PATCH 41/43] Add a button to the Code tab that will invoke llm::implement_app passing in the full imagined app spec. The result should be stored similarly to imagined_apps as implemented_apps. --- rust/gemcraft-leptos/src/main.rs | 20 +++++++++++++++++++- rust/gemcraft-leptos/src/micro_app.rs | 14 ++++++++++++-- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/rust/gemcraft-leptos/src/main.rs b/rust/gemcraft-leptos/src/main.rs index f2d4d2f4b..006f8277c 100644 --- a/rust/gemcraft-leptos/src/main.rs +++ b/rust/gemcraft-leptos/src/main.rs @@ -19,6 +19,7 @@ use data::{ClassificationData, DataGem}; use gem::{DataGemEditor, MiniDataGemPreview}; use micro_app::{parse_micro_app_ideas, MicroAppGrid}; use tabs::{Tab, TabControl}; +use crate::llm::LlmResponse; fn main() { console_error_panic_hook::set_once(); @@ -37,6 +38,7 @@ fn App() -> impl IntoView { let search = create_rw_signal(String::new()); let (selection, set_selection) = create_signal(Vec::::new()); let (imagined_apps, set_imagined_apps) = create_signal(String::new()); + let (implemented_apps, set_implemented_apps) = create_signal(String::new()); let (llm_model, set_llm_model) = create_signal(String::from("claude-3-5-sonnet-20240620")); let insert = |id: String, gem: DataGem, gems: &mut HashMap| { @@ -187,7 +189,23 @@ fn App() -> impl IntoView { {move || llm_model.get()} - + { + set_implemented_apps.set(output); + } + Err(e) => { + log!("Error implementing app: {:?}", e); + } + } + }); + } + implemented_apps={implemented_apps} + >

} diff --git a/rust/gemcraft-leptos/src/micro_app.rs b/rust/gemcraft-leptos/src/micro_app.rs index d0b7a8143..74b7cae75 100644 --- a/rust/gemcraft-leptos/src/micro_app.rs +++ b/rust/gemcraft-leptos/src/micro_app.rs @@ -87,9 +87,10 @@ fn parse_xml_and_combine(input: &str, sketches: Vec) -> Vec, #[prop(into)] on_save: Callback<()>, + #[prop(into)] on_implement: Callback, + implemented_apps: ReadSignal, ) -> impl IntoView { - view! { <>

@@ -125,7 +126,16 @@ pub fn MicroAppGrid( Tab { id: "tab3".into(), title: "Code".into(), - content: Rc::new(move || view! {

"Content for Tab 3"

}.into_any()), + content: Rc::new(move || { + view! { +

+ +

{move || implemented_apps.get()}

+ }.into_any() + }), }, ]; From 80a1ddfeb9ee3bb1a383925cb37e2d01673a5ad8 Mon Sep 17 00:00:00 2001 From: "Your Name (aider)" Date: Wed, 7 Aug 2024 20:59:07 +0000 Subject: [PATCH 42/43] Add an "I'm feeling lucky" button that changes the selection to 2-3 random gems and kicks off generating an app --- rust/gemcraft-leptos/src/main.rs | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/rust/gemcraft-leptos/src/main.rs b/rust/gemcraft-leptos/src/main.rs index 006f8277c..0f339cc5f 100644 --- a/rust/gemcraft-leptos/src/main.rs +++ b/rust/gemcraft-leptos/src/main.rs @@ -14,6 +14,7 @@ use std::collections::HashMap; use uuid::Uuid; use wasm_bindgen::JsCast; use wasm_bindgen_futures::JsFuture; +use rand::prelude::*; use data::{ClassificationData, DataGem}; use gem::{DataGemEditor, MiniDataGemPreview}; @@ -126,6 +127,19 @@ fn App() -> impl IntoView { gems.update(|gems| delete(id, gems)); }; + let select_random_gems = move || { + let mut rng = thread_rng(); + let gem_ids: Vec = gems.get().keys().cloned().collect(); + let num_to_select = rng.gen_range(2..=3.min(gem_ids.len())); + let selected: Vec = gem_ids.choose_multiple(&mut rng, num_to_select).cloned().collect(); + set_selection.set(selected); + }; + + let feeling_lucky = move |_| { + select_random_gems(); + combine_data.dispatch(()); + }; + view! {

@@ -178,7 +192,8 @@ fn App() -> impl IntoView { }

- + +

{classification.title.clone()}

{&idea.title}

Spec:

{&idea.title}

Spec:

{&idea.name}

{&idea.title}

Spec:

{&idea.name}

{&idea.tagline}

{&idea.name}