components-mocion v0.0.11

Librería de Componentes Reutilizables �

¡Bienvenido a la librería de componentes reutilizables! Esta librería está diseñada para simplificar la creación y implementación de componentes en tus proyectos de React. Con TypeScript y Vite como base, esta librería ofrece una experiencia de desarrollo moderna, segura y eficiente.

🚀 Características Principales

• Componentes Reutilizables: Crea componentes modulares y reutilizables con facilidad.
• TypeScript: Tipado estático para un código más seguro y mantenible.
• Vite: Desarrollo rápido y optimizado con el poder de Vite.
• Fácil Implementación: Solo necesitas importar y usar, ¡sin complicaciones!
• Altamente Personalizable: Los componentes están diseñados para ser flexibles y adaptables a tus necesidades.

📦 Instalación

Para instalar la librería en tu proyecto, ejecuta el siguiente comando:

NPM

npm install components-mocion

PNPM

pnpm add components-mocion

YARN

yarn add components-mocion

♻️ Uso

useSpeech 🎤

useSpeech es un hook creado para permitir el uso de comandos de voz para el flujo de experiencias.

Este proceso se debe hacer en cada una de las páginas que se desea utilizar los comandos de voz.

Importar el componente

import { useSpeech } from "components-mocion";

Llamar al hook

const {} = useSpeech({});

Este hook retorna:

• userSpeech : Texto en tiempo real de la voz del usuario (para utilizar esto el usuario tiene que decir "iniciar")
• listening : Booleano que indica si el microfono está encendido y escuchando.
• isStart : Booleano que indica si el usuario dijo la palabra iniciar para guardar el texto.
• StopListening : Función que hace que el microfono pause la escucha.

Para el correcto funcionamiento del hook este tambien debe recibir unos parametros, si solo recibe un json vacio pondrá los siguientes parametros por defecto

{
  language = "es-CO",
  start = false,
  onHello = () => {},
  onNext = () => {},
  onEnd = () => {},
}

• language : corresponde al idioma de registro del STT, los idiomas disponibles se podrán encontrar en este link.
• start : será el estado inicial para el guardado completo de lo que el usuario habla, en caso de que este valor sea true de inicio, el usuario no deberá decir "iniciar".
• onHello, onNext, onEnd : Recibirán funciones que se ejecutarán para los comandos, "hola", "siguiente" y "terminar" respectivamente.

Comandos

Estos comandos son predeterminados para el uso del hook

• "hola", "siguiente" y "terminar" como se mencionó en el campo de como utilizar al hook estos comandos llaman a las funciones recibidads en la inicialización del hook

• "iniciar" : Finaliza los comandos de voz y comienza a recibir el texto completo de STT.

• "borrar" : Reinicia el texto del STT del usuario.

Ejemplo de uso

"use client";

import { useSpeech } from "components-mocion";
import { useRouter } from "next/navigation";

export default function PromptPage() {
  const { userSpeech } = useSpeech({ onHello: nextPage });

  const router = useRouter();

  function nextPage() {
    router.push("/prompt");
  }

  return (
    <div className="w-screen h-screen relative
    flex flex-col justify-center items-center">
    {userSpeech}
    </div>
  );
}