header-ia-sentiment

Clasificación de texto con JavaScript y TensorFlow.js: Crea una aplicación web de análisis de sentimiento

Clasificación de texto con JavaScript y TensorFlow.js: Crea una aplicación web de análisis de sentimiento

La clasificación de texto es una tarea común en inteligencia artificial y aprendizaje automático. Con JavaScript y TensorFlow.js, podemos realizar este tipo de tareas directamente en una aplicación web, sin depender de servidores externos. En esta guía, aprenderás cómo crear una aplicación interactiva que analiza el sentimiento de un texto usando TensorFlow.js y el modelo pre-entrenado Universal Sentence Encoder.

Paso 1: Configuración del entorno

  1. Crea un nuevo proyecto de Node.js ejecutando el siguiente comando:
npm init -y

Esto generará el archivo package.json.

2. Instala las dependencias necesarias para este proyecto:

npm install @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder --force

Usaremos la librería @tensorflow/tfjs para trabajar con TensorFlow en JavaScript y @tensorflow-models/universal-sentence-encoder como modelo pre-entrenado para procesar texto y generar embeddings.

Paso 2: Cargar el modelo Universal Sentence Encoder

El modelo Universal Sentence Encoder genera representaciones numéricas (embeddings) para oraciones. Vamos a cargar este modelo en nuestro proyecto.

Crea un archivo index.js y agrega el siguiente código:

import * as use from '@tensorflow-models/universal-sentence-encoder';

(async () => {
  const sentences = [
    'Me encanta el clima hoy.',
    'No me gusta nada este lugar.',
    'El café está delicioso.',
    'La película fue aburrida.',
  ];

  // Cargar el modelo pre-entrenado
  const model = await use.load();
  console.log('Modelo Universal Sentence Encoder cargado.');

  // Generar embeddings para las oraciones
  const embeddings = await model.embed(sentences);
  console.log('Embeddings generados:', embeddings.arraySync());
})();
  • Este código carga el modelo y genera embeddings (vectores numéricos) para una lista de oraciones.
  • Estos embeddings serán la base para analizar el sentimiento o clasificar el texto.

Paso 3: Clasificación de texto (simulada)

Como el modelo Universal Sentence Encoder no clasifica directamente el texto, crearemos una regla sencilla para simular el análisis de sentimiento utilizando los embeddings.

Actualiza tu index.js con el siguiente código:

async function classifyText(model, text) {
  const embeddings = await model.embed();
  const score = embeddings.arraySync()[0].reduce((sum, value) => sum + value, 0);

  // Simulación: Sentimiento positivo si el puntaje es mayor que 0
  return score > 0 ? 'positivo' : 'negativo';
}

(async () => {
  const sentences = [
    'Me encanta el clima hoy.',
    'No me gusta nada este lugar.',
    'El café está delicioso.',
    'La película fue aburrida.',
  ];

  const model = await use.load();
  console.log('Modelo cargado exitosamente.');

  for (const sentence of sentences) {
    const sentiment = await classifyText(model, sentence);
    console.log(`"${sentence}" es ${sentiment}.`);
  }
})();
"Me encanta el clima hoy." es positivo.
"No me gusta nada este lugar." es negativo.
"El café está delicioso." es positivo.
"La película fue aburrida." es negativo.

Paso 4: Integración en una aplicación web

Ahora integraremos el modelo en una aplicación web para que los usuarios puedan ingresar su propio texto y obtener una clasificación.

Creamos un archivo index.html con la siguiente estructura:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Clasificación de Sentimiento con TensorFlow.js</title>
  </head>
  <body>
    <h1>Análisis de Sentimiento</h1>
    <div>
      <textarea id="input-text" rows="4" cols="50" placeholder="Escribe aquí..."></textarea>
      <br />
      <button id="classify-button">Clasificar</button>
      <p>Resultado: <span id="result"></span></p>
    </div>

    <!-- Importar TensorFlow.js y Universal Sentence Encoder -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/universal-sentence-encoder.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

Archivo JS: index.js

Este script conecta el HTML con el modelo de TensorFlow.js:

let model;

async function loadModel() {
  model = await use.load();
  console.log('Modelo cargado exitosamente.');
}

async function classifyText(text) {
  const embeddings = await model.embed();
  const score = embeddings.arraySync()[0].reduce((sum, value) => sum + value, 0);
  return score > 0 ? 'positivo' : 'negativo';
}

async function handleClassifyClick() {
  const inputText = document.getElementById('input-text').value;
  const resultElement = document.getElementById('result');

  if (!inputText) {
    resultElement.textContent = 'Por favor, ingresa un texto.';
    return;
  }

  const sentiment = await classifyText(inputText);
  resultElement.textContent = `Sentimiento: ${sentiment}`;
}

// Inicializar
loadModel();
document.getElementById('classify-button').addEventListener('click', handleClassifyClick);

Conclusión

En este artículo, aprendimos cómo usar TensorFlow.js y el modelo Universal Sentence Encoder para analizar y clasificar texto en una aplicación web.

Hemos visto:

  1. Cómo configurar el entorno y cargar el modelo.
  2. Cómo generar embeddings para el texto.
  3. Cómo integrar la funcionalidad en una aplicación interactiva que puede analizar el sentimiento de cualquier texto ingresado por el usuario.

Con esta base, puedes expandir el proyecto utilizando modelos más complejos o entrenando tus propios clasificadores. ¡El límite es tu imaginación!

