Spaces:
Runtime error
Runtime error
Create index.html
Browse files- index.html +115 -0
index.html
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="zh-CN">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>My Omni AI Studio</title>
|
| 7 |
+
<link rel="stylesheet" href="styles.css" />
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<header class="topbar">
|
| 11 |
+
<div>
|
| 12 |
+
<h1>My Omni AI Studio</h1>
|
| 13 |
+
<p>基于 Hugging Face API 的多模型 AI 工作台（聊天 / 代码 / 写作 / 视频 / 换脸）</p>
|
| 14 |
+
</div>
|
| 15 |
+
<button id="saveConfigBtn">保存配置</button>
|
| 16 |
+
</header>
|
| 17 |
+
|
| 18 |
+
<main class="layout">
|
| 19 |
+
<aside class="panel settings">
|
| 20 |
+
<h2>全局配置</h2>
|
| 21 |
+
<label>Hugging Face Token
|
| 22 |
+
<input id="hfToken" type="password" placeholder="hf_xxx" />
|
| 23 |
+
</label>
|
| 24 |
+
<label>默认聊天模型
|
| 25 |
+
<input id="chatModel" type="text" value="meta-llama/Llama-3.1-8B-Instruct" />
|
| 26 |
+
</label>
|
| 27 |
+
<label>默认代码模型
|
| 28 |
+
<input id="codeModel" type="text" value="Qwen/Qwen2.5-Coder-7B-Instruct" />
|
| 29 |
+
</label>
|
| 30 |
+
<label>默认写作模型
|
| 31 |
+
<input id="writerModel" type="text" value="mistralai/Mistral-7B-Instruct-v0.3" />
|
| 32 |
+
</label>
|
| 33 |
+
<label>视频模型（Text/Image to Video）
|
| 34 |
+
<input id="videoModel" type="text" value="Wan-AI/Wan2.1-T2V-14B" />
|
| 35 |
+
</label>
|
| 36 |
+
<label>换脸模型（Image-to-Image）
|
| 37 |
+
<input id="faceModel" type="text" value="stabilityai/stable-diffusion-xl-base-1.0" />
|
| 38 |
+
</label>
|
| 39 |
+
<p class="hint">提示：可替换为 Hugging Face 上任意可用模型 ID，实现“自己的 AI 可调用任何模型”。</p>
|
| 40 |
+
|
| 41 |
+
<hr />
|
| 42 |
+
<h3>一键发布到 Hugging Face</h3>
|
| 43 |
+
<label>Space 名称
|
| 44 |
+
<input id="spaceName" type="text" placeholder="my-omni-ai-studio" />
|
| 45 |
+
</label>
|
| 46 |
+
<label>Space SDK
|
| 47 |
+
<select id="spaceSdk">
|
| 48 |
+
<option value="static">static（当前前端推荐）</option>
|
| 49 |
+
<option value="gradio">gradio</option>
|
| 50 |
+
<option value="docker">docker</option>
|
| 51 |
+
</select>
|
| 52 |
+
</label>
|
| 53 |
+
<label class="inline-control">
|
| 54 |
+
<input id="spacePrivate" type="checkbox" />
|
| 55 |
+
创建私有 Space
|
| 56 |
+
</label>
|
| 57 |
+
<button id="copyDeployCmdBtn" type="button">复制一键发布命令</button>
|
| 58 |
+
<pre id="deployCmdOutput" class="output"></pre>
|
| 59 |
+
</aside>
|
| 60 |
+
|
| 61 |
+
<section class="panel workspace">
|
| 62 |
+
<nav class="tabs">
|
| 63 |
+
<button class="tab active" data-tab="chat">AI 聊天</button>
|
| 64 |
+
<button class="tab" data-tab="code">AI 代码</button>
|
| 65 |
+
<button class="tab" data-tab="writing">AI 写作</button>
|
| 66 |
+
<button class="tab" data-tab="video">AI 视频</button>
|
| 67 |
+
<button class="tab" data-tab="faceswap">AI 换脸</button>
|
| 68 |
+
</nav>
|
| 69 |
+
|
| 70 |
+
<article class="tab-panel active" id="chat">
|
| 71 |
+
<h3>聊天助手</h3>
|
| 72 |
+
<textarea id="chatPrompt" rows="6" placeholder="输入你想聊的话题..."></textarea>
|
| 73 |
+
<button data-action="chat">发送</button>
|
| 74 |
+
<pre id="chatOutput" class="output"></pre>
|
| 75 |
+
</article>
|
| 76 |
+
|
| 77 |
+
<article class="tab-panel" id="code">
|
| 78 |
+
<h3>代码助手</h3>
|
| 79 |
+
<textarea id="codePrompt" rows="6" placeholder="例如：用 Python 写一个快速排序"></textarea>
|
| 80 |
+
<button data-action="code">生成代码</button>
|
| 81 |
+
<pre id="codeOutput" class="output"></pre>
|
| 82 |
+
</article>
|
| 83 |
+
|
| 84 |
+
<article class="tab-panel" id="writing">
|
| 85 |
+
<h3>写作助手</h3>
|
| 86 |
+
<textarea id="writingPrompt" rows="6" placeholder="例如：写一篇关于 AI 未来的中文演讲稿"></textarea>
|
| 87 |
+
<button data-action="writing">开始写作</button>
|
| 88 |
+
<pre id="writingOutput" class="output"></pre>
|
| 89 |
+
</article>
|
| 90 |
+
|
| 91 |
+
<article class="tab-panel" id="video">
|
| 92 |
+
<h3>视频生成助手</h3>
|
| 93 |
+
<textarea id="videoPrompt" rows="4" placeholder="描述你要生成的视频场景"></textarea>
|
| 94 |
+
<button data-action="video">提交视频任务</button>
|
| 95 |
+
<pre id="videoOutput" class="output"></pre>
|
| 96 |
+
<p class="hint">说明：多数视频模型为异步任务，本示例返回任务状态或结果链接。</p>
|
| 97 |
+
</article>
|
| 98 |
+
|
| 99 |
+
<article class="tab-panel" id="faceswap">
|
| 100 |
+
<h3>换脸助手（示例工作流）</h3>
|
| 101 |
+
<textarea id="facePrompt" rows="4" placeholder="说明换脸风格和要求"></textarea>
|
| 102 |
+
<button data-action="faceswap">提交换脸任务</button>
|
| 103 |
+
<pre id="faceOutput" class="output"></pre>
|
| 104 |
+
<p class="hint">建议：生产环境可接入 Roop / InsightFace / Diffusers Inpainting API 管道。</p>
|
| 105 |
+
</article>
|
| 106 |
+
</section>
|
| 107 |
+
</main>
|
| 108 |
+
|
| 109 |
+
<footer>
|
| 110 |
+
<small>⚠️ Token 仅保存在你的浏览器 localStorage 中，请勿在不安全设备使用。</small>
|
| 111 |
+
</footer>
|
| 112 |
+
|
| 113 |
+
<script src="app.js"></script>
|
| 114 |
+
</body>
|
| 115 |
+
</html>
|