// playground.jsx — interactive AI tools powered by OpenRouter // ─── OpenRouter API layer ───────────────────────────────────────────────────── // NOTE: Replace with your own API key from https://openrouter.ai/keys const API_KEY = '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'; window.ai = { complete: async (messages, json = false, retries = 2) => { for (let attempt = 0; attempt <= retries; attempt++) { try { const res = await fetch('https://openrouter.ai/api/v1/chat/completions', { method: 'POST', headers: { 'Authorization': `Bearer ${API_KEY}`, 'Content-Type': 'application/json', 'HTTP-Referer': window.location.href, 'X-Title': 'Jawwad Automation' }, body: JSON.stringify({ model: 'openai/gpt-oss-120b:free', messages: typeof messages === 'string' ? [{ role: 'user', content: messages }] : messages, ...(json ? { response_format: { type: 'json_object' } } : {}), max_tokens: json ? 2000 : 1000 }) }); if (!res.ok) { const err = await res.json().catch(() => ({})); const errorMsg = err?.error?.message || `API error ${res.status}: ${res.statusText}`; console.error('OpenRouter error:', err); throw new Error(errorMsg); } const data = await res.json(); const text = data.choices?.[0]?.message?.content || ''; if (!text) { if (attempt < retries) { console.log(`Empty response, retrying... (${attempt + 1}/${retries})`); await new Promise(r => setTimeout(r, 1000 * (attempt + 1))); continue; } throw new Error('AI model returned empty response. Please try again.'); } if (json) { const m = text.match(/\{[\s\S]*\}/); if (!m) throw new Error('No JSON in response'); let raw = m[0]; // Pass 1: direct parse try { return JSON.parse(raw); } catch {} // Pass 2: strip trailing commas before } or ] raw = raw.replace(/,(\s*[}\]])/g, '$1'); try { return JSON.parse(raw); } catch {} // Pass 3: strip unescaped control chars inside string values raw = raw.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, ' '); try { return JSON.parse(raw); } catch {} // Pass 4: truncate at last valid closing brace const lastBrace = raw.lastIndexOf('}'); if (lastBrace > 0) { try { return JSON.parse(raw.slice(0, lastBrace + 1)); } catch {} } throw new Error('AI returned malformed JSON. Try again.'); } return text; } catch (e) { if (attempt === retries) { console.error('AI completion error:', e); throw e; } console.log(`Error, retrying... (${attempt + 1}/${retries})`, e.message); await new Promise(r => setTimeout(r, 1000 * (attempt + 1))); } } } }; const Spinner = () => ( ); // ─── Markdown → clean HTML (for improved resume display) ───────────────────── const renderMd = (text) => { if (!text) return { __html: '' }; text = text.replace(/[-–—]*\s*(end of resume|end resume)\s*[-–—]*/gi,'').trim(); let s = text .replace(/&/g,'&').replace(//g,'>') // headers (### or ## or #) .replace(/^###\s+(.+)$/gm,'
$1
') .replace(/^##\s+(.+)$/gm,'
$1
') .replace(/^#\s+(.+)$/gm,'
$1
') // ALL-CAPS section headers (bare lines like "PROFESSIONAL SUMMARY") .replace(/^([A-Z][A-Z\s&\/\-·]{4,})$/gm,'
$1
') // bold .replace(/\*\*(.+?)\*\*/g,'$1') // italic (avoid single * in bullets) .replace(/(?$1') // horizontal rules .replace(/^---+$/gm,'
') // pipe table separator rows → skip .replace(/^\|[\s\-:|]+\|[\s\-:|]*$/gm,'') // pipe table data rows → key/value row .replace(/^\|\s*([^|\n]+?)\s*\|\s*([^|\n]+?)\s*\|.*$/gm,(_,k,v)=>{ if(/^[-:\s]+$/.test(k)) return ''; return `
${k}${v}
`; }) // bullet items .replace(/^[-•]\s+(.+)$/gm,'
•$1
') // double newline → gap .replace(/\n\n+/g,'
') // single newline → br .replace(/\n/g,'
'); return { __html: s }; }; // Strip markdown for plain-text download const mdClean = (text) => text .replace(/^#{1,3}\s*/gm,'') .replace(/\*\*/g,'').replace(/\*/g,'') .replace(/^---+$/gm,'') .replace(/^\|[\s\-:|]+\|[\s\-:|]*$/gm,'') .replace(/^\|(.+)\|$/gm,(_,row)=>row.split('|').map(c=>c.trim()).filter(Boolean).join(' | ')) .replace(/[-–—]*\s*(end of resume|end resume)\s*[-–—]*/gi,'') .replace(/\n{3,}/g,'\n\n') .trim(); // Sanitize to jsPDF WinAnsi (Latin-1 subset) — kills monospace fallback const pdfSafe = (text) => text .replace(/[•·▪▸▶◆◉◈]/g, '-') .replace(/[─━═─]/g, '-') .replace(/[""]/g, '"').replace(/['']/g, "'") .replace(/[–—]/g, '-') .replace(/…/g, '...') .replace(/[^\x00-\xFF]/g, ''); // ─── Tool 1: Automation ROI Audit ───────────────────────────────────────────── // Most valuable for Jawwad's visitors: shows them exactly what automation is worth const ROIAudit = () => { const [task, setTask] = React.useState('Manually entering new client details into our CRM after every sales call'); const [freq, setFreq] = React.useState('10'); const [mins, setMins] = React.useState('20'); const [rate, setRate] = React.useState('75'); const [out, setOut] = React.useState(null); const [loading, setLoading] = React.useState(false); const [err, setErr] = React.useState(''); const annualHours = ((+freq * +mins) / 60 * 52).toFixed(0); const annualCost = ((+freq * +mins) / 60 * 52 * +rate).toFixed(0); const run = async () => { if (!task.trim()) return; setLoading(true); setOut(null); setErr(''); try { const result = await window.ai.complete([ { role: 'system', content: 'You are an automation consultant. Return ONLY valid JSON, no commentary before or after.' }, { role: 'user', content: `Analyse this manual business task and return a JSON automation report. Task: "${task}" Frequency: ${freq} times/week Time per run: ${mins} minutes Hourly cost: $${rate}/hr Annual hours wasted: ${annualHours}h Annual cost: $${annualCost} Return this exact JSON shape: { "headline": "One punchy sentence about the cost of this task", "pain_level": "low|medium|high|critical", "tools": ["tool1", "tool2", "tool3"], "approach": "2-sentence plain English description of how to automate this", "complexity": "Quick win|Medium build|Complex system", "build_days": "X–Y days", "payback": "Pays back in X weeks/months", "steps": [ {"label": "Step name", "detail": "What happens"}, {"label": "Step name", "detail": "What happens"}, {"label": "Step name", "detail": "What happens"} ], "verdict": "One strong sentence on whether they should automate this NOW" }` } ], true); setOut(result); } catch (e) { setErr(e.message || 'Something went wrong. Try again.'); } setLoading(false); }; const painColor = { low: 'var(--accent)', medium: 'var(--accent)', high: 'var(--danger)', critical: 'var(--danger)' }; const complexColor = { 'Quick win': 'var(--success)', 'Medium build': 'var(--accent)', 'Complex system': 'var(--ai)' }; return (
Automation · ROI

Automation ROI Audit

Describe a task you do manually. Get the real annual cost and a concrete automation plan.