course v3 cover

Curso de VUE 3 – Sistema de componentes

Curso de Vue 3 – Sistema de Componentes

Los componentes son una de las características más importantes de Vue, ya que permiten la creación de aplicaciones web modulares, reutilizables y escalables.

En Vue 3, existen varias formas de crear componentes, siendo los Componentes de Archivo Único (SFC, por sus siglas en inglés) la opción más popular y recomendada debido a su simplicidad y organización.

¿Qué es un Componente de Archivo Único (SFC)?

Los Componentes de Archivo Único (.vue) son la forma más común y recomendada de crear componentes en Vue.

En un solo archivo, puedes definir el template (HTML), el script (JavaScript, TypeScript, etc.) y los estilos (CSS, SCSS, etc.), proporcionando una estructura clara y fácil de manejar.

Aquí tienes un ejemplo básico de un SFC:

<template>
  <div class="container">
    <h1 v-text="message" />
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  const message = ref('Hello, Vue 3!');
</script>
<style scoped>
.container {
  color: blue;
}
</style>

Componentes Funcionales

Los componentes funcionales son componentes sin estado y sin instancia de Vue, lo que significa que son más ligeros y eficientes cuando no se necesita mantener datos reactivos o manejar el ciclo de vida del componente.

Creación de Componentes con Vue 3

En Vue 3, los componentes se pueden crear principalmente de dos formas: utilizando la Options API o la Composition API con <script setup>. Nos centraremos en la creación de componentes utilizando Componentes de Archivo Único (SFC) y ambas APIs.

Ejemplo con la Options API

Aquí tienes un ejemplo básico de un componente creado con la Options API:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>
<style scoped>
  div {
    font-size: 24px;
    color: red;
  }
</style>

En este ejemplo, hemos definido un componente llamado HelloWorld que muestra un mensaje en la pantalla. Utilizamos la opción data para definir el estado del componente y mostramos el mensaje usando la sintaxis de plantillas de Vue ({{ message }}).

Ejemplo con la Composition API y <script setup>

Ahora, veremos el mismo componente utilizando la Composition API y <script setup>:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  const message = ref('Hello, World!');
</script>
<style scoped>
  div {
    font-size: 24px;
    color: red;
  }
</style>

En este ejemplo, utilizamos la función ref de la Composition API para crear una variable reactiva message y mostramos el mensaje en la pantalla.

Comunicación entre Componentes: Props y Eventos

Vue permite la comunicación entre componentes mediante el paso de props y la emisión de eventos.

Ejemplo de Paso de Props y Eventos con Options API

A continuación, creamos un componente Button que acepta una prop label y emite un evento click:

<template>
  <button @click="emitClick">
    {{ label }}
  </button>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  },
  methods: {
    emitClick() {
      this.$emit('click');
    }
  }
}
</script>

El componente Button acepta una prop label para el texto del botón y emite un evento click cuando se hace clic en él. Luego, lo utilizamos en un componente padre:

<template>
  <div>
    <button-component label="Click me!" @click="handleClick"></button-component>
  </div>
</template>
<script>
  import ButtonComponent from './Button.vue';
  export default {
    components: {
      ButtonComponent
    },
    methods: {
      handleClick() {
        alert('Button was clicked!');
      }
    }
  }
</script>

Ejemplo con Composition API y <script setup>

Aquí tienes el mismo componente Button utilizando la Composition API:

<template>
  <button @click="emitClick">
    {{ label }}
  </button>
</template>
<script setup>
  import { defineProps, defineEmits } from 'vue';
  const props = defineProps({
    label: {
      type: String,
      required: true
    }
  });
  const emit = defineEmits(['click']);
  function emitClick() {
    emit('click');
  }
</script>

Y su uso en un componente padre:

<template>
  <div>
    <button-composition label="Click me!" @click="handleClick"></button-composition>
  </div>
</template>
<script setup>
  import ButtonComposition from './ButtonComposition.vue';
  function handleClick() {
    alert('Button was clicked!');
  }
</script>

Uso de Slots para Contenido Distribuido

Los slots permiten la creación de componentes con contenido distribuido, inyectando contenido desde el componente padre al hijo.

Ejemplo de Slots con Options API

Un componente Card con slots podría verse así:

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
  export default {}
</script>
<style scoped>
  .card {
    border: 1px solid #ccc;
    margin-bottom: 1rem;
  }
  .card-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 1rem;
  }
  .card-body {
    padding: 0.5rem 1rem;
  }
  .card-footer {
    background-color: #f5f5f5;
    border-top: 1px solid #ccc;
    padding: 0.5rem 1rem;
  }
</style>

Y su uso:

<template>
  <div>
    <card-component>
      <template #header>
        <h3>Card Header</h3>
      </template>
      <p>Card Body</p>
      <template #footer>
        <p>Card Footer</p>
      </template>
    </card-component>
  </div>
</template>
<script>
  import CardComponent from './Card.vue';
  export default {
    components: {
      CardComponent
    }
  }
</script>

Componentes Dinámicos y Asincrónicos

Los componentes dinámicos se renderizan en función de condiciones y los componentes asincrónicos se cargan de manera dinámica. Se puede utilizar la directiva v-if para manejar los componentes dinámicos y defineAsyncComponent para los asincrónicos.

Ejemplo con Composition API y <script setup>

