AI Voice Designer
Run ID: 69cce9183e7fb09ff16a633b2026-04-01Design
PantheraHive BOS
BOS Dashboard

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

As the AI Voice Designer, we will craft a completely custom AI voice tailored to your precise specifications. This deliverable outlines the detailed design specifications for the voice itself, the user interface (UI) for its creation, recommended color palettes, and key user experience (UX) considerations to ensure a seamless and powerful design process.


AI Voice Designer: Detailed Professional Output

1. Voice Design Specifications

This section details the core characteristics that define your custom AI voice. These parameters will be used to generate a unique voice profile.

1.1 Core Voice Attributes

  • Gender:

* Options: Male, Female, Androgynous/Neutral.

* Recommendation: Specify the desired gender identity.

  • Age Range:

* Options: Young Adult (18-30), Adult (30-50), Middle-aged (50-65), Senior (65+), Child (6-12).

* Recommendation: Choose an age range that aligns with the persona.

  • Accent/Dialect:

* Primary Options: American English (Standard), British English (RP), Australian English, Indian English, Canadian English, Irish English, Scottish English.

* Secondary Options (if applicable): Regional variations (e.g., Southern US, Northern UK).

* Recommendation: Be specific about the desired accent for authenticity.

  • Speech Style/Tone:

* Options:

* Professional: Authoritative, Clear, Formal, Objective.

* Friendly: Warm, Approachable, Enthusiastic, Conversational.

* Calm/Soothing: Gentle, Relaxed, Serene, Empathetic.

* Energetic/Dynamic: Expressive, Upbeat, Lively, Engaging.

* Serious/Grave: Somber, Measured, Resolute, Thoughtful.

* Playful/Lighthearted: Cheerful, Humorous, Whimsical, Youthful.

* Recommendation: You may select one primary and one secondary style, or describe a unique combination.

  • Pace of Speech:

* Options: Slow, Moderate, Fast.

* Recommendation: Consider the typical delivery speed required for the voice's application.

  • Pitch:

* Options: Low, Medium, High.

* Recommendation: Relates to the fundamental frequency of the voice.

  • Resonance/Timbre:

* Options: Deep, Clear, Breathy, Husky, Bright, Rich.

* Recommendation: Describes the quality and character of the voice's sound.

  • Emotional Range/Expressiveness:

* Options:

* Limited: Monotone, Robotic, Unemotional.

* Moderate: Subtle inflections, natural human-like variation.

* High: Highly expressive, capable of conveying a wide range of emotions (joy, sadness, anger, surprise).

* Recommendation: Crucial for applications requiring emotional depth.

1.2 Advanced Eleven Labs Parameters (for fine-tuning)

  • Voice Stability:

* Range: 0% (highly varied) to 100% (monotone).

* Recommendation: Controls how consistent the voice's tone and emotion remain throughout a speech. Lower values allow for more dynamic emotional expression, higher values ensure uniformity.

  • Voice Clarity + Similarity Enhancement:

* Range: 0% (less clear, more varied) to 100% (highly clear, very similar to original).

* Recommendation: Influences how closely the generated voice matches the original voice's characteristics and its overall clarity. Higher values ensure fidelity and crispness.

  • Style Exaggeration:

* Range: 0% (minimal style) to 100% (maximal style).

* Recommendation: Determines how pronounced the selected speech style and emotional nuances are. Useful for dramatic readings or specific character voices.

1.3 Intended Use Case

  • Examples: Podcast Narration, Audiobook Reading, Virtual Assistant, Customer Service Bot, Gaming Character, Educational Content, Marketing Voiceover, IVR System.
  • Recommendation: Describing the primary use case helps in optimizing the voice parameters for clarity, engagement, and appropriate tone.

1.4 Unique Modifiers/Keywords

  • Example: "Slightly husky", "Crisp pronunciation", "Gentle lilt", "Authoritative yet warm", "Energetic and youthful".
  • Recommendation: Provide any specific descriptive words or phrases that capture the unique essence of the desired voice.

2. Wireframe Descriptions (UI for Voice Design)

The following describes the proposed user interface for designing and customizing your AI voice.

2.1 Overall Layout

A multi-step, intuitive interface designed for iterative voice creation. Each step focuses on a logical grouping of voice attributes, culminating in a comprehensive preview and saving mechanism.

2.2 Key Sections & Components

Step 1: Basic Voice Profile

  • Header: "Define Your Voice's Foundation"
  • Components:

