feat: ⚡ Add web speech poc

argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue

@@ -149,8 +149,8 @@ export default {
       await this.saveAsDraft(this.record);
     },
   },
-  setup() {
-    return useFocusAnnotationViewModel();
+  setup(props) {
+    return useFocusAnnotationViewModel(props);
   },
 };
 </script>

argilla-frontend/components/features/annotation/container/mode/useFocusAnnotationViewModel.ts

@@ -1,17 +1,47 @@
 import { useResolve } from "ts-injecty";
-import { ref } from "vue-demi";
+import { ref, getCurrentInstance, onMounted, computed } from "vue-demi";
 import { Record } from "~/v1/domain/entities/record/Record";
 import { DiscardRecordUseCase } from "~/v1/domain/usecases/discard-record-use-case";
 import { SubmitRecordUseCase } from "~/v1/domain/usecases/submit-record-use-case";
 import { SaveDraftUseCase } from "~/v1/domain/usecases/save-draft-use-case";
+import { useSpeech } from "~/v1/infrastructure/services/useSpeech";
+import { RecordCriteria } from "~/v1/domain/entities/record/RecordCriteria";
+import { Records } from "~/v1/domain/entities/record/Records";
 
-export const useFocusAnnotationViewModel = () => {
+export const useFocusAnnotationViewModel = ({
+  recordCriteria,
+  records,
+}: {
+  recordCriteria: RecordCriteria;
+  records: Records;
+}) => {
   const isDraftSaving = ref(false);
   const isDiscarding = ref(false);
   const isSubmitting = ref(false);
   const discardUseCase = useResolve(DiscardRecordUseCase);
   const submitUseCase = useResolve(SubmitRecordUseCase);
   const saveDraftUseCase = useResolve(SaveDraftUseCase);
+  const instance = getCurrentInstance().proxy;
+  const speech = useSpeech();
+
+  const record = computed(() =>
+    records.getRecordOn(recordCriteria.committed.page)
+  );
+
+  onMounted(() => {
+    speech.waitCommands({
+      SelectOption: (optionNumber) => {
+        record.value.questions.forEach((question) => {
+          question.answerByIndex(optionNumber - 1);
+        });
+      },
+      Submit: () => {
+        submit(record.value);
+
+        instance.$emit("on-submit-responses");
+      },
+    });
+  });
 
   const discard = async (record: Record) => {
     try {

argilla-frontend/package.json

@@ -45,7 +45,8 @@
     "vue-demi": "0.14.10",
     "vue-svgicon": "3.3.2",
     "vue-template-compiler": "2.7.16",
-    "vuedraggable": "2.24.3"
+    "vuedraggable": "2.24.3",
+    "words-to-numbers": "^1.5.1"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",

argilla-frontend/pages/useHomeViewModel.ts

@@ -1,13 +1,15 @@
 import { useResolve } from "ts-injecty";
-import { ref, useFetch } from "@nuxtjs/composition-api";
+import { onMounted, ref, useFetch } from "@nuxtjs/composition-api";
 import { useRoutes, useFocusTab } from "~/v1/infrastructure/services";
 import { GetDatasetCreationUseCase } from "~/v1/domain/usecases/get-dataset-creation-use-case";
 import { GetDatasetsUseCase } from "@/v1/domain/usecases/get-datasets-use-case";
 import { GetWorkspacesUseCase } from "~/v1/domain/usecases/get-workspaces-use-case";
 import { useDatasets } from "~/v1/infrastructure/storage/DatasetsStorage";
 import { useRole } from "~/v1/infrastructure/services/useRole";
+import { useSpeech } from "~/v1/infrastructure/services/useSpeech";
 
 export const useHomeViewModel = () => {
+  const speech = useSpeech();
   const workspaces = ref<any[]>([]);
   const getWorkspacesUseCase = useResolve(GetWorkspacesUseCase);
   const { isAdminOrOwnerRole } = useRole();
@@ -75,7 +77,14 @@ export const useHomeViewModel = () => {
     isLoadingDatasets.value = false;
   };
 
+  onMounted(() => {
+    speech.textToSpeech("Welcome to Argilla");
+
+    speech.explainCommands();
+  });
+
   return {
+    speech,
     datasets,
     workspaces,
     isLoadingDatasets,