Aquí tienes un ejemplo de componente asincrónico:

<template>
  <div>
    <button @click="changeComponent">Change Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

const ComponentA = defineAsyncComponent(() => import('./ComponentA.vue'))
const ComponentB = defineAsyncComponent(() => import('./ComponentB.vue'))
const ComponentC = defineAsyncComponent(() => import('./ComponentC.vue'))

const currentComponent = ref(ComponentA)

function changeComponent() {
  const components = [ComponentA, ComponentB, ComponentC]
  const index = components.indexOf(currentComponent.value)
  currentComponent.value = components[(index + 1) % components.length]
}
</script>

Hooks del Ciclo de Vida de los Componentes

Vue proporciona hooks para manejar distintas fases del ciclo de vida de un componente, como beforeCreate, created, mounted, y más.

Ejemplo con Options API

Aquí tienes un ejemplo de cómo usar los hooks del ciclo de vida con la Options API:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  beforeCreate() {
    this.message = 'beforeCreate'
    console.log('beforeCreate')
  },
  created() {
    this.message = 'created'
    console.log('created')
  },
  beforeMount() {
    this.message = 'beforeMount'
    console.log('beforeMount')
  },
  mounted() {
    this.message = 'mounted'
    console.log('mounted')
  },
  beforeUpdate() {
    this.message = 'beforeUpdate'
    console.log('beforeUpdate')
  },
  updated() {
    this.message = 'updated'
    console.log('updated')
  },
  beforeUnmount() {
    this.message = 'beforeUnmount'
    console.log('beforeUnmount')
  },
  unmounted() {
    this.message = 'unmounted'
    console.log('unmounted')
  }
}
</script>

Ejemplo con Composition API y <script setup>