* Gender Selector: Radio buttons or dropdown for Male, Female, Androgynous.

* Age Range Slider/Dropdown: Selects the desired age demographic.

* Accent/Dialect Dropdown: A comprehensive list of supported accents with regional sub-options.

* Text Input: "Describe your desired voice in a few words (e.g., 'A confident British female voice for corporate narration')."

  • Navigation: "Next" button.

Step 2: Tone & Style Refinement

  • Header: "Shape Its Personality"
  • Components:

* Speech Style Sliders (or Multi-Select Checkboxes):

* Professional <---> Friendly

* Calm <---> Energetic

* Serious <---> Playful

Each slider allows for a blend or specific selection.*

* Pace Slider: Slow <---> Moderate <---> Fast.

* Pitch Slider: Low <---> Medium <---> High.

* Resonance/Timbre Selectors: Radio buttons or descriptive icons for Deep, Clear, Breathy, Husky, etc.

* Emotional Range Slider: Limited <---> Moderate <---> High.

  • Navigation: "Previous", "Next" buttons.

Step 3: Advanced Fine-Tuning (Eleven Labs Parameters)

  • Header: "Precision Control"
  • Components:

* Voice Stability Slider: With tooltip explaining its function.

* Voice Clarity + Similarity Enhancement Slider: With tooltip.

* Style Exaggeration Slider: With tooltip.

* Toggle: "Enable advanced emotional modulation" (if applicable for extreme expressiveness).

  • Navigation: "Previous", "Next" buttons.

Step 4: Preview, Name & Save

  • Header: "Hear & Finalize Your Voice"
  • Components:

* Text Input Area: Large text box for user to type sample text (e.g., "Hello, this is my new custom AI voice. I hope you like its sound and tone.").

* "Generate Preview" Button: Activates voice synthesis.

* Audio Player: Play/Pause, volume control, progress bar for the generated preview.

* "Make Adjustments" Button: Links back to previous steps.

* Intended Use Case Dropdown/Text Input: Reiterate or confirm the primary application.

* Voice Name Input: Field to name the custom voice (e.g., "PantheraHive Narrator").

* "Save Voice" Button: Finalizes and saves the custom voice profile.

  • Navigation: "Previous", "Save Voice" buttons.

2.3 Interactive Elements

  • Sliders: Clearly labeled with min/max values and current selection.
  • Dropdowns: Search functionality for long lists (e.g., accents).
  • Tooltips: On-hover explanations for complex parameters.
  • Real-time Feedback: Visual indicators during voice generation.

3. Color Palettes (UI Design)

A professional, clean, and accessible color palette for the Voice Designer UI.

3.1 Primary Palette

  • Dominant Color (Brand Accent): #FF6B00 (Vibrant Orange - Represents creativity, energy, and innovation)
  • Secondary Accent: #007BFF (Muted Blue - Represents reliability, clarity, and technology)
  • Text/Primary UI Elements: #333333 (Dark Charcoal - High contrast, professional)

3.2 Neutral Palette

  • Backgrounds (Light): #F8F8F8 (Soft Off-White - Clean, spacious)
  • Card/Section Backgrounds: #FFFFFF (Pure White - Highlights content)
  • Borders/Dividers: #E0E0E0 (Light Gray - Subtle separation)
  • Secondary Text/Icons: #666666 (Medium Gray - Legible, less prominent than primary text)

3.3 Semantic Colors

  • Success: #28A745 (Green - For successful operations, e.g., "Voice Saved!")
  • Error: #DC3545 (Red - For warnings or errors, e.g., "Generation Failed")
  • Warning/Info: #FFC107 (Yellow/Amber - For important notices)

