231 lines
11 KiB
HTML
231 lines
11 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=4" />
|
||
</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-creator">
|
||
<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-creator">
|
||
<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>
|
||
</main>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|