Herramientas VidGrid-HTML - Cuadrículas de miniaturas de video personalizables en el navegador

N

NessaCRT4

Lurker
Registrado
13 Ago 2023
Mensajes
471
Puntos de reacción
0
¡Hola!
Estoy harto de ver tantos posts con solo un link a un video, sin preview, sin título... así que decidí poner un poco de esfuerzo (y quemar unos cuantos tokens de LLM) para crear una herramienta nueva que le facilite a todos hacer previews de imagen bonitas.
Esta herramienta funciona completamente en el navegador; no necesitas descargar ni instalar ningún software/app. También se puede usar en móvil (Android/iOS) gracias a su diseño responsive.


VidGrid-HTML
Cuadrículas de miniaturas de video personalizables en el navegador
Pruébala aquí: https://vidgrid-html-87fe95.gitlab.io/
Características principales
  • Genera contact sheets en JPG o WebP animado de tus videos directamente en el navegador
  • Funciona en local, sin necesidad de subir nada
  • Toma frames a intervalos de tiempo uniformes a lo largo del video ¡o según timestamps personalizados que tú mismo puedes definir!
  • Cuadrícula configurable (columnas/filas), espaciado, ancho de salida, timecode superpuesto, colores, encabezado de metadatos opcional
  • Crea tus propios presets con tus opciones favoritas (se guardan localmente en tu navegador)
  • Procesamiento por lotes, descargas en ZIP y soporte para subir/copiar link (limitado a galerías Chevereto con subida por API activada; por desgracia todavía no JPGFish/JPG6)
  • Soporte básico para recortar videos VR (SBS y TB)
  • Privacidad ante todo: todo el procesamiento ocurre en tu dispositivo.
Ejemplos de salida estática/congelada con varias opciones:




Ejemplos de salida animada con varias opciones:



Limitaciones conocidas
Esta herramienta usa la extracción de frames nativa del navegador, así que, como regla general, si el video se reproduce en tu navegador debería ser compatible (tip: algunos navegadores como Chrome soportan más códecs de video y por lo tanto más archivos). Implementé un plan B con FFmpeg WASM, pero es mucho más lento y tiene límites de memoria. En el peor de los casos generará frames en blanco/fallidos o se saltará el archivo si de verdad no se puede usar. No te sorprendas si los formatos viejos o códecs de video/audio antiguos no se procesan bien... los navegadores hoy pueden hacer muchísimo más, ¡pero no todo!
¡Gracias por pasarte a probarla!
Y gracias a Utopic por darme una razón para retomar este proyecto que había abandonado y por probarla primero.
Ah, y VidGrid-HTML es open-source (licencia MIT), por si a alguien le interesa el código fuente: https://gitlab.com/aknott001/vidgrid-html
Cualquier reporte de bugs, sugerencia o comentario es bienvenido en este hilo.
 
Herramienta fantástica, qué bueno que la estén desarrollando. Ojalá la gente la encuentre útil.
 
Por fin, llevo días buscando y solo salen videos viejos de YouTube e instrucciones confusas sobre "Contact sheets"
¡gracias por la ayuda!
 
Gran actualización, la v.2.0.0 ya salió y está disponible en la misma URL de arriba.
¡Llegaron las miniaturas animadas! y algunos arreglos.
Nuevas opciones de "Salida animada (WebP)" (también se pueden guardar como presets):

Ejemplo de salida:


 
Eres un crack total, qué mala suerte que lo sacaras justo cuando yo hice un post :KEKWlaugh:
 
Gracias, siempre habrá un próximo post... ojalá :KEKW:
Un tip que olvidé sobre el tamaño del archivo de las miniaturas animadas: según el ancho, los FPS, la calidad y la compresión WebP, puedes llegar rápido al límite de 15MB de JPG6. Las opciones por defecto son bastante generosas en calidad; se puede bajar a calidad 75-80 y quizás un ancho menor para quedar casi siempre por debajo del límite.
 
¡Trabajo brutal! Sé que empezaste solo para lograr algo básico, pero se convirtió en un proyecto grande que vale la pena usar. ¡Buen trabajo!
¿Tienes planeadas funciones a futuro?
¡Te recomiendo agregar también un interruptor de VR, si es posible!
 
¿Qué implicaría eso? Yo no trabajo mucho con formato VR; si tienes videos de ejemplo y lo que esperarías que hiciera, quizás lo revise.
 
