AI Voice Designer
Run ID: 69ccf7193e7fb09ff16a6b402026-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 & Interface Proposal

This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for creating a completely custom AI voice using a platform like ElevenLabs. The goal is to provide a comprehensive, actionable framework for designing an AI voice that perfectly matches desired characteristics.


1. Detailed AI Voice Design Specifications

To design a truly custom AI voice, we need to define its core characteristics across several dimensions. These specifications will serve as the input parameters for the voice generation engine.

1.1. Core Voice Persona & Identity

  • Voice Name: A unique identifier for the custom voice (e.g., "AI Assistant Aura," "Narrator Pro," "Customer Care Bot").
  • Perceived Age Range:

* Young Adult (18-30)

* Adult (30-55)

* Mature (55+)

  • Perceived Gender:

* Female

* Male

* Gender-Neutral (focus on tone, pitch, and timbre)

  • Personality Traits (Select 2-4 primary traits):

* Professional: Authoritative, Clear, Confident, Trustworthy, Formal, Objective

* Friendly: Warm, Approachable, Empathetic, Enthusiastic, Gentle, Reassuring

* Energetic: Dynamic, Lively, Expressive, Upbeat, Passionate

* Calm: Soothing, Relaxed, Serene, Steady, Grounded

* Authoritative: Commanding, Decisive, Strong, Respected

* Intelligent: Articulate, Thoughtful, Clear, Precise

* Playful: Whimsical, Lighthearted, Amusing

* Sophisticated: Elegant, Refined, Poised

* Informal: Casual, Conversational, Relaxed

1.2. Vocal Qualities & Acoustics

  • Pitch:

* Very Low / Deep

* Low

* Medium (Neutral)

* High

* Very High / Light

  • Pacing / Speech Rate:

* Very Slow (deliberate)

* Slow

* Moderate (natural conversational)

* Fast

* Very Fast (urgent)

  • Tone / Timbre:

* Warm (rich, mellow, inviting)

* Bright (clear, crisp, energetic)

* Deep (resonant, full-bodied)

* Light (airy, delicate)

* Clear (unmuffled, articulate)

* Smooth (flowing, even)

  • Volume / Loudness:

* Soft (whisper-like)

* Normal (conversational)

* Loud (projected)

  • Articulation / Clarity:

* Very Clear (precise enunciation)

* Standard (natural clarity)

* Slightly Relaxed (more casual, less precise)

  • Resonance:

* Chest Resonance (deeper, fuller sound)

* Head Resonance (lighter, brighter sound)

* Balanced

1.3. Emotional Range & Expressiveness

  • Overall Expressiveness Level:

* Neutral/Monotone: Minimal emotional inflection, robotic.

* Subtle: Slight variations for emphasis, but generally calm.

* Moderate: Natural human-like expressiveness, suitable for most narratives.

* Highly Expressive: Wide range of emotional inflections, suitable for character voices or dynamic content.

  • Specific Emotion Tendencies (if applicable):

* Tendency towards calm/reassurance

* Tendency towards excitement/enthusiasm

* Tendency towards seriousness/gravity

* Tendency towards empathy/understanding

1.4. Accent, Language & Pronunciation

  • Primary Language: (e.g., English, Spanish, French, German, etc.)
  • Accent/Dialect (if English):

* Standard US (General American)

* British English (RP - Received Pronunciation)

* Australian English

* Irish English

* Canadian English

* Indian English

Other specific regional accents can be specified via text input.*

  • Pronunciation Style:

* Formal

* Standard

* Casual

* Clear & Precise

* Natural & Conversational

1.5. Use Case Context & Desired Impact

  • Primary Application/Use Case:

* Narration (audiobooks, documentaries)

* Customer Service / IVR

* AI Assistant / Chatbot

* Marketing / Advertising

* E-learning / Explainer Videos

* Gaming / Character Voice

* Podcast / Radio Host

* Voiceover for Video

  • Desired Effect on Listener:

* Inspire Trust & Confidence

* Evoke Calm & Relaxation

* Generate Excitement & Engagement

* Convey Authority & Knowledge

* Create a Friendly & Approachable Atmosphere

* Be Entertaining & Engaging


2. ElevenLabs Voice Design Interface: Wireframe Descriptions

The user interface for designing a custom AI voice should be intuitive, interactive, and provide immediate feedback. Below are wireframe descriptions for key components.

2.1. Main Voice Design Dashboard

  • Layout: A central canvas with adjustable parameters, a text input area for preview, and a prominent "Generate Preview" button.
  • Header:

* "Custom Voice Designer" title.

* "Save Voice" button (top right).

* "Load Preset" / "My Voices" dropdown.

  • Left Panel (Voice Characteristics Controls):

* Voice Name Input: Text field.

* Persona Sliders/Dropdowns:

* "Perceived Age" (slider or discrete options).

* "Perceived Gender" (radio buttons or dropdown).

* "Personality Traits" (multi-select checkboxes or tags with descriptions).

* Vocal Qualities Sliders:

* "Pitch" (slider: Low <-> High).

* "Pacing" (slider: Slow <-> Fast).

"Tone" (slider: Warm <-> Bright, Deep <-> Light, Clear <-> Muffled). Could be multiple sliders or a 2D matrix.*

* "Articulation" (slider: Relaxed <-> Precise).

* Emotional Range Slider: "Expressiveness" (slider: Neutral <-> Highly Expressive).

