614 lines
31 KiB
HTML
614 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Eternal AI - 在记忆与陪伴中，遇见更懂你的 AI</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="styles.css?v=7" />
|
||
</head>
|
||
<body>
|
||
<a href="#landing" class="skip-link">跳到主内容</a>
|
||
<main class="app">
|
||
<!-- P1: Landing View -->
|
||
<section id="landing" class="view view--landing active">
|
||
<div class="cards">
|
||
<article class="card card--characters" data-action="open-characters">
|
||
<div class="card__frame" aria-hidden="true"></div>
|
||
<div class="card__content">
|
||
<h2 class="card__title" id="library-name">我的 [XXX]</h2>
|
||
<p class="card__desc" id="characters-desc">登录后管理你的角色</p>
|
||
<button class="btn btn--outline" type="button" id="characters-btn">登录 / 注册</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="card card--distill" data-action="open-distill">
|
||
<div class="card__frame" aria-hidden="true"></div>
|
||
<div class="card__content">
|
||
<h2 class="card__title">蒸馏前任</h2>
|
||
<p class="card__desc">留住你心里的 ta</p>
|
||
<button class="btn btn--primary" type="button">
|
||
开始蒸馏
|
||
<span class="btn__arrow">→</span>
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<footer class="landing-footer">
|
||
<a href="#" class="footer-link" data-action="open-about">关于 Eternal AI →</a>
|
||
<a href="#" class="footer-link" data-action="open-onboarding">我是创作者，申请入驻 →</a>
|
||
</footer>
|
||
</section>
|
||
|
||
<!-- Auth View (Login / Register) -->
|
||
<section id="auth" class="view view--auth">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name">Eternal AI</span>
|
||
<span class="creator-brand__step">登录 / 注册</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<div class="auth-tabs" role="tablist" aria-label="登录与注册">
|
||
<button class="auth-tab active" type="button" role="tab" aria-selected="true" data-tab="login">登录</button>
|
||
<button class="auth-tab" type="button" role="tab" aria-selected="false" data-tab="register">注册</button>
|
||
</div>
|
||
|
||
<form id="login-form" class="auth-form active" autocomplete="on" data-form="login">
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">手机号 / 用户名</span>
|
||
<input class="field__input" name="account" type="text" autocomplete="username" placeholder="请输入手机号或用户名" required />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">密码</span>
|
||
<input class="field__input" name="password" type="password" autocomplete="current-password" placeholder="请输入密码" required />
|
||
</label>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn--primary btn--block" type="submit">登录</button>
|
||
</div>
|
||
<p class="auth-hint">登录后可查看角色库、管理已订阅的角色。</p>
|
||
</form>
|
||
|
||
<form id="register-form" class="auth-form" autocomplete="on" data-form="register">
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">手机号 / 用户名</span>
|
||
<input class="field__input" name="account" type="text" autocomplete="username" placeholder="设置登录账号" required />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">密码</span>
|
||
<input class="field__input" name="password" type="password" autocomplete="new-password" placeholder="设置密码" required minlength="6" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">确认密码</span>
|
||
<input class="field__input" name="confirmPassword" type="password" autocomplete="new-password" placeholder="再次输入密码" required />
|
||
</label>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn--primary btn--block" type="submit">注册</button>
|
||
</div>
|
||
<p class="auth-hint">注册即代表同意《用户协议》和《隐私政策》。</p>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- P2: Role Library View -->
|
||
<section id="role-library" class="view view--role-library">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name" id="library-title">我的角色库</span>
|
||
<span class="creator-brand__step">选择一个角色开始对话</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<div class="role-list" id="role-list" aria-live="polite" aria-label="角色列表"></div>
|
||
|
||
<div class="empty-state" id="library-empty" hidden>
|
||
<p class="empty-state__text">你还没有绑定专属创作者</p>
|
||
<p class="empty-state__hint">通过创作者的专属链接进入即可绑定</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- P3: Role Detail View -->
|
||
<section id="role-detail" class="view view--role-detail">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back-to-library" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name" id="detail-name">角色详情</span>
|
||
<span class="creator-brand__step">了解 ta 并订阅</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<div class="detail-page" id="detail-page">
|
||
<div class="detail-hero" id="detail-hero"></div>
|
||
<h2 class="detail-title" id="detail-role-name"></h2>
|
||
<p class="detail-desc" id="detail-role-desc"></p>
|
||
<div class="detail-price" id="detail-price"></div>
|
||
|
||
<div class="form-actions" id="detail-actions-pre">
|
||
<button class="btn btn--primary btn--block" type="button" data-action="pay">立即订阅</button>
|
||
</div>
|
||
|
||
<div class="detail-paid" id="detail-paid" hidden>
|
||
<div class="detail-qr" id="detail-qr"></div>
|
||
<p class="detail-paid__hint">扫码添加后，请将下方头像保存并设置为该联系人的备注头像，获得更完整的体验</p>
|
||
<div class="detail-avatar" id="detail-avatar"></div>
|
||
<button class="btn btn--outline btn--block" type="button" data-action="download-avatar">下载角色头像</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- P4: Distill Ex View -->
|
||
<section id="distill" class="view view--distill-page">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name">Eternal AI</span>
|
||
<span class="creator-brand__step">蒸馏前任</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<div class="distill-page">
|
||
<a href="#" class="distill-quick" data-action="contact-wechat">没耐心？直接加微信定制沟通 →</a>
|
||
|
||
<div class="distill-section">
|
||
<h3 class="distill-section__title">什么是蒸馏前任？</h3>
|
||
<p class="distill-section__text">把你们曾经的聊天记录、语音习惯、相处细节交给我们，技术团队会将其蒸馏成一个可对话的 AI 前任。ta 会记得你们的暗号、说话节奏，甚至那些只有你们懂的小情绪。</p>
|
||
</div>
|
||
|
||
<div class="distill-section">
|
||
<h3 class="distill-section__title">适合谁？</h3>
|
||
<ul class="distill-list">
|
||
<li>想好好告别，却还没说完话的人</li>
|
||
<li>希望把一段关系以安全方式封存的人</li>
|
||
<li>想借 AI 完成自我疗愈、练习表达的人</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="distill-section">
|
||
<h3 class="distill-section__title">服务流程</h3>
|
||
<ol class="distill-steps">
|
||
<li><span>①</span> 下单付款</li>
|
||
<li><span>②</span> 客服指导导出聊天记录</li>
|
||
<li><span>③</span> 上传至指定云盘</li>
|
||
<li><span>④</span> 技术人员处理蒸馏</li>
|
||
<li><span>⑤</span> 完成后获得专属二维码和头像</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="distill-price">
|
||
<span class="distill-price__label">标准版</span>
|
||
<span class="distill-price__value">¥ 199</span>
|
||
<span class="distill-price__unit">/ 次</span>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn btn--primary btn--block" type="button" data-action="pay-distill">立即下单</button>
|
||
</div>
|
||
|
||
<div class="distill-note">
|
||
<p>付款后请添加客服微信，我们将一对一指导你完成聊天记录导出与上传。</p>
|
||
</div>
|
||
|
||
<div class="distill-revenue">
|
||
<p>创作者可推广蒸馏前任服务获得分润，具体比例请在创作者管理中心配置。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- P5: About View -->
|
||
<section id="about" class="view view--about">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name">关于 Eternal AI</span>
|
||
<span class="creator-brand__step">安全 · 隐私 · 信任</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<div class="about-page">
|
||
<div class="about-section">
|
||
<h3 class="about-section__title">平台简介</h3>
|
||
<p class="about-section__text">Eternal AI 是一个 AI 陪伴平台，帮助创作者将人设设定部署为可对话的 AI 角色，让用户在微信中与 ta 交流。我们致力于在记忆与陪伴中，遇见更懂你的 AI。</p>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<h3 class="about-section__title">连接方式说明</h3>
|
||
<p class="about-section__text">Eternal AI 基于微信 Claw 开放协议（iLink），非破解、非抓包，在微信官方授权范围内实现 AI 联系人接入。你的微信账号安全不受影响。</p>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<h3 class="about-section__title">安全类</h3>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">你们能看到我其他的微信聊天吗？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>不能。我们只能看到你与 AI 角色的对话，无法访问你的其他聊天、朋友圈或通讯录。</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">会不会偷偷读我的朋友圈和通讯录？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>不会。我们仅通过 Claw 协议与 AI 联系人通信，不具备读取你朋友圈或通讯录的能力。</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<h3 class="about-section__title">隐私类</h3>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">我和 AI 说的话会被保存吗？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>对话内容会保存在你的专属记忆库中，用于 AI 角色记住你们的对话上下文。仅你和你的 AI 角色可访问，我们不会人工查看。</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">蒸馏前任要上传聊天记录，这些数据安全吗？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>上传的聊天记录仅用于训练你的专属 AI 前任，处理完成后原始数据将被删除。我们承诺不会将你的数据用于其他用途。</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<h3 class="about-section__title">账号类</h3>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">用了会不会封我的微信号？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>不会。Claw 协议在微信官方授权范围内运行，与正常添加联系人无异，不存在封号风险。</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">扫码之后对方能控制我的微信吗？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>不能。AI 角色只是一个普通的微信联系人，只能与你收发消息，无法控制你的账号。</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<h3 class="about-section__title">情感类</h3>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">我聊的内容会有人看吗？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>不会有人工查看你的对话内容。除非你主动联系客服反馈问题，我们才会根据你的授权查看相关记录。</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">你们会把我的对话内容拿去训练 AI 吗？<span class="faq-icon">+</span></button>
|
||
<div class="faq-a"><p>不会。你的对话内容仅用于你自己的 AI 角色的记忆，绝不会用于训练其他模型或分享给第三方。</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- P6: Creator Onboarding View -->
|
||
<section id="onboarding" class="view view--onboarding">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name">创作者入驻</span>
|
||
<span class="creator-brand__step">部署 AI 角色，私域变现</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<div class="onboarding-page">
|
||
<div class="onboarding-section">
|
||
<h3 class="onboarding-section__title">平台能为创作者提供什么</h3>
|
||
<ul class="onboarding-list">
|
||
<li>部署 AI 角色：提交人设设定，平台负责技术部署</li>
|
||
<li>资金中转：平台处理用户付款，按比例结算给创作者</li>
|
||
<li>私域变现：通过专属链接绑定粉丝，持续获得订阅收入</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="onboarding-section">
|
||
<h3 class="onboarding-section__title">合作模式</h3>
|
||
<p class="onboarding-section__text">创作者提交角色人设，平台部署上线。用户付款后，平台抽佣 20%，80% 转给创作者。结算周期为月结。</p>
|
||
</div>
|
||
|
||
<div class="onboarding-section onboarding-contact">
|
||
<h3 class="onboarding-section__title">联系入驻</h3>
|
||
<div class="onboarding-qr" id="onboarding-qr"></div>
|
||
<p class="onboarding-wechat">微信扫码添加负责人</p>
|
||
<p class="onboarding-wechat-id">微信号：EternalAI_Official</p>
|
||
<p class="onboarding-note">添加时请备注「创作者入驻」，我们会一对一沟通合作细节。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- P7: Creator Center View -->
|
||
<section id="creator-center" class="view view--creator-center">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name">创作者管理中心</span>
|
||
<span class="creator-brand__step" id="center-tab-label">我的角色</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<div class="center-tabs" role="tablist" aria-label="创作者管理中心">
|
||
<button class="center-tab active" type="button" role="tab" aria-selected="true" data-center-tab="roles">我的角色</button>
|
||
<button class="center-tab" type="button" role="tab" aria-selected="false" data-center-tab="income">收入</button>
|
||
<button class="center-tab" type="button" role="tab" aria-selected="false" data-center-tab="settings">我的</button>
|
||
</div>
|
||
|
||
<!-- Tab: Roles -->
|
||
<div class="center-panel active" id="center-roles">
|
||
<div class="role-list" id="creator-role-list" aria-live="polite" aria-label="我的角色列表"></div>
|
||
<div class="form-actions">
|
||
<button class="btn btn--primary btn--block" type="button" data-action="new-role">+ 新建角色</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: Income -->
|
||
<div class="center-panel" id="center-income">
|
||
<div class="income-balance">
|
||
<span class="income-balance__label">可提现余额</span>
|
||
<span class="income-balance__value" id="income-balance">¥ 0.00</span>
|
||
</div>
|
||
<div class="income-section">
|
||
<h3 class="income-section__title">流水明细</h3>
|
||
<div class="income-list" id="income-list" aria-live="polite" aria-label="收入流水">
|
||
<p class="income-empty">暂无流水记录</p>
|
||
</div>
|
||
</div>
|
||
<div class="income-section">
|
||
<h3 class="income-section__title">申请提现</h3>
|
||
<form id="withdraw-form" class="withdraw-form" autocomplete="off">
|
||
<label class="field">
|
||
<span class="field__label">收款方式</span>
|
||
<select class="field__input" name="method" required>
|
||
<option value="wechat">微信</option>
|
||
<option value="alipay">支付宝</option>
|
||
</select>
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">提现金额（¥）</span>
|
||
<input class="field__input" name="amount" type="number" min="1" step="0.01" placeholder="请输入金额" required />
|
||
</label>
|
||
<div class="form-actions">
|
||
<button class="btn btn--primary btn--block" type="submit">提交提现申请</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: Settings -->
|
||
<div class="center-panel" id="center-settings">
|
||
<form id="settings-form" class="settings-form" autocomplete="off">
|
||
<label class="field">
|
||
<span class="field__label">创作者名字</span>
|
||
<input class="field__input" name="creatorName" type="text" placeholder="你的笔名" id="settings-name" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">角色库名称（首页「我的 XXX」显示的文字）</span>
|
||
<input class="field__input" name="libraryName" type="text" placeholder="如：云朵的后宫" id="settings-library" />
|
||
</label>
|
||
<div class="form-actions">
|
||
<button class="btn btn--primary btn--block" type="submit">保存设置</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- API Key 管理 -->
|
||
<div class="api-key-section" style="margin-top: 2rem;">
|
||
<h3 class="settings-section-title">API Key 管理</h3>
|
||
<p class="settings-section-desc" style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1rem;">
|
||
用于在 Hermes 机器上通过 curl 拉取角色配置文件
|
||
</p>
|
||
<div class="form-actions" style="margin-bottom: 1rem;">
|
||
<button class="btn btn--outline btn--block" type="button" data-action="generate-apikey">生成新 API Key</button>
|
||
</div>
|
||
<div id="apikey-list"></div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn btn--ghost btn--block" type="button" data-action="logout">退出登录</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Creator Role Edit View (formerly character creator) -->
|
||
<section id="creator" class="view view--creator">
|
||
<header class="creator-header">
|
||
<button class="icon-btn" type="button" data-action="back-to-center" aria-label="返回">←</button>
|
||
<div class="creator-brand">
|
||
<span class="creator-brand__name">角色编辑</span>
|
||
<span class="creator-brand__step">生成配置文件</span>
|
||
</div>
|
||
<div class="stepper" aria-hidden="true">
|
||
<span class="stepper__dot active"></span>
|
||
<span class="stepper__dot"></span>
|
||
<span class="stepper__dot"></span>
|
||
<span class="stepper__dot"></span>
|
||
</div>
|
||
</header>
|
||
|
||
<form id="character-form" class="creator-form" autocomplete="off">
|
||
<!-- Step 1: Identity -->
|
||
<fieldset class="form-step active" data-step="0">
|
||
<legend class="form-step__legend">基础身份</legend>
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">角色代号 <small>（英文/数字，用于 config.yaml）</small></span>
|
||
<input class="field__input" name="agentId" type="text" placeholder="eternal_lover_001" required pattern="[a-zA-Z0-9_]+" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">显示名称</span>
|
||
<input class="field__input" name="displayName" type="text" placeholder=" ta 的名字" required />
|
||
</label>
|
||
<label class="field field--half">
|
||
<span class="field__label">性别</span>
|
||
<select class="field__input" name="gender">
|
||
<option value="unknown">未知</option>
|
||
<option value="female">女</option>
|
||
<option value="male">男</option>
|
||
<option value="nonbinary">非二元</option>
|
||
</select>
|
||
</label>
|
||
<label class="field field--half">
|
||
<span class="field__label">年龄</span>
|
||
<input class="field__input" name="age" type="text" placeholder="24" />
|
||
</label>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn--primary" type="button" data-action="next">下一步</button>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- Step 2: Soul -->
|
||
<fieldset class="form-step" data-step="1">
|
||
<legend class="form-step__legend">灵魂设定（Soul.md）</legend>
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">背景故事</span>
|
||
<textarea class="field__input field__input--tall" name="background" placeholder="你们是如何相遇的？ta 经历过什么？" required></textarea>
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">性格标签 <small>（用逗号分隔）</small></span>
|
||
<input class="field__input" name="personality" type="text" placeholder="温柔, 敏感, 嘴硬心软, 浪漫主义" required />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">说话风格</span>
|
||
<textarea class="field__input" name="speechStyle" placeholder="常用语气词、句式、称呼方式、口头禅……" required></textarea>
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">喜好</span>
|
||
<textarea class="field__input" name="likes" placeholder="喜欢的事物、活动、话题"></textarea>
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">厌恶 / 底线</span>
|
||
<textarea class="field__input" name="dislikes" placeholder="讨厌什么，哪些话题会触发情绪波动"></textarea>
|
||
</label>
|
||
</div>
|
||
<div class="form-actions form-actions--split">
|
||
<button class="btn btn--ghost" type="button" data-action="prev">上一步</button>
|
||
<button class="btn btn--primary" type="button" data-action="next">下一步</button>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- Step 3: Relationships & Memory -->
|
||
<fieldset class="form-step" data-step="2">
|
||
<legend class="form-step__legend">关系与记忆</legend>
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">与使用者的关系</span>
|
||
<input class="field__input" name="relationship" type="text" placeholder="前任、挚友、恋人、家人……" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">共同记忆 / 关键事件</span>
|
||
<textarea class="field__input field__input--tall" name="memories" placeholder="那些只属于你们的高光或遗憾时刻"></textarea>
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">秘密或未说出口的话</span>
|
||
<textarea class="field__input" name="secrets" placeholder="藏在角色心底、会间接影响语气的细节"></textarea>
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">开场白</span>
|
||
<textarea class="field__input" name="greeting" placeholder="ta 第一次开口会对你说什么？" required></textarea>
|
||
</label>
|
||
</div>
|
||
<div class="form-actions form-actions--split">
|
||
<button class="btn btn--ghost" type="button" data-action="prev">上一步</button>
|
||
<button class="btn btn--primary" type="button" data-action="next">下一步</button>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- Step 4: Config -->
|
||
<fieldset class="form-step" data-step="3">
|
||
<legend class="form-step__legend">运行配置（config.yaml）</legend>
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">模型</span>
|
||
<input class="field__input" name="model" type="text" value="hermes-3-llama-3.1-70b" />
|
||
</label>
|
||
<label class="field field--half">
|
||
<span class="field__label">Temperature</span>
|
||
<input class="field__input" name="temperature" type="number" step="0.05" min="0" max="2" value="0.85" />
|
||
</label>
|
||
<label class="field field--half">
|
||
<span class="field__label">Max Tokens</span>
|
||
<input class="field__input" name="maxTokens" type="number" min="1" value="1024" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">系统提示词 <small>（可自动生成，也可手动覆盖）</small></span>
|
||
<textarea class="field__input field__input--tall" name="systemPrompt" id="system-prompt" placeholder="留空将根据 Soul.md 自动生成"></textarea>
|
||
</label>
|
||
<label class="field field--checkbox">
|
||
<input type="checkbox" name="enableMemory" checked />
|
||
<span class="checkmark"></span>
|
||
<span class="field__label">启用长期记忆</span>
|
||
</label>
|
||
<label class="field field--checkbox">
|
||
<input type="checkbox" name="enableTools" />
|
||
<span class="checkmark"></span>
|
||
<span class="field__label">启用外部工具</span>
|
||
</label>
|
||
</div>
|
||
<div class="form-actions form-actions--split">
|
||
<button class="btn btn--ghost" type="button" data-action="prev">上一步</button>
|
||
<button class="btn btn--primary" type="button" data-action="publish">生成并发布</button>
|
||
</div>
|
||
</fieldset>
|
||
</form>
|
||
|
||
<!-- Result Panel -->
|
||
<div id="result-panel" class="result-panel" hidden>
|
||
<div class="result-panel__header">
|
||
<h3 class="result-panel__title">角色已蒸馏完成</h3>
|
||
<p class="result-panel__desc">下载 Hermes agent 配置文件，或复制到项目中使用。</p>
|
||
</div>
|
||
<div class="result-panel__files">
|
||
<div class="file-card">
|
||
<div class="file-card__icon">📜</div>
|
||
<div class="file-card__info">
|
||
<strong>Soul.md</strong>
|
||
<small>角色灵魂文档</small>
|
||
</div>
|
||
<button class="btn btn--small btn--outline" type="button" data-download="soul">下载</button>
|
||
</div>
|
||
<div class="file-card">
|
||
<div class="file-card__icon">⚙️</div>
|
||
<div class="file-card__info">
|
||
<strong>config.yaml</strong>
|
||
<small>运行配置</small>
|
||
</div>
|
||
<button class="btn btn--small btn--outline" type="button" data-download="config">下载</button>
|
||
</div>
|
||
</div>
|
||
<div class="result-panel__preview">
|
||
<div class="preview-tabs" role="tablist" aria-label="配置文件预览">
|
||
<button class="preview-tab active" type="button" role="tab" aria-selected="true" data-tab="soul">Soul.md</button>
|
||
<button class="preview-tab" type="button" role="tab" aria-selected="false" data-tab="config">config.yaml</button>
|
||
</div>
|
||
<pre class="preview-code" id="preview-code"><code></code></pre>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn--ghost" type="button" data-action="reset">再创建一个</button>
|
||
<button class="btn btn--primary" type="button" data-action="back-to-center">返回管理中心</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Tab Bar (U8) -->
|
||
<nav class="tab-bar" id="tab-bar" role="tablist" aria-label="主导航">
|
||
<button class="tab-bar__item active" type="button" role="tab" aria-selected="true" data-tab-action="tab-home">
|
||
<span class="tab-bar__icon" aria-hidden="true">⌂</span>
|
||
<span class="tab-bar__label">首页</span>
|
||
</button>
|
||
<button class="tab-bar__item" type="button" role="tab" aria-selected="false" data-tab-action="tab-distill">
|
||
<span class="tab-bar__icon" aria-hidden="true">♡</span>
|
||
<span class="tab-bar__label">蒸馏前任</span>
|
||
</button>
|
||
<button class="tab-bar__item" type="button" role="tab" aria-selected="false" data-tab-action="tab-mine">
|
||
<span class="tab-bar__icon" aria-hidden="true">☺</span>
|
||
<span class="tab-bar__label" id="tab-mine-label">我的</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Screen reader live region for view change announcements -->
|
||
<div id="sr-announce" class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"></div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|