Feat/update start page code (#3327)

Closes #3298 ![demo](https://github.com/argilla-io/argilla/assets/7398909/434849b9-8145-4af7-93f0-269eef7f0ef0) --------- Co-authored-by: nataliaElv <natalia@argilla.io> Co-authored-by: leire <leire@recogn.ai>
argilla-io · Jul 5, 2023 · e936512 · e936512
1 parent e516721
commit e936512
Show file tree

Hide file tree

Showing 8 changed files with 387 additions and 256 deletions.
diff --git a/docs/_source/_common/snippets/start_page.md b/docs/_source/_common/snippets/start_page.md
@@ -0,0 +1,35 @@
+::::{tab-set}
+
+:::{tab-item} Feedback datasets
+
+```python
+# install datasets library with pip install datasets
+import argilla as rg
+from datasets import load_dataset
+
+# load an Argilla Feedback dataset from the Hugging Face hub
+dataset = rg.FeedbackDataset.from_huggingface("argilla/oasst_response_quality", split="train")
+
+# push the dataset to Argilla
+dataset.push_to_argilla("oasst_response_quality")
+```
+:::
+
+:::{tab-item} Other datasets
+
+```python
+# install datasets library with pip install datasets
+import argilla as rg
+from datasets import load_dataset
+
+# load dataset from the hub
+dataset = load_dataset("argilla/gutenberg_spacy-ner", split="train")
+
+# read in dataset, assuming its a dataset for token classification
+dataset_rg = rg.read_datasets(dataset, task="TokenClassification")
+
+# log the dataset
+rg.log(dataset_rg, "gutenberg_spacy-ner")
+```
+:::
+::::
diff --git a/frontend/README.md b/frontend/README.md
@@ -1,20 +1,114 @@
-# Argilla (UI)
+<h1 align="center">
+  <a href=""><img src="https://github.com/dvsrepo/imgs/raw/main/rg.svg" alt="Argilla" width="150"></a>
+  <br>
+  ✨ Argilla ✨
+  <br>
+</h1>
+<p align="center">
+<a  href="https://pypi.org/project/argilla/">
+<img  alt="CI"  src="https://img.shields.io/pypi/v/argilla.svg?style=flat-square&logo=pypi&logoColor=white">
+</a>
+<!--a  href="https://anaconda.org/conda-forge/rubrix">
+<img  alt="CI"  src="https://img.shields.io/conda/vn/conda-forge/rubrix?logo=anaconda&style=flat&color=orange">
+</!a-->
+<img alt="Codecov" src="https://codecov.io/gh/argilla-io/argilla/branch/main/graph/badge.svg?token=VDVR29VOMG"/>
+<a href="https://pepy.tech/project/argilla">
+<img  alt="CI"  src="https://static.pepy.tech/personalized-badge/argilla?period=month&units=international_system&left_color=grey&right_color=blue&left_text=pypi%20downloads/month">
+</a>
+<a  href="https://huggingface.co/new-space?template=argilla/argilla-template-space">
+<img src="https://huggingface.co/datasets/huggingface/badges/raw/main/deploy-to-spaces-sm.svg" />
+</a>
+</p>
 
-## Build Setup
+<h2 align="center">Open-source data curation platform for LLMs</h2>
+<h3 align="center">MLOps for NLP: from data labeling to model monitoring</h2>
+
+<br>
+
+https://github.com/argilla-io/argilla/assets/1107111/49e28d64-9799-4cac-be49-19dce0f6bd86
+
+<p align="center">
+<a  href="https://join.slack.com/t/rubrixworkspace/shared_invite/zt-whigkyjn-a3IUJLD7gDbTZ0rKlvcJ5g">
+<img src="https://img.shields.io/badge/JOIN US ON SLACK-4A154B?style=for-the-badge&logo=slack&logoColor=white" />
+</a>
+<a href="https://linkedin.com/company/argilla-io">
+<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" />
+</a>
+<a  href="https://twitter.com/argilla_io">
+<img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" />
+</a>
+</p>
+
+<br>
+
+<h3>
+<p align="center">
+<a href="https://docs.argilla.io">📄 Documentation</a> | </span>
+<a href="#-quickstart">🚀 Quickstart</a> <span> | </span>
+<a href="#-cheatsheet">🎼 Cheatsheet</a> <span> | </span>
+<a href="#-contribute">🫱🏾‍🫲🏼 Contribute</a> <span> | </span>
+<a href="#-roadmap">🗺️ Roadmap</a>
+</p>
+</h3>
+
+## 🚀 Quickstart
+
+Argilla is an open-source data curation platform for LLMs. Using Argilla, everyone can build robust language models through faster data curation using both human and machine feedback. We provide support for each step in the MLOps cycle, from data labeling to model monitoring.
+
+There are different options to get started:
+
+1. Take a look at our [quickstart page](https://docs.argilla.io/en/latest/getting_started/quickstart.html) 🚀
+
+2. Start contributing by looking at our [contributor guidelines](#🫱🏾‍🫲🏼-contribute) 🫱🏾‍🫲🏼
+
+3. Skip some steps with our [cheatsheet](#🎼-cheatsheet) 🎼
+
+## 🖥️ FRONTEND
+
+<h3>💣 Install dependencies</h3>
+
+```bash
+npm i
+```
+
+<hr>
+
+<h3>🚀 Run Locally</a></h3>
 
 ```bash
-# install dependencies
-$ yarn install
+npm run dev
+```
 
-# serve with hot reload at localhost:3000
-$ yarn dev
+<hr>
 
-# build for production and launch server
-$ yarn build
-$ yarn start
+<h3>🌏 Build Locally</a></h3>
 
-# generate static project
-$ yarn generate
+```bash
+npm run generate
 ```
 
-For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+## 📏 Principles
+
+- **Open**: Argilla is free, open-source, and 100% compatible with major NLP libraries (Hugging Face transformers, spaCy, Stanford Stanza, Flair, etc.). In fact, you can **use and combine your preferred libraries** without implementing any specific interface.
+
+- **End-to-end**: Most annotation tools treat data collection as a one-off activity at the beginning of each project. In real-world projects, data collection is a key activity of the iterative process of ML model development. Once a model goes into production, you want to monitor and analyze its predictions and collect more data to improve your model over time. Argilla is designed to close this gap, enabling you to **iterate as much as you need**.
+
+- **User and Developer Experience**: The key to sustainable NLP solutions are to make it easier for everyone to contribute to projects. _Domain experts_ should feel comfortable interpreting and annotating data. _Data scientists_ should feel free to experiment and iterate. _Engineers_ should feel in control of data pipelines. Argilla optimizes the experience for these core users to **make your teams more productive**.
+
+- **Beyond hand-labeling**: Classical hand-labeling workflows are costly and inefficient, but having humans in the loop is essential. Easily combine hand-labeling with active learning, bulk-labeling, zero-shot models, and weak supervision in **novel** data annotation workflows\*\*.
+
+## 🫱🏾‍🫲🏼 Contribute
+
+We love contributors and have launched a [collaboration with JustDiggit](https://argilla.io/blog/introducing-argilla-community-growers) to hand out our very own bunds and help the re-greening of sub-Saharan Africa. To help our community with the creation of contributions, we have created our [developer](https://docs.argilla.io/en/latest/community/developer_docs.html) and [contributor](https://docs.argilla.io/en/latest/community/contributing.html) docs. Additionally, you can always [schedule a meeting](https://calendly.com/argilla-office-hours/meeting-with-david-from-argilla-30m) with our Developer Advocacy team so they can get you up to speed.
+
+## 🥇 Contributors
+
+<a  href="https://github.com/argilla-io/argilla/graphs/contributors">
+
+<img  src="https://contrib.rocks/image?repo=argilla-io/argilla" />
+
+</a>
+
+## 🗺️ Roadmap
+
+We continuously work on updating [our plans and our roadmap](https://github.com/orgs/argilla-io/projects/10/views/1) and we love to discuss those with our community. Feel encouraged to participate.
diff --git a/frontend/components/base/base-tabs/BaseTabs.vue b/frontend/components/base/base-tabs/BaseTabs.vue
@@ -55,28 +55,13 @@ export default {
 </script>
 <style lang="scss" scoped>
 .tabs {
+  position: relative;
   display: flex;
   padding: 0;
   list-style: none;
   overflow-y: auto;
   border-bottom: 1px solid $black-10;
   @extend %hide-scrollbar;
-  &:before,
-  &:after {
-    position: absolute;
-    content: "";
-    height: 40px;
-    width: 30px;
-    z-index: 1;
-  }
-  &:before {
-    left: 0;
-    background: linear-gradient(to right, palette(white), transparent 100%);
-  }
-  &:after {
-    right: 0;
-    background: linear-gradient(to left, palette(white), transparent 100%);
-  }
 }
 .tab {
   display: flex;

diff --git a/frontend/components/base/documentation-viewer/DocumentationViewer.vue b/frontend/components/base/documentation-viewer/DocumentationViewer.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="snippet__container">
+    <BaseTabs
+      v-if="content.tabs.length"
+      class="snippets__tabs"
+      :tabs="content.tabs"
+      :active-tab="currentTab"
+      @change-tab="onChangeTab"
+    />
+    <transition v-if="currentTab" name="fade" mode="out-in" appear>
+      {{ currentTab }}
+      <div class="snippet" :key="currentTab.id" v-if="currentTab">
+        <h1 v-if="currentTab.title" class="snippet__title --heading5">
+          {{ currentTab.title }}
+        </h1>
+        <h2 v-if="currentTab.description" class="snippet__description --body2">
+          {{ currentTab.description }}
+        </h2>
+        <BaseRenderHtml v-if="currentTab.html" :html="currentTab.html" />
+        <div class="library__buttons" v-if="currentTab.links">
+          <p class="library__section__title">Links</p>
+          <base-button
+            v-for="(button, index) in currentTab.links"
+            :key="index"
+            class="library__button primary small text"
+            :href="button.linkLink"
+            target="_blank"
+            >{{ button.linkText }}</base-button
+          >
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    content: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentTab: this.content.tabs[0],
+    };
+  },
+  methods: {
+    onChangeTab(tabId) {
+      this.currentTab = this.content.tabs.find((tab) => tab.id === tabId);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.snippets {
+  &__tabs.tabs {
+    margin: 0 -2.5em 2em;
+    padding: 0 2.5em;
+  }
+}
+
+.snippet {
+  margin: 0 -2.5em;
+  padding: 0 2.5em;
+  @extend %hide-scrollbar;
+  &__container {
+    width: 800px;
+  }
+  &__code {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__description {
+    font-weight: normal;
+    margin-bottom: $base-space * 2;
+  }
+  :deep(em) {
+    color: $black-54;
+  }
+}
+.library {
+  &__buttons {
+    display: flex;
+    flex-direction: column;
+    gap: $base-space;
+    margin-top: $base-space * 3;
+  }
+  &__button {
+    display: inline-flex;
+    padding: 0;
+    @include line-height(16px);
+  }
+  &__section {
+    &__title {
+      margin-bottom: $base-space;
+      color: $black-54;
+      font-weight: 600;
+      @include font-size(15px);
+    }
+  }
+}
+</style>