├── .DS_Store ├── .gitattributes ├── .gitignore ├── Cargo.lock ├── Cargo.toml ├── README.md ├── automated-qa ├── Cargo.toml └── src │ ├── main.rs │ └── pretty_print.rs ├── component-generation ├── Cargo.toml ├── data-generation │ ├── .DS_Store │ ├── .gitattributes │ ├── .gitignore │ ├── canidate-genneration │ │ ├── Cargo.toml │ │ └── src │ │ │ └── main.rs │ ├── component-structure │ │ ├── Cargo.toml │ │ └── src │ │ │ ├── lib.rs │ │ │ └── prompts.rs │ ├── data │ │ ├── data1714696307.json │ │ ├── data1714697167.json │ │ ├── data1714698205.json │ │ ├── data1714698584.json │ │ ├── data1714699673.json │ │ ├── data1714700414.json │ │ ├── data1714701151.json │ │ ├── data1714702071.json │ │ ├── data1714703051.json │ │ ├── data1714703306.json │ │ ├── data1714704225.json │ │ ├── data1714704664.json │ │ ├── data1714705163.json │ │ ├── data1714705963.json │ │ ├── data1714706521.json │ │ ├── data1714707021.json │ │ ├── data1714707458.json │ │ ├── data1714707839.json │ │ ├── data1714708578.json │ │ ├── data1714708957.json │ │ ├── data1714709515.json │ │ ├── data1714710435.json │ │ ├── data1714711237.json │ │ ├── data1714712035.json │ │ ├── data1714712718.json │ │ ├── data1714713699.json │ │ ├── data1714714480.json │ │ ├── data1714718663.json │ │ ├── data1714719103.json │ │ ├── data1714720029.json │ │ ├── data1714720345.json │ │ ├── data1714720723.json │ │ ├── data1714721099.json │ │ ├── data1714721481.json │ │ ├── data1714721860.json │ │ ├── data1714722541.json │ │ ├── data1714722799.json │ │ ├── data1714723359.json │ │ ├── data1714723918.json │ │ ├── data1714724538.json │ │ ├── data1714724918.json │ │ ├── data1714725359.json │ │ ├── data1714726219.json │ │ ├── data1714726600.json │ │ ├── data1714727338.json │ │ ├── data1714727716.json │ │ ├── data1714728638.json │ │ ├── data1714729561.json │ │ ├── data1714729879.json │ │ ├── data1714730257.json │ │ ├── data1714731238.json │ │ ├── data1714731918.json │ │ ├── data1714732538.json │ │ ├── data1714732678.json │ │ ├── data1714733478.json │ │ ├── data1714733919.json │ │ ├── data1714734119.json │ │ ├── data1714734920.json │ │ ├── data1714735512.json │ │ ├── data1714735833.json │ │ ├── data1714736392.json │ │ ├── data1714736829.json │ │ ├── data1714737208.json │ │ ├── data1714737466.json │ │ ├── data1714738267.json │ │ ├── data1714738706.json │ │ ├── data1714739103.json │ │ ├── data1714740083.json │ │ ├── data1714740644.json │ │ ├── data1714740903.json │ │ ├── data1714741526.json │ │ ├── data1714742206.json │ │ ├── data1714742838.json │ │ ├── data1714743230.json │ │ ├── data1714743971.json │ │ ├── data1714744594.json │ │ ├── data1714745455.json │ │ ├── data1714746077.json │ │ ├── data1714746461.json │ │ ├── data1714747234.json │ │ ├── data1714750032.json │ │ ├── data1714751114.json │ │ ├── data1714752903.json │ │ ├── data1714754000.json │ │ ├── data1714754325.json │ │ ├── data1714754721.json │ │ ├── data1714755274.json │ │ ├── data1714755461.json │ │ ├── data1714756365.json │ │ ├── data1714757621.json │ │ ├── data1714757947.json │ │ ├── data1714758628.json │ │ ├── data1714759070.json │ │ ├── data1714759509.json │ │ ├── data1714759887.json │ │ ├── data1714760449.json │ │ ├── data1714760886.json │ │ ├── data1714761504.json │ │ ├── data1714762134.json │ │ ├── data1714762452.json │ │ ├── data1714764046.json │ │ ├── data1714764492.json │ │ ├── data1714764994.json │ │ ├── data1714766216.json │ │ ├── data1714766774.json │ │ ├── data1714767634.json │ │ ├── data1714768075.json │ │ ├── data1714768755.json │ │ ├── data1714769316.json │ │ ├── data1714769752.json │ │ ├── data1714770253.json │ │ ├── data1714771231.json │ │ ├── data1714771671.json │ │ ├── data1714772290.json │ │ ├── data1714772728.json │ │ ├── data1714773768.json │ │ ├── data1714774749.json │ │ ├── data1714775187.json │ │ ├── data1714775866.json │ │ ├── data1714776065.json │ │ ├── data1714776566.json │ │ ├── data1714777186.json │ │ ├── data1714777928.json │ │ ├── data1714778065.json │ │ ├── data1714778444.json │ │ ├── data1714779731.json │ │ ├── data1714780592.json │ │ ├── data1714781033.json │ │ ├── data1714781831.json │ │ ├── data1714782150.json │ │ ├── data1714782771.json │ │ ├── data1714783332.json │ │ ├── data1714784132.json │ │ ├── data1714784389.json │ │ ├── data1714784587.json │ │ ├── data1714785845.json │ │ ├── data1714786499.json │ │ ├── data1714787287.json │ │ ├── data1714787550.json │ │ ├── data1714787947.json │ │ ├── data1714788667.json │ │ ├── data1714788996.json │ │ ├── data1714789585.json │ │ ├── data1714790306.json │ │ ├── data1714791219.json │ │ ├── data1714792006.json │ │ ├── data1714792921.json │ │ ├── data1714793248.json │ │ ├── data1714793966.json │ │ ├── data1714794653.json │ │ ├── data1714795114.json │ │ ├── data1714795965.json │ │ ├── data1714796813.json │ │ ├── data1714797729.json │ │ ├── data1714798186.json │ │ ├── data1714798974.json │ │ ├── data1714799693.json │ │ ├── data1714800280.json │ │ ├── data1714801000.json │ │ ├── data1714801395.json │ │ ├── data1714802049.json │ │ ├── data1714803097.json │ │ ├── data1714803229.json │ │ ├── data1714804868.json │ │ ├── data1714805719.json │ │ ├── data1714806244.json │ │ ├── data1714807026.json │ │ ├── data1714807156.json │ │ ├── data1714807619.json │ │ ├── data1714808925.json │ │ ├── data1714809907.json │ │ ├── data1714810561.json │ │ ├── data1714811412.json │ │ ├── data1714812067.json │ │ ├── data1714813987.json │ │ ├── data1714833757.json │ │ ├── data1714835198.json │ │ ├── data1714835855.json │ │ ├── data1714836316.json │ │ ├── data1714837385.json │ │ ├── data1714837718.json │ │ ├── data1714838445.json │ │ ├── data1714839033.json │ │ ├── data1714841333.json │ │ ├── data1714842510.json │ │ ├── data1714843230.json │ │ ├── data1714843692.json │ │ ├── data1714844346.json │ │ ├── data1714847049.json │ │ ├── data1714847512.json │ │ ├── data1714848172.json │ │ ├── data1714848702.json │ │ ├── data1714852845.json │ │ ├── data1714853699.json │ │ ├── data1714853966.json │ │ ├── data1714854754.json │ │ ├── data1714855214.json │ │ ├── data1714855875.json │ │ ├── data1714856859.json │ │ ├── data1714857524.json │ │ ├── data1714858506.json │ │ ├── data1714859617.json │ │ ├── data1714860732.json │ │ ├── data1714861256.json │ │ ├── data1714861913.json │ │ ├── data1714900585.json │ │ ├── data1714901503.json │ │ ├── data1714902552.json │ │ ├── data1714936057.json │ │ ├── data1714936694.json │ │ ├── data1714937329.json │ │ ├── data1714937602.json │ │ ├── data1714937938.json │ │ ├── data1714938750.json │ │ ├── data1714939192.json │ │ ├── data1714939525.json │ │ ├── data1714940240.json │ │ ├── data1714940691.json │ │ ├── data1714942373.json │ │ ├── data1714943146.json │ │ ├── data1714944450.json │ │ ├── data1714945032.json │ │ ├── data1714945442.json │ │ ├── data1714945846.json │ │ ├── data1714946312.json │ │ ├── data1714946848.json │ │ ├── data1714947813.json │ │ ├── data1714948283.json │ │ ├── data1714949008.json │ │ ├── data1714949591.json │ │ ├── data1714950423.json │ │ ├── data1714950810.json │ │ ├── data1714951017.json │ │ ├── data1714951588.json │ │ ├── data1714952152.json │ │ ├── data1714953381.json │ │ ├── data1714954009.json │ │ ├── data1714954574.json │ │ ├── data1714955018.json │ │ ├── data1714955463.json │ │ ├── data1714956267.json │ │ ├── data1714957678.json │ │ ├── data1714957999.json │ │ ├── data1714959406.json │ │ ├── data1714959612.json │ │ ├── data1714960234.json │ │ ├── data1714960681.json │ │ ├── data1714961123.json │ │ ├── data1714961871.json │ │ ├── data1714962433.json │ │ ├── data1714963971.json │ │ ├── data1714964837.json │ │ ├── data1714965288.json │ │ ├── data1714965377.json │ │ ├── data1714965960.json │ │ ├── data1714966470.json │ │ ├── data1714967578.json │ │ ├── data1714968214.json │ │ ├── data1714968606.json │ │ ├── data1714969294.json │ │ ├── data1714970222.json │ │ ├── data1714970967.json │ │ └── data1714971293.json │ ├── dataset-cleaning │ │ ├── Cargo.toml │ │ └── src │ │ │ └── main.rs │ ├── deduplicated.csv │ ├── finished_prompts.json │ ├── old-data │ │ ├── .DS_Store │ │ ├── data1714509669.json │ │ ├── data1714509932.json │ │ ├── data1714510172.json │ │ ├── data1714510236.json │ │ ├── data1714510409.json │ │ ├── data1714510646.json │ │ ├── data1714510730.json │ │ ├── data1714510866.json │ │ ├── data1714511066.json │ │ ├── data1714511167.json │ │ ├── data1714511289.json │ │ ├── data1714511424.json │ │ ├── data1714511536.json │ │ ├── data1714511744.json │ │ ├── data1714512013.json │ │ ├── data1714512220.json │ │ ├── data1714512261.json │ │ ├── data1714512516.json │ │ ├── data1714512716.json │ │ ├── data1714512771.json │ │ ├── data1714513021.json │ │ ├── data1714513218.json │ │ ├── data1714513442.json │ │ ├── data1714513696.json │ │ ├── data1714513699.json │ │ ├── data1714513959.json │ │ ├── data1714514133.json │ │ ├── data1714514190.json │ │ ├── data1714514397.json │ │ ├── data1714514511.json │ │ ├── data1714514641.json │ │ ├── data1714514880.json │ │ ├── data1714515387.json │ │ ├── data1714515530.json │ │ ├── data1714515620.json │ │ ├── data1714516573.json │ │ ├── data1714517492.json │ │ ├── data1714517752.json │ │ ├── data1714518191.json │ │ ├── data1714518987.json │ │ ├── data1714519727.json │ │ ├── data1714520462.json │ │ ├── data1714521199.json │ │ ├── data1714522176.json │ │ ├── data1714522675.json │ │ ├── data1714522933.json │ │ ├── data1714523430.json │ │ ├── data1714523866.json │ │ ├── data1714524183.json │ │ ├── data1714525099.json │ │ ├── data1714572468.json │ │ ├── data1714575740.json │ │ ├── data1714576483.json │ │ ├── data1714577112.json │ │ ├── data1714577800.json │ │ ├── data1714578067.json │ │ ├── data1714578458.json │ │ ├── data1714579086.json │ │ ├── data1714579593.json │ │ ├── data1714580098.json │ │ ├── data1714580595.json │ │ ├── data1714581213.json │ │ ├── data1714582431.json │ │ ├── data1714584530.json │ │ ├── data1714584911.json │ │ ├── data1714585171.json │ │ ├── data1714587718.json │ │ ├── data1714588340.json │ │ ├── data1714588417.json │ │ ├── data1714589096.json │ │ ├── data1714589835.json │ │ ├── data1714590340.json │ │ ├── data1714590777.json │ │ ├── data1714590978.json │ │ ├── data1714591354.json │ │ ├── data1714591797.json │ │ ├── data1714592534.json │ │ ├── data1714592976.json │ │ ├── data1714593362.json │ │ ├── data1714593920.json │ │ ├── data1714594478.json │ │ ├── data1714594856.json │ │ ├── data1714595236.json │ │ ├── data1714595797.json │ │ ├── data1714596534.json │ │ ├── data1714596910.json │ │ ├── data1714597289.json │ │ ├── data1714598147.json │ │ ├── data1714598826.json │ │ ├── data1714599446.json │ │ ├── data1714600308.json │ │ ├── data1714600749.json │ │ ├── data1714602396.json │ │ ├── data1714603313.json │ │ ├── data1714603749.json │ │ ├── data1714604247.json │ │ ├── data1714604752.json │ │ ├── data1714605189.json │ │ ├── data1714605626.json │ │ ├── data1714606543.json │ │ ├── data1714607460.json │ │ ├── data1714608075.json │ │ ├── data1714608750.json │ │ ├── data1714609125.json │ │ ├── data1714609501.json │ │ ├── data1714610118.json │ │ ├── data1714610495.json │ │ ├── data1714611412.json │ │ ├── data1714611788.json │ │ ├── data1714612106.json │ │ ├── data1714612540.json │ │ ├── data1714613816.json │ │ ├── data1714614072.json │ │ ├── data1714614868.json │ │ ├── data1714615828.json │ │ ├── data1714616265.json │ │ ├── data1714645011.json │ │ ├── data1714645749.json │ │ ├── data1714646728.json │ │ ├── data1714648076.json │ │ ├── data1714648934.json │ │ ├── data1714650778.json │ │ ├── data1714654386.json │ │ ├── data1714654913.json │ │ ├── data1714656101.json │ │ ├── data1714656391.json │ │ ├── data1714657316.json │ │ ├── data1714658154.json │ │ ├── data1714658779.json │ │ ├── data1714659109.json │ │ ├── data1714660817.json │ │ ├── data1714661206.json │ │ ├── data1714667537.json │ │ ├── data1714668046.json │ │ ├── data1714668968.json │ │ ├── data1714670070.json │ │ ├── data1714671608.json │ │ ├── data1714672221.json │ │ ├── data1714672659.json │ │ ├── data1714673224.json │ │ ├── data1714673661.json │ │ ├── data1714674459.json │ │ ├── data1714675499.json │ │ ├── data1714676364.json │ │ ├── data1714676801.json │ │ ├── data1714678054.json │ │ └── deduplicated_raw.json │ ├── prompt-generation │ │ ├── Cargo.toml │ │ └── src │ │ │ └── main.rs │ ├── prompts.json │ └── validated.csv ├── examples │ └── cli.rs └── src │ └── lib.rs ├── demo.mov ├── experiments └── prompting │ ├── response.md │ └── rsx.md ├── output.html └── src └── lib.rs /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DioxusLabs/dioxus-ai/ff54cdf05092cd8f2bf4cc13049e2281b9ef4c5b/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.mov filter=lfs diff=lfs merge=lfs -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | target -------------------------------------------------------------------------------- /Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "dioxus-ai" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [workspace] 7 | members = [ 8 | "automated-qa", 9 | "component-generation", 10 | "component-generation/data-generation/component-structure", 11 | "component-generation/data-generation/canidate-genneration", 12 | "component-generation/data-generation/prompt-generation", 13 | "component-generation/data-generation/dataset-cleaning", 14 | ] 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Dioxus AI has utilities for generating and testing dioxus apps: 2 | 3 | - [Generate components](https://github.com/DioxusLabs/dioxus-ai/blob/main/component-generation) 4 | - [Test your applications](https://github.com/DioxusLabs/dioxus-ai/tree/main/automated-qa) 5 | 6 | You can run each application with `cargo run` 7 | -------------------------------------------------------------------------------- /automated-qa/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "automated-qa" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | anyhow = "1.0.82" 8 | kalosm = { git = "https://github.com/floneum/floneum", default-features = false, features = ["language"] } 9 | scraper = "0.19.0" 10 | tokio = { version = "1.37.0", features = ["full"] } 11 | tracing-subscriber = "0.3.18" 12 | zstd-sys = "=2.0.9" 13 | enumset = "1.1.3" 14 | const_format = "0.2.32" 15 | dioxus-rsx-rosetta = { git = "https://github.com/DioxusLabs/dioxus" } 16 | dioxus-autofmt = { git = "https://github.com/DioxusLabs/dioxus" } 17 | syntect = "5.2.0" 18 | regex = "1.10.4" 19 | 20 | [features] 21 | default = ["metal"] 22 | metal = ["kalosm/metal"] 23 | -------------------------------------------------------------------------------- /automated-qa/src/main.rs: -------------------------------------------------------------------------------- 1 | mod pretty_print; 2 | 3 | use kalosm::language::*; 4 | use std::{fmt::Display, io::Write}; 5 | use tokio::sync::OnceCell; 6 | 7 | use crate::pretty_print::get_clean_html; 8 | 9 | async fn lazy_llama() -> anyhow::Result<&'static Llama> { 10 | static INSTANCE: OnceCell = OnceCell::const_new(); 11 | 12 | INSTANCE 13 | .get_or_try_init(|| { 14 | Llama::builder() 15 | .with_source(LlamaSource::phi_3_mini_4k_instruct()) 16 | .build() 17 | }) 18 | .await 19 | } 20 | 21 | #[tokio::main] 22 | async fn main() { 23 | let llm = lazy_llama().await.unwrap(); 24 | 25 | let background = 26 | "The dioxus homepage is a marketing site for an open source UI library called dioxus."; 27 | 28 | let application_name = "dioxus homepage"; 29 | 30 | let constraints = RegexParser::new(&format!(r#"\n1\. What did you expect to happen when you made the action\? [a-zA-Z:\.\-+'" ]{{1,1000}}\n2\. What changed in the new html\? [a-zA-Z:\.\-+'" ]{{1,1000}}\n3\. Does this behavior makes sense for {application_name}\? [a-zA-Z:\.\-+'" ]{{1,1000}}\n4\. Does this behavior make sense\? (yes|no)"#)).unwrap(); 31 | 32 | let task = Task::builder(format!(r#"You are testing a web application that is currently in development called {application_name}. {background} You will receive the current HTML, an action and then the output HTML. 33 | You must respond with this format: 34 | 1) What did you expect to happen when you made the action? 35 | 2) What changed in the new html? 36 | 3) Why does behavior makes sense or not for {application_name}? 37 | 4) Does this behavior make sense? (respond with yes, or no)"#)) 38 | .with_constraints(constraints) 39 | .build(); 40 | 41 | let mut should_be_yes = Vec::new(); 42 | let mut should_be_no = Vec::new(); 43 | 44 | { 45 | let buttons = ["component.rs", "async.rs", "server.rs", "global_state.rs"]; 46 | // Navigate to dioxuslabs.com 47 | let tab = Tab::new("https://dioxuslabs.com".parse().unwrap(), false).unwrap(); 48 | 49 | // Find the tabs div 50 | let node = tab.find("#main > div > div:nth-child(6) > section:nth-child(1) > section:nth-child(2) > div.container.mx-auto.max-w-screen-lg > div > section > div").unwrap(); 51 | 52 | // Get the text 53 | let html = get_clean_html(&node).unwrap(); 54 | 55 | for (i, button_name) in buttons.iter().enumerate() { 56 | println!("\n\nClicking element {} of {}", i + 1, buttons.len()); 57 | 58 | // Click the button 59 | let button = tab.find(&format!("#main > div > div:nth-child(6) > section:nth-child(1) > section:nth-child(2) > div.container.mx-auto.max-w-screen-lg > div > section > div > div.flex-none.overflow-auto.whitespace-nowrap.flex.relative.min-w-full.bg-ghdarkmetal.pt-3.px-3 > ul > li:nth-child({}) > button", i + 2)).unwrap(); 60 | button.click().unwrap(); 61 | 62 | // Find the tabs div 63 | let node = tab.find("#main > div > div:nth-child(6) > section:nth-child(1) > section:nth-child(2) > div.container.mx-auto.max-w-screen-lg > div > section > div").unwrap(); 64 | 65 | // Get the new text 66 | let new_html = get_clean_html(&node).unwrap(); 67 | 68 | let prompt = Prompt { 69 | previous: html.clone(), 70 | action: format!("click the {button_name} button"), 71 | new: new_html, 72 | }; 73 | 74 | should_be_yes.push(prompt); 75 | } 76 | } 77 | 78 | { 79 | let buttons = ["component.rs", "async.rs", "server.rs", "global_state.rs"]; 80 | // Navigate to dioxuslabs.com 81 | let tab = Tab::new("https://dioxuslabs.com".parse().unwrap(), false).unwrap(); 82 | 83 | // Find the tabs div 84 | let node = tab.find("#main > div > div:nth-child(6) > section:nth-child(1) > section:nth-child(2) > div.container.mx-auto.max-w-screen-lg > div > section > div").unwrap(); 85 | 86 | // Get the text 87 | let html = get_clean_html(&node).unwrap(); 88 | 89 | for (i, button_name) in buttons.iter().enumerate() { 90 | println!("\n\nClicking element {} of {}", i + 1, buttons.len()); 91 | 92 | // Click the button 93 | let button = tab.find(&format!("#main > div > div:nth-child(6) > section:nth-child(1) > section:nth-child(2) > div.container.mx-auto.max-w-screen-lg > div > section > div > div.flex-none.overflow-auto.whitespace-nowrap.flex.relative.min-w-full.bg-ghdarkmetal.pt-3.px-3 > ul > li:nth-child({}) > button", i + 1)).unwrap(); 94 | button.click().unwrap(); 95 | 96 | // Find the tabs div 97 | let node = tab.find("#main > div > div:nth-child(6) > section:nth-child(1) > section:nth-child(2) > div.container.mx-auto.max-w-screen-lg > div > section > div").unwrap(); 98 | 99 | // Get the new text 100 | let new_html = get_clean_html(&node).unwrap(); 101 | 102 | let prompt = Prompt { 103 | previous: html.clone(), 104 | action: format!("click the {button_name} button"), 105 | new: new_html, 106 | }; 107 | 108 | should_be_no.push(prompt); 109 | } 110 | } 111 | 112 | let mut true_positives = 0; 113 | let mut false_positives = 0; 114 | let mut false_negatives = 0; 115 | let mut true_negatives = 0; 116 | 117 | for prompt in should_be_yes { 118 | println!("\nPROMPT (should be yes):\n{prompt}\n"); 119 | 120 | let mut all_text = String::new(); 121 | let mut stream = task.run(&prompt.to_string(), llm); 122 | while let Some(text) = stream.next().await { 123 | all_text.push_str(&text); 124 | print!("{text}"); 125 | std::io::stdout().flush().unwrap(); 126 | } 127 | 128 | if all_text.contains("Does this behavior make sense? yes") { 129 | true_positives += 1; 130 | } else if all_text.contains("Does this behavior make sense? no") { 131 | false_negatives += 1; 132 | } 133 | } 134 | 135 | for prompt in should_be_no { 136 | println!("\nPROMPT (should be no):\n{prompt}\n"); 137 | 138 | let mut all_text = String::new(); 139 | let mut stream = task.run(&prompt.to_string(), llm); 140 | while let Some(text) = stream.next().await { 141 | all_text.push_str(&text); 142 | print!("{text}"); 143 | std::io::stdout().flush().unwrap(); 144 | } 145 | 146 | if all_text.contains("Does this behavior make sense? no") { 147 | true_negatives += 1; 148 | } else if all_text.contains("Does this behavior make sense? yes") { 149 | false_positives += 1; 150 | } 151 | } 152 | 153 | println!("\n\nTrue Positives: {}", true_positives); 154 | println!("False Positives: {}", false_positives); 155 | println!("False Negatives: {}", false_negatives); 156 | println!("True Negatives: {}", true_negatives); 157 | } 158 | 159 | struct Prompt { 160 | previous: String, 161 | action: String, 162 | new: String, 163 | } 164 | 165 | impl Display for Prompt { 166 | fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { 167 | write!( 168 | f, 169 | "You currently see:\n\n```html\n{}\n```", 170 | self.previous.trim() 171 | )?; 172 | 173 | write!( 174 | f, 175 | "\n\nYou {} and now see:\n\n```html\n{}\n```", 176 | self.action, 177 | self.new.trim() 178 | )?; 179 | 180 | Ok(()) 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /automated-qa/src/pretty_print.rs: -------------------------------------------------------------------------------- 1 | use scraper::{ElementRef, Node}; 2 | 3 | const IMPORTANT_ATTRIBUTES: &[&str] = &["id", "href", "alt", "title", "aria-*", "role", "type"]; 4 | const IMPORTANT_ELEMENTS: &[&str] = &[ 5 | "a", "img", "p", "h1", "h2", "h3", "ul", "ol", "li", "table", "tr", "td", "button", "input", 6 | "textarea", "select", "option", "form", "label", 7 | ]; 8 | 9 | pub fn get_clean_html(node: &kalosm::language::Node) -> anyhow::Result { 10 | let visible_html = node.outer_html_visible()?; 11 | 12 | Ok(clean_html(&visible_html)) 13 | } 14 | 15 | fn clean_html(fragment: &str) -> String { 16 | let mut result = String::new(); 17 | 18 | let html = scraper::html::Html::parse_fragment(fragment); 19 | 20 | visit_element(html.root_element(), &mut result); 21 | 22 | result 23 | } 24 | 25 | fn visit_element(element: ElementRef, result: &mut String) { 26 | let value = element.value(); 27 | let lowercase_name = value.name().to_lowercase(); 28 | 29 | let is_important = IMPORTANT_ELEMENTS.contains(&lowercase_name.as_str()); 30 | if is_important { 31 | result.push('<'); 32 | result.push_str(&lowercase_name); 33 | 34 | for (attribute, value) in value.attrs() { 35 | if IMPORTANT_ATTRIBUTES.contains(&attribute) { 36 | result.push(' '); 37 | result.push_str(attribute); 38 | result.push('='); 39 | result.push('"'); 40 | result.push_str(value); 41 | result.push('"'); 42 | } 43 | } 44 | 45 | result.push('>'); 46 | } 47 | 48 | for child in element.children() { 49 | match child.value() { 50 | Node::Element(_) => visit_element(ElementRef::wrap(child).unwrap(), result), 51 | Node::Text(t) => result.push_str(t), 52 | _ => {} 53 | } 54 | } 55 | 56 | if is_important { 57 | result.push('<'); 58 | result.push('/'); 59 | result.push_str(&lowercase_name); 60 | result.push('>'); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /component-generation/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "component-generation" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | kalosm = { version = "0.3", default-features = false, features = ["language"] } 8 | tokio = { version = "1.37.0", features = ["full"] } 9 | tracing-subscriber = "0.3.18" 10 | zstd-sys = "=2.0.9" 11 | dioxus-rsx-rosetta = { git = "https://github.com/DioxusLabs/dioxus", rev = "1e8693a0e860c64cccff17ae0fe700e3be39f7db" } 12 | dioxus-autofmt = { git = "https://github.com/DioxusLabs/dioxus", rev = "1e8693a0e860c64cccff17ae0fe700e3be39f7db" } 13 | syntect = "5.2.0" 14 | regex = "1.10.4" 15 | 16 | [features] 17 | default = ["metal"] 18 | metal = ["kalosm/metal"] 19 | -------------------------------------------------------------------------------- /component-generation/data-generation/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DioxusLabs/dioxus-ai/ff54cdf05092cd8f2bf4cc13049e2281b9ef4c5b/component-generation/data-generation/.DS_Store -------------------------------------------------------------------------------- /component-generation/data-generation/.gitattributes: -------------------------------------------------------------------------------- 1 | validated.csv filter=lfs diff=lfs merge=lfs -text 2 | -------------------------------------------------------------------------------- /component-generation/data-generation/.gitignore: -------------------------------------------------------------------------------- 1 | .cargo 2 | target -------------------------------------------------------------------------------- /component-generation/data-generation/canidate-genneration/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "canidate-genneration" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | chrono = "0.4.38" 8 | fundu = "2.0.0" 9 | reqwest = { version = "0.12.4", features = ["json"] } 10 | serde = { version = "1.0.199", features = ["derive"] } 11 | serde_json = "1.0.116" 12 | tokio = { version = "1.37.0", features = ["full"] } 13 | csv = "1.3.0" 14 | once_cell = "1.19.0" 15 | rand = "0.8.5" 16 | regex = "1.10.4" 17 | 18 | component-structure = { path = "../component-structure" } 19 | -------------------------------------------------------------------------------- /component-generation/data-generation/canidate-genneration/src/main.rs: -------------------------------------------------------------------------------- 1 | use std::path::PathBuf; 2 | 3 | use component_structure::{Chat, Train, PROMPT, UI_COMPONENTS}; 4 | use fundu::parse_duration; 5 | use reqwest::Client; 6 | use tokio::{fs::File, io::AsyncWriteExt}; 7 | 8 | #[tokio::main] 9 | async fn main() { 10 | let client = Client::new(); 11 | 12 | let mut responses = Vec::new(); 13 | let mut data_count = 0; 14 | 15 | loop { 16 | let mut iter = UI_COMPONENTS.iter().peekable(); 17 | while let Some(component) = iter.peek() { 18 | let component = component.trim(); 19 | println!("Generating for {}", component); 20 | 21 | let key = std::env::var("GROQ_KEY").unwrap(); 22 | 23 | let Ok(res) = client 24 | .post("https://api.groq.com/openai/v1/chat/completions") 25 | .header("Authorization", format!("Bearer {key}")) 26 | .header("Content-Type", "application/json") 27 | .json(&serde_json::json!({ 28 | "messages": [ 29 | { 30 | "role": "system", 31 | "content": PROMPT 32 | }, 33 | { 34 | "role": "user", 35 | "content": component 36 | } 37 | ], 38 | "model": "llama3-70b-8192", 39 | "seed": rand::random::() 40 | })) 41 | .send() 42 | .await 43 | else { 44 | tokio::time::sleep(std::time::Duration::from_secs(60)).await; 45 | continue; 46 | }; 47 | 48 | let remaining_requests: u64 = res 49 | .headers() 50 | .get("x-ratelimit-remaining-requests") 51 | .and_then(|x| x.to_str().ok()) 52 | .and_then(|x| x.parse().ok()) 53 | .unwrap_or(0); 54 | let remaining_tokens: u64 = res 55 | .headers() 56 | .get("x-ratelimit-remaining-tokens") 57 | .and_then(|x| x.to_str().ok()) 58 | .and_then(|x| x.parse().ok()) 59 | .unwrap_or(0); 60 | let reset_requests = res 61 | .headers() 62 | .get("x-ratelimit-reset-requests") 63 | .and_then(|x| x.to_str().ok()); 64 | let reset_requests = reset_requests 65 | .and_then(|reset_requests| parse_duration(reset_requests).ok()) 66 | .unwrap_or(std::time::Duration::from_secs(60)); 67 | let reset_tokens = res 68 | .headers() 69 | .get("x-ratelimit-reset-tokens") 70 | .and_then(|x| x.to_str().ok()); 71 | let reset_tokens = reset_tokens 72 | .and_then(|reset_tokens| parse_duration(reset_tokens).ok()) 73 | .unwrap_or(std::time::Duration::from_secs(60)); 74 | println!("Remaining requests: {}", remaining_requests); 75 | println!("Remaining tokens: {}", remaining_tokens); 76 | println!("Reset requests: {:?}", reset_requests); 77 | println!("Reset tokens: {:?}", reset_tokens); 78 | 79 | if remaining_requests == 0 { 80 | println!("Rate limit reached, sleeping until reset"); 81 | tokio::time::sleep(reset_requests).await; 82 | continue; 83 | } 84 | if remaining_tokens == 0 { 85 | println!("Rate limit reached, sleeping until reset"); 86 | tokio::time::sleep(reset_tokens).await; 87 | continue; 88 | } 89 | 90 | let Ok(chat) = res.json::().await else { 91 | tokio::time::sleep(reset_requests.max(reset_tokens)).await; 92 | continue; 93 | }; 94 | let res = &chat.choices[0].message.content; 95 | println!("{}", res); 96 | 97 | responses.push(Train { 98 | prompt: component.to_string(), 99 | response: chat, 100 | }); 101 | 102 | // It was successful, so we can move on to the next component 103 | _ = iter.next(); 104 | data_count += 1; 105 | 106 | if data_count % 10 == 0 { 107 | // write the data into a file 108 | let timestamp = std::time::SystemTime::now() 109 | .duration_since(std::time::UNIX_EPOCH) 110 | .unwrap() 111 | .as_secs(); 112 | let folder = PathBuf::from("../data"); 113 | let file = folder.join(format!("data{}.json", timestamp)); 114 | let mut file = File::create(file).await.unwrap(); 115 | let json = serde_json::to_string(&responses).unwrap(); 116 | file.write_all(json.as_bytes()).await.unwrap(); 117 | responses.clear(); 118 | } 119 | } 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /component-generation/data-generation/component-structure/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "component-structure" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | chrono = "0.4.38" 8 | serde = { version = "1.0.199", features = ["derive"] } 9 | serde_json = "1.0.116" 10 | once_cell = "1.19.0" 11 | -------------------------------------------------------------------------------- /component-generation/data-generation/component-structure/src/lib.rs: -------------------------------------------------------------------------------- 1 | use serde::{Deserialize, Serialize}; 2 | 3 | mod prompts; 4 | pub use prompts::*; 5 | 6 | #[derive(Deserialize, Serialize, Debug, Eq, Hash, PartialEq)] 7 | pub struct Train { 8 | pub prompt: String, 9 | pub response: Chat, 10 | } 11 | 12 | #[derive(Deserialize, Serialize, Debug, Eq, Hash, PartialEq)] 13 | pub struct Chat { 14 | #[serde(default)] 15 | pub model: String, 16 | pub choices: Vec, 17 | } 18 | 19 | #[derive(Deserialize, Serialize, Debug, Eq, Hash, PartialEq)] 20 | pub struct Choice { 21 | pub message: Message, 22 | } 23 | 24 | #[derive(Deserialize, Serialize, Debug, Eq, Hash, PartialEq)] 25 | pub struct Message { 26 | pub role: String, 27 | pub content: String, 28 | } 29 | 30 | #[derive(Deserialize, Serialize, Default, Debug)] 31 | pub struct Logprobs { 32 | #[serde(default)] 33 | pub tokens: Vec, 34 | #[serde(default)] 35 | pub token_logprobs: Vec, 36 | #[serde(default)] 37 | pub top_logprobs: Vec, 38 | #[serde(default)] 39 | pub text_offset: Vec, 40 | } 41 | 42 | #[derive(Deserialize, Serialize, Default, Debug)] 43 | pub struct Usage { 44 | #[serde(default)] 45 | pub prompt_tokens: usize, 46 | #[serde(default)] 47 | pub completion_tokens: usize, 48 | #[serde(default)] 49 | pub total_tokens: usize, 50 | #[serde(default)] 51 | pub prompt_time: f64, 52 | #[serde(default)] 53 | pub completion_time: f64, 54 | #[serde(default)] 55 | pub total_time: f64, 56 | } 57 | 58 | #[derive(Deserialize, Serialize, Default, Debug)] 59 | pub struct XGroq { 60 | #[serde(default)] 61 | pub id: String, 62 | } 63 | -------------------------------------------------------------------------------- /component-generation/data-generation/component-structure/src/prompts.rs: -------------------------------------------------------------------------------- 1 | use once_cell::sync::Lazy; 2 | use std::collections::HashSet; 3 | 4 | pub const PROMPT: &str = r#"You generate snippets of JSX. You will only use tailwindcss for styling. You may include comments to explain the HTML with the `` syntax. 5 | 6 | The UI will be: 7 | - Responsive 8 | - Accessible 9 | - Well documented 10 | - Use highlight colors to make different parts of the UI stand out 11 | - Use a consistent color palette throughout the UI 12 | - Use shadows and gradients to add depth and dimension to the UI 13 | - Scale layouts to fit different screen sizes. The layout should serve to guide the user's attention and make it easy to navigate the UI. 14 | - Use tailwind's mobile-first approach to ensure the UI is responsive and accessible on mobile devices. Use breakpoint prefixes (sm:, md:, lg:, xl:) to target different screen sizes. 15 | 16 | The UI will avoid: 17 | - Using JavaScript 18 | - Excessive aria-* attributes on elements that are already accessible 19 | 20 | The UI will never contain: 21 | - Any libraries 22 | - JavaScript 23 | 24 | Any svgs rendered in the UI should contain a comment with the name of the icon instead of children. Eg. ``, ``, etc. 25 | 26 | You always follow this response format: 27 | 1) What should the UI look like? Think about what UI would both look nice and be easy to use. Think about how the UI should scale on different screen sizes. 28 | 2) What are the individual components that make up the UI? Name each component with an upper camel case identifier and specify if the component is standalone or takes children. Describe what the component should look like on each screen size and the purpose of the component. 29 | 3) What does the HTML for top level UI look like? Show the HTML for the top level UI in this format: 30 | ```html 31 | 32 | ``` 33 | 4) What is the HTML for each component? Components may render child elements with the special `{children}` placeholder. 34 | Show each component in this format: 35 | - ComponentName (Standalone or Takes Children): 36 | ```html 37 | 38 | ``` 39 | 40 | For any information you don't know in the HTML. Use `{lower_camel_case_identifier}` in the HTML instead of the information. The information must be a string or number only. 41 | For example, if you don't know how many downloads a library has, you might put

{download_count} downloads

in the HTML."#; 42 | 43 | pub static UI_COMPONENTS: Lazy> = Lazy::new(|| { 44 | let mut components: HashSet<&'static str> = UI_COMPONENTS_RAW.iter().copied().collect(); 45 | let file = std::fs::File::open("../finished_prompts.json").unwrap(); 46 | let finished_prompts: Vec = serde_json::from_reader(file).unwrap(); 47 | let finished_prompts: HashSet<&str> = finished_prompts.iter().map(|x| x.as_str()).collect(); 48 | for component in finished_prompts { 49 | components.remove(component); 50 | } 51 | components.into_iter().collect() 52 | }); 53 | 54 | const UI_COMPONENTS_RAW: &[&str] = &include!("../../prompts.json"); 55 | -------------------------------------------------------------------------------- /component-generation/data-generation/dataset-cleaning/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "dataset-cleaning" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | component-structure = { path = "../component-structure" } 8 | csv = "1.3.0" 9 | once_cell = "1.19.0" 10 | rand = "0.8.5" 11 | regex = "1.10.4" 12 | serde = { version = "1.0.199", features = ["derive"] } 13 | serde_json = "1.0.116" 14 | -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DioxusLabs/dioxus-ai/ff54cdf05092cd8f2bf4cc13049e2281b9ef4c5b/component-generation/data-generation/old-data/.DS_Store -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714510236.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Carousel slider","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's the response:\n\n**1. What should the UI look like?**\nA responsive carousel slider that displays multiple items horizontally, with navigation arrows to move between items. The slider should be mobile-first, accessible, and SEO-friendly.\n\n**2. What are the individual components that make up the UI?**\n\n* `CarouselSlider` (standalone) - the main carousel container\n* `CarouselItem` (takes children) - an individual item in the carousel\n* `CarouselNavigation` (standalone) - the navigation arrows\n\n**3. What does the HTML for the UI look like?**\n```html\n
\n \n { /* item content */ }\n { /* item content */ }\n \n \n \n
\n```\n**4. What is the HTML for each component?**\n\n**CarouselSlider**\n```html\n
\n {children}\n
\n```\n**CarouselItem**\n```html\n
\n {children}\n
\n```\n**CarouselNavigation**\n```html\n
\n \n \n
\n```\nNote: I used Font Awesome icons for the navigation arrows, but you can replace them with your own icons or images."}}]}},{"prompt":"Switch control","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA simple switch control that can be toggled on or off.\n\n**2. What are the individual components that make up the UI?**\n* `SwitchControl` (standalone)\n\n**3. What does the HTML for the UI look like?**\n```\n
\n \n
\n```\n\n**4. What is the HTML for each component?**\n```\n// SwitchControl.js\n\n```\nNote: This implementation uses the `sr-only` class to hide the checkbox from view, and uses the `peer` and `peer-checked` classes to style the switch element based on the state of the checkbox. The `after` pseudo-element is used to create the moving toggle element."}}]}},{"prompt":"Call-to-Action Buttons","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nA simple call-to-action button that can be used to prompt users to take a specific action.\n\n**2. What are the individual components that make up the UI?**\n\n* `CallToActionButton` (standalone)\n\n**3. What does the HTML for the UI look like?**\n\n```\n\n```\n\n**4. What is the HTML for each component?**\n\n```\n\n\n```\n\nIn the above HTML, `{button_text}` is a placeholder for the actual text of the button, which can be customized when using the component."}}]}},{"prompt":"Footer Sitemap Title","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a simple footer sitemap title that displays a title on a website's footer.\n\n**2. What are the individual components that make up the UI?**\n- `FooterSitemapTitle`: standalone component\n\n**3. What does the HTML for the UI look like?**\n```\n
\n \n
\n```\n\n**4. What is the HTML for each component?**\n```\n\n
{sitemap_title}
\n```\nNote: `{sitemap_title}` is a placeholder for the actual title text."}}]}},{"prompt":"Grids","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's the response:\n\n**1. What should the UI look like?**\nA responsive grid system with 3 columns on larger screens and 1 column on smaller screens, with equal width columns that wrap to the next row when full.\n\n**2. What are the individual components that make up the UI?**\n- `GridContainer` (standalone) - a container for the grid system\n- `GridColumn` (takes children) - a single grid column that wraps its content\n\n**3. What does the HTML for the UI look like?**\n```\n\n

Content 1

\n

Content 2

\n

Content 3

\n \n\n```\n\n**4. What is the HTML for each component?**\n```\n\n
{children}
\n\n\n
{children}
\n```\nIn the `GridContainer` component, `md:grid-cols-3` specifies that on medium-sized screens and up, the grid should have 3 columns. On smaller screens, it defaults to 1 column. The `gap-4` class adds a 4-pixel gap between grid items."}}]}},{"prompt":"Highlighted box drawing attention to important information or announcements","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\n\nThe UI should be a highlighted box that draws attention to important information or announcements. The box should have a distinctive background color and/or border to make it stand out. The text inside the box should be clear and easy to read.\n\n**What are the individual components that make up the UI?**\n\n1. `HighlightedBox` (standalone) - The outer container of the highlighted box.\n2. `HighlightedText` (takes children) - The text inside the highlighted box.\n\n**What does the HTML for the UI look like?**\n\n
\n \n {important_announcement}\n \n
\n\n**What is the HTML for each component?**\n\n1. `HighlightedBox`:\n
\n {children}\n
\n\n2. `HighlightedText`:\n

{children}

"}}]}},{"prompt":"Table element","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response for a basic table element:\n\n**1. What should the UI look like?**\nA simple table with a light gray border, responsive, and accessible.\n\n**2. What are the individual components that make up the UI?**\n- `TableContainer` (standalone) - a container for the table\n- `TableHeader` (standalone) - the table header row\n- `TableRow` (takes children) - a table row\n- `TableCell` (standalone) - a table cell\n\n**3. What does the HTML for the UI look like?**\n```\n
\n \n \n \n \n \n \n \n
\n```\n**4. What is the HTML for each component?**\n```\n\n\n {children}\n
\n\n\n\n \n Column 1\n Column 2\n \n\n\n\n\n {children}\n\n\n\n{cell_content}\n```\nNote: I used `mx-auto max-w-md p-4` to make the table responsive and centered, with some basic padding. You can adjust this to fit your specific needs. Also, I used `border-collapse` and `border` classes to style the table borders."}}]}},{"prompt":"Pagination","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a simple pagination component that displays a series of numbered pages, with the current page highlighted. It should be responsive and adaptable to different screen sizes.\n\n**2. What are the individual components that make up the UI?**\n\n* `Pagination`: The main pagination component that contains the pagination links. (standalone)\n* `PaginationLink`: An individual pagination link. (takes children)\n\n**3. What does the HTML for the UI look like?**\n```html\n\n```\n\n**4. What is the HTML for each component?**\n\n* `Pagination`:\n```html\n\n```\n\n* `PaginationLink`:\n```html\n
  • \n {children}\n
    • \n```\nNote: The `total_pages` placeholder in the HTML will be replaced with the actual total number of pages."}}]}},{"prompt":"Modal window with project details and images","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nThe UI should be a modal window that appears when a user clicks on a project. The modal window should have a title with the project name, a brief description of the project, and a grid of images related to the project. The modal window should be responsive and accessible.\n\n**2. What are the individual components that make up the UI?**\n\n* `ProjectModal`: The main modal window component. Takes children.\n* `ProjectTitle`: Displays the title of the project. Standalone.\n* `ProjectDescription`: Displays a brief description of the project. Standalone.\n* `ProjectImageGrid`: A grid of images related to the project. Takes children.\n* `ProjectImage`: A single image related to the project. Standalone.\n\n**3. What does the HTML for the UI look like?**\n\n```\n
    \n
    \n \n \n \n \n \n \n \n \n \n
    \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `ProjectModal`:\n```\n
    \n {children}\n
    \n```\n* `ProjectTitle`:\n```\n

    {project_name}

    \n```\n* `ProjectDescription`:\n```\n

    {project_description}

    \n```\n* `ProjectImageGrid`:\n```\n
      \n {children}\n
    \n```\n* `ProjectImage`:\n```\n
  • \n {image_alt}\n
    • \n```\nNote: `project_name`, `project_description`, `image_url`, and `image_alt` are placeholders for the actual data that will be inserted into the HTML."}}]}},{"prompt":"Toggle control","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI is a toggle control that allows the user to switch between two states, typically represented as \"on\" and \"off\". The control consists of a slider that can be toggled between the two states.\n\n**What are the individual components that make up the UI?**\nThere are two components:\n1. `ToggleControl`: The main component that contains the toggle slider and the labels for the two states. It takes children.\n2. `ToggleLabel`: A component that displays the label for one of the two states. It is a standalone component.\n\n**What does the HTML for the UI look like?**\n```\n
    \n \n On\n Off\n \n
    \n```\n**What is the HTML for each component?**\n```\n\n
    \n
    {children}
    \n
    \n\n\n{label}\n```\nNote: The `label` in the `ToggleLabel` component will be replaced with the actual label text (\"On\" or \"Off\" in this case)."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714510730.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Side menu with categories","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a responsive side menu with categories, collapsed by default on mobile devices and expandable on hover or click. The menu should have a white background, with dark gray text and light gray hover effects. Each category should be an interactive element with a padding to indicate its clickable area.\n\n**2. What are the individual components that make up the UI?**\nHere are the components:\n* `SideMenu`: standalone, a container for the side menu\n* `MenuItem`: takes children, an individual menu item with a category name and subitems\n* `SubMenu`: takes children, a container for subitems\n\n**3. What does the HTML for the UI look like?**\n```\n\n Category 1 {children}\n Category 2 {children}\n Category 3 {children}\n\n```\n**4. What is the HTML for each component?**\nHere are the components:\n* `SideMenu`:\n```\n\n```\n* `MenuItem`:\n```\n\n {menuItemName}\n {children}\n\n```\n* `SubMenu`:\n```\n
      \n {children}\n
    \n```\nNote: The `menuItemUrl` and `menuItemName` placeholders will need to be replaced with actual values."}}]}},{"prompt":"Benefits-Focused Bullet Point List","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a benefits-focused bullet point list:\n\n**1. What should the UI look like?**\nA responsive, mobile-first bullet point list that highlights the benefits of a product or service. The list should be easily readable on both desktop and mobile devices.\n\n**2. What are the individual components that make up the UI?**\n- `BenefitsSection`: A standalone component that wraps the entire benefits section.\n- `BenefitList`: A component that takes children, which is a list of benefits.\n- `BenefitItem`: A standalone component that represents a single benefit item.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n \n \n \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n- `BenefitsSection`:\n```\n
    \n {children}\n
    \n```\n\n- `BenefitList`:\n```\n
      \n {children}\n
    \n```\n\n- `BenefitItem`:\n```\n
  • \n \n {benefit_text}\n
    • \n```\nNote: `benefit_text` is a placeholder for the actual benefit text."}}]}},{"prompt":"Callout Box Text Color","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\nThe UI should be a callout box with a colored text inside. The text color should be customizable.\n\n**2. What are the individual components that make up the UI?**\nThere is only one component: `CalloutBox`. It takes children.\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**4. What is the HTML for each component?**\n```html\n\n
    \n {children}\n
    \n```\n**Note:** The `callout_text_color` class is a Tailwind CSS utility class that will be generated based on the provided text color. For example, if the color is \"orange\", the class would be \"text-orange-500\"."}}]}},{"prompt":"Table column group","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nA table column group is a UI component that defines a group of columns in a table. It should be responsive, accessible, and easy to read. The columns should be evenly spaced and take up the full width of the container.\n\n**What are the individual components that make up the UI?**\n\n* `TableColumnGroup`: A wrapper component that defines a group of columns. Takes children.\n* `TableColumn`: A single column definition. Standalone.\n\n**What does the HTML for the UI look like?**\n```html\n\n \n \n \n \n \n
    \n```\n**What is the HTML for each component?**\n\n* `TableColumnGroup`:\n```html\n\n{children}\n```\n* `TableColumn`:\n```html\n\n```\n**Tailwind CSS classes**\n* `TableColumnGroup`: `w-full`\n* `TableColumn`: `lg:w-{column_width}` (where `column_width` is a variable width)"}}]}},{"prompt":"Call to Action Button","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA prominent, responsive call-to-action (CTA) button that encourages users to take action. The button should be accessible, with a clear and contrasting color scheme, and sufficient spacing around it.\n\n**2. What are the individual components that make up the UI?**\n- `CallToActionButton`: standalone\n\n**3. What does the HTML for the UI look like?**\n```\n\n
    \n \n
    \n```\n**4. What is the HTML for each component?**\n```\n\n\n```\nNote: `{button_text}` is a placeholder for the button text, which should be replaced with the actual text of the call-to-action (e.g. \"Sign up\", \"Learn more\", etc.)"}}]}},{"prompt":"Customer Logos: Showcase trusted partners and clients","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\n\nThe UI should display a section showcasing trusted partners and clients, featuring their logos in a horizontal scrolling carousel. The logos should be stacked horizontally on mobile devices and scrollable horizontally on desktop devices.\n\n**2. What are the individual components that make up the UI?**\n\n* `CustomerLogosSection` (standalone): The container component for the customer logos section.\n* `CustomerLogo` (takes children): A single customer logo component.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n\n
    \n

    Trusted Partners & Clients

    \n
    \n \n \n \n
    \n
    \n```\n\n**4. What is the HTML for each component?**\n\n**CustomerLogosSection**\n```html\n
    \n {children}\n
    \n```\n\n**CustomerLogo**\n```html\n
    \n \"{client_name}\"\n
    \n```\nNote: `logo_url` and `client_name` will be replaced with the actual values for each client."}}]}},{"prompt":"Hero section with animated typography","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\nThe hero section should have a full-width background image with a animated typography that grabs the user's attention. The background image should be blurred to make the text stand out. The animated text should be a heading with a playful, futuristic font. There should be a call-to-action (CTA) button below the heading.\n\n**2. What are the individual components that make up the UI?**\n- `HeroSection`: standalone, contains the entire hero section\n- `AnimatedHeading`: takes children, displays the animated text\n- `CallToActionButton`: standalone, displays the CTA button\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n \n \n \n
    \n```\n**4. What is the HTML for each component?**\n**HeroSection**\n```html\n
    \n
    \n {children}\n
    \n```\n**AnimatedHeading**\n```html\n

    \n {animated_text}\n {animated_subtext}\n

    \n```\n**CallToActionButton**\n```html\n\n```\nNote: The animation for the animated typography will be handled using CSS animations, and the background image URL, animated text, animated subtext, and call to action text will be provided by the developer using this component."}}]}},{"prompt":"Citation","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a possible implementation of a citation component:\n\n**1. What should the UI look like?**\nA citation should be a compact, readable block that displays information about a cited work, such as the author, title, publication date, and publication location. It should be easy to scan and read on various devices.\n\n**2. What are the individual components that make up the UI?**\nWe'll need two components: `Citation` (standalone) and `CitationItem` (takes children).\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n Citation text\n More citation text\n \n
    \n```\n**4. What is the HTML for each component?**\n**Citation**\n```\n
    \n {children}\n
    \n```\n**CitationItem**\n```\n

    {citation_text}

    \n```\nIn this implementation, the `Citation` component provides a container with some basic styling, and the `CitationItem` component represents a single item within the citation, such as the author or title. The `citation_text` placeholder will be replaced with the actual citation text."}}]}},{"prompt":"Navigation Menu Bar","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"1. What should the UI look like?\nThe UI should display a responsive navigation menu bar that adapts to different screen sizes. On larger screens, the menu items should be displayed horizontally, and on smaller screens, the menu items should be stacked vertically and accessible via a toggle button.\n\n2. What are the individual components that make up the UI?\n- `NavigationBar`: standalone component\n- `NavItem`: takes children\n- `NavToggle`: standalone component\n\n3. What does the HTML for the UI look like?\n```\n\n \n Home\n About\n Contact\n\n```\n\n4. What is the HTML for each component?\n- `NavigationBar`:\n```\n\n```\n- `NavItem`:\n```\n{children}\n```\n- `NavToggle`:\n```\n\n```\nNote: You would need to replace `{toggle_icon_svg_path}` with the actual SVG path for the toggle icon."}}]}},{"prompt":"Filter dropdown menu","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA filter dropdown menu that displays a list of filter options when clicked. The menu should be responsive and mobile-friendly.\n\n**2. What are the individual components that make up the UI?**\n- `FilterButton`: standalone, a button that toggles the dropdown menu.\n- `FilterDropdown`: standalone, a dropdown menu that contains filter options.\n- `FilterOption`: takes children, a single filter option in the dropdown menu.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n \n Option 1\n Option 2\n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n- `FilterButton`:\n```\n\n```\n- `FilterDropdown`:\n```\n
      \n {children}\n
    \n```\n- `FilterOption`:\n```\n
  • \n \n {children}\n \n
    • \n```\nNote: I used `caret` from Tailwind CSS to add a basic caret icon to the filter button. You can customize the appearance of the caret as needed."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714517492.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Contact form","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's a simple contact form UI that is responsive, mobile-first, accessible, SEO-friendly, and well-documented:\n\n**1. What should the UI look like?**\nA simple contact form with input fields for name, email, message, and a submit button. The form should be responsive and adapt to different screen sizes.\n\n**2. What are the individual components that make up the UI?**\nHere are the individual components:\n\n* `ContactForm`: A standalone component that wraps the entire form.\n* `FormInput`: A component that takes children (label and input element) as a single input field.\n* `FormSubmitButton`: A standalone component for the submit button.\n\n**3. What does the HTML for the UI look like?**\n```html\n\n \n \n \n \n\n```\n**4. What is the HTML for each component?**\n\n**ContactForm**\n```html\n
    \n

    Get in Touch

    \n {children}\n
    \n```\n**FormInput**\n```html\n
    \n \n \n
    \n```\n**FormSubmitButton**\n```html\n\n```\nNote that I've used Tailwind CSS classes for styling, and I've avoided using JavaScript and excessive `aria-*` attributes. I've also followed best practices for accessibility and SEO-friendliness."}}]}},{"prompt":"Shadows (box)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**What should the UI look like?**\nThe UI should display a box with a shadow effect, giving it a 3D appearance. The box should be responsive and have a subtle animation on hover.\n\n**What are the individual components that make up the UI?**\n\n* `ShadowBox`: a standalone component that represents the box with a shadow effect.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**What is the HTML for each component?**\n```html\n\n
    \n \n
    \n```\nNote: I used TailwindCSS classes to style the component. The `shadow-md` class adds a medium-sized shadow to the box, and the `hover:shadow-lg` class adds a larger shadow on hover. The `transition` class adds a smooth transition effect when the box is hovered."}}]}},{"prompt":"Main content","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe main content section should be a basic container that takes up the full width of the viewport on mobile devices and up to a certain width on larger screens. It should have a maximum width and be centered horizontally with some padding on the sides.\n\n**2. What are the individual components that make up the UI?**\nThere is only one component: `MainContent` (standalone).\n\n**3. What does the HTML for the UI look like?**\n```html\n MAIN CONTENT HERE\n```\n**4. What is the HTML for each component?**\n```html\n
    \n {children}\n
    \n```\nNote: `max-w-md` sets the maximum width to a reasonable value, `mx-auto` centers the container horizontally, and the various `p-*` classes set the padding on different screen sizes."}}]}},{"prompt":"Inputs (text)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA simple text input field with a label and placeholder text.\n\n**2. What are the individual components that make up the UI?**\n- `TextInput`: a standalone component that contains a label and an input field.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n```\n\n
    \n \n \n
    \n```\nNote: `inputId` and `placeholderText` are placeholders for the actual input ID and placeholder text, respectively."}}]}},{"prompt":"Link that opens in a new tab","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nA simple link that opens in a new tab.\n\n**What are the individual components that make up the UI?**\n`ExternalLink`: a standalone component that takes no children.\n\n**What does the HTML for the UI look like?**\n``\n\n**What is the HTML for each component?**\n```html\n\n {link_text}\n\n```\nNote: `link_url` and `link_text` are placeholders for the actual link URL and text."}}]}},{"prompt":"Video transitions","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a possible implementation of a video transitions UI:\n\n**What should the UI look like?**\nThe UI should display a series of video transitions, with each transition showing a before and after state. The video transitions should be responsive, accessible, and easy to navigate.\n\n**What are the individual components that make up the UI?**\n\n* `VideoTransition`: a standalone component that displays a single video transition.\n* `.VideoTransitionsList`: a component that takes children, which is a list of `VideoTransition` components.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n

    Video Transitions

    \n \n \n \n \n \n \n
    \n```\n**What is the HTML for each component?**\n\n* `VideoTransition`:\n```html\n
    \n

    {transition_name}

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n
    \n```\n* `VideoTransitionsList`:\n```html\n
      \n {children}\n
    \n```\nNote: `{transition_name}`, `{before_video_src}`, and `{after_video_src}` are placeholders for the actual values that will be passed to the components."}}]}},{"prompt":"Off-Canvas/Flyout Menus","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\nThe UI should be a responsive off-canvas/flyout menu that slides in from the side of the screen when triggered by a button. The menu should be accessible and mobile-friendly.\n\n**2. What are the individual components that make up the UI?**\n\n* `FlyoutMenu`: A component that wraps the entire off-canvas menu. (Standalone)\n* `FlyoutMenuTrigger`: A button that triggers the flyout menu. (Standalone)\n* `FlyoutMenuContent`: The content of the flyout menu. (Takes children)\n\n**3. What does the HTML for the UI look like?**\n```html\n\n\n \n \n \n\n```\n**4. What is the HTML for each component?**\n\n* `FlyoutMenu`:\n```html\n
    \n {children}\n
    \n```\n* `FlyoutMenuTrigger`:\n```html\n\n```\n* `FlyoutMenuContent`:\n```html\n
    \n {children}\n
    \n```\nNote: In the above code, I've used Tailwind CSS classes to add basic styling to the components. You can adjust these classes to fit your specific design needs."}}]}},{"prompt":"Confirmation prompt","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"I'm ready to generate JSX snippets. I understand that I should only use TailwindCSS for styling, make the UI responsive, mobile-first, accessible, SEO-friendly, well-documented, and as simple as possible. I will avoid using JavaScript, excessive aria-* attributes, libraries, SVG, and inline images.\n\nPlease provide the prompt, and I'll generate the JSX snippets according to the specified format."}}]}},{"prompt":"Prominent section highlighting important or trending content","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nA prominent section that stands out from the rest of the page, highlighting important or trending content. It should have a clear heading, a short description, and a call-to-action (CTA) button. The section should be responsive, mobile-first, and accessible.\n\n**2. What are the individual components that make up the UI?**\n\n* `HeroHeader`: Standalone component for the heading of the prominent section.\n* `HeroDescription`: Standalone component for the short description of the prominent section.\n* `CallToActionButton`: Standalone component for the CTA button.\n* `ProminentSection`: Component that takes children, wrapping the entire prominent section.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n
    \n \n \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `HeroHeader`:\n```html\n

    {header_text}

    \n```\n\n* `HeroDescription`:\n```html\n

    {description_text}

    \n```\n\n* `CallToActionButton`:\n```html\n\n```\n\n* `ProminentSection`:\n```html\n
    \n {children}\n
    \n```"}}]}},{"prompt":"Author archive display","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should display an author's archive, showing their profile information, a list of their articles, and a pagination system to navigate through the articles.\n\n**2. What are the individual components that make up the UI?**\n\n* `AuthorProfile`: A standalone component that displays the author's profile information.\n* `ArticleCard`: A component that takes children, displaying an individual article's information.\n* `Pagination`: A standalone component that displays the pagination system.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n
    \n \n \n \n \n
    \n \n
    \n```\n**4. What is the HTML for each component?**\n\n* `AuthorProfile`:\n```\n
    \n \"{author_name}\"\n
    \n

    {author_name}

    \n

    {author_bio}

    \n
    \n
    \n```\n* `ArticleCard`:\n```\n
    \n

    {article_title}

    \n

    {article_excerpt}

    \n

    {article_date}

    \n
    \n```\n* `Pagination`:\n```\n\n```\nNote: `{author_avatar}`, `{author_name}`, `{author_bio}`, `{article_title}`, `{article_excerpt}`, `{article_date}`, `{current_page}`, and `{total_pages}` are placeholders for actual values."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714577112.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Navigation Menu Item","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a single navigation menu item that can be used in a navigation menu. The item should be a link that displays a text label.\n\n**2. What are the individual components that make up the UI?**\n- `NavItem`: A standalone component that represents a single navigation menu item.\n\n**3. What does the HTML for the UI look like?**\n```\n\n```\n**4. What is the HTML for each component?**\n```\n\n\n {navItemText}\n\n```\nNote: `navItemHref` and `navItemText` are placeholders for the link's href attribute and the text to be displayed, respectively."}}]}},{"prompt":"Picture element","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should display a responsive image with a lazy loading effect, optimized for accessibility and SEO.\n\n**2. What are the individual components that make up the UI?**\nThere is only one component:\n- `PictureElement` (standalone)\n\n**3. What does the HTML for the UI look like?**\n```\n\n```\n\n**4. What is the HTML for each component?**\n```\n\n
    \n \"{alt}\"\n
    \n```\nNote: The `lazy-load` class is used to achieve lazy loading effect, and `data-src` attribute is used to delay the image loading until the image comes into view."}}]}},{"prompt":"Headings and subheadings","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should display a heading and subheading in a responsive and accessible manner, using a clean and minimalistic design.\n\n**What are the individual components that make up the UI?**\n\n* `Heading`: A standalone component that displays a heading.\n* `Subheading`: A standalone component that displays a subheading.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n \n
    \n```\n**What is the HTML for each component?**\n\n* `Heading`:\n```html\n

    {heading_text}

    \n```\n* `Subheading`:\n```html\n

    {subheading_text}

    \n```\nNote: In the above HTML, `{heading_text}` and `{subheading_text}` are placeholders for the actual heading and subheading text, respectively."}}]}},{"prompt":"Image transitions","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI consists of a container that displays a set of images with a transition effect between each image. The images are displayed one at a time, with a smooth transition between each image.\n\n**What are the individual components that make up the UI?**\n1. **ImageTransitionContainer**: A standalone component that wraps the image transition functionality.\n2. **ImageSlide**: A component that takes children, representing a single image slide.\n\n**What does the HTML for the UI look like?**\n```\n\n \"{image1_alt}\"/\n \"{image2_alt}\"/\n \n\n```\n**What is the HTML for each component?**\n1. **ImageTransitionContainer**:\n```\n
    \n {children}\n
    \n```\n2. **ImageSlide**:\n```\n
    \n {children}\n
    \n```\n**Tailwind CSS classes used:**\n\n* `relative` and `absolute` for positioning\n* `w-full` and `h-full` for sizing\n* `flex` and `justify-center` for centering the image\n* `items-center` for vertical centering"}}]}},{"prompt":"Product documentation","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\n\nThe UI should display a product documentation page with a navigation menu, a section for the product description, and a section for the technical specifications.\n\n**2. What are the individual components that make up the UI?**\n\n* `NavigationBar`: A standalone component that displays a navigation menu with links to different sections of the documentation.\n* `ProductDescription`: A standalone component that displays the product description.\n* `TechnicalSpecifications`: A standalone component that displays the technical specifications of the product.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n
    \n \n
    \n \n \n
    \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `NavigationBar`:\n```html\n\n```\n\n* `ProductDescription`:\n```html\n
    \n

    {description_title}

    \n

    {description_text}

    \n
    \n```\n\n* `TechnicalSpecifications`:\n```html\n
    \n

    {technical_specifications_title}

    \n
      \n
    • {specification_item}
      • \n \n
    \n
    \n```"}}]}},{"prompt":"Modal/Dialog Windows","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA modal/dialog window that appears on top of the main content, with a translucent background that dims the background, and a centered box with a title, content, and optional actions (e.g. buttons).\n\n**2. What are the individual components that make up the UI?**\n- `ModalContainer`: standalone, wraps the entire modal dialog window\n- `ModalBackdrop`: standalone, provides the translucent background\n- `ModalDialog`: standalone, contains the modal dialog box\n- `ModalHeader`: standalone, contains the title of the modal dialog box\n- `ModalContent`: takes children, contains the main content of the modal dialog box\n- `ModalActions`: takes children, contains the actions (e.g. buttons) of the modal dialog box\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n \n \n Modal Title\n \n \n \n \n \n \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n**ModalContainer**\n```\n
    \n {children}\n
    \n```\n\n**ModalBackdrop**\n```\n
    \n```\n\n**ModalDialog**\n```\n
    \n {children}\n
    \n```\n\n**ModalHeader**\n```\n

    {modal_title}

    \n```\n\n**ModalContent**\n```\n
    \n {children}\n
    \n```\n\n**ModalActions**\n```\n
    \n {children}\n
    \n```"}}]}},{"prompt":"Title displayed at the top of the browser window or tab, summarizing the content of the page","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\nThe UI should display a title at the top of the browser window or tab, summarizing the content of the page.\n\n**2. What are the individual components that make up the UI?**\n- `PageTitle`: Standalone component. Displays the title of the page.\n\n**3. What does the HTML for the UI look like?**\n```\n\n \n\n```\n\n**4. What is the HTML for each component?**\n- `PageTitle`:\n```\n{page_title}\n```\nNote: The `page_title` placeholder should be replaced with the actual title of the page."}}]}},{"prompt":"Table control","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a snippet of JSX for a table control:\n\n**1. What should the UI look like?**\nThe UI should be a responsive table with a scrollable body and a fixed header. The table should be mobile-first, with a horizontal scroll on smaller screens.\n\n**2. What are the individual components that make up the UI?**\n* `TableControl` (standalone) - the outer container for the table\n* `TableHead` (takes children) - the table header\n* `TableBody` (takes children) - the table body\n* `TableRow` (takes children) - a single row in the table body\n* `TableCell` (takes children) - a single cell in the table body\n\n**3. What does the HTML for the UI look like?**\n```\n\n \n \n Column 1\n Column 2\n Column 3\n \n \n \n \n Cell 1\n Cell 2\n Cell 3\n \n \n Cell 4\n Cell 5\n Cell 6\n \n \n \n\n```\n\n**4. What is the HTML for each component?**\n* `TableControl`:\n```\n
    \n \n {children}\n
    \n
    \n```\n* `TableHead`:\n```\n\n {children}\n\n```\n* `TableBody`:\n```\n\n {children}\n\n```\n* `TableRow`:\n```\n\n {children}\n\n```\n* `TableCell`:\n```\n{children}\n```\nNote that I've used Tailwind classes to style the components, and assumed that the table will have a fixed header and a scrollable body. I've also used simple `div`, `table`, `thead`, `tbody`, `tr`, and `td` elements to keep the HTML structure simple and accessible."}}]}},{"prompt":"Noise (visual)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**What should the UI look like?**\nThe UI should be a noise (visual) component that displays a visually appealing noise pattern, commonly used as a backgrounds or overlays in digital designs. The noise pattern should be responsive and adapt to different screen sizes.\n\n**What are the individual components that make up the UI?**\n- `NoiseComponent` (standalone): The main noise component that renders the noise pattern.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**What is the HTML for each component?**\n**NoiseComponent**\n```html\n
    \n```\nNote: The `bg-noise` class is assumed to be defined in the tailwindcss configuration to generate a noise pattern as the background. The `opacity-50` class is used to set the opacity of the noise pattern to 50%."}}]}},{"prompt":"Toggles","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a Toggle UI component:\n\n**1. What should the UI look like?**\nA toggle component that can be switched on or off, with a sliding animation.\n\n**2. What are the individual components that make up the UI?**\n- **ToggleSwitch**: A standalone component that represents the toggle switch.\n- **ToggleLabel**: A standalone component that represents the label for the toggle switch.\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n Toggle Label\n
    \n```\n\n**4. What is the HTML for each component?**\n**ToggleSwitch**:\n```html\n\n \n\n```\n\n**ToggleLabel**:\n```html\n\n {label_text}\n\n```\nNote: The CSS classes used here are from Tailwind CSS, which helps to achieve a responsive, mobile-first, and accessible UI."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714581213.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Mobile navigation menu","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe mobile navigation menu should be a toggleable menu that slides in from the side of the screen when the hamburger icon is clicked. The menu should be fully responsive and accessible.\n\n**2. What are the individual components that make up the UI?**\n- `NavigationMenu` (standalone): The main navigation menu component.\n- `NavigationMenuToggle` (standalone): The toggle button to open and close the navigation menu.\n- `NavigationMenuItem` (takes children): An individual item in the navigation menu.\n\n**3. What does the HTML for the UI look like?**\n```html\n\n
    \n \n \n \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n**`NavigationMenuToggle`**\n```html\n\n\n```\n\n**`NavigationMenu`**\n```html\n\n
    \n
      \n \n {children}\n
    \n
    \n```\n\n**`NavigationMenuItem`**\n```html\n\n
  • \n \n {menuItemText}\n \n
    • \n```"}}]}},{"prompt":"Time pickers","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a JSX snippet for a time picker UI:\n\n**What should the UI look like?**\nA simple time picker with hour and minute inputs, and an AM/PM toggle.\n\n**What are the individual components that make up the UI?**\n\n* `TimePicker`: a standalone component that contains the entire time picker UI\n* `HourInput`: a standalone component that contains a numeric input for the hour\n* `MinuteInput`: a standalone component that contains a numeric input for the minute\n* `AmPmToggle`: a standalone component that contains a toggle button for AM/PM selection\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**What is the HTML for each component?**\n\n**TimePicker**\n```html\n
    \n \n :\n \n \n
    \n```\n**HourInput**\n```html\n\n```\n**MinuteInput**\n```html\n\n```\n**AmPmToggle**\n```html\n\n```\nNote: `hour`, `minute`, and `am_pm` placeholders should be replaced with actual state values."}}]}},{"prompt":"Labels","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should display a label with customizable text and styles.\n\n**What are the individual components that make up the UI?**\n1. `LabelComponent` (standalone) - displays a single label.\n\n**What does the HTML for the UI look like?**\n```\n\n```\n\n**What is the HTML for each component?**\n```\n\n{labelText}\n```\nNote: In this example, `{labelText}` is a placeholder for the actual text of the label."}}]}},{"prompt":"Date picker calendar","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nThe UI should be a calendar date picker that allows users to select a date. The calendar should be responsive, mobile-friendly, and accessible. It should display a month view with days of the week at the top and a navigation system to move between months.\n\n**2. What are the individual components that make up the UI?**\n\n* `DatePickerCalendar`: standalone component that contains the entire calendar interface.\n* `DayCell`: standalone component that represents a single day in the calendar.\n* `MonthNavigation`: standalone component that allows users to navigate between months.\n\n**3. What does the HTML for the UI look like?**\n\n```\n
    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `DatePickerCalendar`:\n```\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {day_cells}\n \n
    SunMonTueWedThuFriSat
    \n
    \n```\n* `DayCell`:\n```\n\n \n\n```\n* `MonthNavigation`:\n```\n
    \n \n {month_name} {year}\n \n
    \n```\nNote: The `day_cells` placeholder in `DatePickerCalendar` will be replaced with multiple `DayCell` components."}}]}},{"prompt":"Sort by options","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a dropdown select box with options to sort by different criteria. The dropdown should be responsive and accessible on mobile and desktop devices.\n\n**2. What are the individual components that make up the UI?**\n- **SortDropdown**: A dropdown select box that contains options to sort by different criteria. (Takes children)\n- **SortOption**: An individual option in the dropdown select box. (Standalone)\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n Alphabetical\n Newest First\n Oldest First\n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n**SortDropdown**:\n```html\n
    \n \n\n
      \n {children}\n
    \n
    \n```\n\n**SortOption**:\n```html\n
  • \n {option_text}\n
    • \n```"}}]}},{"prompt":"Definition term","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nThe UI should display a single definition term with a bold term and a description. The term and description should be wrapped in a container with a slight padding and a subtle border.\n\n**2. What are the individual components that make up the UI?**\n\n* `DefinitionTerm` (standalone) - The entire definition term component.\n* `Term` (standalone) - The bold term element.\n* `Description` (standalone) - The description element.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n
    \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `DefinitionTerm`:\n```html\n
    {children}
    \n```\n* `Term`:\n```html\n{term_name}\n```\n* `Description`:\n```html\n

    {description_text}

    \n```"}}]}},{"prompt":"Reviews","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the solution:\n\n**1. What should the UI look like?**\nThe UI should display a list of reviews with author names, ratings, and review text. The reviews should be displayed in a card layout with a maximum width of 800px and centered horizontally on larger screens.\n\n**2. What are the individual components that make up the UI?**\nThe UI consists of the following components:\n\n* `ReviewCard`: A standalone component that displays a single review.\n* `ReviewList`: A component that takes children ( ReviewCard components ) and displays them in a list.\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n \n \n \n \n
    \n```\n**4. What is the HTML for each component?**\n\n**ReviewCard**\n```html\n
    \n

    {author_name}

    \n
    \n {rating}/5\n \n
    \n

    {review_text}

    \n
    \n```\n\n**ReviewList**\n```html\n
      \n {children}\n
    \n```"}}]}},{"prompt":"Bi-directional override","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a simple bi-directional override toggle button with two states: left-to-right (LTR) and right-to-left (RTL). The button should be responsive and adapt to different screen sizes.\n\n**2. What are the individual components that make up the UI?**\nThe UI consists of one component:\n\n* `BiDirectionalToggle`: A standalone component that represents the toggle button.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n**4. What is the HTML for each component?**\n```\n\n\n```\nNote: `{ltr_icon}` and `{rtl_icon}` are placeholders for the icons representing LTR and RTL directions, respectively. These icons can be replaced with actual Unicode characters (e.g., `←` and `→`) or other suitable icons."}}]}},{"prompt":"Tag cloud display","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA tag cloud display is a visual representation of keywords or tags, where the size and prominence of each tag indicate its importance or frequency. The UI should display a collection of tags in a cloud-like arrangement, with larger tags indicating more important or frequently used keywords.\n\n**2. What are the individual components that make up the UI?**\nThe individual components are:\n* `TagCloud` (standalone) - the container element for the tag cloud display\n* `Tag` (takes children) - an individual tag element\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n Ruby\n Python\n JavaScript\n \n \n
    \n```\n**4. What is the HTML for each component?**\n\n**TagCloud**\n```\n
    \n {children}\n
    \n```\n\n**Tag**\n```\n{tag_name}\n```\nNote: `{tag_color}`, `{tag_size}`, and `{tag_name}` are placeholders for the actual values, which can be determined by the application logic."}}]}},{"prompt":"Shadows (box)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA box with a shadow effect, which gives the impression of depth.\n\n**2. What are the individual components that make up the UI?**\n- `ShadowBox`: A standalone component that displays a box with a shadow effect.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n- `ShadowBox`:\n```\n
    \n \n
    \n```\nNote: `shadow-md` is a tailwindcss utility class that adds a medium-sized shadow effect to the element."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714587718.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Address","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA simple address component that displays a person's or organization's address in a readable format.\n\n**2. What are the individual components that make up the UI?**\n- `AddressComponent` (standalone)\n\t+ Contains the entire address.\n\n**3. What does the HTML for the UI look like?**\n```\n\n```\n\n**4. What is the HTML for each component?**\n```\n\n
    \n

    {street_address}

    \n

    {city}, {state} {zip_code}

    \n

    {country}

    \n
    \n```\nIn this design, the address is displayed in a simple and clean format, with each line of the address on a new line. The `flex flex-col` classes enable a vertical layout, and the `mb-4` class adds a margin bottom for spacing. The address components (street address, city, state, zip code, and country) are placeholders for actual values."}}]}},{"prompt":"Social Media Follow Button","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the UI design for a Social Media Follow Button:\n\n**What should the UI look like?**\nA simple button with a social media logo and text that says \"Follow\" or a similar call-to-action.\n\n**What are the individual components that make up the UI?**\n\n* `SocialMediaFollowButton`: A standalone component that takes no children.\n\n**What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n**What is the HTML for each component?**\n```\n\n\n```\nNote: `{social_media_color}`, `{social_media_color_hover}`, `{social_media_logo_url}`, `{social_media_name}`, and `{button_text}` are placeholders that would need to be replaced with the actual values for the specific social media platform."}}]}},{"prompt":"Status indicators","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's the requested UI:\n\n**What should the UI look like?**\n\nThe UI consists of a series of status indicators that display different states (e.g. \"active\", \"inactive\", \"success\", \"warning\", \"error\"). Each indicator has a colored circle or a label indicating the status.\n\n**What are the individual components that make up the UI?**\n\n1. `StatusIndicator` (standalone) - a single status indicator\n2. `StatusLabel` (takes children) - a label describing the status\n\n**What does the HTML for the UI look like?**\n\n```html\n
    \n \n \n \n \n \n
    \n```\n\n**What is the HTML for each component?**\n\n**`StatusIndicator`**\n```html\n
    \n {status && {status}}\n
    \n```\n\n**`StatusLabel`**\n```html\n{children}\n```\nNote: The `StatusLabel` component is optional and only rendered if the `status` prop is provided."}}]}},{"prompt":"Z-Index/Stacking Contexts","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should demonstrate a z-index/stacking context example with multiple overlapping elements, showing how elements with higher z-index values appear on top of elements with lower z-index values.\n\n**What are the individual components that make up the UI?**\nThe components are:\n\n* `StackingContextExample`: A standalone component that contains the entire example.\n* `OverlapElement`: A standalone component that represents an overlapping element with a background color and a text label.\n\n**What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n\n**What is the HTML for each component?**\n```\n\n
    \n \n \n \n
    \n\n\n\n

    {label}

    \n\n```\nNote: The `bg_color` and `z_index` variables should be replaced with actual values when used in the component."}}]}},{"prompt":"Text Inputs/Auto-complete","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a text input field with an autocomplete dropdown list that appears below the input field as the user types. The input field should be responsive and adapt to different screen sizes.\n\n**2. What are the individual components that make up the UI?**\nThe UI consists of two components:\n- `AutoCompleteInput`: A standalone component that contains the text input field and the autocomplete dropdown list.\n- `AutoCompleteItem`: A component that represents an individual item in the autocomplete dropdown list. It takes children as the text to be displayed for that item.\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**4. What is the HTML for each component?**\n**`AutoCompleteInput` component:**\n```html\n
    \n \n
      \n {children}\n
    \n
    \n```\n**`AutoCompleteItem` component:**\n```html\n
  • {children}
    • \n```\nNote: The autocomplete dropdown list will be populated dynamically based on the user's input, so the `AutoCompleteItem` components will be rendered dynamically inside the `AutoCompleteInput` component."}}]}},{"prompt":"Infinite Scroll/Pagination","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the solution:\n\n**1. What should the UI look like?**\n\nThe UI should display a list of items that can be scrolled through indefinitely. When the user reaches the end of the list, additional items are loaded and appended to the list, allowing the user to continue scrolling.\n\n**2. What are the individual components that make up the UI?**\n\n* **ListContainer**: A standalone component that wraps the entire list.\n* **ListItem**: A component that represents a single item in the list. It takes children.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n\n Item 1\n Item 2\n \n Item {item_count}\n\n```\n\n**4. What is the HTML for each component?**\n\n* **ListContainer**:\n```html\n
    \n
    \n {children}\n
    \n
    \n```\n\n* **ListItem**:\n```html\n
    \n {children}\n
    \n```\nNote: The styling is kept simple using Tailwindcss utility classes. The `ListContainer` has a max width, margin, and padding to center it. The `ListItem` has padding, a white background, a shadow, and rounded corners to give it a card-like appearance. The `space-y-4` class is used to add a gap between list items."}}]}},{"prompt":"Link with clickable text","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA simple hyperlink with clickable text.\n\n**2. What are the individual components that make up the UI?**\n- `ClickableLink`: standalone component\n\n**3. What does the HTML for the UI look like?**\n```html\n\n```\n**4. What is the HTML for each component?**\n```html\n\n

    {link_text}

    \n```\nNote: I used `text-blue-600` and `hover:text-blue-900` to style the text color of the link, and `transition duration-300` to add a smooth transition effect when hovered."}}]}},{"prompt":"Product variant selector (e.g. size, color)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\n\nThe UI should be a responsive, mobile-first, and accessible product variant selector that allows users to choose different options (e.g. size, color) for a product. The selector should be easy to use, aesthetically pleasing, and provide clear options for the user to select from.\n\n**2. What are the individual components that make up the UI?**\n\n* `VariantSelector`: a standalone component that contains all the variant options.\n* `VariantOption`: a component that represents a single option (e.g. size, color) and takes `label` and `value` props.\n* `VariantGroup`: a component that groups related variant options together (e.g. all size options) and takes `label` and `options` props.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n
    \n

    Select a variant

    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `VariantSelector`:\n```html\n
    \n {children}\n
    \n```\n\n* `VariantOption`:\n```html\n\n```\n\n* `VariantGroup`:\n```html\n
    \n {label}\n {options}\n
    \n```"}}]}},{"prompt":"Particles","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a background of moving particles, which can be used as a visually appealing background for a website or application.\n\n**2. What are the individual components that make up the UI?**\nThere is only one component: `ParticlesBackground`. It is a standalone component.\n\n**3. What does the HTML for the UI look like?**\n```\n\n \n\n```\n**4. What is the HTML for each component?**\n```\n\n
    \n {particles} \n
    \n\n\n
    \n```\nNote: The `particles` placeholder in the `ParticlesBackground` component will be replaced by multiple `Particle` components. The `particle_x`, `particle_y`, `particle_size`, and `particle_color` placeholders will be replaced by actual values."}}]}},{"prompt":"Divider controls","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nA horizontal divider that separates content sections. The divider should be a thin line that spans the full width of the container, with optional text in the middle.\n\n**What are the individual components that make up the UI?**\n\n* `Divider` component: standalone, displays a horizontal divider with optional text.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n \n \n
    \n```\n**What is the HTML for each component?**\n```html\n\n
    \n {text &&

    {text}

    }\n
    \n
    \n```\nNote: The `border-b`, `border-gray-200`, `mb-4`, `text-center`, and `text-gray-500` classes are from Tailwind CSS."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714592534.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Blurs","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's a response to your request:\n\n**1. What should the UI look like?**\nThe UI should display a blur effect on an image. The image should be overlaid with a blurred version of itself, creating a sense of depth.\n\n**2. What are the individual components that make up the UI?**\nThere are two components:\n\n* `BlurImage`: A standalone component that takes no children. It displays an image with a blur effect.\n* `ImageOverlay`: A standalone component that takes no children. It displays the original image without any effects.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n \n
    \n```\n**4. What is the HTML for each component?**\n\n* `BlurImage`:\n```\n\n```\n* `ImageOverlay`:\n```\n\n```\nNote: `image_url` is a placeholder for the actual image URL, which will be replaced with the actual image URL."}}]}},{"prompt":"Abbreviation","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**What should the UI look like?**\nA simple abbreviation component that displays an abbreviation and its expansion. The abbreviation should be wrapped in an `` element and should be styled to be hovered blue. When hovered, the expansion should be visible below the abbreviation.\n\n**What are the individual components that make up the UI?**\n- `Abbreviation`: standalone component\n\n**What does the HTML for the UI look like?**\n```\n\n```\n\n**What is the HTML for each component?**\n```\n\n\n {abbreviationName}\n {abbreviationExpansion}\n\n```"}}]}},{"prompt":"Numbered lists","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should display a numbered list with items that can be wrapped in a container.\n\n**2. What are the individual components that make up the UI?**\n* `OrderedListItem` (standalone) - a single item in the numbered list\n* `OrderedList` (takes children) - the container for the ordered list\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n* `OrderedListItem`:\n```\n
  • {list_item_text}
    • \n```\n* `OrderedList`:\n```\n
      \n {children}\n
    \n```\nNote: `list_item_text` is a placeholder for the text of each list item."}}]}},{"prompt":"Expanded menu displaying a wide range of navigation options or content categories","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should display a wide range of navigation options or content categories in a menu that can be expanded or collapsed. The menu should be responsive, accessible, and easy to navigate.\n\n**What are the individual components that make up the UI?**\n\n* `SidebarNav`: A standalone component that renders a navigational sidebar.\n* `NavItem`: A component that takes children and renders a single navigation item with a label and an optional dropdown menu.\n* `NavDropdown`: A component that takes children and renders a dropdown menu with navigation items.\n\n**What does the HTML for the UI look like?**\n```html\n\n```\n\n**What is the HTML for each component?**\n\n* `SidebarNav`:\n```html\n
    \n {children}\n
    \n```\n\n* `NavItem`:\n```html\n
  • \n {children}\n { NavDropdown ? {children} : null }\n
    • \n```\n\n* `NavDropdown`:\n```html\n
      \n {children}\n
    \n```\nNote: The above HTML uses Tailwind CSS classes to style the components. The `SidebarNav` component uses `flex` and `overflow-y-auto` to create a scrollable sidebar, while the `NavItem` component uses `py-2` to add padding and `hover:text-gray-900` to change the text color on hover. The `NavDropdown` component uses `bg-gray-100` to set the background color and `py-2` to add padding."}}]}},{"prompt":"Education section with degrees and institutions","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a responsive, mobile-first, accessible, and SEO-friendly education section that displays a list of degrees and institutions. The section should have a clear heading, and each degree should be listed with the degree name, institution name, and dates attended.\n\n**2. What are the individual components that make up the UI?**\nThere are two components:\n\n* `EducationSection`: standalone component that contains the entire education section.\n* `DegreeItem`: takes children, represents a single degree item in the list.\n\n**3. What does the HTML for the UI look like?**\n```html\n\n

    Education

    \n
      \n \n \n \n
    \n    \n```\n**4. What is the HTML for each component?**\n\n**EducationSection:**\n```html\n
    \n {children}\n
    \n```\n**DegreeItem:**\n```html\n
  • \n

    {degree_name}

    \n

    {institution_name}

    \n

    {start_date} - {end_date}

    \n {children}\n
    • \n```\nNote: styles are applied using Tailwind CSS classes."}}]}},{"prompt":"Header navigation menu","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a possible implementation of a header navigation menu:\n\n**What should the UI look like?**\nThe UI should be a responsive header navigation menu that collapses into a hamburger menu on small screens. It should have a logo on the left, a navigation menu in the center, and a call-to-action (CTA) button on the right. The navigation menu should have dropdown menus for submenus.\n\n**What are the individual components that make up the UI?**\n\n* `Header`: The top-level component that contains the logo, navigation menu, and CTA button. (Standalone)\n* `Logo`: The logo component. (Standalone)\n* `Nav`: The navigation menu component. (Takes children)\n* `NavItem`: An individual navigation item component. (Takes children)\n* `DropdownMenu`: A dropdown menu component. (Takes children)\n* `CTAButton`: The call-to-action button component. (Standalone)\n\n**What does the HTML for the UI look like?**\n```\n
    \n
    \n \n \n {cta_text}\n
    \n
    \n```\n**What is the HTML for each component?**\n\n* `Header`:\n```\n
    \n {children}\n
    \n```\n* `Logo`:\n```\n\n {logo_text}\n\n```\n* `Nav`:\n```\n\n```\n* `NavItem`:\n```\n
  • \n {children}\n
    • \n```\n* `DropdownMenu`:\n```\n
      \n {children}\n
    \n```\n* `CTAButton`:\n```\n\n```\nNote that I used Tailwind CSS classes to style the components, and used a mobile-first approach to make the UI responsive. I also used semantic HTML elements to make the UI accessible and SEO-friendly."}}]}},{"prompt":"Responsive Listing Grids","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's a responsive listing grid UI:\n\n**What should the UI look like?**\nThe UI should display a list of items in a grid layout, with multiple columns on larger screens and a single column on smaller screens. Each item should have a title, description, and a \"Learn More\" button.\n\n**What are the individual components that make up the UI?**\n\n* `ListingGrid`: A container component that wraps the listing grid. (standalone)\n* `ListingItem`: An individual item in the listing grid. (takes children)\n\n**What does the HTML for the UI look like?**\n```\n
    \n \n \n \n \n \n \n \n \n \n
    \n```\n**What is the HTML for each component?**\n\n* `ListingGrid`:\n```\n
    \n {children}\n
    \n```\n* `ListingItem`:\n```\n
    \n

    {title}

    \n

    {description}

    \n \n
    \n```\nNote: `{title}`, `{description}`, and `{children}` are placeholders for the actual content."}}]}},{"prompt":"Main content area","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"1. What should the UI look like?\nThe main content area should be a full-width container that takes up the entire horizontal space, with a maximum width of 1200px on larger screens. It should have a minimum height of 80vh to ensure it takes up a decent amount of vertical space. The background should be a light gray color (#f7f7f7), and there should be a subtle shadow to give it some depth. The content within should be vertically centered.\n\n2. What are the individual components that make up the UI?\n- `MainContentArea`: standalone component that takes children.\n\n3. What does the HTML for the UI look like?\n```\n
    \n \n
    \n```\n\n4. What is the HTML for each component?\n```\n\n
    \n {children}\n
    \n```"}}]}},{"prompt":"Archive calendar display","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should display a calendar archive, showcasing a list of months and years with corresponding archives. The layout should be responsive, with a mobile-first approach. The design should be simple, clean, and accessible.\n\n**2. What are the individual components that make up the UI?**\nThe components that make up the UI are:\n- `ArchiveCalendar`: The main component that wraps the entire archive calendar display. (Standalone)\n- `ArchiveYear`: Represents a year in the archive calendar. (Takes children)\n- `ArchiveMonth`: Represents a month in the archive calendar. (Standalone)\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**4. What is the HTML for each component?**\n**ArchiveCalendar**\n```html\n
      \n {archiveYears}\n
    \n```\n**ArchiveYear**\n```html\n
  • \n

    {year}

    \n
      \n {children}\n
    \n
    • \n```\n**ArchiveMonth**\n```html\n
  • \n \n {month_name}\n \n
    • \n```\nNote: `{archiveYears}`, `{year}`, `{month_link}`, and `{month_name}` are placeholders for the actual data that will be filled in."}}]}},{"prompt":"Hotel and Attraction Photos","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a responsive, mobile-first, and accessible photo gallery section that displays hotel and attraction photos. The section should have a heading, and the photos should be displayed in a grid layout with captions.\n\n**2. What are the individual components that make up the UI?**\n\n* `PhotoGallery`: a standalone component that displays a gallery of photos.\n* `PhotoCard`: a component that takes children, displaying a single photo with a caption.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n

    Hotel and Attraction Photos

    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `PhotoGallery` component:\n```\n
    \n {children}\n
    \n```\n\n* `PhotoCard` component:\n```\n
    \n {image_alt}\n

    {caption}

    \n
    \n```\nNote: `{image_url}`, `{image_alt}`, and `{caption}` are placeholders for the actual image URL, alt text, and caption, respectively."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714603749.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Mortgage calculator form","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should be a simple mortgage calculator form with input fields for loan amount, interest rate, loan term, and a calculate button. The form should be responsive and accessible.\n\n**What are the individual components that make up the UI?**\n1. `MortgageCalculatorForm`: Standalone component that contains the entire form.\n2. `InputField`: Takes children (label and input element).\n3. `CalculatorButton`: Standalone component that triggers the calculation.\n4. `ResultDisplay`: Takes children (calculated result).\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n \n \n \n \n \n \n \n \n \n Calculate\n \n \n
    \n```\n\n**What is the HTML for each component?**\n**MortgageCalculatorForm**\n```html\n
    \n {children}\n
    \n```\n\n**InputField**\n```html\n
    \n \n {children}\n
    \n```\n\n**CalculatorButton**\n```html\n\n```\n\n**ResultDisplay**\n```html\n

    {children}

    \n```\nNote: The `{lower_camel_case_currency}` placeholder will be replaced with the actual currency (e.g., USD, EUR, etc.)."}}]}},{"prompt":"Frames","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should display a frame-like structure with a border, a header, and a content area. The frame should be responsive, with a maximum width on larger screens.\n\n**2. What are the individual components that make up the UI?**\n- `FrameContainer`: standalone, wraps the entire frame structure\n- `FrameHeader`: standalone, displays the header text\n- `FrameContent`: takes children, displays the content area\n\n**3. What does the HTML for the UI look like?**\n```\n\n \n \n \n \n\n```\n\n**4. What is the HTML for each component?**\n- `FrameContainer`:\n```\n
    \n {children}\n
    \n```\n- `FrameHeader`:\n```\n
    \n

    {header_text}

    \n
    \n```\n- `FrameContent`:\n```\n
    \n {children}\n
    \n```\nNote: `{header_text}` is a placeholder for the header text, which should be replaced with the actual text."}}]}},{"prompt":"Loaders (animated)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should display an animated loader that indicates the system is processing or loading data. The loader should be visually appealing, accessible, and responsive.\n\n**What are the individual components that make up the UI?**\n1. `LoaderRing` (standalone): Displays an animated ring to indicate loading.\n\n**What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n\n**What is the HTML for each component?**\n\n**LoaderRing**\n```\n
    \n
    \n
    \n```\nNote: The `animate-spin` class is a built-in Tailwind CSS utility that animates the element's rotation."}}]}},{"prompt":"Navbar/Mega Menu","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the design for a responsive navbar with a mega menu:\n\n**1. What should the UI look like?**\nThe UI should be a responsive navbar with a logo on the left, navigation items in the middle, and a call-to-action (CTA) button on the right. When a navigation item with a dropdown is hovered, a mega menu should appear below it, containing related links.\n\n**2. What are the individual components that make up the UI?**\n\n* `Navbar`: standalone, contains `NavbarBrand`, `NavbarNav`, and `NavbarCTA`.\n* `NavbarBrand`: standalone, contains the logo and brand name.\n* `NavbarNav`: contains multiple `NavbarNavItem`s.\n* `NavbarNavItem`: takes children, represents a single navigation item.\n* `NavbarCTA`: standalone, contains a call-to-action button.\n* `MegaMenu`: takes children, appears on hover of a `NavbarNavItem`.\n* `MegaMenuItem`: takes children, represents a single item in the mega menu.\n\n**3. What does the HTML for the UI look like?**\n```html\n\n```\n\n**4. What is the HTML for each component?**\n\n* `NavbarBrand`:\n```html\n\n \"Logo\"\n {brand_name}\n\n```\n\n* `NavbarNav`:\n```html\n
      \n {children}\n
    \n```\n\n* `NavbarNavItem`:\n```html\n
  • \n {children}\n {megaMenu}\n
    • \n```\n\n* `MegaMenu`:\n```html\n
    \n
      \n {children}\n
    \n
    \n```\n\n* `MegaMenuItem`:\n```html\n
  • \n {children}\n
    • \n```\n\n* `NavbarCTA`:\n```html\n\n```"}}]}},{"prompt":"Wizard controls","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nThe UI should display a wizard control with previous, next, and finish buttons, allowing users to navigate through a multi-step process. The wizard control should be responsive, mobile-friendly, and accessible.\n\n**2. What are the individual components that make up the UI?**\n\nHere are the individual components:\n\n* `WizardControl`: standalone component that wraps the entire wizard control\n* `WizardStep`: standalone component that represents a single step in the wizard\n* `WizardButton`: standalone component that represents a button (previous, next, or finish)\n\n**3. What does the HTML for the UI look like?**\n\nHere is the HTML for the UI:\n```\n
    \n \n Step 1 content\n Step 2 content\n Step 3 content\n
    \n Previous\n Next\n Finish\n
    \n     \n
    \n```\n**4. What is the HTML for each component?**\n\nHere is the HTML for each component:\n\n**WizardControl**\n```\n
    \n {children}\n
    \n```\n**WizardStep**\n```\n
    \n

    {step_title}

    \n

    {step_description}

    \n {children}\n
    \n```\n**WizardButton**\n```\n\n```\nNote: `{button_type}` can be \"previous\", \"next\", or \"finish\" to apply different styling and behavior to the button."}}]}},{"prompt":"Dropdown option","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"1. What should the UI look like?\nThe UI should be a dropdown option that appears on hover or click, with a toggle icon (e.g. ▼) and a list of options below.\n\n2. What are the individual components that make up the UI?\n- `DropdownOption` (standalone): a single option in the dropdown\n- `DropdownOptionsList` (takes children): a list of dropdown options\n- `Dropdown` (takes children): the entire dropdown component\n\n3. What does the HTML for the UI look like?\n```\n
    \n \n \n \n \n \n
    \n```\n\n4. What is the HTML for each component?\n- `DropdownOption`:\n```\n
  • {option_text}
    • \n```\n- `DropdownOptionsList`:\n```\n
      \n {children}\n
    \n```"}}]}},{"prompt":"Separator controls","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a horizontal separator control, which is a horizontal line or a divider that separates content.\n\n**2. What are the individual components that make up the UI?**\nThere is only one component: `SeparatorControl` which is a standalone component.\n\n**3. What does the HTML for the UI look like?**\n```html\n\n```\n**4. What is the HTML for each component?**\n```html\n\n
    \n```\nIn this implementation, we're using a simple `
    ` element with Tailwind CSS classes to create a horizontal separator. The `w-full` class makes the separator take up the full width of its parent, and `border` and `border-gray-200` classes style the separator as a thin gray line."}}]}},{"prompt":"Canvas element","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should display a canvas element that takes up the full width and height of its parent container. The canvas should have a light gray background color and a 2px black border.\n\n**2. What are the individual components that make up the UI?**\n- `CanvasContainer` (standalone)\n\t+ A container element that wraps the canvas element and provides basic styling.\n- `CanvasElement` (standalone)\n\t+ The actual canvas element that will be used for drawing.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n**CanvasContainer**\n```\n
    \n {children}\n
    \n```\n\n**CanvasElement**\n```\n\n```"}}]}},{"prompt":"Call to Action Link","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\nThe UI should be a call-to-action link that stands out on the page, encouraging users to take a specific action. The link should be prominent, with a clear and actionable text, and a visually appealing design that grabs the user's attention.\n\n**2. What are the individual components that make up the UI?**\nHere are the individual components that make up the UI:\n\n* `CallToActionLink`: A standalone component that renders a call-to-action link. It takes no children.\n\n**3. What does the HTML for the UI look like?**\n```html\n\n \n\n```\n**4. What is the HTML for each component?**\n\n* `CallToActionLink`:\n```html\n{link_text}\n```\nNote: The `link_text` placeholder will be replaced with the actual text of the call-to-action link."}}]}},{"prompt":"Header with logo and navigation menu","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's a possible implementation:\n\n**1. What should the UI look like?**\nA simple header with a logo and navigation menu that is responsive and mobile-friendly. The logo should be on the left and the navigation menu should be on the right.\n\n**2. What are the individual components that make up the UI?**\n- `Header`: a standalone component that wraps around the logo and navigation menu.\n- `Logo`: a standalone component that displays the logo.\n- `Nav`: a component that takes children (navigation items) and renders a navigation menu.\n- `NavItem`: a standalone component that displays a single navigation item.\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n \n
    \n```\n**4. What is the HTML for each component?**\n```\n\n
    \n {children}\n
    \n\n\n\n \"Logo\"\n\n\n\n\n\n\n
  • \n \n {navItemLabel}\n \n
    • \n```\nNote: I used `bg-gray-100` and `text-gray-600` as examples of Tailwind CSS classes, but you can replace them with the actual colors and styles you want to use."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714612540.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Progress bars","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"1. The UI should display a progress bar with a percentage indicator. The progress bar should be responsive, taking up the full width of its container on mobile devices and a maximum of 300px on larger screens.\n\n2. The individual components are:\n- `ProgressBarContainer` (standalone): A container for the progress bar.\n- `ProgressBar` (standalone): A progress bar that fills up to a certain percentage.\n- `PercentageIndicator` (standalone): A text indicator showing the percentage complete.\n\n3. The HTML for the UI looks like this:\n```html\n
    \n \n \n \n \n
    \n```\n\n4. The HTML for each component:\n- `ProgressBarContainer`:\n```html\n
    {children}
    \n```\n- `ProgressBar`:\n```html\n
    \n```\n- `PercentageIndicator`:\n```html\n

    {progress_percentage}%

    \n```\nNote: The `progress_percentage` variable would be replaced with the actual percentage value."}}]}},{"prompt":"Timestamp display for post timing","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nThe UI should display the timestamp of a post in a readable format, such as \"2 hours ago\" or \"Yesterday at 10:45 AM\".\n\n**2. What are the individual components that make up the UI?**\n\n* `PostTimestamp`: A standalone component that displays the timestamp of a post.\n\n**3. What does the HTML for the UI look like?**\n\n```\n
    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `PostTimestamp`:\n```\n{timestamp_text}\n```\nNote: `{timestamp_text}` is a placeholder for the actual timestamp text, which will be generated based on the post's creation time."}}]}},{"prompt":"Event registration form","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the JSX for an event registration form:\n\n**What should the UI look like?**\nA simple event registration form with input fields for name, email, phone number, and a submit button. The form should be responsive and mobile-friendly.\n\n**What are the individual components that make up the UI?**\n\n* ` RegistrationForm` (standalone) - The main registration form container\n* `FormItem` (takes children) - A single form item with a label and input field\n* `SubmitButton` (standalone) - The submit button for the form\n\n**What does the HTML for the UI look like?**\n```\n\n \n \n \n Register\n\n```\n**What is the HTML for each component?**\n\n* `RegistrationForm`:\n```\n
    \n {children}\n
    \n```\n* `FormItem`:\n```\n
    \n \n {children}\n
    \n```\n* `SubmitButton`:\n```\n\n```\nNote: I used the `max-w-md` utility from Tailwind CSS to make the form responsive and mobile-friendly. I also used the `mb-4` utility to add margin bottom to each form item, and the `block` utility to make the label a block element."}}]}},{"prompt":"Table","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here are the responses:\n\n**1. What should the UI look like?**\n\nThe UI should be a responsive, mobile-first table component that displays data in a clean and accessible format. The table should have a simple, minimalistic design with clear typography and adequate spacing between rows and columns.\n\n**2. What are the individual components that make up the UI?**\n\n* `TableRow`: A standalone component representing a single row in the table.\n* `TableCell`: A component that takes children, representing a single cell in the table.\n* `TableHeader`: A standalone component representing the table header row.\n* `TableBody`: A component that takes children, representing the body of the table.\n\n**3. What does the HTML for the UI look like?**\n\n```\n
    \n \n \n \n \n Cell 1\n Cell 2\n Cell 3\n \n \n Cell 4\n Cell 5\n Cell 6\n \n \n
    \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `TableRow`:\n```\n\n {children}\n\n```\n* `TableCell`:\n```\n{children}\n```\n* `TableHeader`:\n```\n\n \n Column 1\n Column 2\n Column 3\n \n\n```\n* `TableBody`:\n```\n\n {children}\n\n```\n\nNote: In the above code, `{children}` is a placeholder for the actual content of the component. You should replace it with the actual content when using the component."}}]}},{"prompt":"Lead Form: Capture prospect information","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a JSX snippet for a lead form:\n\n**What should the UI look like?**\nA responsive lead form with a field for name, email, phone number, and a submit button. The form should be accessible and mobile-friendly.\n\n**What are the individual components that make up the UI?**\n1. `LeadForm`: A standalone component that wraps the entire form.\n2. `FormField`: A component that takes a `label` and `inputType` prop, and renders a label and input field. It can take a `children` node for custom error messages.\n3. `SubmitButton`: A standalone component that renders a submit button with a custom label.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n \n \n \n Submit\n \n
    \n```\n**What is the HTML for each component?**\n1. `LeadForm`:\n```html\n
    \n {children}\n
    \n```\n2. `FormField`:\n```html\n
    \n \n \n {children} \n
    \n```\n3. `SubmitButton`:\n```html\n\n```\nLet me know if this meets your requirements!"}}]}},{"prompt":"Responsive navigation menu for mobile devices","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a responsive navigation menu for mobile devices using Tailwind CSS:\n\n**1. What should the UI look like?**\nThe navigation menu should be a hamburger menu on mobile devices, with a toggle button that expands and collapses the menu. The menu items should be stacked vertically and tak up the full width of the screen.\n\n**2. What are the individual components that make up the UI?**\n* `NavToggle` (standalone): A toggle button that expands and collapses the navigation menu.\n* `NavMenu` (takes children): A container for the navigation menu items.\n* ` NavItem` (takes children): An individual navigation menu item.\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n
    \n \n \n \n \n
    \n
    \n```\n**4. What is the HTML for each component?**\n* `NavToggle`:\n```html\n\n```\n* `NavMenu`:\n```html\n\n```\n* `NavItem`:\n```html\n
  • \n \n {label}\n \n
    • \n```\nNote: The `NavToggle` component uses an SVG icon, but since you mentioned no SVG, I'll assume it's okay to use a simple icon for now. If you want to replace it with a different toggle button, just let me know!"}}]}},{"prompt":"Table caption","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA table caption is a brief description of the table's purpose, displayed above the table.\n\n**2. What are the individual components that make up the UI?**\n- `TableCaption` (standalone)\n\n**3. What does the HTML for the UI look like?**\n```html\n\n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n```html\n\n

    {table_caption_text}

    \n```\nNote: `{table_caption_text}` is a placeholder for the actual caption text. It will be replaced with the actual text at runtime."}}]}},{"prompt":"Map transitions","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the UI design for map transitions:\n\n**What should the UI look like?**\nThe UI should display a map with two locations marked. As the user interacts with the map, the map should transition smoothly between the two locations.\n\n**What are the individual components that make up the UI?**\n1. `MapContainer` (standalone) - The container for the map.\n2. `MapMarker` (takes children) - A marker on the map.\n3. `MapTransition` (takes children) - A transition effect between two locations on the map.\n\n**What does the HTML for the UI look like?**\n```\n
    \n \n \n \n \n \n
    \n```\n**What is the HTML for each component?**\n\n```\n\n
    \n {children}\n
    \n\n\n
    \n {children}\n
    \n\n\n
    \n \n
    \n```\nNote: The `lat` and `lng` variables should be replaced with the actual latitude and longitude values. The transition effect will be implemented using CSS animations and transitions."}}]}},{"prompt":"Grid layout for content","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a possible implementation of a grid layout for content:\n\n**What should the UI look like?**\nThe UI should display a grid of content items, with multiple columns on larger screens and a single column on smaller screens. Each item in the grid should have a consistent layout, with a title, description, and optional image.\n\n**What are the individual components that make up the UI?**\nThe UI is composed of the following components:\n\n* `GridContainer` (standalone): The outermost container of the grid layout.\n* `GridItem` (takes children): An individual item in the grid, containing a title, description, and optional image.\n\n**What does the HTML for the UI look like?**\n```\n\n \n \n \n \n \n \n \n\n```\n**What is the HTML for each component?**\n\n**GridContainer component**\n```\n
    \n {children}\n
    \n```\n**GridItem component**\n```\n
    \n {image_url && (\n {title}\n )}\n

    {title}

    \n

    {description}

    \n
    \n```\nNote that the `image_url` and `title` placeholders should be replaced with the actual values for each grid item."}}]}},{"prompt":"Emphasis","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**UI Description**\n\nThe UI is a simple emphasis element that highlights a piece of text by making it bold and slightly larger.\n\n**Components**\n\n1. `Emphasis` - standalone\n\n**HTML**\n\n```html\n

    This is a sentence with an important word.

    \n```\n\n**Components' HTML**\n\n```html\n\n{children}\n```\n\nIn this design, the `Emphasis` component is a simple span element with bold font and a slightly larger text size. The `children` placeholder will be replaced with the actual text content that needs to be emphasized."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714614868.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Table cells","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a table cell that can be used to display data in a table. It should be responsive, mobile-first, accessible, SEO-friendly, well-documented, and as simple as possible.\n\n**2. What are the individual components that make up the UI?**\nThere are two components: \n- `TableCell` (standalone): a single table cell that can contain text or other elements\n- `Table` (takes children): a table that contains multiple table cells\n\n**3. What does the HTML for the UI look like?**\n```html\n\n \n \n \n \n
    \n```\n**4. What is the HTML for each component?**\n**`TableCell`**\n```html\n{cell_content}\n```\n**`Table`**\n```html\n\n \n {children}\n \n
    \n```"}}]}},{"prompt":"Menu with minimal spacing between items, conserving screen space","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the solution:\n\n**What should the UI look like?**\nThe UI should be a compact menu with minimal spacing between items, conserving screen space.\n\n**What are the individual components that make up the UI?**\n\n* `MenuItem`: a standalone component that represents a single item in the menu.\n* `Menu`: a component that takes children, representing the container for the menu items.\n\n**What does the HTML for the UI look like?**\n```html\n\n```\n**What is the HTML for each component?**\n\n* **Menu**\n```html\n
      \n {children}\n
    \n```\n* **MenuItem**\n```html\n
  • \n {menu_item_label}\n
    • \n```\nNote: You'll need to replace `{menu_item_url}` and `{menu_item_label}` with the actual URL and label for each menu item."}}]}},{"prompt":"Product FAQs","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's a possible implementation of a Product FAQs UI:\n\n**What should the UI look like?**\nThe UI should display a list of frequently asked questions and their corresponding answers about a product. It should be responsive, mobile-first, and easily accessible on various devices.\n\n**What are the individual components that make up the UI?**\n\n* `Faqs` (standalone): The main FAQs container.\n* `FaqItem` (takes children): An individual FAQ item, containing a question and answer.\n* `FaqQuestion` (standalone): A question within an FAQ item.\n* `FaqAnswer` (standalone): An answer within an FAQ item.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n

    Frequently Asked Questions

    \n \n
    \n```\n\n**What is the HTML for each component?**\n\n**FaqList**\n```html\n
      {Faqs}
    \n```\n\n**FaqItem**\n```html\n
  • \n \n \n
    • \n```\n\n**FaqQuestion**\n```html\n

    {question}

    \n```\n\n**FaqAnswer**\n```html\n

    {answer}

    \n```\n\nNote: `{Faqs}` is a placeholder for the list of FAQ items, `{question}` and `{answer}` are placeholders for the actual question and answer text."}}]}},{"prompt":"Retirement planner form","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a simple, responsive form that allows users to input their information to plan for retirement. The form should have fields for the user's age, current income, desired retirement age, and expected expenses in retirement. The form should also have a submit button to calculate the user's retirement plan.\n\n**2. What are the individual components that make up the UI?**\nHere are the individual components:\n\n* `RetirementPlannerForm`: Standalone, main form component.\n* `FormField`: Takes children, a reusable component for each form field.\n* `InputLabel`: Standalone, a component for each label in the form.\n* `InputField`: Standalone, a component for each input field in the form.\n* `SubmitButton`: Standalone, a component for the submit button.\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n \n Age\n \n \n \n Current Income ($)\n \n \n \n Desired Retirement Age\n \n \n \n Expected Expenses in Retirement ($)\n \n \n Calculate Retirement Plan\n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n**RetirementPlannerForm**\n```html\n
    \n {children}\n
    \n```\n\n**FormField**\n```html\n
    \n {children}\n
    \n```\n\n**InputLabel**\n```html\n\n```\n\n**InputField**\n```html\n\n```\n\n**SubmitButton**\n```html\n\n```"}}]}},{"prompt":"Layout divided into multiple columns for organizing content","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should be a responsive layout divided into multiple columns to organize content. The number of columns and the content within each column can vary depending on the screen size, with a maximum of 3 columns on larger screens and a single column on smaller screens.\n\n**What are the individual components that make up the UI?**\n\n1. `GridColumn` - standalone (represents a single column in the grid)\n2. `GridContainer` - takes children (wraps the grid columns)\n\n**What does the HTML for the UI look like?**\n```\n\n \n \n \n\n```\n**What is the HTML for each component?**\n\n**GridContainer**\n```\n
    \n {children}\n
    \n```\n**GridColumn**\n```\n
    \n \n {children}\n
    \n```\nNote: The `md:w-1/2` and `lg:w-1/3` classes in the `GridColumn` component use Tailwind's responsive design utility to adjust the column width based on the screen size. `md` and `lg` represent medium and large screens, respectively."}}]}},{"prompt":"Newsletter archive list","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's a possible implementation:\n\n**1. What should the UI look like?**\nThe UI should be a list of newsletter archives with a title, date, and a link to view each newsletter. The list should be responsive and accessible, with a clear hierarchy of information.\n\n**2. What are the individual components that make up the UI?**\nThere are two components:\n* `NewsletterArchiveList`: A standalone component that renders a list of newsletter archives.\n* `NewsletterArchiveItem`: A component that takes children, representing a single newsletter archive item in the list.\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n

    Newsletter Archive

    \n
      \n \n \n \n
    \n
    \n```\n**4. What is the HTML for each component?**\n**NewsletterArchiveList**\n```html\n
      \n {children}\n
    \n```\n**NewsletterArchiveItem**\n```html\n
  • \n

    {newsletter_title}

    \n

    {publication_date}

    \n View Newsletter\n
    • \n```\nNote that I've used `{newsletter_title}`, `{publication_date}`, and `{newsletter_url}` as placeholders for the actual data. These would need to be replaced with the actual values when rendering the component."}}]}},{"prompt":"Avatars (circular)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's the response:\n\n**1. What should the UI look like?**\n\nA circular avatar with a max width and height of 48px, with a subtle border radius and a soft shadow.\n\n**2. What are the individual components that make up the UI?**\n\n`Avatar`: A standalone component that displays a circular image and optional text.\n\n**3. What does the HTML for the UI look like?**\n\n```\n
    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n```\n\n
    \n \"{alt}\"\n \n {children}\n
    \n```\n\nNote: In the Avatar component, `{src}` and `{alt}` will be replaced with the image URL and alt text respectively. `{children}` will be replaced with any optional text overlay. The `w-12 h-12` classes set the width and height to 48px, and `rounded-full` sets the border radius to 50% for a circular shape."}}]}},{"prompt":"Networking opportunities display","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is a possible implementation of a networking opportunities display:\n\n**What should the UI look like?**\n\nA responsive, mobile-first grid of cards, each representing a networking opportunity. The cards should display the opportunity title, a brief description, and a call-to-action (CTA) to learn more.\n\n**What are the individual components that make up the UI?**\n\n* **NetworkingOpportunityCard**: a standalone component that displays a single networking opportunity.\n* **NetworkingOpportunitiesGrid**: a component that takes children and lays them out in a grid.\n\n**What does the HTML for the UI look like?**\n\n```html\n
    \n

    Networking Opportunities

    \n \n \n \n \n \n \n
    \n```\n\n**What is the HTML for each component?**\n\n* **NetworkingOpportunityCard**:\n```html\n
    \n

    {opportunity_title}

    \n

    {opportunity_description}

    \n Learn More\n
    \n```\n\n* **NetworkingOpportunitiesGrid**:\n```html\n
    \n {children}\n
    \n```\nNote that the `NetworkingOpportunitiesGrid` component simply wraps the child elements in a grid container, and the `NetworkingOpportunityCard` component is a self-contained unit that displays the opportunity details."}}]}},{"prompt":"Alert Close Icon","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA simple alert box with a close icon on the right side. The alert box has a background color and some padding. The close icon is a small 'x' that can be clicked to close the alert.\n\n**2. What are the individual components that make up the UI?**\n`AlertBox` (standalone), `CloseIcon` (standalone)\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n

    {alert_message}

    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n```html\n\n
    \n {children}\n
    \n\n\n\n```\nNote: The `aria-hidden=\"true\"` is used to hide the 'x' character from screen readers, as the button itself provides the functionality."}}]}},{"prompt":"Comment controls","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\n\nThe UI should display a set of comment controls, including a textarea for writing a comment, a button to submit the comment, and an optional cancel button.\n\n**2. What are the individual components that make up the UI?**\n\n* `CommentInput`: a standalone component that contains a textarea for writing a comment.\n* `SubmitButton`: a standalone component that displays a submit button.\n* `CancelButton`: a standalone component that displays a cancel button. Optional.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n
    \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `CommentInput`:\n```html\n\n```\n* `SubmitButton`:\n```html\n\n```\n* `CancelButton`:\n```html\n\n```"}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714658779.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Tabbed Interfaces/Panels","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\n\nThe UI should resemble a tabbed interface with multiple panels. Each panel should have a corresponding tab that, when clicked, displays the content of that panel. The tabs should be horizontally arranged at the top, and the panels should be stacked vertically below. The active tab should be visually differentiated from the others.\n\n**2. What are the individual components that make up the UI?**\n\n* `TabbedInterface`: a standalone component that contains the tabs and panels.\n* `Tab`: a component that represents a single tab; takes children (the tab's label).\n* `Panel`: a component that represents a single panel; takes children (the panel's content).\n* `TabList`: a standalone component that contains the tabs.\n* `TabPanel`: a standalone component that contains a single panel.\n\n**3. What does the HTML for the UI look like?**\n\n```html\n
    \n \n \n Tab 1\n Tab 2\n Tab 3\n \n {panel_1_content}\n {panel_2_content}\n {panel_3_content}\n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n* `TabbedInterface`:\n```html\n
    \n {children}\n
    \n```\n* `Tab`:\n```html\n\n```\n* `Panel`:\n```html\n
    {children}
    \n```\n* `TabList`:\n```html\n
      \n {children}\n
    \n```\n* `TabPanel`:\n```html\n
    {children}
    \n```\nNote: The `hidden` class is used to hide the panels initially. The active panel will be shown using JavaScript, but since we're not using JavaScript, we'll assume the active panel will be shown programmatically."}}]}},{"prompt":"Client testimonials display","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nA responsive, mobile-first testimonial display with a background image, a quote, the author's name, and their job title. The background image should be a subtle gradient that doesn't overpower the text.\n\n**What are the individual components that make up the UI?**\n1. **TestimonialCard**: Standalone component that contains the quote, author's name, and job title.\n2. **QuoteText**: Standalone component that displays the quote text.\n3. **AuthorInfo**: Standalone component that displays the author's name and job title.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n
    \n \n
    \n
    \n```\n\n**What is the HTML for each component?**\n**TestimonialCard**\n```html\n
    \n \n \n
    \n```\n**QuoteText**\n```html\n
    {quote_text}
    \n```\n**AuthorInfo**\n```html\n

    {author_name}, {author_job_title}

    \n```\nNote: The background image URL, quote text, author's name, and job title will be replaced with actual values when the components are used."}}]}},{"prompt":"Tree View/ Folder Navigation","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\n\nThe UI should resemble a folder navigation system, where each item can be either a folder or a file. Folders can be expanded or collapsed, and files are simply clickable items. The navigation should be responsive and adapt to different screen sizes.\n\n**What are the individual components that make up the UI?**\n\n1. `NavItem` (standalone): A single item in the navigation, can be either a folder or a file.\n2. `FolderNavItem` (takes children): A folder item that can be expanded or collapsed, containing child items.\n3. `FileNavItem` (standalone): A file item that can be clicked.\n4. `TreeView` (takes children): The top-level component containing all navigation items.\n\n**What does the HTML for the UI look like?**\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n**What is the HTML for each component?**\n\n1. `NavItem`:\n```\n
  • {itemName}
    • \n```\n2. `FolderNavItem`:\n```\n
  • \n
    \n \n \n \n {folderName}\n
    \n
      {children}
    \n
    • \n```\n3. `FileNavItem`:\n```\n
  • {fileName}
    • \n```\n4. `TreeView`:\n```\n
      {children}
    \n```"}}]}},{"prompt":"Search results","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe search results UI should display a list of search results with a heading, a brief description, and a link to the result page. The UI should be responsive, mobile-first, and accessible.\n\n**2. What are the individual components that make up the UI?**\n\n* `SearchResult` (standalone): represents a single search result\n* `SearchResultsList` (takes children): contains a list of search results\n* `SearchResultHeading` (standalone): heading of a search result\n* `SearchResultDescription` (standalone): brief description of a search result\n* `SearchResultLink` (standalone): link to the result page\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n

    Search Results

    \n \n \n \n \n \n
    \n```\n**4. What is the HTML for each component?**\n\n* `SearchResult`:\n```\n
    \n {result_title}\n {result_description}\n Read more\n
    \n```\n* `SearchResultsList`:\n```\n
      \n {children}\n
    \n```\n* `SearchResultHeading`:\n```\n

    {result_title}

    \n```\n* `SearchResultDescription`:\n```\n

    {result_description}

    \n```\n* `SearchResultLink`:\n```\nRead more\n```\nNote: `{result_title}`, `{result_description}`, and `{result_url}` are placeholders for the actual data that will be rendered."}}]}},{"prompt":"Divider controls","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"1. What should the UI look like?\nThe UI should display a horizontal divider that visually separates content sections. \n\n2. What are the individual components that make up the UI?\n- `DividerComponent` (standalone)\n\n3. What does the HTML for the UI look like?\n```\n
    \n \n \n \n
    \n```\n\n4. What is the HTML for each component?\n```\n\n
    \n```"}}]}},{"prompt":"Loading indicators","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should display a loading indicator that informs the user that the application is processing or loading data. The indicator should be a spinning wheel or a progress bar that appears when the application is fetching data or performing a lengthy operation.\n\n**What are the individual components that make up the UI?**\n1. `LoadingIndicator`: Standalone component that displays a loading animation.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**What is the HTML for each component?**\n1. `LoadingIndicator`:\n```html\n
    \n
    \n
    \n```\nNote: The `animate-spin` class from Tailwind CSS is used to create a spinning animation effect. The `role` attribute is set to `\"progressbar\"` to provide accessibility for screen readers."}}]}},{"prompt":"Outlines (stroke)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a simple outline element with a stroke. The outline should be responsive and accessible.\n\n**2. What are the individual components that make up the UI?**\nThere is only one component: `OutlineStroke`. It is a standalone component.\n\n**3. What does the HTML for the UI look like?**\n```\n\n```\n\n**4. What is the HTML for each component?**\n```\n\n
    \n \n
    \n```\nNote: The `border-2` class is used to add a 2px stroke to the outline element. The `border-solid` class is used to make the stroke solid, and `border-gray-400` sets the stroke color to a medium gray. The `rounded-md` class adds a medium-sized rounded corner to the outline element."}}]}},{"prompt":"Scroll-to-top button","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA fixed-positioned button at the bottom right corner of the screen that becomes visible when the user scrolls down a certain distance. The button is a circular shape with a chevron up icon.\n\n**2. What are the individual components that make up the UI?**\n* `ScrollToTopButton`: a standalone component\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n**4. What is the HTML for each component?**\n```\n\n\n```\nNote: I didn't include the chevron up icon as it's not allowed according to the rules. However, in a real-world scenario, you would replace the `` with an actual SVG icon."}}]}},{"prompt":"Tabbed navigation","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's a UI design for a tabbed navigation:\n\n**1. What should the UI look like?**\nThe UI should have a horizontal tabbed navigation bar with multiple tabs. Each tab should have a label and an optional icon. The active tab should be highlighted, and the inactive tabs should be grayed out. The tabs should be responsive, meaning they should wrap to a new line on smaller screens.\n\n**2. What are the individual components that make up the UI?**\nHere are the components that make up the UI:\n\n* `TabPage`: A standalone component that represents a single tab. It takes children (the tab label and icon).\n* `TabNav`: A component that wraps all the tabs. It takes children (the `TabPage` components).\n\n**3. What does the HTML for the UI look like?**\n```html\n\n```\n**4. What is the HTML for each component?**\n\n**TabPage**\n```html\n
  • \n \n {label}\n {icon && {icon}}\n \n
    • \n```\n**TabNav**\n```html\n
      \n {children}\n
    \n```\nNote: I've used `md`, `lg`, and `xl` classes from Tailwind CSS to make the tabs responsive. I've also used `bg-gray-200` to highlight the active tab. You can customize these classes as needed."}}]}},{"prompt":"Alerts (info)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\nThe UI should display an informational alert message that is responsive, mobile-first, and accessible. The alert should have a light blue background, white text, and an \"X\" icon to close the alert.\n\n**What are the individual components that make up the UI?**\n\n* `InfoAlert`: A standalone component that displays an informational alert message.\n* `CloseIcon`: A standalone component that displays a close icon.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n \n \n \n
    \n```\n**What is the HTML for each component?**\n\n* `InfoAlert`:\n```html\n
    \n {children}\n
    \n```\n* `CloseIcon`:\n```html\n\n```\nNote: Replace `` with the actual SVG code for a close icon."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/old-data/data1714676364.json: -------------------------------------------------------------------------------- 1 | [{"prompt":"Footer Sitemap Title","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here's the solution:\n\n**1. What should the UI look like?**\nThe UI should be a simple footer sitemap title with a heading that reads \"Sitemap\" and is responsive and accessible.\n\n**2. What are the individual components that make up the UI?**\nWe need one component:\n- `SitemapTitle`: A standalone component that renders a heading that reads \"Sitemap\".\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n
    \n```\n\n**4. What is the HTML for each component?**\nHere's the HTML for the `SitemapTitle` component:\n```\n

    Sitemap

    \n```"}}]}},{"prompt":"Alerts (success)","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response for an Alert component:\n\n**1. What should the UI look like?**\n\nA success alert should be a green box with a checkmark icon, providing a brief message to the user indicating a successful operation.\n\n**2. What are the individual components that make up the UI?**\n\n* `SuccessAlert`: A standalone component that displays a success message.\n\n**3. What does the HTML for the UI look like?**\n\n```\n
    \n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n```\n\n
    \n {icon}\n {message}\n \n \n \n
    \n```\n\nNote: The `{icon}` and `{message}` placeholders will be replaced with the actual values."}}]}},{"prompt":"Footer: Copyright and contact information","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"1. What should the UI look like?\nThe footer should display copyright information and contact details, with a clear visual hierarchy. On larger screens, the footer should be divided into two columns, with copyright information on the left and contact details on the right. On smaller screens, the columns should stack vertically.\n\n2. What are the individual components that make up the UI?\n- `Footer`: standalone\n- `CopyrightInfo`: standalone\n- `ContactInfo`: standalone\n- `ContactDetail`: takes children\n\n3. What does the HTML for the UI look like?\n```\n
    \n
    \n
    \n \n
    \n
    \n \n Phone: {phone_number}\n Email: {email_address}\n Address: {physical_address}\n \n
    \n
    \n
    \n```\n\n4. What is the HTML for each component?\n```\n\n
    \n {children}\n
    \n\n\n

    \n © {current_year} {company_name}. All rights reserved.\n

    \n\n\n
    \n {children}\n
    \n\n\n

    {children}

    \n```"}}]}},{"prompt":"Sorting options for posts by top, new, and hot","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"1. What should the UI look like?\nThe UI should display a list of sorting options for posts, with buttons or links for \"Top\", \"New\", and \"Hot\" sorting options.\n\n2. What are the individual components that make up the UI?\n- `SortingOptions`: standalone component that wraps the sorting options\n- `SortingOption`: standalone component that represents a single sorting option (e.g. Top, New, Hot)\n\n3. What does the HTML for the UI look like?\n```\n
    \n \n Top\n New\n Hot\n \n
    \n```\n\n4. What is the HTML for each component?\n```\n\n
    \n {children}\n
    \n\n\n\n```\nNote: You can adjust the styles as needed to fit your desired UI."}}]}},{"prompt":"Navigation system organized into tabs, allowing users to switch between sections of content","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**1. What should the UI look like?**\nThe UI should display a horizontal navigation bar with multiple tabs, each representing a section of content. The tabs should be evenly spaced and styled to indicate which one is currently active. When a user clicks on a tab, the corresponding section of content should be displayed below the navigation bar.\n\n**2. What are the individual components that make up the UI?**\n\n* `NavigationBar`: standalone component that contains the tabs and handles tab switching\n* `Tab`: standalone component that represents a single tab in the navigation bar\n* `TabContent`: component that takes children, displays the content associated with a tab\n\n**3. What does the HTML for the UI look like?**\n```html\n
    \n \n Tab 1\n Tab 2\n Tab 3\n \n {children}\n
    \n```\n**4. What is the HTML for each component?**\n\n* `NavigationBar`:\n```html\n\n```\n* `Tab`:\n```html\n{children}\n\n```\n* `TabContent`:\n```html\n
    {children}
    \n```\nNote: The styles used in the components are from Tailwind CSS, and can be adjusted to fit the specific design requirements."}}]}},{"prompt":"Featured image carousel","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA responsive featured image carousel with navigation controls, displayed as a swipeable slider on mobile devices. The carousel should have a maximum width of 1200px and be horizontally centered on larger screens.\n\n**2. What are the individual components that make up the UI?**\n- `CarouselContainer` (standalone): The outermost container for the carousel.\n- `CarouselSlide` (takes children): A single slide in the carousel, containing an image and optional caption.\n- `CarouselNavigation` (standalone): The navigation controls for the carousel.\n\n**3. What does the HTML for the UI look like?**\n```\n\n
    \n \n \n \"{image_alt_1}\"/\n \"{image_alt_2}\"/\n \n \n \n \n
    \n```\n\n**4. What is the HTML for each component?**\n```\n\n
    \n \n {children}\n
    \n\n\n
    \n \n \"{image_alt}\"/\n \n

    {image_caption}

    \n
    \n\n\n
    \n \n \n \n \n
    \n```\nNote: You'll need to add the necessary JavaScript code to handle the carousel functionality, such as switching between slides and updating the navigation controls. This response only provides the HTML structure and styling using Tailwind CSS."}}]}},{"prompt":"Tab controls","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\n\nThe UI should have a tab control with multiple tabs, each with a label and an associated content area. The active tab should be highlighted, and the corresponding content area should be visible. The tabs and content areas should be responsive and accessible.\n\n**What are the individual components that make up the UI?**\n\n* `TabControl`: A container component that holds the tabs and content areas. (Standalone)\n* `Tab`: A single tab component that includes a label and is clickable. (Standalone)\n* `TabContent`: A component that wraps the content area associated with a tab. (Takes children)\n\n**What does the HTML for the UI look like?**\n\n```html\n
    \n \n Tab 1\n Tab 2\n Tab 3\n \n \n {/* Tab 1 content */}\n {/* Tab 2 content */}\n {/* Tab 3 content */}\n \n
    \n```\n\n**What is the HTML for each component?**\n\n* `TabControl`:\n```html\n
    \n {children}\n
    \n```\n* `Tab`:\n```html\n\n {label}\n\n```\n* `TabContent`:\n```html\n
    {children}
    \n```\nNote: The HTML uses Tailwind CSS classes for styling, and aria-label is included for accessibility."}}]}},{"prompt":"Sliders/Ranges/Scalars","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"**What should the UI look like?**\n\nThe UI should have a range slider component that allows users to select a value within a specified range. The slider should be responsive, accessible, and easy to use on both desktop and mobile devices.\n\n**What are the individual components that make up the UI?**\n\n1. **RangeSlider**: A standalone component that renders a range slider input.\n2. **SliderThumb**: A standalone component that renders a thumb element that can be dragged to select a value.\n3. **SliderTrack**: A standalone component that renders the track on which the slider thumb moves.\n\n**What does the HTML for the UI look like?**\n```html\n
    \n \n
    \n```\n**What is the HTML for each component?**\n\n**RangeSlider**\n```html\n
    \n \n \n { sliderValue }\n
    \n```\n**SliderTrack**\n```html\n
    \n```\n**SliderThumb**\n```html\n
    \n```\nNote: The above HTML uses Tailwind CSS classes to style the components. The `sliderValue` placeholder will be replaced with the actual value selected by the user."}}]}},{"prompt":"Bulleted lists","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nA bulleted list with list items, where each item has a description and an optional link.\n\n**2. What are the individual components that make up the UI?**\n- `BulletedList`: standalone\n- `BulletedListItem`: takes children\n\n**3. What does the HTML for the UI look like?**\n```\n
      \n \n
    \n```\n\n**4. What is the HTML for each component?**\n- `BulletedList`:\n```\n{bulleted_list_items}\n```\n- `BulletedListItem`:\n```\n
  • \n {description}\n {link && Learn more}\n
    • \n```\nNote: `bulleted_list_items` is a placeholder for the list items, `description` is the text description of the list item, and `link` is an optional link for the list item."}}]}},{"prompt":"Citation","response":{"model":"llama3-70b-8192","choices":[{"message":{"role":"assistant","content":"Here is the response:\n\n**1. What should the UI look like?**\nThe UI should be a citation component that displays a quote, author, and source. It should be responsive, mobile-first, and accessible.\n\n**2. What are the individual components that make up the UI?**\nHere are the individual components:\n\n* `QuoteCard`: standalone component that takes children\n* `QuoteText`: standalone component\n* `QuoteAuthor`: standalone component\n* `QuoteSource`: standalone component\n\n**3. What does the HTML for the UI look like?**\n```\n
    \n \n {quote_text}\n - {author_name}\n ({source_title}, {source_date})\n \n
    \n```\n\n**4. What is the HTML for each component?**\n\n**QuoteCard**\n```\n
    \n {children}\n
    \n```\n\n**QuoteText**\n```\n

    {children}

    \n```\n\n**QuoteAuthor**\n```\n

    {children}

    \n```\n\n**QuoteSource**\n```\n

    {children}

    \n```\nNote: I used Tailwind CSS classes to style the components. You can adjust the classes as needed to fit your desired design."}}]}}] -------------------------------------------------------------------------------- /component-generation/data-generation/prompt-generation/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "prompt-generation" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | chrono = "0.4.38" 8 | fundu = "2.0.0" 9 | reqwest = { version = "0.12.4", features = ["json"] } 10 | serde = { version = "1.0.199", features = ["derive"] } 11 | serde_json = "1.0.116" 12 | tokio = { version = "1.37.0", features = ["full"] } 13 | csv = "1.3.0" 14 | once_cell = "1.19.0" 15 | rand = "0.8.5" 16 | regex = "1.10.4" 17 | 18 | component-structure = { path = "../component-structure" } 19 | -------------------------------------------------------------------------------- /component-generation/data-generation/prompt-generation/src/main.rs: -------------------------------------------------------------------------------- 1 | use component_structure::{Chat, Train}; 2 | use fundu::parse_duration; 3 | use rand::prelude::SliceRandom; 4 | use reqwest::Client; 5 | use std::path::PathBuf; 6 | use tokio::{fs::File, io::AsyncWriteExt}; 7 | 8 | const CATEGORY: &[&str] = &[ 9 | "Social media", 10 | "Blog", 11 | "Product", 12 | "E-commerce", 13 | "News", 14 | "Jobs", 15 | "Events", 16 | "Health", 17 | "Finance", 18 | "Education", 19 | "Travel", 20 | "Entertainment", 21 | "Gaming", 22 | "Food", 23 | "Fitness", 24 | "Home", 25 | "Pets", 26 | "Personal", 27 | "Shopping", 28 | "Sports", 29 | "Technology", 30 | "Travel", 31 | ]; 32 | 33 | #[tokio::main] 34 | async fn main() { 35 | let contents = std::fs::read_to_string("prompts_data.json").unwrap(); 36 | let mut responses = serde_json::from_str::>(&contents).unwrap(); 37 | // Find each line that start with `-` or `*` and add that to a list 38 | let mut prompts = Vec::new(); 39 | for x in &responses { 40 | let content = &x.response.choices[0].message.content; 41 | for line in content.lines() { 42 | if let Some(prompt) = line.strip_prefix("- ").or(line.strip_prefix("* ")) { 43 | prompts.push(prompt.to_string()); 44 | } 45 | } 46 | } 47 | 48 | // Write the prompts to a file 49 | std::fs::write("./prompts.json", serde_json::to_string(&prompts).unwrap()).unwrap(); 50 | 51 | let client = Client::new(); 52 | 53 | let mut data_count = 0; 54 | 55 | loop { 56 | let key = std::env::var("GROQ_KEY").unwrap(); 57 | let category = CATEGORY.choose(&mut rand::thread_rng()).unwrap(); 58 | let prompt = format!( 59 | r#"Imagine you are trying to build a website in the category of "{category}". Give me a description of the website first, then describe the UI components that are visual on the screen you would need to build that website. Respond with a flat list of bullet points for me to build those components. 60 | 61 | Keep everything as precise as possible, don't include abstract/general concepts. Don't include anything that is interactive in the UI, just describe the visual elements. Eg. don't include a map, date picker, or a video game. 62 | 63 | Respond with a series of requests like this: 64 | - Create a button with a white outline 65 | - Make a comment component that stands out from the black background 66 | - A simple round avatar icon 67 | - Make a component that displays a grid of children 68 | - Header that includes a search bar and links to the documentation, support, and contact page 69 | - Make something that shows a list of user testimonials"#, 70 | ); 71 | 72 | let Ok(res) = client 73 | .post("https://api.groq.com/openai/v1/chat/completions") 74 | .header("Authorization", format!("Bearer {key}")) 75 | .header("Content-Type", "application/json") 76 | .json(&serde_json::json!({ 77 | "messages": [ 78 | { 79 | "role": "user", 80 | "content": prompt 81 | } 82 | ], 83 | "model": "llama3-70b-8192", 84 | "seed": rand::random::() 85 | })) 86 | .send() 87 | .await 88 | else { 89 | tokio::time::sleep(std::time::Duration::from_secs(60)).await; 90 | continue; 91 | }; 92 | 93 | let remaining_requests: u64 = res 94 | .headers() 95 | .get("x-ratelimit-remaining-requests") 96 | .and_then(|x| x.to_str().ok()) 97 | .and_then(|x| x.parse().ok()) 98 | .unwrap_or(0); 99 | let remaining_tokens: u64 = res 100 | .headers() 101 | .get("x-ratelimit-remaining-tokens") 102 | .and_then(|x| x.to_str().ok()) 103 | .and_then(|x| x.parse().ok()) 104 | .unwrap_or(0); 105 | let reset_requests = res 106 | .headers() 107 | .get("x-ratelimit-reset-requests") 108 | .and_then(|x| x.to_str().ok()); 109 | let reset_requests = reset_requests 110 | .and_then(|reset_requests| parse_duration(reset_requests).ok()) 111 | .unwrap_or(std::time::Duration::from_secs(60)); 112 | let reset_tokens = res 113 | .headers() 114 | .get("x-ratelimit-reset-tokens") 115 | .and_then(|x| x.to_str().ok()); 116 | let reset_tokens = reset_tokens 117 | .and_then(|reset_tokens| parse_duration(reset_tokens).ok()) 118 | .unwrap_or(std::time::Duration::from_secs(60)); 119 | println!("Remaining requests: {}", remaining_requests); 120 | println!("Remaining tokens: {}", remaining_tokens); 121 | println!("Reset requests: {:?}", reset_requests); 122 | println!("Reset tokens: {:?}", reset_tokens); 123 | 124 | if remaining_requests == 0 { 125 | println!("Rate limit reached, sleeping until reset"); 126 | tokio::time::sleep(reset_requests).await; 127 | continue; 128 | } 129 | if remaining_tokens == 0 { 130 | println!("Rate limit reached, sleeping until reset"); 131 | tokio::time::sleep(reset_tokens).await; 132 | continue; 133 | } 134 | 135 | let Ok(chat) = res.json::().await else { 136 | tokio::time::sleep(reset_requests.max(reset_tokens)).await; 137 | continue; 138 | }; 139 | let res = &chat.choices[0].message.content; 140 | println!("{}", res); 141 | 142 | responses.push(Train { 143 | prompt: Default::default(), 144 | response: chat, 145 | }); 146 | 147 | data_count += 1; 148 | 149 | if data_count % 10 == 0 { 150 | // write the data into a file 151 | let folder = PathBuf::from("data"); 152 | let file = folder.join("prompts.json"); 153 | let mut file = File::create(file).await.unwrap(); 154 | let json = serde_json::to_string(&responses).unwrap(); 155 | file.write_all(json.as_bytes()).await.unwrap(); 156 | } 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /component-generation/data-generation/validated.csv: -------------------------------------------------------------------------------- 1 | version https://git-lfs.github.com/spec/v1 2 | oid sha256:317245185e8f79af732751e15c18765ee6c4578804a4f2f5397dad77f98c3bfb 3 | size 1829772 4 | -------------------------------------------------------------------------------- /component-generation/examples/cli.rs: -------------------------------------------------------------------------------- 1 | use component_generation::generate_ui; 2 | use kalosm::language::*; 3 | use syntect::easy::HighlightLines; 4 | use syntect::highlighting::{Style, ThemeSet}; 5 | use syntect::parsing::SyntaxSet; 6 | use syntect::util::{as_24_bit_terminal_escaped, LinesWithEndings}; 7 | 8 | #[tokio::main] 9 | async fn main() { 10 | loop { 11 | let input = prompt_input("What do you want to make? ").unwrap(); 12 | let start_timestamp = std::time::Instant::now(); 13 | let state = generate_ui(&input).await; 14 | 15 | let app = state.app_component(); 16 | print_component(&app); 17 | 18 | for component in state.components() { 19 | print_component(&component.component_string()); 20 | } 21 | 22 | println!("\nTook: {:?}", start_timestamp.elapsed()); 23 | } 24 | } 25 | 26 | fn print_component(component: &str) { 27 | // Load these once at the start of your program 28 | let ps = SyntaxSet::load_defaults_newlines(); 29 | let ts = ThemeSet::load_defaults(); 30 | 31 | let syntax = ps.find_syntax_by_extension("rs").unwrap(); 32 | let mut h = HighlightLines::new(syntax, &ts.themes["base16-ocean.dark"]); 33 | for line in LinesWithEndings::from(component) { 34 | let ranges: Vec<(Style, &str)> = h.highlight_line(line, &ps).unwrap(); 35 | let escaped = as_24_bit_terminal_escaped(&ranges[..], true); 36 | print!("{}", escaped); 37 | } 38 | 39 | println!("\x1b[0m"); 40 | println!("\n"); 41 | } 42 | -------------------------------------------------------------------------------- /component-generation/src/lib.rs: -------------------------------------------------------------------------------- 1 | use core::panic; 2 | use dioxus_autofmt::write_block_out; 3 | use kalosm::language::*; 4 | use regex::Regex; 5 | use dioxus_rsx_rosetta::{rsx_from_html, Dom}; 6 | use std::{collections::HashSet, io::Write}; 7 | use tokio::sync::OnceCell; 8 | 9 | const REGEX_CONSTRAINTS: &str = r#"[^\n]+\ncomponents:\n(- [A-Z][a-z]\w+: [\w\d\.\- ]+\n)+HTML:\n[^\n]+\ncomponent html:(\n[A-Z][a-z]\w+:\n[^\n]+)+<\|eot_id\|>"#; 10 | 11 | async fn model() -> Llama { 12 | let model = FileSource::huggingface( 13 | "Demonthos/llama3".to_string(), 14 | "3387b74827b8429717e7e955efe4eaaea061e178".to_string(), 15 | "llama3-v2.Q4_K_M.gguf".to_string(), 16 | ); 17 | let tokenizer = FileSource::huggingface( 18 | "NousResearch/Meta-Llama-3-8B".to_string(), 19 | "main".to_string(), 20 | "tokenizer.json".to_string(), 21 | ); 22 | Llama::builder() 23 | .with_source(LlamaSource::new(model, tokenizer)) 24 | .build() 25 | .await 26 | .unwrap() 27 | } 28 | 29 | async fn lazy_model() -> Llama { 30 | static MODEL: OnceCell = OnceCell::const_new(); 31 | MODEL.get_or_init(model).await.clone() 32 | } 33 | 34 | pub async fn generate_ui(prompt: &str) -> PartialState { 35 | let llm = lazy_model().await; 36 | let constraints = RegexParser::new(REGEX_CONSTRAINTS).unwrap(); 37 | let prompt = "<|start_header_id|>user<|end_header_id|>".to_string() + prompt.trim() + "<|eot_id|><|start_header_id|>assistant<|end_header_id|>" + "\nDESCRIPTION:\n"; 38 | let mut stream = llm 39 | .stream_structured_text(&prompt, constraints); 40 | 41 | let mut state = PartialState::new(); 42 | 43 | let mut current_line = String::new(); 44 | while let Some(text) = stream.next().await { 45 | current_line.push_str(&text); 46 | let lines = current_line.lines().count(); 47 | if lines > 1 { 48 | let mut lines_iter = current_line.lines(); 49 | for line in (&mut lines_iter).take(lines - 1) { 50 | state.process_line(line); 51 | } 52 | current_line = lines_iter.next().unwrap().to_string(); 53 | } 54 | } 55 | state.process_line(¤t_line); 56 | state.next_section(); 57 | 58 | state 59 | } 60 | 61 | #[derive(Debug)] 62 | pub struct PartialState { 63 | current_section: Section, 64 | pub description: String, 65 | pub html: String, 66 | current_component_index: Option, 67 | components: Vec, 68 | } 69 | 70 | impl PartialState { 71 | fn new() -> Self { 72 | Self { 73 | current_section: Section::Description, 74 | description: String::new(), 75 | html: String::new(), 76 | current_component_index: None, 77 | components: Vec::new(), 78 | } 79 | } 80 | 81 | pub fn app_component(&self) -> String { 82 | let nodes = Dom::parse(&self.html).unwrap(); 83 | let rsx = rsx_from_html(&nodes); 84 | let block = write_block_out(&rsx).unwrap(); 85 | rsx_to_component("app", "", &block) 86 | } 87 | 88 | pub fn components(&self) -> &[Component] { 89 | &self.components 90 | } 91 | 92 | fn next_section(&mut self) { 93 | if let Some(next_section) = self.current_section.next_section() { 94 | #[allow(clippy::single_match)] 95 | match next_section { 96 | Section::Description => { 97 | println!(); 98 | } 99 | Section::Components => { 100 | println!("I think I will need components for this..."); 101 | } 102 | _ => {} 103 | } 104 | 105 | self.current_section = next_section; 106 | } 107 | } 108 | 109 | fn process_line(&mut self, line: &str) { 110 | if line.trim().is_empty() { 111 | return; 112 | } 113 | 114 | if let Some(next_section) = self.current_section.next_section() { 115 | if line.to_lowercase().trim().replace([':', '-'], "") 116 | == next_section.identifier().to_lowercase() 117 | { 118 | self.next_section(); 119 | 120 | return; 121 | } 122 | } 123 | 124 | match self.current_section { 125 | Section::Description => { 126 | self.description.push_str(line); 127 | print!("{}", line); 128 | std::io::stdout().flush().unwrap(); 129 | } 130 | Section::Components => { 131 | let (before_colon, after_colon) = line.trim().split_once(':').unwrap(); 132 | let name = before_colon 133 | .strip_prefix('-') 134 | .unwrap_or(before_colon) 135 | .trim() 136 | .to_string(); 137 | let description = after_colon.trim().to_string(); 138 | let component = Component { 139 | name, 140 | description, 141 | html: String::new(), 142 | }; 143 | println!("- {} ({})", component.name, component.description); 144 | self.components.push(component); 145 | } 146 | Section::HTML => { 147 | self.html.push_str(line.trim()); 148 | } 149 | Section::ComponentHTML => { 150 | let html = line.trim().to_string(); 151 | match self.current_component_index { 152 | Some(index) => { 153 | // Only keep the HTML up to the end of the text 154 | let html = html 155 | .split_once("<|eot_id|>") 156 | .map(|x| x.0) 157 | .unwrap_or(&html); 158 | self.components[index].html = html.to_string(); 159 | self.current_component_index = None; 160 | } 161 | None => { 162 | let trimmed_line = line 163 | .chars() 164 | .filter(|c| c.is_ascii_alphabetic()) 165 | .collect::() 166 | .to_lowercase(); 167 | let index = self 168 | .components 169 | .iter() 170 | .position(|x| x.name.to_lowercase().trim() == trimmed_line) 171 | .unwrap_or_else(|| { 172 | panic!( 173 | "Component {} not found in {:?}", 174 | line, 175 | self.components 176 | .iter() 177 | .map(|x| x.name.to_lowercase()) 178 | .collect::>() 179 | ) 180 | }); 181 | println!("Creating HTML for {}...", self.components[index].name); 182 | self.current_component_index = Some(index); 183 | } 184 | } 185 | } 186 | } 187 | } 188 | } 189 | 190 | #[derive(Debug)] 191 | pub struct Component { 192 | pub name: String, 193 | pub description: String, 194 | pub html: String, 195 | } 196 | 197 | impl Component { 198 | pub fn component_string(&self) -> String { 199 | let nodes = Dom::parse(&self.html).unwrap(); 200 | let rsx = rsx_from_html(&nodes); 201 | let block = write_block_out(&rsx).unwrap(); 202 | rsx_to_component(&self.name, &self.description, &block) 203 | } 204 | } 205 | 206 | #[derive(Debug)] 207 | enum Section { 208 | Description, 209 | Components, 210 | #[allow(clippy::upper_case_acronyms)] 211 | HTML, 212 | ComponentHTML, 213 | } 214 | 215 | impl Section { 216 | fn identifier(&self) -> &str { 217 | match self { 218 | Section::Description => "description", 219 | Section::Components => "components", 220 | Section::HTML => "html", 221 | Section::ComponentHTML => "component html", 222 | } 223 | } 224 | 225 | fn next_section(&self) -> Option
    { 226 | match self { 227 | Section::Description => Some(Section::Components), 228 | Section::Components => Some(Section::HTML), 229 | Section::HTML => Some(Section::ComponentHTML), 230 | Section::ComponentHTML => None, 231 | } 232 | } 233 | } 234 | 235 | fn rsx_to_component(name: &str, description: &str, rsx: &str) -> String { 236 | // Find any parameters for the function 237 | // Find all occurrences of {parameter} inside a string 238 | let re = Regex::new(r#""[^"]*\{([a-z_]+)\}[^"]*"#).unwrap(); 239 | let mut parameters = HashSet::new(); 240 | for cap in re.captures_iter(rsx) { 241 | parameters.insert(cap.get(1).unwrap().as_str().to_string()); 242 | } 243 | 244 | // Replace all occurrences of "{children}" with {children} 245 | let children_regex = Regex::new(r#""\{\s*children\s*\}""#).unwrap(); 246 | let rsx = children_regex.replace_all(rsx, "{children}").to_string(); 247 | 248 | println!("\n"); 249 | 250 | let mut component_string = String::new(); 251 | // Print the docstring 252 | if !description.trim().is_empty() { 253 | component_string += &format!("/// {}", description); 254 | } 255 | component_string += "\n#[component]"; 256 | 257 | // Print the function signature 258 | component_string += &format!("\nfn {}(", name); 259 | for (i, parameter) in parameters.iter().enumerate() { 260 | if parameter == "children" { 261 | component_string += "children: Element"; 262 | } else { 263 | component_string += &format!("{parameter}: String"); 264 | } 265 | if i < parameters.len() - 1 { 266 | component_string += ", "; 267 | } 268 | } 269 | component_string += ") -> Element {\n"; 270 | component_string += " rsx! {"; 271 | // Add an extra level of indentation to the RSX 272 | let rsx = rsx 273 | .lines() 274 | .map(|line| " ".to_string() + line) 275 | .collect::>() 276 | .join("\n"); 277 | component_string += &rsx; 278 | component_string += "\n }\n}"; 279 | 280 | component_string 281 | } 282 | -------------------------------------------------------------------------------- /demo.mov: -------------------------------------------------------------------------------- 1 | version https://git-lfs.github.com/spec/v1 2 | oid sha256:dccf65cb445b67f3cf79f45758805cc992e3b9a9f09d38905207b14d7d1d1b66 3 | size 251831346 4 | -------------------------------------------------------------------------------- /experiments/prompting/response.md: -------------------------------------------------------------------------------- 1 | Sure, here's a marketing page created with Tailwind CSS in RSX for the Kalosm library: 2 | 3 | ```rust 4 | fn MarketingPage() -> Element { 5 | rsx! { 6 | div { 7 | // Navbar 8 | nav class: "bg-blue-500 p-4" { 9 | div class: "container mx-auto flex justify-between items-center" { 10 | // Logo 11 | div class: "text-white font-bold text-xl" { "Kalosm" } 12 | // Navigation links 13 | div class: "flex space-x-4" { 14 | a class: "text-white hover:text-gray-200" { "Home" } 15 | a class: "text-white hover:text-gray-200" { "Features" } 16 | a class: "text-white hover:text-gray-200" { "Docs" } 17 | a class: "text-white hover:text-gray-200" { "GitHub" } 18 | } 19 | } 20 | } 21 | 22 | // Hero section 23 | div class: "bg-gray-100 py-20" { 24 | div class: "container mx-auto text-center" { 25 | h1 class: "text-4xl font-bold text-gray-800 mb-4" { "Integrate Local LLMs with Ease" } 26 | p class: "text-lg text-gray-600" { "Kalosm simplifies the process of integrating local learning management systems (LLMs) into your application." } 27 | div class: "mt-8" { 28 | a class: "bg-blue-500 text-white font-bold px-6 py-3 rounded-md hover:bg-blue-600" { "Get Started" } 29 | } 30 | } 31 | } 32 | 33 | // Features section 34 | div class: "py-20" { 35 | div class: "container mx-auto text-center" { 36 | h2 class: "text-3xl font-bold text-gray-800 mb-8" { "Key Features" } 37 | div class: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" { 38 | // Feature 1 39 | div class: "p-8 bg-white rounded-lg shadow-md" { 40 | // Icon 41 | svg class: "w-12 h-12 mx-auto text-blue-500" { 42 | use xlink_href: "#icon1" {} 43 | } 44 | h3 class: "text-xl font-bold text-gray-800 mt-4" { "Easy Integration" } 45 | p class: "text-gray-600 mt-2" { "Quickly integrate local LLMs into your app without hassle." } 46 | } 47 | // Feature 2 48 | div class: "p-8 bg-white rounded-lg shadow-md" { 49 | // Icon 50 | svg class: "w-12 h-12 mx-auto text-blue-500" { 51 | use xlink_href: "#icon2" {} 52 | } 53 | h3 class: "text-xl font-bold text-gray-800 mt-4" { "Customizable" } 54 | p class: "text-gray-600 mt-2" { "Tailor Kalosm to fit your specific requirements with ease." } 55 | } 56 | // Feature 3 57 | div class: "p-8 bg-white rounded-lg shadow-md" { 58 | // Icon 59 | svg class: "w-12 h-12 mx-auto text-blue-500" { 60 | use xlink_href: "#icon3" {} 61 | } 62 | h3 class: "text-xl font-bold text-gray-800 mt-4" { "Seamless Experience" } 63 | p class: "text-gray-600 mt-2" { "Provide your users with a seamless learning experience." } 64 | } 65 | } 66 | } 67 | } 68 | 69 | // Footer 70 | footer class: "bg-gray-800 text-white py-8" { 71 | div class: "container mx-auto text-center" { 72 | p { "Copyright © 2024 Kalosm. All rights reserved." } 73 | } 74 | } 75 | } 76 | } 77 | } 78 | ``` 79 | 80 | This RSX code creates a marketing page for the Kalosm library, featuring a navbar, hero section, key features section, and footer, all styled with Tailwind CSS classes. -------------------------------------------------------------------------------- /experiments/prompting/rsx.md: -------------------------------------------------------------------------------- 1 | # Describing the UI 2 | Dioxus is a declarative framework. This means that instead of telling Dioxus what to do (e.g. to "create an element" or "set the color to red") we simply declare what we want the UI to look like using RSX. 3 | 4 | You have already seen a simple example of RSX syntax in the "hello world" application: 5 | 6 | ```rust 7 | // define a component that renders a div with the text "Hello, world!" 8 | fn App() -> Element { 9 | rsx! { div { "Hello, world!" } } 10 | } 11 | ``` 12 | Here, we use the rsx! macro to declare that we want a div element, containing the text "Hello, world!". Dioxus takes the RSX and constructs a UI from it. 13 | 14 | RSX Features 15 | RSX is very similar to HTML in that it describes elements with attributes and children. Here's an empty button element in RSX, as well as the resulting HTML: 16 | 17 | ```rust 18 | rsx! { 19 | button { 20 | // attributes / listeners 21 | // children 22 | "Hello, World!" 23 | } 24 | } 25 | ``` 26 | # Attributes 27 | Attributes (and event handlers) modify the behavior or appearance of the element they are attached to. They are specified inside the {} brackets, using the name: value syntax. You can provide the value as a literal in the RSX: 28 | 29 | ```rust 30 | rsx! { 31 | img { 32 | src: "https://avatars.githubusercontent.com/u/79236386?s=200&v=4", 33 | class: "primary_button", 34 | width: "10px" 35 | } 36 | } 37 | ``` 38 | 39 | Some attributes, such as the type attribute for input elements won't work on their own in Rust. This is because type is a reserved Rust keyword. To get around this, Dioxus uses the r# specifier: 40 | 41 | ```rust 42 | rsx! { input { r#type: "text", color: "red" } } 43 | ``` 44 | Note: All attributes defined in dioxus-html follow the snake_case naming convention. They transform their snake_case names to HTML's camelCase attributes. 45 | 46 | Note: Styles can be used directly outside of the style: attribute. In the above example, color: "red" is turned into style="color: red". 47 | 48 | ## Conditional Attributes 49 | You can also conditionally include attributes by using an if statement without an else branch. This is useful for adding an attribute only if a certain condition is met: 50 | 51 | let large_font = true; 52 | rsx! { div { class: if large_font { "text-xl" }, "Hello, World!" } } 53 | 54 | # Custom Attributes 55 | Dioxus has a pre-configured set of attributes that you can use. RSX is validated at compile time to make sure you didn't specify an invalid attribute. If you want to override this behavior with a custom attribute name, specify the attribute in quotes: 56 | 57 | ```rust 58 | rsx! { div { "style": "width: 20px; height: 20px; background-color: red;" } } 59 | ``` 60 | # Special Attributes 61 | While most attributes are simply passed on to the HTML, some have special behaviors. 62 | 63 | ## The HTML Escape Hatch 64 | If you're working with pre-rendered assets, output from templates, or output from a JS library, then you might want to pass HTML directly instead of going through Dioxus. In these instances, reach for dangerous_inner_html. 65 | 66 | For example, shipping a markdown-to-Dioxus converter might significantly bloat your final application size. Instead, you'll want to pre-render your markdown to HTML and then include the HTML directly in your output. We use this approach for the Dioxus homepage: 67 | 68 | ```rust 69 | // this should come from a trusted source 70 | let contents = "live dangerously"; 71 | 72 | rsx! { div { dangerous_inner_html: "{contents}" } } 73 | ``` 74 | live dangerously 75 | Note! This attribute is called "dangerous_inner_html" because it is dangerous to pass it data you don't trust. If you're not careful, you can easily expose cross-site scripting (XSS) attacks to your users. 76 | 77 | If you're handling untrusted input, make sure to sanitize your HTML before passing it into dangerous_inner_html – or just pass it to a Text Element to escape any HTML tags. 78 | 79 | ## Boolean Attributes 80 | Most attributes, when rendered, will be rendered exactly as the input you provided. However, some attributes are considered "boolean" attributes and just their presence determines whether they affect the output. For these attributes, a provided value of "false" will cause them to be removed from the target element. 81 | 82 | So this RSX wouldn't actually render the hidden attribute: 83 | 84 | ```rust 85 | rsx! { div { hidden: false, "hello" } } 86 | ``` 87 | 88 | Not all attributes work like this however. Only the following attributes have this behavior: "allowfullscreen", "allowpaymentrequest", "async", "autofocus", "autoplay", "checked", "controls", "default", "defer", "disabled", "formnovalidate", "hidden", "ismap", "itemscope", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "selected", "truespeed". 89 | For any other attributes, a value of "false" will be sent directly to the DOM. 90 | 91 | Interpolation 92 | Similarly to how you can format Rust strings, you can also interpolate in RSX text. Use {variable} to Display the value of a variable in a string, or {variable:?} to use the Debug representation: 93 | ```rust 94 | let coordinates = (42, 0); 95 | let country = "es"; 96 | rsx! { 97 | div { 98 | class: "country-{country}", 99 | left: "{coordinates.0:?}", 100 | top: "{coordinates.1:?}", 101 | // arbitrary expressions are allowed, 102 | // as long as they don't contain `{}` 103 | div { "{country.to_uppercase()}" } 104 | div { "{7*6}" } 105 | // {} can be escaped with {{}} 106 | div { "{{}}" } 107 | } 108 | } 109 | ``` 110 | # Children 111 | To add children to an element, put them inside the {} brackets after all attributes and listeners in the element. They can be other elements, text, or components. For example, you could have an ol (ordered list) element, containing 3 li (list item) elements, each of which contains some text: 112 | ```rust 113 | rsx! { 114 | ol { 115 | li { "First Item" } 116 | li { "Second Item" } 117 | li { "Third Item" } 118 | } 119 | } 120 | ``` 121 | Fragments 122 | You can render multiple elements at the top level of rsx! and they will be automatically grouped. 123 | ```rust 124 | rsx! { 125 | p { "First Item" } 126 | p { "Second Item" } 127 | } 128 | ``` 129 | 130 | Expressions 131 | You can include arbitrary Rust expressions as children within RSX by surrounding your expression with {}s. Any expression that implements IntoDynNode can be used within rsx. This is useful for displaying data from an iterator: 132 | ```rust 133 | let text = "Dioxus"; 134 | rsx! { 135 | span { 136 | {text.to_uppercase()}, 137 | // create a list of text from 0 to 9 138 | {(0..10).map(|i| rsx!{ "{i}" })} 139 | } 140 | } 141 | ``` 142 | # Loops 143 | In addition to iterators you can also use for loops directly within RSX: 144 | ``` 145 | rsx! { 146 | // use a for loop where the body itself is RSX 147 | div { 148 | // create a list of text from 0 to 9 149 | for i in 0..3 { 150 | // NOTE: the body of the loop is RSX not a rust statement 151 | div { "{i}" } 152 | } 153 | } 154 | // iterator equivalent 155 | div { {(0..3).map(|i| rsx!{ div { "{i}" } })} } 156 | } 157 | ``` 158 | # If statements 159 | You can also use if statements without an else branch within RSX: 160 | ```rust 161 | rsx! { 162 | // use if statements without an else 163 | if true { 164 | div { "true" } 165 | } 166 | } 167 | ``` 168 | 169 | Create a marketing page with tailwind css in rsx for the kalosm library which makes it easy to integrate local llms into your app -------------------------------------------------------------------------------- /output.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    {`Welcome to Kalosm 0.2`}

    4 |

    {`Kalosm is an open-source Rust framework for local machine learning`}

    5 | 6 |
    7 |
    -------------------------------------------------------------------------------- /src/lib.rs: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------