Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" /> | |
| <title>New NAI - 本地可视化前端</title> | |
| <link rel="stylesheet" href="assets/style.css" /> | |
| </head> | |
| <body> | |
| <!-- 手机端侧边栏 --> | |
| <div id="sidebar" class="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="brand">New NAI</div> | |
| <button id="sidebar-close" class="sidebar-close">×</button> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <button class="tab-btn active" data-tab="tab-config">配置</button> | |
| <button class="tab-btn" data-tab="tab-t2i">文生图</button> | |
| <button class="tab-btn" data-tab="tab-i2i">图生图</button> | |
| <button class="tab-btn" data-tab="tab-inpaint">局部重绘</button> | |
| </nav> | |
| <div class="sidebar-actions"> | |
| <button id="theme-toggle-mobile" class="tab-btn">主题：深色</button> | |
| <button id="sound-toggle-mobile" class="tab-btn" aria-pressed="false">提示音：关</button> | |
| </div> | |
| </div> | |
| <div id="sidebar-overlay" class="sidebar-overlay"></div> | |
| <header class="app-header"> | |
| <button id="menu-toggle" class="menu-toggle">☰</button> | |
| <div class="brand">New NAI</div> | |
| <nav class="tabs"> | |
| <button class="tab-btn active" data-tab="tab-config">配置</button> | |
| <button class="tab-btn" data-tab="tab-t2i">文生图</button> | |
| <button class="tab-btn" data-tab="tab-i2i">图生图</button> | |
| <button class="tab-btn" data-tab="tab-inpaint">局部重绘</button> | |
| </nav> | |
| <div class="header-actions"> | |
| <button id="theme-toggle" class="tab-btn">主题：深色</button> | |
| <button id="sound-toggle" class="tab-btn" aria-pressed="false">提示音：关</button> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- 配置 --> | |
| <section id="tab-config" class="tab active"> | |
| <h2>配置设置</h2> | |
| <div class="card"> | |
| <div class="form-grid"> | |
| <label> | |
| <span>Key（原 Token）</span> | |
| <input id="cfg-key" type="password" placeholder="在此填入 NovelAI Key" autocomplete="off" /> | |
| </label> | |
| <label> | |
| <span>模型</span> | |
| <select id="cfg-model"> | |
| <option value="nai-diffusion-3">nai-diffusion-3</option> | |
| <option value="nai-diffusion-furry-3">nai-diffusion-furry-3</option> | |
| <option value="nai-diffusion-4-curated-preview">nai-diffusion-4-curated-preview</option> | |
| <option value="nai-diffusion-4-full">nai-diffusion-4-full</option> | |
| <option value="nai-diffusion-4-5-curated">nai-diffusion-4-5-curated</option> | |
| <option value="nai-diffusion-4-5-full">nai-diffusion-4-5-full</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>采样器</span> | |
| <select id="cfg-sampler"> | |
| <option value="k_euler">k_euler</option> | |
| <option value="k_euler_ancestral">k_euler_ancestral</option> | |
| <option value="k_dpmpp_2s_ancestral">k_dpmpp_2s_ancestral</option> | |
| <option value="k_dpmpp_2m">k_dpmpp_2m</option> | |
| <option value="k_dpmpp_sde">k_dpmpp_sde</option> | |
| <option value="k_dpmpp_2m_sde">k_dpmpp_2m_sde</option> | |
| <option value="ddim_v3">ddim_v3</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>步数</span> | |
| <input id="cfg-steps" type="number" min="1" step="1" placeholder="默认 28" /> | |
| </label> | |
| <label> | |
| <span>CFG 强度</span> | |
| <input id="cfg-scale" type="number" min="0" step="0.1" placeholder="默认 5.0" /> | |
| </label> | |
| <label> | |
| <span>CFG 重缩放</span> | |
| <input id="cfg-cfg-rescale" type="number" min="0" step="0.1" placeholder="默认 0" /> | |
| </label> | |
| <label> | |
| <span>噪声调度</span> | |
| <select id="cfg-noise-schedule"> | |
| <option value="">（随模型/采样器自动）</option> | |
| <option value="native">native</option> | |
| <option value="karras">karras</option> | |
| <option value="exponential">exponential</option> | |
| <option value="polyexponential">polyexponential</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>UC 预设</span> | |
| <input id="cfg-uc-preset" type="number" min="0" step="1" placeholder="默认 4" /> | |
| </label> | |
| <label class="switch"> | |
| <input id="cfg-quality-toggle" type="checkbox" /> | |
| <span>质量优化</span> | |
| </label> | |
| <label class="switch"> | |
| <input id="cfg-legacy-uc" type="checkbox" /> | |
| <span>兼容旧版 UC</span> | |
| </label> | |
| <label class="switch"> | |
| <input id="cfg-save-output" type="checkbox" /> | |
| <span>保存到输出目录</span> | |
| </label> | |
| <label class="full"> | |
| <span>保存目录</span> | |
| <input id="cfg-output-dir" type="text" placeholder="例如：/home/user/output（留空=默认 output）" /> | |
| </label> | |
| <!-- 自定义背景 --> | |
| <label class="full"> | |
| <span>自定义背景图片</span> | |
| <div class="background-upload-wrapper"> | |
| <input id="cfg-custom-bg" type="file" accept="image/*" /> | |
| <button id="btn-reset-bg" type="button">重置背景</button> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="actions dir-actions"> | |
| <button id="btn-select-output-dir">选择保存目录</button> | |
| <button id="btn-open-output-dir">打开保存目录</button> | |
| </div> | |
| <p id="cfg-message" class="message"></p> | |
| <p class="hf-notice">注：配置会自动保存。手机端请直接在输入框填写保存目录路径</p> | |
| </div> | |
| </section> | |
| <!-- 文生图 --> | |
| <section id="tab-t2i" class="tab"> | |
| <h2>文生图</h2> | |
| <div class="card"> | |
| <div class="form-grid"> | |
| <label class="full"> | |
| <span>正面提示词</span> | |
| <textarea id="t2i-prompt" rows="3" placeholder="输入提示词"></textarea> | |
| </label> | |
| <label class="full"> | |
| <span>负面提示词</span> | |
| <textarea id="t2i-negative" rows="2" placeholder="可留空"></textarea> | |
| </label> | |
| <label> | |
| <span>宽度</span> | |
| <input id="t2i-width" type="number" min="64" step="64" value="768" /> | |
| </label> | |
| <label> | |
| <span>高度</span> | |
| <input id="t2i-height" type="number" min="64" step="64" value="768" /> | |
| </label> | |
| <label> | |
| <span>步数</span> | |
| <input id="t2i-steps" type="number" min="1" step="1" placeholder="留空=配置默认" /> | |
| </label> | |
| <label> | |
| <span>CFG 强度</span> | |
| <input id="t2i-scale" type="number" min="0" step="0.1" placeholder="留空=配置默认" /> | |
| </label> | |
| <label> | |
| <span>采样器</span> | |
| <select id="t2i-sampler"> | |
| <option value="">（配置默认）</option> | |
| <option value="k_euler">k_euler</option> | |
| <option value="k_euler_ancestral">k_euler_ancestral</option> | |
| <option value="k_dpmpp_2s_ancestral">k_dpmpp_2s_ancestral</option> | |
| <option value="k_dpmpp_2m">k_dpmpp_2m</option> | |
| <option value="k_dpmpp_sde">k_dpmpp_sde</option> | |
| <option value="k_dpmpp_2m_sde">k_dpmpp_2m_sde</option> | |
| <option value="ddim_v3">ddim_v3</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>噪声调度</span> | |
| <select id="t2i-noise-schedule"> | |
| <option value="">（自动）</option> | |
| <option value="native">native</option> | |
| <option value="karras">karras</option> | |
| <option value="exponential">exponential</option> | |
| <option value="polyexponential">polyexponential</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>随机种子</span> | |
| <input id="t2i-seed" type="number" step="1" value="-1" /> | |
| </label> | |
| <label class="switch"> | |
| <input id="t2i-variety" type="checkbox" /> | |
| <span>多样性</span> | |
| </label> | |
| <label class="switch"> | |
| <input id="t2i-decrisp" type="checkbox" /> | |
| <span>动态阈值</span> | |
| </label> | |
| <label> | |
| <span>CFG 重缩放</span> | |
| <input id="t2i-cfg-rescale" type="number" min="0" step="0.1" placeholder="留空=配置默认" /> | |
| </label> | |
| </div> | |
| <div class="actions"> | |
| <button id="btn-t2i" class="primary">生成</button> | |
| </div> | |
| <div class="result"> | |
| <img id="t2i-img" alt="生成结果" /> | |
| <div class="image-actions" id="t2i-actions" style="display:none;"> | |
| <button id="btn-save-t2i" class="save-btn">💾 保存图片</button> | |
| </div> | |
| <div class="image-info" id="t2i-info" style="display:none;"> | |
| <div class="image-info-header"> | |
| <span class="image-info-title">图片信息</span> | |
| <button class="image-info-toggle" data-target="t2i-info-content">展开 ▼</button> | |
| </div> | |
| <div class="image-info-content" id="t2i-info-content"> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">模型</span> | |
| <span class="image-info-value" id="t2i-model"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">分辨率</span> | |
| <span class="image-info-value" id="t2i-resolution"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">正面提示词</span> | |
| <span class="image-info-value" id="t2i-prompt-text"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">负面提示词</span> | |
| <span class="image-info-value" id="t2i-negative-text"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="saved-path"> | |
| <label>保存路径</label> | |
| <input id="t2i-saved" type="text" readonly /> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 图生图 --> | |
| <section id="tab-i2i" class="tab"> | |
| <h2>图生图</h2> | |
| <div class="card"> | |
| <div class="form-grid"> | |
| <label class="full"> | |
| <span>正面提示词</span> | |
| <textarea id="i2i-positive" rows="2" placeholder="输入正面提示词"></textarea> | |
| </label> | |
| <label class="full"> | |
| <span>负面提示词</span> | |
| <textarea id="i2i-negative" rows="2" placeholder="可留空"></textarea> | |
| </label> | |
| <label class="full"> | |
| <span>输入图片</span> | |
| <input id="i2i-image" type="file" accept="image/*" /> | |
| </label> | |
| <label> | |
| <span>宽度</span> | |
| <input id="i2i-width" type="number" min="64" step="64" placeholder="留空=768" /> | |
| </label> | |
| <label> | |
| <span>高度</span> | |
| <input id="i2i-height" type="number" min="64" step="64" placeholder="留空=768" /> | |
| </label> | |
| <label> | |
| <span>步数</span> | |
| <input id="i2i-steps" type="number" min="1" step="1" placeholder="留空=配置默认" /> | |
| </label> | |
| <label> | |
| <span>CFG 强度</span> | |
| <input id="i2i-scale" type="number" min="0" step="0.1" placeholder="留空=配置默认" /> | |
| </label> | |
| <label> | |
| <span>采样器</span> | |
| <select id="i2i-sampler"> | |
| <option value="">（配置默认）</option> | |
| <option value="k_euler">k_euler</option> | |
| <option value="k_euler_ancestral">k_euler_ancestral</option> | |
| <option value="k_dpmpp_2s_ancestral">k_dpmpp_2s_ancestral</option> | |
| <option value="k_dpmpp_2m">k_dpmpp_2m</option> | |
| <option value="k_dpmpp_sde">k_dpmpp_sde</option> | |
| <option value="k_dpmpp_2m_sde">k_dpmpp_2m_sde</option> | |
| <option value="ddim_v3">ddim_v3</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>噪声调度</span> | |
| <select id="i2i-noise-schedule"> | |
| <option value="">（自动）</option> | |
| <option value="native">native</option> | |
| <option value="karras">karras</option> | |
| <option value="exponential">exponential</option> | |
| <option value="polyexponential">polyexponential</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>随机种子</span> | |
| <input id="i2i-seed" type="number" step="1" value="-1" /> | |
| </label> | |
| <label> | |
| <span>强度</span> | |
| <input id="i2i-strength" type="number" min="0" max="1" step="0.01" value="0.5" /> | |
| </label> | |
| <label> | |
| <span>噪声</span> | |
| <input id="i2i-noise" type="number" min="0" max="1" step="0.01" value="0.0" /> | |
| </label> | |
| <label class="switch"> | |
| <input id="i2i-variety" type="checkbox" /> | |
| <span>多样性</span> | |
| </label> | |
| <label class="switch"> | |
| <input id="i2i-decrisp" type="checkbox" /> | |
| <span>动态阈值</span> | |
| </label> | |
| <label> | |
| <span>CFG 重缩放</span> | |
| <input id="i2i-cfg-rescale" type="number" min="0" step="0.1" placeholder="留空=配置默认" /> | |
| </label> | |
| </div> | |
| <div class="actions"> | |
| <button id="btn-i2i" class="primary">生成</button> | |
| </div> | |
| <div class="result"> | |
| <img id="i2i-img" alt="生成结果" /> | |
| <div class="image-actions" id="i2i-actions" style="display:none;"> | |
| <button id="btn-save-i2i" class="save-btn">💾 保存图片</button> | |
| </div> | |
| <div class="image-info" id="i2i-info" style="display:none;"> | |
| <div class="image-info-header"> | |
| <span class="image-info-title">图片信息</span> | |
| <button class="image-info-toggle" data-target="i2i-info-content">展开 ▼</button> | |
| </div> | |
| <div class="image-info-content" id="i2i-info-content"> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">模型</span> | |
| <span class="image-info-value" id="i2i-model"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">分辨率</span> | |
| <span class="image-info-value" id="i2i-resolution"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">正面提示词</span> | |
| <span class="image-info-value" id="i2i-prompt-text"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">负面提示词</span> | |
| <span class="image-info-value" id="i2i-negative-text"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="saved-path"> | |
| <label>保存路径</label> | |
| <input id="i2i-saved" type="text" readonly /> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 局部重绘 --> | |
| <section id="tab-inpaint" class="tab"> | |
| <h2>局部重绘</h2> | |
| <div class="card"> | |
| <div class="form-grid"> | |
| <label class="full"> | |
| <span>正面提示词</span> | |
| <textarea id="inpaint-positive" rows="2" placeholder="输入正面提示词"></textarea> | |
| </label> | |
| <label class="full"> | |
| <span>负面提示词</span> | |
| <textarea id="inpaint-negative" rows="2" placeholder="可留空"></textarea> | |
| </label> | |
| <label class="full"> | |
| <span>底图</span> | |
| <input id="inpaint-image" type="file" accept="image/*" /> | |
| </label> | |
| <label class="full"> | |
| <span>遮罩（白色为重绘区域，黑色保留）</span> | |
| <input id="inpaint-mask" type="file" accept="image/*" /> | |
| </label> | |
| <label class="switch"> | |
| <input id="inpaint-add-original" type="checkbox" /> | |
| <span>叠加原图</span> | |
| </label> | |
| <label> | |
| <span>宽度</span> | |
| <input id="inpaint-width" type="number" min="64" step="64" placeholder="留空=768" /> | |
| </label> | |
| <label> | |
| <span>高度</span> | |
| <input id="inpaint-height" type="number" min="64" step="64" placeholder="留空=768" /> | |
| </label> | |
| <label> | |
| <span>步数</span> | |
| <input id="inpaint-steps" type="number" min="1" step="1" placeholder="留空=配置默认" /> | |
| </label> | |
| <label> | |
| <span>CFG 强度</span> | |
| <input id="inpaint-scale" type="number" min="0" step="0.1" placeholder="留空=配置默认" /> | |
| </label> | |
| <label> | |
| <span>采样器</span> | |
| <select id="inpaint-sampler"> | |
| <option value="">（配置默认）</option> | |
| <option value="k_euler">k_euler</option> | |
| <option value="k_euler_ancestral">k_euler_ancestral</option> | |
| <option value="k_dpmpp_2s_ancestral">k_dpmpp_2s_ancestral</option> | |
| <option value="k_dpmpp_2m">k_dpmpp_2m</option> | |
| <option value="k_dpmpp_sde">k_dpmpp_sde</option> | |
| <option value="k_dpmpp_2m_sde">k_dpmpp_2m_sde</option> | |
| <option value="ddim_v3">ddim_v3</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>噪声调度</span> | |
| <select id="inpaint-noise-schedule"> | |
| <option value="">（自动）</option> | |
| <option value="native">native</option> | |
| <option value="karras">karras</option> | |
| <option value="exponential">exponential</option> | |
| <option value="polyexponential">polyexponential</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>随机种子</span> | |
| <input id="inpaint-seed" type="number" step="1" value="-1" /> | |
| </label> | |
| <label> | |
| <span>强度</span> | |
| <input id="inpaint-strength" type="number" min="0" max="1" step="0.01" value="0.5" /> | |
| </label> | |
| <label> | |
| <span>噪声</span> | |
| <input id="inpaint-noise-val" type="number" min="0" max="1" step="0.01" value="0.0" /> | |
| </label> | |
| <label class="switch"> | |
| <input id="inpaint-variety" type="checkbox" /> | |
| <span>多样性</span> | |
| </label> | |
| <label class="switch"> | |
| <input id="inpaint-decrisp" type="checkbox" /> | |
| <span>动态阈值</span> | |
| </label> | |
| <label> | |
| <span>CFG 重缩放</span> | |
| <input id="inpaint-cfg-rescale" type="number" min="0" step="0.1" placeholder="留空=配置默认" /> | |
| </label> | |
| </div> | |
| <div class="actions"> | |
| <button id="btn-inpaint" class="primary">生成</button> | |
| </div> | |
| <div class="result"> | |
| <img id="inpaint-img" alt="生成结果" /> | |
| <div class="image-actions" id="inpaint-actions" style="display:none;"> | |
| <button id="btn-save-inpaint" class="save-btn">💾 保存图片</button> | |
| </div> | |
| <div class="image-info" id="inpaint-info" style="display:none;"> | |
| <div class="image-info-header"> | |
| <span class="image-info-title">图片信息</span> | |
| <button class="image-info-toggle" data-target="inpaint-info-content">展开 ▼</button> | |
| </div> | |
| <div class="image-info-content" id="inpaint-info-content"> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">模型</span> | |
| <span class="image-info-value" id="inpaint-model"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">分辨率</span> | |
| <span class="image-info-value" id="inpaint-resolution"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">正面提示词</span> | |
| <span class="image-info-value" id="inpaint-prompt-text"></span> | |
| </div> | |
| <div class="image-info-row"> | |
| <span class="image-info-label">负面提示词</span> | |
| <span class="image-info-value" id="inpaint-negative-text"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="saved-path"> | |
| <label>保存路径</label> | |
| <input id="inpaint-saved" type="text" readonly /> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <div id="toast" class="toast"></div> | |
| <div id="loading" class="loading hidden"> | |
| <div class="spinner"></div> | |
| <div class="loading-text">处理中...</div> | |
| </div> | |
| <audio id="sound-player" src="" preload="auto"></audio> | |
| <script src="assets/app.js"></script> | |
| </body> | |
| </html> |