Skip to content

Commit

Permalink
✨ Add print functionality for the cheat sheet
Browse files Browse the repository at this point in the history
  • Loading branch information
EssamWisam committed May 13, 2024
1 parent e280526 commit b8fc106
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 54 deletions.
80 changes: 49 additions & 31 deletions src/lib/CheatSheet.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
let md;
let highlighter;
let cheatsheetHTML: string | undefined;
let isLoading = true;
let cheatsheetHTML: string | undefined;
let cheatsheetHTMLArr: string[];
onMount(async () => {
highlighter = await getHighlighterCore({
themes: [import('shiki/themes/min-light.mjs')],
Expand All @@ -18,55 +18,71 @@
});
md = new MarkdownIt();
md.use(fromHighlighter(highlighter, { themes: { light: 'min-light' } }));
cheatsheetHTML = md.render(cheatSheet)
cheatsheetHTML = md.render(cheatSheet.replace('@repl', 'julia'));
let pattern = /<h2>(.*?)<\/h2>([\s\S]*?)(?=<h2>|$)/g;
cheatsheetHTML = cheatsheetHTML.replace(pattern, '<div>$&</div>');
isLoading = false; // Set loading state to false once content is loaded
cheatsheetHTML = cheatsheetHTML.replace(/<pre/g, '<p class="pre"').replace(/<\/pre>/g, '</p>');
cheatsheetHTMLArr = cheatsheetHTML
.split('<div>')
.filter((section) => section.trim() !== '')
.map((section) => `<div>${section}</div>`);
isLoading = false;
});
function downloadAsPDF() {
window.print();
}
</script>
let fractions = [[0, 1.3/6], [1.3/6, 3.8/6], [3.8/6, 6/6],]
<!-- <button on:click={downloadAsPDF}>Download as PDF</button> -->
</script>

