myaidev-method 0.2.23 → 0.2.24

package/src/scripts/html-conversion-cli.js

@@ -0,0 +1,526 @@
+#!/usr/bin/env node
+
+/**
+ * HTML Conversion CLI
+ *
+ * Converts HTML templates to PNG, PDF, or PPTX formats.
+ * Supports both HTML templates and D2 diagram language.
+ *
+ * Usage:
+ *   node html-conversion-cli.js --template data-chart --data data.json --format png
+ *   node html-conversion-cli.js --input template.html --output image.png
+ *   node html-conversion-cli.js --d2 "a -> b" --format png
+ *   node html-conversion-cli.js --d2-template architecture --data data.json --format svg
+ *   node html-conversion-cli.js --slides slides/ --output presentation.pptx
+ *   node html-conversion-cli.js --list-templates
+ */
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import {
+  htmlToPng,
+  htmlToPdf,
+  htmlToPptx,
+  d2ToSvg,
+  d2ToPng,
+  templateToVisual,
+  d2TemplateToVisual,
+  renderTemplate,
+  renderD2Template,
+  getAvailableTemplates,
+  isD2Available,
+  validateHtml,
+  validateD2,
+  estimateRenderTime
+} from '../lib/html-conversion-utils.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const program = new Command();
+
+program
+  .name('html-conversion')
+  .description('Convert HTML templates to PNG, PDF, or PPTX formats')
+  .version('1.0.0');
+
+// Template descriptions
+const TEMPLATE_DESCRIPTIONS = {
+  html: {
+    'data-chart': 'Bar/pie charts with data visualization',
+    'comparison-table': 'Side-by-side feature comparisons',
+    'process-flow': 'Step-by-step processes (vertical/horizontal/timeline)'
+  },
+  d2: {
+    'architecture': 'System architecture diagrams',
+    'flowchart': 'Decision flowcharts',
+    'sequence': 'Sequence diagrams'
+  }
+};
+
+// List templates command
+program
+  .command('list')
+  .alias('ls')
+  .description('List all available templates')
+  .action(async () => {
+    const templates = getAvailableTemplates();
+
+    console.log(chalk.bold('\n📋 Available Templates\n'));
+
+    if (templates.html.length > 0) {
+      console.log(chalk.blue.bold('HTML Templates:'));
+      templates.html.forEach(name => {
+        const desc = TEMPLATE_DESCRIPTIONS.html[name] || 'Custom template';
+        console.log(`  • ${chalk.green(name)} - ${desc}`);
+      });
+      console.log();
+    }
+
+    if (templates.d2.length > 0) {
+      console.log(chalk.blue.bold('D2 Diagram Templates:'));
+      const d2Status = isD2Available()
+        ? chalk.green('(D2 CLI installed)')
+        : chalk.yellow('(D2 CLI not installed - install with: curl -fsSL https://d2lang.com/install.sh | sh)');
+      console.log(`  ${d2Status}`);
+      templates.d2.forEach(name => {
+        const desc = TEMPLATE_DESCRIPTIONS.d2[name] || 'Custom template';
+        console.log(`  • ${chalk.green(name)} - ${desc}`);
+      });
+      console.log();
+    }
+  });
+
+// Convert HTML template
+program
+  .command('template <name>')
+  .description('Convert an HTML template to image or PDF')
+  .option('-d, --data <json>', 'JSON data for template variables')
+  .option('-f, --format <format>', 'Output format (png, pdf)', 'png')
+  .option('-o, --output <file>', 'Output file path')
+  .option('-w, --width <pixels>', 'Image width', '800')
+  .option('-h, --height <pixels>', 'Image height (optional)')
+  .option('--scale <factor>', 'Device scale factor', '2')
+  .action(async (name, options) => {
+    const spinner = ora(`Converting template ${chalk.cyan(name)}...`).start();
+
+    try {
+      // Parse data
+      let data = {};
+      if (options.data) {
+        if (options.data.startsWith('{') || options.data.startsWith('[')) {
+          data = JSON.parse(options.data);
+        } else if (await fs.pathExists(options.data)) {
+          data = JSON.parse(await fs.readFile(options.data, 'utf-8'));
+        } else {
+          throw new Error(`Data file not found: ${options.data}`);
+        }
+      }
+
+      const result = await templateToVisual(name, data, options.format, {
+        width: parseInt(options.width),
+        height: options.height ? parseInt(options.height) : undefined,
+        deviceScaleFactor: parseFloat(options.scale),
+        output: options.output
+      });
+
+      const outputPath = result.path || options.output;
+      const size = result.buffer ? result.buffer.length : 0;
+
+      spinner.succeed(`Template converted: ${chalk.green(outputPath)}`);
+      console.log(`  Format: ${options.format}`);
+      console.log(`  Size: ${(size / 1024).toFixed(2)} KB`);
+
+    } catch (error) {
+      spinner.fail(`Conversion failed: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// Convert D2 diagram
+program
+  .command('d2 <script>')
+  .description('Convert D2 diagram script to image')
+  .option('-f, --format <format>', 'Output format (svg, png)', 'svg')
+  .option('-o, --output <file>', 'Output file path')
+  .option('-t, --theme <theme>', 'D2 theme (0-300)', '200')
+  .option('--layout <engine>', 'Layout engine (dagre, elk, tala)', 'dagre')
+  .action(async (script, options) => {
+    if (!isD2Available()) {
+      console.log(chalk.yellow('\n⚠️  D2 CLI is not installed.'));
+      console.log('Install it with: curl -fsSL https://d2lang.com/install.sh | sh');
+      console.log('Or on macOS: brew install d2\n');
+      process.exit(1);
+    }
+
+    const spinner = ora('Converting D2 diagram...').start();
+
+    try {
+      // Check if script is a file path
+      let d2Script = script;
+      if (await fs.pathExists(script)) {
+        d2Script = await fs.readFile(script, 'utf-8');
+      }
+
+      let result;
+      if (options.format === 'png') {
+        result = await d2ToPng(d2Script, {
+          theme: parseInt(options.theme),
+          layout: options.layout,
+          outputPath: options.output
+        });
+      } else {
+        result = await d2ToSvg(d2Script, {
+          theme: parseInt(options.theme),
+          layout: options.layout,
+          outputPath: options.output
+        });
+      }
+
+      spinner.succeed(`D2 diagram converted: ${chalk.green(result.path)}`);
+      console.log(`  Format: ${result.format}`);
+      console.log(`  Size: ${(result.size / 1024).toFixed(2)} KB`);
+
+    } catch (error) {
+      spinner.fail(`D2 conversion failed: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// Convert D2 template
+program
+  .command('d2-template <name>')
+  .description('Convert a D2 template to image')
+  .option('-d, --data <json>', 'JSON data for template variables')
+  .option('-f, --format <format>', 'Output format (svg, png)', 'svg')
+  .option('-o, --output <file>', 'Output file path')
+  .option('-t, --theme <theme>', 'D2 theme (0-300)', '200')
+  .action(async (name, options) => {
+    if (!isD2Available()) {
+      console.log(chalk.yellow('\n⚠️  D2 CLI is not installed.'));
+      console.log('Install it with: curl -fsSL https://d2lang.com/install.sh | sh\n');
+      process.exit(1);
+    }
+
+    const spinner = ora(`Converting D2 template ${chalk.cyan(name)}...`).start();
+
+    try {
+      // Parse data
+      let data = {};
+      if (options.data) {
+        if (options.data.startsWith('{') || options.data.startsWith('[')) {
+          data = JSON.parse(options.data);
+        } else if (await fs.pathExists(options.data)) {
+          data = JSON.parse(await fs.readFile(options.data, 'utf-8'));
+        } else {
+          throw new Error(`Data file not found: ${options.data}`);
+        }
+      }
+
+      const result = await d2TemplateToVisual(name, data, options.format, {
+        theme: parseInt(options.theme),
+        outputPath: options.output
+      });
+
+      spinner.succeed(`D2 template converted: ${chalk.green(result.path)}`);
+      console.log(`  Format: ${result.format}`);
+      console.log(`  Size: ${(result.size / 1024).toFixed(2)} KB`);
+
+    } catch (error) {
+      spinner.fail(`D2 template conversion failed: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// Convert raw HTML
+program
+  .command('html <file>')
+  .description('Convert raw HTML file to image or PDF')
+  .option('-f, --format <format>', 'Output format (png, pdf)', 'png')
+  .option('-o, --output <file>', 'Output file path')
+  .option('-w, --width <pixels>', 'Image width', '800')
+  .option('-h, --height <pixels>', 'Image height (optional)')
+  .option('--scale <factor>', 'Device scale factor', '2')
+  .option('--full-page', 'Capture full page', false)
+  .action(async (file, options) => {
+    const spinner = ora(`Converting HTML file ${chalk.cyan(file)}...`).start();
+
+    try {
+      if (!await fs.pathExists(file)) {
+        throw new Error(`File not found: ${file}`);
+      }
+
+      const html = await fs.readFile(file, 'utf-8');
+
+      // Validate HTML
+      const validation = validateHtml(html);
+      if (!validation.valid) {
+        spinner.warn(`HTML validation warnings: ${validation.warnings.join(', ')}`);
+      }
+
+      let result;
+      if (options.format === 'pdf') {
+        result = await htmlToPdf(html, {
+          output: options.output,
+          pdfOptions: {
+            format: 'A4',
+            printBackground: true
+          }
+        });
+      } else {
+        result = await htmlToPng(html, {
+          width: parseInt(options.width),
+          height: options.height ? parseInt(options.height) : undefined,
+          deviceScaleFactor: parseFloat(options.scale),
+          fullPage: options.fullPage,
+          output: options.output
+        });
+      }
+
+      const outputPath = result.path || options.output;
+      const size = result.buffer ? result.buffer.length : 0;
+
+      spinner.succeed(`HTML converted: ${chalk.green(outputPath)}`);
+      console.log(`  Format: ${options.format}`);
+      console.log(`  Size: ${(size / 1024).toFixed(2)} KB`);
+
+    } catch (error) {
+      spinner.fail(`HTML conversion failed: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// Generate PPTX from slides
+program
+  .command('pptx <input>')
+  .description('Generate PPTX from HTML slides or JSON config')
+  .option('-o, --output <file>', 'Output PPTX file path')
+  .option('--title <title>', 'Presentation title')
+  .option('--author <author>', 'Presentation author')
+  .action(async (input, options) => {
+    const spinner = ora('Generating PPTX presentation...').start();
+
+    try {
+      let slides = [];
+
+      if (await fs.pathExists(input)) {
+        const stat = await fs.stat(input);
+
+        if (stat.isDirectory()) {
+          // Load all HTML files from directory as slides
+          const files = await fs.readdir(input);
+          const htmlFiles = files.filter(f => f.endsWith('.html')).sort();
+
+          for (const file of htmlFiles) {
+            const html = await fs.readFile(path.join(input, file), 'utf-8');
+            slides.push({ html, title: path.basename(file, '.html') });
+          }
+        } else if (input.endsWith('.json')) {
+          // Load JSON configuration
+          const config = JSON.parse(await fs.readFile(input, 'utf-8'));
+          slides = config.slides || [];
+        } else if (input.endsWith('.html')) {
+          // Single HTML file
+          const html = await fs.readFile(input, 'utf-8');
+          slides.push({ html, title: path.basename(input, '.html') });
+        }
+      } else {
+        throw new Error(`Input not found: ${input}`);
+      }
+
+      if (slides.length === 0) {
+        throw new Error('No slides found to convert');
+      }
+
+      spinner.text = `Converting ${slides.length} slide(s) to PPTX...`;
+
+      const result = await htmlToPptx(slides, {
+        outputPath: options.output,
+        title: options.title || 'Presentation',
+        author: options.author,
+        width: 1920,
+        height: 1080
+      });
+
+      spinner.succeed(`PPTX generated: ${chalk.green(result.path)}`);
+      console.log(`  Slides: ${result.slideCount}`);
+      console.log(`  Size: ${(result.size / 1024).toFixed(2)} KB`);
+
+    } catch (error) {
+      spinner.fail(`PPTX generation failed: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// Preview template
+program
+  .command('preview <name>')
+  .description('Preview a template with sample data')
+  .option('--type <type>', 'Template type (html, d2)', 'html')
+  .action(async (name, options) => {
+    const spinner = ora(`Loading preview for ${chalk.cyan(name)}...`).start();
+
+    try {
+      let preview;
+
+      if (options.type === 'd2') {
+        if (!isD2Available()) {
+          spinner.warn('D2 CLI not installed. Showing raw template.');
+          const templates = await getAvailableTemplates();
+          const template = templates.d2.find(t => t.name === name);
+          if (template) {
+            spinner.stop();
+            console.log(chalk.blue.bold(`\nTemplate: ${name}`));
+            console.log(chalk.gray('─'.repeat(50)));
+            console.log(template.content || 'Template content not available');
+          }
+          return;
+        }
+        preview = await d2TemplateToVisual(name, getSampleD2Data(name), 'svg');
+      } else {
+        preview = await templateToVisual(name, getSampleHtmlData(name), 'png', {
+          width: 600,
+          scale: 1
+        });
+      }
+
+      spinner.succeed(`Preview generated: ${chalk.green(preview.path)}`);
+      console.log(`Open the file to see the preview.`);
+
+    } catch (error) {
+      spinner.fail(`Preview failed: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// Default action for --list-templates flag
+program
+  .option('--list-templates', 'List all available templates')
+  .action(async (options) => {
+    if (options.listTemplates) {
+      await program.commands.find(c => c.name() === 'list').action();
+    }
+  });
+
+// Sample data helpers
+function getSampleHtmlData(templateName) {
+  const samples = {
+    'data-chart': {
+      title: 'Q4 Revenue by Region',
+      subtitle: 'Year over Year Comparison',
+      chartType: 'bar',
+      items: [
+        { label: 'North America', value: 45, percentage: 90, color: '#3b82f6' },
+        { label: 'Europe', value: 32, percentage: 64, color: '#10b981' },
+        { label: 'Asia Pacific', value: 28, percentage: 56, color: '#f59e0b' },
+        { label: 'Latin America', value: 15, percentage: 30, color: '#ef4444' }
+      ],
+      showValueInBar: true,
+      source: 'Internal Analytics - 2025',
+      accentColor: '#3b82f6',
+      accentGradient: '#1d4ed8'
+    },
+    'comparison-table': {
+      title: 'Feature Comparison',
+      subtitle: 'Choose the right plan for your needs',
+      layout: 'table',
+      columns: [
+        { name: 'Feature' },
+        { name: 'Basic' },
+        { name: 'Pro', class: 'highlight', winner: true },
+        { name: 'Enterprise' }
+      ],
+      rows: [
+        { feature: 'Users', values: [{ text: '5' }, { text: 'Unlimited', class: 'highlight' }, { text: 'Unlimited' }] },
+        { feature: 'Storage', values: [{ text: '10 GB' }, { text: '100 GB', class: 'highlight' }, { text: '1 TB' }] },
+        { feature: 'Support', values: [{ text: 'Email' }, { text: '24/7 Chat', class: 'highlight' }, { text: 'Dedicated' }] },
+        { feature: 'API Access', values: [{ isCross: true }, { isCheck: true, class: 'highlight' }, { isCheck: true }] },
+        { feature: 'Analytics', values: [{ isPartial: true }, { isCheck: true, class: 'highlight' }, { isCheck: true }] }
+      ],
+      note: 'All plans include a 14-day free trial',
+      accentColor: '#3b82f6'
+    },
+    'process-flow': {
+      title: 'Development Workflow',
+      subtitle: 'From idea to production',
+      layout: 'vertical',
+      steps: [
+        { number: 1, title: 'Planning', description: 'Define requirements and create specifications', details: ['User stories', 'Technical specs', 'Timeline'] },
+        { number: 2, title: 'Development', description: 'Build features following best practices', details: ['Code reviews', 'Unit tests', 'Documentation'] },
+        { number: 3, title: 'Testing', description: 'Ensure quality through comprehensive testing', details: ['Integration tests', 'E2E tests', 'Performance tests'] },
+        { number: 4, title: 'Deployment', description: 'Ship to production with confidence', details: ['CI/CD pipeline', 'Monitoring', 'Rollback plan'] }
+      ],
+      footerText: 'Iterate and improve continuously',
+      accentColor: '#3b82f6'
+    }
+  };
+
+  return samples[templateName] || { title: 'Sample Template' };
+}
+
+function getSampleD2Data(templateName) {
+  const samples = {
+    'architecture': {
+      title: 'System Architecture',
+      direction: 'right',
+      components: [
+        { id: 'user', label: 'User', shape: 'person' },
+        { id: 'web', label: 'Web App', shape: 'rectangle' },
+        { id: 'api', label: 'API Gateway', shape: 'rectangle' },
+        { id: 'db', label: 'Database', shape: 'cylinder' },
+        { id: 'cache', label: 'Cache', shape: 'rectangle' }
+      ],
+      connections: [
+        { from: 'user', to: 'web', label: 'HTTPS' },
+        { from: 'web', to: 'api', label: 'REST' },
+        { from: 'api', to: 'db', label: 'SQL' },
+        { from: 'api', to: 'cache', label: 'Redis' }
+      ]
+    },
+    'flowchart': {
+      title: 'Decision Flowchart',
+      direction: 'down',
+      nodes: [
+        { id: 'start', label: 'Start', shape: 'oval' },
+        { id: 'check', label: 'Valid Input?', shape: 'diamond' },
+        { id: 'process', label: 'Process Data', shape: 'rectangle' },
+        { id: 'error', label: 'Show Error', shape: 'rectangle' },
+        { id: 'end', label: 'End', shape: 'oval' }
+      ],
+      edges: [
+        { from: 'start', to: 'check' },
+        { from: 'check', to: 'process', label: 'Yes' },
+        { from: 'check', to: 'error', label: 'No' },
+        { from: 'process', to: 'end' },
+        { from: 'error', to: 'check' }
+      ]
+    },
+    'sequence': {
+      title: 'API Request Flow',
+      actors: [
+        { id: 'client', label: 'Client' },
+        { id: 'server', label: 'Server' },
+        { id: 'db', label: 'Database' }
+      ],
+      messages: [
+        { from: 'client', to: 'server', label: 'GET /api/users', response: '200 OK' },
+        { from: 'server', to: 'db', label: 'SELECT * FROM users', response: 'Result set' }
+      ]
+    }
+  };
+
+  return samples[templateName] || { title: 'Sample Diagram' };
+}
+
+// Parse and run
+program.parse();
+
+// If no command specified, show help
+if (process.argv.length === 2) {
+  program.help();
+}