Flush out content of "Getting Started"

src/data/Footer.yaml

@@ -6,9 +6,7 @@ footerCopyrightText: Copyright © 2024 All Rights Reserved.
 
 # Control the MLJ slogan. When multiple slogans are written, one is chosen randomly:
 footerTexts:
-  - Are you making the right use of your data? Let's find out.
-  - From pipelines to networks all in one package
-  - A package for elegant and generic machine learning
+  - A package for general machine learning
 
 # Control the footer links shown in the bottom right of the footer
 # target: self means to open in the same tab and blank means to open in a new tab

src/data/HomePage.yaml

@@ -1,5 +1,5 @@
 packageName: Machine Learning in Julia
-packageDescription: A Julia package for general, composable and elegant machine learning at scale.
+packageDescription: A Julia package for general, composable machine learning at scale.
 
 extraButton:
   name: Star
@@ -11,52 +11,102 @@ sections:
   - name: MLJ Features
     subtitle: ''
   - name: MLJ Partners
-    subtitle: There is a glimmer of light in the sky
+    subtitle: ''
 
 tours:
-  - name: Install the MLJ Pacakge
+  - name: Install the MLJ Package
     code: |
-      # Create a new environment (optional)
-      using Pkg;
+      using Pkg
+
+      # Create a new environment (optional):
       Pkg.activate("mlj-env", shared=true)
 
       # Install MLJ
       Pkg.add("MLJ")
 
-      # Test Installation (optional)
+      # Install DataFrames (needed for demo):
+      Pkg.add("DataFrames")
+
+      # Test installation (optional):
       Pkg.test("MLJ")
 
+      # Use these packages:
+      using MLJ
+      import DataFrames # names must be qualified
+
+  - name: Load Some Data
+    code: |
+      # Grab iris dataset from the openml.org repository:
+      data = OpenML.load(61)
+
+      # Convert to a data frame:
+      df = DataFrames.DataFrame(data)
+
+      # Inspect column names and types:
+      schema(df)
+
+      # Split data into target (vector, y) and
+      # features (dataframe, X) & randomize obervations
+      y, X = unpack(df, ==(:class); rng=123)
+
   - name: Train Your First Model
     code: |
-      # 1. Load the Model
-      Tree = @iload DecisionTreeClassifier
+      # Load the model type:
+      KNN = @iload KNNClassifier
 
-      # 2. Create an instance of the model
-      tree = Tree()
+      # Create an instance with default hyperparameters:
+      knn = KNN()
 
-      # 3. Wrap the model and data in a machine
-      mach = machine(tree, X, y)
+      # Wrap the model and data in a machine:
+      mach = machine(knn, X, y)
 
-      # 4. Fit the machine
+      # Fit the machine:
       fit!(mach)
 
-      # 5. Make predictions
+      # Get training predictions:
       yhat = predict(mach, X)
 
   - name: Evaluate Your Model
     code: |
-      # Cross-validation code would go here
+      # Evaluate with cross validation:
+      evaluate!(
+          mach,
+          resampling=CV(nfolds=5),
+          measures=[log_loss, accuracy],
+      )
+
+      # Evaluate with Monte Carlo,
+      # target-stratified cross validation:
+      evaluate!(
+          mach,
+          resampling=StratifiedCV(nfolds=5, rng=456),
+          repeats=2,
+          measures=[log_loss, accuracy],
+      )
 
   - name: Hyperparameter Tuning
     code: |
-      # Hyperparameter tuning code would go here
+      # Define a hyperparameter range:
+      r = range(knn, :K, lower=3, upper=10)
 
+      # Create self-tuning version of model:
+      tuned_knn = TunedModel(
+          knn, range=r, tuning=Grid(goal=8), measure=log_loss)
+
+      # Train the wrapped model:
+      mach = machine(tuned_knn, X, y) |> fit!
+
+      # Predict using optimal model:
+      predict(mach, X)
+
+      # Inspect the best model:
+      knn_best = fitted_params(mach).best_model
 
 features:
   - title: Choosing Models
     content: >-
       A Model Registry stores detailed metadata for [over 200 models](/machines) and
-      documentation can be searched without loading model code. 
+      documentation can be searched without loading model code.
     code: |
       # identify models suitable for your data
       julia> X, y = @load_iris
@@ -74,7 +124,7 @@ features:
       # retrieve docs without code import:
       julia> doc("PCA", pkg="MultivariateStats")
 
-  - title: Meta-algorithms 
+  - title: Meta-algorithms
     content: >-
       For improved composability, and better data hygiene, an extensive number of
       **meta-algorithms** are implemented as **model wrappers**:
@@ -171,7 +221,7 @@ features:
       implemented using learning networks, which demonstrates their flexibility.
     code: |
       # wrap data in "source nodes":
-      X, y = source.(X, y) 
+      X, y = source.(X, y)
 
       # a normal MLJ workflow, with `fit` calls omitted:
       mach1 = machine(model1, X, y)
@@ -182,9 +232,9 @@ features:
 
       # train all models with one call:
       fit!(y, acceleration=CPUThreads())
-      
+
       # blended prediction for new data:
-      y(Xnew) 
+      y(Xnew)
 
   - title: Iteration control
     content: >-

src/lib/HomePage/Features.svelte

@@ -7,6 +7,7 @@
 	import FaPlay from 'svelte-icons/fa/FaPlay.svelte';
 	import IoIosAt from 'svelte-icons/io/IoIosAt.svelte';
 	import SvelteMarkdown from 'svelte-markdown';