* Accent/Language Selector: Dropdown for major languages/accents, with a "Custom Accent Description" text area for more specific nuances.

* Use Case Context: Multi-select checkboxes or dropdown.

  • Right Panel (Preview & Output):

* Text Input Area: Large multi-line text field for users to type or paste text for voice preview.

Placeholder text:* "Type or paste your text here to hear your custom voice..."

* "Generate Preview" Button: Prominent, immediately below the text input.

* Audio Playback Controls: Standard play, pause, stop, volume slider after preview generation.

* Waveform Visualization: A dynamic waveform display during playback.

* ElevenLabs Specific Advanced Settings (Collapsible Section):

Stability: Slider (0-100%) - how consistent the voice is*.

Clarity + Similarity Enhancement: Slider (0-100%) - how clear and distinct the voice is*.

Style Exaggeration: Slider (0-100%) - how much the voice expresses emotion/style*.

Speaker Boost: Toggle (on/off) - enhances perceived loudness/presence*.

2.2. "Save Voice" Modal

  • Title: "Save Custom Voice"
  • Voice Name: Pre-filled from dashboard, editable.
  • Description: Multi-line text area for user notes about the voice.
  • Tags: Input field for adding tags (e.g., "narrator," "calm," "male").
  • "Save" Button / "Cancel" Button.

2.3. "Load Preset" / "My Voices" Dropdown

  • Dropdown List:

* Pre-defined ElevenLabs templates (e.g., "Narrator," "Customer Service," "Energetic Host").

* User's saved custom voices.

  • "Delete Voice" Option: For user-saved voices.

3. Color Palettes

A clean, modern, and professional aesthetic will enhance usability and user trust.

3.1. Palette 1: Professional & Calming

  • Primary Accent: #4A90E2 (Vibrant Blue - for interactive elements, buttons, highlights)
  • Secondary Accent: #50E3C2 (Aqua Green - for success messages, secondary highlights)
  • Text: #333333 (Dark Grey - for main body text)
  • Subtle Text/Labels: #7F8C8D (Medium Grey - for helper text, disabled states)
  • Background: #F8F8F8 (Light Grey - for main canvas, panels)
  • Card/Container Background: #FFFFFF (White - for input fields, distinct sections)
  • Borders/Dividers: #E0E0E0 (Light Grey - for subtle separation)

3.2. Palette 2: Modern & Energetic

  • Primary Accent: #FF6B6B (Coral Red - for interactive elements, warnings)
  • Secondary Accent: #FFD166 (Sunshine Yellow - for highlights, notifications)
  • Text: #2C3E50 (Dark Blue-Grey - for main body text)
  • Subtle Text/Labels: #95A5A6 (Muted Grey - for helper text)
  • Background: #ECF0F1 (Very Light Grey - for main canvas)
  • Card/Container Background: #FFFFFF (White)
  • Borders/Dividers: #DDE2E6 (Light Blue-Grey)

4. User Experience (UX) Recommendations

Optimizing the user experience is crucial for making the AI Voice Designer effective and enjoyable.

  • 4.1. Iterative Design & Instant Feedback:

* Prominent Preview: The "Generate Preview" button should be easily accessible and visually distinct.

* Rapid Generation: Aim for very low latency (sub-second) for preview generation to encourage experimentation.

* Clear Audio Feedback: Provide clear audio playback controls and a visual waveform.

* Parameter Impact: As users adjust sliders, subtle visual cues (e.g., highlight the affected text in the preview area) could indicate the parameter's influence.

  • 4.2. Guided Workflow & Clarity:

* Logical Grouping: Group related voice characteristics together (e.g., all vocal qualities under one section).

* Tooltips & Explanations: Provide clear, concise tooltips for each slider, dropdown, and advanced setting, explaining what it does and how it affects the voice.

* Example Phrases: Offer suggested text snippets for previewing different emotional ranges or use cases.

* Progressive Disclosure: Initially show essential parameters, with advanced ElevenLabs-specific settings (Stability, Clarity, Style Exaggeration) in a collapsible section to prevent overwhelm.

  • 4.3. Presets & Inspiration:

* Starting Points: Offer a diverse library of pre-designed voice templates (e.g., "Corporate Narrator," "Friendly AI," "Energetic Podcaster") to provide users with a strong starting point.

* User-Generated Presets: Allow users to save their custom voices as new presets, with optional public sharing.

  • 4.4. Save, Share & Manage:

* Auto-Save Functionality: Implement an auto-save draft feature for ongoing voice designs.

* Version Control: For advanced users, consider a simple version history for iterative refinements of a voice.

* Export Options: Allow exporting voice settings or the generated voice model for integration.

  • 4.5. Accessibility:

* Keyboard Navigation: Ensure all interactive elements are navigable via keyboard.

* Screen Reader Compatibility: Use proper ARIA labels and semantic HTML.

* Color Contrast: Adhere to WCAG guidelines for color contrast ratios to ensure readability.

* Scalable Text: Allow for text resizing without breaking layout.

  • 4.6. Error Handling & Guidance:

* Validation: Provide immediate feedback for invalid inputs (e.g., voice name already exists).

* System Status: Clearly communicate when the system is processing a request (e.g., "Generating preview..." loader).

* Help & Support: Link to documentation or support resources for deeper understanding.

By implementing these detailed specifications and UX recommendations, the AI Voice Designer can empower users to create highly customized, professional AI voices with an intuitive and efficient experience.

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);}});}