Los videos VR ahora son casi todos Side by Side, o sea dos imágenes divididas en la pantalla, una para cada ojo.
Usar un generador de miniaturas (en este caso el tuyo) captura un fotograma (side by side) tal cual, porque sabe que es un video. Aunque ensucia el contenido si quieres dar capturas completas.
Usando SCS https://vongoob9.gitlab.io/subtitles_contact_sheet_qt/
Tiene un interruptor VR, así que descarta uno de los ojos y se queda con el otro, el resultado es más cuadrículas de contenido en pantalla y además un archivo de menor resolución
Así que también puedes acabar con una joya como esta para ponerla de preview pequeño en torrents/bbs etc.
 
nattieivanova
Ya veo, gracias por las explicaciones, creo que puedo armar algo para formatos SBS, aunque sin corrección de ojo de pez... debería funcionar incluso para grids animados.
Acabo de experimentar un poco con los filtros de FFMPEG WASM para corregir el efecto ojo de pez y otros formatos, hay un montón de opciones: https://ffmpeg.org/ffmpeg-filters.html#v360
Pero la triste realidad del procesamiento en el navegador es que estamos limitados tanto en memoria como en hilos de CPU. Sin entrar en muchos detalles, internamente tiene que cargar primero el archivo en la memoria del navegador, y con algo de más de unos cientos de MB se atraganta (ni pensar en hacerlo en el móvil)... y los archivos VR normalmente pesan al menos varios GB... pero supongo que un "modo VR" simple con opción de elegir ojo izquierdo/derecho ya sería un buen añadido, así que trabajaré en eso pronto. ¡Gracias por la sugerencia!
 
¡Qué herramienta, súper cómoda y usable en Android! ¡Gracias aknott! Totalmente increíble e impresionante. ¿SimpCity tiene un límite de tamaño para los webp? ¿Como con los gifs, tal vez? Creo que solo se puede publicar como vista directa, o con bbcode full, enlazado, el webp. Yo intento mantener mis gifs por debajo de 3 MB.
 
Tienes que subir el archivo .jpg / .gif / .webp que generes con la herramienta a jpg6 y luego importarlo en tu post como una imagen normal.
Mejor no hagas gifs pesados para que el foro rinda mejor. Además, jpg6 tiene un límite de tamaño de archivo de todos modos, así que si el gif pesa demasiado no te dejará subirlo.
 
De nada, ¡me alegra que sea útil! :pepoLove:
Ojalá algún día se pueda integrar más con el foro, le pregunté al staff de JPGFish si podrían permitir subidas por API para esto, así los usuarios podrían alojar fácilmente las miniaturas y copiar los códigos en su mensaje... incluso podría ser un botón/popup como el de "Upload images", pero por ahora no me han respondido (supongo que debe de ser difícil, muchos bots querrían abusar de las subidas por API):
El límite de tamaño de JPGFish es 15MB, yo uso "BBCode Medium" aunque la miniatura no esté animada en SimpCity... supongo que quien quiera ver un preview no tendrá problema con un clic y se llevará la sorpresa de que está animada :KEKW:
La miniatura animada pequeña (si usas "BBCode Full") no es lo bastante grande para ver mucho de todos modos... así que además de ser más clickbait, no creo que compense la desventaja de cargar hasta 15MB por miniatura para cada usuario que vea el hilo (con 10 de esas ya hiciste que la gente se descargue 150MB 😓).
Por último, creo que el staff/moderadores prefieren "BBCode Medium" porque lleva usuarios a JPGFish y les permite mostrar anuncios, lo que ayuda a financiar los servidores.
 
nattieivanova
He añadido el desplegable "VR Video" con opciones para recortar los formatos más comunes. Como era de esperar, el procesamiento con FFMPEG WASM no es viable, los recursos del navegador son demasiado limitados.

También reordené/rediseñé un poco los campos de entrada y añadí fieldsets plegables, lo que debería ayudar un poco con el scroll en móvil. Y creo que mejoré un poco el rendimiento, tenía un redibujado inútil del header que no causaba ningún problema visible, así que pasó desapercibido.
En fin, aquí está la v.2.1.0, misma URL.
 
¿Alguna vez generaste miniaturas y los timestamps automáticos que eligió la herramienta se pierden por completo las partes buenas que querías mostrar?
¡Pues se acabó! VidGrid-HTML v.2.2.0 trae una forma de sobrescribir los timestamps "auto" de cada elemento de salida, con un "Editor de timestamps" que te deja definir cada celda de tu miniatura como quieras. Se combina automáticamente con los timestamps automáticos si no especificas suficientes marcadores, e ignora los últimos si defines demasiados.