+	import IoIosCopy from 'svelte-icons/io/IoIosCopy.svelte';
 
 	// Reactive state to track the selected tab index
 	let selectedTabIndex = 0;
@@ -63,6 +64,9 @@
 					<h1 style="color: white; font-weight: 600;">{tab.title}</h1>
 					{#if tab.code && !isLoading}
 						<div class="code-container">
+							<button on:click={() => navigator.clipboard.writeText(tab.code)} class="copy-icon">
+								<IoIosCopy />
+							</button>
 							{@html codeHTMLs[index]}
 						</div>
 					{/if}
@@ -173,6 +177,7 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: center;
+		position: relative;
 		// change to column when screen is small
 		@media only screen and (max-width: 900px) {
 			flex-direction: column;
@@ -199,4 +204,20 @@
 			opacity: 0.95;
 		}
 	}
+
+	.copy-icon {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		color: rgb(122, 61, 126);
+		cursor: pointer;
+		font-size: 0.7rem;
+		transition: color 0.3s;
+		width: 1.3rem;
+		z-index: 99;
+	}
+
+	.copy-icon:hover {
+		color: rgb(122, 61, 126, 0.5);
+	}
 </style>

src/lib/HomePage/Hero.svelte

@@ -8,6 +8,7 @@
 	import CardSlider from './CardSlider.svelte';
 	import Features from './Features.svelte';
 	import FaStar from 'svelte-icons/fa/FaStar.svelte';
+	import IoIosCopy from 'svelte-icons/io/IoIosCopy.svelte';
 
 	// Components
 	import MarkdownIt from 'markdown-it';
@@ -111,7 +112,12 @@
 							<div>
 								{#each homeData['tours'] as tour, ind}
 									{#if ind == 0}
-										{@html codeHTMLs[hoveredIndex]}
+										<div class="code-container">
+											<button class="copy-icon">
+												<IoIosCopy />
+											</button>
+											{@html codeHTMLs[hoveredIndex]}
+										</div>
 									{/if}
 								{/each}
 							</div>
@@ -139,7 +145,7 @@
 			style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 1rem;"
 		>
 			<h1 style="text-align: left; margin-bottom: 1rem;">{homeData['sections'][2]['name']}</h1>
-			<p>{homeData['sections'][0]['subtitle']}</p>
+			<p>{homeData['sections'][2]['subtitle']}</p>
 		</div>
 		<CardSlider images={homeData['users']} />
 	</div>
@@ -306,9 +312,10 @@
 				display: flex;
 				flex-direction: row;
 				gap: 13rem;
+				position: relative;
 
-				justify-content: center;
-				height: 400px;
+				justify-content: flex-start;
+				height: 450px;
 				// change to column when screen is small
 				@media only screen and (max-width: 900px) {
 					flex-direction: column;
@@ -322,21 +329,29 @@
 				}
 
 				:global(pre) {
+					display: block;
 					word-wrap: break-word;
+					height: 100%;
 					margin-top: 3rem !important;
 					margin-bottom: 2rem;
-					padding: 2rem 5rem 2rem 0rem;
+					text-align: left;
+					padding: 3rem 5rem 3rem 2rem;
 					border-radius: 1rem;
-					width: 600px;
+					width: 700px;
 					display: flex;
 					align-items: center;
 					justify-content: center;
+					overflow: auto;
+					white-space: pre;
+					overflow-x: auto;
+					overflow-y: hidden;
+
 					@media only screen and (max-width: 1000px) {
 						width: '' !important;
 						font-size: 0.8rem;
 					}
 					@media only screen and (max-width: 600px) {
-						width: '' !important;
+						width: auto !important;
 						font-size: 0.7rem;
 					}
 
@@ -355,11 +370,61 @@
 					}
 				}
 			}
+			// .code-container {
+			// 	display: flex;
+			// 	flex-direction: row;
+			// 	justify-content: center;
+			// 	// change to column when screen is small
+			// 	@media only screen and (max-width: 900px) {
+			// 		flex-direction: column;
+			// 	}
+			// 	// min-height: 400px;
+			// 	@media only screen and (max-width: 900px) {
+			// 		display: none;
+			// 	}
+			// 	:global(pre) {
+			// 		margin-top: 0rem !important;
+			// 		font-size: 0.95rem;
+			// 		margin-bottom: 2rem;
+			// 		padding: 2rem 2rem 2rem 2rem;
+			// 		border-radius: 1rem;
+			// 		min-width: 400px;
+			// 		display: flex;
+			// 		align-items: center;
+			// 		justify-content: center;
+			// 		@media only screen and (max-width: 900px) {
+			// 			width: 90%;
+			// 			font-size: 0.8rem;
+			// 		}
+
+			// 		opacity: 0.95;
+			// 	}
+			// }
 		}
 	}
 
 	.hovered {
 		font-weight: bold !important;
 		color: white !important;
 	}
+
+	.copy-icon {
+		position: absolute;
+		top: 4.5rem;
+		right: 0.5rem;
+		color: rgb(122, 61, 126);
+		cursor: pointer;
+		font-size: 0.7rem;
+		transition: color 0.3s;
+		width: 1.3rem;
+		z-index: 999;
+		// hide for small screen
+		@media only screen and (max-width: 900px) {
+			display: none;
+		}
+	}
+
+	.copy-icon:hover {
+		color: rgb(122, 61, 126, 0.5);
+	}
 </style>