{#if isLoading}
<div>Loading...</div>
{:else}
<div class="intents-container" id="print-this">
{@html cheatsheetHTML}
<div style="display: flex; flex-direction: column; gap: 0rem;">
<button style=" font-family:Poppins; background-color: #6e4582; width:300px; margin: auto; margin-top: 1rem; color: white; border-radius: 3rem; padding: 0.5rem;" on:click={downloadAsPDF} >Print the Cheat Sheet</button>
<div class="intents-container row" id="print-this">
{#each fractions as fraction, frac_ind}
<div class="column">
{#each cheatsheetHTMLArr.filter((_, index) => index < fraction[1] * cheatsheetHTMLArr.length && index >= fraction[0] * cheatsheetHTMLArr.length) as section}
{@html section}
{/each}
</div>
{/each}
</div>
</div>
{/if}

<style lang="scss">
.intents-container {
column-count: 3;
@media print {
column-count: 4;
}
/* height: auto; */
.row {
display: flex;
flex-wrap: wrap;
margin: auto;
@media only screen and (max-width: 600px) {
padding: 1rem !important;
}
}
.column {
flex: 33%;
max-width: 33%;
padding: 0 !important;
@media only screen and (max-width: 1200px) {
column-count: 2;
flex: 50%;
max-width: 50%;
}
@media only screen and (max-width: 600px) {
gap: 0.3rem;
column-count: 1;
padding: 2rem 0.5rem 2rem;
flex: 100%;
max-width: 100%;
}
}
.intents-container {
gap: 0rem;
padding: 3rem 3rem 1rem;
padding: 1rem 3rem 1rem;
:global(div) {
border: 1px solid #6e4582;
border: 0.5px solid #6e4582;
break-inside: avoid-column;
@media print {
break-inside: auto;
overflow: auto;
display: inline-block;
}
padding: 1rem;
padding-bottom: 2rem;
background-color: #f1f1f1;
Expand All @@ -93,7 +109,7 @@
:global(h1) {
font-family: 'Poppins';
text-align: center;
border: 1px solid #8b7099;
//border: 1px solid #8b7099;
padding: 0.9rem;
color: #462c53;
background-color: #f1f1f1;
Expand Down Expand Up @@ -127,7 +143,8 @@
margin: 0.3rem;
font-size: 0.75rem;
}
:global(pre) {
:global(pre),
:global(.pre) {
display: inline-block;
padding: 0.5rem;
border-radius: 10px;
Expand Down Expand Up @@ -175,12 +192,13 @@
left: 0;
top: 0;
// width: 320mm;
overflow: visible;
overflow: visible;
}
}
@page {
size: A3 landscape;
size: A3 portrait;
margin: 0mm;
padding: 0mm;
}
</style>
62 changes: 39 additions & 23 deletions src/lib/data/mlj_cheatsheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@

## Starting an interactive MLJ session

```julia
```@repl cheat
using MLJ
MLJ_VERSION # version of MLJ
MLJ_VERSION # version of MLJ for this cheatsheet
```

## Model search and code loading
Expand Down Expand Up @@ -34,14 +34,15 @@ With additional conditions:
models() do model
matching(model, X, y) &&
model.prediction_type == :probabilistic &&
model.is_pure_julia
model.is_pure_julia
end
```

`Tree = @load DecisionTreeClassifier pkg=DecisionTree` imports "DecisionTreeClassifier" type and binds it to `Tree`
`tree = Tree()` to instantiate a `Tree`.
`Tree = @load DecisionTreeClassifier pkg=DecisionTree` imports "DecisionTreeClassifier" type and binds it to `Tree`.

`tree = Tree()` to instantiate a `Tree`.

`tree2 = Tree(max_depth=2)` instantiates a tree with different hyperparameter
`tree2 = Tree(max_depth=2)` instantiates a tree with different hyperparameter

`Ridge = @load RidgeRegressor pkg=MultivariateStats` imports a type for a model provided by multiple packages

Expand Down Expand Up @@ -96,37 +97,53 @@ y, X = unpack(channing,

Splitting row indices into train/validation/test, with seeded shuffling:

`train, valid, test = partition(eachindex(y), 0.7, 0.2, rng=1234)` for 70:20:10 ratio
```julia
train, valid, test = partition(eachindex(y), 0.7, 0.2, rng=1234) # for 70:20:10 ratio
```

For a stratified split:

`train, test = partition(eachindex(y), 0.8, stratify=y)`
```julia
train, test = partition(eachindex(y), 0.8, stratify=y)
```

Split a table or matrix `X`, instead of indices:

`Xtrain, Xvalid, Xtest = partition(X, 0.5, 0.3, rng=123)`
```julia
Xtrain, Xvalid, Xtest = partition(X, 0.5, 0.3, rng=123)
```

Getting data from [OpenML](https://www.openml.org):

`table = OpenML.load(91)`

```julia
table = OpenML.load(91)
```
Creating synthetic classification data:

`X, y = make_blobs(100, 2)` (also: `make_moons`, `make_circles`)
```julia
X, y = make_blobs(100, 2)
```
(also: `make_moons`, `make_circles`)

Creating synthetic regression data:

`X, y = make_regression(100, 2)`
```julia
X, y = make_regression(100, 2)
```

## Machine construction

Supervised case:

`model = KNNRegressor(K=1)` and `mach = machine(model, X, y)`
```julia
model = KNNRegressor(K=1)
mach = machine(model, X, y)
```

Unsupervised case:

`model = OneHotEncoder()` and `mach = machine(model, X)`
```julia
model = OneHotEncoder()
mach = machine(model, X)
```

## Fitting

Expand Down Expand Up @@ -191,13 +208,12 @@ or a list of pairs of row indices:

`[(train1, eval1), (train2, eval2), ... (traink, evalk)]`

## Tuning

### Tuning model wrapper
## Tuning model wrapper

`tuned_model = TunedModel(model=…, tuning=RandomSearch(), resampling=Holdout(), measure=…, operation=predict, range=…)`

### Ranges for tuning (`range=...`)
## Ranges for tuning (`range=...`)

If `r = range(KNNRegressor(), :K, lower=1, upper = 20, scale=:log)`

Expand All @@ -212,7 +228,7 @@ Nested ranges: Use dot syntax, as in `r = range(EnsembleModel(atom=tree), :(atom
Can specify multiple ranges, as in `range=[r1, r2, r3]`. For more range options do `?Grid` or `?RandomSearch`


### Tuning strategies
## Tuning strategies

`RandomSearch(rng=1234)` for basic random search

Expand Down Expand Up @@ -283,7 +299,7 @@ Externals include: `PCA` (in MultivariateStats), `KMeans`, `KMedoids` (in Cluste

## Pipelines

`pipe = (X -> coerce(X, :height=>Continuous)) |> OneHotEncoder |> KNNRegressor(K=3)`
`pipe = (X -> coerce(X, :height=>Continuous)) |> OneHotEncoder |> KNNRegressor(K=3)`

Unsupervised:

Expand All @@ -295,4 +311,4 @@ Concatenation:

## Advanced model composition techniques

See the [Composing Models](@ref) section of the MLJ manual.
See the [Composing Models](@ref) section of the MLJ manual.

0 comments on commit b8fc106

Please sign in to comment.