3.4 Accessibility Considerations

  • Ensure sufficient contrast ratios (WCAG 2.1 AA or AAA) between text and background colors, especially for primary content and interactive elements.
  • Use distinct colors in conjunction with icons or text for semantic feedback (e.g., don't rely solely on color to indicate an error).

4. UX Recommendations

These recommendations aim to enhance usability, efficiency, and satisfaction for users designing their AI voices.

4.1 Iterative Design & Feedback

  • Real-time Preview: The ability to instantly hear changes is paramount. Ensure the "Generate Preview" process is as fast as possible.
  • A/B Testing (Internal): Allow users to compare different iterations of their voice side-by-side.
  • Parameter Reset: Provide an option to reset individual sliders or an entire section to default values.

4.2 Guidance & Education

  • Tooltips & Explanations: Every advanced parameter (e.g., Voice Stability, Style Exaggeration) should have clear, concise tooltips explaining its function and impact on the voice.
  • Contextual Help: Small info icons that link to more detailed documentation or examples for specific voice attributes.
  • Voice Examples/Templates: Offer pre-designed voice templates (e.g., "Corporate Narrator," "Friendly AI Assistant") as starting points, allowing users to modify them.

4.3 User Flow & Navigation

  • Clear Multi-Step Indicator: A progress bar or numbered steps to show users where they are in the voice design process.
  • "Save Draft" Option: Allow users to save their work in progress before finalizing.
  • Intuitive Back & Forth: Easy navigation between steps without losing input.
  • Onboarding Tour: A brief, optional tour for first-time users to highlight key features.

4.4 Management & Organization

  • Voice Library: A dedicated section to view, manage, edit, and delete all custom-designed voices.
  • Tagging/Categorization: Allow users to tag their voices for easier organization (e.g., by project, use case).
  • Versioning: If a voice is edited and saved, offer an option to save it as a new version or overwrite the existing one.

4.5 Performance & Reliability

  • Optimized Generation: Ensure the voice synthesis engine is highly optimized for speed and quality.
  • Error Handling: Provide clear, actionable error messages if voice generation fails.
  • Scalability: The system should handle a growing number of custom voices and generation requests efficiently.

4.6 Accessibility

  • Keyboard Navigation: Ensure all interactive elements are accessible via keyboard.
  • Screen Reader Compatibility: Use proper ARIA attributes and semantic HTML for screen reader users.
  • High Contrast Mode: Offer an optional high-contrast theme for users with visual impairments.

This comprehensive design ensures that the AI Voice Designer is powerful, intuitive, and delivers highly customized voice outputs for any application.

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
"); 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' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( ) "); 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' import './App.css' function App(){ return(

"+slugTitle(pn)+"

Built with PantheraHive BOS

) } export default App "); zip.file(folder+"src/index.css","*{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui,-apple-system,sans-serif;background:#f0f2f5;color:#1a1a2e} .app{min-height:100vh;display:flex;flex-direction:column} .app-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px} h1{font-size:2.5rem;font-weight:700} "); 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)+" Generated by PantheraHive BOS. ## Setup ```bash npm install npm run dev ``` ## Build ```bash npm run build ``` ## Open in IDE Open the project folder in VS Code or WebStorm. "); zip.file(folder+".gitignore","node_modules/ dist/ .env .DS_Store *.local "); } /* --- 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",'{ "name": "'+pn+'", "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.5.13", "vue-router": "^4.4.5", "pinia": "^2.3.0", "axios": "^1.7.9" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", "typescript": "~5.7.3", "vite": "^6.0.5", "vue-tsc": "^2.2.0" } } '); zip.file(folder+"vite.config.ts","import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname,'src') } } }) "); zip.file(folder+"tsconfig.json",'{"files":[],"references":[{"path":"./tsconfig.app.json"},{"path":"./tsconfig.node.json"}]} '); zip.file(folder+"tsconfig.app.json",'{ "compilerOptions":{ "target":"ES2020","useDefineForClassFields":true,"module":"ESNext","lib":["ES2020","DOM","DOM.Iterable"], "skipLibCheck":true,"moduleResolution":"bundler","allowImportingTsExtensions":true, "isolatedModules":true,"moduleDetection":"force","noEmit":true,"jsxImportSource":"vue", "strict":true,"paths":{"@/*":["./src/*"]} }, "include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"] } '); zip.file(folder+"env.d.ts","/// "); zip.file(folder+"index.html"," "+slugTitle(pn)+"
"); 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' import { createPinia } from 'pinia' import App from './App.vue' import './assets/main.css' const app = createApp(App) app.use(createPinia()) app.mount('#app') "); var hasApp=Object.keys(extracted).some(function(k){return k.indexOf("App.vue")>=0;}); if(!hasApp) zip.file(folder+"src/App.vue"," "); 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} "); 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)+" Generated by PantheraHive BOS. ## Setup ```bash npm install npm run dev ``` ## Build ```bash npm run build ``` Open in VS Code or WebStorm. "); zip.file(folder+".gitignore","node_modules/ dist/ .env .DS_Store *.local "); } /* --- 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",'{ "name": "'+pn+'", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test" }, "dependencies": { "@angular/animations": "^19.0.0", "@angular/common": "^19.0.0", "@angular/compiler": "^19.0.0", "@angular/core": "^19.0.0", "@angular/forms": "^19.0.0", "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "^19.0.0", "@angular/cli": "^19.0.0", "@angular/compiler-cli": "^19.0.0", "typescript": "~5.6.0" } } '); zip.file(folder+"angular.json",'{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "'+pn+'": { "projectType": "application", "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/'+pn+'", "index": "src/index.html", "browser": "src/main.ts", "tsConfig": "tsconfig.app.json", "styles": ["src/styles.css"], "scripts": [] } }, "serve": {"builder":"@angular-devkit/build-angular:dev-server","configurations":{"production":{"buildTarget":"'+pn+':build:production"},"development":{"buildTarget":"'+pn+':build:development"}},"defaultConfiguration":"development"} } } } } '); zip.file(folder+"tsconfig.json",'{ "compileOnSave": false, "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"]}, "references":[{"path":"./tsconfig.app.json"}] } '); zip.file(folder+"tsconfig.app.json",'{ "extends":"./tsconfig.json", "compilerOptions":{"outDir":"./dist/out-tsc","types":[]}, "files":["src/main.ts"], "include":["src/**/*.d.ts"] } '); zip.file(folder+"src/index.html"," "+slugTitle(pn)+" "); zip.file(folder+"src/main.ts","import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent, appConfig) .catch(err => console.error(err)); "); zip.file(folder+"src/styles.css","* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; color: #111827; } "); 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'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = '"+pn+"'; } "); zip.file(folder+"src/app/app.component.html","