Aquí tienes un ejemplo de uso de hooks del ciclo de vida:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup>
import { ref, onBeforeCreate, onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

const message = ref('')

onBeforeCreate(() => {
  message.value = 'beforeCreate'
})

onCreated(() => {
  message.value = 'created'
})

onBeforeMount(() => {
  message.value = 'beforeMount'
})

onMounted(() => {
  message.value = 'mounted'
})

onBeforeUpdate(() => {
  message.value = 'beforeUpdate'
})

onUpdated(() => {
  message.value = 'updated'
})

onBeforeUnmount(() => {
  message.value = 'beforeUnmount'
})

onUnmounted(() => {
  message.value = 'unmounted'
})
</script>

Conclusión

En este módulo, hemos cubierto varios aspectos fundamentales de los componentes en Vue 3, como los Componentes de Archivo Único (SFC), la Options API, la Composition API, la comunicación entre componentes mediante props y eventos, el uso de slots, componentes dinámicos y asincrónicos, y los hooks del ciclo de vida.

Explora cada uno de estos temas en tus propios proyectos para aprovechar al máximo las capacidades de Vue 3 y construir aplicaciones web modernas y dinámicas.

course v3 cover

Curso de VUE 3 – Plantillas y bindeo de datos

Curso de VUE 3 – Plantillas y bindeo de datos

Seguimos con el curso de Vue 3, y en esta nueva entrada del blog veremos que son los templates (plantillas), el bindeo de datos y algunas directivas.

¡Comencemos!

Sintaxis de plantillas

Las plantillas en Vue.js se escriben usando HTML estándar y añadiendo una sintaxis especial que nos proporciona Vue.

Si conoces o has trabajado con algún otro framework o librería como Angular, React o Svelte, esta sintaxis te resultara familiar.

En Vue cuando queremos mostrar datos en el template o evaluar expresiones, podemos usar las llaves dobles: {{ dato o expresión }}

<script setup>
  import { ref } from 'vue';
  const message = ref('Hello World!!!');
</script>

<template>
  <h1>{{ message }}</h1>
</template>

vue3-c2-1

En este ejemplo, la expresión {{ message }} se reemplaza por el valor de la variable message.

También podemos realizar evaluaciones de código en el mismo template.

<script setup>
  import { ref } from 'vue';
  const message = ref('Hello World!!!');
</script>
<template>
  <h1>{{ message }}</h1>
  <p>Suma 10 * 20 = {{ 10 * 20 }}</p>
</template>

vue3-c2-2

Existen otras formas de mostrar datos en un template y es mediante el uso de directivas, pero eso lo veremos en breve.

Enlaces de datos reactivos

De forma general Vue nos proporciona un sistema de bindeo de datos reactivo que nos permite conectar el estado la aplicación al interfaz de usuario.

Cuando el estado de la aplicación cambia, la interfaz de usuario se actualiza automáticamente para reflejar los cambios.

En Vue 3 y gracias a la Composition API podemos declarar el estado reactivo mediante el uso de funciones reactvie y ref.

<script setup>
  import { ref } from 'vue';
  const name = ref('');
</script>
<template>
  <div>
    <div>
      <input type="text" v-model="name" placeholder="Name" />
    </div>
    <div>
      Name: <label>{{ name }}</label>
    </div>
  </div>
</template>

vue3-c2-3

Directiva v-bind y v-on

La directiva v-bind se utiliza para enlazar una propiedad de un componente a un atributo HTML.

La sintaxis de la directiva v-bind es v-bind:atributo="valor" o podemos usar su shorthand (forma abreviada) de la siguiente forma :atributo="valor".

<script setup>
  import { ref } from 'vue';
  const imageURL = ref('https://www.arsys.es/blog/file/uploads/2020/04/01-vuejs.jpg');
</script>
<template>
  <div>
    <img :src="imageURL" />
    <img v-bind:src="imageURL" />
  </div>
</template>
<style>
  img {
    width: 200px;
    height: auto;
    border: 1px solid #cccccc;
  }
</style>

vue3-c2-4

La directiva v-on se utiliza para enlazar un método de un componente a un evento HTML.

La sintaxis de la directiva v-on es v-on:evento="método" o podemos usar su shorthand (forma abreviada) de la siguiente forma @evento="metodo".

<script setup>
  import { ref } from 'vue';
  const text = ref('');
  const reverseText = () => {
    text.value = text.value.split('').reverse().join('');
  };
</script>
<template>
  <div>
    <input type="text" v-model="text" placeholder="Write a text"/>
    <button v-on:click="reverseText">Click to reverse text</button>
    <button @click="reverseText">Click to reverse text</button>
  </div>
  <div>
    Reverse text: {{ text }}
  </div>
</template>

Directiva v-text y v-html

Estas directivas se utilizan para actualizar el contenido de un elemento HTML de manera reactiva.

Cada una tiene un propósito específico y se usa en diferentes casos según el tipo de contenido que se necesita renderizar.

La directiva v-text se usa para actualizar el contenido de texto de un elemento.

Es similar a usar interpolación con dobles llaves {{}}, pero v-text evita el parpadeo (flashing) del contenido cuando se renderiza inicialmente.

<script setup>
  import { ref } from 'vue';
  const text = ref('');
</script>
<template>
  <div>
    <input type="text" v-model="text" placeholder="Write a text"/>
    <p v-text="text"></p>
  </div>
</template>

La directiva v-html se usa para insertar contenido HTML sin escaparlo, es decir, el contenido se renderiza como HTML real.

Esto es útil cuando necesitas renderizar contenido HTML dinámico proveniente de una fuente confiable.

<script setup>
  import { ref } from 'vue';
  const text = ref('');
</script>
<template>
  <div>
    <input type="text" v-model="text" placeholder="Write a text" />
    <p v-html="text"></p>
  </div>
</template>

vue3-c2-5

Directiva v-if, v-show y v-for

La directiva v-if se usa para mostrar u ocultar un elemento HTML en función de una condición.

Debemos tener en cuenta que la directiva v-if en base a la condición dada, el elemento no se renderiza en el DOM.

<script setup>
  import { ref } from 'vue';
  const show = ref(false);
  const toggleTitle = () => {
    show.value = !show.value;
  };
</script>
<template>
  <div>
    <p v-if="show">Title</p>    
    <p>
      <button @click="toggleTitle">Toggle</button>
    </p>
  </div>
</template>

v-if-2 v-if-1

La directiva v-show funciona exactamente igual que v-if, pero en lugar de añadir o eliminar el elemento del DOM, simplemente ajusta la propiedad CSS display del elemento.

<script setup>
  import { ref } from 'vue';
  const show = ref(false);
  const toggleTitle = () => {
    show.value = !show.value;
  };
</script>
<template>
  <div>
    <p v-show="show">Title</p>    
    <p>
      <button @click="toggleTitle">Toggle</button>
    </p>
  </div>
</template>

v-show-2 v-show-1

La directiva v-for se utiliza para renderizar una lista de elementos HTML en función de un array de datos, y sus sintaxis es v-for="(item, index) in array"

<script setup>
  import { reactive } from 'vue';
const dataTable = reactive([
    { id: 1, name: 'John Doe', age: 30, gender: 'Male', city: 'New York' },
    { id: 2, name: 'Jane Doe', age: 25, gender: 'Female', city: 'Los Angeles' },
    { id: 3, name: 'Peter Smith', age: 40, gender: 'Male', city: 'Chicago' },
    { id: 4, name: 'Mary Smith', age: 35, gender: 'Female', city: 'Houston' },
    { id: 5, name: 'David Jones', age: 50, gender: 'Male', city: 'Dallas' }
  ]);

</script>
<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in dataTable" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.gender }}</td>
        <td>{{ row.city }}</td>
      </tr>
    </tbody>
  </table>
</template>
<style>
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
  body {
    font-family: 'Roboto', sans-serif;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
</style>

v-for-1

En este ejemplo usamos la directiva v-for para mostrar las filas de una tabla en función del array dataTable, usando la directiva :key  para proporcionar una clave única a cada elemento de la tabla.

course v3 cover

Curso de VUE 3 – Introducción a Vue 3

Curso de VUE 3 – Introducción a Vue 3

En esta nueva entrad del blog, quiero darte la bienvenida al nuevo curso de Vue 3, donde aprenderemos a desarrollar aplicaciones web.

A continuación algunas de las cosas que veremos en el curso:

  • Sintaxis de los templates (plantillas)
  • Reactividad usando computed y watches
  • Directivas más comunes
  • Eventos
  • Componentes
  • Manipulación del DOM

¡Comencemos!

Diferencias entre Vue 3 y Vue 2

  • Mejor rendimiento: Más rápido y eficiente gracias a la implementación de un nuevo motor de reactividad y la optimización del compilador.
  • Composition API: Introduce una nueva forma de escribir componentes llamada Composition API, que nos permite una mayor flexibilidad y reutilización de código.
  • Fragmentos y teletransporte: Nos permite crear múltiples elementos raíz en un componente y teletransportar elementos a otros componentes.
  • Mejoras en el manejo de eventos y transiciones y mejoras en integración con TypeScript.

Instalación y configuración del entorno de desarrollo

Para empezar a trabajar con Vue 3, es necesario instalar Node.js e instalar el Vue CLI.

El Vue CLI es una herramienta de la línea de comandos que nos permite crear y configurar proyectos.

Para instalarlo usaremos el siguiente comando:

npm install -g @vue/cli

Una vez instalado, procederemos a crear un nuevo proyecto usando la siguiente línea de comandos:

vue create my-project

Este comando nos abrirá un asistente interactivo en el cual podremos seleccionar las opciones de configuración del proyecto.

Por último, solo nos queda arranca nuestro servidor de desarrollo, y para ellos usaremos el siguiente comando:

npm run serve

Esto nos abrirá el proyecto en el navegador web y podremos ver cualquier cambio en tiempo real.

Con esta pequeña introducción, hemos visto algunas mejoras respecto a Vue 2 y además hemos podido crear un proyecto base desde cero usando el CLI de Vue.

shorturl

Descubre cómo Acortar y Gestionar tus Enlaces con Tecnops URL Shortener

Descubre cómo Acortar y Gestionar tus Enlaces con Tecnops URL Shortener

En el vertiginoso mundo digital, compartir enlaces largos y complejos puede resultar engorroso. Es en este escenario donde Tecnops URL Shortener, una herramienta desarrollada con tecnologías tan conocidas y usadas como Node.js, Express, JavaScript, CSS y HTML, se presenta como la solución ideal para simplificar y optimizar tus enlaces, ofreciéndote una experiencia de navegación más eficiente.

Creando una URL Corta Personalizada

  1. Accede a la plataforma Tecnops URL Shortener visitando //tecnops.es:10000 en tu navegador favorito.
  2. En el campo URL, introduce la URL que deseas acortar.
  3. Asigna un alias único y fácil de recordar en el campo Alias. Por ejemplo, podrías utilizar mi-alias.
  4. Haz clic en el botón Acortar para generar tu URL corta personalizada con el alias.

crear url

Accediendo a tu URL Acortada

Para acceder a la URL acortada que has creado, sigue estos simples pasos:

  1. Utiliza el siguiente formato de URL: //tecnops.es:10000/code/mi-alias.
  2. Reemplaza mi-alias con el alias que asignaste al acortar la URL.

Al abrir esta URL en tu navegador, experimentarás una redirección automática hacia la URL original asociada con el alias.

Este proceso, respaldado por las tecnologías líderes de Node.js, Express, JavaScript, CSS y HTML, hace que compartir enlaces sea más sencillo y elegante, permitiéndote mantener el control sobre tus enlaces y mejorar la experiencia de tus usuarios.

Beneficios de Tecnops URL Shortener:

  • Personalización: Asigna alias significativos para tus enlaces y crea una identidad única.
  • Gestión Sencilla: Accede a una interfaz intuitiva para crear tus enlaces acortados.
  • Eficiencia: Comparte enlaces de manera efectiva, ya sea en redes sociales, correos electrónicos o mensajes.

Conclusión: Tecnops URL Shortener, construido con tecnologías avanzadas, redefine la forma en que interactuamos con los enlaces en línea. ¡Simplifica tu experiencia en la web hoy mismo y descubre el poder de tus enlaces acortados con Tecnops!

Explorando el Mundo de la Química con VueJS y Realidad Aumentada: Una Aplicación Interactiva de la Tabla Periódica

Explorando el Mundo de la Química con VueJS y Realidad Aumentada: Una Aplicación Interactiva de la Tabla Periódica

La química es una ciencia fascinante que nos permite comprender el mundo que nos rodea a nivel molecular y atómico. Una herramienta esencial para cualquier estudiante de química, profesional o simplemente un entusiasta de la ciencia es la tabla periódica de los elementos. ¿Pero qué pasaría si pudieras llevar la tabla periódica contigo en tu dispositivo móvil o explorarla en tu PC de una manera completamente nueva y emocionante? Ahí es donde entra en juego una asombrosa aplicación creada con Vue.js.

Vue.js y Model Viewer: La Magia detrás de la Aplicación

Vue.js es un framework de JavaScript que se ha convertido en una elección popular para el desarrollo de aplicaciones web interactivas y receptivas, que junto a la librería de Google model-viewer nos permite crear experiencias de realidad aumentada.

Gracias a estas dos tecnologías, la potencia que ofrecen y su facilidad de uso hacen que sea la elección perfecta para crear una aplicación que transforma la forma en que interactuamos con la tabla periódica.

Una Experiencia Interactiva

Esta aplicación web no es una tabla periódica estática, sino una experiencia interactiva que brinda una nueva perspectiva sobre los elementos químicos.

atom ar

Ya sea que estés en tu PC o en tu dispositivo móvil, puedes explorar cada elemento de la tabla periódica de una manera completamente nueva.

atom ar

Desde aquí podéis acceder a la aplicación web, ya sea en vuestro ordenador o en un dispositivo móvil para aprovechar las capacidades de realidad aumentada.

Realidad Aumentada: Más Allá de lo Tradicional

Una de las características más emocionantes de esta aplicación es su capacidad de realidad aumentada (RA). Al seleccionar un elemento, puedes activar la cámara de tu dispositivo para visualizarlo en el mundo real a través de la pantalla. ¿Te imaginas poder ver el elemento helio flotando en tu escritorio o el hierro en tu mano? Con esta aplicación, es posible.

Captura de Momentos Químicos

La aplicación también permite capturar estos momentos químicos únicos. Puedes tomar fotos de los elementos en su entorno de RA y guardarlos para futuras referencias o compartirlas con tus amigos y colegas. Esto hace que el aprendizaje y la exploración de la química sean más divertidos y memorables que nunca.

¿Cómo Funciona?

La aplicación está diseñada para ser intuitiva y fácil de usar.

Únicamente debes desplazarte por el panel inferior hasta encontrar el elemento deseado, pulsar sobre el y automáticamente se mostrara en la pantalla el elemento 3d animado y una amplia gama de información.

Cuando desees explorar un elemento en 3D con RA, simplemente selecciona la opción correspondiente y encuadra el elemento con la cámara de tu dispositivo. La aplicación superpondrá una representación 3D del elemento en el mundo real, lo que te permitirá verlo desde todos los ángulos.

Aprende y Explora

Ya sea que seas un estudiante que busca una forma más atractiva de estudiar la química, un profesional que necesita una herramienta útil en el trabajo o simplemente un amante de la ciencia que quiere explorar el mundo de la química de manera interactiva, esta aplicación tiene algo para todos.

En resumen, esta aplicación de la tabla periódica creada con Vue.js es una prueba más de cómo la tecnología puede hacer que el aprendizaje y la exploración sean emocionantes y accesibles para todos. ¡Descárgala hoy y descubre el fascinante mundo de los elementos químicos como nunca antes!

pscode cover

Desarrollando una Aplicación de Generación de Código con Inteligencia Artificial

Desarrollando una Aplicación de Generación de Código con Inteligencia Artificial

La inteligencia artificial (IA) es un campo que ha avanzado a pasos agigantados en los últimos años, y su impacto se puede sentir en una variedad de aplicaciones y servicios.

En este artículo, quiero compartir una emocionante noticia con todos ustedes: he desarrollado una aplicación basada en Vue3 y Vuesax que utiliza la inteligencia artificial para generar código en múltiples lenguajes.

Lo mejor de todo es que es completamente gratuita y no almacena ningún dato personal.

Vue3 y Vuesax: Las Herramientas Clave

Para llevar a cabo este proyecto, he utilizado la última versión de VueJS (Vue3) y Vuesax como librería de componentes.

Estas herramientas me permitieron construir una interfaz de usuario elegante y funcional para nuestra aplicación de generación de código.

Vue3 es conocido por su facilidad de uso y flexibilidad, lo que lo convierte en una elección perfecta para proyectos de este tipo.

Por su parte, Vuesax proporciona una amplia gama de componentes predefinidos que facilitan la creación de una interfaz de usuario atractiva y receptiva.

Nuestra Fuente de Poder: Modelo «Phind/Phind-CodeLlama-34B-v2»

El corazón de la aplicación es el modelo de inteligencia artificial «Phind/Phind-CodeLlama-34B-v2«.

Este modelo ha sido puesto a disposición por la comunidad de desarrolladores en Hugging Face, un recurso valioso para la comunidad de IA.

Además, me gustaría reconocer a Meta la creación de este modelo, cuyo trabajo ha hecho posible que nuestra aplicación sea una realidad.

Generación de Texto y Código con Inteligencia Artificial

La generación de texto y código con modelos de inteligencia artificial es un campo en constante crecimiento.

Estos modelos son entrenados en enormes conjuntos de datos y pueden generar contenido de manera coherente y relevante en una variedad de lenguajes de programación.

La aplicación se basa en la capacidad de este modelo para comprender solicitudes de generación de código y proporcionar resultados precisos y útiles.

¡Pruébalo por Ti Mismo!

Si deseas experimentar con la aplicación de generación de código basada en IA, te invitamos a visitar https://ps-code.tecnops.es.

PS CODE

Espero que encuentres la herramienta útil y que te ayude a agilizar tus tareas de desarrollo de software.

Agradecimientos a la Comunidad

Quiero expresar mi más sincero agradecimiento a la comunidad de desarrolladores y entusiastas de la inteligencia artificial.

Los avances en este campo no serían posibles sin la colaboración y el espíritu de compartir conocimiento que caracterizan a esta comunidad.

También quiero agradecer a Hugging Face y Meta por proporcionar el modelo que ha hecho posible nuestra aplicación.

En resumen, la aplicación de generación de código es un emocionante ejemplo de cómo la inteligencia artificial puede ser aplicada para facilitar el trabajo de los desarrolladores.

Esperamos que la encuentres útil y que contribuya a tu productividad en el mundo del desarrollo de software.

¡Explora, experimenta y únete a nosotros en la emocionante era de la IA aplicada!

Descarga y Crea Contenido con Nuestra Aplicación Educativa

Descarga y Crea Contenido con Nuestra Aplicación Educativa

Introducción

En el mundo de la programación, aprender cómo funcionan diferentes bibliotecas y tecnologías puede ser una tarea desafiante pero emocionante.

Mi última creación es una aplicación educativa desarrollada utilizando JavaScript, Vue3 y Quasar 2, yt-converter y Stable Difussion, que permite obtener información de videos de YouTube, descargar audios y videos en varias calidades, y crear impresionantes imágenes. ¡Lo mejor de todo es que es totalmente gratuita!

Para acceder a ella y disfrutarla puedes acceder desde aquí.

Como funciona

La aplicación tiene un interface de usuario muy sencillo:

stable 1

Con la primera pestaña podemos obtener información sobre videos de YouTube.

Gracias al uso de la librería yt-converter, ahora puedes explorar este vasto universo de contenido directamente desde nuestra aplicación.

Una vez que ingreses la URL del video de YouTube que te interese, nuestra aplicación recuperará y mostrará toda la información relevante sobre ese video. ¿Te preguntas cuántas vistas tiene tu video favorito? ¿Quieres saber la duración exacta para programar tu tiempo? ¿O tal vez necesitas una breve descripción para compartir con tus amigos? Nuestra aplicación te proporcionará todos estos detalles y más, en una interfaz fácil de usar y elegante.

Pero eso no es todo. Sabemos que muchas veces deseas guardar contenido de YouTube para verlo más tarde sin conexión o compartirlo con otros. Por eso, hemos incorporado dos tablas llenas de enlaces para descargar el audio y el video de YouTube que has seleccionado. Puedes elegir entre diferentes calidades de audio y video según tus necesidades y preferencias. ¿Quieres escuchar ese discurso inspirador en alta calidad o simplemente necesitas un archivo de audio ligero para un rápido repaso? ¡Tú decides!

stable 2

Con la segunda pestaña, puedes desatar tu creatividad con Stable Difussion.

Sabemos lo importante que es para los educadores y estudiantes estimular su creatividad, por esta razón he integrado el uso de WebSocket y Stable Difussion para crear imágenes donde puedes dar rienda suelta a tu imaginación.

¿Cómo funciona? Es fácil. Solo ingresa el texto que deseas en el campo de texto y, con solo un clic, nuestra aplicación generará imágenes impresionantes utilizando Stable Difussion.

Observa cómo tus palabras cobran vida en forma de arte visual. Desde hermosos fondos para presentaciones hasta diseños gráficos para publicaciones en redes sociales, la aplicación te ofrece un sinfín de posibilidades creativas. ¡Es una experiencia verdaderamente mágica!

Conclusión

Entiendo lo importante que es tener acceso a herramientas educativas de calidad sin costo alguno, por eso la aplicación es gratis, sin publicidad, sin almacenar datos, nada de nada.

La aplicación fue desarrollada con fines educativos y de aprendizaje, y mi intención es mantenerla gratuita.

Yo siempre he pensado que el conocimiento y el aprendizaje deben ser accesibles para todos, y esta aplicación es mi pequeña forma de contribuir a esta causa.

Así que, ¿por qué no te sumerges en el emocionante mundo de nuestra aplicación educativa? Descarga videos y audios, explora tus intereses y crea imágenes únicas. ¡Todo esto mientras aprendes y te diviertes!

Recuerda, esta aplicación es una idea que se puede mejorar, lo que significa que siempre estoy abierto a sugerencias y contribuciones. Si tienes alguna idea para mejorarla o agregar nuevas características, ¡compártela con nosotros! Tu opinión es valiosa y nos ayudará a hacer crecer esta herramienta educativa.

Gracias por ser parte de esta emocionante aventura educativa. ¡Disfruta y diviértete mientras aprendes y exploras con nuestra aplicación gratuita y de código abierto!

Publicación de mi librería en NPM: extends-javascript

Publicación de mi librería en NPM: extends-javascript

Con esta nueva entrada del blog, quiero anunciar que he desarrollado una pequeña librería que amplia las funcionalidades del Prototipo de Arrays de JavaScript y que esta publicada en npm.

Estoy emocionado de presentarles un proyecto en el que he estado trabajando arduamente: extends-javascript.

¿Qué es extends-javascript?

Extends-javascript es una librería de código abierto que proporciona de una manera sencilla un listado de nuevos métodos personalizados al prototipo de Array en JavaScript.

Con esta dependencia, podrás acceder a una variedad de métodos adicionales para manipular y operar arreglos de una manera muy simple.

Características principales de extends-javascript

Extends-javascript ofrece una amplia gama de características y funcionalidades para trabajar con arreglos.

A continuación, se muestran todas las funcionalidades disponibles:

  • $allCoincidencesBy(properties): Devuelve un arreglo de todos los elementos que coinciden con las propiedades especificadas.
  • $chunk(chunkSize = 1): Divide el arreglo en trozos más pequeños.
  • $compact(): Elimina los valores falsy del arreglo.
  • $countOccurrences(value): Cuenta el número de veces que aparece un valor en el arreglo.
  • $drop(n): Elimina los primeros n elementos del arreglo.
  • $findIndex(callback): Devuelve el índice del primer elemento que cumple con una condición específica.
  • $findLast(callback): Devuelve el último elemento que cumple con una condición específica.
  • $first(): Devuelve el primer elemento del arreglo.
  • $flatten(): Aplana un arreglo anidado.
  • $forEachRight(callback): Itera sobre el arreglo en orden inverso.
  • $generateExampleData(structure): Genera datos de ejemplo basados en una estructura.
  • $groupBy(prop): Agrupa los elementos del arreglo por una propiedad específica.
  • $groupByMultiple(…conditions): Agrupa los elementos del arreglo por múltiples condiciones.
  • $insertIn(index, …elements): Inserta elementos en una posición específica del arreglo.
  • $intersection(…arrays): Devuelve un nuevo arreglo con los elementos comunes entre varios arreglos.
  • $isEmpty(): Verifica si el arreglo está vacío.
  • $last(): Devuelve el último elemento del arreglo.
  • $maxByProperty(property): Devuelve el elemento del arreglo con el valor máximo de una propiedad específica.
  • $mean(): Calcula el promedio de todos los elementos numéricos del arreglo.
  • $merge(…arrays): Combina varios arreglos en uno solo.
  • $notDuplicated(): Elimina los elementos duplicados del arreglo.
  • $notDuplicatedBy(prop): Elimina los elementos duplicados del arreglo basado en una propiedad específica.
  • $padStart(length, value): Rellena el arreglo al principio con un valor específico hasta alcanzar una longitud determinada.
  • $pick(…props): Selecciona las propiedades específicas de cada elemento del arreglo y las devuelve en un nuevo arreglo.
  • $pluck(key): Extrae los valores de una propiedad específica de cada elemento del arreglo y los devuelve en un nuevo arreglo.
  • $remove(element): Elimina la primera aparición de un elemento en el arreglo.
  • $replace(searchValue, replaceValue): Reemplaza un valor específico en el arreglo.
  • $reverse(): Invierte el orden de los elementos en el arreglo.
  • $sortBy(prop, sortOrder = ‘asc’): Ordena el arreglo según una propiedad específica y un orden determinado.
  • $sum(): Calcula la suma de todos los elementos numéricos del arreglo.
  • $sumOfProperty(property): Calcula la suma de una propiedad específica en todos los elementos del arreglo.
  • $symmetricDifference(otherArray): Devuelve un nuevo arreglo con los elementos que son únicos en cada uno de los arreglos.
  • $take(n): Retorna los primeros n elementos del arreglo.
  • $trimEnd(callback): Elimina los elementos finales del arreglo hasta que una condición específica se cumpla.
  • $trimStart(callback): Elimina los elementos iniciales del arreglo hasta que una condición específica se cumpla.
  • $union(…arrays): Combina varios arreglos en uno solo sin elementos duplicados.

Estas funcionalidades han sido diseñadas para facilitar tareas comunes al trabajar con arreglos en JavaScript.

Cómo utilizar extends-javascript

Para comenzar a utilizar extends-javascript en tus proyectos es muy sencillo. Solo sigue estos pasos:

  1. Instala extends-javascript a través de npm en tu proyecto:
npm install extend-javascript.js
  1. Incluye extends-javascript en tu fichero
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extends Javascript</title>
</head>
<body>
  <script src="./node_modules/extend-javascript.js/src/index.js"></script>
  <script>
    const arr = [1, 2, 3, 4, 5];
    console.log(arr.$first()); // 1
    console.log(arr.$last()); //  5
  </script>
</body>
</html>
  1. A partir de ahora, podrás utilizar los métodos adicionales en tus arreglos:

A futuro

Extends-javascript es un proyecto de código abierto y siempre estoy abierto a cualquier feedback.

Si tienes alguna idea, sugerencia o encuentras algún problema, no dudes en visitar el repositorio en GitHub y compartir tus ideas.

Para finalizar, me gustaría anunciar que en futuras versiones de extends-javascript, también se añadirán nuevas funcionalidades al prototipo de «Object«, «Number» y «String«.

Esto ampliará aún más las posibilidades y facilitará el trabajo con estos tipos de datos en JavaScript.

Espero que encuentres extends-javascript útil y emocionante para tus proyectos en JavaScript.

¡Feliz desarrollo!

pasapalabra vue

Pequeño juego usando Vue

Pequeño juego usando Vue

La Ruleta del Frontend es un pequeño juego para mejorar tus habilidades de programación.

Si eres un desarrollador de frontend, probablemente estás familiarizado con las herramientas como JavaScript, Sass y Vue.js 2. Pero, ¿alguna vez has pensado en usar estas tecnologías para crear un juego?. Con La Ruleta del Frontend, puedes hacer precisamente eso.

La Ruleta del Frontend es un pequeño juego que se basa en un concepto muy simple. El jugador  selecciona un lenguaje de programación o una herramienta de frontend, y luego se le presenta un desafío que debe completar utilizando esa tecnología. El juego es una forma divertida y educativa de mejorar tus habilidades de programación.

Para crear La Ruleta del Frontend, se utilizó JavaScript para programar la lógica del juego y controlar la interacción del usuario. Sass se utilizó para crear la apariencia del juego, y Vue.js 2 se utilizó para crear los componentes interactivos.

La ruleta del frontend

La ruleta del frontend

El juego se puede jugar en cualquier navegador web moderno y es completamente gratuito. Además, se pueden agregar nuevos desafíos y tecnologías a medida que se desarrollan, lo que significa que siempre habrá algo nuevo que aprender y probar.

La Ruleta del Frontend es una forma divertida y emocionante de mejorar tus habilidades de programación y descubrir nuevas herramientas y tecnologías. Ya sea que seas un principiante o un desarrollador experimentado, este juego te mantendrá entretenido y desafiado mientras te ayuda a mejorar tus habilidades de programación. ¡Así que comienza a jugar ahora mismo haciendo clic aquí!