muse-catch/onboard.js at main · KevPH2026/muse-catch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
// ===== Muse Onboarding Flow =====
const OB_DOMAINS=['AI/大模型','跨境/全球化','SaaS/企业服务','科技/互联网','职场/管理','创业/商业','产品/设计','教育/知识付费','金融/投资','生活方式','电商/零售','内容创作'];
const OB_STYLES=['干货教程','行业分析','个人故事/复盘','观点评论/锐评','案例拆解','趋势预测','实操指南','人物访谈'];
const OB_PLATFORMS=['抖音','小红书','X/Twitter','公众号','YouTube','B站','即刻','LinkedIn','Instagram'];
let obData={domain:'',style:'',platforms:'',link:''};
let obSel={domain:[],style:[],platforms:[]};

async function checkOnboarding(){
  try{const r=await fetch('/api/profile');const p=await r.json();
    if(p.exists && p.dna){renderDna(p);return}
    if(p.exists && !p.dna){showOnboarding(4);return}
    showOnboarding(1);
  }catch(e){}
}

function showOnboarding(step){
  document.getElementById('onboard-overlay').classList.remove('hide');
  renderObStep(step);
}

function renderObStep(s){
  const box=document.getElementById('onboard-box');
  const steps=[
    {title:t('onboard.hello'),sub:'告诉我你的创作方向，我会基于你的DNA帮你选题',body:`<div class="ob-tags" id="ob-domains">${OB_DOMAINS.map(d=>`<div class="ob-tag" onclick="toggleObTag(this,'domain')">${d}</div>`).join('')}</div><div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:11px;color:var(--dim)">${t('onboard.multi')}</span><button class="ob-btn" onclick="nextObStep(2)">${t('common.continue')}</button></div>`},
    {title:t('onboard.style_q'),sub:'你通常怎么写内容？',body:`<div class="ob-tags" id="ob-styles">${OB_STYLES.map(st=>`<div class="ob-tag" onclick="toggleObTag(this,'style')">${st}</div>`).join('')}</div><div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:11px;color:var(--dim)">${t('onboard.multi')}</span><div><button class="ob-btn ob-btn-ghost" onclick="nextObStep(1)">${t('common.back')}</button><button class="ob-btn" onclick="nextObStep(3)">${t('common.continue')}</button></div></div>`},
    {title:'你在哪些平台创作？',sub:'主力发布平台（可多选）',body:`<div class="ob-tags" id="ob-platforms">${OB_PLATFORMS.map(p=>`<div class="ob-tag" onclick="toggleObTag(this,'platform')">${p}</div>`).join('')}</div><div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:11px;color:var(--dim)">${t('onboard.multi')}</span><div><button class="ob-btn ob-btn-ghost" onclick="nextObStep(2)">${t('common.back')}</button><button class="ob-btn" onclick="nextObStep(4)">${t('common.continue')}</button></div></div>`},
    {title:'让我看看你的内容 🔍',sub:'丢一个你已有平台的链接，我会用AI分析你的创作DNA',body:`<input class="ob-input" id="ob-link" placeholder="粘贴你的抖音/X/小红书链接..." value="${obData.link}"><div style="margin:8px 0;font-size:11px;color:var(--dim)">或者直接分析你已有的灵感库 → <a href="#" onclick="analyzeDnaNow();return false" style="color:var(--purple-light)">立即分析</a></div><div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px"><div><button class="ob-btn ob-btn-ghost" onclick="nextObStep(3)">${t('common.back')}</button><button class="ob-btn ob-btn-ghost" onclick="skipOb()">${t('onboard.later')}</button></div><button class="ob-btn" onclick="startDnaAnalysis()">${t('onboard.analyze')}</button></div>`},
    {title:'正在了解你... 🧠',sub:'AI 正在读你的内容，提炼创作DNA',body:`<div class="ob-loading"><div class="spinner"></div><div class="status-text active" id="ob-status">正在分析内容关键词...</div><div class="status-text" id="ob-status2" style="margin-top:4px">提取你的语气和表达习惯</div><div class="status-text" id="ob-status3" style="margin-top:2px">识别你的内容舒适区和盲区</div></div>`}
  ];
  box.innerHTML=`<h2>${steps[s-1].title}</h2><div class="ob-sub">${steps[s-1].sub}</div><div class="ob-step active">${steps[s-1].body}</div>`;
  obData._step=s;
}

function toggleObTag(el,cat){
  el.classList.toggle('sel');
  const val=el.textContent;
  if(el.classList.contains('sel')){if(!obSel[cat].includes(val))obSel[cat].push(val)}
  else{obSel[cat]=obSel[cat].filter(v=>v!==val)}
}