"+slugTitle(pn)+"

Built with PantheraHive BOS

"); 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} "); } zip.file(folder+"src/app/app.config.ts","import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes) ] }; "); zip.file(folder+"src/app/app.routes.ts","import { Routes } from '@angular/router'; export const routes: Routes = []; "); 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)+" Generated by PantheraHive BOS. ## Setup ```bash npm install ng serve # or: npm start ``` ## Build ```bash ng build ``` Open in VS Code with Angular Language Service extension. "); zip.file(folder+".gitignore","node_modules/ dist/ .env .DS_Store *.local .angular/ "); } /* --- Python --- */ function buildPython(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^```[w]* ?/m,"").replace(/ ?```$/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(" "):"# add dependencies here "; zip.file(folder+"main.py",src||"# "+title+" # Generated by PantheraHive BOS print(title+" loaded") "); zip.file(folder+"requirements.txt",reqsTxt); zip.file(folder+".env.example","# Environment variables "); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. ## Setup ```bash python3 -m venv .venv source .venv/bin/activate pip install -r requirements.txt ``` ## Run ```bash python main.py ``` "); zip.file(folder+".gitignore",".venv/ __pycache__/ *.pyc .env .DS_Store "); } /* --- Node.js --- */ function buildNode(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^```[w]* ?/m,"").replace(/ ?```$/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)+" "; zip.file(folder+"package.json",pkgJson); var fallback="const express=require("express"); const app=express(); app.use(express.json()); app.get("/",(req,res)=>{ res.json({message:""+title+" API"}); }); const PORT=process.env.PORT||3000; app.listen(PORT,()=>console.log("Server on port "+PORT)); "; zip.file(folder+"src/index.js",src||fallback); zip.file(folder+".env.example","PORT=3000 "); zip.file(folder+".gitignore","node_modules/ .env .DS_Store "); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. ## Setup ```bash npm install ``` ## Run ```bash npm run dev ``` "); } /* --- 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:" "+title+" "+code+" "; zip.file(folder+"index.html",indexHtml); zip.file(folder+"style.css","/* "+title+" — styles */ *{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#1a1a2e} "); zip.file(folder+"script.js","/* "+title+" — scripts */ "); zip.file(folder+"assets/.gitkeep",""); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. ## Open Double-click `index.html` in your browser. Or serve locally: ```bash npx serve . # or python3 -m http.server 3000 ``` "); zip.file(folder+".gitignore",".DS_Store node_modules/ .env "); } /* ===== 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(/ {2,}/g,"

"); h+="

"+hc+"

Generated by PantheraHive BOS
"; zip.file(folder+app+".html",h); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. Files: - "+app+".md (Markdown) - "+app+".html (styled HTML) "); } 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);}});}