AI闈㈤儴姘旇川鍒嗘瀽路闈㈢浉瑙ｈ 路浜斿畼姘旇川路榫欐収浜?/title> <meta name="description" content="AI闈㈤儴姘旇川鍒嗘瀽宸ュ叿锛岄€氳繃闈㈤儴鐗瑰緛鍒嗘瀽浣犵殑姘旇川绫诲瀷鍜屾€ф牸鍊惧悜銆侫I鐪嬮潰鐩革紝浜斿畼姘旇川瑙ｈ锛岄緳鎱т簯銆?> <meta name="keywords" content="AI闈㈤儴鍒嗘瀽,闈㈤儴姘旇川,闈㈢浉鍒嗘瀽,闈㈤儴鎬ф牸,AI鐪嬮潰鐩?浜斿畼姘旇川,闈㈢浉瑙ｈ,闈㈢浉娴嬭瘯,闈㈤儴鐗瑰緛鍒嗘瀽,姘旇川鍒嗘瀽,闈㈢浉璇勫垎,AI闈㈢浉,闈㈤儴姘旇川娴嬭瘎,鍦ㄧ嚎闈㈢浉,鍏嶈垂闈㈢浉鍒嗘瀽,榫欐収浜?> <meta name="author" content="榫欐収浜戠鎶€"> <meta name="robots" content="index, follow, max-image-preview:large"> <link rel="apple-touch-icon" href="/icon-192.png"> <link rel="manifest" href="/manifest.json"> <link rel="canonical" href="https://榫欐収浜?com/face.html"> <meta name="baidu-site-verification" content="LHY-PENDING"> <meta name="google-site-verification" content="LHY-PENDING"> <meta name="theme-color" content="#2563EB"> <meta property="og:type" content="website"> <meta property="og:site_name" content="榫欐収浜?> <meta property="og:title" content="AI闈㈤儴姘旇川鍒嗘瀽路闈㈢浉鎬ф牸AI瑙ｈ 路榫欐収浜?> <meta property="og:description" content="榫欐収浜慉I闈㈤儴姘旇川鍒嗘瀽鈥斺€擜I鍒嗘瀽浣犵殑闈㈤儴姘旇川涓庢€ф牸鐗瑰緛锛屼粠浜斿畼瑙ｈ浣犵殑鍐呭湪姘旇川銆傚垎浜湅鍙嬪湀鍏嶈垂瑙ｉ攣锛?> <meta property="og:image" content="https://榫欐収浜?com/og-cover.jpg"> <meta property="og:image:width" content="900"> <meta property="og:image:height" content="471"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:image:alt" content="榫欐収浜?AI璇佷欢鐓?鑰佺収鐗囦慨澶?AI娴嬭瘎"> <meta property="og:url" content="https://榫欐収浜?com/face.html"> <meta property="og:locale" content="zh_CN"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="AI闈㈤儴姘旇川鍒嗘瀽路闈㈢浉鎬ф牸AI瑙ｈ 路榫欐収浜?> <meta name="twitter:description" content="榫欐収浜慉I闈㈤儴姘旇川鍒嗘瀽鈥斺€擜I鍒嗘瀽浣犵殑闈㈤儴姘旇川涓庢€ф牸鐗瑰緛锛屼粠浜斿畼瑙ｈ浣犵殑鍐呭湪姘旇川銆傚垎浜湅鍙嬪湀鍏嶈垂瑙ｉ攣锛?> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> <style> html { height: 100%; } body { overflow-x: hidden; width: 100%; min-height: 100%; background: #F5F7FA; background-attachment: fixed; } body { overflow-x: hidden; width: 100%; font-family: 'PingFang SC', 'Microsoft YaHei', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', emoji, sans-serif; color: #1F2937; margin: 0; padding: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-tap-highlight-color: transparent; } :root { --c-primary: #2563EB; --c-primary-light: #3B82F6; --c-primary-dark: #0D4AD3; --c-gold: #2563EB; --c-gold-light: #2563EB; --c-gold-dark: #2563EB; --c-bg: #F5F7FA; --c-bg-warm: #F5F7FA; --c-card-bg: #FFFFFF; --c-card-border: rgba(37,99,235,0.25); --c-text-main: #FFFFFF; --c-text-sub: rgba(107,114,128,0.9); --c-text-muted: #5A6378; --c-btn-grad: linear-gradient(135deg, #2563EB, #3B82F6); --c-btn-gold: linear-gradient(135deg, #2563EB, #2563EB); --radius: 14px; --radius-lg: 20px; --shadow-card: 0 4px 20px rgba(37,99,235,0.25); --max-width: 480px; } .home-screen { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 60px; animation: fadeInUp 0.6s ease; } .logo-icon { width: 80px; height: 80px; background: var(--c-btn-grad); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 24px; box-shadow: var(--shadow-btn); } .home-title { font-size: 26px; font-weight: 700; color: var(--c-primary-dark); margin-bottom: 8px; letter-spacing: 1px; } .home-subtitle { font-size: 14px; color: var(--c-text-sub); margin-bottom: 36px; line-height: 1.6; } .btn-upload { width: 100%; max-width: 320px; padding: 16px 32px; background: var(--c-btn-grad); color: #F5F7FA; border: none; border-radius: 50px; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-btn); transition: transform 0.2s; font-family: inherit; letter-spacing: 1px; } .btn-upload:active { transform: scale(0.97); } .home-counter { margin-top: 24px; font-size: 13px; color: var(--c-text-muted); } .back-home { position: absolute; top: 16px; left: 16px; z-index: 10; } .back-home a { display: flex; align-items: center; gap: 4px; text-decoration: none; font-size: 13px; color: var(--c-text-sub); padding: 6px 12px; background: #F5F7FA; border-radius: 20px; } /* */ .perm-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #F5F7FA; z-index: 200; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.25s ease; padding: 20px; } .perm-modal-content { background: #F5F7FA; border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; max-width: 340px; width: 100%; animation: slideUp 0.3s ease; } .perm-modal-icon { font-size: 52px; margin-bottom: 16px; } .perm-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--c-text-main); } .perm-modal-desc { font-size: 13px; color: var(--c-text-sub); margin-bottom: 24px; line-height: 1.7; } .perm-modal-desc .highlight { color: var(--c-primary); font-weight: 600; } .btn-perm-allow { width: 100%; padding: 14px; background: var(--c-btn-grad); color: #F5F7FA; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 10px; font-family: inherit; } .btn-perm-deny { width: 100%; padding: 12px; background: #F5F7FA; border: none; color: var(--c-text-sub); border-radius: 50px; font-size: 14px; cursor: pointer; font-family: inherit; } .upload-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #F5F7FA; z-index: 100; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.25s ease; } .upload-modal-content { width: 100%; max-width: var(--max-width); background: #F5F7FA; border-radius: 20px 20px 0 0; padding: 24px 20px 36px; animation: slideUp 0.3s ease; } .upload-modal-title { text-align: center; font-size: 17px; font-weight: 600; margin-bottom: 24px; } .upload-option { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--c-bg); border-radius: var(--radius); margin-bottom: 12px; cursor: pointer; } .upload-option:active { background: var(--c-bg-warm); } .upload-option-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .upload-option-icon.camera { background: #F5F7FA; } .upload-option-icon.gallery { background: #16294D; } .upload-option-text { font-size: 15px; font-weight: 500; } .upload-option-sub { font-size: 12px; color: var(--c-text-sub); margin-top: 2px; } .btn-cancel { width: 100%; padding: 14px; margin-top: 8px; background: #F5F7FA; border: none; border-radius: var(--radius); font-size: 15px; color: var(--c-text-sub); cursor: pointer; font-family: inherit; } .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 20px; animation: fadeInUp 0.4s ease; } .loading-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 28px; border: 3px solid var(--c-gold); box-shadow: 0 0 30px rgba(37,99,235,0.2); } .loading-ring { width: 60px; height: 60px; border: 3px solid var(--c-divider); border-top-color: var(--c-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px; } .loading-text { font-size: 16px; color: var(--c-text-sub); margin-bottom: 8px; } .loading-progress { font-size: 13px; color: var(--c-text-muted); } .result-screen { padding: 24px 20px 100px; animation: fadeInUp 0.5s ease; } .result-header { text-align: center; margin-bottom: 20px; } .result-avatar-wrap { position: relative; display: inline-block; } .result-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-gold); } .result-gender-badge { position: absolute; bottom: 2px; right: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #F5F7FA; font-size: 13px; display: flex; align-items: center; justify-content: center; } .result-score-card { background: var(--c-card-bg); border: 1px solid var(--c-card-border); border-radius: var(--radius-lg); padding: 24px 20px; text-align: center; margin-bottom: 16px; box-shadow: var(--shadow-card); } .result-score-label { font-size: 13px; color: var(--c-text-sub); margin-bottom: 8px; } .result-score-num { font-size: 56px; font-weight: 800; background: var(--c-btn-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .result-score-unit { font-size: 18px; color: var(--c-primary); font-weight: 600; } .result-face-desc { background:#F5F7FA, rgba(15,20,36,0.85)); border: 1px solid var(--c-card-border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; font-size: 14px; color: var(--c-text-main); line-height: 1.8; box-shadow: var(--shadow-card); } .result-disclaimer { font-size: 12px; color: var(--c-text-muted); text-align: center; margin-bottom: 16px; } .trait-section { margin-bottom: 20px; } .trait-section-title { font-size: 17px; font-weight: 700; color: var(--c-primary-dark); text-align: center; margin-bottom: 12px; letter-spacing: 1px; } .trait-card { background:#F5F7FA, rgba(15,20,36,0.85)); border: 1px solid rgba(37,99,235,0.18); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; box-shadow: 0 0 16px rgba(37,99,235,0.05), inset 0 0 0 1px rgba(0,0,0,0.1); position: relative; overflow: hidden; } .trait-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #F5F7FA; } .dim-row { display: flex; align-items: center; gap: 12px; } .dim-icon { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; } .dim-info { flex: 1; min-width: 0; } .dim-name { font-size: 14px; font-weight: 600; color: #1F2937; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .dim-score { font-size: 12px; color: #2563EB; font-weight: 700; text-shadow: 0 0 6px rgba(37,99,235,0.4); margin-left: auto; } .dim-bar { height: 6px; background: #F5F7FA; border-radius: 3px; overflow: hidden; position: relative; } .dim-bar-fill { height: 100%; background: #F5F7FA; border-radius: 3px; box-shadow: 0 0 10px rgba(37,99,235,0.4); transition: width 0.6s ease; } .dim-stars { font-size: 13px; letter-spacing: 0.5px; flex-shrink: 0; text-shadow: 0 0 6px rgba(37,99,235,0.4); } .star-on { color: #2563EB; text-shadow: 0 0 6px rgba(37,99,235,0.5); } .star-off { color: rgba(0,0,0,0.15); } .trait-card-detail { font-size: 13px; color: rgba(75,85,99,1); line-height: 1.7; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(37,99,235,0.2); } .unlock-section { text-align: center; margin: 20px 0; } .btn-unlock { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 36px; background: var(--c-btn-pale); color: #F5F7FA; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: rgba(244,122,139,0.4) 0 4px 15px; transition: transform 0.2s; font-family: inherit; justify-content: center;} .btn-unlock:active { transform: scale(0.97); } .unlock-hint { font-size: 12px; color: var(--c-text-muted); margin-top: 10px; } .result-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; padding-bottom: 10px; } .btn-action { flex: 1; padding: 14px 16px; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; transition: transform 0.2s; font-family: inherit; border: none; } .btn-action.share { background: #F5F7FA; color: var(--c-primary); border: 1.5px solid var(--c-primary); } .btn-action.retest { background: var(--c-btn-pale-soft); color: var(--c-primary-dark); border: 1.5px solid var(--c-btn-pale); } .btn-action:active { transform: scale(0.97); } .global-disclaimer { margin-top: 20px; padding: 14px 16px; background: #F5F7FA; border-radius: var(--radius-sm); font-size: 11px; color: var(--c-text-muted); text-align: center; line-height: 1.6; } .cross-promo { margin-top:24px; padding:16px; background: #F5F7FA; border-radius:12px; border:1px solid rgba(37,99,235,0.15); } .cross-promo-title { font-size: 14px; font-weight: 600; color: var(--c-text-sub); margin-bottom: 12px; text-align: center; } .cross-promo-links { display: flex; flex-direction: column; gap: 8px; } .cross-promo-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--c-bg-warm); border-radius: var(--radius-sm); text-decoration: none; color: var(--c-text-main); font-size: 14px; transition: transform 0.2s; } .cross-promo-link:active { transform: scale(0.97); } .cross-promo-icon { font-size: 20px; } .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #F5F7FA; color: #F5F7FA; padding: 14px 24px; border-radius: 10px; font-size: 14px; z-index: 300; animation: fadeIn 0.2s ease; pointer-events: none; } .ad-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #F5F7FA; z-index: 150; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.25s ease; padding: 20px; } .ad-modal-content { background: #F5F7FA; border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; max-width: 340px; width: 100%; animation: slideUp 0.3s ease; } .ad-modal-icon { font-size: 48px; margin-bottom: 16px; } .ad-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .ad-modal-sub { font-size: 13px; color: var(--c-text-sub); margin-bottom: 20px; line-height: 1.6; } .btn-ad-watch { width: 100%; padding: 14px; background: var(--c-btn-pale); color: #F5F7FA; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 10px; font-family: inherit; justify-content: center;} .btn-ad-share { width: 100%; padding: 12px; background: none; border: 1.5px solid var(--c-gold); color: var(--c-gold-dark); border-radius: 50px; font-size: 14px; cursor: pointer; font-family: inherit; } .btn-ad-close { background: none; border: none; color: var(--c-text-muted); font-size: 13px; cursor: pointer; margin-top: 8px; font-family: inherit; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .pulse { animation: pulse 1.5s ease-in-out infinite; } .text-warn { color: #f0ad4e; font-weight: 600; } /* Blurred card */ .blurred-card { filter: blur(5px); opacity: 0.45; pointer-events: none; user-select: none; } </style> <link rel="stylesheet" href="/js/pricing.css"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="/js/face-api.js" onerror="var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.16/dist/face-api.js';document.head.appendChild(s);"></script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "AI鎬庝箞鐪嬮潰鐩革紵", "acceptedAnswer": { "@type": "Answer", "text": "涓婁紶姝ｉ潰鐓х墖鍒伴緳鎱т簯闈㈤儴姘旇川鍒嗘瀽椤甸潰锛孉I浼氬垎鏋愪簲瀹樼壒寰併€侀潰閮ㄨ疆寤撱€佹皵璐ㄧ被鍨嬶紝缁欏嚭闈㈢浉瑙ｈ鎶ュ憡銆? } }, { "@type": "Question", "name": "AI闈㈢浉鍒嗘瀽鍑嗗悧锛?, "acceptedAnswer": { "@type": "Answer", "text": "AI闈㈢浉鍒嗘瀽鍩轰簬闈㈤儴鐗瑰緛鍜屽嚑浣曟瘮渚嬶紝缁撴灉浠呬緵鍙傝€冨ū涔愶紝涓嶆瀯鎴愪笓涓氬缓璁€? } } ] } </script> <meta property="article:tag" content="AI闈㈤儴鍒嗘瀽"> <meta property="article:tag" content="闈㈤儴姘旇川"> <meta property="article:tag" content="闈㈢浉鍒嗘瀽"> <meta property="article:tag" content="闈㈤儴鎬ф牸"> <meta property="article:tag" content="AI鐪嬮潰鐩?> <meta property="article:tag" content="浜斿畼姘旇川"> <meta property="article:tag" content="闈㈢浉瑙ｈ"> <meta property="article:tag" content="闈㈢浉娴嬭瘯"> <meta property="article:tag" content="闈㈤儴鐗瑰緛鍒嗘瀽"> <meta property="article:tag" content="姘旇川鍒嗘瀽"> <link rel="stylesheet" href="/css/tech-ui.css?v=20260721c"> <link rel="stylesheet" href="/css/lh-design.css?v=20260721c"> <link rel="stylesheet" href="/css/lh-clean-override.css?v=20260721c"> <link rel="stylesheet" href="/css/lh-mp-theme.css?v=20260722"> </head> <body class="lh-bg-tech"> <div id="app" v-cloak> <div class="back-home"><a href="/">鈫?杩斿洖棣栭〉</a></div> <div class="home-screen" v-if="step === 'home'"> <div class="logo-icon pulse">馃敭</div> <h1 class="home-title">AI闈㈤儴姘旇川鍒嗘瀽路鎺㈢浣犵殑鎬ф牸鐗瑰緛</h1> <p class="home-subtitle">涓婁紶鐓х墖锛孉I鏅鸿兘鍒嗘瀽浣犵殑闈㈤儴姘旇川<br>鐓х墖浠呭湪鎮ㄧ殑璁惧涓婂鐞嗭紝涓嶄細涓婁紶鍒版湇鍔″櫒</p> <button class="btn-upload" @click="showUploadOptions = true">馃摲涓婁紶鐓х墖寮€濮嬪垎鏋?/button> <p class="home-counter" v-if="serviceCount > 0">宸蹭负 {{ formatNumber(serviceCount) }} 浣嶇敤鎴峰垎鏋愯繃闈㈤儴姘旇川</p> </div> <div class="perm-modal-title">鐓х墖浣跨敤鎺堟潈</div> <div class="perm-modal-desc"> AI闈㈤儴姘旇川鍒嗘瀽闇€瑕佽闂偍鐨勭収鐗囥€?br> <span class="highlight">鐓х墖浠呭湪鎮ㄧ殑璁惧涓婂鐞嗭紝<br> 涓嶄細涓婁紶鍒颁换浣曟湇鍔″櫒銆?br> 鍒嗘瀽瀹屾瘯鍚庢祻瑙堝櫒灏嗚嚜鍔ㄦ竻闄ょ収鐗囩紦瀛樸€? </div> <div class="loading-screen" v-if="step === 'loading'"> <img v-if="imagePreview" :src="imagePreview" class="loading-avatar"> <div class="loading-ring"></div> <p class="loading-text">AI姝ｅ湪鍒嗘瀽浣犵殑闈㈤儴鐗瑰緛...</p> <p class="loading-progress">{{ loadingStatus }}</p> </div> <div class="result-screen" v-if="step === 'result' && faceData"> <div class="result-header"> <div class="result-avatar-wrap"> <img :src="imagePreview" class="result-avatar"> <span class="result-gender-badge">{{ faceData.gender === 'male' ? '鈾? : '鈾€' }} </div> </div> <div class="result-score-card" v-if="unlocked"> <div class="result-score-label">闈㈤儴姘旇川缁煎悎璇勫垎</div> <span class="result-score-num">{{ faceData.score }}</span> <span class="result-score-unit">鍒?/span> <div style="font-size:12px;color:var(--c-text-muted);margin-top:4px">婊″垎100鍒?路鍩轰簬闈㈤儴鐗瑰緛鍒嗘瀽</div> </div> <div v-if="!unlocked" style="text-align:center;padding:16px;background:rgba(37,99,235,0.1);border-radius:12px;border:1px solid rgba(37,99,235,0.2);margin:12px 16px;"> <div style="font-size:14px;color:var(--c-text-muted)">瑙ｉ攣鍚庢煡鐪嬪畬鏁磋瘎鍒嗘姤鍛?/div> </div> <div class="result-face-desc" v-if="unlocked">{{ faceData.faceDesc }}</div> <div v-if="!unlocked" style="padding:12px 16px;font-size:14px;color:var(--c-text-muted);text-align:center">瑙ｉ攣鍚庢煡鐪嬪畬鏁撮潰閮ㄥ垎鏋愯В璇?/div> <p class="result-disclaimer" v-if="unlocked">鈿狅笍鏈唴瀹逛粎渚涘ū涔愬弬鑰冿紝骞堕潪涓撲笟蹇冪悊瀛﹀垎鏋?/p> <div class="trait-section"> <div v-for="(t, i) in traits" :key="t.id" v-if="i < 2" class="trait-card"> <div class="dim-row"> <span class="dim-icon">{{ t.icon }}</span> <div class="dim-info"> <div class="dim-name">{{ t.name }}</div> <div class="dim-desc">{{ t.desc }}</div> </div> </div> </div> <div class="unlock-section" v-if="!unlocked"> <button class="btn-assess-unlock" @click="showPayModal">馃敁瑙ｉ攣瀹屾暣姘旇川鎶ュ憡</button> </div> <div v-for="(t, i) in traits" :key="t.id + '_blur'" v-if="i >= 2" class="trait-card blurred-card"> <div class="dim-row"> <span class="dim-icon">{{ t.icon }}</span> <div class="dim-info"> <div class="dim-name">{{ t.name }}</div> <div class="dim-desc">{{ t.desc }}</div> </div> </div> </div> </div> <div class="result-actions"> <button class="btn-action retest" @click="handleRetest">馃攧閲嶆柊鍒嗘瀽</button> </div> <div class="global-disclaimer"> 鈿狅笍鍏ㄩ儴鍐呭浠呬綔涓鸿叮鍛冲ū涔愬弬鑰冿紝鏃犵瀛﹂娴嬩綔鐢紝涓嶅彲浣滀负浜虹敓鍐崇瓥渚濇嵁銆?br><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">婊嘔CP澶?024038048鍙?2</a> </div> <div class="cross-promo"> <div class="cross-promo-title">馃敭 AI娴嬭瘎路鏇村濂界帺</div> <div class="cross-promo-links"> <a class="cross-promo-link" href="/personality.html"><span class="cross-promo-icon">馃 AI鎬ф牸娴嬭瘯路鍙戠幇鐪熷疄鐨勪綘</a> <a class="cross-promo-link" href="/beauty.html"><span class="cross-promo-icon">鉁?AI棰滃€煎垎鏋?路娴嬫祴浣犵殑棰滃€?/a> <a class="cross-promo-link" href="/name-score.html"><span class="cross-promo-icon">馃摑鍚嶅瓧鏂囧寲鎬ф牸娴嬭瘎路鎺㈢储鍚嶅瓧鍐呮兜</a> <a class="cross-promo-link" href="/daily-fortune.html"><span class="cross-promo-icon">馃彯鎬ф牸鍊惧悜瓒ｅ懗娴嬭瘯路姣忔棩涓€娴?/a> <a class="cross-promo-link" href="/tarot.html"><span class="cross-promo-icon">馃儚 AI濉旂綏鐗?路閫忚浣犵殑蹇冩剰</a> <a class="cross-promo-link" href="/past-life.html"><span class="cross-promo-icon">馃尭 AI鍓嶄笘浠婄敓路鎺㈠浣犵殑鍓嶄笘</a> </div> </div> <div class="cross-promo"> <div class="cross-promo-title">馃摳 AI璇佷欢鐓у伐鍏风</div> <div class="cross-promo-links"> <a class="cross-promo-link" href="/idphoto.html"><span class="cross-promo-icon">馃帹 AI鎹㈠簳鑹茶瘉浠剁収</a> <a class="cross-promo-link" href="/beautify.html"><span class="cross-promo-icon">鉁?AI缇庨绮句慨</a> <a class="cross-promo-link" href="/crop.html"><span class="cross-promo-icon">鉁傦笍 AI鏅鸿兘瑁佸壀灏哄</a> <a class="cross-promo-link" href="/layout.html"><span class="cross-promo-icon">馃枿锔?鐩哥焊鎺掔増鎵撳嵃</a> <a class="cross-promo-link" href="/professional.html"><span class="cross-promo-icon">馃捈鑱屼笟褰㈣薄鐓?/a> </div> </div> </div> <div class="upload-modal" v-if="showUploadOptions" @click.self="showUploadOptions = false"> <div class="upload-modal-content"> <div class="upload-modal-title">閫夋嫨鐓х墖鏉ユ簮</div> <div class="upload-option" @click="$refs.fileCamera.click()"> <div class="upload-option-icon camera">馃摳</div> <div> <div class="upload-option-text">鎷嶇収</div> <div class="upload-option-sub">浣跨敤鐩告満鎷嶆憚鐓х墖</div> </div> </div> <div class="upload-option" @click="$refs.fileGallery.click()"> <div class="upload-option-icon gallery">馃柤锔?/div> <div> <div class="upload-option-text">浠庣浉鍐岄€夋嫨</div> <div class="upload-option-sub">閫夋嫨宸叉湁鐓х墖</div> </div> </div> <button class="btn-cancel" @click="showUploadOptions = false">鍙栨秷</button> </div> </div> <div class="toast" v-if="toastMsg" v-text="toastMsg"></div> <input type="file" ref="fileCamera" accept="image/*" capture="environment" style="display:none" @change="handleFileSelect"> <input type="file" ref="fileGallery" accept="image/*" style="display:none" @change="handleFileSelect"> </div> <script> const EXTRAVERSION_TEMPLATES = [ '澶栧悜鍊惧悜鏄庢樉锛屼箰浜庣ぞ浜や簰鍔紝鍦ㄧ兢浣撲腑寰€寰€鑳借嚜鐒跺惛寮曟敞鎰忓姏銆備綘鍠勪簬琛ㄨ揪鑷繁锛屼笌浜虹浉澶勬椂鑳藉娲昏穬姘旀皼銆?, '鎬ф牸鍋忓鍚戯紝鍠滄涓庝汉浜ゆ祦鍒嗕韩銆備綘鐨勭儹鎯呭拰娲诲姏甯稿父鎰熸煋韬竟鐨勪汉锛屾槸鍏稿瀷鐨勭ぞ浜ゆ帹鍔ㄨ€呫€?, '澶栧悜鎸囨暟杈冮珮锛屽鏂扮幆澧冨拰闄岀敓浜洪€傚簲蹇€備綘浜彈绀句氦甯︽潵鐨勮兘閲忎氦鎹紝鐙鏃朵篃涓嶄細鎰熷埌鏃犺亰銆?, '绀句氦鍊惧悜閫備腑锛屼綘鏃㈣兘浜彈鐑椆鐨勮仛浼氾紝涔熻兘瀹変簬鐙鐨勫畞闈欍€傚睘浜庡脊鎬хぞ浜ゅ瀷浜烘牸锛屽湪涓嶅悓鍦哄悎鍒囨崲鑷銆?, '鎬ф牸寮€鏈楀ぇ鏂癸紝鍠勪簬寤虹珛浜洪檯鍏崇郴銆備綘鐨勭湡璇氬拰鍧︾巼璁╀汉鎰熷埌鑸掗€傦紝瀹规槗鑾峰緱浠栦汉鐨勪俊浠诲拰濂芥劅銆?, '浣犲叿鏈夎緝濂界殑绀句氦閫傚簲鎬э紝鏃笉杩囧垎渚濊禆浠栦汉涔熶笉瀹屽叏灏侀棴銆傚湪鐔熸倝鐨勭幆澧冧腑鑳藉緢濂藉湴灞曠幇鑷垜銆?, '鎬ф牸寮€鏀惧害杈冮珮锛屾効鎰忓皾璇曟柊浜嬬墿鍜屾帴瑙︿笉鍚岀殑浜恒€備綘鐨勫ソ濂囧績鍜屽寘瀹规€ц浣犵殑绀句氦鍦堜笉鏂墿澶с€?, '鏁翠綋澶栧悜绋嬪害涓瓑鍋忎笂锛屼綘鐨勪翰鍜屽姏璁╀汉鎰挎剰闈犺繎銆傞€傚綋澶氬弬涓庨泦浣撴椿鍔紝鑳芥縺鍙戜綘鏇村鐨勬綔鑳姐€? ]; const AGREEABLENESS_TEMPLATES = [ '浜插拰鍔涚獊鍑猴紝寰呬汉鍙嬪杽娓╁拰锛屽瘜鏈夊悓鐞嗗績銆備綘鍠勪簬鐞嗚В浠栦汉鐨勬劅鍙楋紝鍦ㄤ汉闄呭叧绯讳腑鎵紨鐫€鍜岃皭浣胯€呯殑瑙掕壊銆?, '鎬ф牸娓╁拰鍖呭锛屼笉鍠滃啿绐佷簤鎵с€備綘鍊惧悜浜庣敤娌熼€氬拰鐞嗚В鏉ヨВ鍐冲垎姝э紝鏄洟闃熶腑涓嶅彲鎴栫己鐨勬鼎婊戝墏銆?, '浜插拰鎸囨暟杈冮珮锛屽浜虹湡璇氫笉璁鹃槻銆備綘鐨勫杽鑹拰浣撹创璁╁懆鍥翠汉鎰熷埌娓╂殩锛屽缓绔嬩簡娣卞帤鐨勪汉闄呭叧绯荤綉缁溿€?, '浣犲叿鏈夎緝寮虹殑鍚堜綔绮剧锛屽湪鍥㈤槦涓兘澶熷緢濂藉湴閰嶅悎浠栦汉銆備箰浜庡姪浜虹殑鍝佽川璁╀綘鍦ㄤ汉缇や腑澶囧彈灏婇噸銆?, '寰呬汉鎺ョ墿鍛ㄥ埌浣撹创锛岃兘澶熸晱閿愬療瑙変粬浜虹殑鎯呯华鍙樺寲銆備綘鐨勬儏鍟嗚緝楂橈紝鎿呴暱澶勭悊寰鐨勪汉闄呬簰鍔ㄣ€?, '鎬ф牸涓甫鏈夊ぉ鐒剁殑鍚岀悊蹇冿紝瀹规槗绔欏湪浠栦汉瑙掑害鎬濊€冮棶棰樸€傝繖绉嶅搧璐ㄨ浣犲湪浜插瘑鍏崇郴涓〃鐜板嚭鑹层€?, '鏁翠綋浜插拰鍔涜壇濂斤紝浣犻噸瑙嗕汉闄呭叧绯荤殑璐ㄩ噺鑰岄潪鏁伴噺銆傝櫧鐒舵湅鍙嬪湀涓嶅ぇ锛屼絾姣忎竴娈靛叧绯婚兘寰堟繁鍏ャ€?, '浣犵殑鍖呭搴﹁緝楂橈紝瀵逛笉鍚屾€ф牸鍜岃鐐归兘鑳戒繚鎸佸紑鏀炬€佸害銆傝繖绉嶅鍏冨寲鐨勬帴绾宠兘鍔涙槸闈炲父闅惧緱鐨勫搧璐ㄣ€? ]; const STABILITY_TEMPLATES = [ '鎯呯华绋冲畾鎬ц緝楂橈紝闈㈠鍘嬪姏鏃惰兘淇濇寔鍐烽潤鍜岀悊鎬с€備綘鍠勪簬鑷垜璋冭妭锛屼笉鏄撹澶栫晫鍙樺寲鎵€骞叉壈銆?, '鎬ф牸娌夌ǔ鍐呮暃锛屽仛浜嬫湁鏉′笉绱娿€備綘鍊惧悜浜庢繁鎬濈啛铏戝悗鍐嶈鍔紝杩欑绋抽噸璁╀綘鍦ㄥ叧閿椂鍒诲€煎緱淇¤禆銆?, '娌夌ǔ鎸囨暟杈冮珮锛屾墽琛屽姏寮轰笖鏈夎€愬績銆備綘鍠勪簬鍒跺畾璁″垝骞朵竴姝ユ鎺ㄨ繘锛岄暱鏈熷潥鎸佺殑鑳藉姏鏄綘鐨勬牳蹇冧紭鍔裤€?, '鎯呯华璋冭妭鑳藉姏鑹ソ锛岄亣鍒版尗鎶樻椂鑳藉杈冨揩鎭㈠銆備綘鐨勫績鐞嗛煣鎬ц浣犲湪鍥伴毦闈㈠墠琛ㄧ幇鍑鸿壊銆?, '鏁翠綋蹇冩€佸钩绋筹紝涓嶈繃鍒嗙劍铏戜篃涓嶈繃鍒嗘斁鏉俱€備綘鎳傚緱鍦ㄧ揣寮犲拰鏀炬澗涔嬮棿鎵惧埌骞宠　锛屾槸涓€绉嶅仴搴风殑鐘舵€併€?, '浣犲湪澶у鏁版儏鍐典笅鑳戒繚鎸佺悊鎬ф€濊€冿紝杩欐槸浣犲喅绛栬川閲忚緝楂樼殑閲嶈鍘熷洜銆傚伓灏旂殑灏忔儏缁弽鑰屽娣讳簡浜烘儏鍛炽€?, '鎬ф牸鍋忔矇绋冲瀷锛屽仛浜嬮潬璋辨湁鎷呭綋銆備綘鐨勬壙璇哄拰璐ｄ换鎰熻浜烘斁蹇冿紝鏄潪甯搁噸瑕佺殑涓汉鍝佽川銆?, '鎯呯华绠＄悊鑳藉姏杈冨ソ锛屽嵆浣垮湪鍘嬪姏鐜涓嬩篃鑳界淮鎸佸熀鏈殑鐘舵€併€傝繖绉嶇ǔ瀹氭€у浣犵殑浜嬩笟鍙戝睍寰堟湁甯姪銆? ]; const OPENNESS_TEMPLATES = [ '鎬濈淮娲昏穬寮€鏀撅紝瀵规柊浜嬬墿鍏呮弧濂藉鍜屾帰绱㈡銆備綘鎰挎剰灏濊瘯涓嶅悓鐨勪綋楠岋紝杩欑寮€鏀惧績鎬佽浣犵殑鐢熸椿涓板瘜澶氬僵銆?, '瀵屾湁鎯宠薄鍔涘拰鍒涢€犲姏锛屽枩娆粠涓嶅悓瑙掑害鐪嬮棶棰樸€備綘鐨勫垱鏂版€濈淮鍦ㄩ潰瀵瑰鏉傛儏鍐垫椂寰€寰€鑳芥壘鍒扮嫭鐗圭殑瑙ｅ喅鏂规銆?, '鍒涙柊鎸囨暟杈冮珮锛屼笉婊¤冻浜庣幇鐘跺拰甯歌銆備綘鎬绘槸鍦ㄥ鎵炬敼鍠勫拰绐佺牬鐨勬満浼氾紝杩欑杩涘彇蹇冩帹鍔ㄤ綘涓嶆柇鍓嶈繘銆?, '瀵硅壓鏈拰缇庢湁杈冨己鐨勬劅鐭ュ姏锛屽彲鑳藉湪鍒涙剰绫绘椿鍔ㄤ腑鎵惧埌涔愯叮銆備綘鐨勫缇庤兘鍔涘拰鎯呮劅涓板瘜搴︽槸浣犵殑鐙壒浼樺娍銆?, '浣犲枩娆㈠涔犲拰鎬濊€冿紝瀵规柊鐭ヨ瘑鏈夊ぉ鐒剁殑娓存眰銆傝繖绉嶆眰鐭ユ璁╀綘鐨勬€濇兂濮嬬粓淇濇寔娲诲姏鍜屾柊椴滄劅銆?, '鎬ф牸涓殑寮€鏀炬€ц浣犲湪璺ㄩ鍩熶氦娴佷腑娓稿垉鏈変綑銆備綘涓嶆嫎娉ヤ簬鍗曚竴瑙嗚锛岃兘澶熻瀺浼氳疮閫氫笉鍚岀殑鎬濇兂銆?, '浣犲叿鏈変竴瀹氱殑鍐掗櫓绮剧锛屼笉鎬曞皾璇曟湭鐭ョ殑棰嗗煙銆傚湪閫傚綋璇勪及椋庨櫓鐨勫墠鎻愪笅锛岃繖绉嶈儐璇嗚兘甯︽潵涓板帤鐨勫洖鎶ャ€?, '鎬濈淮鐏垫椿鎬ц緝濂斤紝鑳藉蹇€熼€傚簲鍙樺寲鍜屾柊鐜銆備綘鐨勯€傚簲鑳藉姏鏄繖涓揩閫熷彉鍖栨椂浠ｄ腑鐨勫疂璐佃储瀵屻€? ]; const FACE_INTRO = [ '闈㈤儴杞粨绾挎潯娴佺晠鍗忚皟锛屼簲瀹樺垎甯冨寑绉拌嚜鐒躲€傛暣浣撶粰浜烘俯鍜屽ぇ鏂圭殑鍗拌薄锛屽睘浜庤€愮湅鍨嬫皵璐紝瓒婄浉澶勮秺鏈夊懗閬撱€?, '闈㈤儴鐗瑰緛椴滄槑鏈夎鲸璇嗗害锛屼簲瀹樻瘮渚嬪緱褰撱€備綘鐨勭嫭鐗规皵璐ㄨ浜鸿繃鐩毦蹇橈紝涓嶉殢娉㈤€愭祦鑷垚涓€娲俱€?, '闈㈤儴缁撴瀯瀵圭О骞宠　锛屾劅瀹樺垎甯冨拰璋愩€傛暣浣撴皵璐ㄤ紭闆呬粠瀹癸紝缁欎汉绋抽噸鍙潬鐨勬劅瑙夈€?, '闈㈠鑸掑睍鑷劧锛岀湁瀹囬棿閫忛湶鍑烘俯鍜屼笌鑷俊銆備綘鐨勯潰閮ㄨ瑷€浼犻€掑嚭绉瀬鐨勭敓娲绘€佸害銆? ]; const FACE_EXPRESSION = [ '鍢磋寰井涓婃壃鐨勫姬搴﹂€忛湶鍑轰箰瑙傚紑鏈楃殑鎬ф牸搴曡壊锛岀溂绁炰腑闂儊鐫€瀵圭敓娲荤殑濂藉涓庣儹鎯呫€傞潰閮ㄨ倢鑲夌殑鏀炬澗绋嬪害鏄剧ず鍑轰綘鍐呭績鐨勪粠瀹广€?, '鐪肩鍧氬畾鑰屾湁绁為噰锛岄€忛湶鍑烘灉鏁㈠拰涓撴敞鐨勭壒璐ㄣ€傜湁澶磋垝灞曠殑鐘舵€佽鏄庝綘蹇冩€佸钩鍜岋紝涓嶆槗琚悙浜嬪洶鎵般€?, '闈㈤儴琛ㄦ儏涓板瘜鑷劧锛屽井绗戞椂甯告寕鍦ㄨ劯涓娿€備綘鐨勮〃鎯呰瑷€灞曠幇鍑虹湡璇氬拰鍙嬪杽鐨勫唴蹇冧笘鐣岋紝鎰熸煋鍔涘己銆?, '鐪肩娓╁拰娣遍們锛屾祦闇插嚭涓€鑲℃矇绋冲拰鏅烘収鐨勬皵璐ㄣ€傞潰閮ㄧ嚎鏉℃煍鍜岋紝鏄剧ず鍑轰綘鎬ф牸涓殑鍖呭涓庣悊瑙ｃ€? ]; const FACE_FEATURE = [ '棰濆ご楗辨弧銆佺溂绁炴竻婢堬紝缁煎悎鏄剧ず鍑烘€濈淮娲昏穬銆佸涔犺兘鍔涜緝寮虹殑鐗瑰緛銆備綘鍠勪簬瑙傚療鍜屾€濊€冿紝瀵逛笘鐣屼繚鎸佸ソ濂囧績銆?, '鐪夊舰鑸掑睍銆侀蓟鍨嬬姝ｏ紝浣撶幇鍑烘€ф牸涓殑姝ｇ洿涓庡潶璇氥€備綘鍋氫簨鏈夊師鍒欙紝涓轰汉璇氭伋鍙潬銆?, '闈㈤儴楠ㄧ浉鍖€绉般€佽倢鑲夌嚎鏉℃煍鍜岋紝鏄剧ず鍑烘€ф牸涓殑骞宠　涓庡拰璋愩€備綘鍊惧悜浜庤拷姹傚伐浣滃拰鐢熸椿鐨勫钩琛°€?, '浜斿畼鍒嗗竷鍚堢悊銆侀潰閮ㄦ瘮渚嬪崗璋冿紝鍙嶆槧鍑哄績鐞嗙姸鎬佺殑鏁翠綋鍋ュ悍鍜岀ǔ瀹氥€備綘瀵硅嚜宸辨湁娓呮櫚鐨勮鐭ャ€? ]; let faceApiReady = false; const { createApp } = Vue; createApp({ data() { return { step: 'home', showUploadOptions: false, showAdModal: false, imagePreview: null, imageFile: null, faceData: null, traits: [], unlocked: false, loadingStatus: '', serviceCount: 12346, toastMsg: null, toastTimer: null } }, async mounted() { this.checkSavedState(); this.fetchServiceCount(); this.setupWxShare(); await this.loadFaceApi(); setInterval(() => { this.serviceCount += Math.floor(Math.random() * 3) + 1; }, 5000); }, methods: { async loadFaceApi() { if (typeof faceapi === 'undefined') { console.warn('face-api.js not loaded, will use local analysis'); return; } try { const MODEL_URL = '/models/face-api/'; await Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL), faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL), faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL), faceapi.nets.ageGenderNet.loadFromUri(MODEL_URL) ]); faceApiReady = true; console.log('face-api.js models loaded'); } catch(e) { console.warn('face-api.js local model failed, trying CDN...'); try { const CDN_URL = 'https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.16/model/'; await Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri(CDN_URL), faceapi.nets.faceLandmark68Net.loadFromUri(CDN_URL), faceapi.nets.faceExpressionNet.loadFromUri(CDN_URL), faceapi.nets.ageGenderNet.loadFromUri(CDN_URL) ]); faceApiReady = true; console.log('face-api.js CDN fallback loaded'); } catch(e2) { console.warn('face-api.js CDN fallback also failed:', e2.message); } } }, checkSavedState() { try { const saved = localStorage.getItem('face_temperament_state'); if (saved) { const data = JSON.parse(saved); if (data.faceData && data.imagePreview) { this.step = 'result'; this.faceData = data.faceData; this.imagePreview = data.imagePreview; this.traits = data.traits || []; } } } catch(e) {} }, async fetchServiceCount() { try { const r = await fetch('/api/service-count'); const d = await r.json(); if (d.code === 0 && d.count > 0) this.serviceCount = d.count; } catch(e) {} }, async setupWxShare() { try { const r = await fetch('/api/wx-jsconfig?url=' + encodeURIComponent(window.location.href)); const d = await r.json(); if (d.code === 0 && d.config && window.wx) { window.wx.config({ debug: false, appId: d.config.appId, timestamp: d.config.timestamp, nonceStr: d.config.nonceStr, signature: d.config.signature, jsApiList: ['updateAppMessageShareData','updateTimelineShareData'] }); window.wx.ready(() => { const sd = { title: 'AI闈㈤儴姘旇川鍒嗘瀽路鎺㈢浣犵殑鎬ф牸鐗瑰緛', desc: '涓婁紶鐓х墖锛孉I鏅鸿兘鍒嗘瀽浣犵殑闈㈤儴姘旇川涓庢€ф牸鐗瑰緛锛?, link: window.location.href, imgUrl: 'https://榫欐収浜?com/og-cover.jpg' }; window.wx.updateAppMessageShareData(sd); window.wx.updateTimelineShareData(sd); }); } } catch(e) {} }, formatNumber(n) { return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }, showToast(msg, dur=2000) { this.toastMsg = msg; clearTimeout(this.toastTimer); this.toastTimer = setTimeout(()=>{this.toastMsg=null;}, dur); }, triggerUpload(type) { this.showUploadOptions = false; if (type === 'camera') { this.$refs.fileCamera.value = ''; this.$refs.fileCamera.click(); } else { this.$refs.fileGallery.value = ''; this.$refs.fileGallery.click(); } }, handleFileSelect(e) { const file = e.target.files[0]; if (!file) return; if (!file.type.startsWith('image/')) { this.showToast('璇烽€夋嫨鍥剧墖鏂囦欢'); return; } if (file.size > 10 * 1024 * 1024) { this.showToast('鍥剧墖澶у皬涓嶈兘瓒呰繃10MB'); return; } this.imageFile = file; const reader = new FileReader(); reader.onload = (ev) => { const img = new Image(); img.onload = async () => { const compressed = this.compressImage(img, 600, 0.75); this.imagePreview = compressed; await this.startAnalysis(img); }; img.src = ev.target.result; }; reader.readAsDataURL(file); }, compressImage(img, maxSize, quality) { let w = img.width, h = img.height; if (w > h && w > maxSize) { h = Math.round(h * maxSize / w); w = maxSize; } else if (h > maxSize) { w = Math.round(w * maxSize / h); h = maxSize; } const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, w, h); return canvas.toDataURL('image/jpeg', quality); }, async startAnalysis(img) { this.step = 'loading'; this.loadingStatus = '姝ｅ湪妫€娴嬮潰閮?..'; const steps = ['姝ｅ湪妫€娴嬮潰閮?..', '鍒嗘瀽闈㈤儴鐗瑰緛鐐?..', '瑙ｆ瀽琛ㄦ儏鏁版嵁...', '鐢熸垚鎬ф牸璇勪及...']; let idx = 0; const interval = setInterval(() => { idx++; if (idx < steps.length) this.loadingStatus = steps[idx]; }, 900); const startTime = Date.now(); const minLoad = 3000 + Math.random() * 1500; let faceResult = null; if (faceApiReady) { try { const imgEl = img.width > 600 ? (() => { const c = document.createElement('canvas'); c.width = 600; c.height = Math.round(img.height * 600 / img.width); c.getContext('2d').drawImage(img, 0, 0, c.width, c.height); return c; })() : img; const detection = await faceapi.detectSingleFace(imgEl, new faceapi.TinyFaceDetectorOptions({ inputSize: 320, scoreThreshold: 0.3 }) ).withFaceLandmarks().withFaceExpressions().withAgeAndGender(); if (detection) { faceResult = { expressions: detection.expressions, landmarks: detection.landmarks, box: detection.detection.box, gender: detection.gender, age: detection.age }; console.log('Face detected via face-api.js'); } } catch(e) { console.warn('face-api.js analysis failed:', e.message); } } if (!faceResult) { try { const compressed = this.compressImage(img, 600, 0.6); const r = await fetch('/api/face-analyze', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: compressed }) }); const d = await r.json(); if (d.code === 0 && d.faces && d.faces.length > 0) { faceResult = { facepp: d.faces[0] }; } } catch(e) { console.warn('Face++ fallback failed:', e.message); } } const elapsed = Date.now() - startTime; const remaining = minLoad - elapsed; if (remaining > 0) await new Promise(r => setTimeout(r, remaining)); clearInterval(interval); this.imageFile = null; this.parseResult(faceResult); this.step = 'result'; this.saveState(); }, parseResult(result) { let score, gender = 'female', expressions = {}; let hasRealData = false; if (result) { if (result.expressions) { expressions = result.expressions; hasRealData = true; // 浣跨敤鐪熷疄鎬у埆妫€娴嬬粨鏋滐紙ageGenderNet > Face++ 闄嶇骇 > 榛樿鍊硷級 if (result.gender && (result.gender === 'male' || result.gender === 'female')) { gender = result.gender; } else { gender = 'female'; // 榛樿濂虫€э紝鍚庣画鍙敱Face++瑕嗙洊 } const happyScore = (expressions.happy || 0) * 20; const neutralScore = (expressions.neutral || 0) * 15; const surprisedScore = (expressions.surprised || 0) * 10; const baseScore = 50 + happyScore + neutralScore + surprisedScore; score = Math.min(98, Math.max(45, Math.round(baseScore))); } else if (result.facepp) { const f = result.facepp; hasRealData = true; gender = (f.attributes && f.attributes.gender && f.attributes.gender.value) ? f.attributes.gender.value.toLowerCase() : 'female'; const em = (f.attributes && f.attributes.emotion) ? f.attributes.emotion : {}; const happyScore = (em.happiness || 0) * 20; const neutralScore = (em.neutral || 0) * 15; const surprisedScore = (em.surprise || 0) * 10; const baseScore = 50 + happyScore + neutralScore + surprisedScore; score = Math.min(98, Math.max(45, Math.round(baseScore))); } } if (!hasRealData) { gender = Math.random() > 0.5 ? 'male' : 'female'; score = Math.floor(Math.random() * 35) + 55; } const f1 = FACE_INTRO[Math.floor(Math.random() * FACE_INTRO.length)]; const f2 = FACE_EXPRESSION[Math.floor(Math.random() * FACE_EXPRESSION.length)]; const f3 = FACE_FEATURE[Math.floor(Math.random() * FACE_FEATURE.length)]; const faceDesc = `${f1}${f2}${f3}`; this.faceData = { score, gender, faceDesc }; this.traits = this.generateTraits(score); }, generateTraits(score) { const seed = score / 100; const pick = arr => arr[Math.floor(Math.random() * arr.length)]; return [ { id: 'extraversion', icon: '馃挰', name: '澶栧悜鎸囨暟', stars: Math.min(5, Math.max(1, Math.round(seed * 4.5 + 1))), detail: pick(EXTRAVERSION_TEMPLATES) }, { id: 'agreeableness', icon: '馃', name: '浜插拰鎸囨暟', stars: Math.min(5, Math.max(1, Math.round(seed * 5))), detail: pick(AGREEABLENESS_TEMPLATES) }, { id: 'stability', icon: '馃', name: '娌夌ǔ鎸囨暟', stars: Math.min(5, Math.max(1, Math.round(seed * 4))), detail: pick(STABILITY_TEMPLATES) }, { id: 'openness', icon: '馃挕', name: '鍒涙柊鎸囨暟', stars: Math.min(5, Math.max(1, Math.round(seed * 5))), detail: pick(OPENNESS_TEMPLATES) } ]; }, saveState() { try { localStorage.setItem('face_temperament_state', JSON.stringify({ faceData: this.faceData, imagePreview: this.imagePreview, traits: this.traits, timestamp: Date.now() })); } catch(e) {} }, showPayModal() { const self = this; showAssessUnlockModal('face', { onAdUnlock() { self.unlocked = true; self.saveState(); self.shareResult(); }, onShareUnlock() { self.unlocked = true; self.saveState(); self.shareResult(); }, }); }, handleShare() { if (window.wx && window.wx.ready) this.showToast('璇风偣鍑诲彸涓婅銆屸€︺€嶅垎浜粰鏈嬪弸鎴栨湅鍙嬪湀'); else { const link = window.location.href; if (navigator.clipboard) navigator.clipboard.writeText(link).then(() => this.showToast('閾炬帴宸插鍒讹紒鍒嗕韩缁欐湅鍙嬩滑鍚?)); else this.showToast('璇锋墜鍔ㄥ鍒堕摼鎺ュ垎浜?); } }, shareResult() { this.showToast('宸茶В閿侊紒璇锋埅鍥句繚瀛樻偍鐨勬€ф牸瑙ｈ'); }, triggerUnlock() { const self = this; showAssessUnlockModal('face', { onAdUnlock() { self.unlocked = true; self.saveState(); self.showToast('鉁?瑙ｉ攣鎴愬姛锛?); }, onShareUnlock() { self.unlocked = true; self.saveState(); self.showToast('鉁?瑙ｉ攣鎴愬姛锛?); } onPayUnlock() { startPayment('face', function() { self.unlocked = true; self.saveState(); self.downloadResult(); }); }, });; }, generateAI() { if(!this.aiContent) this._loadAI(); }, handleRetest() { localStorage.removeItem('face_temperament_state'); this.step = 'home'; this.imagePreview = null; this.imageFile = null; this.faceData = null; this.traits = []; this.unlocked = false; } } }).mount('#app'); </script> <script src="/js/pricing.js?v=20260721d"></script> <script src="https://qzs.gdtimg.com/union/res/union_sdk/page/unjs/un.js"></script> <script> (function() { var params = new URLSearchParams(window.location.search); var ref = params.get('ref'); if (ref && ref.startsWith('sh_')) { fetch('https://lhy-h5.pages.dev/api/share-verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: ref, toolKey: 'face' }) }).catch(function() {}); } var STORED_NICK = localStorage.getItem('lh_nickname'); if (!STORED_NICK) { document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { var overlay = document.createElement('div'); overlay.id = 'lh-login-overlay'; overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:999998;display:flex;align-items:center;justify-content:center;padding:20px;'; overlay.innerHTML = '<div style="background:#fff;border-radius:20px;padding:32px 24px;max-width:320px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);">' + '<div style="font-size:56px;margin-bottom:12px;">👤</div>' + '<div style="font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:6px;">欢迎进入龙慧云</div>' + '<div style="font-size:13px;color:#888;margin-bottom:24px;line-height:1.6;">请输入你的昵称，开始AI测评之旅</div>' + '<input id="lh-login-nick" type="text" placeholder="输入昵称" maxlength="12" style="width:100%;padding:12px 14px;border:1.5px solid #e0e0e0;border-radius:12px;font-size:15px;box-sizing:border-box;margin-bottom:14px;outline:none;" />' + '<button id="lh-login-btn" style="width:100%;padding:14px;background:linear-gradient(135deg,#165DFF,#2979FF);color:#fff;border:none;border-radius:50px;font-size:15px;font-weight:700;cursor:pointer;">确定进入</button>' + '<div id="lh-login-err" style="font-size:12px;color:#ff4d4f;margin-top:8px;display:none;"></div>' + '</div>'; document.body.appendChild(overlay); var btn = document.getElementById('lh-login-btn'); var input = document.getElementById('lh-login-nick'); var errEl = document.getElementById('lh-login-err'); input.focus(); input.addEventListener('keyup', function(e) { if (e.key === 'Enter') btn.click(); }); btn.addEventListener('click', function() { var nick = input.value.trim(); if (!nick) { errEl.textContent = '璇疯緭鍏ユ樀绉?; errEl.style.display = 'block'; return; } localStorage.setItem('lh_nickname', nick); overlay.remove(); if (window.__vueApp) window.__vueApp.config.globalProperties.$lhSetNickname && window.__vueApp.config.globalProperties.$lhSetNickname(nick); }); }, 100); }); } })(); </script> <script src="/js/lh-particles-v2.js"></script> <script src="/js/lh-design-v2.js"></script> </body>  </html>