Depois de muito pouco comprometimento com desenvolvimento, seja por obrigação, seja por diversão, eu encontrei um grupo da família e pude obter dados que remontavam aos meus bisavós. Então já que havia muita gente que não se conhecia e não sabia em que posição na família cada um se encontrava, tive a ideia de montar uma árvore genealógica. Daí fiquei buscando algumas formas de como montar uma árvore genealógica. E houve aquelas formas mais corriqueiras como utilizar algum editor de imagens ou montar retângulos com traços os ligando-os, mas que óbvio ficava bem ruim pois a edição é custosa. Então tentei uma solução em JavaScript associado uma página HTML Encontrei alguns pacotes no Github que iam nessa abortagem. A principal solução desse tipo foi o Treant-js encontrado em http://fperucic.github.io/treant-js , trabalho do Fran Peručić.  |
| Treant.JS do Fran Peručić |
Então passei para o Gemini e ChatGPT para criar a estrutura básica da página HTML e desta vez o Gemini se saiu melhor que o ChatGPT apesar de o resultado final não ter sido perfeito. Das 6 versões geradas 4 no Gemini e 2 no ChatGPT, exatamente nesta sequência a versão número 2 do Gemini ficou melhor porém incompleta. E não houve meio de explicar para ele nem para o ChatGPT para basicamente incluir os recursos que estavam faltando sem alterar a estrutura já criada. Pois bem todas as vezes foram propostas soluções diferentes nunca agregando o que estava faltando. Por fim peguei a versão 2 (a melhor no meu julgamento) e finalizei o código para que as árvores criadas pudessem ser persistidas (sendo salva e/ou carregada) e assim não ter que refazer a árvore do zero todas as vezes. Na versão 2 em si, o Gemini escolheu a
Cytoscape.js - uma biblioteca JavaScript aberta e bem completa de recursos para criação de grafos com possibilidade de visualização e interação, sem falar que é amplamente usada.
 |
| Cytoscape.js - Biblioteca JS topíssima !!! |
Apesar de a combinação de recursos ter sido boa suficiente para criar uma árvores simples, não explorei funcionalidades de melhor visualização. O código resultante do trabalho inicial do Gemini e finalização e revisão feita por mim está disponível no
meu Github.
 |
| Meu formulário simples usando Cytoscape |
A partir dessa segunda solução, o Gemini me sugeriu utilizar o
Mermaidchart.com que é um conjunto de ferramentas (web, textos e código). Mermaid permite a criação de diagramas e sua visualização usando texto e código. É baseado em JavaScript e pode ser integrado de diferentes formas além de ter recursos de IA para otimização de código e geração de gráfico a partir de texto. Ou seja serve para criar os gráficos mais diversos e serve também para árvores genealógicas. Porém o Mermaid permite mais facilmente (não que os outros não tenham tais recursos) uma visão mais confortável e atraente. Um trabalho futuro interessante seria trabalhar incrementos tais como a integração numa página HTML, bem como testar a descrição da genealogia em texto e deixar o Mermaid fazer o resto. Mas enfim completei a tarefa e posso dizer que pelo menos fiz um gol de honra.
 |
| Interface da MermaidChart para fazer qualquer gráfico |
Nenhum comentário:
Postar um comentário