Terraform Infrastructure Builder
Run ID: 69cbaf7261b1021a29a8b62b2026-03-31Infrastructure
PantheraHive BOS
BOS Dashboard

Terraform Infrastructure Builder: Detailed Design Specifications & UI/UX Recommendations

This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Terraform Infrastructure Builder" tool. The goal is to create a robust, intuitive, and professional application that empowers users to generate production-ready Terraform configurations with ease and confidence.


1. Detailed Design Specifications

The Terraform Infrastructure Builder is designed to streamline the process of creating cloud infrastructure-as-code using Terraform. It will guide users through selecting and configuring various infrastructure components across major cloud providers, ultimately generating well-structured, modular, and production-ready Terraform files.

1.1 Core Purpose

To enable users, regardless of their deep Terraform expertise, to quickly and accurately generate foundational cloud infrastructure configurations (VPC, compute, storage, databases, networking) in Terraform for various cloud providers.

1.2 Key Features & Functionality

* Users can select their target cloud provider: Amazon Web Services (AWS), Microsoft Azure, or Google Cloud Platform (GCP).

* The UI and configuration options will dynamically adapt based on the selected provider.

* A clear, modular interface to select desired infrastructure components:

* Networking: Virtual Private Cloud (VPC), Subnets, Route Tables, Internet Gateways (AWS), Virtual Networks, Subnets (Azure), VPC Networks, Subnets (GCP).

* Compute: EC2 Instances, Auto Scaling Groups (AWS), Virtual Machines, Virtual Machine Scale Sets (Azure), Compute Engine Instances, Instance Groups (GCP).

* Storage: S3 Buckets, EBS Volumes (AWS), Blob Storage, Disk Storage (Azure), Cloud Storage Buckets, Persistent Disks (GCP).

* Databases: RDS Instances (AWS), Azure SQL Database, Azure Database for PostgreSQL/MySQL (Azure), Cloud SQL Instances (GCP).

* Load Balancers: Application Load Balancers (ALB), Network Load Balancers (NLB) (AWS), Azure Load Balancer, Azure Application Gateway (Azure), Cloud Load Balancing (GCP).

* Security: Security Groups (AWS), Network Security Groups (Azure), Firewall Rules (GCP).

* Option to include boilerplate for other common resources (e.g., IAM roles, DNS records) via a "Custom Resources" section.

* For each selected component, present a user-friendly form with relevant parameters.

* Utilize input fields, dropdowns, radio buttons, and toggles for clear selection.

* Provide sensible default values for common parameters (e.g., default VPC CIDR, t2.micro instance type).

* Implement input validation (e.g., CIDR format, integer ranges).

* Generate Terraform code that adheres to best practices, utilizing modules for reusability and maintainability.

* Output separate .tf files for different resource types (e.g., vpc.tf, compute.tf, storage.tf).

* Automatically generate variables.tf, outputs.tf, providers.tf, and versions.tf files.

* Include a main.tf to orchestrate module calls.

* Optionally generate a backend.tf for remote state management (e.g., S3, Azure Storage Account, GCS Bucket).

* Allow users to preview the generated Terraform code before final download.

* Provide a one-click option to download all generated files as a .zip archive.

* Ability to name and describe the infrastructure project.

* Save configurations as templates or drafts for future modification (future enhancement).

1.3 Non-Functional Requirements

1.4 Output Structure & Best Practices

The generated Terraform code will follow a recommended directory structure and best practices:

text • 692 chars
.
├── main.tf                 # Orchestrates module calls
├── variables.tf            # Defines all input variables
├── outputs.tf              # Defines all output values
├── providers.tf            # Configures cloud providers
├── versions.tf             # Specifies Terraform and provider versions
├── backend.tf              # (Optional) Configures remote state backend
├── modules/                # Directory for local modules (if complex)
│   ├── vpc/
│   │   ├── main.tf
│   │   ├── variables.tf
│   │   └── outputs.tf
│   ├── compute/
│   │   ├── main.tf
│   │   ├── variables.tf
│   │   └── outputs.tf
│   └── ...
└── README.md               # Instructions for deployment (optional)
Sandboxed live preview

The following outlines the detailed design specifications, wireframe descriptions, color palettes, and UX recommendations for the "Terraform Infrastructure Builder." This document serves as a foundational blueprint for developing a professional and intuitive tool that empowers users to generate production-ready Terraform configurations with ease.


1. Detailed Design Specifications

The "Terraform Infrastructure Builder" is envisioned as a web-based application providing a guided, intuitive experience for defining cloud infrastructure and automatically generating validated Terraform configurations.

