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

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

AI Voice Designer: Custom Voice Design Specifications

This document outlines the comprehensive design specifications for creating a completely custom AI voice using advanced synthesis capabilities, focusing on a user-centric design approach. This deliverable details the voice characteristics, user interface, visual branding, and overall user experience to ensure a powerful, intuitive, and satisfying voice design process.


1. Detailed Voice Design Specifications

The core of the AI Voice Designer is the ability to precisely control numerous vocal attributes. Below are the key parameters users will be able to adjust to sculpt their unique AI voice:

1.1 Core Vocal Attributes

  • Gender Identity:

* Options: Male, Female, Neutral/Androgynous, Non-binary (with a spectrum slider if feasible).

* Description: Defines the fundamental perceived gender of the voice.

  • Age Range:

* Options: Young Adult (18-25), Adult (25-45), Middle-Aged (45-65), Senior (65+).

* Description: Influences vocal depth, resonance, and perceived maturity.

  • Accent/Dialect:

* Options:

* North American: Standard American, Canadian, Southern US.

* British Isles: RP (Received Pronunciation), General British, Scottish, Irish, Welsh.

* Australian/New Zealand: General Australian, Māori-influenced.

* Other Major English Accents: Indian English, South African English, etc.

* Custom (text field): For specific regional nuances or non-standard requests (requires advanced backend processing).

* Description: Specifies the regional or cultural pronunciation style.

  • Pitch:

* Slider: Low (deep) to High (light).

* Description: The fundamental frequency of the voice, impacting its perceived depth or lightness.

  • Pace/Tempo:

* Slider: Slow (deliberate) to Fast (rapid).

* Description: The speed at which words are spoken.

1.2 Tone & Emotional Qualities

  • Primary Tone/Mood:

* Options (Multi-select with intensity slider for each):

* Professional: Authoritative, Clear, Formal, Objective.

* Friendly: Warm, Approachable, Enthusiastic, Empathetic.

* Calm: Soothing, Relaxed, Gentle, Serene.

* Dynamic: Expressive, Energetic, Engaging, Animated.

* Serious: Grave, Measured, Resolute, Solemn.

* Playful: Lighthearted, Humorous, Whimsical.

* Urgent: Direct, Pressing, Alerting.

* Description: The overarching emotional characteristic or attitude of the voice.

  • Vocal Quality:

* Options (Multi-select): Clear, Resonant, Husky, Breath-y, Smooth, Crisp, Mellifluous, Gravelly.

* Description: Describes the inherent sound characteristics of the vocal cords.

  • Intonation/Rhythm:

* Slider: Monotone (flat) to Expressive (varied).

* Description: The rise and fall of speech, influencing naturalness and engagement.

1.3 Advanced Synthesizer Controls (Eleven Labs Specific)

  • Stability:

* Slider: Low (more varied) to High (more consistent).

* Description: Controls the consistency of the voice's tone and emotion throughout the generated audio. Higher stability ensures a more uniform output, while lower stability allows for more dynamic emotional shifts.

  • Clarity:

* Slider: Low (less clear) to High (very clear).

* Description: Adjusts the distinctness and intelligibility of the speech. Higher clarity reduces artifacts and improves pronunciation.

  • Style Exaggeration:

* Slider: Low (subtle) to High (pronounced).

* Description: Determines how strongly the selected Primary Tone/Mood (e.g., 'Friendly', 'Authoritative') is applied and exaggerated. A higher value will make the chosen style more prominent.

  • Speaker Boost (Beta):

* Toggle: On/Off.

* Description: A beta feature that enhances the perceived presence and strength of the speaker's voice, making it stand out more in a mix or sound more impactful.

1.4 Contextual Usage & Persona Description

  • Intended Use Case (Dropdown/Multi-select):

* Options: AI Assistant, Narration (Audiobooks, Documentaries), Customer Service, Gaming Character, Advertising/Branding, Podcast Host, E-learning, IVR System, News Anchor.

* Description: Helps the AI fine-tune the voice for specific applications, influencing subtle characteristics not explicitly defined by other sliders.

  • Voice Persona Description (Text Area):

* Input: Free-form text (e.g., "A sophisticated, warm female voice for a luxury brand's virtual assistant," or "A gritty, confident male voice for a video game protagonist").

* Description: Allows users to provide a natural language description of their desired voice, which the AI can interpret for nuanced adjustments.


2. Wireframe Descriptions (User Interface)

The voice designer will be presented as a clear, intuitive, multi-stage wizard or a single-page scrolling interface, prioritizing real-time feedback and iterative design.

2.1 Layout and Structure

  • Main Canvas: A central panel displaying all customizable parameters.
  • Parameter Groupings: Parameters will be logically grouped into collapsible sections (e.g., "Basic Attributes," "Tone & Emotion," "Advanced Settings") for better organization.
  • Preview Panel (Fixed/Floating): A dedicated area, ideally fixed on the screen, for text input and audio playback.
  • Control Panel (Fixed): Buttons for "Generate Preview," "Save Voice," "Clear All."

2.2 Key UI Elements

  • Sliders:

* Design: Horizontal sliders with clear min/max labels and current value display.

* Interaction: Drag-and-drop, click to jump.

* Tooltips: On hover, provide a brief explanation of the parameter's effect.

  • Dropdowns/Radio Buttons:

