lcccluck
/

sketch-model

sketch-generation

class-conditional

classifier-free-guidance

Model card Files Files and versions

sketch-model / quickdraw_app /static /index.html

lcccluck's picture

Add QuickDraw diffusion model and app code

9894238 verified 26 days ago

History Blame Contribute Delete

3.13 kB

	<!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>