Hugging Face's logo

Spaces:
Manjeet9812
/
new_LDM_hosting
Runtime error

App Files
xet
Community
Manjeet9812 commited on
Commit
32ea266
·
verified ·
1 Parent(s): 90b8e78

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +73 -86
index.html CHANGED
@@ -1,86 +1,73 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <title>Text → Image (Latent Diffusion)</title>
6
- <meta name="viewport" content="width=device-width,initial-scale=1" />
7
- <style>
8
- body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:#0b0c10;color:#e5e7eb}
9
- .wrap{max-width:900px;margin:40px auto;padding:0 16px}
10
- h1{font-size:22px;margin:0 0 16px}
11
- .card{background:#111827;border:1px solid #1f2937;border-radius:14px;padding:16px;margin-bottom:16px}
12
- .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
13
- input[type=text]{flex:1;min-width:260px;padding:12px 14px;border-radius:10px;border:1px solid #374151;background:#0b1220;color:#e5e7eb}
14
- input[type=number]{width:110px;padding:10px;border-radius:10px;border:1px solid #374151;background:#0b1220;color:#e5e7eb}
15
- button{padding:12px 16px;border:0;border-radius:10px;background:#2563eb;color:white;font-weight:600;cursor:pointer}
16
- button:disabled{opacity:.6;cursor:not-allowed}
17
- .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
18
- .imgbox{background:#0f172a;border:1px solid #1e293b;border-radius:12px;padding:8px}
19
- .imgbox img{width:100%;height:auto;border-radius:8px;display:block}
20
- .small{font-size:12px;color:#9ca3af}
21
- </style>
22
- </head>
23
- <body>
24
- <div class="wrap">
25
- <h1>Text → Image (Latent Diffusion)</h1>
26
- <div class="card">
27
- <div class="row" style="margin-bottom:8px">
28
- <input id="prompt" type="text" placeholder="type your prompt..." />
29
- </div>
30
- <div class="row">
31
- <label class="small">num images</label>
32
- <input id="num" type="number" value="4" min="1" max="16"/>
33
- <label class="small">guidance</label>
34
- <input id="guid" type="number" value="4" step="0.5" min="0" max="12"/>
35
- <label class="small">steps</label>
36
- <input id="steps" type="number" value="70" min="10" max="200"/>
37
- <button id="go">Generate</button>
38
- </div>
39
- </div>
40
- <div id="status" class="small"></div>
41
- <div id="out" class="grid"></div>
42
- </div>
43
-
44
- <script>
45
- const $ = (id) => document.getElementById(id)
46
-
47
- $('go').addEventListener('click', async () => {
48
- const text = $('prompt').value.trim()
49
- const num_images = parseInt($('num').value || '4', 10)
50
- const guidance = parseFloat($('guid').value || '4')
51
- const steps = parseInt($('steps').value || '70', 10)
52
-
53
- if (!text) { alert('Enter a prompt'); return }
54
-
55
- $('go').disabled = true
56
- $('status').textContent = 'Generating...'
57
-
58
- try {
59
- const res = await fetch('/generate', {
60
- method: 'POST',
61
- headers: {'Content-Type': 'application/json'},
62
- body: JSON.stringify({ text, num_images, guidance, steps })
63
- })
64
- if (!res.ok) throw new Error('Server error: ' + res.status)
65
- const data = await res.json()
66
- const out = $('out')
67
- out.innerHTML = ''
68
- data.images.forEach((src) => {
69
- const div = document.createElement('div')
70
- div.className = 'imgbox'
71
- const img = document.createElement('img')
72
- img.src = src
73
- div.appendChild(img)
74
- out.appendChild(div)
75
- })
76
- $('status').textContent = `Done. ${data.images.length} image(s), size ${data.shape?.join('x')||''}`
77
- } catch (e) {
78
- console.error(e)
79
- $('status').textContent = 'Error: ' + e.message
80
- } finally {
81
- $('go').disabled = false
82
- }
83
- })
84
- </script>
85
- </body>
86
- </html>
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>LDM / Stable Diffusion (CPU)</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <style>
8
+ body { font-family: system-ui, sans-serif; margin: 24px; }
9
+ .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
10
+ input[type="text"] { width: 520px; max-width: 100%; padding: 8px; }
11
+ input[type="number"] { width: 100px; padding: 6px; }
12
+ button { padding: 10px 14px; cursor: pointer; }
13
+ #out { margin-top: 18px; max-width: 100%; border-radius: 8px; }
14
+ small { color: #666; }
15
+ </style>
16
+ </head>
17
+ <body>
18
+ <h1>LDM / Stable Diffusion (CPU)</h1>
19
+ <div class="row">
20
+ <input id="prompt" type="text" placeholder="Describe the image…" value="a scenic mountain lake at sunrise, mist, ultra-detailed" />
21
+ <button id="go">Generate</button>
22
+ </div>
23
+ <div class="row" style="margin-top:8px">
24
+ <label>Steps <input id="steps" type="number" min="1" max="100" value="30"></label>
25
+ <label>Guidance <input id="guidance" type="number" step="0.1" value="7.5"></label>
26
+ <label>Seed <input id="seed" type="number" placeholder="(optional)"></label>
27
+ <button id="direct">Open as PNG</button>
28
+ </div>
29
+ <p><small>Tip: “Open as PNG” hits <code>/generate.png</code> which returns an actual image.</small></p>
30
+ <img id="out" alt="result will appear here" />
31
+
32
+ <script>
33
+ const el = (id) => document.getElementById(id);
34
+ const go = el('go');
35
+ const direct = el('direct');
36
+ const out = el('out');
37
+
38
+ go.onclick = async () => {
39
+ go.disabled = true; go.textContent = 'Generating…';
40
+ out.removeAttribute('src');
41
+ const body = {
42
+ prompt: el('prompt').value,
43
+ num_inference_steps: Number(el('steps').value),
44
+ guidance_scale: Number(el('guidance').value),
45
+ };
46
+ const seed = el('seed').value.trim();
47
+ if (seed) body.seed = Number(seed);
48
+
49
+ const res = await fetch('/generate', {
50
+ method: 'POST',
51
+ headers: { 'Content-Type': 'application/json' },
52
+ body: JSON.stringify(body)
53
+ });
54
+ const data = await res.json();
55
+ // Show the image, not the string:
56
+ out.src = 'data:image/png;base64,' + data.image_base64;
57
+ go.disabled = false; go.textContent = 'Generate';
58
+ };
59
+
60
+ direct.onclick = () => {
61
+ const p = new URLSearchParams({
62
+ prompt: el('prompt').value,
63
+ num_inference_steps: String(el('steps').value),
64
+ guidance_scale: String(el('guidance').value)
65
+ });
66
+ const seed = el('seed').value.trim();
67
+ if (seed) p.set('seed', seed);
68
+ // Opens a real PNG in a new tab
69
+ window.open('/generate.png?' + p.toString(), '_blank');
70
+ };
71
+ </script>
72
+ </body>
73
+ </html>