* Design: Standard dropdowns for single-select, radio buttons or elegant toggle switches for binary/limited options.

* Interaction: Click to select.

  • Multi-Select Checkboxes/Tags:

* Design: For Primary Tone/Mood and Vocal Quality, allowing users to combine multiple characteristics. Each selected option could have an associated intensity slider.

* Interaction: Click to select/deselect.

  • Text Area:

* Design: A multi-line input box for Voice Persona Description and the Preview Text.

* Placeholder Text: Guiding examples.

  • Preview Button:

* Design: Prominent button, e.g., "Generate Preview" or "Listen."

* Interaction: Triggers a short audio generation based on the current settings and the text in the preview area.

  • Audio Playback Control:

* Design: Standard play/pause, progress bar, volume control within the preview panel.

  • Save/Export Button:

* Design: Clearly labeled, e.g., "Save Custom Voice."

* Interaction: Prompts for a voice name, then saves the voice to the user's library.

  • Pre-set Voice Templates:

* Design: A gallery or dropdown of pre-configured voices (e.g., "Friendly Narrator," "Authoritative Announcer") that users can load as a starting point.

* Interaction: Click to load, which populates the sliders and options.

2.3 User Flow Example

  1. Start: User lands on the AI Voice Designer.
  2. Initial Configuration: Selects Gender, Age Range, and Accent from basic dropdowns/sliders.
  3. Refinement: Adjusts Pitch, Pace, and selects Primary Tone/Mood with intensity.
  4. Preview: Types "Hello, this is my new AI voice." into the preview text area and clicks "Generate Preview."
  5. Iteration: Listens to the preview, then makes adjustments (e.g., increases "Enthusiastic" intensity, slightly raises Pitch). Generates new preview.
  6. Advanced Tuning: Explores Advanced Synthesizer Controls like Stability and Clarity.
  7. Finalize: Enters Voice Persona Description, selects Intended Use Case, and clicks "Save Custom Voice."

3. Color Palettes

Three distinct color palettes are proposed, offering different aesthetic experiences while maintaining professionalism and clarity.

3.1 Option 1: Professional & Modern (Default Recommendation)

  • Concept: Clean, sophisticated, and trustworthy, ideal for a cutting-edge AI tool.
  • Primary (Backgrounds, Main Sections): #F8F8FA (Light Gray/Off-White)
  • Secondary (Card Backgrounds, Section Headers): #E0E4EB (Soft Gray)
  • Accent (Interactive Elements, Highlights): #007BFF (Vibrant Blue)
  • Text (Primary): #2C3E50 (Dark Navy)
  • Text (Secondary/Labels): #6C7A89 (Medium Gray)
  • Success: #28A745 (Green)
  • Error: #DC3545 (Red)

3.2 Option 2: Warm & Approachable

  • Concept: Inviting, user-friendly, and less stark, fostering a sense of comfort.
  • Primary: #FDFBF7 (Creamy White)
  • Secondary: #E8EAE2 (Soft Sage Green)
  • Accent: #FF8C00 (Warm Orange)
  • Text (Primary): #3A3A3A (Dark Charcoal)
  • Text (Secondary/Labels): #7F8C8D (Slate Gray)
  • Success: #4CAF50 (Forest Green)
  • Error: #D32F2F (Deep Red)

3.3 Option 3: Tech & Futuristic

  • Concept: Bold, high-tech, and immersive, suitable for an advanced AI platform.
  • Primary: #1A1A2E (Deep Indigo)
  • Secondary: #2A2A4A (Dark Purple-Blue)
  • Accent: #00FFFF (Cyan/Aqua)
  • Text (Primary): #E0E0E0 (Light Gray)
  • Text (Secondary/Labels): #9FA8DA (Light Blue-Purple)
  • Success: #39FF14 (Neon Green)
  • Error: #FF0055 (Bright Pink-Red)

4. UX Recommendations

Ensuring an exceptional user experience is paramount for a sophisticated tool like an AI Voice Designer.

  • Iterative Design & Real-time Feedback:

* Recommendation: Implement near real-time audio preview generation (within 1-3 seconds) for short text inputs. Users should be able to hear changes immediately after adjusting parameters.

* Benefit: Reduces frustration, encourages experimentation, and speeds up the design process.

  • Clear Labeling and Contextual Help:

* Recommendation: Every slider, dropdown, and input field must have a clear, concise label. Provide tooltips or expandable help text for each parameter, explaining its function and impact on the voice.

* Benefit: Empowers users to understand complex controls without needing to consult external documentation.

  • Sensible Default Values & Templates:

* Recommendation: Start users with a balanced, neutral default voice. Offer a library of pre-designed voice templates (e.g., "Friendly Narrator," "Authoritative Assistant") as starting points.

* Benefit: Reduces decision fatigue for new users and provides inspiration.

  • Guided Onboarding (Optional but Recommended):

* Recommendation: A brief, interactive tutorial on first use, highlighting key areas and the preview functionality.

* Benefit: Quickly familiarizes users with the interface and core workflow.

  • Undo/Redo Functionality:

* Recommendation: Allow users to undo recent changes to parameters, especially during active design sessions.

* Benefit: Encourages experimentation without fear of losing progress.

  • **Saving
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);}});}