[RELEASES] v2.5.0

.github/workflows/argilla.yml

@@ -24,7 +24,7 @@ jobs:
   build:
     services:
       argilla-server:
-        image: argilladev/argilla-hf-spaces:pr-5572
+        image: argilladev/argilla-hf-spaces:develop
         ports:
           - 6900:6900
         env:
@@ -40,7 +40,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: ["3.8", "3.9", "3.10", "3.11", "3.12"]
+        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
     steps:
       - uses: actions/checkout@v4
       - name: Setup PDM
@@ -72,7 +72,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-artifact@v4
         # Upload the package to be used in the next jobs only once
-        if: ${{ matrix.python-version == '3.8' }}
+        if: ${{ matrix.python-version == '3.9' }}
         with:
           name: argilla
           path: argilla/dist

README.md

@@ -77,14 +77,14 @@ We are an open-source community-driven project and we love to hear from you. Her
 The community uses Argilla to create amazing open-source [datasets](https://huggingface.co/datasets?library=library:argilla&sort=trending) and [models](https://huggingface.co/models?other=distilabel).
 
 - [Cleaned UltraFeedback dataset](https://huggingface.co/datasets/argilla/ultrafeedback-binarized-preferences-cleaned) used to fine-tune the [Notus](https://huggingface.co/argilla/notus-7b-v1) and [Notux](https://huggingface.co/argilla/notux-8x7b-v1) models. The original UltraFeedback dataset was curated using Argilla UI filters to find and report a bug in the original data generation code. Based on this data curation process, Argilla built this new version of the UltraFeedback dataset and fine-tuned Notus, outperforming Zephyr on several benchmarks.
-- [distilabeled Intel Orca DPO dataset](https://huggingface.co/datasets/argilla/distilabel-intel-orca-dpo-pairs) used to fine-tune the [improved OpenHermes model](https://huggingface.co/argilla/distilabeled-OpenHermes-2.5-Mistral-7B). This dataset was built by combining human curation in Argilla with AI feedback from distilabel, leading to an improved version of the Intel Orca dataset and outperforming models fine-tuned on the original dataset.
+- [distilabel Intel Orca DPO dataset](https://huggingface.co/datasets/argilla/distilabel-intel-orca-dpo-pairs) used to fine-tune the [improved OpenHermes model](https://huggingface.co/argilla/distilabeled-OpenHermes-2.5-Mistral-7B). This dataset was built by combining human curation in Argilla with AI feedback from distilabel, leading to an improved version of the Intel Orca dataset and outperforming models fine-tuned on the original dataset.
 
 ### Examples Use cases
 
-AI teams from companies like [the Red Cross](https://510.global/), [Loris.ai](https://loris.ai/) and [Prolific](https://www.prolific.com/) use Argilla to improve the quality and efficiency of AI projects. They shared their experiences in our [AI community meetup](https://lu.ma/embed-checkout/evt-IQtRiSuXZCIW6FB).
+AI teams from organizations such as the [Red Cross](https://510.global/), [Loris.ai](https://loris.ai/) and [Prolific](https://www.prolific.com/) use Argilla to improve the quality and efficiency of AI projects. They shared their experiences in our [AI community meetup](https://lu.ma/embed-checkout/evt-IQtRiSuXZCIW6FB).
 
 - AI for good: [the Red Cross presentation](https://youtu.be/ZsCqrAhzkFU?feature=shared) showcases how the Red Cross domain experts and AI team collaborated by classifying and redirecting requests from refugees of the Ukrainian crisis to streamline the support processes of the Red Cross.
-- Customer support: during [the Loris meetup](https://youtu.be/jWrtgf2w4VU?feature=shared) they showed how their AI team uses unsupervised and few-shot contrastive learning to help them quickly validate and gain labelled samples for a huge amount of multi-label classifiers.
+- Customer support: during [the Loris meetup](https://youtu.be/jWrtgf2w4VU?feature=shared) they showed how their AI team uses unsupervised and few-shot contrastive learning to help them quickly validate and gain labeled samples for a huge amount of multi-label classifiers.
 - Research studies: [the showcase from Prolific](https://youtu.be/ePDlhIxnuAs?feature=shared) announced their integration with our platform. They use it to actively distribute data collection projects among their annotating workforce. This allows Prolific to quickly and efficiently collect high-quality data for research studies.
 
 ## 👨‍💻 Getting started

argilla-frontend/CHANGELOG.md

@@ -16,6 +16,20 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+## [2.5.0](https://github.com/argilla-io/argilla/compare/v2.4.1...v2.5.0)
+
+### Added
+
+- Add new dataset list page ([#5684](https://github.com/argilla-io/argilla/pull/5684))
+- Add a high-contrast theme & improvements for the forced-colors mode. ([#5661](https://github.com/argilla-io/argilla/pull/5661))
+- Add English as the default language and add language selector in the user settings page. ([#5690](https://github.com/argilla-io/argilla/pull/5690))
+
+### Fixed
+
+- Assign field to span question on dataset creation. ([#5717](https://github.com/argilla-io/argilla/pull/5717))
+- Fixed visible_options when updating question setting. ([#5716](https://github.com/argilla-io/argilla/pull/5716))
+- Fixed highlighting on same record ([#5693](https://github.com/argilla-io/argilla/pull/5693))
+
 ## [2.4.1](https://github.com/argilla-io/argilla/compare/v2.4.0...v2.4.1)
 
 ### Added
@@ -34,6 +48,7 @@ These are the section headers that we use:
 ### Added
 
 - Added new dataset configurator to import datasets from Hugging Face using Argilla UI. ([#5532](https://github.com/argilla-io/argilla/pull/5532))
+- Improve Accessibility for Screenreaders ([#5634](https://github.com/argilla-io/argilla/pull/5634))
 
 ### Fixed
 

argilla-frontend/assets/icons/high-contrast-theme.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'high-contrast-theme': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" clip-rule="evenodd" d="M9.5 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0M6 5.5l-4.535-.442A.531.531 0 011.531 4H14.47a.531.531 0 01.066 1.058L10 5.5V9l.452 6.42a.535.535 0 01-1.053.174L8.243 9.97c-.064-.252-.422-.252-.486 0l-1.156 5.624a.535.535 0 01-1.053-.174L6 9z"/>'
+  }
+})

argilla-frontend/assets/icons/index.js

@@ -24,6 +24,7 @@ require('./external')
 require('./filter')
 require('./focus-mode')
 require('./hand-labeling')
+require('./high-contrast-theme')
 require('./import')
 require('./info')
 require('./kebab')
@@ -39,6 +40,7 @@ require('./pen')
 require('./plus')
 require('./progress')
 require('./question-answering')
+require('./records')
 require('./refresh')
 require('./reset')
 require('./row-last')
@@ -58,5 +60,6 @@ require('./text-to-image')
 require('./time')
 require('./trash-empty')
 require('./unavailable')
+require('./update')
 require('./validate')
 require('./weak-labeling')

argilla-frontend/assets/icons/records.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'records': {
+    width: 10,
+    height: 9,
+    viewBox: '0 0 10 9',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9 .715H1.32a.3.3 0 00-.3.3v1.421H9.3v-1.42a.3.3 0 00-.3-.3zm-7.98 4.18v-1.76H9.3v1.76H1.02zm0 .7v1.42a.3.3 0 00.3.3H9a.3.3 0 00.3-.3v-1.42H1.02zm.3-5.58a1 1 0 00-1 1v6a1 1 0 001 1H9a1 1 0 001-1v-6a1 1 0 00-1-1H1.32z" _fill="#000"/>'
+  }
+})

argilla-frontend/assets/icons/update.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'update': {
+    width: 12,
+    height: 13,
+    viewBox: '0 0 12 13',
+    data: '<path pid="0" d="M6.692 5.456l-.105-1.203 1.434-.126a3.02 3.02 0 10.495 3.728l1.21.303a4.228 4.228 0 11-.795-4.83l-.148-1.692 1.204-.106.315 3.61-3.61.316z"/>'
+  }
+})

argilla-frontend/assets/scss/abstract/variables/_themes.scss

@@ -5,6 +5,8 @@
   --color-brand: hsl(3, 100%, 69%);
   --color-brand-secondary: hsl(19, 85%, 81%);
   --color-danger: var(--color-brand);
+  --color-avatar-fg: var(--color-white);
+  --color-avatar-bg: var(--color-brand);
   --color-warning: hsl(18, 98%, 68%);
   --color-success: hsl(88, 74%, 36%);
   --color-info: hsl(0, 0%, 90%);
@@ -14,6 +16,7 @@
   --bg-solid-grey-1: hsl(0, 0%, 98%);
   --bg-solid-grey-2: hsl(0, 0%, 96%);
   --bg-solid-grey-3: hsl(0, 0%, 90%);
+  --bg-solid-grey-4: hsl(0, 0%, 90%);
   --bg-accent-grey-1: hsl(0, 0%, 100%);
   --bg-accent-grey-2: hsl(0, 0%, 100%);
   --bg-accent-grey-3: hsl(0, 0%, 98%);
@@ -93,6 +96,7 @@
   --bg-solid-grey-1: hsl(214, 12%, 10%);
   --bg-solid-grey-2: hsl(214, 12%, 14%);
   --bg-solid-grey-3: hsl(214, 12%, 16%);
+  --bg-solid-grey-4: hsl(214, 12%, 20%);
   --bg-accent-grey-1: hsl(214, 12%, 12%);
   --bg-accent-grey-2: hsl(214, 12%, 16%);
   --bg-accent-grey-3: hsl(214, 12%, 14%);
@@ -166,3 +170,95 @@
 [data-theme="dark"] {
   color-scheme: dark;
 }
+
+[data-theme="high-contrast"] {
+  --color-black: hsla(0, 0%, 0%, 100%);
+  --color-brand: hsl(3, 99%, 28%);
+  --color-brand-secondary: hsl(19, 85%, 81%);
+  --color-danger: var(--color-brand);
+  --color-avatar-fg: var(--color-black);
+  --color-avatar-bg: var(--color-white);
+  --color-warning: hsl(18, 100%, 50%);
+  --color-success: hsl(88, 100%, 31%);
+  --color-info: hsl(0, 0%, 90%);
+  --bg-action: hsl(227, 100%, 40%);
+  --bg-action-accent: hsl(227, 98%, 25%);
+  --bg-black: hsla(0, 0%, 0%, 0.87);
+  --bg-solid-grey-1: hsl(0, 0%, 98%);
+  --bg-solid-grey-2: hsl(0, 0%, 96%);
+  --bg-solid-grey-3: hsl(0, 0%, 90%);
+  --bg-solid-grey-4: hsl(0, 0%, 90%);
+  --bg-accent-grey-1: hsl(0, 0%, 100%);
+  --bg-accent-grey-2: hsl(0, 0%, 100%);
+  --bg-accent-grey-3: hsl(0, 0%, 98%);
+  --bg-accent-grey-4: hsl(0, 0%, 98%);
+  --bg-accent-grey-5: hsl(0, 0%, 100%);
+  --bg-opacity-1: hsla(0, 0%, 0%, 0.01);
+  --bg-opacity-2: hsla(0, 0%, 0%, 0.02);
+  --bg-opacity-3: hsla(0, 0%, 0%, 0.03);
+  --bg-opacity-4: hsla(0, 0%, 0%, 0.04);
+  --bg-opacity-6: hsla(0, 0%, 0%, 0.06);
+  --bg-opacity-10: hsla(0, 0%, 0%, 0.1);
+  --bg-opacity-20: hsla(0, 0%, 0%, 0.2);
+  --bg-opacity-37: hsla(0, 0%, 0%, 0.87);
+  --bg-opacity-54: hsla(0, 0%, 0%, 0.87);
+  --bg-opacity-87: hsla(0, 0%, 0%, 0.87);
+  --fg-lighter: hsl(0, 0%, 100%);
+  --fg-primary: hsla(0, 0%, 0%, 0.87);
+  --fg-secondary: hsla(0, 0%, 10%, 0.87);
+  --fg-tertiary: hsla(10, 10%, 10%, 0.87);
+  --fg-cuaternary: hsl(227, 96%, 39%);
+  --fg-status-pending: hsl(0, 100%, 30%);
+  --fg-status-draft: hsl(143, 100%, 20%);
+  --bg-status-draft: hsl(125, 63%, 82%);
+  --bg-status-draft-accent: hsl(128, 63%, 84%);
+  --fg-status-discarded: rgb(0, 0, 0);
+  --bg-status-discarded: hsla(0, 5%, 87%);
+  --bg-status-discarded-accent: hsla(0, 5%, 83%);
+  --fg-status-submitted: hsl(227, 100%, 39%);
+  --bg-status-submitted: hsl(227, 100%, 85%);
+  --bg-status-submitted-accent: hsl(227, 100%, 82%);
+  --fg-filter-badge: hsl(239, 36%, 47%);
+  --fg-filter-badge-accent: hsl(239, 100%, 39%);
+  --bg-filter-badge: hsl(240, 100%, 92%);
+  --bg-filter-badge-accent: hsl(240, 100%, 90%);
+  --fg-label: var(--color-black);
+  --fg-label-2: var(--color-black);
+  --bg-label: var(--color-black);
+  --bg-label-unselected: hsl(0, 0%, 96%);
+  --bg-label-unselected-hover: hsla(0, 0%, 0%, 0.06);
+  --bg-field: linear-gradient(45deg, var(--bg-opacity-2), var(--bg-opacity-1));
+  --border-field: hsl(0, 0%, 94%);
+  --bg-bubble: linear-gradient(45deg, var(--bg-opacity-3), var(--bg-opacity-1));
+  --bg-bubble-inverse: linear-gradient(
+    45deg,
+    var(--bg-opacity-1),
+    var(--bg-opacity-3)
+  );
+  --bg-form: hsl(0, 0%, 100%);
+  --bg-form-button-area: hsl(228, 50%, 96%);
+  --fg-shortcut-key: hsla(0, 0%, 0%, 0.2);
+  --bg-similarity: hsl(2, 100%, 94%);
+  --fg-similarity: hsl(3, 100%, 50%);
+  --fg-highlight: hsl(3, 100%, 49%);
+  --bg-auth: hsl(18, 57%, 91%);
+  --bg-auth-gradient: linear-gradient(
+    178.31deg,
+    #ffe5d9 1.36%,
+    #ffd1bc 109.14%
+  );
+  --bg-banner-info: hsl(0, 0%, 90%);
+  --bg-banner-warning: hsl(47, 83%, 91%);
+  --bg-banner-error: hsl(3, 100%, 92%);
+  --bg-tooltip: var(--color-dark-grey);
+  --bg-config-card: hsl(0, 0%, 100%);
+  --bg-config-alert: hsl(0, 0%, 100%);
+  --fg-chat-1: #198700;
+  --fg-chat-2: #933e00;
+  --fg-chat-3: #ae0000;
+  --fg-chat-4: #86008d;
+  --fg-chat-5: #002dd0;
+}
+[data-theme="high-contrast"] {
+  color-scheme: high-contrast;
+}

argilla-frontend/assets/scss/abstract/variables/_variables.scss

@@ -39,17 +39,15 @@ $base-space-between-records: $base-space;
 $border-radius-s: 5px;
 $border-radius: 5px;
 $border-radius-m: 10px;
-$border-radius-l: 25px;
+$border-radius-l: 16px;
+$border-radius-xl: 25px;
 $border-radius-rounded: 50em;
 
 // Shadows
 //-----------
 $shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
 $shadow-100: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
 $shadow-200: 1px 2px 5px 2px rgba(0, 0, 0, 0.15);
-$shadow-300: 0 1px 3px 0 rgba(185, 185, 185, 0.4);
-$shadow-400: 0px 4px 10px rgba(0, 0, 0, 0.1);
-$shadow-500: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
 
 // Input size
 //-----------

argilla-frontend/components/base/base-action-tooltip/BaseActionTooltip.vue

@@ -65,6 +65,12 @@ export default {
   &.--right {
     left: 100%;
   }
+  &.--top {
+    bottom: 100%;
+  }
+  &.--bottom {
+    top: 100%;
+  }
   &__container {
     position: relative;
   }