[TOOL]Banana Graphic Studio

[Mister]

[size=150]🍌 Banana Graphic Studio[/size]

Bem-vindo ao Banana Graphic Studio! Esta é uma ferramenta web criada para edição gráfica, especialmente para projetos de ROM hacking, com sobreposição de texto usando fontes bitmap ou fontes do sistema. Ela conta com visualização em tempo real, gerenciamento completo de perfis, geração de texto via IA, processamento em lote e vários efeitos de texto.

Github
Demo

[size=120]📦 Recursos[/size]

• Visualização em tempo real: Veja instantaneamente as alterações em seus textos e composições de imagem.
  
• Modos de Renderização:
  
  • Fonte Bitmap: Use folhas de fonte bitmap personalizadas para um visual retrô.
    
  • Fonte do Sistema: Use fontes padrão do sistema ou envie fontes TTF/OTF/WOFF.
    
• Gerenciamento de Módulos de Texto: Crie e configure múltiplas sobreposições de texto.
  
• Estilização Avançada de Texto:
  
  • Posicionamento, escala, altura de linha, quebra de linha, alinhamento
  • Colorização por tags:
  Código Selecionar Expandir
  <C#RRGGBB>Texto colorido</C>
  
• Sombras e contornos para ambos os modos de fonte

• Geração de Texto com IA: Use a API Gemini para gerar textos criativos (requer chave da API).
  
• Gerenciamento de Perfis:
  
  • Salve e carregue sessões completas do editor (imagens, fontes, textos) em perfis JSON.
  • Exporte e importe perfis para backup ou compartilhamento.
  • Biblioteca de perfis integrada no navegador.
  • Suporte a perfis armazenados localmente na pasta profiles/.
    
• Geração em Lote: Crie múltiplas variações de imagem com base em um único setup, com saída em ZIP.
  
• Idiomas: Disponível em Inglês (EN) e Português (PT).
  
• Fontes Personalizadas: Suporte para TTF, OTF, WOFF e WOFF2 no modo System Font.
  

[size=120]🚀 Primeiros Passos[/size]

Pré-requisitos:

• Navegador moderno com JavaScript ativado (Chrome, Firefox, Edge etc.)

IA (API Gemini) - Opcional:

• Obtenha uma chave da API do Google Gemini.
• A chave deve estar disponível no ambiente como variável:

Código Selecionar Expandir

API_KEY="SUA_CHAVE_AQUI"

• A aplicação não possui interface para inserir a chave — ela deve estar pré-configurada.
  
• Sem a chave, os recursos de IA ficam desativados.

Perfis baseados em arquivos - Opcional:

• Crie uma pasta chamada profiles no mesmo local do arquivo index.html.
  
• Adicione seus arquivos `.json` de perfil nesta pasta.
• Crie o arquivo `profiles-list.json` com os nomes dos perfis:

Código (json) Selecionar Expandir

[
  "profile1.json",
  "another_profile.json"
]

Esses perfis aparecerão na "Biblioteca de Perfis" ao iniciar a aplicação.

[size=120]📝 Uso Básico[/size]

• Abrir: Abra o arquivo index.html no navegador.
  
• Carregar Imagens:
  
  • No painel da esquerda ("Preview Area"), envie a "Imagem Original" e a "Imagem Editável".
  • Se estiver usando Fonte Bitmap, envie suas folhas de fonte "Font 1" e opcionalmente "Font 2".
  
  
• Adicionar Módulos de Texto:
  
  • Clique em "+ Add Module" no editor de texto (painel direito).
    
  • Digite o texto e configure sua aparência no painel "Config". Escolha o modo de renderização e ajuste as opções.
  
  
• Visualize & Ajuste: Veja as mudanças ao vivo. Arraste os módulos na tela para reposicionar.
  
• Salvar:
  
  • "Save Preview": Baixe a imagem final (ou ZIP, se estiver em modo batch)
  • "Export JSON": Salve todo o projeto
  • "Save to Library": Salve para acesso rápido no navegador
  
  

Para um guia detalhado de todos os recursos, consulte o Guia do Usuário (tutorial.md).

🤝 Contribuindo

Sinta-se à vontade para contribuir com o projeto, seja com código ou ideias!

Inspirado pelo AAIG do usuário Solid One.

[Sora Leon]

Parabéns pelo projeto bananeiro