adding the first version of the presentation and the initial attempt at the .meetings script
This commit is contained in:
itsamejms
@@ -0,0 +1,4 @@
|
||||
*.mp3
|
||||
*.bin
|
||||
.DS_Store
|
||||
*.wav
|
||||
@@ -0,0 +1,4 @@
|
||||
STT_ENGINE=whisper
|
||||
OLLAMA_MODEL=llama3.1:8b
|
||||
THREADS=4
|
||||
STT_MODEL=/Users/jamestwose/Coding/ledex-demo/.meetings/models/ggml-small.en.bin
|
||||
@@ -1 +1,8 @@
|
||||
## The local AI demo for LEDEX Events
|
||||
|
||||
Tools used:
|
||||
- [pi](https://pi.dev)
|
||||
|
||||
## Demos
|
||||
- Sentiment analysis of reviews + learning points
|
||||
- Meeting recording + summarization + action points
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
node_modules/
|
||||
build/
|
||||
dist/
|
||||
coverage/
|
||||
.DS_Store
|
||||
*.log
|
||||
.env*
|
||||
!.env.example
|
||||
@@ -0,0 +1 @@
|
||||
## Local AI presentation for LEDEX Portimao 2026
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Local AI Presentation</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Local AI Presentation",
|
||||
"description": "A responsive Sovereign/Cyber presentation carousel on Local AI for Business.",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
Generated
+3964
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "local-ai-presentation",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port=5173 --host=0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"clean": "rm -rf dist server.js",
|
||||
"lint": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^4.21.2",
|
||||
"lucide-react": "^0.546.0",
|
||||
"motion": "^12.23.24",
|
||||
"react": "^19.0.1",
|
||||
"react-dom": "^19.0.1",
|
||||
"vite": "^6.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.21",
|
||||
"@types/node": "^22.14.0",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"esbuild": "^0.25.0",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { synth } from './utils/audioSynth';
|
||||
import { SLIDES } from './data/slides';
|
||||
import { GoalType, BudgetType } from './types';
|
||||
|
||||
// Slide components
|
||||
import Slide1Title from './components/slides/Slide1Title';
|
||||
import Slide2CloudParadox from './components/slides/Slide2CloudParadox';
|
||||
import Slide3LocalAIStack from './components/slides/Slide3LocalAIStack';
|
||||
import Slide4Quantization from './components/slides/Slide4Quantization';
|
||||
import Slide5Pipelines from './components/slides/Slide5Pipelines';
|
||||
import Slide6HardwareMatrix from './components/slides/Slide6HardwareMatrix';
|
||||
import Slide7BuyersGuide from './components/slides/Slide7BuyersGuide';
|
||||
import Slide8ROI from './components/slides/Slide8ROI';
|
||||
import Slide9OfflineDemo from './components/slides/Slide9OfflineDemo';
|
||||
|
||||
// Layout components
|
||||
import ControlBar from './components/layout/ControlBar';
|
||||
|
||||
export default function App() {
|
||||
const [currentSlide, setCurrentSlide] = useState<number>(0);
|
||||
const [direction, setDirection] = useState<number>(1);
|
||||
const [isAutoplay, setIsAutoplay] = useState<boolean>(false);
|
||||
const [soundEnabled, setSoundEnabled] = useState<boolean>(false);
|
||||
|
||||
// Shared state for cross-slide communication
|
||||
const [selectedGoal, setSelectedGoal] = useState<GoalType>('agents');
|
||||
const [procureBudget, setProcureBudget] = useState<BudgetType>('budget');
|
||||
const [toastMessage, setToastMessage] = useState<string | null>(null);
|
||||
|
||||
const autoplayTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const showToast = (msg: string) => {
|
||||
setToastMessage(msg);
|
||||
synth.playBlip();
|
||||
setTimeout(() => {
|
||||
setToastMessage(null);
|
||||
}, 4000);
|
||||
};
|
||||
|
||||
// Sound configuration binding
|
||||
useEffect(() => {
|
||||
synth.enabled = soundEnabled;
|
||||
}, [soundEnabled]);
|
||||
|
||||
// Keyboard navigation
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'ArrowRight') {
|
||||
nextSlide();
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
prevSlide();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [currentSlide]);
|
||||
|
||||
// Autoplay effect
|
||||
useEffect(() => {
|
||||
if (isAutoplay) {
|
||||
autoplayTimerRef.current = setInterval(() => {
|
||||
setDirection(1);
|
||||
setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
|
||||
synth.playSlideChange();
|
||||
}, 7000);
|
||||
} else {
|
||||
if (autoplayTimerRef.current) {
|
||||
clearInterval(autoplayTimerRef.current);
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
|
||||
};
|
||||
}, [isAutoplay]);
|
||||
|
||||
const nextSlide = () => {
|
||||
setDirection(1);
|
||||
setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
|
||||
synth.playSlideChange();
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
setDirection(-1);
|
||||
setCurrentSlide((prev) => (prev - 1 + SLIDES.length) % SLIDES.length);
|
||||
synth.playSlideChange();
|
||||
};
|
||||
|
||||
const jumpToSlide = (index: number) => {
|
||||
setDirection(index > currentSlide ? 1 : -1);
|
||||
setCurrentSlide(index);
|
||||
synth.playSlideChange();
|
||||
};
|
||||
|
||||
// Frame motion sliding definition
|
||||
const slideVariants = {
|
||||
enter: (dir: number) => ({
|
||||
x: dir > 0 ? 300 : -300,
|
||||
opacity: 0,
|
||||
scale: 0.98
|
||||
}),
|
||||
center: {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: {
|
||||
x: { type: 'spring' as const, stiffness: 220, damping: 24 },
|
||||
opacity: { duration: 0.25 },
|
||||
scale: { duration: 0.3 }
|
||||
}
|
||||
},
|
||||
exit: (dir: number) => ({
|
||||
x: dir < 0 ? 300 : -300,
|
||||
opacity: 0,
|
||||
scale: 0.98,
|
||||
transition: {
|
||||
x: { duration: 0.25 },
|
||||
opacity: { duration: 0.2 }
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// Render current slide content
|
||||
const renderSlide = () => {
|
||||
switch (currentSlide) {
|
||||
case 0:
|
||||
return <Slide1Title />;
|
||||
case 1:
|
||||
return <Slide2CloudParadox />;
|
||||
case 2:
|
||||
return <Slide3LocalAIStack />;
|
||||
case 3:
|
||||
return <Slide4Quantization />;
|
||||
case 4:
|
||||
return <Slide5Pipelines showToast={showToast} />;
|
||||
case 5:
|
||||
return <Slide6HardwareMatrix
|
||||
selectedGoal={selectedGoal}
|
||||
onGoalChange={setSelectedGoal}
|
||||
procureBudget={procureBudget}
|
||||
onBudgetChange={setProcureBudget}
|
||||
/>;
|
||||
case 6:
|
||||
return <Slide7BuyersGuide
|
||||
showToast={showToast}
|
||||
selectedGoal={selectedGoal}
|
||||
procureBudget={procureBudget}
|
||||
onGoalChange={setSelectedGoal}
|
||||
onBudgetChange={setProcureBudget}
|
||||
/>;
|
||||
case 7:
|
||||
return <Slide8ROI
|
||||
selectedGoal={selectedGoal}
|
||||
procureBudget={procureBudget}
|
||||
showToast={showToast}
|
||||
/>;
|
||||
case 8:
|
||||
return <Slide9OfflineDemo showToast={showToast} />;
|
||||
default:
|
||||
return <Slide1Title />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="sovereign-app" className="min-h-screen bg-slate-950 text-slate-100 selection:bg-emerald-500 selection:text-slate-950 flex flex-col justify-between p-4 sm:p-6 md:p-8 relative overflow-hidden cyber-grid font-sans">
|
||||
|
||||
{/* Dynamic scanline overlay */}
|
||||
<div className="absolute inset-0 scanline pointer-events-none opacity-20 z-10" />
|
||||
|
||||
{/* Background radial gradient glow */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-emerald-500/5 blur-[120px] pointer-events-none" />
|
||||
|
||||
{/* CENTRAL CAROUSEL CONTAINER */}
|
||||
<main className="w-full max-w-7xl mx-auto my-6 sm:my-8 flex-1 flex flex-col justify-center items-center z-20">
|
||||
|
||||
{/* Main Console Board Frame */}
|
||||
<div className="w-full bg-slate-900/40 border border-slate-800/80 rounded-xl relative overflow-hidden flex flex-col backdrop-blur-md cyber-glow shadow-2xl">
|
||||
|
||||
{/* High-tech edge detail bracket and scan bar */}
|
||||
<div className="absolute top-0 inset-x-0 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/20 to-transparent" />
|
||||
<div className="absolute left-0 inset-y-0 w-[1px] bg-gradient-to-b from-transparent via-emerald-500/10 to-transparent" />
|
||||
|
||||
{/* Console Top Info Segment */}
|
||||
<div className="px-4 py-2 bg-slate-900/80 border-b border-slate-800/80 flex items-center justify-between font-mono text-[10px] text-slate-500">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* <span className="text-emerald-500/70 font-bold">▶ INDEX_READOUT // SEC_0{currentSlide + 1}</span>
|
||||
<span className="hidden sm:inline">|</span>
|
||||
<span className="hidden sm:inline">GRID_COORDINATES: CL-517 // EN-891</span> */}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[9px] px-2 py-0.5 rounded bg-slate-950 text-slate-400 border border-slate-800/80">{SLIDES[currentSlide].category}</span>
|
||||
<span className="font-bold tracking-widest">0{currentSlide + 1} // 0{SLIDES.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PRIMARY ANIMATED CAROUSEL VIEWPORTS */}
|
||||
<div className="relative min-h-[480px] sm:min-h-[520px] md:min-h-[580px] p-6 sm:p-8 md:p-12 overflow-hidden flex flex-col justify-center">
|
||||
|
||||
<AnimatePresence mode="wait" custom={direction}>
|
||||
<motion.div
|
||||
key={currentSlide}
|
||||
custom={direction}
|
||||
variants={slideVariants}
|
||||
initial="enter"
|
||||
animate="center"
|
||||
exit="exit"
|
||||
className="w-full h-full flex flex-col justify-between"
|
||||
>
|
||||
{renderSlide()}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
|
||||
{/* LOWER CONSOLE CONTROL BAR */}
|
||||
<ControlBar
|
||||
currentSlide={currentSlide}
|
||||
isAutoplay={isAutoplay}
|
||||
onPrevSlide={prevSlide}
|
||||
onNextSlide={nextSlide}
|
||||
onJumpToSlide={jumpToSlide}
|
||||
onToggleAutoplay={() => setIsAutoplay(!isAutoplay)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{/* Toast Notification */}
|
||||
{toastMessage && (
|
||||
<div className="fixed bottom-8 right-8 bg-emerald-500 text-slate-950 px-4 py-3 rounded-lg font-mono text-xs font-bold shadow-[0_0_20px_rgba(16,185,129,0.4)] z-50 animate-in fade-in slide-in-from-bottom-4">
|
||||
{toastMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sound toggle button (optional feature) */}
|
||||
{/* <button
|
||||
onClick={() => setSoundEnabled(!soundEnabled)}
|
||||
className="fixed top-4 right-4 p-2 rounded-lg bg-slate-900/80 border border-slate-800 text-slate-400 hover:text-emerald-400 transition-colors z-50"
|
||||
title={soundEnabled ? 'Disable sound effects' : 'Enable sound effects'}
|
||||
>
|
||||
{soundEnabled ? '🔊' : '🔇'}
|
||||
</button> */}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import { ChevronLeft, ChevronRight, Play, Pause } from 'lucide-react';
|
||||
import { SLIDES } from '../../data/slides';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface ControlBarProps {
|
||||
currentSlide: number;
|
||||
isAutoplay: boolean;
|
||||
onPrevSlide: () => void;
|
||||
onNextSlide: () => void;
|
||||
onJumpToSlide: (index: number) => void;
|
||||
onToggleAutoplay: () => void;
|
||||
}
|
||||
|
||||
export default function ControlBar({
|
||||
currentSlide,
|
||||
isAutoplay,
|
||||
onPrevSlide,
|
||||
onNextSlide,
|
||||
onJumpToSlide,
|
||||
onToggleAutoplay
|
||||
}: ControlBarProps) {
|
||||
|
||||
const handleElementClick = () => synth.playClick();
|
||||
|
||||
return (
|
||||
<footer className="px-4 py-3 sm:py-4 bg-slate-900/80 border-t border-slate-800/80 flex flex-col sm:flex-row items-center justify-between gap-4 font-mono z-30">
|
||||
<div className="flex items-center gap-1.5 text-slate-500 text-[10px] order-3 sm:order-1">
|
||||
<span className="px-1.5 py-0.5 rounded bg-slate-950 border border-slate-800 text-[9px]">←</span>
|
||||
<span className="px-1.5 py-0.5 rounded bg-slate-950 border border-slate-800 text-[9px]">→</span>
|
||||
<span className="hidden sm:inline font-sans text-[10px]">keys to navigate</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 order-1 sm:order-2">
|
||||
{SLIDES.map((slide, idx) => (
|
||||
<button
|
||||
key={slide.id}
|
||||
onClick={() => {
|
||||
synth.playClick();
|
||||
onJumpToSlide(idx);
|
||||
}}
|
||||
className={`relative w-2 h-2 rounded-full cursor-pointer transition-all duration-300 ${
|
||||
currentSlide === idx
|
||||
? 'bg-emerald-400 w-6 shadow-[0_0_8px_rgba(16,185,129,0.5)]'
|
||||
: 'bg-slate-700 hover:bg-slate-500'
|
||||
}`}
|
||||
title={`Jump to slide ${slide.id}: ${slide.title}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 order-2 sm:order-3 w-full sm:w-auto justify-between sm:justify-start">
|
||||
<button
|
||||
onClick={() => {
|
||||
handleElementClick();
|
||||
onToggleAutoplay();
|
||||
}}
|
||||
className={`px-3 py-1.5 rounded border text-[10px] flex items-center gap-1.5 cursor-pointer transition-all duration-150 ${
|
||||
isAutoplay
|
||||
? 'border-emerald-500/40 bg-emerald-950/20 text-emerald-400'
|
||||
: 'border-slate-800 bg-slate-950 text-slate-400 hover:text-slate-300 hover:border-slate-700'
|
||||
}`}
|
||||
title="Autoplay transitions through slides"
|
||||
>
|
||||
{isAutoplay ? <Pause className="w-3 h-3 text-emerald-400 animate-pulse" /> : <Play className="w-3 h-3" />}
|
||||
<span>{isAutoplay ? 'AUTOPLAY: ON' : 'AUTOPLAY: OFF'}</span>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
synth.playClick();
|
||||
onPrevSlide();
|
||||
}}
|
||||
className="px-3.5 py-1.5 rounded border border-slate-800 bg-slate-950 text-slate-300 text-[10px] font-bold hover:border-slate-700 hover:text-white hover:bg-slate-900 cursor-pointer transition-all flex items-center gap-1"
|
||||
>
|
||||
<ChevronLeft className="w-3.5 h-3.5" />
|
||||
<span>BACK</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
synth.playClick();
|
||||
onNextSlide();
|
||||
}}
|
||||
className="px-3.5 py-1.5 rounded border border-emerald-500 bg-emerald-500 text-slate-950 text-[10px] font-black tracking-wide hover:opacity-90 hover:shadow-[0_0_10px_rgba(16,185,129,0.3)] cursor-pointer transition-all flex items-center gap-1"
|
||||
>
|
||||
<span>{currentSlide === SLIDES.length - 1 ? 'REPLAY' : 'NEXT'}</span>
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { motion } from 'motion/react';
|
||||
import { Cpu } from 'lucide-react';
|
||||
|
||||
export default function Slide1Title() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center text-center py-6 sm:py-10 max-w-3xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.1, duration: 0.5 }}
|
||||
className="relative mb-10"
|
||||
>
|
||||
<div className="w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-emerald-500/15 border-dashed flex items-center justify-center animate-[spin_40s_linear_infinite]" />
|
||||
<div className="absolute inset-2 rounded-full border border-emerald-500/30 flex items-center justify-center animate-[spin_20s_linear_infinite_reverse]" />
|
||||
<div className="absolute inset-4 rounded-full border-2 border-emerald-500/60 border-t-transparent border-b-transparent flex items-center justify-center animate-[spin_8s_linear_infinite]" />
|
||||
<div className="absolute inset-0 m-auto w-12 h-12 rounded-full bg-emerald-950/40 border border-emerald-500/50 flex items-center justify-center">
|
||||
<Cpu className="w-5 h-5 text-emerald-400 animate-pulse" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<p className="text-emerald-500 font-mono text-xs sm:text-sm tracking-widest uppercase font-bold text-glow mb-4">
|
||||
INTRODUCTION
|
||||
</p>
|
||||
|
||||
<h1 className="font-display font-extrabold text-3xl sm:text-4xl md:text-5xl lg:text-5xl text-white tracking-tight leading-tight uppercase font-glow mb-5">
|
||||
The Sovereign Business Engine
|
||||
</h1>
|
||||
|
||||
<div className="h-[2px] w-24 bg-gradient-to-r from-transparent via-emerald-500 to-transparent mb-6" />
|
||||
|
||||
<p className="text-slate-400 font-sans text-base sm:text-lg md:text-xl font-light leading-relaxed max-w-xl">
|
||||
Unlock Secure, Zero-Cost Local AI for Algarve Entrepreneurs, Nomads & Content Creators
|
||||
</p>
|
||||
|
||||
<div className="mt-12 flex flex-wrap gap-3 font-mono text-[10px] text-slate-400 justify-center">
|
||||
<span className="px-3 py-1.5 rounded-full bg-slate-950 border border-emerald-900/30">✓ PRIVATE INTEL</span>
|
||||
<span className="px-3 py-1.5 rounded-full bg-slate-950 border border-emerald-900/30">✓ DECENTRALISED</span>
|
||||
<span className="px-3 py-1.5 rounded-full bg-slate-950 border border-emerald-900/30">✓ 0% SAAS TRANSACTION</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useState } from 'react';
|
||||
import { Info } from 'lucide-react';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface ParadoxCard {
|
||||
title: string;
|
||||
desc: string;
|
||||
detail: string;
|
||||
alternative: string;
|
||||
color: string;
|
||||
tag: string;
|
||||
}
|
||||
|
||||
const paradoxCards: ParadoxCard[] = [
|
||||
{
|
||||
title: "Client Data Leaks",
|
||||
desc: "Privacy Risk",
|
||||
detail: "Inputting client names, email campaigns, or proprietary concepts online sends delicate parameters straight to external tech servers.",
|
||||
alternative: "Complete Sandboxed Privacy. No outbound internet transfers, keeping secret client details locked safely inside your laptop.",
|
||||
color: "from-rose-500/10 to-rose-600/5 border-rose-950/40 text-rose-400",
|
||||
tag: "DATA RISK"
|
||||
},
|
||||
{
|
||||
title: "Subscription Taxes",
|
||||
desc: "Licensing Cost",
|
||||
detail: "Paying $20–$40 per person every single month creates heavy baseline overheads for growing digital agencies or self-starters.",
|
||||
alternative: "Zero-Bill Scale. Run identical models on modern laptops with zero cumulative licensing bills or user caps.",
|
||||
color: "from-amber-500/10 to-amber-600/5 border-amber-950/40 text-amber-400",
|
||||
tag: "CASH BURN"
|
||||
},
|
||||
{
|
||||
title: "Wi-Fi Dependencies",
|
||||
desc: "Broadband Risks",
|
||||
detail: "Spotty beach Wi-Fi, hotel dropouts, or cafe broadband failures freeze active cloud access, instantly stalling content work.",
|
||||
alternative: "100% Offline Power. Work continuously from the beach, a rural guest country house, or a transit plane in ultimate peace.",
|
||||
color: "from-orange-500/10 to-orange-600/5 border-orange-950/40 text-orange-400",
|
||||
tag: "OFFLINE DOWNTIME"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Slide2CloudParadox() {
|
||||
const [selectedParadox, setSelectedParadox] = useState<number | null>(null);
|
||||
|
||||
const handleCardClick = (idx: number) => {
|
||||
synth.playClick();
|
||||
setSelectedParadox(selectedParadox === idx ? null : idx);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-6xl mx-auto w-full">
|
||||
<div className="lg:col-span-4 flex flex-col justify-center">
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// THE CONUNDRUM</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
The Cloud Expense Trap
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans text-sm sm:text-base leading-relaxed mb-6">
|
||||
Relying on big-tech online platforms invites data leakage risks, builds high monthly software subscriptions, and depends on having perfect Internet. Tap each risk card to unlock your secure local remedy.
|
||||
</p>
|
||||
|
||||
<div className="hidden lg:flex items-center gap-2 border border-slate-800/80 rounded px-3 py-1.5 bg-slate-900/50 text-[10px] font-mono text-slate-500">
|
||||
<Info className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
|
||||
<span>Interactive: Click each card to reveal the offline local alternative.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-3 gap-4 w-full h-auto">
|
||||
{paradoxCards.map((card, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
id={`paradox-card-${idx}`}
|
||||
onClick={() => handleCardClick(idx)}
|
||||
className={`group relative p-5 rounded-lg border bg-gradient-to-b transition-all duration-300 cursor-pointer text-left flex flex-col justify-between min-h-[220px] md:min-h-[265px] ${
|
||||
selectedParadox === idx
|
||||
? 'border-emerald-500/65 bg-slate-950/80 shadow-[0_0_15px_rgba(16,185,129,0.15)]'
|
||||
: `border-slate-800/80 bg-slate-900/60 hover:border-slate-700 hover:bg-slate-900/90`
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<span className="font-mono text-[9px] font-bold text-slate-500">PARADOX_0{idx + 1}</span>
|
||||
<span className={`font-mono text-[8px] font-semibold px-2 py-0.5 rounded ${
|
||||
selectedParadox === idx ? 'bg-emerald-950/40 text-emerald-400' : 'bg-slate-950/60 text-slate-400'
|
||||
}`}>
|
||||
{selectedParadox === idx ? 'SOVEREIGN_REMEDY' : card.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-display font-medium text-white text-base tracking-tight mb-2">
|
||||
{selectedParadox === idx ? 'Antidote' : card.title}
|
||||
</h3>
|
||||
|
||||
<p className="font-sans text-[12px] leading-relaxed text-slate-400">
|
||||
{selectedParadox === idx ? card.alternative : card.detail}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-850 justify-self-end mt-4">
|
||||
<span className="font-mono text-[9px] text-emerald-500 group-hover:underline flex items-center gap-1.5">
|
||||
{selectedParadox === idx ? '← SHOW RISK METRIC' : '⚡ REVEAL LOCAL ANTIDOTE'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useState } from 'react';
|
||||
import { Layers } from 'lucide-react';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface StackLayer {
|
||||
level: number;
|
||||
label: string;
|
||||
desc: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const stackLayers: StackLayer[] = [
|
||||
{
|
||||
level: 3,
|
||||
label: "Visual Desktop Apps (The App)",
|
||||
desc: "Simple visual programs like AnythingLLM or LM Studio designed for easy point-and-click work.",
|
||||
color: "from-emerald-400/20 to-emerald-500/10 border-emerald-500/35 hover:scale-[1.01]"
|
||||
},
|
||||
{
|
||||
level: 2,
|
||||
label: "Open-Weights Models (The Brain)",
|
||||
desc: "Highly optimized intelligence units (Llama, Mistral, Qwen) saved directly to your computer.",
|
||||
color: "from-emerald-600/15 to-emerald-700/5 border-emerald-500/25 hover:scale-[1.01]"
|
||||
},
|
||||
{
|
||||
level: 1,
|
||||
label: "On-Device Processing (The Hardware)",
|
||||
desc: "The fast processor chips or built-in system memory already in your office computer.",
|
||||
color: "from-emerald-800/10 to-slate-900/40 border-slate-700/60 hover:scale-[1.01]"
|
||||
}
|
||||
];
|
||||
|
||||
const layerDetails: Record<number, string> = {
|
||||
3: "FRIENDLY VISUAL DESKTOP APPS: Point-and-click programs that look and feel just like ChatGPT. Supports dragging files for secure offline searches, organizing text templates, and polishing emails. Popular: LM Studio, AnythingLLM, Jan.",
|
||||
2: "INDEPENDENT FREE BRAINS: Highly capable modular model weights that you download once for free. Ranging in size depending on task complexity, they execute completely locally on your computer with zero monthly limits.",
|
||||
1: "YOUR BUILT-IN SILICON: The physical components already inside your device. Modern Apple MacBook silicon or standard business graphics processors calculate AI answers in fractions of a second."
|
||||
};
|
||||
|
||||
export default function Slide3LocalAIStack() {
|
||||
const [activeStackLayer, setActiveStackLayer] = useState<number>(1);
|
||||
|
||||
const handleLayerClick = (level: number) => {
|
||||
synth.playClick();
|
||||
setActiveStackLayer(level);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-6xl mx-auto w-full">
|
||||
<div className="lg:col-span-5 flex flex-col justify-center">
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// COGNITIVE STRUCTURE</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
Your Private AI Workspace
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans text-sm sm:text-base leading-relaxed mb-6">
|
||||
Running secure local AI is straightforward and divides into three simple, clear levels. Click any layer below to see how friendly desktop apps link directly to your laptop's power.
|
||||
</p>
|
||||
|
||||
<div className="bg-slate-950/40 border border-emerald-950/30 rounded-lg p-5 font-mono text-left">
|
||||
<div className="flex items-center gap-2 text-emerald-400 text-xs font-bold mb-2">
|
||||
<Layers className="w-4 h-4" />
|
||||
<span>LEVEL_0{activeStackLayer} SUMMARY</span>
|
||||
</div>
|
||||
<p className="text-[12px] leading-relaxed text-slate-300">
|
||||
{layerDetails[activeStackLayer]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 flex flex-col gap-3 items-center justify-center w-full relative">
|
||||
{stackLayers.map((layer) => (
|
||||
<div
|
||||
key={layer.level}
|
||||
id={`stack-layer-${layer.level}`}
|
||||
onClick={() => handleLayerClick(layer.level)}
|
||||
className={`w-full p-5 rounded-lg border text-left cursor-pointer transition-all duration-300 relative ${layer.color} ${
|
||||
activeStackLayer === layer.level
|
||||
? 'border-emerald-400 bg-slate-910/80 shadow-[0_0_20px_rgba(16,185,129,0.2)]'
|
||||
: 'bg-slate-900/40 hover:bg-slate-900/80'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-mono text-[9px] tracking-widest text-emerald-400 font-bold">LEVEL_0{layer.level} SYSTEM LAYER</span>
|
||||
{activeStackLayer === layer.level && (
|
||||
<span className="font-mono text-[9px] text-emerald-400 text-glow flex items-center gap-1 animate-pulse">
|
||||
● SELECTED_RUN
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="font-display font-medium text-white text-base tracking-tight mb-1">
|
||||
{layer.label}
|
||||
</h3>
|
||||
|
||||
<p className="font-sans text-[12px] text-slate-400 leading-relaxed">
|
||||
{layer.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="absolute right-6 top-1/4 bottom-1/4 w-[1px] border-r border-dashed border-emerald-500/20 -z-10 pointer-events-none hidden md:block" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { useState } from 'react';
|
||||
import { QuantLevel } from '../../types';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface QuantOption {
|
||||
level: QuantLevel;
|
||||
label: string;
|
||||
ram: string;
|
||||
intellect: string;
|
||||
speed: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
const quantOptions: QuantOption[] = [
|
||||
{ level: 'FP16', label: 'FP16 Raw', ram: "16 GB", intellect: "100%", speed: "1.0x", desc: "No loss, heavy workload" },
|
||||
{ level: 'Q8_0', label: '8-Bit (Q8)', ram: "8.5 GB", intellect: "99.1%", speed: "1.8x", desc: "Premium, lower RAM" },
|
||||
{ level: 'Q4_K_M', label: '4-Bit (Q4)', ram: "4.8 GB", intellect: "96.2%", speed: "3.2x", desc: "Sovereign sweetspot" },
|
||||
{ level: 'Q2_K', label: '2-Bit (Q2)', ram: "2.9 GB", intellect: "81.3%", speed: "4.5x", desc: "Highly crushed, rapid" }
|
||||
];
|
||||
|
||||
const ramValues: Record<QuantLevel, string> = {
|
||||
'FP16': '16.0 GB',
|
||||
'Q8_0': '8.5 GB',
|
||||
'Q4_K_M': '4.8 GB',
|
||||
'Q2_K': '2.9 GB'
|
||||
};
|
||||
|
||||
const ramPercentages: Record<QuantLevel, string> = {
|
||||
'FP16': '100%',
|
||||
'Q8_0': '53.1%',
|
||||
'Q4_K_M': '30.0%',
|
||||
'Q2_K': '18.1%'
|
||||
};
|
||||
|
||||
const intellectValues: Record<QuantLevel, string> = {
|
||||
'FP16': '100%',
|
||||
'Q8_0': '99.1%',
|
||||
'Q4_K_M': '96.2%',
|
||||
'Q2_K': '81.3%'
|
||||
};
|
||||
|
||||
const speedValues: Record<QuantLevel, { display: string; percent: string }> = {
|
||||
'FP16': { display: '1.0x (Slow)', percent: '22%' },
|
||||
'Q8_0': { display: '1.8x (Fast)', percent: '40%' },
|
||||
'Q4_K_M': { display: '3.2x (Rapid)', percent: '71%' },
|
||||
'Q2_K': { display: '4.5x (Ultrafast)', percent: '100%' }
|
||||
};
|
||||
|
||||
const visualSampling: Record<QuantLevel, string> = {
|
||||
'FP16': '[░░░██████████████████░░░] [Raw-grade maximum detail coordinates - extremely heavy] MAXIMUM_DETAIL',
|
||||
'Q8_0': '[░░░█████████████████░░░░] [Highly accurate - lighter RAM footprint] SAFE_BUDGET',
|
||||
'Q4_K_M': '[░░░░███████████████░░░░░] [Sovereign Sweet Spot - runs ultra fast on any Macbook or PC] SYSTEM_RECOMMENDED',
|
||||
'Q2_K': '[░░░░░░░██████████░░░░░░░] [Crushed data structure - logic levels degraded] REDUCED_LOGIC'
|
||||
};
|
||||
|
||||
export default function Slide4Quantization() {
|
||||
const [quantLevel, setQuantLevel] = useState<QuantLevel>('Q4_K_M');
|
||||
|
||||
const handleQuantClick = (level: QuantLevel) => {
|
||||
synth.playClick();
|
||||
setQuantLevel(level);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-6xl mx-auto w-full">
|
||||
<div className="lg:col-span-5 flex flex-col justify-center">
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// DYNAMIC OPTIMISATION</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
AI Compression: Smart Scaling
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans text-sm leading-relaxed mb-6">
|
||||
<strong>Analogy:</strong> 4K Cinema Raw vs. 1080p Stream. Quantization compresses the model parameters (e.g., 16-bit floats to 4-bit integers), cutting RAM requirements by up to 75% while retaining ~95%+ cognitive fidelity.
|
||||
</p>
|
||||
|
||||
<div className="bg-slate-950/40 border border-slate-800/80 rounded-lg p-4 font-mono text-left">
|
||||
<span className="text-[10px] text-slate-400 block mb-1">SYSTEM INSIGHT</span>
|
||||
<p className="text-[11px] text-slate-400 leading-relaxed">
|
||||
By compressing heavy decimal parameters to integer coordinates, we reduce the speed bottlenecks caused by bandwidth throughput limiters, yielding 3x faster local response feedback directly on simple laptops.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 flex flex-col gap-6 w-full">
|
||||
<div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 sm:p-6 md:p-8 relative">
|
||||
<div className="flex items-center justify-between font-mono text-[10px] text-slate-400 mb-6">
|
||||
<span>INTERACTIVE COMPRESSION SELECTOR</span>
|
||||
<span className="text-emerald-500 font-bold">MODE: {quantLevel}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 mb-8">
|
||||
{quantOptions.map((item) => (
|
||||
<button
|
||||
key={item.level}
|
||||
onClick={() => handleQuantClick(item.level)}
|
||||
className={`p-3 rounded-lg border text-center font-mono cursor-pointer transition-all duration-200 flex flex-col justify-between ${
|
||||
quantLevel === item.level
|
||||
? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 shadow-[0_0_10px_rgba(16,185,129,0.15)]'
|
||||
: 'border-slate-800 bg-slate-900/40 text-slate-400 hover:border-slate-700 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xs font-bold leading-none mb-1">{item.level}</span>
|
||||
<span className="text-[9px] text-slate-500 font-light leading-none">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<div className="p-3 bg-slate-900/80 rounded-lg border border-slate-850">
|
||||
<span className="font-mono text-[9px] text-slate-500 block mb-1 uppercase">RAM footprints</span>
|
||||
<span className="font-display font-medium text-lg text-white">{ramValues[quantLevel]}</span>
|
||||
<div className="w-full bg-slate-950 h-1.5 rounded-full overflow-hidden mt-1 px-0.5 relative">
|
||||
<div className="h-full bg-emerald-500 transition-all duration-300" style={{ width: ramPercentages[quantLevel] }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-slate-900/80 rounded-lg border border-slate-850">
|
||||
<span className="font-mono text-[9px] text-slate-500 block mb-1 uppercase">Intelligence Match</span>
|
||||
<span className="font-display font-medium text-lg text-white">{intellectValues[quantLevel]}</span>
|
||||
<div className="w-full bg-slate-950 h-1.5 rounded-full overflow-hidden mt-1 px-0.5">
|
||||
<div className="h-full bg-emerald-500 transition-all duration-300" style={{ width: intellectValues[quantLevel] }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-slate-900/80 rounded-lg border border-slate-850">
|
||||
<span className="font-mono text-[9px] text-slate-500 block mb-1 uppercase">Output Speedup</span>
|
||||
<span className="font-display font-medium text-lg text-emerald-400">{speedValues[quantLevel].display}</span>
|
||||
<div className="w-full bg-slate-950 h-1.5 rounded-full overflow-hidden mt-1 px-0.5">
|
||||
<div className="h-full bg-emerald-400 transition-all duration-300" style={{ width: speedValues[quantLevel].percent }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-slate-950 rounded border border-slate-850 font-mono text-left relative overflow-hidden">
|
||||
<span className="text-[9px] text-slate-500 block mb-1">VISUAL VECTOR SAMPLING GRAPHICS:</span>
|
||||
<div className="text-[10px] sm:text-xs text-slate-300 tracking-normal break-all select-none">
|
||||
{visualSampling[quantLevel]}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,432 @@
|
||||
import { useState } from 'react';
|
||||
import { RefreshCw, Copy, Brain, Tags, TrendingUp, Mail } from 'lucide-react';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
type PipelineType = 'triage' | 'classifier' | 'leads';
|
||||
|
||||
interface PipelineOption {
|
||||
id: PipelineType;
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const pipelineOptions: PipelineOption[] = [
|
||||
{
|
||||
id: 'triage',
|
||||
label: '📧 EMAIL TRIAGE',
|
||||
icon: <Mail className="w-4 h-4" />,
|
||||
description: 'Auto-categorize & prioritize inbox'
|
||||
},
|
||||
{
|
||||
id: 'classifier',
|
||||
label: '🏷️ CONTENT TAGGER',
|
||||
icon: <Tags className="w-4 h-4" />,
|
||||
description: 'Classify content by type & tone'
|
||||
},
|
||||
{
|
||||
id: 'leads',
|
||||
label: '📊 LEAD SCORER',
|
||||
icon: <TrendingUp className="w-4 h-4" />,
|
||||
description: 'Score & rank sales prospects'
|
||||
}
|
||||
];
|
||||
|
||||
const sampleInputs: Record<PipelineType, string> = {
|
||||
triage: `From: Maria Santos <maria@techstartup.pt>
|
||||
Subject: URGENT - Partnership proposal for AI automation
|
||||
|
||||
Hi team, we're looking to implement local AI across our 50-person marketing agency. Need quote by Friday. Budget: €15k.
|
||||
|
||||
---
|
||||
From: João Pereira <joao@algarvevillas.com>
|
||||
Subject: Re: Villa booking inquiry #4821
|
||||
|
||||
Thank you for the quick response! Can you send availability for July 15-22? 6 guests.
|
||||
|
||||
---
|
||||
From: billing@cloudservice.io
|
||||
Subject: Invoice #8821 - Payment Overdue
|
||||
|
||||
Your account is 30 days past due. Immediate payment required to avoid suspension.`,
|
||||
|
||||
classifier: `POST 1: "Just closed our biggest deal using local AI! No more monthly fees, zero data leaks. Algarve businesses, this is the future! 🚀 #LocalAI #BusinessGrowth"
|
||||
|
||||
POST 2: "New blog: 5 Ways Local AI Transforms Content Workflows in 2025. Read how Portuguese companies save €50k/year by going offline-first."
|
||||
|
||||
POST 3: "Limited offer: Free local AI setup consultation for Faro-based startups. DM for details. Professional, secure, unlimited."`,
|
||||
|
||||
leads: `Company: TechLisbon Solutions | Contact: Ana Costa (CEO) | Need: Company-wide AI deployment | Budget: €50k+ | Timeline: Q3 2025 | Employees: 85
|
||||
|
||||
Company: Algarve Digital Marketing | Contact: Pedro Silva (Founder) | Need: Content automation pipeline | Budget: €8k | Timeline: ASAP | Employees: 12
|
||||
|
||||
Company: Porto E-commerce Hub | Contact: Sofia Mendes (CTO) | Need: Customer support AI agents | Budget: €25k | Timeline: Next quarter | Employees: 45`
|
||||
};
|
||||
|
||||
export default function Slide5Pipelines({ showToast }: { showToast: (msg: string) => void }) {
|
||||
const [selectedPipeline, setSelectedPipeline] = useState<PipelineType>('triage');
|
||||
const [rawText, setRawText] = useState<string>(sampleInputs.triage);
|
||||
const [pipelineProcessing, setPipelineProcessing] = useState<boolean>(false);
|
||||
const [results, setResults] = useState<any[] | null>(null);
|
||||
|
||||
const handlePipelineChange = (type: PipelineType) => {
|
||||
synth.playClick();
|
||||
setSelectedPipeline(type);
|
||||
setRawText(sampleInputs[type]);
|
||||
setResults(null);
|
||||
};
|
||||
|
||||
const executePipeline = () => {
|
||||
synth.playBlip();
|
||||
setPipelineProcessing(true);
|
||||
setResults(null);
|
||||
|
||||
setTimeout(() => {
|
||||
let processedResults: any[] = [];
|
||||
|
||||
if (selectedPipeline === 'triage') {
|
||||
const emails = rawText.split('---').filter(Boolean);
|
||||
processedResults = emails.map((email, idx) => {
|
||||
const lines = email.split('\n');
|
||||
const fromMatch = lines.find(l => l.startsWith('From:'));
|
||||
const subjectMatch = lines.find(l => l.startsWith('Subject:'));
|
||||
const from = fromMatch ? fromMatch.replace('From: ', '').split('<')[0].trim() : 'Unknown';
|
||||
const subject = subjectMatch ? subjectMatch.replace('Subject: ', '') : 'No subject';
|
||||
|
||||
const isUrgent = email.toLowerCase().includes('urgent') || email.toLowerCase().includes('asap');
|
||||
const isBilling = email.toLowerCase().includes('invoice') || email.toLowerCase().includes('payment');
|
||||
const isPartnership = email.toLowerCase().includes('partnership') || email.toLowerCase().includes('proposal');
|
||||
const isSupport = email.toLowerCase().includes('booking') || email.toLowerCase().includes('inquiry');
|
||||
|
||||
let category: 'sales' | 'support' | 'billing' | 'partnership' = 'support';
|
||||
if (isBilling) category = 'billing';
|
||||
else if (isPartnership) category = 'partnership';
|
||||
else if (isUrgent) category = 'sales';
|
||||
|
||||
let priority: 'critical' | 'high' | 'normal' | 'low' = 'normal';
|
||||
if (isUrgent || isBilling) priority = 'critical';
|
||||
else if (isPartnership) priority = 'high';
|
||||
|
||||
let sentiment: 'positive' | 'neutral' | 'negative' = 'neutral';
|
||||
if (email.includes('Thank you') || email.includes('great')) sentiment = 'positive';
|
||||
if (email.includes('Overdue') || email.includes('suspension')) sentiment = 'negative';
|
||||
|
||||
return {
|
||||
id: `EMAIL-${String(idx + 1).padStart(3, '0')}`,
|
||||
sender: from,
|
||||
subject: subject,
|
||||
category,
|
||||
priority,
|
||||
sentiment,
|
||||
actionRequired: priority === 'critical' ? 'Respond within 2 hours' : 'Review within 24 hours'
|
||||
};
|
||||
});
|
||||
} else if (selectedPipeline === 'classifier') {
|
||||
const posts = rawText.split('POST').filter(Boolean);
|
||||
processedResults = posts.map((post, idx) => {
|
||||
const content = post.split('"')[1] || post;
|
||||
const hasEmoji = /[🚀💡📈]/.test(content);
|
||||
const hasHashtag = content.includes('#');
|
||||
const hasLink = content.toLowerCase().includes('read') || content.toLowerCase().includes('blog');
|
||||
const hasOffer = content.toLowerCase().includes('offer') || content.toLowerCase().includes('free');
|
||||
|
||||
let type: 'blog' | 'social' | 'email' | 'ad_copy' = 'social';
|
||||
if (hasLink) type = 'blog';
|
||||
if (hasOffer) type = 'ad_copy';
|
||||
|
||||
let tone: 'professional' | 'casual' | 'persuasive' | 'informative' = 'professional';
|
||||
if (hasEmoji) tone = 'casual';
|
||||
if (hasOffer) tone = 'persuasive';
|
||||
if (type === 'blog') tone = 'informative';
|
||||
|
||||
const keywords: string[] = [];
|
||||
if (content.includes('AI')) keywords.push('AI');
|
||||
if (content.includes('business')) keywords.push('business');
|
||||
if (content.includes('local')) keywords.push('local AI');
|
||||
if (content.includes('Algarve') || content.includes('Portuguese')) keywords.push('Portugal');
|
||||
|
||||
return {
|
||||
id: `CONTENT-${String(idx + 1).padStart(3, '0')}`,
|
||||
content: content.substring(0, 80) + '...',
|
||||
type,
|
||||
tone,
|
||||
targetAudience: type === 'social' ? 'Social media followers' : 'Business decision makers',
|
||||
seoKeywords: keywords.length > 0 ? keywords : ['general']
|
||||
};
|
||||
});
|
||||
} else {
|
||||
const leads = rawText.split('\n\n').filter(Boolean);
|
||||
processedResults = leads.map((lead, idx) => {
|
||||
const parts: Record<string, string> = {};
|
||||
lead.split(' | ').forEach(part => {
|
||||
const [key, value] = part.split(': ').map(s => s.trim());
|
||||
if (key && value) parts[key] = value;
|
||||
});
|
||||
|
||||
const employeeCount = parseInt(parts['Employees'] || '0');
|
||||
const budgetText = parts['Budget'] || '';
|
||||
const budgetValue = parseInt(budgetText.replace(/[^0-9]/g, '')) || 0;
|
||||
const isAsap = parts['Timeline']?.toLowerCase().includes('asap');
|
||||
|
||||
let score = 50;
|
||||
if (employeeCount > 50) score += 20;
|
||||
else if (employeeCount > 20) score += 10;
|
||||
if (budgetValue > 30000) score += 25;
|
||||
else if (budgetValue > 10000) score += 15;
|
||||
if (isAsap) score += 15;
|
||||
|
||||
let fit: 'excellent' | 'good' | 'fair' = 'fair';
|
||||
if (score >= 80) fit = 'excellent';
|
||||
else if (score >= 65) fit = 'good';
|
||||
|
||||
let budget: 'high' | 'medium' | 'low' = 'medium';
|
||||
if (budgetValue > 40000) budget = 'high';
|
||||
else if (budgetValue < 15000) budget = 'low';
|
||||
|
||||
let timeline: 'immediate' | 'this_month' | 'quarterly' = 'quarterly';
|
||||
if (isAsap) timeline = 'immediate';
|
||||
else if (parts['Timeline']?.toLowerCase().includes('month')) timeline = 'this_month';
|
||||
|
||||
return {
|
||||
id: `LEAD-${String(idx + 1).padStart(3, '0')}`,
|
||||
company: parts['Company'] || 'Unknown Company',
|
||||
contact: parts['Contact'] || 'Unknown',
|
||||
score: Math.min(100, score),
|
||||
budget,
|
||||
timeline,
|
||||
fit,
|
||||
nextStep: score >= 80 ? 'Schedule demo this week' : score >= 65 ? 'Send follow-up email' : 'Add to nurture sequence'
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
setResults(processedResults);
|
||||
setPipelineProcessing(false);
|
||||
synth.playBlip();
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
synth.playClick();
|
||||
setRawText(sampleInputs[selectedPipeline]);
|
||||
setResults(null);
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
if (results) {
|
||||
synth.playClick();
|
||||
navigator.clipboard.writeText(JSON.stringify(results, null, 2));
|
||||
showToast("SUCCESS // PIPELINE OUTPUT COPIED TO CLIPBOARD");
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority: string) => {
|
||||
if (priority === 'critical') return 'bg-rose-500/20 text-rose-400 border-rose-500/30';
|
||||
if (priority === 'high') return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
|
||||
if (priority === 'normal') return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
|
||||
return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
|
||||
};
|
||||
|
||||
const getScoreColor = (score: number) => {
|
||||
if (score >= 80) return 'text-emerald-400';
|
||||
if (score >= 65) return 'text-yellow-400';
|
||||
return 'text-orange-400';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-6xl mx-auto w-full">
|
||||
<div className="lg:col-span-4 flex flex-col justify-center text-left">
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// COGNITIVE AUTOMATION</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
Smart Workflow Pipelines
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans text-sm sm:text-base leading-relaxed mb-6">
|
||||
Transform unstructured data into actionable insights. Select a pipeline type and watch local AI extract, categorize, and score your business data in milliseconds.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-3 font-mono text-[11px] text-slate-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-rose-500">✕</span>
|
||||
<span>Manual sorting: 5-10 minutes per item</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-emerald-400">✓</span>
|
||||
<span>Local AI pipeline: ~150ms per batch</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>100% offline - zero data leaves your device</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-8 flex flex-col w-full">
|
||||
<div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 sm:p-6 text-left flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between font-mono text-[10px] text-slate-400 mb-1">
|
||||
<span>INTERACTIVE PIPELINE WORKSHOP</span>
|
||||
<span className="text-emerald-400 font-bold">● LOCAL_ENGINE_ACTIVE</span>
|
||||
</div>
|
||||
|
||||
{/* Pipeline Type Selector */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
{pipelineOptions.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => handlePipelineChange(option.id)}
|
||||
className={`p-3 rounded-lg border text-left cursor-pointer transition-all duration-200 flex flex-col gap-1.5 ${
|
||||
selectedPipeline === option.id
|
||||
? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.15)]'
|
||||
: 'border-slate-800 bg-slate-900/40 text-slate-400 hover:border-slate-700 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{option.icon}
|
||||
<span className="text-[9px] font-bold tracking-tight">{option.label}</span>
|
||||
</div>
|
||||
<span className="text-[8px] font-light leading-tight">{option.description}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-mono text-[9px] text-slate-500 uppercase">Input Data (Editable - Try modifying!):</label>
|
||||
<textarea
|
||||
value={rawText}
|
||||
onChange={(e) => setRawText(e.target.value)}
|
||||
className="bg-slate-900 border border-slate-800/80 rounded p-3 font-mono text-xs text-white h-32 focus:outline-none focus:border-emerald-500 transition-colors custom-scrollbar resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-2.5">
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="px-3.5 py-1.5 rounded font-mono text-[10px] bg-slate-900 text-slate-400 hover:text-slate-200 border border-slate-800 transition-colors"
|
||||
>
|
||||
RESET SAMPLE
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={executePipeline}
|
||||
disabled={pipelineProcessing}
|
||||
className={`px-4 py-1.5 rounded font-mono text-[10px] flex items-center gap-2 cursor-pointer transition-all duration-200 border ${
|
||||
pipelineProcessing
|
||||
? 'bg-emerald-950/20 border-emerald-500/30 text-emerald-500'
|
||||
: 'bg-emerald-500 text-slate-950 border-emerald-400 hover:shadow-[0_0_12px_rgba(16,185,129,0.3)] hover:opacity-90'
|
||||
}`}
|
||||
>
|
||||
<RefreshCw className={`w-3.5 h-3.5 ${pipelineProcessing ? 'animate-spin' : ''}`} />
|
||||
{pipelineProcessing ? 'PROCESSING...' : 'RUN PIPELINE'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Results Display */}
|
||||
<div className="bg-slate-900 rounded border border-slate-850 p-4 shrink-0 min-h-[200px] flex flex-col justify-center">
|
||||
{pipelineProcessing ? (
|
||||
<div className="flex flex-col items-center justify-center py-6 font-mono text-xs text-slate-500">
|
||||
<div className="w-10 h-10 rounded-full border-2 border-t-emerald-500 border-r-transparent border-slate-800 animate-spin mb-4" />
|
||||
<p className="text-emerald-400/80 animate-pulse">RUNNING LOCAL INFERENCE...</p>
|
||||
<p className="text-[10px] mt-1">Extracting patterns • Scoring • Categorizing</p>
|
||||
</div>
|
||||
) : results ? (
|
||||
<div className="w-full flex flex-col gap-3">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="font-mono text-[9px] text-emerald-400">
|
||||
✓ PROCESSED {results.length} ITEMS IN ~150MS
|
||||
</span>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="flex items-center gap-1.5 text-emerald-400 border border-emerald-900/35 bg-slate-950/40 hover:bg-emerald-950/20 px-2 py-0.5 rounded transition-colors text-[9px]"
|
||||
>
|
||||
<Copy className="w-3 h-3" />
|
||||
<span>EXPORT JSON</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto custom-scrollbar">
|
||||
{results.map((item: any, idx) => (
|
||||
<div key={item.id} className="bg-slate-950/50 border border-slate-800/60 rounded p-3 hover:border-emerald-500/30 transition-colors">
|
||||
{selectedPipeline === 'triage' && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<p className="font-sans text-xs font-medium text-white">{item.sender}</p>
|
||||
<p className="font-mono text-[10px] text-slate-400">{item.subject}</p>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<span className={`px-1.5 py-0.5 rounded text-[8px] border ${getPriorityColor(item.priority)}`}>
|
||||
{item.priority.toUpperCase()}
|
||||
</span>
|
||||
<span className="px-1.5 py-0.5 rounded text-[8px] border border-slate-700 bg-slate-800/50 text-slate-400">
|
||||
{item.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className={`text-[9px] ${item.sentiment === 'positive' ? 'text-emerald-400' : item.sentiment === 'negative' ? 'text-rose-400' : 'text-yellow-400'}`}>
|
||||
{item.sentiment === 'positive' ? '☺ Positive' : item.sentiment === 'negative' ? '⚠ Negative' : '○ Neutral'}
|
||||
</span>
|
||||
<span className="font-mono text-[9px] text-slate-500">{item.actionRequired}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedPipeline === 'classifier' && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<p className="font-sans text-xs text-slate-300 italic">"{item.content}"</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="px-1.5 py-0.5 rounded text-[8px] bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
|
||||
{item.type}
|
||||
</span>
|
||||
<span className="px-1.5 py-0.5 rounded text-[8px] bg-blue-500/20 text-blue-400 border border-blue-500/30">
|
||||
{item.tone}
|
||||
</span>
|
||||
<span className="px-1.5 py-0.5 rounded text-[8px] bg-slate-800/50 text-slate-400 border border-slate-700">
|
||||
{item.targetAudience}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{item.seoKeywords.map((kw: string, i: number) => (
|
||||
<span key={i} className="text-[8px] text-emerald-500/70">#{kw}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedPipeline === 'leads' && (
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-sans text-xs font-bold text-white">{item.company}</p>
|
||||
<p className="font-mono text-[10px] text-slate-400">{item.contact}</p>
|
||||
<div className="flex gap-2 text-[9px]">
|
||||
<span className="text-slate-500">Budget: <span className={item.budget === 'high' ? 'text-emerald-400' : 'text-slate-400'}>{item.budget}</span></span>
|
||||
<span className="text-slate-500">Timeline: <span className={item.timeline === 'immediate' ? 'text-emerald-400' : 'text-slate-400'}>{item.timeline.replace('_', ' ')}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-2xl font-bold ${getScoreColor(item.score)}`}>{item.score}</div>
|
||||
<div className="text-[9px] text-slate-500">LEAD SCORE</div>
|
||||
<div className={`text-[9px] mt-1 ${item.fit === 'excellent' ? 'text-emerald-400' : item.fit === 'good' ? 'text-yellow-400' : 'text-orange-400'}`}>
|
||||
{item.fit.toUpperCase()} FIT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center font-mono py-8 text-slate-500">
|
||||
<Brain className="w-12 h-12 mx-auto mb-3 text-slate-600" />
|
||||
<p className="text-xs mb-1">PIPELINE STANDBY</p>
|
||||
<p className="text-[10px] font-sans">Select a pipeline type above and click "RUN PIPELINE" to process data locally.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
import { useState } from 'react';
|
||||
import { Cpu, Sparkles, ArrowRight } from 'lucide-react';
|
||||
import { BudgetType, Slide6Tab, GoalType } from '../../types';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface HardwareRow {
|
||||
id: number;
|
||||
tier: string;
|
||||
hardware: string;
|
||||
models: string;
|
||||
capacity: string;
|
||||
}
|
||||
|
||||
const hardwareRows: HardwareRow[] = [
|
||||
{
|
||||
id: 0,
|
||||
tier: "Baseline: 16GB RAM",
|
||||
hardware: "Office Laptops (M1/M2/M3 Macbook Air, Intel Core i7 with integrated Iris)",
|
||||
models: "Llama 3 8B, Qwen 2.5 7B, Mistral 7B (Q4_K_M)",
|
||||
capacity: "Low Latency Single Task"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
tier: "Sweet Spot: 32GB-48GB RAM",
|
||||
hardware: "Developer Workstations (Macbook Pro M3 Max, Nvidia RTX 4070/4080 Super)",
|
||||
models: "Qwen 2.5 14B/32B, Phi-3-Medium, Command R",
|
||||
capacity: "Multi-Agent Pipelines & Full RAG"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tier: "Enterprise: 64GB+ RAM",
|
||||
hardware: "In-House Server Nodes (Mac Studio, Dual NVIDIA RTX 4090, Host Workstations)",
|
||||
models: "Llama 3 70B (Q4), Mixtral 8x22B Mixture of Experts",
|
||||
capacity: "Parallel Enterprise API Replacement"
|
||||
}
|
||||
];
|
||||
|
||||
const hardwareDetails: Record<number, string> = {
|
||||
0: "BASELINE CAPABILITY: Perfect for running 3B-8B parameters quantized models at peak speed. Integrates simple office assistants, direct translation pipelines, and localized structured search indexing without lags.",
|
||||
1: "HIGH PERFORMANCE (SWEET SPOT): Enables 14B-32B parameters models with complex reasoning, basic RAG, data pipeline execution, multi-stage summarization. Highly responsive on desktop workstations (Mac Studio / Nvidia GeForce RTX).",
|
||||
2: "ENTERPRISE DEPLOYMENTS: Capable of running heavy 70B+ parameters sovereign engines or multiple concurrent agent pipelines. Replaces complex proprietary SaaS platforms completely with extreme performance."
|
||||
};
|
||||
|
||||
const goalVerdicts: Record<GoalType, string> = {
|
||||
writing: "PERFECTLY FEASIBLE: Writing assistance is extremely light on RAM. A standard 16GB office laptop can handle this effortlessly, outputting texts faster than human typing with zero cloud lag.",
|
||||
rag: "HIGHLY PRACTICAL: Deep content classification and table mapping excel in dedicated local structures. No sensitive customer directories are ever sent across cloud channels.",
|
||||
agents: "REVENUE WINNER: Drag-and-drop secure file indexing allows instant conversational searches of massive internal manuals. Keeps sensitive IP completely under your company lock and key."
|
||||
};
|
||||
|
||||
interface TaskSpec {
|
||||
model: string;
|
||||
setup: string;
|
||||
hardware: string;
|
||||
cost: string;
|
||||
}
|
||||
|
||||
const getTaskSpec = (goal: GoalType): TaskSpec => {
|
||||
const specs: Record<GoalType, TaskSpec> = {
|
||||
writing: {
|
||||
model: "Llama-3.1-8B-Instruct (or Mistral-7B)",
|
||||
setup: "LM Studio / Jan Desktop (GUI offline shells)",
|
||||
hardware: "8GB-16GB RAM laptop or consumer PC",
|
||||
cost: "$0.00 / Zero subscription forever"
|
||||
},
|
||||
rag: {
|
||||
model: "Qwen-2.5-14B-Instruct-Q4 (or Llama-3-8B)",
|
||||
setup: "AnythingLLM / Open WebUI Desktop GUI (Zero coding required)",
|
||||
hardware: "16GB RAM laptop or light business machine",
|
||||
cost: "$0.00 / Zero subscription forever"
|
||||
},
|
||||
agents: {
|
||||
model: "Command-R-35B-Q4 (or Llama-3.1-8B-Instruct)",
|
||||
setup: "AnythingLLM / PrivateGPT (Desktop Drag-and-Drop)",
|
||||
hardware: "16GB-32GB standard office PC (Unified RAM)",
|
||||
cost: "$0.00 / Zero subscription forever"
|
||||
}
|
||||
};
|
||||
return specs[goal];
|
||||
};
|
||||
|
||||
interface ActionStep {
|
||||
num: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const getActionSteps = (goal: GoalType): ActionStep[] => {
|
||||
if (goal === 'writing') {
|
||||
return [
|
||||
{ num: 1, text: "Download & install <strong>LM Studio</strong> or <strong>Jan App</strong> on your current hardware." },
|
||||
{ num: 2, text: "Search registry for <strong>llama-3.1-8b-instruct</strong> and download the 4-bit config weight (Q4_K_M)." },
|
||||
{ num: 3, text: "You're ready! Start writing content safely offline with zero licensing or subscription stress!" }
|
||||
];
|
||||
} else if (goal === 'rag') {
|
||||
return [
|
||||
{ num: 1, text: "Download & install <strong>AnythingLLM Desktop</strong> or <strong>Jan Desktop</strong>." },
|
||||
{ num: 2, text: "Launch the app, choose any small quantized model from the built-in library, and click download." },
|
||||
{ num: 3, text: "Drag and drop your content folders or business contracts to automatically organize, search, or summarize them!" }
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{ num: 1, text: "Download & launch the free <strong>AnythingLLM Desktop</strong> program." },
|
||||
{ num: 2, text: "Establish a localized workspace and import folder directories of PDF reports/Excel briefs." },
|
||||
{ num: 3, text: "Query models securely offline. The vector database runs completely on disk with zero cloud lookups." }
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
interface Slide6HardwareMatrixProps {
|
||||
selectedGoal: GoalType;
|
||||
procureBudget: BudgetType;
|
||||
onGoalChange: (goal: GoalType) => void;
|
||||
onBudgetChange: (budget: BudgetType) => void;
|
||||
}
|
||||
|
||||
export default function Slide6HardwareMatrix({
|
||||
selectedGoal,
|
||||
procureBudget,
|
||||
onGoalChange,
|
||||
onBudgetChange
|
||||
}: Slide6HardwareMatrixProps) {
|
||||
const [selectedHardwareRow, setSelectedHardwareRow] = useState<number>(0);
|
||||
const [slide6Tab, setSlide6Tab] = useState<Slide6Tab>('tasks');
|
||||
|
||||
const handleElementClick = () => synth.playClick();
|
||||
|
||||
const handleTabChange = (tab: Slide6Tab) => {
|
||||
handleElementClick();
|
||||
setSlide6Tab(tab);
|
||||
};
|
||||
|
||||
const handleHardwareSelect = (id: number) => {
|
||||
handleElementClick();
|
||||
setSelectedHardwareRow(id);
|
||||
};
|
||||
|
||||
const handleGoalSelect = (goal: GoalType) => {
|
||||
handleElementClick();
|
||||
onGoalChange(goal);
|
||||
};
|
||||
|
||||
const taskSpec = getTaskSpec(selectedGoal);
|
||||
const actionSteps = getActionSteps(selectedGoal);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch max-w-6xl mx-auto w-full text-left">
|
||||
<div className="lg:col-span-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// DIRECTIVE ARCHITECTURE</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
Your Hardware Match
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans text-sm sm:text-base leading-relaxed mb-6">
|
||||
Map local AI targets against your company assets. Standard office equipment already houses substantial computational power. Utilize our selector to plan your deployment.
|
||||
</p>
|
||||
|
||||
<div className="flex bg-slate-950/80 border border-slate-800/80 rounded p-1 gap-1 mb-6 font-mono text-[10px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTabChange('tasks')}
|
||||
className={`flex-1 py-2 px-3 rounded text-center transition-all duration-150 cursor-pointer font-bold ${
|
||||
slide6Tab === 'tasks'
|
||||
? 'bg-emerald-950/50 border border-emerald-500/30 text-emerald-400 text-glow'
|
||||
: 'text-slate-500 hover:text-slate-350 border border-transparent'
|
||||
}`}
|
||||
>
|
||||
⚙ USE CASES MATCHING
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTabChange('hardware')}
|
||||
className={`flex-1 py-2 px-3 rounded text-center transition-all duration-150 cursor-pointer font-bold ${
|
||||
slide6Tab === 'hardware'
|
||||
? 'bg-emerald-950/50 border border-emerald-500/30 text-emerald-400 text-glow'
|
||||
: 'text-slate-500 hover:text-slate-350 border border-transparent'
|
||||
}`}
|
||||
>
|
||||
💻 HARDWARE TIERS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{slide6Tab === 'hardware' ? (
|
||||
<div className="bg-slate-950/40 border border-emerald-950/30 rounded-lg p-5 font-mono">
|
||||
<div className="flex items-center gap-2 text-emerald-400 text-xs font-bold mb-2">
|
||||
<Cpu className="w-4 h-4 text-emerald-400" />
|
||||
<span>MAPPED SILICON COMPATIBILITY:</span>
|
||||
</div>
|
||||
<p className="text-[12px] leading-relaxed text-slate-300">
|
||||
{hardwareDetails[selectedHardwareRow]}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-slate-950/40 border border-emerald-950/30 rounded-lg p-5 font-mono">
|
||||
<div className="flex items-center gap-2 text-emerald-400 text-xs font-bold mb-2">
|
||||
<Sparkles className="w-4 h-4 text-emerald-400" />
|
||||
<span>SOVEREIGN VERDICT:</span>
|
||||
</div>
|
||||
<p className="text-[12px] leading-relaxed text-slate-300">
|
||||
{goalVerdicts[selectedGoal]}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 flex flex-col w-full">
|
||||
<div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 sm:p-6 flex-1 flex flex-col justify-between relative overflow-hidden">
|
||||
|
||||
{slide6Tab === 'hardware' && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex justify-between items-center font-mono text-[10px] text-slate-400 mb-2">
|
||||
<span>INTERACTIVE MEMORY SPEC MATRIX</span>
|
||||
<span className="text-emerald-400 font-bold">● SELECT HARDWARE</span>
|
||||
</div>
|
||||
|
||||
{hardwareRows.map((row) => (
|
||||
<div
|
||||
key={row.id}
|
||||
onClick={() => handleHardwareSelect(row.id)}
|
||||
className={`p-4 rounded-lg border transition-all duration-300 cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 ${
|
||||
selectedHardwareRow === row.id
|
||||
? 'border-emerald-500 bg-emerald-950/25 shadow-[0_0_15px_rgba(16,185,129,0.15)]'
|
||||
: 'border-slate-850 bg-slate-900/40 hover:border-slate-700 hover:bg-slate-900/80'
|
||||
}`}
|
||||
>
|
||||
<div className="text-left">
|
||||
<span className={`font-mono text-[9px] font-bold block mb-1 uppercase ${
|
||||
selectedHardwareRow === row.id ? 'text-emerald-400' : 'text-slate-500'
|
||||
}`}>
|
||||
TIER_0{row.id + 1} // {selectedHardwareRow === row.id ? 'ACTIVE SPEC' : 'INACTIVE'}
|
||||
</span>
|
||||
<h3 className="font-display font-bold text-white text-base">
|
||||
{row.tier}
|
||||
</h3>
|
||||
<p className="font-sans text-[11px] text-slate-400 mt-0.5">
|
||||
<strong>Hardware:</strong> {row.hardware}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-left sm:text-right shrink-0">
|
||||
<span className="font-mono text-[10px] text-emerald-500 text-glow font-bold block">
|
||||
{row.models}
|
||||
</span>
|
||||
<span className="font-sans text-[10px] text-slate-500 block">
|
||||
{row.capacity}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{slide6Tab === 'tasks' && (
|
||||
<div className="flex flex-col h-full justify-between">
|
||||
<div className="flex justify-between items-center font-mono text-[10px] text-slate-400 mb-4">
|
||||
<span>TASK TO LOCAL MODEL MATCHING BLUEPRINTS</span>
|
||||
<span className="text-emerald-400 font-bold">● ONLINE PLANNER</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 mb-4 font-mono">
|
||||
{[
|
||||
{ id: 'writing' as GoalType, label: '✍ WRITING SUPPORT', desc: 'Content & copywriting' },
|
||||
{ id: 'rag' as GoalType, label: '📄 DOC ANALYSIS', desc: 'Data parsing & extraction' },
|
||||
{ id: 'agents' as GoalType, label: '🔍 FILE Q&A (RAG)', desc: 'Knowledge Base search' }
|
||||
].map((tsk) => (
|
||||
<button
|
||||
key={tsk.id}
|
||||
onClick={() => handleGoalSelect(tsk.id)}
|
||||
className={`p-2.5 rounded border text-center cursor-pointer transition-all duration-200 flex flex-col items-center justify-center gap-1 ${
|
||||
selectedGoal === tsk.id
|
||||
? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 font-bold shadow-[0_0_8px_rgba(16,185,129,0.1)]'
|
||||
: 'border-slate-850 bg-slate-900/40 text-slate-400 hover:border-slate-700 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<span className="text-[10px] font-bold leading-none">{tsk.label}</span>
|
||||
<span className="text-[7.5px] text-slate-500 leading-none">{tsk.desc}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900 border border-slate-850 rounded p-4 mb-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-slate-200 text-xs font-mono">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div>
|
||||
<span className="text-[9px] text-slate-500 font-semibold block uppercase">TARGET MODEL WEIGHTS:</span>
|
||||
<span className="text-emerald-400 font-bold text-sm">{taskSpec.model}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[9px] text-slate-500 font-semibold block uppercase">PRACTICAL SETUP APPLICATION:</span>
|
||||
<span className="text-white">{taskSpec.setup}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 md:border-l md:border-slate-800 md:pl-4">
|
||||
<div>
|
||||
<span className="text-[9px] text-slate-500 font-semibold block uppercase">MINIMUM COMPUTER HARDWARE:</span>
|
||||
<span className="text-white">{taskSpec.hardware}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[9px] text-slate-500 font-semibold block uppercase">COST TAX:</span>
|
||||
<span className="text-emerald-400 text-glow font-bold">{taskSpec.cost}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950 rounded p-3 text-left font-mono border border-slate-850">
|
||||
<span className="text-[8.5px] text-slate-500 font-bold block uppercase mb-1.5">// IMMEDIATE ACTION PLAN (FIRST STEPS):</span>
|
||||
<div className="flex flex-col gap-1.5 text-[11px] text-slate-300">
|
||||
{actionSteps.map((step) => (
|
||||
<p key={step.num} className="flex gap-2">
|
||||
<span className="text-emerald-400 font-bold">{step.num}.</span>
|
||||
<span dangerouslySetInnerHTML={{ __html: step.text }} />
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
import { AlertTriangle, Terminal, Sparkles, ArrowRight } from 'lucide-react';
|
||||
import { BudgetType, GoalType } from '../../types';
|
||||
import { getHardwareProcureData } from '../../utils/hardwareData';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface Slide7BuyersGuideProps {
|
||||
showToast: (msg: string) => void;
|
||||
selectedGoal: GoalType;
|
||||
procureBudget: BudgetType;
|
||||
onGoalChange: (goal: GoalType) => void;
|
||||
onBudgetChange: (budget: BudgetType) => void;
|
||||
}
|
||||
|
||||
interface BudgetOption {
|
||||
id: BudgetType;
|
||||
label: string;
|
||||
sub: string;
|
||||
}
|
||||
|
||||
const budgetOptions: BudgetOption[] = [
|
||||
{ id: 'existing', label: '💻 EXISTING ASSETS', sub: 'Zero Cost ($0)' },
|
||||
{ id: 'budget', label: '⚡ LIGHT UPGRADE', sub: 'Under $1,500' },
|
||||
{ id: 'pro', label: '🔥 PRO STUDIO', sub: '$2k - $4k' },
|
||||
{ id: 'enterprise', label: '🏢 ENTERPRISE NODE', sub: 'Over $5k' }
|
||||
];
|
||||
|
||||
export default function Slide7BuyersGuide({
|
||||
showToast,
|
||||
selectedGoal,
|
||||
procureBudget,
|
||||
onGoalChange,
|
||||
onBudgetChange
|
||||
}: Slide7BuyersGuideProps) {
|
||||
const handleElementClick = () => synth.playClick();
|
||||
|
||||
const handleBudgetSelect = (budget: BudgetType) => {
|
||||
handleElementClick();
|
||||
onBudgetChange(budget);
|
||||
};
|
||||
|
||||
const handleGoalSelect = (goal: GoalType) => {
|
||||
handleElementClick();
|
||||
onGoalChange(goal);
|
||||
};
|
||||
|
||||
const spec = getHardwareProcureData(procureBudget, selectedGoal);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch max-w-6xl mx-auto w-full text-left font-sans animate-fade-in">
|
||||
<div className="lg:col-span-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2 block">// SPECIFICATION OPTIMIZER</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
Easy Setup & Hardware Guide
|
||||
</h2>
|
||||
<p className="text-slate-400 text-xs sm:text-sm leading-relaxed mb-5">
|
||||
Buying or repurposing hardware is simple once you isolate your goals. Modern large models scale entirely based on **Memory Bandwidth** rather than CPU cores. Select your options below to see your optimal setup plan:
|
||||
</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-slate-500 font-mono text-[9px] uppercase tracking-wider mb-2 font-bold">// 1. CHOOSE AVAILABLE BUDGET PROFILE</label>
|
||||
<div className="grid grid-cols-2 gap-2 font-mono">
|
||||
{budgetOptions.map((btn) => (
|
||||
<button
|
||||
key={btn.id}
|
||||
type="button"
|
||||
onClick={() => handleBudgetSelect(btn.id)}
|
||||
className={`p-2.5 rounded border text-left transition-all duration-200 cursor-pointer ${
|
||||
procureBudget === btn.id
|
||||
? 'border-emerald-500 bg-emerald-950/20 text-emerald-400 font-bold shadow-[0_0_8px_rgba(16,185,129,0.1)]'
|
||||
: 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<span className="block text-[10px] tracking-tight">{btn.label}</span>
|
||||
<span className={`block text-[8px] font-semibold ${procureBudget === btn.id ? 'text-emerald-500' : 'text-slate-500'}`}>{btn.sub}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label className="block text-slate-500 font-mono text-[9px] uppercase tracking-wider mb-2 font-bold">// 2. CHOOSE PRIMARY BUSINESS VALUE INTENT</label>
|
||||
<div className="flex flex-col gap-2 font-mono">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleGoalSelect('writing')}
|
||||
className={`p-3 rounded border text-left transition-all duration-150 cursor-pointer flex justify-between items-center ${
|
||||
selectedGoal === 'writing'
|
||||
? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 font-bold'
|
||||
: 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<span className="block text-[10px] tracking-tight">✍ CONTENT ENGINE</span>
|
||||
<span className="block font-sans text-[8.5px] font-normal text-slate-500 leading-none mt-0.5">Drafting, summarizing, code autocompletion</span>
|
||||
</div>
|
||||
<ArrowRight className={`w-3 h-3 shrink-0 ${selectedGoal === 'writing' ? 'text-emerald-400' : 'text-slate-600'}`} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleGoalSelect('rag')}
|
||||
className={`p-3 rounded border text-left transition-all duration-150 cursor-pointer flex justify-between items-center ${
|
||||
selectedGoal === 'rag'
|
||||
? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 font-bold'
|
||||
: 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<span className="block text-[10px] tracking-tight">🔍 FILE COGNITIVE INDEX (RAG)</span>
|
||||
<span className="block font-sans text-[8.5px] font-normal text-slate-500 leading-none mt-0.5">Instant Q&A across deep manual archives / directories</span>
|
||||
</div>
|
||||
<ArrowRight className={`w-3 h-3 shrink-0 ${selectedGoal === 'rag' ? 'text-emerald-400' : 'text-slate-600'}`} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleGoalSelect('agents')}
|
||||
className={`p-3 rounded border text-left transition-all duration-150 cursor-pointer flex justify-between items-center ${
|
||||
selectedGoal === 'agents'
|
||||
? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 font-bold'
|
||||
: 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<span className="block text-[10px] tracking-tight">🤖 MULTI-AGENT SWARM PIPELINES</span>
|
||||
<span className="block font-sans text-[8.5px] font-normal text-slate-500 leading-none mt-0.5">Host complex orchestrated background reasoning routines</span>
|
||||
</div>
|
||||
<ArrowRight className={`w-3 h-3 shrink-0 ${selectedGoal === 'agents' ? 'text-emerald-400' : 'text-slate-600'}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-rose-950/15 border border-rose-900/25 p-4 rounded-lg text-slate-350 font-sans text-[11px] leading-relaxed flex gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-rose-500 shrink-0 animate-pulse" />
|
||||
<div>
|
||||
<span className="font-mono text-[9.5px] font-bold text-rose-400 tracking-wider block uppercase mb-1">// CRITICAL BUYER SHIELD PROTOCOL:</span>
|
||||
Do NOT buy multiple CPU-core servers expecting quick inference speeds. LLM read-phases are bound strictly by **Memory Bandwidth**. Prefer Apple Silicon (Unified Memory bus width > 300GB/s) or discrete Nvidia RTX Series GPUs. CPU-only rendering will result in a 5x to 10x speed penalty.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 flex flex-col w-full font-sans">
|
||||
<div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 sm:p-6 flex-1 flex flex-col justify-between relative overflow-hidden text-slate-200 font-mono">
|
||||
<div className="flex justify-between items-center font-mono text-[10px] text-slate-400 mb-4 border-b border-slate-900 pb-3">
|
||||
<span>SOVEREIGN HARDWARE DEPLOYMENT SPECIFICATION</span>
|
||||
<span className="text-emerald-400 font-bold animate-pulse">● MODEL GENERATED</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 text-left">
|
||||
<div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
|
||||
<span className="text-[8.5px] text-slate-500 block font-semibold">// RECOMMENDED SILICON TYPE:</span>
|
||||
<span className="text-white text-xs font-bold block mt-1 leading-normal font-sans">{spec.machineType}</span>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
|
||||
<span className="text-[8.5px] text-slate-500 block font-semibold">// OPTIMAL CAPACITY & MEMORY:</span>
|
||||
<span className="text-emerald-400 text-glow text-xs font-bold block mt-1 leading-normal font-sans">{spec.ramType}</span>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
|
||||
<span className="text-[8.5px] text-slate-500 block font-semibold">// MINIMUM SYSTEM BUS SPEED:</span>
|
||||
<span className="text-white text-xs block mt-1 leading-normal font-sans">{spec.bandWidth}</span>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
|
||||
<span className="text-[8.5px] text-slate-500 block font-semibold">// TARGET QUANTIZED MODEL WEIGHTS:</span>
|
||||
<span className="text-emerald-400 font-bold text-xs block mt-1 leading-normal font-sans">{spec.modelGoal}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900 border border-slate-850 rounded p-4 mb-4 text-left font-mono">
|
||||
<div className="flex items-center gap-1.5 text-emerald-450 text-[10px] font-bold mb-1.5 uppercase">
|
||||
<Sparkles className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>PERFORMANCE CAPABILITY ESTIMATE:</span>
|
||||
</div>
|
||||
<p className="text-slate-300 text-xs font-sans leading-relaxed">
|
||||
{spec.verdict}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950 p-4 rounded-lg border border-slate-850 mb-4 text-left text-xs">
|
||||
<span className="text-[9px] text-slate-500 font-bold block uppercase mb-2 font-mono">// SOFTWARE STACK TO DEPLOY:</span>
|
||||
<div className="flex gap-2 items-start text-slate-300 bg-slate-900/50 p-2.5 rounded border border-slate-850">
|
||||
<Terminal className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
|
||||
<div className="font-sans">
|
||||
<strong className="text-white block text-[11px] mb-0.5 font-mono">// LAUNCH TOOL COMPANIONS</strong>
|
||||
<p className="text-[10px] text-slate-400 leading-relaxed mb-1.5">
|
||||
Download & initialize <span className="text-emerald-400 font-bold">{spec.setupTools}</span>.
|
||||
</p>
|
||||
<span className="text-[9.5px] text-slate-500 italic block">
|
||||
{spec.purchaseTip}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/40 p-3 rounded text-[9px] text-slate-500 flex justify-between items-center border border-slate-900 font-mono">
|
||||
<span className="flex items-center gap-1"><span className="text-emerald-500">✔</span> SOURCE SPEC</span>
|
||||
<span className="text-slate-700">➔</span>
|
||||
<span className="flex items-center gap-1"><span className="text-emerald-500">✔</span> MAP TO GOALS</span>
|
||||
<span className="text-slate-700">➔</span>
|
||||
<span className="flex items-center gap-1"><span className="text-emerald-500">✔</span> BYPASS CPU TRAP</span>
|
||||
<span className="text-slate-700">➔</span>
|
||||
<span className="text-emerald-400 font-bold animate-pulse">// REQUISITION READY</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
import { useState } from 'react';
|
||||
import { GoalType, BudgetType } from '../../types';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface Slide8ROIProps {
|
||||
selectedGoal: GoalType;
|
||||
procureBudget: BudgetType;
|
||||
showToast: (msg: string) => void;
|
||||
}
|
||||
|
||||
export default function Slide8ROI({ selectedGoal, procureBudget, showToast }: Slide8ROIProps) {
|
||||
const [employees, setEmployees] = useState<number>(120);
|
||||
const [monthlySaaS, setMonthlySaaS] = useState<number>(35);
|
||||
const [setupCosts, setSetupCosts] = useState<number>(6500);
|
||||
|
||||
const handleElementClick = () => synth.playClick();
|
||||
|
||||
const handleGoalCostApply = () => {
|
||||
handleElementClick();
|
||||
const goalCostMap: Record<GoalType, number> = { writing: 0, rag: 1500, agents: 3500 };
|
||||
const targetCost = goalCostMap[selectedGoal] ?? 3500;
|
||||
setSetupCosts(targetCost);
|
||||
showToast(`Applied ${selectedGoal.toUpperCase()} goal recommendation: $${targetCost.toLocaleString()}`);
|
||||
};
|
||||
|
||||
const handleBudgetCostApply = () => {
|
||||
handleElementClick();
|
||||
const bgtCostMap: Record<BudgetType, number> = { existing: 0, budget: 1500, pro: 3500, enterprise: 12500 };
|
||||
const targetCost = bgtCostMap[procureBudget] ?? 1500;
|
||||
setSetupCosts(targetCost);
|
||||
showToast(`Applied ${procureBudget.toUpperCase()} specification plan: $${targetCost.toLocaleString()}`);
|
||||
};
|
||||
|
||||
const cloudMonthlyCost = employees * monthlySaaS;
|
||||
const cloudAnnualCost = cloudMonthlyCost * 12;
|
||||
const localAnnualOperatingSalaryFraction = 1200;
|
||||
const firstYearSavings = Math.max(0, cloudAnnualCost - setupCosts - localAnnualOperatingSalaryFraction);
|
||||
const threeYearSavings = Math.max(0, (cloudAnnualCost * 3) - setupCosts - (localAnnualOperatingSalaryFraction * 3));
|
||||
const breakEvenMonths = cloudMonthlyCost > 0 ? (setupCosts / cloudMonthlyCost).toFixed(1) : "0.0";
|
||||
|
||||
const getGoalCost = () => {
|
||||
const goalCostMap: Record<GoalType, number> = { writing: 0, rag: 1500, agents: 3500 };
|
||||
return goalCostMap[selectedGoal];
|
||||
};
|
||||
|
||||
const getBudgetCost = () => {
|
||||
const bgtCostMap: Record<BudgetType, number> = { existing: 0, budget: 1500, pro: 3500, enterprise: 12500 };
|
||||
return bgtCostMap[procureBudget];
|
||||
};
|
||||
|
||||
const getGoalLabel = () => {
|
||||
if (selectedGoal === 'writing') return "✍ Writing Support";
|
||||
if (selectedGoal === 'rag') return "📄 Doc Analysis";
|
||||
return "🔍 File Q&A (RAG)";
|
||||
};
|
||||
|
||||
const getBudgetLabel = () => {
|
||||
if (procureBudget === 'existing') return "💻 Existing Machine";
|
||||
if (procureBudget === 'budget') return "⚡ Light Upgrade";
|
||||
if (procureBudget === 'pro') return "🔥 Pro Studio Setup";
|
||||
return "🏢 Enterprise Rack";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-6xl mx-auto w-full">
|
||||
<div className="lg:col-span-5 flex flex-col justify-center text-left">
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// COST BREAKDOWN</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
Zero-Cost Lifetime ROI
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans text-sm sm:text-base leading-relaxed mb-6">
|
||||
SaaS applications levy a lifetime licensing tax. Leverage your existing compute hardware assets to entirely sever monthly billing spikes and dynamically scale model invocations with absolute zero marginal cost.
|
||||
</p>
|
||||
|
||||
<div className="bg-slate-950/50 border border-slate-800/80 rounded-xl p-5 font-mono text-[11px] text-slate-350 flex flex-col gap-2.5">
|
||||
<div className="flex items-center justify-between border-b border-slate-850 pb-2 text-[10px] text-slate-500">
|
||||
<span>SOVEREIGN EFFICIENCY REPORT</span>
|
||||
<span className="text-emerald-400">STATUS: GOLD_RATED</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>ESTIMATED BREAK-EVEN:</span>
|
||||
<span className="text-emerald-400 text-glow font-bold">{breakEvenMonths} Months</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>FIRST YEAR SAVINGS:</span>
|
||||
<span className="text-emerald-400 font-bold">${firstYearSavings.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>3-YEAR LIFETIME SAVINGS:</span>
|
||||
<span className="text-emerald-400 text-glow font-bold">${threeYearSavings.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 flex flex-col w-full">
|
||||
<div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-6 text-left flex flex-col gap-5">
|
||||
<div className="flex justify-between items-center font-mono text-[10px] text-slate-400">
|
||||
<span>LIVE RETURN-ON-INVESTMENT CALCULATOR</span>
|
||||
<span className="text-emerald-400 font-bold">● DYNAMIC</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between font-mono text-[11px]">
|
||||
<span className="text-slate-300">COMPANY SIZE (STAFF/USERS):</span>
|
||||
<span className="text-white font-bold">{employees} employees</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="500"
|
||||
step="10"
|
||||
value={employees}
|
||||
onChange={(e) => { handleElementClick(); setEmployees(Number(e.target.value)); }}
|
||||
className="w-full h-1 bg-slate-900 rounded-lg appearance-none cursor-pointer accent-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between font-mono text-[11px]">
|
||||
<span className="text-slate-300">ESTIMATED MONTHLY CLOUD SAAS COST (PER USER):</span>
|
||||
<span className="text-white font-bold">${monthlySaaS} / user / mo</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
step="5"
|
||||
value={monthlySaaS}
|
||||
onChange={(e) => { handleElementClick(); setMonthlySaaS(Number(e.target.value)); }}
|
||||
className="w-full h-1 bg-slate-900 rounded-lg appearance-none cursor-pointer accent-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/60 p-3 rounded-lg border border-slate-800/80 flex flex-col gap-3 font-sans">
|
||||
<div className="flex justify-between items-center text-[10px] font-mono font-bold text-slate-400 uppercase tracking-tight">
|
||||
<span>🔌 SYNC INFRASTRUCTURE COST TO DECISION PATH</span>
|
||||
<span className="text-emerald-400 font-black tracking-normal animate-pulse">● SELECT TO APPLY</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleGoalCostApply}
|
||||
className="p-2.5 rounded border border-slate-850 bg-slate-950/40 text-left hover:border-emerald-500/50 hover:bg-slate-900/80 hover:shadow-[0_0_12px_rgba(16,185,129,0.06)] transition-all duration-200 cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<span className="text-[8px] text-slate-500 font-mono tracking-wider font-bold block uppercase mb-1">// S6 ACTIVE GOAL</span>
|
||||
<span className="text-[11px] text-white font-bold leading-none font-sans block truncate">
|
||||
{getGoalLabel()}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-emerald-400 font-bold block mt-2 font-mono">
|
||||
Use Rec: ${getGoalCost().toLocaleString()}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBudgetCostApply}
|
||||
className="p-2.5 rounded border border-slate-850 bg-slate-950/40 text-left hover:border-emerald-500/50 hover:bg-slate-900/80 hover:shadow-[0_0_12px_rgba(16,185,129,0.06)] transition-all duration-200 cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<span className="text-[8px] text-slate-500 font-mono tracking-wider font-bold block uppercase mb-1">// S7 SPECIFICATION</span>
|
||||
<span className="text-[11px] text-white font-bold leading-none font-sans block truncate">
|
||||
{getBudgetLabel()}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-emerald-450 font-bold block mt-2 font-mono">
|
||||
Spec Cost: ${getBudgetCost().toLocaleString()}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between font-mono text-[11px]">
|
||||
<span className="text-slate-300">ONE-OFF INFRASTRUCTURE UPGRADE INVESTMENT:</span>
|
||||
<span className="text-white font-bold">${setupCosts.toLocaleString()}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="30000"
|
||||
step="500"
|
||||
value={setupCosts}
|
||||
onChange={(e) => { handleElementClick(); setSetupCosts(Number(e.target.value)); }}
|
||||
className="w-full h-1 bg-slate-900 rounded-lg appearance-none cursor-pointer accent-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mt-2">
|
||||
<div className="p-4 rounded-lg bg-slate-905 border border-slate-850 flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="font-mono text-[9px] text-slate-500 block uppercase mb-1">Yearly Cloud Cost (Hemorrhaging)</span>
|
||||
<span className="font-display font-extrabold text-lg sm:text-xl text-rose-450">${cloudAnnualCost.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-slate-950 rounded-full overflow-hidden mt-3">
|
||||
<div className="h-full bg-rose-500 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg bg-emerald-950/20 border border-emerald-900/35 flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="font-mono text-[9px] text-emerald-450 block uppercase mb-1">Local Sovereign Cost (First Year Upgrade)</span>
|
||||
<span className="font-display font-extrabold text-lg sm:text-xl text-emerald-450">${(setupCosts + 1200).toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-slate-950 rounded-full overflow-hidden mt-3">
|
||||
<div
|
||||
className="h-full bg-emerald-500 transition-all duration-300"
|
||||
style={{ width: `${Math.min(100, ((setupCosts + 1200) / cloudAnnualCost) * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
import { useState, useRef, FormEvent } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { WifiOff, Lock } from 'lucide-react';
|
||||
import { LogSequence } from '../../types';
|
||||
import { synth } from '../../utils/audioSynth';
|
||||
|
||||
interface Slide9OfflineDemoProps {
|
||||
showToast: (msg: string) => void;
|
||||
}
|
||||
|
||||
export default function Slide9OfflineDemo({ showToast }: Slide9OfflineDemoProps) {
|
||||
const [isDisconnected, setIsDisconnected] = useState<boolean>(false);
|
||||
const [demoStep, setDemoStep] = useState<number>(0);
|
||||
const [demoLogs, setDemoLogs] = useState<string[]>([]);
|
||||
const [demoPrompt, setDemoPrompt] = useState<string>("");
|
||||
const [demoResponse, setDemoResponse] = useState<string>("");
|
||||
const [demoPending, setDemoPending] = useState<boolean>(false);
|
||||
const demoLogTimerRef = useRef<NodeJS.Timeout[]>([]);
|
||||
|
||||
const handleSeverConnection = () => {
|
||||
synth.playDisconnect();
|
||||
setIsDisconnected(true);
|
||||
setDemoStep(1);
|
||||
setDemoLogs([]);
|
||||
setDemoResponse("");
|
||||
setDemoPrompt("");
|
||||
|
||||
demoLogTimerRef.current.forEach(t => clearTimeout(t));
|
||||
demoLogTimerRef.current = [];
|
||||
|
||||
const logSequence: LogSequence[] = [
|
||||
{ text: "⚡ [SEVER_INITIATED] Intercepting all global socket calls...", delay: 200 },
|
||||
{ text: "🔴 [PING_FAILED] api.openai.com - Request timeout (Route blocked)", delay: 800 },
|
||||
{ text: "🔴 [CONN_DEAD] gateway.anthropic.com - Destination unreachable", delay: 1400 },
|
||||
{ text: "🔒 [OFFLINE_ENFORCED] Firewall rules securely locked. Outbound data leakage risk: 0.00%", delay: 2000 },
|
||||
{ text: "📦 [DEPLOYING] Mount local weights: 'llama-3-8b-instruct.Q4_K_M.gguf'", delay: 2600 },
|
||||
{ text: "🚀 [CPU_AVX2] GPU acceleration mapped to RTX VRAM Core.", delay: 3200 },
|
||||
{ text: "✅ [Sovereign-Llama3-v1] Online in 100% disconnected sandbox environment.", delay: 3800 }
|
||||
];
|
||||
|
||||
logSequence.forEach((seq) => {
|
||||
const timer = setTimeout(() => {
|
||||
setDemoLogs((prev) => [...prev, seq.text]);
|
||||
synth.playBlip();
|
||||
if (seq.text.startsWith('✅')) {
|
||||
setDemoStep(2);
|
||||
}
|
||||
}, seq.delay);
|
||||
demoLogTimerRef.current.push(timer);
|
||||
});
|
||||
};
|
||||
|
||||
const submitDemoPrompt = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!demoPrompt.trim() || demoPending) return;
|
||||
synth.playClick();
|
||||
setDemoPending(true);
|
||||
setDemoResponse("");
|
||||
|
||||
const mockAiResponses: { [key: string]: string } = {
|
||||
default: "SYSTEM RESPONSE // SOVEREIGN ENGINE:\n\nInput processed completely on-device in 143ms.\nResult: Secure compliance extraction verified. Ready for download. Zero bits sent beyond localhost.",
|
||||
analysts: "LOCAL_ANALYSIS //\nWe ran sentiment scoring on the structured CSV feed. Standard Deviances: \n- Positivity: 84.1%\n- Risk Alert: Trace detected on Cloud API usage. Highly recommend immediate on-site fallback protocol.",
|
||||
extract: "EXTRACTED SCHEMA:\n{\n 'transaction_id': 'TX90812',\n 'sovereign_rating': '10.0',\n 'cost_per_token': '$0.000000000'\n}"
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
const p = demoPrompt.toLowerCase();
|
||||
let response = mockAiResponses.default;
|
||||
if (p.includes('analyst') || p.includes('score') || p.includes('sentiment')) {
|
||||
response = mockAiResponses.analysts;
|
||||
} else if (p.includes('schema') || p.includes('json') || p.includes('extract')) {
|
||||
response = mockAiResponses.extract;
|
||||
}
|
||||
setDemoResponse(response);
|
||||
setDemoPending(false);
|
||||
synth.playBlip();
|
||||
}, 1100);
|
||||
};
|
||||
|
||||
const handleReconnect = () => {
|
||||
synth.playClick();
|
||||
setIsDisconnected(false);
|
||||
setDemoStep(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-6xl mx-auto w-full">
|
||||
<div className="lg:col-span-4 flex flex-col justify-center text-left">
|
||||
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// SOVEREIGN DISCONNECT</span>
|
||||
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
||||
Live Offline Walkthrough
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans text-sm sm:text-base leading-relaxed mb-6">
|
||||
Witness absolute independence in motion. Flip the sovereign kill-switch to isolate your computing workspace and verify local cognitive offline processing in high-fidelity.
|
||||
</p>
|
||||
|
||||
<div className="hidden lg:flex items-center gap-2 border border-slate-800/80 rounded px-3 py-1.5 bg-slate-900/50 text-[10px] font-mono text-slate-500">
|
||||
<Lock className="w-3.5 h-3.5 text-emerald-400 shrink-0 animate-pulse" />
|
||||
<span>Isolating terminal loops from network cards fully.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-8 flex flex-col w-full">
|
||||
<div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 sm:p-6 text-left flex flex-col gap-4">
|
||||
|
||||
{!isDisconnected ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-center">
|
||||
<WifiOff className="w-16 h-16 text-emerald-500/30 animate-pulse mb-6" />
|
||||
<h3 className="font-display font-bold text-lg text-white uppercase mb-2">OFF-GRID CONNECTION SANDBOX</h3>
|
||||
<p className="text-slate-400 text-xs font-sans max-w-md mb-8">
|
||||
Initiate off-grid mode to sever connection mapping hooks and activate offline model simulations on your local VRAM nodes.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleSeverConnection}
|
||||
className="px-6 py-3 rounded bg-emerald-500 text-slate-950 font-mono text-xs font-black uppercase tracking-wider border border-emerald-400 hover:shadow-[0_0_20px_rgba(16,185,129,0.35)] cursor-pointer transition-all duration-300"
|
||||
>
|
||||
⚡ ACTIVATE OFF-GRID INTERRUPT
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4 h-full">
|
||||
<div className="flex items-center justify-between border-b border-slate-800 pb-2">
|
||||
<div className="flex items-center gap-2 text-[10px] font-mono font-bold text-emerald-400">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse-emerald" />
|
||||
<span>OFF-GRID SANDBOX ENVIRONMENT ACTIVE</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleReconnect}
|
||||
className="font-mono text-[9px] text-slate-500 hover:text-slate-350 hover:underline"
|
||||
>
|
||||
[RECONNECT NETWORK]
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900 rounded p-3 font-mono text-[10px] text-slate-300 h-32 overflow-y-auto custom-scrollbar flex flex-col gap-1.5 border border-slate-850">
|
||||
{demoLogs.map((log, idx) => (
|
||||
<p key={idx} className={log.includes('Failed') || log.includes('Dead') ? 'text-rose-450 font-bold' : log.includes('Sovereign') ? 'text-emerald-400 font-bold' : ''}>
|
||||
{log}
|
||||
</p>
|
||||
))}
|
||||
{demoStep === 1 && (
|
||||
<div className="flex items-center gap-2 text-slate-500">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500 animate-ping" />
|
||||
<span>Severing network nodes...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{demoStep === 2 && (
|
||||
<motion.form
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onSubmit={submitDemoPrompt}
|
||||
className="flex flex-col gap-3 font-mono"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[9px] text-slate-500 uppercase">Test Sovereign Reasoning Invocations:</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={demoPrompt}
|
||||
onChange={(e) => setDemoPrompt(e.target.value)}
|
||||
placeholder="Try prompt e.g.: 'Run Sentiment Score Matrix' or 'Extract JSON Schema'..."
|
||||
className="flex-1 bg-slate-900 border border-slate-800 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={demoPending || !demoPrompt.trim()}
|
||||
className="px-4 py-2 bg-emerald-500 text-slate-950 rounded font-black text-xs uppercase cursor-pointer hover:bg-emerald-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{demoPending ? 'RUNNING...' : 'SUBMIT'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(demoPending || demoResponse) && (
|
||||
<div className="bg-slate-950 rounded border border-slate-850 p-3 h-28 overflow-y-auto custom-scrollbar font-mono text-[10px]">
|
||||
{demoPending ? (
|
||||
<div className="flex items-center gap-2 text-slate-500">
|
||||
<div className="w-3 h-3 border border-t-emerald-500 border-r-transparent rounded-full animate-spin" />
|
||||
<span>Invoking local model weights... SEC Compliance sandbox isolation 100% verified</span>
|
||||
</div>
|
||||
) : (
|
||||
<pre className="text-emerald-400 break-words whitespace-pre-wrap">{demoResponse}</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</motion.form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { Slide } from '../types';
|
||||
|
||||
export const SLIDES: Slide[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "The Sovereign Business Engine",
|
||||
subtitle: "Unlock Secure, Zero-Cost Local AI for Algarve Entrepreneurs, Nomads & Content Creators",
|
||||
category: "INTRODUCTION"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "The Cloud Expense Trap",
|
||||
points: [
|
||||
"Data Leak Risks (Training on your client IP)",
|
||||
"Unfair Subscriptions (A tax on every seat)",
|
||||
"Sketchy Beach & Cafe Wi-Fi Downtime"
|
||||
],
|
||||
category: "RISK ANALYSIS"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Your Private AI Workspace",
|
||||
points: [
|
||||
"Open-Source Brains (Free from big-tech license keys)",
|
||||
"Visual Desktop Apps (Simple point-and-click layout)",
|
||||
"100% Secure Offline Running (Zero data leaves your laptop)"
|
||||
],
|
||||
category: "ARCHITECTURE"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "AI Compression: Smart Scaling",
|
||||
content: "Analogy: Premium high-end photo vs. optimized web graphic. Compression slashes memory needs by 75% so you can run powerful models directly on a normal laptop with no loss in logic.",
|
||||
category: "PERFORMANCE OPTIMIZATION"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Manual Overhead vs Smart Workflows",
|
||||
points: [
|
||||
"Stop playing chat ping-pong with slow prompts",
|
||||
"Organize website posts, formatting, & emails instantly",
|
||||
"Direct Clipboard-to-Excel / Content Management integrations"
|
||||
],
|
||||
category: "WORKFLOW AUTOMATION"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Your Hardware Match",
|
||||
points: [
|
||||
"Standard Laptops: 16GB RAM (Excellent baseline)",
|
||||
"Sweet Spot: 32GB-48GB RAM (Creative powerhouses)",
|
||||
"Ultimate Studio: 64GB+ RAM (Complete cloud replacement)"
|
||||
],
|
||||
category: "HARDWARE MATRICES"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Easy Setup & Hardware Guide",
|
||||
subtitle: "Exactly what to buy or repurpose to replace expensive monthly software bills",
|
||||
category: "BUYER'S GUIDE"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Zero-Cost Lifetime ROI",
|
||||
content: "Repurpose machines you already own, cut recurring monthly subscription spikes, and scale output to infinity for zero extra cost.",
|
||||
category: "FINANCIAL FREEDOM"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Live Offline Walkthrough",
|
||||
content: "Pulling the internet plug. Absolute independence in action right here, right now.",
|
||||
category: "LIVE DEMONSTRATION"
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,72 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-display: "Space Grotesk", sans-serif;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.cyber-grid {
|
||||
background-size: 40px 40px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(16, 185, 129, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(16, 185, 129, 0.04) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.cyber-glow {
|
||||
box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.cyber-glow-strong {
|
||||
box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scanline and flicker animations */
|
||||
@keyframes cyber-scanline {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(100%); }
|
||||
}
|
||||
|
||||
.scanline::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||
z-index: 2;
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes pulse-emerald {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-pulse-emerald {
|
||||
animation: pulse-emerald 2s infinite;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import {StrictMode} from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,40 @@
|
||||
// ==========================================
|
||||
// TYPE DEFINITIONS
|
||||
// ==========================================
|
||||
|
||||
export interface Slide {
|
||||
id: number;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
points?: string[];
|
||||
content?: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export interface ProcurementSpec {
|
||||
machineType: string;
|
||||
ramType: string;
|
||||
bandWidth: string;
|
||||
modelGoal: string;
|
||||
verdict: string;
|
||||
setupTools: string;
|
||||
purchaseTip: string;
|
||||
}
|
||||
|
||||
export type BudgetType = 'existing' | 'budget' | 'pro' | 'enterprise';
|
||||
export type GoalType = 'writing' | 'rag' | 'agents';
|
||||
export type QuantLevel = 'FP16' | 'Q8_0' | 'Q4_K_M' | 'Q2_K';
|
||||
export type Slide6Tab = 'hardware' | 'tasks';
|
||||
|
||||
export interface ParsedData {
|
||||
id: string;
|
||||
name: string;
|
||||
age: string;
|
||||
region: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface LogSequence {
|
||||
text: string;
|
||||
delay: number;
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
// ==========================================
|
||||
// AUDIO SYNTHESIZER (Web Audio API)
|
||||
// ==========================================
|
||||
class CyberSynth {
|
||||
private ctx: AudioContext | null = null;
|
||||
public enabled: boolean = false;
|
||||
|
||||
private init() {
|
||||
if (!this.ctx) {
|
||||
this.ctx = new (window.AudioContext || (window as any).webkitAudioContext)();
|
||||
}
|
||||
}
|
||||
|
||||
public playClick() {
|
||||
if (!this.enabled) return;
|
||||
try {
|
||||
this.init();
|
||||
if (!this.ctx) return;
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(880, this.ctx.currentTime);
|
||||
osc.frequency.exponentialRampToValueAtTime(120, this.ctx.currentTime + 0.08);
|
||||
|
||||
gain.gain.setValueAtTime(0.08, this.ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.08);
|
||||
|
||||
osc.start();
|
||||
osc.stop(this.ctx.currentTime + 0.08);
|
||||
} catch (e) {
|
||||
console.warn("Synth audio context failed: ", e);
|
||||
}
|
||||
}
|
||||
|
||||
public playBlip() {
|
||||
if (!this.enabled) return;
|
||||
try {
|
||||
this.init();
|
||||
if (!this.ctx) return;
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.type = 'triangle';
|
||||
osc.frequency.setValueAtTime(1400, this.ctx.currentTime);
|
||||
osc.frequency.setValueAtTime(1800, this.ctx.currentTime + 0.03);
|
||||
|
||||
gain.gain.setValueAtTime(0.04, this.ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.06);
|
||||
|
||||
osc.start();
|
||||
osc.stop(this.ctx.currentTime + 0.06);
|
||||
} catch (e) {
|
||||
// Ignored
|
||||
}
|
||||
}
|
||||
|
||||
public playError() {
|
||||
if (!this.enabled) return;
|
||||
try {
|
||||
this.init();
|
||||
if (!this.ctx) return;
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.type = 'sawtooth';
|
||||
osc.frequency.setValueAtTime(120, this.ctx.currentTime);
|
||||
osc.frequency.linearRampToValueAtTime(80, this.ctx.currentTime + 0.15);
|
||||
|
||||
gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.15);
|
||||
|
||||
osc.start();
|
||||
osc.stop(this.ctx.currentTime + 0.15);
|
||||
} catch (e) {
|
||||
// Ignored
|
||||
}
|
||||
}
|
||||
|
||||
public playSlideChange() {
|
||||
if (!this.enabled) return;
|
||||
try {
|
||||
this.init();
|
||||
if (!this.ctx) return;
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(440, this.ctx.currentTime);
|
||||
osc.frequency.exponentialRampToValueAtTime(660, this.ctx.currentTime + 0.12);
|
||||
|
||||
gain.gain.setValueAtTime(0.06, this.ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.12);
|
||||
|
||||
osc.start();
|
||||
osc.stop(this.ctx.currentTime + 0.12);
|
||||
} catch (e) {
|
||||
// Ignored
|
||||
}
|
||||
}
|
||||
|
||||
public playDisconnect() {
|
||||
if (!this.enabled) return;
|
||||
try {
|
||||
this.init();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const osc1 = this.ctx.createOscillator();
|
||||
const osc2 = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
|
||||
osc1.connect(gain);
|
||||
osc2.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc1.type = 'triangle';
|
||||
osc1.frequency.setValueAtTime(300, this.ctx.currentTime);
|
||||
osc1.frequency.linearRampToValueAtTime(30, this.ctx.currentTime + 0.8);
|
||||
|
||||
osc2.type = 'sawtooth';
|
||||
osc2.frequency.setValueAtTime(295, this.ctx.currentTime);
|
||||
osc2.frequency.linearRampToValueAtTime(25, this.ctx.currentTime + 0.8);
|
||||
|
||||
gain.gain.setValueAtTime(0.12, this.ctx.currentTime);
|
||||
gain.gain.linearRampToValueAtTime(0.001, this.ctx.currentTime + 0.8);
|
||||
|
||||
osc1.start();
|
||||
osc2.start();
|
||||
osc1.stop(this.ctx.currentTime + 0.8);
|
||||
osc2.stop(this.ctx.currentTime + 0.8);
|
||||
} catch (e) {
|
||||
// Ignored
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const synth = new CyberSynth();
|
||||
@@ -0,0 +1,114 @@
|
||||
// ==========================================
|
||||
// HARDWARE RECOMMENDATION ENGINE DATA
|
||||
// ==========================================
|
||||
import { ProcurementSpec, BudgetType, GoalType } from '../types';
|
||||
|
||||
export const getHardwareProcureData = (budget: BudgetType, goal: GoalType): ProcurementSpec => {
|
||||
if (budget === 'existing') {
|
||||
if (goal === 'writing') {
|
||||
return {
|
||||
machineType: "Standard Office Laptop (Apple MacBook Air or standard business PC)",
|
||||
ramType: "8GB - 16GB RAM (Standard System RAM Share)",
|
||||
bandWidth: "80 GB/s to 150 GB/s (System bottleneck)",
|
||||
modelGoal: "Llama-3-8B-Instruct (Q4) or lightweight content models",
|
||||
verdict: "FEASIBLE AT ZERO COST: Run right now! Use your regular machine. You'll get 15-20 words/sec. Perfect for drafting emails, creating social posts, or polishing website copies on a sunny terrace in Faro.",
|
||||
setupTools: "LM Studio Desktop App (Simple offline chat app) or Jan Desktop",
|
||||
purchaseTip: "Tip: Shut down heavy browser tabs or video call software to free up system memory before starting your local writing session."
|
||||
};
|
||||
} else if (goal === 'rag') {
|
||||
return {
|
||||
machineType: "High-end corporate laptop or office PC with 16GB-32GB RAM",
|
||||
ramType: "16GB - 32GB RAM (DDR4/DDR5 system memory)",
|
||||
bandWidth: "125 GB/s standard dual-channel memory",
|
||||
modelGoal: "Qwen-2.5-7B or Mistral-7B-Instruct (Q4 quantized weights)",
|
||||
verdict: "PRACTICAL BUT CAUTIOUS: Local secure search index via AnythingLLM works beautifully, but parsing long folders of business PDFs will take 2-4 seconds per page on a standard processor.",
|
||||
setupTools: "AnythingLLM Desktop (runs secure built-in local vector storage on your system disk with zero code)",
|
||||
purchaseTip: "Tip: Import files in modest batches rather than drag-and-dropping 100 giant PDFs simultaneously to prevent standard system lag."
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
machineType: "Premium creator or executive device (minimum 32GB memory)",
|
||||
ramType: "32GB RAM dual-channel speed configuration",
|
||||
bandWidth: "150 GB/s to 200 GB/s standard speed",
|
||||
modelGoal: "Llama-3-8B-Instruct (Q4) or Qwen-2.5-14B (Q4 Quantized)",
|
||||
verdict: "LIMITED CPU SPEED: Multi-agent automation loops run slow on standard processors. A complex, multi-step workflow could take 10-15 seconds to execute complete sequences.",
|
||||
setupTools: "AnythingLLM Multi-Agent workspace (drag-and-drop automated flows, no code required)",
|
||||
purchaseTip: "Tip: For multi-step tasks, select ultra-compact models like Llama-3-3B to preserve instant typing response."
|
||||
};
|
||||
}
|
||||
} else if (budget === 'budget') {
|
||||
if (goal === 'writing') {
|
||||
return {
|
||||
machineType: "Mid-Range Creator Laptop or Custom Workstation with Nvidia Graphics Card",
|
||||
ramType: "32GB System RAM + 12GB/16GB VRAM on graphics board",
|
||||
bandWidth: ">300 GB/s VRAM speed on graphics memory",
|
||||
modelGoal: "Llama-3-8B (uncompressed) or Qwen-2.5-14B (high-fidelity)",
|
||||
verdict: "EXTREME SPEED: You will generate 50-70 words per second. Faster than standard cloud APIs. Unlimited writing or translations with zero delay while enjoying Albufeira beach views.",
|
||||
setupTools: "LM Studio / Jan desktop app (maps directly to your graphics hardware automatically)",
|
||||
purchaseTip: "Tip: Look for high-performance laptops with an Nvidia Geforce RTX 4060 or 4070 (minimum 12GB memory) for peak content writing speed."
|
||||
};
|
||||
} else if (goal === 'rag') {
|
||||
return {
|
||||
machineType: "Custom Business Desktop PC with Nvidia GeForce RTX 4070 Ti Super",
|
||||
ramType: "32GB DDR5 + 16GB Dedicated Graphics VRAM",
|
||||
bandWidth: "504 GB/s dedicated graphics bus bandwidth",
|
||||
modelGoal: "Command-R 35B (Q3 compressed) or Llama-3.1-8B-Instruct (high-fidelity)",
|
||||
verdict: "HIGH CAPACITY: Powerful 35B parameter models run seamlessly on-device. The 16GB graphics card holds entire business directories or marketing templates for instant secure lookup.",
|
||||
setupTools: "AnythingLLM Desktop mapped to Ollama engine backing graphics acceleration (Zero Code!)",
|
||||
purchaseTip: "Tip: Choose the 'Ti Super' variant specifically, as standard cards carry smaller VRAM buffers (12GB) which limit local model sizes."
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
machineType: "Nvidia RTX 4080 (16GB VRAM) or RTX 4070 Super Workstation",
|
||||
ramType: "64GB DDR5 System RAM + 16GB high-bandwidth graphics VRAM",
|
||||
bandWidth: "716 GB/s extreme graphics memory speed",
|
||||
modelGoal: "Qwen-2.5-14B-Instruct or Llama-3-8B-Instruct (runs fully offloaded to graphics memory)",
|
||||
verdict: "ENTREPRENEUR SWEET SPOT: Outstanding automation speeds. Runs local action-assistants rapidly, turning multi-step website work or translation reviews into split-second tasks.",
|
||||
setupTools: "AnythingLLM Desktop with Multi-Agent features (100% visual point-and-click setup)",
|
||||
purchaseTip: "Tip: Look for desktop towers with good ventilation. Graphics cards will run at full capacity during intense marketing or content automation runs."
|
||||
};
|
||||
}
|
||||
} else if (budget === 'pro') {
|
||||
if (goal === 'writing') {
|
||||
return {
|
||||
machineType: "Apple Mac Studio (M3 Max, 128GB Unified Memory)",
|
||||
ramType: "128GB Unified ultra-speed System Memory",
|
||||
bandWidth: "400 GB/s high bandwidth unified architecture",
|
||||
modelGoal: "Llama-3-70B-Instruct (Q4) or Qwen-2.5-32B (high-fidelity)",
|
||||
verdict: "TOP COGNITIVE RATING: Write complex content reports, marketing plans, and legal briefs using state-of-the-art 70B parameter models at ~25 words/second with ultimate security.",
|
||||
setupTools: "Open WebUI Desktop interface locally running on your Mac without code",
|
||||
purchaseTip: "Tip: Mac Studio unified memory is shared between active screen displays and model layers. Leave 16GB margin for OS overhead."
|
||||
};
|
||||
} else if (goal === 'rag') {
|
||||
return {
|
||||
machineType: "Apple Mac Studio (128GB Memory) or Pro Workstation with RTX 4090 (24GB)",
|
||||
ramType: "128GB Unified Memory or 24GB Ultra GDDR6X graphics memory",
|
||||
bandWidth: "400 GB/s to 1,008 GB/s ultra-level graphics speed",
|
||||
modelGoal: "Command R+ 104B (Q3) or Llama-3-70B-Instruct and local database in parallel",
|
||||
verdict: "DEEP THINKER MATRIX: Indexes huge business catalogs, website records, and contracts (thousands of pages) in minutes. Query archives completely offline.",
|
||||
setupTools: "AnythingLLM visual workspace server running completely locally on your system desk",
|
||||
purchaseTip: "Tip: Speed is determined by memory bandwidth. Focus entirely on graphics bandwidth (over 500GB/s is the sweet spot!)."
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
machineType: "Pro Workstation with 2x Nvidia RTX 4090 or Mac Studio M3 Ultra (192GB RAM)",
|
||||
ramType: "48GB Graphics Memory (Dual Cards) or 192GB Unified Memory",
|
||||
bandWidth: "Over 800 GB/s massive pipeline speed",
|
||||
modelGoal: "Mixtral 8x22B (Q4) or customized local 70B workflow automation pipelines",
|
||||
verdict: "CREATIVE AGENCY POWER: Ultimate speed for simultaneous content generation and data tasks. Automatically drafts, translates, and formats blog posts in parallel.",
|
||||
setupTools: "AnythingLLM visual agency tools or local docker visual desktop apps",
|
||||
purchaseTip: "Tip: Make sure you use a top-shelf power supply if custom-building dual graphics cards to handle high content workloads gracefully."
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
machineType: "Dedicated Private In-House Server Nodes (Gigabyte Server with 4x Nvidia RTX cards)",
|
||||
ramType: "96GB to 384GB high-grade Server Memory + massive graphics pools",
|
||||
bandWidth: "1.5 TB/s to 3.2 TB/s ultra-bandwidth networks",
|
||||
modelGoal: "Llama-3.1-405B (Q4 quantization) or multiple parallel Mixtral instances",
|
||||
verdict: "COMPLETE OFFICE CLOUD REPLACEMENT: Serves private email, content, and search tools across your entire company. Replaces team subscriptions completely.",
|
||||
setupTools: "LM Studio Commercial Server or AnythingLLM Enterprise Workspace (Simple admin dashboard)",
|
||||
purchaseTip: "Tip: Place these in a cooled server room or closet. Enterprise server configurations require proper cooling and ventilation."
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
import {defineConfig} from 'vite';
|
||||
|
||||
export default defineConfig(() => {
|
||||
return {
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
},
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
Here are the extracted action items, tasks, and commitments:
|
||||
|
||||
1. **Who**: Unassigned
|
||||
**What**: Review and revise meeting notes to ensure accuracy and completeness.
|
||||
**When**: No deadline specified
|
||||
**Priority**: Low
|
||||
|
||||
2. **Who**: Alaz
|
||||
**What**: Follow up with Snorri regarding his dimensional teapot and its contents.
|
||||
**When**: No deadline specified
|
||||
**Priority**: Medium
|
||||
|
||||
3. **Who**: Tuxi
|
||||
**What**: Provide Alaz with more information about the dimensional teapot's prize.
|
||||
**When**: No deadline specified
|
||||
**Priority**: Low
|
||||
|
||||
4. **Who**: Unassigned
|
||||
**What**: Research and provide answers to Snorri's questions regarding the family portraits in his lounge.
|
||||
**When**: No deadline specified
|
||||
**Priority**: Medium
|
||||
|
||||
5. **Who**: Alaz
|
||||
**What**: Investigate the origins of the jar image found in Snorri's lounge.
|
||||
**When**: No deadline specified
|
||||
**Priority**: Low
|
||||
|
||||
6. **Who**: Unassigned
|
||||
**What**: Clarify and resolve any outstanding questions or issues from the meeting.
|
||||
**When**: No deadline specified
|
||||
**Priority**: High
|
||||
|
||||
Note: The conversation at the end of the transcript appears to be a discussion about whether anything was missed, but no specific action items were assigned.
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,20 @@
|
||||
**Topic**: **Campaign Session Recap**
|
||||
|
||||
**Key Points**:
|
||||
|
||||
* The group participated in a combat encounter with the Beatles, using creative methods to defeat them.
|
||||
* A "beat-o" was defeated by Snorri using an apple, granting him a ghostly speed ability for a week.
|
||||
* The group prepared and presented three dishes: Tuxi's colorful boom-boom decoration, Snorri's sashimi, and Alaz's flamed dish.
|
||||
* For dessert, the group went on a foraging task, with Tuxy preparing lychee surprise and Snorri making a lingon berry jelly.
|
||||
* Alaz visited a village of awakened apes and obtained ingredients to make a rice pudding.
|
||||
|
||||
**Decisions**:
|
||||
|
||||
* The competition was decided, with Alaz winning a dimensional teapot and Snorri coming second with an arcane Rubik's gift.
|
||||
* Snorri exchanged prizes with Alaz, obtaining the teapot and rubbing it three times to teleport into a different dimension.
|
||||
* Snorri obtained an image of a jar from the new dimension.
|
||||
|
||||
**Open Questions**:
|
||||
|
||||
* What is the significance of the family portraits in the new dimension?
|
||||
* How will the group's experience in this new dimension affect their future gameplay?
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,178 @@
|
||||
# 🎤 meetings — local audio → transcript → summary + action items
|
||||
|
||||
A single-file shell script CLI that transcribes meeting recordings (using GGUF Whisper or Parakeet models), then generates a summary and extracts action items using Ollama. Everything runs 100% locally.
|
||||
|
||||
```
|
||||
audio file ──▶ ffmpeg ──▶ whisper.cpp / parakeet.cpp ──▶ Ollama ──▶ report.md
|
||||
│ │ │
|
||||
16kHz mono WAV GGUF transcription summary + actions
|
||||
```
|
||||
|
||||
## Quick start
|
||||
|
||||
```bash
|
||||
# 1. Clone/download
|
||||
git clone <this-repo> meetings-cli && cd meetings-cli
|
||||
|
||||
# 2. One-time setup (installs whisper.cpp, downloads model, pulls Ollama LLM)
|
||||
./meetings setup
|
||||
|
||||
# 3. Process a meeting recording
|
||||
./meetings recording.mp3
|
||||
|
||||
# 4. Check everything is healthy
|
||||
./meetings doctor
|
||||
```
|
||||
|
||||
## What it does
|
||||
|
||||
| Step | Tool | What happens |
|
||||
|------|------|--------------|
|
||||
| 1. Convert | ffmpeg | Any audio → 16kHz mono WAV |
|
||||
| 2. Transcribe | whisper.cpp or parakeet.cpp | GGUF/GGML model → text transcript |
|
||||
| 3. Summarize | Ollama | Transcript → structured summary (topic, key points, decisions, open questions) |
|
||||
| 4. Extract | Ollama | Transcript → numbered action items (who, what, when, priority) |
|
||||
|
||||
## Output
|
||||
|
||||
For each audio file, a directory is created containing:
|
||||
|
||||
```
|
||||
2026-06-07_1402_team_standup/
|
||||
├── report.md # Combined: summary + actions + transcript
|
||||
├── transcript.txt # Raw transcription
|
||||
├── summary.md # LLM-generated summary
|
||||
└── action_items.md # Extracted action items
|
||||
```
|
||||
|
||||
## Requirements
|
||||
|
||||
| Dependency | Install | Purpose |
|
||||
|------------|---------|---------|
|
||||
| **ffmpeg** | `brew install ffmpeg` | Audio format conversion |
|
||||
| **whisper.cpp** | `brew install whisper-cpp` | Speech-to-text (GGML models) |
|
||||
| **Ollama** | [ollama.com](https://ollama.com) | LLM for summarization |
|
||||
| **jq** | `brew install jq` | JSON parsing for Ollama API |
|
||||
|
||||
> `./meetings setup` handles all of this automatically.
|
||||
|
||||
## STT engines
|
||||
|
||||
### whisper.cpp (default, recommended)
|
||||
- Battle-tested, many languages, large model ecosystem
|
||||
- Models from [ggerganov/whisper.cpp](https://huggingface.co/ggerganov/whisper.cpp)
|
||||
- Install: `brew install whisper-cpp`
|
||||
|
||||
| Model | Size | Best for |
|
||||
|-------|------|----------|
|
||||
| tiny.en | 75 MB | Quick tests, English |
|
||||
| base.en | 142 MB | Good balance, English |
|
||||
| small.en | 466 MB | **Recommended for English** |
|
||||
| medium.en | 1.5 GB | High accuracy, English |
|
||||
| large-v3-turbo | 809 MB | Best multilingual, fast |
|
||||
| large-v3 | 2.9 GB | Best accuracy, any language |
|
||||
|
||||
### parakeet.cpp (alternative, faster)
|
||||
- NVIDIA Parakeet models, excellent English, smaller footprint
|
||||
- Models from [mudler/parakeet-cpp-gguf](https://huggingface.co/mudler/parakeet-cpp-gguf)
|
||||
- Install: Build from [source](https://github.com/mudler/parakeet.cpp) or use Docker
|
||||
|
||||
| Model | Size | Best for |
|
||||
|-------|------|----------|
|
||||
| tdt_ctc-110m-q8_0 | 178 MB | Fast, good English |
|
||||
| tdt_ctc-110m-f16 | 268 MB | Fast, lossless English |
|
||||
| tdt-0.6b-v3-f16 | 1.4 GB | Multilingual |
|
||||
|
||||
## Configuration
|
||||
|
||||
### Environment variables
|
||||
|
||||
```bash
|
||||
MEETINGS_DIR # Config & models directory (default: ~/.meetings)
|
||||
MEETINGS_STT # STT engine: whisper | parakeet
|
||||
MEETINGS_STT_MODEL # Path to GGUF/GGML model file
|
||||
MEETINGS_LLM # Ollama model for summarization (default: llama3.1:8b)
|
||||
MEETINGS_THREADS # Thread count for STT (default: 4)
|
||||
MEETINGS_LANG # Language code (default: en; use "auto" for multilingual)
|
||||
MEETINGS_OUTPUT # Output directory (default: .)
|
||||
```
|
||||
|
||||
### CLI flags
|
||||
|
||||
```bash
|
||||
./meetings recording.mp3 --stt whisper --llm llama3.1:8b --lang en --output ./reports
|
||||
```
|
||||
|
||||
### Config file
|
||||
|
||||
Saved at `~/.meetings/config` after running `./meetings setup`:
|
||||
|
||||
```
|
||||
STT_ENGINE=whisper
|
||||
OLLAMA_MODEL=llama3.1:8b
|
||||
THREADS=4
|
||||
STT_MODEL=/home/user/.meetings/models/ggml-small.en.bin
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
./meetings <audio_file> # Run the full pipeline
|
||||
./meetings setup # Install deps + download model (interactive)
|
||||
./meetings doctor # Check all dependencies
|
||||
./meetings config # Show current configuration
|
||||
./meetings help # Show help
|
||||
```
|
||||
|
||||
## How Ollama fits in
|
||||
|
||||
**Ollama does NOT run the whisper/parakeet models** — those use their own inference engines (whisper.cpp / parakeet.cpp). Ollama is only used for the LLM steps:
|
||||
|
||||
1. **Summary generation** — sends the transcript to an Ollama model with a structured summarization prompt
|
||||
2. **Action item extraction** — sends the transcript to an Ollama model with an action-item extraction prompt
|
||||
|
||||
You can use any Ollama model. Smaller models (llama3.2:1b, gemma3:1b) are faster; larger models (llama3.1:8b, qwen2.5-coder:7b) produce better summaries.
|
||||
|
||||
## Example
|
||||
|
||||
```bash
|
||||
$ ./meetings team_standup.m4a
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ 🎤 M E E T I N G S │
|
||||
│ audio → transcript → summary + actions │
|
||||
│ whisper.cpp · parakeet.cpp · ollama │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
Input: team_standup.m4a
|
||||
STT engine: whisper
|
||||
STT model: ggml-small.en.bin
|
||||
LLM model: llama3.1:8b
|
||||
Language: en
|
||||
Output: ./2026-06-07_1402_team_standup/
|
||||
|
||||
── Step 1/4 — Converting audio ──
|
||||
▸ Converting audio to 16kHz mono WAV...
|
||||
✓ Audio converted: 1.2M
|
||||
|
||||
── Step 2/4 — Transcribing with whisper ──
|
||||
▸ Transcribing with whisper.cpp...
|
||||
✓ Transcript: 847 words
|
||||
|
||||
── Step 3/4 — Summarizing (llama3.1:8b) ──
|
||||
✓ Summary saved
|
||||
|
||||
── Step 4/4 — Extracting action items (llama3.1:8b) ──
|
||||
✓ Action items saved
|
||||
|
||||
✓ All done! Files saved to: ./2026-06-07_1402_team_standup/
|
||||
|
||||
📄 Report: ./2026-06-07_1402_team_standup/report.md
|
||||
📝 Transcript: ./2026-06-07_1402_team_standup/transcript.txt
|
||||
📋 Summary: ./2026-06-07_1402_team_standup/summary.md
|
||||
✅ Action Items: ./2026-06-07_1402_item_standup/action_items.md
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Executable
+659
@@ -0,0 +1,659 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
# meetings — audio → transcript → summary + action items, all local
|
||||
#
|
||||
# Transcribes audio using whisper.cpp or parakeet.cpp (GGUF/GGML models),
|
||||
# then uses Ollama to summarize and extract action items.
|
||||
#
|
||||
# Usage:
|
||||
# ./meetings <audio_file> # full pipeline
|
||||
# ./meetings setup # install deps + download model
|
||||
# ./meetings doctor # check dependencies
|
||||
# ./meetings config # show current config
|
||||
#
|
||||
set -euo pipefail
|
||||
|
||||
# ─── colours ────────────────────────────────────────────────────────
|
||||
RED='\033[0;31m'; GRN='\033[0;32m'; YEL='\033[1;33m'
|
||||
BLU='\033[0;34m'; CYN='\033[0;36m'; RST='\033[0m'
|
||||
BOLD='\033[1m'
|
||||
|
||||
# ─── paths ──────────────────────────────────────────────────────────
|
||||
MEETINGS_DIR="${MEETINGS_DIR:-$HOME/.meetings}"
|
||||
CONFIG_FILE="$MEETINGS_DIR/config"
|
||||
MODELS_DIR="$MEETINGS_DIR/models"
|
||||
|
||||
# ─── helpers ───────────────────────────────────────────────────────
|
||||
die() { printf "${RED}error: %s${RST}\n" "$*" >&2; exit 1; }
|
||||
info() { printf "${BLU}▸ %s${RST}\n" "$*" >&2; }
|
||||
ok() { printf "${GRN}✓ %s${RST}\n" "$*" >&2; }
|
||||
warn() { printf "${YEL}⚠ %s${RST}\n" "$*" >&2; }
|
||||
step() { printf "\n${BOLD}${CYN}── %s ──${RST}\n" "$*" >&2; }
|
||||
|
||||
banner() {
|
||||
cat <<'BAN'
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ 🎤 M E E T I N G S │
|
||||
│ audio → transcript → summary + actions │
|
||||
│ whisper.cpp · parakeet.cpp · ollama │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
BAN
|
||||
}
|
||||
|
||||
# ─── load config: env vars > config file > defaults ────────────────
|
||||
load_config() {
|
||||
# defaults
|
||||
STT_ENGINE=""
|
||||
STT_MODEL=""
|
||||
OLLAMA_MODEL="llama3.1:8b"
|
||||
OLLAMA_HOST="http://localhost:11434"
|
||||
THREADS="4"
|
||||
LANGUAGE="en"
|
||||
OUTPUT_DIR="."
|
||||
# config file overrides defaults
|
||||
[[ -f "$CONFIG_FILE" ]] && source "$CONFIG_FILE"
|
||||
# env vars override everything (|| true prevents set -e exit on empty vars)
|
||||
[[ -n "${MEETINGS_STT:-}" ]] && STT_ENGINE="$MEETINGS_STT" || true
|
||||
[[ -n "${MEETINGS_STT_MODEL:-}" ]] && STT_MODEL="$MEETINGS_STT_MODEL" || true
|
||||
[[ -n "${MEETINGS_LLM:-}" ]] && OLLAMA_MODEL="$MEETINGS_LLM" || true
|
||||
[[ -n "${MEETINGS_THREADS:-}" ]] && THREADS="$MEETINGS_THREADS" || true
|
||||
[[ -n "${MEETINGS_LANG:-}" ]] && LANGUAGE="$MEETINGS_LANG" || true
|
||||
[[ -n "${MEETINGS_OUTPUT:-}" ]] && OUTPUT_DIR="$MEETINGS_OUTPUT" || true
|
||||
}
|
||||
|
||||
# ─── detect STT engine ──────────────────────────────────────────────
|
||||
detect_stt() {
|
||||
if command -v parakeet-cli &>/dev/null; then
|
||||
echo "parakeet"
|
||||
elif command -v whisper-cli &>/dev/null; then
|
||||
echo "whisper"
|
||||
else
|
||||
echo ""
|
||||
fi
|
||||
}
|
||||
|
||||
get_stt_binary() {
|
||||
local engine="${1:-$STT_ENGINE}"
|
||||
case "$engine" in
|
||||
whisper) command -v whisper-cli 2>/dev/null || echo "" ;;
|
||||
parakeet) command -v parakeet-cli 2>/dev/null || echo "" ;;
|
||||
*) echo "" ;;
|
||||
esac
|
||||
}
|
||||
|
||||
find_stt_model() {
|
||||
local engine="${1:-whisper}"
|
||||
if [[ -n "${STT_MODEL:-}" && -f "${STT_MODEL}" ]]; then
|
||||
echo "$STT_MODEL"; return 0
|
||||
fi
|
||||
case "$engine" in
|
||||
whisper)
|
||||
for f in "$MODELS_DIR"/ggml-*.bin "$MODELS_DIR"/ggml-*.gguf; do
|
||||
[[ -f "$f" ]] && echo "$f" && return 0
|
||||
done
|
||||
;;
|
||||
parakeet)
|
||||
for f in "$MODELS_DIR"/*parakeet*.gguf "$MODELS_DIR"/*tdt*.gguf; do
|
||||
[[ -f "$f" ]] && echo "$f" && return 0
|
||||
done
|
||||
;;
|
||||
esac
|
||||
return 1
|
||||
}
|
||||
|
||||
# ─── doctor ─────────────────────────────────────────────────────────
|
||||
cmd_doctor() {
|
||||
banner >&2
|
||||
local ok_count=0 total=0
|
||||
|
||||
total=$((total+1))
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
ok "ffmpeg: $(command -v ffmpeg)"; ok_count=$((ok_count+1))
|
||||
else
|
||||
warn "ffmpeg: not found"
|
||||
fi
|
||||
|
||||
total=$((total+1))
|
||||
if command -v ollama &>/dev/null; then
|
||||
ok "ollama: $(command -v ollama)"; ok_count=$((ok_count+1))
|
||||
if curl -sf "${OLLAMA_HOST:-http://localhost:11434}/api/tags" &>/dev/null; then
|
||||
ok " server: running at ${OLLAMA_HOST:-http://localhost:11434}"
|
||||
else
|
||||
warn " server: not responding (run: ollama serve)"
|
||||
fi
|
||||
else
|
||||
warn "ollama: not found"
|
||||
fi
|
||||
|
||||
total=$((total+1))
|
||||
local engine="${STT_ENGINE:-$(detect_stt)}"
|
||||
local bin
|
||||
bin="$(get_stt_binary "$engine")"
|
||||
if [[ -n "$bin" ]]; then
|
||||
ok "STT engine: $engine ($bin)"; ok_count=$((ok_count+1))
|
||||
else
|
||||
warn "STT engine: not found (run: ./meetings setup)"
|
||||
fi
|
||||
|
||||
total=$((total+1))
|
||||
local model
|
||||
model="$(find_stt_model "$engine")" || true
|
||||
if [[ -n "$model" ]]; then
|
||||
ok "STT model: $model"; ok_count=$((ok_count+1))
|
||||
else
|
||||
warn "STT model: not found (run: ./meetings setup)"
|
||||
fi
|
||||
|
||||
total=$((total+1))
|
||||
local ollama_model="${OLLAMA_MODEL:-llama3.1:8b}"
|
||||
local model_name
|
||||
model_name="$(echo "$ollama_model" | cut -d: -f1)"
|
||||
if ollama list 2>/dev/null | awk '{print $1}' | grep -qF "$model_name"; then
|
||||
ok "LLM model: $ollama_model (pulled)"; ok_count=$((ok_count+1))
|
||||
else
|
||||
warn "LLM model: $ollama_model (not pulled — run: ollama pull $ollama_model)"
|
||||
fi
|
||||
|
||||
echo "" >&2
|
||||
if [[ $ok_count -eq $total ]]; then
|
||||
ok "All good ($ok_count/$total)"
|
||||
else
|
||||
warn "Ready ($ok_count/$total). Run './meetings setup' to install missing pieces."
|
||||
fi
|
||||
}
|
||||
|
||||
# ─── setup ──────────────────────────────────────────────────────────
|
||||
cmd_setup() {
|
||||
load_config
|
||||
banner >&2
|
||||
mkdir -p "$MEETINGS_DIR" "$MODELS_DIR"
|
||||
|
||||
# ── ffmpeg ──
|
||||
step "Checking ffmpeg"
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
ok "ffmpeg already installed"
|
||||
else
|
||||
info "Installing ffmpeg..."
|
||||
if [[ "$(uname)" == "Darwin" ]]; then
|
||||
brew install ffmpeg || die "Could not install ffmpeg"
|
||||
elif command -v apt-get &>/dev/null; then
|
||||
sudo apt-get update && sudo apt-get install -y ffmpeg
|
||||
elif command -v dnf &>/dev/null; then
|
||||
sudo dnf install -y ffmpeg
|
||||
else
|
||||
die "Please install ffmpeg manually: https://ffmpeg.org/download.html"
|
||||
fi
|
||||
fi
|
||||
|
||||
# ── ollama ──
|
||||
step "Checking Ollama"
|
||||
if command -v ollama &>/dev/null; then
|
||||
ok "ollama already installed"
|
||||
else
|
||||
info "Installing Ollama..."
|
||||
curl -fsSL https://ollama.com/install.sh | sh || die "Could not install Ollama"
|
||||
fi
|
||||
|
||||
if ! curl -sf "${OLLAMA_HOST:-http://localhost:11434}/api/tags" &>/dev/null; then
|
||||
info "Starting Ollama server..."
|
||||
ollama serve &>/dev/null &
|
||||
sleep 3
|
||||
fi
|
||||
|
||||
# ── choose STT engine ──
|
||||
step "Choosing STT engine"
|
||||
echo "" >&2
|
||||
echo " 1) whisper.cpp — battle-tested, many languages, brew install" >&2
|
||||
echo " 2) parakeet.cpp — faster, great English, smaller footprint" >&2
|
||||
echo "" >&2
|
||||
local choice
|
||||
if [[ -n "${STT_ENGINE:-}" ]]; then
|
||||
choice="$STT_ENGINE"
|
||||
info "Using pre-configured engine: $choice"
|
||||
else
|
||||
read -rp " Choose [1/2, default=1]: " choice
|
||||
case "${choice:-1}" in
|
||||
2|parakeet) choice="parakeet" ;;
|
||||
*) choice="whisper" ;;
|
||||
esac
|
||||
fi
|
||||
|
||||
case "$choice" in
|
||||
whisper) setup_whisper ;;
|
||||
parakeet) setup_parakeet ;;
|
||||
esac
|
||||
|
||||
STT_ENGINE="$choice"
|
||||
grep -q "^STT_ENGINE=" "$CONFIG_FILE" 2>/dev/null \
|
||||
&& sed -i '' "s/^STT_ENGINE=.*/STT_ENGINE=$choice/" "$CONFIG_FILE" 2>/dev/null \
|
||||
|| echo "STT_ENGINE=$choice" >> "$CONFIG_FILE"
|
||||
|
||||
# ── pull LLM ──
|
||||
step "Pulling LLM: ${OLLAMA_MODEL:-llama3.1:8b}"
|
||||
local ollama_model="${OLLAMA_MODEL:-llama3.1:8b}"
|
||||
if ollama list 2>/dev/null | awk '{print $1}' | grep -qF "$(echo "$ollama_model" | cut -d: -f1)"; then
|
||||
ok "$ollama_model already pulled"
|
||||
else
|
||||
ollama pull "$ollama_model" || warn "Could not pull $ollama_model. Run: ollama pull $ollama_model"
|
||||
fi
|
||||
|
||||
echo "" >&2
|
||||
ok "Setup complete! Run './meetings doctor' to verify, then './meetings <audio_file>' to process."
|
||||
}
|
||||
|
||||
setup_whisper() {
|
||||
step "Installing whisper.cpp"
|
||||
if command -v whisper-cli &>/dev/null; then
|
||||
ok "whisper-cli already available at $(command -v whisper-cli)"
|
||||
else
|
||||
info "Installing via package manager..."
|
||||
if [[ "$(uname)" == "Darwin" ]]; then
|
||||
brew install whisper-cpp || die "Could not install whisper-cpp via brew"
|
||||
else
|
||||
die "Please install whisper-cli manually: https://github.com/ggml-org/whisper.cpp
|
||||
On macOS: brew install whisper-cpp
|
||||
Or build from source: git clone https://github.com/ggml-org/whisper.cpp && cd whisper.cpp && cmake -B build && cmake --build build -j"
|
||||
fi
|
||||
fi
|
||||
|
||||
step "Downloading Whisper model"
|
||||
local model_choice
|
||||
echo "" >&2
|
||||
echo " Available models (from HuggingFace ggerganov/whisper.cpp):" >&2
|
||||
echo " tiny.en — 75 MB (fastest, English only)" >&2
|
||||
echo " base.en — 142 MB (good for quick tests)" >&2
|
||||
echo " small.en — 466 MB (recommended for English) ★" >&2
|
||||
echo " medium.en — 1.5 GB (high accuracy, English only)" >&2
|
||||
echo " large-v3-turbo — 809 MB (best multilingual, fast)" >&2
|
||||
echo " large-v3 — 2.9 GB (best accuracy, any language)" >&2
|
||||
echo "" >&2
|
||||
if [[ -n "${STT_MODEL:-}" && -f "${STT_MODEL}" ]]; then
|
||||
info "Using existing model: $STT_MODEL"
|
||||
else
|
||||
read -rp " Choose model [default=small.en]: " model_choice
|
||||
model_choice="${model_choice:-small.en}"
|
||||
local model_file="$MODELS_DIR/ggml-${model_choice}.bin"
|
||||
if [[ -f "$model_file" ]]; then
|
||||
ok "Model already downloaded: $model_file"
|
||||
else
|
||||
info "Downloading ggml-${model_choice}.bin (this may take a moment)..."
|
||||
curl -L --progress-bar \
|
||||
-o "$model_file" \
|
||||
"https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-${model_choice}.bin" \
|
||||
|| die "Failed to download model"
|
||||
ok "Downloaded: $model_file"
|
||||
fi
|
||||
STT_MODEL="$model_file"
|
||||
echo "STT_MODEL=$model_file" >> "$CONFIG_FILE"
|
||||
fi
|
||||
}
|
||||
|
||||
setup_parakeet() {
|
||||
step "Installing parakeet.cpp"
|
||||
if command -v parakeet-cli &>/dev/null; then
|
||||
ok "parakeet-cli already available at $(command -v parakeet-cli)"
|
||||
else
|
||||
info "Checking for pre-built binary or Docker..."
|
||||
if command -v docker &>/dev/null; then
|
||||
ok "Docker available — parakeet.cpp will run via container"
|
||||
else
|
||||
die "parakeet-cli not found and Docker not installed. Please either:
|
||||
- Build parakeet.cpp: https://github.com/mudler/parakeet.cpp
|
||||
- Or install Docker for the container approach"
|
||||
fi
|
||||
fi
|
||||
|
||||
step "Downloading Parakeet model"
|
||||
local model_choice
|
||||
echo "" >&2
|
||||
echo " Available models (from HuggingFace mudler/parakeet-cpp-gguf):" >&2
|
||||
echo " tdt_ctc-110m-q8_0 — 178 MB (fast, good English, smallest) ★" >&2
|
||||
echo " tdt_ctc-110m-f16 — 268 MB (fast, lossless English)" >&2
|
||||
echo " tdt-0.6b-v3-f16 — 1.4 GB (multilingual, recommended)" >&2
|
||||
echo "" >&2
|
||||
if [[ -n "${STT_MODEL:-}" && -f "${STT_MODEL}" ]]; then
|
||||
info "Using existing model: $STT_MODEL"
|
||||
else
|
||||
read -rp " Choose model [default=tdt_ctc-110m-q8_0]: " model_choice
|
||||
model_choice="${model_choice:-tdt_ctc-110m-q8_0}"
|
||||
local model_file="$MODELS_DIR/${model_choice}.gguf"
|
||||
if [[ -f "$model_file" ]]; then
|
||||
ok "Model already downloaded: $model_file"
|
||||
else
|
||||
info "Downloading ${model_choice}.gguf..."
|
||||
curl -L --progress-bar \
|
||||
-o "$model_file" \
|
||||
"https://huggingface.co/mudler/parakeet-cpp-gguf/resolve/main/${model_choice}.gguf" \
|
||||
|| die "Failed to download model"
|
||||
ok "Downloaded: $model_file"
|
||||
fi
|
||||
STT_MODEL="$model_file"
|
||||
echo "STT_MODEL=$model_file" >> "$CONFIG_FILE"
|
||||
fi
|
||||
}
|
||||
|
||||
# ─── config display ─────────────────────────────────────────────────
|
||||
cmd_config() {
|
||||
load_config
|
||||
banner >&2
|
||||
echo "" >&2
|
||||
if [[ -f "$CONFIG_FILE" ]]; then
|
||||
echo " Saved config ($CONFIG_FILE):" >&2
|
||||
echo "" >&2
|
||||
while IFS='=' read -r key val; do
|
||||
printf " %-16s %s\n" "$key" "$val" >&2
|
||||
done < "$CONFIG_FILE"
|
||||
else
|
||||
echo " (no saved config — run: ./meetings setup)" >&2
|
||||
fi
|
||||
echo "" >&2
|
||||
echo " Effective settings:" >&2
|
||||
local stt_display="${STT_ENGINE:-$(detect_stt)}"
|
||||
stt_display="${stt_display:-(not set)}"
|
||||
echo " STT engine: $stt_display" >&2
|
||||
echo " STT model: ${STT_MODEL:-(auto-detect)}" >&2
|
||||
echo " LLM model: $OLLAMA_MODEL" >&2
|
||||
echo " Ollama host: $OLLAMA_HOST" >&2
|
||||
echo " Threads: $THREADS" >&2
|
||||
echo " Language: $LANGUAGE" >&2
|
||||
echo " Output dir: $OUTPUT_DIR" >&2
|
||||
echo "" >&2
|
||||
}
|
||||
|
||||
# ─── convert audio ──────────────────────────────────────────────────
|
||||
convert_audio() {
|
||||
local input="$1" output="$2"
|
||||
info "Converting audio to 16kHz mono WAV..."
|
||||
ffmpeg -y -i "$input" -ar 16000 -ac 1 -c:a pcm_s16le "$output" \
|
||||
-loglevel warning 2>/dev/null \
|
||||
|| die "ffmpeg conversion failed for $input"
|
||||
ok "Audio converted: $(du -h "$output" | cut -f1)"
|
||||
}
|
||||
|
||||
# ─── transcribe with whisper ───────────────────────────────────────
|
||||
transcribe_whisper() {
|
||||
local wav_file="$1" model="$2" binary="$3"
|
||||
info "Transcribing with whisper.cpp..."
|
||||
local lang_flag=""
|
||||
[[ "$LANGUAGE" != "auto" ]] && lang_flag="-l $LANGUAGE"
|
||||
|
||||
local transcript
|
||||
transcript=$("$binary" \
|
||||
-m "$model" \
|
||||
-f "$wav_file" \
|
||||
-t "$THREADS" \
|
||||
$lang_flag \
|
||||
-nt \
|
||||
--no-prints \
|
||||
2>/dev/null) || die "Whisper transcription failed"
|
||||
|
||||
echo "$transcript"
|
||||
}
|
||||
|
||||
# ─── transcribe with parakeet ──────────────────────────────────────
|
||||
transcribe_parakeet() {
|
||||
local wav_file="$1" model="$2" binary="$3"
|
||||
info "Transcribing with parakeet.cpp..."
|
||||
|
||||
local decoder_flag=""
|
||||
if echo "$model" | grep -qi "ctc"; then
|
||||
decoder_flag="--decoder ctc"
|
||||
elif echo "$model" | grep -qi "tdt"; then
|
||||
decoder_flag="--decoder tdt"
|
||||
fi
|
||||
|
||||
if [[ -z "$binary" ]] && command -v docker &>/dev/null; then
|
||||
info "Using Docker for parakeet.cpp..."
|
||||
docker run --rm \
|
||||
-v "$model:/model.gguf:ro" \
|
||||
-v "$wav_file:/audio.wav:ro" \
|
||||
ghcr.io/mudler/parakeet.cpp-cli:latest \
|
||||
transcribe --model /model.gguf --input /audio.wav $decoder_flag 2>/dev/null \
|
||||
|| die "Docker parakeet transcription failed"
|
||||
else
|
||||
"$binary" transcribe --model "$model" --input "$wav_file" $decoder_flag 2>/dev/null \
|
||||
|| die "Parakeet transcription failed"
|
||||
fi
|
||||
}
|
||||
|
||||
# ─── call Ollama ───────────────────────────────────────────────────
|
||||
ollama_generate() {
|
||||
local prompt="$1" system="${2:-}"
|
||||
local json_payload
|
||||
|
||||
if [[ -n "$system" ]]; then
|
||||
json_payload=$(jq -n \
|
||||
--arg model "$OLLAMA_MODEL" \
|
||||
--arg system "$system" \
|
||||
--arg prompt "$prompt" \
|
||||
'{model: $model, system: $system, prompt: $prompt, stream: false}')
|
||||
else
|
||||
json_payload=$(jq -n \
|
||||
--arg model "$OLLAMA_MODEL" \
|
||||
--arg prompt "$prompt" \
|
||||
'{model: $model, prompt: $prompt, stream: false}')
|
||||
fi
|
||||
|
||||
curl -sf "$OLLAMA_HOST/api/generate" \
|
||||
-d "$json_payload" 2>/dev/null \
|
||||
| jq -r '.response // empty' \
|
||||
|| die "Ollama request failed. Is the server running? (ollama serve)"
|
||||
}
|
||||
|
||||
# ─── main pipeline ──────────────────────────────────────────────────
|
||||
cmd_process() {
|
||||
local input_file="$1"
|
||||
shift || true
|
||||
|
||||
# Load config BEFORE flag parsing, so flags can override
|
||||
load_config
|
||||
|
||||
while [[ $# -gt 0 ]]; do
|
||||
case "$1" in
|
||||
--stt) STT_ENGINE="$2"; shift 2 ;;
|
||||
--model) STT_MODEL="$2"; shift 2 ;;
|
||||
--llm) OLLAMA_MODEL="$2"; shift 2 ;;
|
||||
--lang) LANGUAGE="$2"; shift 2 ;;
|
||||
--threads) THREADS="$2"; shift 2 ;;
|
||||
--output) OUTPUT_DIR="$2"; shift 2 ;;
|
||||
*) die "Unknown option: $1. Run: ./meetings help" ;;
|
||||
esac
|
||||
done
|
||||
|
||||
[[ -z "$input_file" ]] && die "Usage: ./meetings <audio_file>"
|
||||
[[ ! -f "$input_file" ]] && die "File not found: $input_file"
|
||||
|
||||
STT_ENGINE="${STT_ENGINE:-$(detect_stt)}"
|
||||
[[ -z "$STT_ENGINE" ]] && die "No STT engine found. Run: ./meetings setup"
|
||||
|
||||
local binary
|
||||
binary="$(get_stt_binary "$STT_ENGINE")"
|
||||
[[ -z "$binary" ]] && die "Could not find $STT_ENGINE binary. Run: ./meetings setup"
|
||||
|
||||
local model
|
||||
if [[ -n "${STT_MODEL:-}" ]] && [[ -f "$STT_MODEL" ]]; then
|
||||
model="$STT_MODEL"
|
||||
else
|
||||
model="$(find_stt_model "$STT_ENGINE")" \
|
||||
|| die "No STT model found. Run: ./meetings setup"
|
||||
fi
|
||||
[[ ! -f "$model" ]] && die "Model file not found: $model"
|
||||
|
||||
command -v ffmpeg &>/dev/null || die "ffmpeg not found. Install it first."
|
||||
curl -sf "$OLLAMA_HOST/api/tags" &>/dev/null \
|
||||
|| die "Ollama server not responding at $OLLAMA_HOST. Run: ollama serve"
|
||||
|
||||
# ── create output directory ──
|
||||
local basename
|
||||
basename="$(date +%Y-%m-%d_%H%M)_$(basename "${input_file%.*}" | tr ' ' '_')"
|
||||
local outdir="$OUTPUT_DIR/$basename"
|
||||
mkdir -p "$outdir"
|
||||
|
||||
banner >&2
|
||||
echo " Input: $input_file" >&2
|
||||
echo " STT engine: $STT_ENGINE" >&2
|
||||
echo " STT model: $(basename "$model")" >&2
|
||||
echo " LLM model: $OLLAMA_MODEL" >&2
|
||||
echo " Language: $LANGUAGE" >&2
|
||||
echo " Output: $outdir/" >&2
|
||||
echo "" >&2
|
||||
|
||||
# ── step 1: convert ──
|
||||
step "Step 1/4 — Converting audio"
|
||||
local wav_file="$outdir/audio_16k.wav"
|
||||
convert_audio "$input_file" "$wav_file"
|
||||
|
||||
# ── step 2: transcribe ──
|
||||
step "Step 2/4 — Transcribing with $STT_ENGINE"
|
||||
local transcript
|
||||
case "$STT_ENGINE" in
|
||||
whisper) transcript="$(transcribe_whisper "$wav_file" "$model" "$binary")" ;;
|
||||
parakeet) transcript="$(transcribe_parakeet "$wav_file" "$model" "$binary")" ;;
|
||||
*) die "Unknown engine: $STT_ENGINE" ;;
|
||||
esac
|
||||
|
||||
if [[ -z "$transcript" || -z "$(echo "$transcript" | tr -d '[:space:]')" ]]; then
|
||||
die "Transcription produced empty output"
|
||||
fi
|
||||
|
||||
echo "$transcript" > "$outdir/transcript.txt"
|
||||
local word_count
|
||||
word_count=$(echo "$transcript" | wc -w | tr -d ' ')
|
||||
ok "Transcript: $word_count words"
|
||||
|
||||
# ── step 3: summarize ──
|
||||
step "Step 3/4 — Summarizing ($OLLAMA_MODEL)"
|
||||
local summarize_prompt
|
||||
summarize_prompt="Please provide a clear, concise summary of the following meeting transcript.
|
||||
Structure the summary with:
|
||||
- **Topic**: What the meeting was about
|
||||
- **Key Points**: Main topics discussed (3-5 bullet points)
|
||||
- **Decisions**: Any decisions that were made
|
||||
- **Open Questions**: Things left unresolved
|
||||
|
||||
TRANSCRIPT:
|
||||
$transcript"
|
||||
|
||||
local summary
|
||||
summary="$(ollama_generate "$summarize_prompt" "You are an expert meeting summarizer. Be concise but thorough. Always use markdown formatting.")"
|
||||
echo "$summary" > "$outdir/summary.md"
|
||||
ok "Summary saved"
|
||||
|
||||
# ── step 4: action items ──
|
||||
step "Step 4/4 — Extracting action items ($OLLAMA_MODEL)"
|
||||
local actions_prompt
|
||||
actions_prompt="Extract all action items, tasks, and commitments from the following meeting transcript.
|
||||
For each action item, provide:
|
||||
- **Who**: The person responsible (or 'Unassigned' if unclear)
|
||||
- **What**: The specific task or action
|
||||
- **When**: Any deadline mentioned (or 'No deadline specified')
|
||||
- **Priority**: High / Medium / Low (based on urgency and context)
|
||||
|
||||
Be thorough — capture every commitment, follow-up, and task mentioned or implied.
|
||||
Format as a numbered list.
|
||||
|
||||
TRANSCRIPT:
|
||||
$transcript"
|
||||
|
||||
local actions
|
||||
actions="$(ollama_generate "$actions_prompt" "You are an expert at extracting action items from meeting notes. Be thorough and specific. Always use markdown formatting.")"
|
||||
echo "$actions" > "$outdir/action_items.md"
|
||||
ok "Action items saved"
|
||||
|
||||
# ── combine report ──
|
||||
cat > "$outdir/report.md" <<REPORT
|
||||
# Meeting Report
|
||||
|
||||
**Date:** $(date '+%B %d, %Y at %H:%M')
|
||||
**Source:** $(basename "$input_file")
|
||||
**STT:** $STT_ENGINE | **LLM:** $OLLAMA_MODEL
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
$summary
|
||||
|
||||
---
|
||||
|
||||
## Action Items
|
||||
|
||||
$actions
|
||||
|
||||
---
|
||||
|
||||
## Full Transcript
|
||||
|
||||
$transcript
|
||||
REPORT
|
||||
|
||||
echo "" >&2
|
||||
ok "All done! Files saved to: $outdir/" >&2
|
||||
echo "" >&2
|
||||
echo " 📄 Report: $outdir/report.md" >&2
|
||||
echo " 📝 Transcript: $outdir/transcript.txt" >&2
|
||||
echo " 📋 Summary: $outdir/summary.md" >&2
|
||||
echo " ✅ Action Items: $outdir/action_items.md" >&2
|
||||
echo "" >&2
|
||||
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" >&2
|
||||
echo "" >&2
|
||||
head -50 "$outdir/report.md" | tail -35 >&2
|
||||
echo "" >&2
|
||||
echo "(showing preview — full report at $outdir/report.md)" >&2
|
||||
}
|
||||
|
||||
# ─── entry point ────────────────────────────────────────────────────
|
||||
case "${1:-help}" in
|
||||
setup) shift; cmd_setup ;;
|
||||
doctor) load_config; cmd_doctor ;;
|
||||
config) cmd_config ;;
|
||||
help|--help|-h)
|
||||
banner >&2
|
||||
cat <<'HELP'
|
||||
Usage:
|
||||
./meetings <audio_file> Run the full pipeline
|
||||
./meetings setup Install deps + download model
|
||||
./meetings doctor Check all dependencies
|
||||
./meetings config Show current configuration
|
||||
|
||||
Options (override config):
|
||||
--stt <whisper|parakeet> STT engine to use
|
||||
--model <path> Path to GGUF/GGML model file
|
||||
--llm <ollama_model> Ollama model for summarization
|
||||
--lang <code> Language code (default: en, auto for whisper)
|
||||
--threads <N> Number of threads for STT
|
||||
--output <dir> Output directory (default: .)
|
||||
|
||||
Environment variables:
|
||||
MEETINGS_DIR Config & models directory (default: ~/.meetings)
|
||||
MEETINGS_STT STT engine (whisper/parakeet)
|
||||
MEETINGS_STT_MODEL Path to model file
|
||||
MEETINGS_LLM Ollama model name (default: llama3.1:8b)
|
||||
MEETINGS_THREADS Thread count (default: 4)
|
||||
MEETINGS_LANG Language code (default: en)
|
||||
MEETINGS_OUTPUT Output directory (default: .)
|
||||
|
||||
Examples:
|
||||
# First time — install everything
|
||||
./meetings setup
|
||||
|
||||
# Process a meeting recording
|
||||
./meetings recording.mp3
|
||||
|
||||
# Use a different LLM model
|
||||
./meetings meeting.wav --llm llama3.1:8b
|
||||
|
||||
# Use parakeet with multilingual model
|
||||
./meetings call.wav --stt parakeet --lang auto
|
||||
|
||||
# Specify output directory
|
||||
./meetings interview.m4a --output ./reports
|
||||
HELP
|
||||
;;
|
||||
*)
|
||||
cmd_process "$@"
|
||||
;;
|
||||
esac
|
||||
Reference in New Issue
Block a user