diff --git a/neode-ui/VIDEO_COMPRESSION_GUIDE.md b/neode-ui/VIDEO_COMPRESSION_GUIDE.md index 3f09e313..c0bc9531 100644 --- a/neode-ui/VIDEO_COMPRESSION_GUIDE.md +++ b/neode-ui/VIDEO_COMPRESSION_GUIDE.md @@ -183,7 +183,7 @@ mv video-intro-compressed.mp4 video-intro.mp4 ## Performance Tips 1. **Preload**: Add `preload="metadata"` to video tag (loads only metadata, not full video) -2. **Poster Image**: Add `poster="/assets/img/bg-4.jpg"` for instant display while loading +2. **Poster Image**: Add `poster="/assets/img/bg-intro.jpg"` for instant display while loading 3. **Lazy Load**: Consider loading video only when user reaches that screen 4. **CDN**: Host video on CDN for faster delivery diff --git a/neode-ui/package.json b/neode-ui/package.json index f1bdb2fe..d19e478b 100644 --- a/neode-ui/package.json +++ b/neode-ui/package.json @@ -16,7 +16,8 @@ "build:production": "NODE_ENV=production vue-tsc -b && vite build --mode production", "preview": "vite preview", "type-check": "vue-tsc --noEmit", - "prebuild": "cp ../../loop-start.mp3 public/assets/audio/ 2>/dev/null || true" + "prebuild": "cp ../../loop-start.mp3 public/assets/audio/ 2>/dev/null || true", + "generate-welcome-speech": "node scripts/generate-welcome-speech.js" }, "dependencies": { "dockerode": "^4.0.9", diff --git a/neode-ui/public/assets/INTRO-ASSETS-REPLACE.md b/neode-ui/public/assets/INTRO-ASSETS-REPLACE.md new file mode 100644 index 00000000..0a2ff064 --- /dev/null +++ b/neode-ui/public/assets/INTRO-ASSETS-REPLACE.md @@ -0,0 +1,82 @@ +# Replace Intro & Dashboard Backgrounds + +To change the intro splash and dashboard tab backgrounds **without touching any code**, overwrite these files with your own assets. Use the exact names and locations below. + +**Location:** All images go in `neode-ui/public/assets/img/` +**Format:** JPG recommended. Portrait or landscape; they use `background-size: cover` and `center center`. + +--- + +## Intro Background + +| Filename | Used for | +|----------|----------| +| **`bg-intro.jpg`** | Intro splash (alien typing + video poster + fallback), Dashboard default | + +--- + +## Intro Video + +| Filename | Where | Used for | +|----------|-------|----------| +| **`video-intro.mp4`** | `neode-ui/public/assets/video/` | Welcome Noderunner + logo, onboarding, login | + +**Format:** MP4 (H.264). Keep under ~5MB for web. See `VIDEO_COMPRESSION_GUIDE.md` for optimization. + +--- + +## Dashboard Tab Backgrounds + +| Filename | Tab | +|----------|-----| +| **`bg-home.jpg`** | Home | +| **`bg-web5.jpg`** | Web5 | +| **`bg-network.jpg`** | Server / Network | +| **`bg-settings.jpg`** | Settings | +| **`bg-myapps.jpg`** | My Apps | +| **`bg-appstore.jpg`** | App Store / Marketplace | +| **`bg-cloud.jpg`** | Cloud | +| **`bg-intro.jpg`** | Default (also intro) | +| **`bg-intro-3.jpg`** | Alternate layer during transitions | + +--- + +## Intro Flow Backgrounds (onboarding) + +| Filename | Used for | +|----------|----------| +| **`bg-intro-1.jpg`** | Onboarding done, login | +| **`bg-intro-2.jpg`** | Onboarding verify | +| **`bg-intro-3.jpg`** | Onboarding path, dashboard transition layer | +| **`bg-intro-4.jpg`** | Onboarding options | +| **`bg-intro-5.jpg`** | Onboarding did | +| **`bg-intro-6.jpg`** | Onboarding backup | + +--- + +## Quick Reference + +| Asset | Full path | +|-------|-----------| +| Intro image | `neode-ui/public/assets/img/bg-intro.jpg` | +| Intro video | `neode-ui/public/assets/video/video-intro.mp4` | +| Home | `neode-ui/public/assets/img/bg-home.jpg` | +| Web5 | `neode-ui/public/assets/img/bg-web5.jpg` | +| Network | `neode-ui/public/assets/img/bg-network.jpg` | +| Settings | `neode-ui/public/assets/img/bg-settings.jpg` | +| My Apps | `neode-ui/public/assets/img/bg-myapps.jpg` | +| App Store | `neode-ui/public/assets/img/bg-appstore.jpg` | +| Cloud | `neode-ui/public/assets/img/bg-cloud.jpg` | +| Default | `neode-ui/public/assets/img/bg-intro.jpg` | +| Transition | `neode-ui/public/assets/img/bg-intro-3.jpg` | +| Intro 1–6 | `neode-ui/public/assets/img/bg-intro-1.jpg` … `bg-intro-6.jpg` | + +--- + +## Steps to Replace + +1. Put your images in `neode-ui/public/assets/img/` with the exact filenames above. +2. Put your video in `neode-ui/public/assets/video/video-intro.mp4`. +3. Run `npm run build` (or deploy) so the new assets are included. + +No code changes required. diff --git a/neode-ui/public/assets/audio/README-welcome-speech.md b/neode-ui/public/assets/audio/README-welcome-speech.md new file mode 100644 index 00000000..1b270163 --- /dev/null +++ b/neode-ui/public/assets/audio/README-welcome-speech.md @@ -0,0 +1,23 @@ +# Welcome Noderunner Speech + +The intro plays a sci-fi female voice saying "Welcome Noderunner" as the text types in. + +## Generate the audio (ElevenLabs) + +1. Get a free API key at [elevenlabs.io](https://elevenlabs.io) (free tier: 10k chars/month) +2. Run: + ```bash + cd neode-ui + ELEVENLABS_API_KEY=your_key npm run generate-welcome-speech + ``` +3. Commit `welcome-noderunner.mp3` to the repo + +## Custom sci-fi voice + +Browse [ElevenLabs Voice Library](https://elevenlabs.io/voice-library) and search for "sci-fi", "AI", "robot", or "character". Copy the voice ID from the URL or voice settings, then: + +```bash +ELEVENLABS_API_KEY=your_key ELEVENLABS_VOICE_ID=voice_id npm run generate-welcome-speech +``` + +Recommended: "The Digital Oracle", "The Friendly AI Assistant", or similar character voices from the Synthetic/Character categories. diff --git a/neode-ui/public/assets/audio/welcome-noderunner.mp3 b/neode-ui/public/assets/audio/welcome-noderunner.mp3 new file mode 100644 index 00000000..bffaabee Binary files /dev/null and b/neode-ui/public/assets/audio/welcome-noderunner.mp3 differ diff --git a/neode-ui/public/assets/img/bg-5.jpg b/neode-ui/public/assets/img/bg-5.jpg deleted file mode 100644 index eed5fda7..00000000 Binary files a/neode-ui/public/assets/img/bg-5.jpg and /dev/null differ diff --git a/neode-ui/public/assets/img/bg-8.jpg b/neode-ui/public/assets/img/bg-8.jpg deleted file mode 100644 index 92c22be3..00000000 Binary files a/neode-ui/public/assets/img/bg-8.jpg and /dev/null differ diff --git a/neode-ui/public/assets/img/bg-appstore.jpg b/neode-ui/public/assets/img/bg-appstore.jpg index 9a100b5a..2a72ee59 100644 Binary files a/neode-ui/public/assets/img/bg-appstore.jpg and b/neode-ui/public/assets/img/bg-appstore.jpg differ diff --git a/neode-ui/public/assets/img/bg-archipelago copy.jpg b/neode-ui/public/assets/img/bg-archipelago copy.jpg deleted file mode 100644 index eed5fda7..00000000 Binary files a/neode-ui/public/assets/img/bg-archipelago copy.jpg and /dev/null differ diff --git a/neode-ui/public/assets/img/bg-cloud.jpg b/neode-ui/public/assets/img/bg-cloud.jpg index eb87bd74..2a72ee59 100644 Binary files a/neode-ui/public/assets/img/bg-cloud.jpg and b/neode-ui/public/assets/img/bg-cloud.jpg differ diff --git a/neode-ui/public/assets/img/bg-home.jpg b/neode-ui/public/assets/img/bg-home.jpg index 9a100b5a..b948e0a9 100644 Binary files a/neode-ui/public/assets/img/bg-home.jpg and b/neode-ui/public/assets/img/bg-home.jpg differ diff --git a/neode-ui/public/assets/img/bg-1.jpg b/neode-ui/public/assets/img/bg-intro-1.jpg similarity index 100% rename from neode-ui/public/assets/img/bg-1.jpg rename to neode-ui/public/assets/img/bg-intro-1.jpg diff --git a/neode-ui/public/assets/img/bg-2.jpg b/neode-ui/public/assets/img/bg-intro-2.jpg similarity index 100% rename from neode-ui/public/assets/img/bg-2.jpg rename to neode-ui/public/assets/img/bg-intro-2.jpg diff --git a/neode-ui/public/assets/img/bg-3.jpg b/neode-ui/public/assets/img/bg-intro-3.jpg similarity index 100% rename from neode-ui/public/assets/img/bg-3.jpg rename to neode-ui/public/assets/img/bg-intro-3.jpg diff --git a/neode-ui/public/assets/img/bg-4.jpg b/neode-ui/public/assets/img/bg-intro-4.jpg similarity index 100% rename from neode-ui/public/assets/img/bg-4.jpg rename to neode-ui/public/assets/img/bg-intro-4.jpg diff --git a/neode-ui/public/assets/img/bg-6.jpg b/neode-ui/public/assets/img/bg-intro-5.jpg similarity index 100% rename from neode-ui/public/assets/img/bg-6.jpg rename to neode-ui/public/assets/img/bg-intro-5.jpg diff --git a/neode-ui/public/assets/img/bg-7.jpg b/neode-ui/public/assets/img/bg-intro-6.jpg similarity index 100% rename from neode-ui/public/assets/img/bg-7.jpg rename to neode-ui/public/assets/img/bg-intro-6.jpg diff --git a/neode-ui/public/assets/img/bg-intro.jpg b/neode-ui/public/assets/img/bg-intro.jpg new file mode 100644 index 00000000..5482336b Binary files /dev/null and b/neode-ui/public/assets/img/bg-intro.jpg differ diff --git a/neode-ui/public/assets/img/bg-myapps.jpg b/neode-ui/public/assets/img/bg-myapps.jpg index 6542fba0..5482336b 100644 Binary files a/neode-ui/public/assets/img/bg-myapps.jpg and b/neode-ui/public/assets/img/bg-myapps.jpg differ diff --git a/neode-ui/public/assets/img/bg-network.jpg b/neode-ui/public/assets/img/bg-network.jpg index 196285b3..f474fa1f 100644 Binary files a/neode-ui/public/assets/img/bg-network.jpg and b/neode-ui/public/assets/img/bg-network.jpg differ diff --git a/neode-ui/public/assets/img/bg-settings.jpg b/neode-ui/public/assets/img/bg-settings.jpg index 48a686d4..a55d28f4 100644 Binary files a/neode-ui/public/assets/img/bg-settings.jpg and b/neode-ui/public/assets/img/bg-settings.jpg differ diff --git a/neode-ui/public/assets/img/bg-web5.jpg b/neode-ui/public/assets/img/bg-web5.jpg index cdd3f468..fa9f4bc7 100644 Binary files a/neode-ui/public/assets/img/bg-web5.jpg and b/neode-ui/public/assets/img/bg-web5.jpg differ diff --git a/neode-ui/public/assets/video/video-intro.mp4 b/neode-ui/public/assets/video/video-intro.mp4 index 369bbda3..7ed41070 100644 Binary files a/neode-ui/public/assets/video/video-intro.mp4 and b/neode-ui/public/assets/video/video-intro.mp4 differ diff --git a/neode-ui/scripts/generate-welcome-speech.js b/neode-ui/scripts/generate-welcome-speech.js new file mode 100644 index 00000000..e7a360bb --- /dev/null +++ b/neode-ui/scripts/generate-welcome-speech.js @@ -0,0 +1,77 @@ +#!/usr/bin/env node +/** + * Generate "Welcome Noderunner" speech using ElevenLabs AI voice. + * Slower, softer, sci-fi style with reverb/echo effects. + * + * Usage: + * ELEVENLABS_API_KEY=your_key node scripts/generate-welcome-speech.js + * + * Optional voice ID (browse https://elevenlabs.io/voice-library/sensual): + * ELEVENLABS_VOICE_ID=voice_id node scripts/generate-welcome-speech.js + */ + +import { writeFileSync, mkdirSync, readFileSync, unlinkSync } from 'fs' +import { dirname, join } from 'path' +import { fileURLToPath } from 'url' +import { execSync } from 'child_process' + +const __dirname = dirname(fileURLToPath(import.meta.url)) + +const API_KEY = process.env.ELEVENLABS_API_KEY +// Sarah - mature, reassuring, confident female (softer than Rachel) +const VOICE_ID = process.env.ELEVENLABS_VOICE_ID || 'EXAVITQu4vr4xnSDxMaL' +const OUTPUT_PATH = join(__dirname, '../public/assets/audio/welcome-noderunner.mp3') +const RAW_PATH = join(__dirname, '../public/assets/audio/welcome-noderunner-raw.mp3') + +if (!API_KEY) { + console.error('Set ELEVENLABS_API_KEY (get a free key at elevenlabs.io)') + process.exit(1) +} + +// Slower (0.78), softer (higher stability 0.65), more expressive (style 0.6) +const res = await fetch( + `https://api.elevenlabs.io/v1/text-to-speech/${VOICE_ID}?output_format=mp3_44100_128`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'xi-api-key': API_KEY, + }, + body: JSON.stringify({ + text: 'Welcome Noderunner', + model_id: 'eleven_multilingual_v2', + voice_settings: { + stability: 0.65, + similarity_boost: 0.8, + style: 0.6, + use_speaker_boost: true, + speed: 0.7, + }, + }), + } +) + +if (!res.ok) { + const err = await res.text() + console.error('ElevenLabs API error:', res.status, err) + process.exit(1) +} + +const buf = Buffer.from(await res.arrayBuffer()) +mkdirSync(dirname(OUTPUT_PATH), { recursive: true }) +writeFileSync(RAW_PATH, buf) + +// Add sci-fi reverb: dense short delays that blend (no distinct echo) +try { + execSync( + `ffmpeg -y -i "${RAW_PATH}" -af "aecho=0.6:0.15:25|45|70:0.55|0.45|0.35,highpass=f=80,equalizer=f=4000:t=q:w=1:g=-1" -q:a 2 "${OUTPUT_PATH}" 2>/dev/null`, + { stdio: 'pipe' } + ) + unlinkSync(RAW_PATH) +} catch { + writeFileSync(OUTPUT_PATH, buf) + try { unlinkSync(RAW_PATH) } catch {} +} + +console.log('Generated:', OUTPUT_PATH) +console.log('Add this file to git and deploy.') diff --git a/neode-ui/src/components/SplashScreen.vue b/neode-ui/src/components/SplashScreen.vue index 79eac0b0..2212f2b2 100644 --- a/neode-ui/src/components/SplashScreen.vue +++ b/neode-ui/src/components/SplashScreen.vue @@ -12,14 +12,14 @@ muted playsinline preload="auto" - poster="/assets/img/bg-4.jpg" + poster="/assets/img/bg-intro.jpg" >
-

- Tap to start -

+
+ + Enter the Exit + + +
@@ -121,7 +126,8 @@