La vista previa del video en el editor se limita a los videos que puedes abrir y ver en tu navegador; para los videos no compatibles el editor igual funciona, solo que sin vista previa.
Caso de uso genial: si haces una miniatura de 1x1 celda, antes de esta función el timestamp quedaba automáticamente en la mitad del video, ¡ahora puedes elegir exactamente dónde lo quieres... tanto para miniaturas animadas como estáticas!
 
Acabo de lanzar una nueva versión:
VidGird-HTML v.2.3.0
  • Gestión de tareas en lugar de lotes de archivos: añadir archivos, quitar, volver a encolar, volver a encolar todo.
  • Editor de timestamps mejorado para móvil y con atajos.
  • Mejor resolución de timestamps cuando no se han puesto suficientes marcadores personalizados; ahora se puede cambiar el tamaño de la cuadrícula sin resetear los timestamps personalizados.
  • El estado colapsado/expandido de las secciones de opciones se guarda por preset.
 
Gran actualización de versión, misma URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.0.0
  • NUEVO - Editor de plantillas de cuadrícula: ahora puedes crear plantillas personalizadas de cuadrículas irregulares, más allá de columnas*filas.
    • Funciona con cuadrículas estáticas y animadas y también junto con el Editor de timestamps, ¡elige la imagen perfecta para tus celdas a tamaño completo!




    • Aquí van unos ejemplos:




  • NUEVO - Ajustes: 4 temas para cambiar la apariencia de la app. Cambié "Mostrar previews" a un parámetro global. Moví "Destinos de subida" a este modal.








  • NUEVO- Barra compacta, en móvil y en escritorio: cuando agregas muchos archivos, puede ser tedioso hacer scroll para iniciar/ver el progreso del procesamiento. Para ayudar con esto, aparecerá automáticamente una nueva barra arriba cuando el panel de Procesamiento de arriba no esté visible. Puedes expandirla para la experiencia completa (incluso para agregar más archivos, aun mientras procesa), o usarla colapsada como atajo... se acabó el volver a hacer scroll hasta arriba.




  • NUEVO- Personalización de estilo
    • Familia y tamaños de fuente para el timecode y el encabezado:




    • Selector de color mejorado para el color de fondo/texto




  • NUEVO - 12 presets por defecto con varios ajustes, plantillas/tamaños de cuadrícula. Puedes editarlos/borrarlos a voluntad... si ya tenías ajustes guardados, tendrás que borrar/limpiar el localStorage de la app/sitio en tu navegador (búscalo en Google).


  • CORRECCIONES - Mejor rendimiento en general, manejo de instancias de FFMPEG ligeramente mejorado, mejor soporte móvil, sobre todo en el Editor de timestamps.
Como siempre, si encuentras bugs o tienes sugerencias, ¡pregunta aquí sin problema!
 
Actualización menor de versión, misma URL:
https://vidgrid-html-87fe95.gitlab.io/
VidGird-HTML v.3.1.1
  • NUEVO - Modo Secuenciaanimada
    • Reemplaza la cuadrícula y muestra segmentos cortos uno tras otro (en secuencia), respetando el ancho de salida que elijas (escala el video), permite los overlays "Mostrar metadatos del encabezado" y "Timecode" porque cada frame se compone.


    • Soporte de codificación en formato MP4 para TODAS las secuencias animadas
    • Aquí van unos ejemplos:

      WEBP "Estático (mantener frame)"

      WEBP "Video (reproducir segmento)"





      MP4 "Video (reproducir segmento)"

  • NUEVO- Secuencia animada "Video con audio"
    • En el mismo grupo de opciones, si seleccionas "Video con audio" en "Modo de render", se usará FFMPEG para cortar segmentos del video directamente con audio y recodificarlos con códecs compatibles con navegadores. Se respeta el ancho de salida pero no hay overlay (metadatos/timecode). Este modo solo permite salida MP4 (porque es el único formato que admite audio).

      MP4 "Video con audio"

  • NUEVO- Ajustes del destino de subida "Extensiones permitidas" y "Tamaño máximo de archivo", que se revisan antes de intentar subir el resultado generado.


  • NUEVO - Bitrate de audio y cantidad de pistas añadidos a los metadatos del encabezado
  • NUEVO - Se añadieron 4 presets por defecto para el modo Secuencia.
  • CORRECCIONES - Se solucionó una fuga de memoria menor en el fallback de FFMPEG y en los atajos de teclado del Editor de Timestamps.
Como siempre, si encuentran bugs o tienen sugerencias de nuevas funciones, ¡pregunten aquí!
 
Debes iniciar sesión o registrarte para responder aquí.
Atrás
Arriba