1.1. Purpose and Scope

  • Purpose: To simplify and accelerate the process of creating cloud infrastructure by offering a user-friendly interface that translates high-level infrastructure requirements into robust, production-ready Terraform code. It aims to enforce best practices, reduce manual errors, and provide a consistent approach to infrastructure provisioning.
  • Scope: Initially, the builder will focus on core Infrastructure-as-a-Service (IaaS) components across major cloud providers (AWS, Azure, Google Cloud Platform). This includes fundamental services such as Virtual Private Clouds (VPCs)/Virtual Networks, compute instances (EC2/VMs), storage (S3/Blob Storage/GCS), managed databases (RDS/SQL DB), and essential networking components (subnets, security groups, load balancers).

1.2. Key Features

  • Guided Workflow: A step-by-step, wizard-like interface to lead users through the infrastructure definition process.
  • Cloud Provider Abstraction: Allow users to define infrastructure components
  • Variable Usage: All configurable parameters will be exposed as variables in variables.tf, making the generated code flexible.
  • Clear Naming Conventions: Resources, variables, and outputs will follow clear, consistent naming conventions.
  • Comments: Include helpful comments in the generated code where necessary.
  • Provider Configuration: Automatically configure the selected cloud provider with default region/zone settings, allowing users to override.

2. Wireframe Descriptions

The user interface will adopt a wizard-style flow, guiding users step-by-step through the configuration process.

2.1 Screen 1: Welcome & Project Setup

  • Header: "Terraform Infrastructure Builder"
  • Description: A brief, welcoming paragraph explaining the tool's purpose.
  • Input Field: Project Name (Text input, required)
  • Text Area: Project Description (Optional)
  • Dropdown/Radio Buttons: Cloud Provider Selection (AWS, Azure, GCP)
  • Dropdown: Default Region/Location (Dynamically populated based on provider)
  • Button: Get Started / Next

2.2 Screen 2: Infrastructure Component Selection

  • Header: "Select Infrastructure Components"
  • Progress Indicator: Showing "Step 2 of X"
  • Instructions: "Choose the core components for your infrastructure."
  • Component List (Checkbox/Toggle per item):

* Networking (VPC/VNet)

* Compute (VMs/Instances)

* Storage (Object/Block)

* Databases (Managed SQL/NoSQL)

* Load Balancing

* Security (Firewall/Security Groups)

* Custom Resources (e.g., DNS, IAM) (Advanced option)

  • Button: Back
  • Button: Configure Selected Components / Next

2.3 Screen 3: Component Configuration (Dynamic - Example: Networking)

  • Header: "Configure [Selected Component Name]" (e.g., "Configure Networking")
  • Progress Indicator: "Step 3 of X"
  • Instructions: "Provide details for your networking setup."
  • Accordion/Tabbed Interface: Each selected component will have its own collapsible section or tab.

* Networking Section:

* VPC/VNet CIDR Block: (Text input, e.g., 10.0.0.0/16, with validation)

* Number of Public Subnets: (Number input, slider)

* Number of Private Subnets: (Number input, slider)

* Availability Zones: (Multi-select dropdown, dynamically populated)

* Enable NAT Gateway (for private subnets): (Toggle)

* DNS Hostnames/Resolution: (Toggle)

* Compute Section (example fields):

* Instance Type: (Dropdown, e.g., t3.medium, Standard_D2s_v3)

* Operating System: (Dropdown, e.g., Ubuntu 20.04, Windows Server 2019)

* Instance Count: (Number input)

* Enable Auto Scaling: (Toggle, reveals scaling options)

* ... (Similar detailed forms for Storage, Databases, Load Balancing, Security)

  • Button: Back
  • Button: Review Configuration / Next

2.4 Screen 4: Review & Generate

  • Header: "Review & Generate Terraform"
  • Progress Indicator: "Step 4 of X"
  • Instructions: "Please review your selections before generating the code."
  • Summary Panel: A read-only summary of all selected components and their key parameters, organized by component type.

* Project Name: [Value]

* Cloud Provider: [Value]

* Region: [Value]

* Networking:

* VPC CIDR: [Value]

* Public Subnets: [Count]

* Private Subnets: [Count]

* Compute:

* Instance Type: [Value]

* OS: [Value]

* Count: [Value]

* ... (Detailed summary for all configured components)

  • Code Preview (Optional): A collapsible section or modal to show a simplified main.tf or variables.tf preview.
  • Button: Back (to modify)
  • Button: Generate Terraform Files (Prominent CTA)

2.5 Screen 5: Generation Complete & Download

  • Header: "Terraform Configuration Generated!"
  • Icon: A success checkmark or similar celebratory icon.
  • Message: "Your production-ready Terraform configuration files are ready."
  • Button: Download .zip Archive (Prominent CTA)
  • Instructions/Next Steps:

* "Unzip the archive."

