File size: 3,128 Bytes
9894238 | 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 | <!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>QuickDraw Diffusion</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<main class="app-shell">
<section class="workspace" aria-labelledby="title">
<div class="toolbar">
<div>
<p class="eyebrow">QuickDraw Diffusion</p>
<h1 id="title">Sketch Generator</h1>
</div>
<div class="status" id="status">Checking model...</div>
</div>
<div class="layout">
<form class="panel controls" id="generate-form">
<label class="field">
<span>类别</span>
<select id="class-select" name="class_name" required></select>
</label>
<div class="field">
<span>数量</span>
<div class="segmented" role="radiogroup" aria-label="生成数量">
<label><input type="radio" name="count" value="1" />1</label>
<label><input type="radio" name="count" value="4" checked />4</label>
<label><input type="radio" name="count" value="8" />8</label>
</div>
</div>
<label class="field">
<span>CFG</span>
<div class="range-row">
<input id="guidance" name="guidance_scale" type="range" min="0" max="8" step="0.25" value="3" />
<output id="guidance-value" for="guidance">3.00</output>
</div>
</label>
<label class="field">
<span>Seed</span>
<input id="seed" name="seed" type="number" min="0" max="2147483647" placeholder="随机" />
</label>
<button class="generate-button" type="submit" id="generate-button">
<span class="button-icon" aria-hidden="true"></span>
<span>生成</span>
</button>
</form>
<section class="panel preview" aria-live="polite">
<div class="preview-header">
<div>
<p class="eyebrow">Result</p>
<h2 id="result-title">选择类别后生成</h2>
</div>
<a id="download-link" class="download-link" href="#" download="quickdraw-sample.png" aria-disabled="true">下载</a>
</div>
<div class="image-stage" id="image-stage">
<div class="empty-state">等待生成</div>
</div>
<div class="recognition">
<div class="recognition-actions">
<button class="recognize-button" type="button" id="recognize-button" disabled>识别当前图片</button>
<span id="cnn-status">CNN: checking...</span>
</div>
<div class="recognition-list" id="recognition-list"></div>
</div>
<p class="message" id="message"></p>
</section>
</div>
</section>
</main>
<script src="/static/app.js"></script>
</body>
</html>
|