AI Voice Designer
Run ID: 69cb2e0b61b1021a29a86a222026-03-31Design
PantheraHive BOS
BOS Dashboard

Design a completely custom AI voice by describing the characteristics you want

AI Voice Designer: Custom Voice Design Specification

This document outlines the comprehensive design specifications, user interface wireframe descriptions, recommended color palettes, and key user experience (UX) recommendations for a custom AI Voice Designer. The goal is to provide a robust framework for users to create highly personalized AI voices with precise control over their characteristics, leveraging advanced voice synthesis capabilities (e.g., ElevenLabs).


1. Detailed AI Voice Design Specifications

The core of the AI Voice Designer lies in defining the granular characteristics of the voice. These specifications will serve as the adjustable parameters within the design interface.

1.1 Core Vocal Attributes

  • Gender & Pitch Range:

* Options: Male, Female, Neutral/Androgynous.

* Control: Slider for fine-tuning pitch within the selected gender range (e.g., "Deep" to "High").

* Specification: Defines the fundamental frequency range of the voice.

  • Age Profile:

* Options: Young Adult (18-30), Middle-Aged (31-55), Senior (56+).

* Control: Slider or discrete selection.

* Specification: Influences vocal resonance, perceived maturity, and slight variations in vocal cord vibration.

  • Accent & Dialect:

* Options: American English (General, Southern, Californian), British English (RP, Cockney, Scottish), Australian English, Indian English, etc. (Expandable for other languages).

* Control: Dropdown selector with regional variations.

* Specification: Dictates pronunciation patterns, intonation, and specific vowel/consonant sounds.

  • Language:

* Options: English, Spanish, German, French, Italian, Portuguese, Hindi, Japanese, Korean, etc.

* Control: Primary language dropdown. Secondary option for accent within that language.

* Specification: Determines the phonetic inventory and grammatical structure the voice is trained on.

1.2 Tone & Emotion Dynamics

  • Emotional Range:

* Options: Calm, Energetic, Authoritative, Friendly, Warm, Serious, Playful, Empathetic, Sarcastic.

* Control: Multi-select checkboxes or a "mood board" style selector for blendable emotions. Sliders for intensity of each selected emotion.

* Specification: Influences prosody, stress, intonation, and overall emotional coloring of speech.

  • Speaking Style/Pacing:

* Options: Conversational, Formal, Expressive, Monotone, Rapid, Measured.

* Control: Slider (e.g., "Slow" to "Fast") for overall pace, and a dropdown for stylistic presets.

* Specification: Defines the average words per minute and the naturalness of pauses and rhythm.

  • Vocal Resonance & Quality:

* Options: Clear, Husky, Warm, Bright, Deep, Resonant, Breathy, Gravelly.

* Control: Multiple sliders or a 2D plot for blending (e.g., X-axis: "Bright" to "Warm", Y-axis: "Clear" to "Breathy").

* Specification: Describes the timbre and harmonic richness of the voice.

1.3 Advanced & Fine-Tuning Parameters

  • Intonation Pattern:

* Control: Slider (e.g., "Flat" to "Dynamic").

* Specification: How much the voice's pitch varies within a sentence, impacting naturalness and emphasis.

  • Speech Consistency:

* Control: Slider (e.g., "Uniform" to "Varied").

* Specification: How consistently the voice maintains its character, useful for long-form content.

  • Micro-Pauses & Fluency:

* Control: Slider (e.g., "Smooth" to "Natural Pauses").

* Specification: Controls the insertion of natural-sounding hesitations or breath pauses.

  • Volume & Loudness:

* Control: Slider (e.g., "Soft" to "Loud").

* Specification: Overall amplitude of the generated voice.

  • Whisper/Shout Toggle:

* Control: Discrete buttons or a mode selector.

* Specification: Specific vocal modes for distinct delivery styles.

1.4 Use Case & Persona Alignment

  • Target Application:

* Options: Narration, Customer Service, Virtual Assistant, Character Voice, News Anchor, Podcast Host.

* Control: Dropdown selection.

* Specification: Provides context for the voice's optimal performance and subtly adjusts underlying models.

  • Persona Description (Text Input):

* Control: Free-form text area.

* Specification: Allows users to describe their desired voice in natural language (e.g., "A wise old wizard with a booming but kind voice"), which the AI can use for initial parameter suggestions or fine-tuning.


2. Wireframe Descriptions for the AI Voice Designer UI

The user interface will be intuitive, allowing for both quick design and detailed customization.

2.1 Main Voice Design Canvas

  • Layout: A central panel for voice parameter adjustments, flanked by a preview section and a save/manage panel.
  • Components:

* Parameter Groups (Left/Center Panel):

* Accordion/Tabbed Sections: "Core Attributes," "Tone & Emotion," "Advanced Settings." Each section contains relevant sliders, dropdowns, and checkboxes as described in Section 1.

* Sliders: Visually distinct, easy to drag, with numerical value display.

* Dropdowns: Clear labels and comprehensive options.

* Toggle Buttons/Checkboxes: For binary choices or multi-selection.

* Free-form Text Area: For "Persona Description."

* Voice Preview Section (Right Panel):

* Text Input Field: A multi-line text area where users can type or paste up to 500 characters for a voice sample.

* "Generate Preview" Button: Clearly labeled, initiates audio synthesis.

* Audio Player Control: Standard play/pause, scrub bar, volume control.

