Update DVCLive examples in Setup (#4224)

Author: mattseddon

webview/src/setup/components/App.test.tsx

@@ -918,14 +918,21 @@ describe('App', () => {
       expect(setupDVCButton).toBeInTheDocument()
       expect(setupDVCButton).toBeVisible()
 
-      expect(screen.getByText('demo')).toBeInTheDocument()
-      expect(screen.getAllByText('-')).toHaveLength(2)
+      const remotesSection = screen.getByTestId('remotes-section-details')
 
-      expect(screen.getByText('example-get-started')).toBeInTheDocument()
-      expect(screen.getByText('drive')).toBeInTheDocument()
-      expect(screen.getByText('gdrive://appDataFolder')).toBeInTheDocument()
-      expect(screen.getByText('storage')).toBeInTheDocument()
-      expect(screen.getByText('s3://some-bucket')).toBeInTheDocument()
+      expect(within(remotesSection).getByText('demo')).toBeInTheDocument()
+      expect(within(remotesSection).getAllByText('-')).toHaveLength(2)
+      expect(
+        within(remotesSection).getByText('example-get-started')
+      ).toBeInTheDocument()
+      expect(within(remotesSection).getByText('drive')).toBeInTheDocument()
+      expect(
+        within(remotesSection).getByText('gdrive://appDataFolder')
+      ).toBeInTheDocument()
+      expect(within(remotesSection).getByText('storage')).toBeInTheDocument()
+      expect(
+        within(remotesSection).getByText('s3://some-bucket')
+      ).toBeInTheDocument()
     })
   })
 })

webview/src/setup/components/experiments/DvcLiveExamples.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import React from 'react'
 import styles from './styles.module.scss'
+import { OtherFrameworks } from './OtherFrameworks'
 import pyTorch from '../../snippets/pyTorch.py'
 import huggingFace from '../../snippets/huggingFace.py'
 import keras from '../../snippets/keras.py'
@@ -17,6 +18,10 @@ export const DvcLiveExamples: React.FC = () => {
     <Panels
       className={styles.dvcLiveExamples}
       panels={[
+        {
+          children: <PythonCodeBlock>{pythonApi.toString()}</PythonCodeBlock>,
+          title: 'Python API'
+        },
         {
           children: <PythonCodeBlock>{pyTorch.toString()}</PythonCodeBlock>,
           title: 'PyTorch Lightning'
@@ -30,8 +35,8 @@ export const DvcLiveExamples: React.FC = () => {
           title: 'Keras'
         },
         {
-          children: <PythonCodeBlock>{pythonApi.toString()}</PythonCodeBlock>,
-          title: 'General Python API'
+          children: <OtherFrameworks />,
+          title: 'Other'
         }
       ]}
     />

webview/src/setup/components/experiments/OtherFrameworks.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import styles from './styles.module.scss'
+
+export const OtherFrameworks = () => (
+  <div className={styles.otherFrameworks}>
+    These frameworks are also supported:
+    <ul>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/catalyst">
+          Catalyst
+        </a>
+      </li>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/fastai">Fast.ai</a>
+      </li>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/lightgbm">
+          LightGBM
+        </a>
+      </li>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/mmcv">MMCV</a>
+      </li>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/optuna">Optuna</a>
+      </li>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/pytorch">PyTorch</a>
+      </li>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/tensorflow">
+          TensorFlow
+        </a>
+      </li>
+      <li>
+        <a href="https://dvc.org/doc/dvclive/ml-frameworks/xgboost">XGBoost</a>
+      </li>
+    </ul>
+  </div>
+)

webview/src/setup/components/experiments/styles.module.scss

@@ -8,3 +8,15 @@
     margin: 0 auto;
   }
 }
+
+.otherFrameworks {
+  white-space: pre-wrap;
+  background-color: transparent !important;
+  color: $watermark-color;
+  font-family: sans-serif;
+  letter-spacing: 0.04em;
+  line-height: 1.6;
+  padding: 0;
+  text-align: left;
+  width: max-content;
+}

webview/src/setup/snippets/huggingFace.py

@@ -2,5 +2,12 @@
 
 ...
 
+ trainer = Trainer(
+    model, args,
+    train_dataset=train_data,
+    eval_dataset=eval_data,
+    tokenizer=tokenizer,
+    compute_metrics=compute_metrics,
+)
 trainer.add_callback(DVCLiveCallback(save_dvc_exp=True))
-trainer.train()
+trainer.train()

webview/src/setup/snippets/keras.py

@@ -3,5 +3,6 @@
 ...
 
 model.fit(
-  train_dataset, validation_data=validation_dataset,
-  callbacks=[DVCLiveCallback(save_dvc_exp=True)])
+    train_dataset, epochs=num_epochs, 
+    validation_data=validation_dataset,
+    callbacks=[DVCLiveCallback(save_dvc_exp=True)])

webview/src/setup/snippets/pyTorch.py

@@ -1,6 +1,21 @@
+import lightning.pytorch as pl
 from dvclive.lightning import DVCLiveLogger
 
 ...
 
-trainer = Trainer(logger=DVCLiveLogger(save_dvc_exp=True))
-trainer.fit(model)
+class LitModule(pl.LightningModule):
+    def __init__(self, layer_1_dim=128, learning_rate=1e-2):
+        super().__init__()
+        # layer_1_dim and learning_rate will be logged by DVCLive
+        self.save_hyperparameters()
+
+    def training_step(self, batch, batch_idx):
+        metric = ...
+        # See Output Format bellow
+        self.log("train_metric", metric, on_step=False, on_epoch=True)
+
+dvclive_logger = DVCLiveLogger(save_dvc_exp=True)
+
+model = LitModule()
+trainer = pl.Trainer(logger=dvclive_logger)
+trainer.fit(model)

webview/src/setup/snippets/pythonApi.py

@@ -1,11 +1,13 @@
+import random
+import sys
 from dvclive import Live
 
 with Live(save_dvc_exp=True) as live:
-    live.log_param("epochs", NUM_EPOCHS)
-
-    for epoch in range(NUM_EPOCHS):
-        train_model(...)
-        metrics = evaluate_model(...)
-        for metric_name, value in metrics.items():
-            live.log_metric(metric_name, value)
-        live.next_step()
+    epochs = int(sys.argv[1])
+    live.log_param("epochs", epochs)
+    for epoch in range(epochs):
+        live.log_metric("train/accuracy", epoch + random.random())
+        live.log_metric("train/loss", epochs - epoch - random.random())
+        live.log_metric("val/accuracy",epoch + random.random() )
+        live.log_metric("val/loss", epochs - epoch - random.random())
+        live.next_step()