function nextObStep(step){
  if(step===2)obData.domain=obSel.domain.join(',');
  if(step===3)obData.style=obSel.style.join(',');
  if(step===4)obData.platforms=obSel.platforms.join(',');
  if(step===4){saveProfile();obData.link=document.getElementById('ob-link')?.value||''}
  renderObStep(step);
}

function skipOb(){saveProfile();document.getElementById('onboard-overlay').classList.add('hide')}

async function saveProfile(){
  try{await fetch('/api/profile',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({domain:obData.domain,style:obData.style,platforms:obData.platforms,profile_links:obData.link})})}catch(e){}
}

async function analyzeDnaNow(){await saveProfile();await startDnaAnalysis()}

async function startDnaAnalysis(){
  const link=document.getElementById('ob-link')?.value||'';
  if(link)obData.link=link;await saveProfile();renderObStep(5);
  const upd=s=>{const e=document.getElementById(s);if(e){e.classList.add('active');e.textContent='✅ '+e.textContent.replace('✅ ','')}};
  setTimeout(()=>upd('ob-status'),1200);setTimeout(()=>upd('ob-status2'),2500);setTimeout(()=>upd('ob-status3'),3800);
  try{
    const r=await fetch('/api/profile/dna',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(link?{url:link}:{})});
    const d=await r.json();
    if(d.ok&&d.dna){document.getElementById('onboard-overlay').classList.add('hide');renderDna({dna:d.dna,exists:true});showToast(t('onboard.understood'))}
    else{document.getElementById('onboard-overlay').classList.add('hide');showToast(t('onboard.dna_failed'))}
  }catch(e){document.getElementById('onboard-overlay').classList.add('hide')}
}

function renderDna(p){
  if(!p.dna)return;
  document.getElementById('dna-badge').style.display='flex';
  document.getElementById('dna-persona').textContent=p.dna.persona||'创作者DNA画像';
  // Use same stats format as displayDNA
  const normStrengths = typeof normalizeStrengths==='function' ? normalizeStrengths(p.dna.strengths) : (p.dna.strengths||[]);
  const scoreAvg = normStrengths.length ? Math.round(normStrengths.reduce((s,x)=>s+(typeof x==='object'?x.score||0:x||0),0)/normStrengths.length) : 0;
  document.getElementById('dna-stats').textContent = t('dna.dimensions',{n:normStrengths.length,score:scoreAvg,m:(p.dna.topics||[]).length});

  // Handle both old (strings) and new (objects) strengths format
  const strengths=normStrengths;  // Use normalized strengths for consistency
  const strengthHtml=strengths.length
    ? strengths.map(s=>`<div style="display:flex;justify-content:space-between;margin:2px 0"><span>✅ ${esc(s.name)}</span><span style="color:var(--purple-light);font-weight:700">${s.score}</span></div>`).join('')
    : '';

  document.getElementById('dna-detail').innerHTML=`
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12px;line-height:1.8">
      <div><strong style="color:var(--purple-light)">${t('onboard.dna_persona')}</strong><br>${esc(p.dna.persona||'-')}</div>
      <div><strong style="color:var(--purple-light)">${t('onboard.dna_tone')}</strong><br>${esc(p.dna.tone||(p.dna.tone_tags||[]).join(' · '))} ${esc(p.dna.sentence_style||'')}</div>
      <div><strong style="color:var(--purple-light)">${t('onboard.dna_structure')}</strong><br>${esc(p.dna.structure||'-')}</div>
      <div><strong style="color:var(--purple-light)">${t('onboard.dna_audience')}</strong><br>${esc(p.dna.audience_hook||'-')}</div>
      <div><strong style="color:var(--purple-light)">${t('onboard.dna_strengths')}</strong><br>${strengthHtml||'-'}</div>
      <div><strong style="color:var(--purple-light)">${t('onboard.dna_blindspots')}</strong><br>${(p.dna.blind_spots||[]).map(s=>'⚠️ '+esc(s)).join('<br>')||'-'}</div>
      <div style="grid-column:1/-1"><strong style="color:var(--purple-light)">${t('onboard.dna_tip')}</strong><br>${esc(p.dna.growth_tip||'-')}</div>
    </div>`;

  // Draw radar with normalized strengths
  if(strengths.length&&typeof drawRadar==='function'){
    setTimeout(()=>drawRadar(strengths),200);
  }
  document.getElementById('dna-panel').classList.add('show');
}

function toggleDnaPanel(){document.getElementById('dna-panel').classList.toggle('show')}

function resetOnboarding(){
  obSel={domain:[],style:[],platforms:[]};obData={domain:'',style:'',platforms:'',link:''};
  document.getElementById('dna-badge').style.display='none';
  document.getElementById('dna-panel').classList.remove('show');
  showOnboarding(1);
}