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

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

AI Voice Designer: Custom Voice Design Specifications

This deliverable outlines the comprehensive design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for creating a completely custom AI voice using advanced text-to-speech technology, specifically leveraging capabilities akin to ElevenLabs. The goal is to provide a detailed blueprint for a user-friendly interface that allows for nuanced control over voice characteristics.


1. Introduction: Crafting Your Unique AI Voice

Welcome to the AI Voice Designer. This tool empowers you to sculpt a digital voice that perfectly matches your vision, whether for narration, virtual assistants, content creation, or branding. By providing detailed descriptions across various sonic, emotional, and technical dimensions, you will define a voice that is truly unique and resonant.


2. Detailed Design Specifications for Voice Characteristics

To design your custom AI voice, you will specify characteristics across several key categories. These specifications will guide the underlying AI model in synthesizing your desired voice.

2.1. Core Demographic & Linguistic Attributes

  • Gender:

* Options: Male, Female, Androgynous/Neutral.

* Description: Defines the fundamental pitch and resonance associated with common gender perceptions.

  • Age Range:

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

* Description: Influences vocal maturity, tone depth, and perceived energy levels.

  • Accent/Dialect:

* Options:

* North American English: General American, Canadian, Southern US.

* British English: Standard British (RP), Scottish, Irish, Welsh, Northern English.

* Australian English: General Australian.

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

(Expandable to other languages like Spanish (Castilian, Latin American), French (Parisian, Canadian), German, Italian, etc., based on platform capabilities).*

* Description: Specifies the phonetic and prosodic patterns, including pronunciation, intonation, and rhythm characteristic of a particular region or culture.

2.2. Sonic Qualities & Delivery Style

  • Pace/Speed:

* Range: Slow, Moderate, Fast.

* Description: Controls the words per minute (WPM) and the overall rhythm of speech.

  • Pitch/Tone:

* Pitch Range: Low, Medium, High.

* Tone Qualities: Warm, Bright, Deep, Clear, Resonant, Husky, Breathy, Smooth, Crisp, Mellow. (Multi-select or slider intensity for each).

* Description: Pitch refers to the fundamental frequency of the voice (how high or low it sounds). Tone describes the overall quality, timber, and richness of the voice.

  • Vocal Quality/Texture:

* Options: Clear, Resonant, Breathy, Husky, Smooth, Crisp, Mellow, Gravelly.

* Description: The unique character or texture of the voice, influencing its perceived "feel."

2.3. Emotional Range & Temperament

  • Primary Temperament:

* Options: Calm, Energetic, Authoritative, Friendly, Empathetic, Serious, Playful, Mysterious, Professional, Conversational, Assertive, Soothing.

* Description: Defines the default underlying emotional predisposition of the voice.

  • Emotional Expressiveness:

* Range: Flat/Monotone, Subtle, Moderate, Highly Expressive.

* Description: Controls the dynamic range of emotional inflection and prosody.

  • Specific Emotional Biases (Optional):

* Options: Slight tendency towards Joyful, Curious, Thoughtful, Determined, etc.

* Description: Allows for fine-tuning a subtle lean towards particular emotions even in neutral speech.

2.4. Intended Use Case/Purpose

  • Options:

* Narration: Audiobooks, documentaries, e-learning.

* Virtual Assistant: Conversational AI, smart speakers.

* Customer Service: IVR systems, support bots.

* Podcasting/Broadcast: Engaging, clear delivery.

* Marketing/Advertising: Persuasive, attention-grabbing.

* Character Voice: Gaming, animation.

* Brand Voice: Consistent, recognizable.

  • Description: Helps the AI prioritize certain vocal characteristics (e.g., clarity for e-learning, warmth for customer service).

2.5. Advanced AI Parameters (ElevenLabs-like Controls)

These parameters offer granular control over the AI synthesis process:

  • Stability (Consistency):

* Range: 0% (highly variable) to 100% (highly consistent).

* Description: Controls how stable the voice's emotional tone and style are. Lower values allow for more variability and expressiveness, higher values ensure a more uniform delivery.

  • Clarity/Accuracy (Pronunciation):

* Range: 0% (less clear) to 100% (crystal clear).

* Description: Adjusts the clarity and crispness of pronunciation. Higher values can make speech sound more articulate but potentially less natural in some contexts.

  • Style Exaggeration (Emotional Emphasis):

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

* Description: Determines how much the AI emphasizes the underlying emotional and stylistic cues in the text. Higher values can lead to more dramatic or pronounced emotional delivery.

  • Speaker Boost (Enhance Similarity):

(Note: For custom voice design, this might be less about matching a specific speaker and more about enhancing the qualities defined above to make them more prominent and distinct, or ensuring the custom voice stands out from generic options.)*

* Range: 0% to 100%.

* Description: A parameter that can enhance the distinctiveness of the designed voice, making its unique characteristics more pronounced and less generic.


3. Wireframe Descriptions (User Interface)

The AI Voice Designer interface will be a single, interactive page, logically segmented to guide the user through the voice creation process.

3.1. Layout Structure

  • Header: Logo, "AI Voice Designer" title, Help/Feedback link.
  • Left Panel (Voice Characteristics Input): Main area for all sliders, dropdowns, and checkboxes.
  • Right Panel (Audition & Controls): Dedicated area for text input, preview buttons, and advanced AI parameters.
  • Footer: Save/Generate Voice button, Disclaimer.

3.2. Left Panel: Voice Characteristics Input