* "Navigate to the directory in your terminal."

* "Run terraform init"

* "Run terraform plan"

* "Run terraform apply"

  • Button: Start New Project

3. Color Palettes

A professional, clean, and accessible color palette will be used to ensure clarity and a positive user experience.

  • Primary Brand Color: #2196F3 (Material Design Blue) - For headers, primary buttons, active states.
  • Secondary Accent Color: #4CAF50 (Material Design Green) - For success messages, positive actions.
  • Neutral Text Color: #333333 (Dark Gray) - For main body text, labels.
  • Secondary Text/Helper Text Color: #757575 (Medium Gray) - For descriptions, helper text.
  • Background Color: #F8F9FA (Off-White/Light Gray) - Main application background.
  • Card/Panel Background Color: #FFFFFF (Pure White) - For content cards, input fields.
  • Border Color: #E0E0E0 (Light Gray) - For input field borders, separators.
  • Error Color: #F44336 (Material Design Red) - For error messages, destructive actions.
  • Warning Color: #FFC107 (Material Design Amber) - For warning messages.
  • Info Color: `#
gemini Output

This document outlines the detailed professional output for the "Terraform Infrastructure Builder" workflow, focusing on the final design assets for the infrastructure itself, rather than a user interface. Given that the workflow is centered around generating production-ready Terraform configurations for cloud infrastructure, we will interpret "design specifications, wireframe descriptions, color palettes, and UX recommendations" in the context of infrastructure architecture, management, and developer experience (DX).


Terraform Infrastructure Builder: Final Infrastructure Design Assets

1. Introduction and Context Adaptation

This deliverable concludes the "Terraform Infrastructure Builder" workflow by providing detailed design specifications for your cloud infrastructure. While typical "design assets" refer to user interfaces (UI) and user experience (UX), this output adapts those concepts to the domain of Infrastructure as Code (IaC) and cloud architecture.

We will deliver:

  • Infrastructure Design Specifications: Detailing the components, configurations, and architectural principles.
  • Architectural Diagram Descriptions: Equivalent to wireframes, illustrating the logical layout and connectivity.
  • Resource Tagging & Naming Conventions: Analogous to a "color palette" for organizational clarity and management.
  • Developer Experience (DX) & Infrastructure Management Recommendations: Focusing on how the Terraform output facilitates ease of use, maintainability, and operational excellence for engineers.

2. Infrastructure Design Specifications

This section details the core components and their specifications, ensuring a robust, scalable, secure, and cost-optimized cloud environment.

2.1. Core Architectural Principles

  • High Availability (HA): Multi-Availability Zone (AZ) deployments for critical services.
  • Scalability: Auto-scaling groups for compute, managed services for databases and storage.
  • Security First: Least privilege IAM roles, comprehensive security groups, network ACLs, encryption at rest and in transit.
  • Cost Optimization: Right-sizing resources, leveraging managed services, implementing lifecycle policies for storage.
  • Observability: Integration points for logging, monitoring, and alerting.
  • Modularity: Infrastructure components designed as reusable Terraform modules.
  • Idempotency: Terraform configurations are designed to be idempotent, ensuring consistent state.

2.2. Component-Specific Design Details

a. Virtual Private Cloud (VPC) & Networking:

  • VPC CIDR: /16 (e.g., 10.0.0.0/16) to allow ample room for growth.
  • Subnets:

* Public Subnets (2-3 per Region): For Load Balancers, NAT Gateways, Bastion Hosts. CIDR blocks ensuring no overlap.

* Private Application Subnets (2-3 per Region): For application servers, container instances.

* Private Database Subnets (2-3 per Region): For database instances.

  • Internet Gateway (IGW): Attached to VPC for public subnet internet access.
  • NAT Gateways (1 per Public Subnet): For private subnet outbound internet access.
  • Route Tables: Configured for public, private, and database subnets.
  • VPC Endpoints: For secure, private connectivity to AWS services (e.g., S3, DynamoDB) without traversing the internet.

b. Compute (EC2 / Container Services):

  • Application Servers (EC2/ECS/EKS):

* Instance Types: T-series for dev/test, M/C-series for production (e.g., t3.medium, m5.large).

* Auto Scaling Groups (ASG): Minimum/Desired/Maximum capacity defined, scaling policies (CPU utilization, request count).

* Launch Templates: Specifying AMI, instance type, user data (bootstrap script), security groups.

* Load Balancer: Application Load Balancer (ALB) for HTTP/HTTPS traffic, Network Load Balancer (NLB) for extreme performance/TCP.

  • Bastion Host (Optional):

* Instance Type: t3.micro/t3.small.

* Security: Highly restricted inbound SSH access (specific IPs only), dedicated security group.

c. Storage:

  • Amazon S3:

* Buckets: For static assets, logs, backups.

* Versioning: Enabled for critical data.

* Encryption: Server-Side Encryption (SSE-S3 or SSE-KMS) by default.

* Lifecycle Policies: For cost optimization (e.g., transition to Glacier after 30 days).

  • Amazon EBS:

* Volumes: Attached to EC2 instances, provisioned IOPS where needed.

* Snapshots: Automated backups.

  • Amazon EFS (Optional): For shared file systems across multiple EC2 instances.

d. Databases (Amazon RDS):

  • Engine: PostgreSQL, MySQL, Aurora (e.g., postgres:13.x).
  • Instance Class: db.t3.medium for dev/test, db.m5.large for production.
  • Multi-AZ Deployment: Enabled for high availability and automated failover.
  • Storage: GP2 or IO1 (for high-performance needs).
  • Backup Retention: Automated backups (e.g., 7-30 days).
  • Encryption: Encryption at rest enabled (KMS).
  • Security Group: Restrict inbound access only from application subnets/security groups.

e. Security & Identity (IAM, Security Groups):

  • IAM Roles:

* Principle of Least Privilege: Roles created for specific services (e.g., EC2 role for S3 access, Lambda role for DynamoDB access).

* Managed Policies: Used where appropriate, custom policies for fine-grained control.

  • Security Groups:

* Application-Specific: e.g., sg-web-public (HTTP/HTTPS from internet), sg-app-private (HTTP/HTTPS from sg-web-public), sg-db-private (DB port from sg-app-private).

* Inbound/Outbound Rules: Explicitly defined.

  • Network ACLs (Optional/Advanced): For additional subnet-level traffic control.

f. Monitoring & Logging:

  • CloudWatch Alarms: CPU utilization, disk I/O, network in/out, database connections, latency.
  • CloudWatch Logs: Centralized logging from EC2 instances, Load Balancers, RDS.
  • VPC Flow Logs: For network traffic visibility.

3. Architectural Diagram Descriptions (Logical Layout "Wireframes")

This section describes the logical structure of the infrastructure, providing a blueprint for visual architectural diagrams.

3.1. Standard Multi-Tier Web Application Architecture

  • Region: All resources deployed within a specified AWS Region (e.g., us-east-1).
  • VPC: A single, isolated network environment.
  • Availability Zones (AZs): The VPC is segmented across at least two (preferably three) AZs for fault tolerance.

a. Public Subnets (per AZ):

  • Internet Gateway: Provides internet access to public subnets.
  • Application Load Balancer (ALB): Deployed across public subnets, receiving traffic from the Internet.
  • NAT Gateway: One per public subnet, providing outbound internet access for resources in private subnets.

b. Private Application Subnets (per AZ):

  • Auto Scaling Group (ASG): Contains EC2 instances (or ECS/EKS nodes) running the application logic.
  • Target Group: The ASG registers instances with the ALB's target group.
  • Security Group: Allows inbound traffic from the ALB's security group on application ports (e.g., 80/443, 8080). Allows outbound traffic to Database Subnets and NAT Gateways.

c. Private Database Subnets (per AZ):

  • Amazon RDS Multi-AZ Instance: Primary database instance in one AZ, synchronous standby replica in another.
  • Security Group: Allows inbound traffic only from the application security group on the database port (e.g., 5432 for PostgreSQL). No direct internet access.

d. Storage:

  • S3 Buckets: Accessed by application instances (via IAM roles/VPC Endpoints) for static content, user uploads, and backups.

e. Bastion Host (Optional):

  • Deployed in a public subnet, with a highly restricted security group allowing SSH from specific IP ranges only. Used for secure jump-box access to private instances.

3.2. Example Diagram Flow

  1. User connects to ALB via public DNS.
  2. ALB distributes traffic to healthy application instances in private application subnets.
  3. Application instances process requests, interacting with S3 for static assets/storage.
  4. Application instances connect to the RDS database instance in private database subnets.
  5. NAT Gateways enable application instances to access external services (e.g., third-party APIs) without public IPs.

4. Resource Tagging & Naming Conventions ("Color Palette")

Consistent tagging and naming are crucial for resource management, cost allocation, security, and automation. This acts as our "color palette" for organizing and identifying infrastructure components.

4.1. Standard Tags

All provisioned resources will include the following tags:

  • Environment: production, staging, development, testing
  • Project: my-app, data-platform, internal-tools
  • Application: Specific application name (e.g., web-service, auth-api, batch-processor)
  • Owner: Email or team responsible (e.g., devops-team@example.com, john.doe)
  • CostCenter: For financial allocation (e.g., CC1234, IT-Dept)
  • Tier: web, app, database, cache, network
  • ManagedBy: Terraform (to indicate IaC management)
  • CreatedBy: PantheraHive-TerraformBuilder

4.2. Naming Conventions

  • General Format: project-env-component-purpose-identifier
  • VPC: myproject-prod-vpc
  • Subnets: myproject-prod-public-subnet-a, myproject-prod-private-app-subnet-b, myproject-prod-private-db-subnet-c
  • Security Groups: myproject-prod-sg-web-alb, myproject-prod-sg-app, myproject-prod-sg-db
  • EC2 Instances: myproject-prod-app-server-001 (via ASG name/launch template)
  • Load Balancers: myproject-prod-alb-web
  • RDS Instances: myproject-prod-db-main
  • S3 Buckets: myproject-prod-static-assets, myproject-prod-app-logs

4.3. Diagramming Color Conventions (Optional)

For visual architectural diagrams, adhering to standard color conventions (e.g., AWS architecture icons and colors) can enhance clarity:

  • VPC: Light blue/grey background.
  • Public Subnets: Lighter shade of blue/green.
  • Private Subnets: Darker shade of blue/green.
  • Load Balancers: Orange.
  • Compute (EC2/Containers): Green.
  • Databases (RDS): Dark blue.
  • Storage (S3): Yellow.
  • Security Groups/Firewalls: Red.
  • IAM: Purple.

5. Developer Experience (DX) & Infrastructure Management Recommendations

These recommendations focus on improving the experience for engineers interacting with and managing the generated Terraform infrastructure.

5.1. Terraform Code Structure & Modularity

  • Root Module: A top-level directory containing the main configuration for an environment (e.g., environments/production/main.tf).
  • Child Modules: Reusable, encapsulated blocks of infrastructure (e.g., modules/vpc, modules/ec2-asg, modules/rds).

* Each module will have its own variables.tf, outputs.tf, and main.tf.

  • variables.tf: Clearly defined input variables with descriptions and default values.
  • outputs.tf: Exposing key infrastructure attributes (e.g., ALB DNS, DB endpoint, S3 bucket names) for consumption by other systems or engineers.
  • versions.tf: Pinning provider and Terraform versions for consistency.

5.2. Version Control & CI/CD Integration

  • Git Repository: All Terraform code should be stored in a version-controlled Git repository.
  • Branching Strategy: Feature branches for new changes, main/master for production-ready code.
  • Pull Request Reviews: Mandatory code reviews for all infrastructure changes.
  • CI/CD Pipeline:

* terraform fmt: Auto-format code.

* terraform validate: Check syntax and configuration.

* terraform plan: Generate and review execution plan (often as a

terraform_infrastructure_build.txt
Download source file
Copy all content
Full output as text
Download ZIP
IDE-ready project ZIP
Copy share link
Permanent URL for this run
Get Embed Code
Embed this result on any website
Print / Save PDF
Use browser print dialog
\n\n\n"); var hasSrcMain=Object.keys(extracted).some(function(k){return k.indexOf("src/main")>=0;}); if(!hasSrcMain) zip.file(folder+"src/main."+ext,"import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n)\n"); var hasSrcApp=Object.keys(extracted).some(function(k){return k==="src/App."+ext||k==="App."+ext;}); if(!hasSrcApp) zip.file(folder+"src/App."+ext,"import React from 'react'\nimport './App.css'\n\nfunction App(){\n return(\n
\n
\n

"+slugTitle(pn)+"

\n

Built with PantheraHive BOS

\n
\n
\n )\n}\nexport default App\n"); zip.file(folder+"src/index.css","*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:system-ui,-apple-system,sans-serif;background:#f0f2f5;color:#1a1a2e}\n.app{min-height:100vh;display:flex;flex-direction:column}\n.app-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px}\nh1{font-size:2.5rem;font-weight:700}\n"); zip.file(folder+"src/App.css",""); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/pages/.gitkeep",""); zip.file(folder+"src/hooks/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nnpm run dev\n\`\`\`\n\n## Build\n\`\`\`bash\nnpm run build\n\`\`\`\n\n## Open in IDE\nOpen the project folder in VS Code or WebStorm.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n"); } /* --- Vue (Vite + Composition API + TypeScript) --- */ function buildVue(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{\n "name": "'+pn+'",\n "version": "0.0.0",\n "type": "module",\n "scripts": {\n "dev": "vite",\n "build": "vue-tsc -b && vite build",\n "preview": "vite preview"\n },\n "dependencies": {\n "vue": "^3.5.13",\n "vue-router": "^4.4.5",\n "pinia": "^2.3.0",\n "axios": "^1.7.9"\n },\n "devDependencies": {\n "@vitejs/plugin-vue": "^5.2.1",\n "typescript": "~5.7.3",\n "vite": "^6.0.5",\n "vue-tsc": "^2.2.0"\n }\n}\n'); zip.file(folder+"vite.config.ts","import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport { resolve } from 'path'\n\nexport default defineConfig({\n plugins: [vue()],\n resolve: { alias: { '@': resolve(__dirname,'src') } }\n})\n"); zip.file(folder+"tsconfig.json",'{"files":[],"references":[{"path":"./tsconfig.app.json"},{"path":"./tsconfig.node.json"}]}\n'); zip.file(folder+"tsconfig.app.json",'{\n "compilerOptions":{\n "target":"ES2020","useDefineForClassFields":true,"module":"ESNext","lib":["ES2020","DOM","DOM.Iterable"],\n "skipLibCheck":true,"moduleResolution":"bundler","allowImportingTsExtensions":true,\n "isolatedModules":true,"moduleDetection":"force","noEmit":true,"jsxImportSource":"vue",\n "strict":true,"paths":{"@/*":["./src/*"]}\n },\n "include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]\n}\n'); zip.file(folder+"env.d.ts","/// \n"); zip.file(folder+"index.html","\n\n\n \n \n "+slugTitle(pn)+"\n\n\n
\n \n\n\n"); var hasMain=Object.keys(extracted).some(function(k){return k==="src/main.ts"||k==="main.ts";}); if(!hasMain) zip.file(folder+"src/main.ts","import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport App from './App.vue'\nimport './assets/main.css'\n\nconst app = createApp(App)\napp.use(createPinia())\napp.mount('#app')\n"); var hasApp=Object.keys(extracted).some(function(k){return k.indexOf("App.vue")>=0;}); if(!hasApp) zip.file(folder+"src/App.vue","\n\n\n\n\n"); zip.file(folder+"src/assets/main.css","*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#fff;color:#213547}\n"); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/views/.gitkeep",""); zip.file(folder+"src/stores/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nnpm run dev\n\`\`\`\n\n## Build\n\`\`\`bash\nnpm run build\n\`\`\`\n\nOpen in VS Code or WebStorm.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n"); } /* --- Angular (v19 standalone) --- */ function buildAngular(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var sel=pn.replace(/_/g,"-"); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{\n "name": "'+pn+'",\n "version": "0.0.0",\n "scripts": {\n "ng": "ng",\n "start": "ng serve",\n "build": "ng build",\n "test": "ng test"\n },\n "dependencies": {\n "@angular/animations": "^19.0.0",\n "@angular/common": "^19.0.0",\n "@angular/compiler": "^19.0.0",\n "@angular/core": "^19.0.0",\n "@angular/forms": "^19.0.0",\n "@angular/platform-browser": "^19.0.0",\n "@angular/platform-browser-dynamic": "^19.0.0",\n "@angular/router": "^19.0.0",\n "rxjs": "~7.8.0",\n "tslib": "^2.3.0",\n "zone.js": "~0.15.0"\n },\n "devDependencies": {\n "@angular-devkit/build-angular": "^19.0.0",\n "@angular/cli": "^19.0.0",\n "@angular/compiler-cli": "^19.0.0",\n "typescript": "~5.6.0"\n }\n}\n'); zip.file(folder+"angular.json",'{\n "$schema": "./node_modules/@angular/cli/lib/config/schema.json",\n "version": 1,\n "newProjectRoot": "projects",\n "projects": {\n "'+pn+'": {\n "projectType": "application",\n "root": "",\n "sourceRoot": "src",\n "prefix": "app",\n "architect": {\n "build": {\n "builder": "@angular-devkit/build-angular:application",\n "options": {\n "outputPath": "dist/'+pn+'",\n "index": "src/index.html",\n "browser": "src/main.ts",\n "tsConfig": "tsconfig.app.json",\n "styles": ["src/styles.css"],\n "scripts": []\n }\n },\n "serve": {"builder":"@angular-devkit/build-angular:dev-server","configurations":{"production":{"buildTarget":"'+pn+':build:production"},"development":{"buildTarget":"'+pn+':build:development"}},"defaultConfiguration":"development"}\n }\n }\n }\n}\n'); zip.file(folder+"tsconfig.json",'{\n "compileOnSave": false,\n "compilerOptions": {"baseUrl":"./","outDir":"./dist/out-tsc","forceConsistentCasingInFileNames":true,"strict":true,"noImplicitOverride":true,"noPropertyAccessFromIndexSignature":true,"noImplicitReturns":true,"noFallthroughCasesInSwitch":true,"paths":{"@/*":["src/*"]},"skipLibCheck":true,"esModuleInterop":true,"sourceMap":true,"declaration":false,"experimentalDecorators":true,"moduleResolution":"bundler","importHelpers":true,"target":"ES2022","module":"ES2022","useDefineForClassFields":false,"lib":["ES2022","dom"]},\n "references":[{"path":"./tsconfig.app.json"}]\n}\n'); zip.file(folder+"tsconfig.app.json",'{\n "extends":"./tsconfig.json",\n "compilerOptions":{"outDir":"./dist/out-tsc","types":[]},\n "files":["src/main.ts"],\n "include":["src/**/*.d.ts"]\n}\n'); zip.file(folder+"src/index.html","\n\n\n \n "+slugTitle(pn)+"\n \n \n \n\n\n \n\n\n"); zip.file(folder+"src/main.ts","import { bootstrapApplication } from '@angular/platform-browser';\nimport { appConfig } from './app/app.config';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, appConfig)\n .catch(err => console.error(err));\n"); zip.file(folder+"src/styles.css","* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; color: #111827; }\n"); var hasComp=Object.keys(extracted).some(function(k){return k.indexOf("app.component")>=0;}); if(!hasComp){ zip.file(folder+"src/app/app.component.ts","import { Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [RouterOutlet],\n templateUrl: './app.component.html',\n styleUrl: './app.component.css'\n})\nexport class AppComponent {\n title = '"+pn+"';\n}\n"); zip.file(folder+"src/app/app.component.html","
\n
\n

"+slugTitle(pn)+"

\n

Built with PantheraHive BOS

\n
\n \n
\n"); zip.file(folder+"src/app/app.component.css",".app-header{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px}h1{font-size:2.5rem;font-weight:700;color:#6366f1}\n"); } zip.file(folder+"src/app/app.config.ts","import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { routes } from './app.routes';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n provideRouter(routes)\n ]\n};\n"); zip.file(folder+"src/app/app.routes.ts","import { Routes } from '@angular/router';\n\nexport const routes: Routes = [];\n"); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nng serve\n# or: npm start\n\`\`\`\n\n## Build\n\`\`\`bash\nng build\n\`\`\`\n\nOpen in VS Code with Angular Language Service extension.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n.angular/\n"); } /* --- Python --- */ function buildPython(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^\`\`\`[\w]*\n?/m,"").replace(/\n?\`\`\`$/m,"").trim(); var reqMap={"numpy":"numpy","pandas":"pandas","sklearn":"scikit-learn","tensorflow":"tensorflow","torch":"torch","flask":"flask","fastapi":"fastapi","uvicorn":"uvicorn","requests":"requests","sqlalchemy":"sqlalchemy","pydantic":"pydantic","dotenv":"python-dotenv","PIL":"Pillow","cv2":"opencv-python","matplotlib":"matplotlib","seaborn":"seaborn","scipy":"scipy"}; var reqs=[]; Object.keys(reqMap).forEach(function(k){if(src.indexOf("import "+k)>=0||src.indexOf("from "+k)>=0)reqs.push(reqMap[k]);}); var reqsTxt=reqs.length?reqs.join("\n"):"# add dependencies here\n"; zip.file(folder+"main.py",src||"# "+title+"\n# Generated by PantheraHive BOS\n\nprint(title+\" loaded\")\n"); zip.file(folder+"requirements.txt",reqsTxt); zip.file(folder+".env.example","# Environment variables\n"); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\npython3 -m venv .venv\nsource .venv/bin/activate\npip install -r requirements.txt\n\`\`\`\n\n## Run\n\`\`\`bash\npython main.py\n\`\`\`\n"); zip.file(folder+".gitignore",".venv/\n__pycache__/\n*.pyc\n.env\n.DS_Store\n"); } /* --- Node.js --- */ function buildNode(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^\`\`\`[\w]*\n?/m,"").replace(/\n?\`\`\`$/m,"").trim(); var depMap={"mongoose":"^8.0.0","dotenv":"^16.4.5","axios":"^1.7.9","cors":"^2.8.5","bcryptjs":"^2.4.3","jsonwebtoken":"^9.0.2","socket.io":"^4.7.4","uuid":"^9.0.1","zod":"^3.22.4","express":"^4.18.2"}; var deps={}; Object.keys(depMap).forEach(function(k){if(src.indexOf(k)>=0)deps[k]=depMap[k];}); if(!deps["express"])deps["express"]="^4.18.2"; var pkgJson=JSON.stringify({"name":pn,"version":"1.0.0","main":"src/index.js","scripts":{"start":"node src/index.js","dev":"nodemon src/index.js"},"dependencies":deps,"devDependencies":{"nodemon":"^3.0.3"}},null,2)+"\n"; zip.file(folder+"package.json",pkgJson); var fallback="const express=require(\"express\");\nconst app=express();\napp.use(express.json());\n\napp.get(\"/\",(req,res)=>{\n res.json({message:\""+title+" API\"});\n});\n\nconst PORT=process.env.PORT||3000;\napp.listen(PORT,()=>console.log(\"Server on port \"+PORT));\n"; zip.file(folder+"src/index.js",src||fallback); zip.file(folder+".env.example","PORT=3000\n"); zip.file(folder+".gitignore","node_modules/\n.env\n.DS_Store\n"); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\n\`\`\`\n\n## Run\n\`\`\`bash\nnpm run dev\n\`\`\`\n"); } /* --- Vanilla HTML --- */ function buildVanillaHtml(zip,folder,app,code){ var title=slugTitle(app); var isFullDoc=code.trim().toLowerCase().indexOf("=0||code.trim().toLowerCase().indexOf("=0; var indexHtml=isFullDoc?code:"\n\n\n\n\n"+title+"\n\n\n\n"+code+"\n\n\n\n"; zip.file(folder+"index.html",indexHtml); zip.file(folder+"style.css","/* "+title+" — styles */\n*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#1a1a2e}\n"); zip.file(folder+"script.js","/* "+title+" — scripts */\n"); zip.file(folder+"assets/.gitkeep",""); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Open\nDouble-click \`index.html\` in your browser.\n\nOr serve locally:\n\`\`\`bash\nnpx serve .\n# or\npython3 -m http.server 3000\n\`\`\`\n"); zip.file(folder+".gitignore",".DS_Store\nnode_modules/\n.env\n"); } /* ===== MAIN ===== */ var sc=document.createElement("script"); sc.src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"; sc.onerror=function(){ if(lbl)lbl.textContent="Download ZIP"; alert("JSZip load failed — check connection."); }; sc.onload=function(){ var zip=new JSZip(); var base=(_phFname||"output").replace(/\.[^.]+$/,""); var app=base.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_+|_+$/g,"")||"my_app"; var folder=app+"/"; var vc=document.getElementById("panel-content"); var panelTxt=vc?(vc.innerText||vc.textContent||""):""; var lang=detectLang(_phCode,panelTxt); if(_phIsHtml){ buildVanillaHtml(zip,folder,app,_phCode); } else if(lang==="flutter"){ buildFlutter(zip,folder,app,_phCode,panelTxt); } else if(lang==="react-native"){ buildReactNative(zip,folder,app,_phCode,panelTxt); } else if(lang==="swift"){ buildSwift(zip,folder,app,_phCode,panelTxt); } else if(lang==="kotlin"){ buildKotlin(zip,folder,app,_phCode,panelTxt); } else if(lang==="react"){ buildReact(zip,folder,app,_phCode,panelTxt); } else if(lang==="vue"){ buildVue(zip,folder,app,_phCode,panelTxt); } else if(lang==="angular"){ buildAngular(zip,folder,app,_phCode,panelTxt); } else if(lang==="python"){ buildPython(zip,folder,app,_phCode); } else if(lang==="node"){ buildNode(zip,folder,app,_phCode); } else { /* Document/content workflow */ var title=app.replace(/_/g," "); var md=_phAll||_phCode||panelTxt||"No content"; zip.file(folder+app+".md",md); var h=""+title+""; h+="

"+title+"

"; var hc=md.replace(/&/g,"&").replace(//g,">"); hc=hc.replace(/^### (.+)$/gm,"

$1

"); hc=hc.replace(/^## (.+)$/gm,"

$1

"); hc=hc.replace(/^# (.+)$/gm,"

$1

"); hc=hc.replace(/\*\*(.+?)\*\*/g,"$1"); hc=hc.replace(/\n{2,}/g,"

"); h+="

"+hc+"

Generated by PantheraHive BOS
"; zip.file(folder+app+".html",h); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\nFiles:\n- "+app+".md (Markdown)\n- "+app+".html (styled HTML)\n"); } zip.generateAsync({type:"blob"}).then(function(blob){ var a=document.createElement("a"); a.href=URL.createObjectURL(blob); a.download=app+".zip"; a.click(); URL.revokeObjectURL(a.href); if(lbl)lbl.textContent="Download ZIP"; }); }; document.head.appendChild(sc); } function phShare(){navigator.clipboard.writeText(window.location.href).then(function(){var el=document.getElementById("ph-share-lbl");if(el){el.textContent="Link copied!";setTimeout(function(){el.textContent="Copy share link";},2500);}});}function phEmbed(){var runId=window.location.pathname.split("/").pop().replace(".html","");var embedUrl="https://pantherahive.com/embed/"+runId;var code='';navigator.clipboard.writeText(code).then(function(){var el=document.getElementById("ph-embed-lbl");if(el){el.textContent="Embed code copied!";setTimeout(function(){el.textContent="Get Embed Code";},2500);}});}