diff --git a/src/data/AboutPage.md b/src/data/AboutPage.md index 0207c85..f39f30b 100644 --- a/src/data/AboutPage.md +++ b/src/data/AboutPage.md @@ -44,6 +44,6 @@ Significant contributors in the Project's genesis were: ## Governance and Code of Conduct

-See [Governance in MLJ](google.com) and [Community code of conduct](https://github.com/JuliaAI/MLJ.jl/blob/dev/CODE_OF_CONDUCT.md). +See [Governance in MLJ](https://github.com/JuliaAI/MLJ.jl/blob/dev/GOVERNANCE.md) and [Community code of conduct](https://github.com/JuliaAI/MLJ.jl/blob/dev/CODE_OF_CONDUCT.md).

diff --git a/src/data/Footer.yaml b/src/data/Footer.yaml index 5ccb4e2..e8b2820 100644 --- a/src/data/Footer.yaml +++ b/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 diff --git a/src/data/HomePage.yaml b/src/data/HomePage.yaml index 68b2d7a..9663e21 100644 --- a/src/data/HomePage.yaml +++ b/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: >- diff --git a/src/lib/HomePage/Features.svelte b/src/lib/HomePage/Features.svelte index 4952146..3804b51 100644 --- a/src/lib/HomePage/Features.svelte +++ b/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 @@

{tab.title}

{#if tab.code && !isLoading}
+ {@html codeHTMLs[index]}
{/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); + } diff --git a/src/lib/HomePage/Hero.svelte b/src/lib/HomePage/Hero.svelte index 853a98a..d3c06f2 100644 --- a/src/lib/HomePage/Hero.svelte +++ b/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 @@
{#each homeData['tours'] as tour, ind} {#if ind == 0} - {@html codeHTMLs[hoveredIndex]} +
+ + {@html codeHTMLs[hoveredIndex]} +
{/if} {/each}
@@ -139,7 +145,7 @@ style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 1rem;" >

{homeData['sections'][2]['name']}

-

{homeData['sections'][0]['subtitle']}

+

{homeData['sections'][2]['subtitle']}

@@ -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,6 +370,36 @@ } } } + // .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; + // } + // } } } @@ -362,4 +407,24 @@ 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); + }