This panel is organized into collapsible sections for clarity.

  • Section 1: Core Voice Identity

* Gender: Radio buttons (Male, Female, Neutral).

* Age Range: Dropdown menu (Young Adult, Adult, Middle-Aged, Senior).

* Accent/Dialect: Dropdown menu with hierarchical options (e.g., "English (US) -> General American").

  • Section 2: Sonic Profile

* Pace/Speed: Slider with labels (Slow, Moderate, Fast).

* Pitch: Slider with labels (Low, Medium, High).

* Tone Qualities: Multi-select checkboxes (Warm, Bright, Deep, Clear, Resonant, Husky, Breathy, Smooth, Crisp, Mellow). Each selected item can have an intensity slider (0-100%).

* Vocal Quality/Texture: Dropdown menu (Clear, Resonant, Breathy, Husky, Smooth, Crisp, Mellow, Gravelly).

  • Section 3: Emotional & Delivery Style

* Primary Temperament: Dropdown or radio buttons (Calm, Energetic, Authoritative, Friendly, Empathetic, etc.).

* Emotional Expressiveness: Slider (Flat/Monotone, Subtle, Moderate, Highly Expressive).

* Specific Emotional Biases: Multi-select checkboxes with small intensity sliders (e.g., Joyful (0-100%), Curious (0-100%)).

  • Section 4: Intended Use Case

* Purpose: Radio buttons or dropdown (Narration, Virtual Assistant, Customer Service, Podcasting, etc.).

3.3. Right Panel: Audition & Advanced Controls

This panel provides real-time feedback and fine-tuning.

  • Text Input Area:

* A large multi-line text area for users to type sample text (e.g., "Hello, this is your custom AI voice. How may I help you today?").

* Character/word count indicator.

* Pre-filled example text option.

  • Audition Controls:

* "Listen" Button: Prominently placed, initiates voice synthesis and playback.

* "Stop" Button: Stops playback.

* Volume Slider: Controls playback volume.

  • Advanced AI Parameters:

* Stability: Slider (0-100%), with descriptive text and tooltip.

* Clarity/Accuracy: Slider (0-100%), with descriptive text and tooltip.

* Style Exaggeration: Slider (0-100%), with descriptive text and tooltip.

* Speaker Boost: Slider (0-100%), with descriptive text and tooltip.

  • Voice Name Input:

* Text field for users to name their custom voice profile (e.g., "My Brand Narrator," "AI Assistant Emma").

  • "Create Voice Profile" Button:

* Prominent call-to-action to finalize and save the designed voice.

3.4. Interactive Elements

  • Sliders: Continuous range adjustment.
  • Dropdowns: Select from predefined lists.
  • Radio Buttons: Single selection from a group.
  • Checkboxes: Multi-selection.
  • Tooltips: Hover-over explanations for each parameter.

4. Color Palettes

A professional, modern, and inviting color palette will enhance user experience and brand perception.

4.1. Primary Brand Colors

  • Deep Blue/Teal (#005A87 / #007B8A): Trust, professionalism, innovation. Used for headers, primary buttons, and key branding elements.
  • Dark Gray (#333333): Strong, legible text, main structural elements.

4.2. Secondary & Accent Colors

  • Light Blue/Cyan (#00BCD4 / #4DD0E1): Energy, interactivity, highlights for active elements, sliders, and progress indicators.
  • Soft Green (#8BC34A): Success states, positive feedback, "Create Voice" button.
  • Warm Orange (#FF9800): Warning states, secondary calls-to-action (e.g., "Save Draft").

4.3. Neutral & Background Colors

  • Light Gray (#F5F5F5): Background for the main canvas, subtle separation of sections.
  • White (#FFFFFF): Background for input fields, cards, and primary content areas.
  • Medium Gray (#666666 / #999999): Secondary text, descriptions, inactive states.

4.4. Semantic Colors

  • Success: Green (#4CAF50)
  • Warning: Orange (#FFC107)
  • Error: Red (#F44336)

5. UX Recommendations

User experience is paramount for a tool that requires detailed customization.

5.1. Intuitive & Guided Flow

  • Logical Grouping: Parameters are grouped into intuitive categories (Identity, Sonic, Emotional) to prevent overwhelming the user.
  • Progressive Disclosure: Advanced AI parameters are initially collapsed or subtly presented, allowing users to focus on core characteristics first.
  • Step-by-Step (Optional): For first-time users, consider a guided tour or a "Wizard" mode that walks them through each section.

5.2. Real-time Feedback & Auditioning

  • Prominent "Listen" Button: Ensure the audition button is always visible and easily accessible in the right panel.
  • Fast Synthesis: Optimize the backend for minimal latency between clicking "Listen" and hearing the generated voice.
  • Parameter Impact Visualization: Consider subtle visual cues (e.g., a waveform animation) during playback to indicate the voice is active.

5.3. Clarity & Guidance

  • Clear Terminology: Use plain language for all parameters. Avoid jargon where possible.
  • Comprehensive Tooltips: Every slider, dropdown, and checkbox should have a descriptive tooltip explaining its function and impact on the voice.
  • Example Descriptions: Provide concrete examples for what "Warm Tone" or "Energetic Temperament" might sound like.

5.4. Iteration & Experimentation

  • Save Draft/Version History: Allow users to save multiple versions or drafts of their voice designs, enabling easy comparison and iteration.
  • Undo/Redo: Implement undo
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);}});}