345 lines
16 KiB
HTML
345 lines
16 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=5" />
|
||
</head>
|
||
<body>
|
||
<main class="app">
|
||
<!-- Landing View -->
|
||
<section id="landing" class="view view--landing active">
|
||
<div class="cards">
|
||
<article class="card card--characters" data-action="open-auth">
|
||
<div class="card__frame" aria-hidden="true"></div>
|
||
<div class="card__content">
|
||
<h2 class="card__title">我的 [XXX ]</h2>
|
||
<p class="card__desc">登录后管理你的角色</p>
|
||
<button class="btn btn--outline" type="button">登录 / 注册</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="#about" class="footer-link">关于 Eternal AI →</a>
|
||
<a href="#creator" class="footer-link" data-action="open-creator">我是创作者，申请入驻 →</a>
|
||
</footer>
|
||
</section>
|
||
|
||
<!-- Creator View -->
|
||
<section id="creator" class="view view--creator">
|
||
<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">
|
||
<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.1" 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">
|
||
<button class="preview-tab active" type="button" data-tab="soul">Soul.md</button>
|
||
<button class="preview-tab" type="button" 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">返回首页</button>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<button class="auth-tab active" type="button" data-tab="login">登录</button>
|
||
<button class="auth-tab" type="button" data-tab="register">注册</button>
|
||
</div>
|
||
|
||
<form id="login-form" class="auth-form active" autocomplete="off" data-form="login">
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">手机号 / 用户名</span>
|
||
<input class="field__input" name="account" type="text" placeholder="请输入手机号或用户名" required />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">密码</span>
|
||
<input class="field__input" name="password" type="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="off" data-form="register">
|
||
<div class="field-group">
|
||
<label class="field">
|
||
<span class="field__label">手机号 / 用户名</span>
|
||
<input class="field__input" name="account" type="text" placeholder="设置登录账号" required />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">密码</span>
|
||
<input class="field__input" name="password" type="password" placeholder="设置密码" required minlength="6" />
|
||
</label>
|
||
<label class="field">
|
||
<span class="field__label">确认密码</span>
|
||
<input class="field__input" name="confirmPassword" type="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>
|
||
|
||
<!-- 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="#contact" class="distill-quick">没耐心？直接加微信定制沟通 →</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">立即下单</button>
|
||
</div>
|
||
|
||
<div class="distill-note">
|
||
<p>付款后请添加客服微信，我们将一对一指导你完成聊天记录导出与上传。</p>
|
||
</div>
|
||
|
||
<div class="distill-revenue">
|
||
<p>创作者可推广蒸馏前任服务获得分润，具体比例请在创作者管理中心配置。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|