* Real-time Feedback Indicator: A visual cue (e.g., a waveform animation) during generation.

* Action Panel (Bottom Right/Persistent Header):

* "Save Voice Profile" Button: Prompts for a voice name and optional description, saving the current parameter set.

* "Load Preset" Dropdown: Accesses previously saved custom voices or system-provided templates.

* "Start Fresh/Reset" Button: Clears all current parameters to default.

* "Export Voice/API Key" Button: (Advanced feature) Provides the necessary identifiers for integrating the custom voice into applications.

2.2 Presets & Templates Section

  • Layout: A dedicated modal or slide-out panel accessible from the "Load Preset" button.
  • Components:

* Category Filters: For system presets (e.g., "Narrators," "Customer Service," "Characters").

* User-Saved Voices List: Displays names and brief descriptions of custom voices created by the user.

* "Load" Button: Applies the selected preset/voice profile.

* "Delete" / "Rename" Icons: For managing user-saved voices.

* "Preview Preset" Button: Allows listening to a sample of a preset before loading.

2.3 Onboarding & Guidance

  • Initial Tour/Tooltips: Overlay on first use, highlighting key sections and functionalities.
  • Contextual Help Icons: Small 'i' icons next to complex parameters, revealing detailed explanations on hover.

3. Color Palettes

Three distinct color palettes are recommended to cater to different aesthetic preferences, while maintaining professionalism and readability.

3.1 Palette 1: "Professional & Modern"

  • Theme: Clean, sophisticated, tech-oriented.
  • Primary Accent: #007AFF (Vibrant Blue - for interactive elements, buttons, active states)
  • Secondary Accent: #5AC8FA (Sky Blue - for subtle highlights, progress bars)
  • Background: #F2F2F7 (Light Gray - for main content areas)
  • Card/Panel Background: #FFFFFF (White - for modular sections, input fields)
  • Text (Primary): #1C1C1E (Dark Charcoal - for headings, main content)
  • Text (Secondary/Labels): #8E8E93 (Medium Gray - for descriptions, inactive labels)
  • Error/Warning: #FF3B30 (Red)
  • Success: #34C759 (Green)

3.2 Palette 2: "Warm & Inviting"

  • Theme: User-friendly, approachable, creative.
  • Primary Accent: #FF9F0A (Warm Orange - for interactive elements, calls to action)
  • Secondary Accent: #FFD700 (Golden Yellow - for subtle highlights, progress)
  • Background: #FDF8F0 (Off-White/Cream - for main content areas)
  • Card/Panel Background: #FFFFFF (White)
  • Text (Primary): #3A3A3C (Dark Gray - for headings, main content)
  • Text (Secondary/Labels): #AEAEB2 (Light Gray - for descriptions, inactive labels)
  • Error/Warning: #D62828 (Deep Red)
  • Success: #28A745 (Forest Green)

3.3 Palette 3: "Minimalist & Elegant"

  • Theme: Sleek, high-end, focused on content.
  • Primary Accent: #6C5CE7 (Soft Violet - for interactive elements, sophisticated touch)
  • Secondary Accent: #A29BFE (Lavender - for subtle highlights)
  • Background: #EFEFEF (Very Light Gray - for main content areas)
  • Card/Panel Background: #FFFFFF (White)
  • Text (Primary): #2C2C2E (Near Black - for headings, main content)
  • Text (Secondary/Labels): #6A6A6F (Dark Gray - for descriptions, inactive labels)
  • Error/Warning: #FF453A (Coral Red)
  • Success: #30D158 (Lime Green)

4. UX Recommendations

Optimizing the user experience is paramount for a tool that involves creative design and iterative refinement.

4.1 Real-time Feedback & Iteration

  • Instant Parameter Application: Changes to sliders or dropdowns should instantly update the underlying voice model, ready for preview.
  • Quick Preview Generation: Minimize latency between hitting "Generate Preview" and hearing the audio. Users should be able to rapidly iterate through adjustments.
  • A/B Comparison: Allow users to save temporary "snapshots" of voice settings to easily compare different versions side-by-side (e.g., "Version A" vs. "Version B").

4.2 Guidance & Education

  • Contextual Tooltips: Provide clear, concise explanations for each parameter, describing its effect on the voice. Use examples where helpful.
  • Progressive Disclosure: Initially, present core parameters. Advanced settings can be collapsed or placed in a separate tab to avoid overwhelming new users.
  • "Smart Suggestions": Based on the "Persona Description" text input, the system could suggest initial parameter settings to give users a head start.

4.3 Ease of Use & Accessibility

  • Keyboard Navigation: Ensure all interactive elements are reachable and operable via keyboard.
  • High Contrast Ratios: Adhere to WCAG guidelines for text and interactive element contrast to ensure readability for all users.
  • Clear Labeling: All sliders, dropdowns, and buttons should have unambiguous labels.
  • Visual Hierarchy: Use size, color, and spacing to guide the user's eye and indicate importance.
  • Undo/Redo Functionality: Essential for design tools to allow users to experiment without fear of irreversible mistakes.

4.4 Performance & Reliability

  • Optimized Loading: Ensure the interface loads quickly, even with complex parameter sets.
  • Robust Error Handling: Clearly communicate any errors during voice generation or saving, with actionable advice.
  • Cloud Synchronization: If applicable, ensure saved voices are synchronized across devices.

4.5 Save & Management

ai_voice_designer.md
Download as Markdown
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);}});}