diff --git a/src/components/organisms/SwitchableMode/Switch/index.js b/src/components/organisms/SwitchableMode/Switch/index.js index 1db49a7d..c32ee44e 100644 --- a/src/components/organisms/SwitchableMode/Switch/index.js +++ b/src/components/organisms/SwitchableMode/Switch/index.js @@ -31,8 +31,10 @@ const ModeSwitch = ({ variant = 'switches.primary', left = 'GitLab', leftMode = 'gitlab', - right = 'GitHub', - rightMode = 'github', + center = 'Github', + centerMode = 'github', + right = 'Bitbucket', + rightMode = 'bitbucket', className = '', sx }) => { @@ -45,11 +47,15 @@ const ModeSwitch = ({ sx={msx({ ...sx, idPrefix, + // TODO: duplicated in cml.dev/src/components/organisms/SwitchableMode/common.js modes: { gitlab: { variant: `switches.Base.Left` }, github: { + variant: `switches.Base.Center` + }, + bitbucket: { variant: `switches.Base.Right` } } @@ -58,6 +64,11 @@ const ModeSwitch = ({ {left} + + + {center} + + {right} diff --git a/src/components/organisms/SwitchableMode/Switchable/index.js b/src/components/organisms/SwitchableMode/Switchable/index.js index b97d2e30..1acf68bc 100644 --- a/src/components/organisms/SwitchableMode/Switchable/index.js +++ b/src/components/organisms/SwitchableMode/Switchable/index.js @@ -21,7 +21,7 @@ const invisible = { '& video': { display: 'none' } } -const Switchable = ({ github, gitlab, idPrefix = undefined }) => ( +const Switchable = ({ github, gitlab, bitbucket, idPrefix = undefined }) => ( ( > {github} + + {bitbucket} + ) diff --git a/src/components/organisms/SwitchableMode/common.js b/src/components/organisms/SwitchableMode/common.js index 2f5e039e..9437a0e8 100644 --- a/src/components/organisms/SwitchableMode/common.js +++ b/src/components/organisms/SwitchableMode/common.js @@ -1,2 +1,2 @@ -export const defaultModes = ['gitlab', 'github'] +export const defaultModes = ['gitlab', 'github', 'bitbucket'] export const defaultIdPrefix = 'site-mode-' diff --git a/src/components/organisms/SwitchableMode/styleHelpers.js b/src/components/organisms/SwitchableMode/styleHelpers.js index 44a5c2c6..580075e0 100644 --- a/src/components/organisms/SwitchableMode/styleHelpers.js +++ b/src/components/organisms/SwitchableMode/styleHelpers.js @@ -1,3 +1,4 @@ +// TODO: duplicated in cml.dev/src/components/organisms/SwitchableMode/common.js const defaultPrefix = `site-mode-` const makeModeId = (mode, prefix = defaultPrefix) => prefix + mode diff --git a/src/components/pages/Home/HeroSection/index.tsx b/src/components/pages/Home/HeroSection/index.tsx index 42911a50..87e7e354 100644 --- a/src/components/pages/Home/HeroSection/index.tsx +++ b/src/components/pages/Home/HeroSection/index.tsx @@ -20,6 +20,7 @@ import { ReactComponent as ReportsIcon } from '@media/icons/reports.svg' import githubVideoMp4 from '@media/github/landing-video.mp4' import gitlabVideoMp4 from '@media/gitlab/landing-video.mp4' +import bitbucketVideoMp4 from '@media/bitbucket/landing-video.mp4' import backgroundImage from '@media/landing-background.png' @@ -102,11 +103,14 @@ const HeroSection: React.ForwardRefRenderFunction = () => ( } github={} + bitbucket={ + + } /> diff --git a/src/components/pages/Home/UseCasesSection/index.tsx b/src/components/pages/Home/UseCasesSection/index.tsx index d75fd40a..bf06bce4 100644 --- a/src/components/pages/Home/UseCasesSection/index.tsx +++ b/src/components/pages/Home/UseCasesSection/index.tsx @@ -1,12 +1,6 @@ - import React, { forwardRef } from "react" -import { - Box, - Heading, - Image, -} from "@theme-ui/components" - +import { Box, Heading, Image } from '@theme-ui/components' import Collapser from "../../../atoms/Collapser" import Switch from "../../../organisms/SwitchableMode/Switch" @@ -46,7 +40,7 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => ( }} > CML Use Cases - + = () => ( The simplest case of using CML, and a clear way for any user to get started, is to generate a simple report. Add the following .yaml to your project repository and commit to get started - + - + = () => ( )} + bitbucket={( + + +
image: iterativeai/cml:0-dvc2-base1
+
pipelines:
+
default:
+
- step:
+
name: Train model
+
script:
+ +
- pip install -r requirements.txt
+
- python train.py # generate plot.png
+ + +
# Create CML report
+
- cat metrics.txt >> report.md
+
- echo '![](./plot.png "Confusion Matrix")' >> report.md
+
- cml comment create report.md
+ + + + + Bitbucket Base report example + + + + + )} /> ) }, @@ -172,7 +194,6 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => ( GitLab DVC report example - )} github={( @@ -220,13 +241,51 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => (
REPO_TOKEN: {"${{ secrets.GITHUB_TOKEN }}"}
- GitHub DVC report example - + + + )} + bitbucket={( + + +
image: iterativeai/cml:0-dvc2-base1
+
pipelines:
+
default:
+
- step:
+
name: Train model
+
script:
+ +
- dvc pull data
+ +
+ +
- pip install -r requirements.txt
+
- dvc repro
+ +
+ +
# Compare metrics to main
+
- git fetch --depth=1 origin main:main
+
- dvc metrics diff --show-md main >> report.md
+
# Plot training loss function diff
+
- dvc plots diff
+
--target loss.csv --show-vega main > vega.json
+
- vl2png vega.json > plot.png
+
- echo '![](./plot.png "Training Loss")' >> report.md
+
# Post CML report as a comment in GitLab
+
- cml comment create report.md
+ + + + + Bitbucket DVC report example + + + )} /> @@ -257,13 +316,11 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => (
- python train.py # generate ./logs
- GitLab Tensorboard report example - )} github={( @@ -301,13 +358,44 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => ( GitHub Tensorboard report example - + + + )} + bitbucket={( + + +
image: iterativeai/cml:0-dvc2-base1
+
pipelines:
+
default:
+
- step:
+
name: Train model
+
script:
+ +
- pip install -r requirements.txt
+
- cml tensorboard connect
+
--logdir=./logs
+
--name="Go to tensorboard"
+
--md >> report.md
+ + +
- cml comment create report.md
+ +
+ +
- python train.py # generate ./logs
+ + + + + Bitbucket Tensorboard report example + + + )} /> ) }, - , { name: "CML Runner Cloud", content: ( @@ -343,13 +431,11 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => (
- cml comment create report.md
- GitLab Cloud report example - )} github={( @@ -401,19 +487,61 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => (
REPO_TOKEN: {"${{ secrets.PERSONAL_ACCESS_TOKEN }}"}
- GitHub Cloud report example - + + + )} + bitbucket={( + + +
pipelines:
+
default:
+
- step:
+
name: deploy-runner
+
image: iterativeai/cml:0-dvc2-base1
+
script:
+
- |
+ +
cml runner \
+
--cloud=aws \
+
--cloud-region=us-west \
+
--cloud-type=m5.2xlarge \
+
--cloud-spot \
+
--labels=cml.runner
+ +
- step:
+
name: run
+ +
runs-on: [self.hosted, cml.runner]
+ +
image: iterativeai/cml:0-dvc2-base1
+
script:
+ +
- pip install -r requirements.txt
+
- python train.py # generate plot.png
+ + +
- echo "## Report from your EC2 instance" >> report.md
+
- cat metrics.txt >> report.md
+
- echo '![](./plot.png "Confusion Matrix")' >> report.md
+
- cml comment create report.md
+ + + + + Bitbucket Cloud report example + + + )} /> ) }, - , { name: "Runner Cloud GPU", content: ( @@ -461,13 +589,11 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => (
- cml comment create report.md
- GitLab Cloud report example - )} github={( @@ -539,7 +665,62 @@ const UseCasesSection: React.ForwardRefRenderFunction = () => ( GitHub Cloud report example - + + + )} + bitbucket={( + + + +
# GPU not yet supported, see https://github.com/iterative/cml/issues/1015
+ +
pipelines:
+
default:
+
- step:
+
name: deploy-runner
+
image: iterativeai/cml:0-dvc2-base1
+
script:
+
- |
+ +
cml runner \
+
--cloud=aws \
+
--cloud-region=us-west \
+
--cloud-type=m5.2xlarge \
+
--cloud-spot \
+
--labels=cml
+ +
- step:
+
name: run
+ +
runs-on: [self.hosted, cml]
+ +
image: iterativeai/cml:0-dvc2-base1
+
script:
+ +
- apt-get update -y
+
- apt install imagemagick -y
+
- pip install -r requirements.txt
+ +
- git fetch --prune
+
- dvc repro
+ +
- echo "# Style transfer" >> report.md
+
- git show origin/master:final_owl.png > master_owl.png
+
- convert +append final_owl.png master_owl.png out.png
+
- convert out.png -resize 75% out_shrink.png
+
- echo "### Workspace vs. Main" >> report.md
+
- cml publish out_shrink.png --md --title 'compare' >> report.md
+
- echo "## Training metrics" >> report.md
+
- dvc params diff master --show-md >> report.md
+
- echo >> report.md
+
- cml send-comment report.md
+ + + + + Bitbucket Cloud report example + + )} /> diff --git a/src/gatsby-plugin-theme-ui/components.js b/src/gatsby-plugin-theme-ui/components.js index 78ced659..8e97ee13 100644 --- a/src/gatsby-plugin-theme-ui/components.js +++ b/src/gatsby-plugin-theme-ui/components.js @@ -22,6 +22,7 @@ import Switchable from '../components/organisms/SwitchableMode/Switchable' import Switch from '../components/organisms/SwitchableMode/Switch' import { ReactComponent as GitHubIcon } from '../media/icons/github.svg' import { ReactComponent as GitLabIcon } from '../media/icons/gitlab.svg' +import { ReactComponent as BitbucketIcon } from '../media/icons/bitbucket.svg' const getTextFromPreChildren = preChildren => { return Array.from(preChildren).reduce((acc, child, index) => { @@ -141,6 +142,18 @@ const RepoButton = ({ url, host = new URL(url).host }) => { GitLab ) + case 'bitbucket.org': + return ( + + + Bitbucket + + ) default: return null } diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js index 65b9f931..10f6dade 100644 --- a/src/gatsby-plugin-theme-ui/index.js +++ b/src/gatsby-plugin-theme-ui/index.js @@ -632,7 +632,7 @@ export default { RepoButton: { variant: 'buttons.base', textAlign: 'center', - width: '96px', + width: '103px', display: 'flex', flexFlow: 'row nowrap', alignItems: 'center', @@ -718,13 +718,19 @@ export default { Left: { '::before': { left: '0', - right: '50%' + right: '66%' + } + }, + Center: { + '::before': { + left: '33%', + right: '33%' } }, Right: { '::before': { - right: '0', - left: '50%' + left: '66%', + right: '0' } }, Label: { @@ -748,7 +754,7 @@ export default { py: 1, px: 2, zIndex: '3', - width: '50%', + width: '33%', textAlign: 'center', display: 'inline-block', position: 'relative', diff --git a/src/media/bitbucket/landing-video.mp4 b/src/media/bitbucket/landing-video.mp4 new file mode 100644 index 00000000..76b26eb9 Binary files /dev/null and b/src/media/bitbucket/landing-video.mp4 differ diff --git a/src/media/icons/bitbucket.svg b/src/media/icons/bitbucket.svg new file mode 100644 index 00000000..56240111 --- /dev/null +++ b/src/media/icons/bitbucket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/bitbucket/base-case-report.png b/static/img/bitbucket/base-case-report.png new file mode 100644 index 00000000..6c278533 Binary files /dev/null and b/static/img/bitbucket/base-case-report.png differ diff --git a/static/img/bitbucket/cloud-report.png b/static/img/bitbucket/cloud-report.png new file mode 100644 index 00000000..59cda326 Binary files /dev/null and b/static/img/bitbucket/cloud-report.png differ diff --git a/static/img/bitbucket/cml-runner-report.png b/static/img/bitbucket/cml-runner-report.png new file mode 100644 index 00000000..a4f36c38 Binary files /dev/null and b/static/img/bitbucket/cml-runner-report.png differ diff --git a/static/img/bitbucket/dvc-report.png b/static/img/bitbucket/dvc-report.png new file mode 100644 index 00000000..e647c2d6 Binary files /dev/null and b/static/img/bitbucket/dvc-report.png differ diff --git a/static/img/bitbucket/tensorboard-report.png b/static/img/bitbucket/tensorboard-report.png new file mode 100644 index 00000000..9bbf6d3d Binary files /dev/null and b/static/img/bitbucket/tensorboard-report.png differ