gitee/index.html at main · MallocPointer/gitee · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Image View</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <header class="topbar">
    <div class="topbar-main">
      <div class="topbar-left">
        <div class="brand-mark">M</div>
        <div class="h1">Image View</div>
      </div>

      <div class="topbar-right">
        <a
          class="top-icon-btn"
          href="https://github.com/MallocPointer/gitee/"
          target="_blank"
          rel="noopener"
          aria-label="GitHub 仓库"
          title="GitHub 仓库"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path fill="currentColor" d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 0 0 7.86 10.92c.58.11.79-.25.79-.56v-2.16c-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.27-1.68-1.27-1.68-1.04-.72.08-.71.08-.71 1.15.08 1.75 1.18 1.75 1.18 1.02 1.75 2.67 1.25 3.32.96.1-.74.4-1.25.72-1.54-2.56-.29-5.25-1.28-5.25-5.72 0-1.27.46-2.3 1.19-3.12-.12-.29-.52-1.46.11-3.04 0 0 .97-.31 3.19 1.19a11.1 11.1 0 0 1 5.8 0c2.22-1.5 3.19-1.19 3.19-1.19.63 1.58.23 2.75.11 3.04.74.82 1.19 1.85 1.19 3.12 0 4.45-2.7 5.43-5.28 5.72.41.35.78 1.05.78 2.11v3.12c0 .31.21.68.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z"/>
          </svg>
          <span>GitHub</span>
        </a>

        <button
          class="top-icon-btn coffee-btn"
          id="donateBtn"
          type="button"
          aria-label="赞助项目"
          title="赞助项目"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path fill="currentColor" d="M3 6.5A2.5 2.5 0 0 1 5.5 4h9A2.5 2.5 0 0 1 17 6.5V7h1.75A3.25 3.25 0 0 1 22 10.25c0 1.64-1.23 3.02-2.86 3.21A5.5 5.5 0 0 1 13.75 18h-6.5A5.25 5.25 0 0 1 2 12.75V6.5Zm14 2V11a1.75 1.75 0 0 0 0-3.5H17Z"/>
            <path fill="currentColor" d="M6 20a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z"/>
          </svg>
          <span>赞助</span>
        </button>

        <div class="status">
          <span class="badge" id="statusBadge">准备就绪 / Ready</span>
        </div>
      </div>
    </div>

    <div class="topbar-sub">
      <span class="api-label">API 注册地址:</span>
      <span class="mono api-link">https://ai.gitee.com/serverless-api</span>
    </div>
  </header>

  <div class="donate-modal" id="donateModal" aria-hidden="true">
    <div class="donate-mask" id="donateMask"></div>
    <div class="donate-panel" role="dialog" aria-modal="true" aria-labelledby="donateTitle">
      <button class="donate-close" id="donateClose" type="button" aria-label="关闭">×</button>
      <div class="donate-eyebrow">Support this project</div>
      <h3 id="donateTitle">Buy me a coffee</h3>
      <p class="donate-text">
        如果真的帮助到了你，请为我打赏一杯咖啡吧，有了你的赞助，我会将服务一直运行下去的。 我的联系方式：lizhongran910@gmail.com。 项目开源地址：https://github.com/MallocPointer/gitee/
      </p>
      <img class="donate-image" src="./image.png" alt="项目赞助收款码" />
      <a class="btn primary donate-download" href="./image.png" target="_blank" rel="noopener">打开收款码</a>
    </div>
  </div>

  <main class="container">
    <section class="card">
      <h2>1. 输入 API Key / Enter API Key</h2>
      <div class="row">
        <input id="apiKey" class="input" placeholder="Bearer Token" />
        <label class="chk">
          <input type="checkbox" id="rememberKey" />
          记住（localStorage）
        </label>
        <button class="btn" id="btnClearKey">清除</button>
      </div>
      <div class="hint">
        提示：本工具默认通过同站点的 <span class="mono">/api/*</span> 代理转发到 <span class="mono">https://ai.gitee.com/v1</span>，避免浏览器 CORS 限制。
      </div>
    </section>

    <section class="card">
      <h2>2. 选择模型 / Select Model</h2>
      <div class="row">
        <select id="modelSel" class="input">
          <option value="z-image">z-image（文生图 / Text-to-Image）</option>
          <option value="Edit-2511">Edit-2511（图像编辑 / Image Edit）</option>
          <option value="Wan2.2-I2V-A14B">Wan2.2-I2V-A14B（图生视频 / Image-to-Video）</option>
          <option value="HunyuanVideo-1.5">HunyuanVideo-1.5（文生视频 / Text-to-Video）</option>
        </select>
      </div>
    </section>

    <section class="card model-panel" id="panelZ">
      <h2>z-image（文生图 / Text-to-Image）</h2>

      <label class="lab">提示词 Prompt（中/英均可 / CN&EN OK）</label>
      <textarea id="zPrompt" class="textarea" rows="6" placeholder="例如：一只戴墨镜的柴犬，赛博朋克风，超清"></textarea>

      <div class="grid2">
        <div>
          <label class="lab">分辨率 Resolution</label>
          <select id="zRes" class="input"></select>
        </div>
        <div>
          <label class="lab">张数 n（1-4）</label>
          <input id="zN" class="input" type="number" min="1" max="4" value="1" />
        </div>
      </div>

      <div class="hint">
        建议：2048 更清晰但更慢更贵；n&gt;1 会输出多张。<br/>
        Tip: 2048 is sharper but slower/more expensive; n&gt;1 outputs multiple images.
      </div>

      <div class="row">
        <button class="btn primary" id="btnZRun">执行 / Generate</button>
      </div>
    </section>

    <section class="card model-panel" id="panelEdit">
      <h2>Edit-2511（图像编辑 / Image Edit）</h2>

      <div class="grid2">
        <div>
          <label class="lab">图1 Image 1</label>
          <input id="editImg1" class="input" type="file" accept="image/png,image/jpeg,image/webp" />
        </div>
        <div>
          <label class="lab">图2 Image 2</label>
          <input id="editImg2" class="input" type="file" accept="image/png,image/jpeg,image/webp" />
        </div>
      </div>

      <label class="lab">提示词 Prompt</label>
      <textarea id="editPrompt" class="textarea" rows="5" placeholder="描述你要的编辑效果（例如：把背景换成海边日落，保留人物）"></textarea>

      <label class="lab">任务类型 Task Types（可多选 / Multi-select）</label>
      <div class="checks" id="editTaskTypes"></div>

      <div class="grid2">
        <div>
          <label class="lab">steps num_inference_steps（1-50）</label>
          <input id="editSteps" class="input" type="number" min="1" max="50" value="4" />
        </div>
        <div>
          <label class="lab">guidance_scale（0-10）</label>
          <input id="editGuidance" class="input" type="number" min="0" max="10" step="0.5" value="1" />
        </div>
      </div>

      <label class="chk">
        <input type="checkbox" id="editOpenUrl" />
        完成后浏览器打开 file_url / Open in browser after done
      </label>

      <div class="hint">
        Notes: Higher steps = slower but more detail; higher guidance = follows prompt more strongly.
      </div>

      <div class="row">
        <button class="btn primary" id="btnEditRun">执行 / Run</button>
      </div>
    </section>

    <section class="card model-panel" id="panelWan">
      <h2>Wan2.2-I2V-A14B（图生视频 / Image-to-Video）</h2>

      <label class="lab">输入图片 Image</label>
      <input id="wanImg" class="input" type="file" accept="image/png,image/jpeg,image/webp" />

      <label class="lab">提示词 Prompt</label>
      <textarea id="wanPrompt" class="textarea" rows="5" placeholder="描述视频风格/动作（例如：镜头缓慢推进，微风吹动头发，电影感）"></textarea>

      <label class="lab">负面提示词 Negative Prompt（可选 / Optional）</label>
      <textarea id="wanNeg" class="textarea" rows="3" placeholder="例如：lowres, blurry, watermark"></textarea>

      <div class="grid3">
        <div>
          <label class="lab">预设 Preset</label>
          <select id="wanPreset" class="input">
            <option>标准 / Standard</option>
            <option>更清晰 / Sharper</option>
            <option>更动感 / More motion</option>
            <option>更快 / Faster</option>
          </select>
        </div>
        <div class="row-inline">
          <button class="btn" id="btnWanApplyPreset">应用预设 / Apply</button>
        </div>
      </div>

      <div class="grid3">
        <div>
          <label class="lab">分辨率预设 Resolution</label>
          <select id="wanResPreset" class="input"></select>
        </div>
        <div>
          <label class="lab">width 宽（64-2048）</label>
          <input id="wanW" class="input" type="number" min="64" max="2048" step="8" value="832" />
        </div>
        <div>
          <label class="lab">height 高（64-2048）</label>
          <input id="wanH" class="input" type="number" min="64" max="2048" step="8" value="480" />
        </div>
      </div>

      <div class="grid3">
        <div>
          <label class="lab">num_inference_steps（1-100）</label>
          <input id="wanSteps" class="input" type="number" min="1" max="100" value="30" />
        </div>
        <div>
          <label class="lab">guidance_scale（0-20）</label>
          <input id="wanGuidance" class="input" type="number" min="0" max="20" step="0.5" value="5" />
        </div>
        <div>
          <label class="lab">seed（-1=随机 / random）</label>
          <input id="wanSeed" class="input" type="number" min="-1" max="2147483647" value="-1" />
        </div>
      </div>

      <div class="grid3">
        <label class="chk"><input type="checkbox" id="wanWatermark" /> watermark 水印</label>
        <label class="chk"><input type="checkbox" id="wanPromptExtend" /> prompt_extend 自动扩写</label>
        <label class="chk"><input type="checkbox" id="wanOpenUrl" /> 完成后浏览器打开 file_url</label>
      </div>

      <div class="grid3">
        <div>
          <label class="lab">帧率 FPS（1-60）</label>
          <input id="wanFps" class="input" type="number" min="1" max="60" value="24" />
        </div>
        <div>
          <label class="lab">总时长 Duration 秒（0.5-60）</label>
          <input id="wanDuration" class="input" type="number" min="0.5" max="60" step="0.5" value="5" />
        </div>
        <div>
          <label class="lab">num_frames（1-300）</label>
          <input id="wanFrames" class="input" type="number" min="1" max="300" value="30" />
        </div>
      </div>

      <div class="row">
        <label class="chk">
          <input type="checkbox" id="wanAutoFrames" checked />
          num_frames 自动 = FPS×5s（推荐 / Auto）
        </label>
        <label class="chk">
          <input type="checkbox" id="wanZipSegments" />
          生成多段时：一键打包下载（zip）
        </label>
      </div>

      <div class="hint">
        说明：若服务端单次只能生成固定 5 秒，本工具会按你指定的 Duration 分段生成并下载。<br/>
        注意：浏览器端无法像桌面版那样用 ffmpeg 合并/裁剪成“一个最终 mp4”；因此多段会分别提供可播放与下载（也可勾选 zip 打包下载）。<br/>
        EN: If backend returns fixed-length clips, we generate segments and provide playable/downloadable mp4s (optionally zip).
      </div>

      <div class="row">
        <button class="btn primary" id="btnWanRun">执行 / Generate Video</button>
      </div>
    </section>

    <section class="card model-panel" id="panelHunyuan">
      <h2>HunyuanVideo-1.5（文生视频 / Text-to-Video）</h2>

      <label class="lab">提示词 Prompt（中/英均可 / CN&EN OK）</label>
      <textarea id="hyPrompt" class="textarea" rows="6" placeholder="例如：年轻的中国女性穿着传统红色古装，轻轻撩起头纱，特写镜头，浅景深，暖色调"></textarea>

      <label class="lab">负面提示词 Negative Prompt（可选 / Optional）</label>
      <textarea id="hyNeg" class="textarea" rows="3" placeholder="例如：lowres, blurry, watermark"></textarea>

      <div class="grid3">
        <div>
          <label class="lab">画面比例 Aspect Ratio</label>
          <select id="hyAspect" class="input">
            <option value="16:9">16:9</option>
            <option value="9:16">9:16</option>
            <option value="1:1">1:1</option>
          </select>
        </div>
        <div>
          <label class="lab">steps num_inferenece_steps（1-10）</label>
          <input id="hySteps" class="input" type="number" min="1" max="10" value="10" />
        </div>
        <div>
          <label class="lab">fps（1-24）</label>
          <input id="hyFps" class="input" type="number" min="1" max="24" value="24" />
        </div>
      </div>

      <div class="grid3">
        <div>
          <label class="lab">num_frames（81-241）</label>
          <input id="hyFrames" class="input" type="number" min="81" max="241" value="241" />
        </div>
        <div>
          <label class="lab">seed（正整数 / positive integer）</label>
          <input id="hySeed" class="input" type="number" min="1" max="2147483647" value="1" />
        </div>
        <label class="chk">
          <input type="checkbox" id="hyOpenUrl" />
          完成后浏览器打开 file_url / Open in browser after done
        </label>
      </div>

      <div class="hint">
        说明：这是异步任务接口，会先返回 task_id，然后自动轮询状态直至 success/failed。<br/>
        EN: This is an async endpoint; we create a task, then poll status until success/failed.
      </div>

      <div class="row">
        <button class="btn primary" id="btnHyRun">执行 / Generate Video</button>
      </div>
    </section>

    <section class="card">
      <div class="row row-between">
        <h2>输出 / Output</h2>
        <div class="row-inline">
          <button class="btn" id="btnClearOutput">清空输出</button>
        </div>
      </div>
      <div id="output" class="output"></div>
    </section>
  </main>

  <footer class="footer">
    <div class="mono">Powered by Cloudflare Pages Functions proxy • 请使用者自觉遵守所在国家的法律，切勿触犯法律界限 • Please consciously comply with the laws of your country and do not cross legal boundaries.</div>
  </footer>

  <script src="./app.js"></script>
  <script>
    (function () {
      const donateBtn = document.getElementById("donateBtn");
      const donateModal = document.getElementById("donateModal");
      const donateMask = document.getElementById("donateMask");
      const donateClose = document.getElementById("donateClose");

      if (!donateBtn || !donateModal || !donateMask || !donateClose) return;

      const openDonate = () => {
        donateModal.classList.add("show");
        donateModal.setAttribute("aria-hidden", "false");
        document.body.classList.add("modal-open");
      };

      const closeDonate = () => {
        donateModal.classList.remove("show");
        donateModal.setAttribute("aria-hidden", "true");
        document.body.classList.remove("modal-open");
      };

      donateBtn.addEventListener("click", openDonate);
      donateMask.addEventListener("click", closeDonate);
      donateClose.addEventListener("click", closeDonate);

      document.addEventListener("keydown", (e) => {
        if (e.key === "Escape" && donateModal.classList.contains("show")) {
          closeDonate();
        }
      });
    })();
  </script>
</body>
</html>