Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>PowerApps Mockup Generator</title> | |
| <style> | |
| body { font-family: "Segoe UI", sans-serif; margin: 0; padding: 20px; background:#f4f6f8; } | |
| h1 { text-align:center; color:#0078d4; } | |
| #uploadForm { display:flex; flex-direction:column; align-items:center; background:#fff; padding:16px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.08); margin-bottom:12px; } | |
| input[type="file"] { margin:8px 0; } | |
| button { background:#0078d4; color:#fff; border:none; padding:10px 14px; border-radius:6px; cursor:pointer; } | |
| button:hover { background:#005ea2; } | |
| #loading, #success { text-align:center; margin:10px 0; display:none; font-weight:600; } | |
| #output iframe { width:100%; height:72vh; border:1px solid #ccc; border-radius:6px; display:block; } | |
| #generatedLink { | |
| display: inline-block; | |
| margin-top: 12px; | |
| font-weight: 600; | |
| color: #0078d4; | |
| text-decoration: none; | |
| } | |
| #generatedLink:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>📄 Intelligent PowerApps Mockup Generator</h1> | |
| <form id="uploadForm" enctype="multipart/form-data"> | |
| <input id="files" name="files" type="file" multiple accept=".pdf,.docx" /> | |
| <button type="submit">Upload & Generate</button> | |
| </form> | |
| <div id="loading">⏳ Generating UI mockups — please wait...</div> | |
| <div id="success">✅ Mockups ready!</div> | |
| <div id="output"></div> | |
| <script> | |
| (function () { | |
| const uploadForm = document.getElementById("uploadForm"); | |
| const loadingEl = document.getElementById("loading"); | |
| const successEl = document.getElementById("success"); | |
| const outputEl = document.getElementById("output"); | |
| uploadForm.addEventListener("submit", async (ev) => { | |
| ev.preventDefault(); | |
| const files = document.getElementById("files").files; | |
| if (!files || files.length === 0) { alert("Choose at least one file."); return; } | |
| const formData = new FormData(); | |
| for (let i = 0; i < files.length; i++) formData.append("files", files[i]); | |
| loadingEl.style.display = "block"; | |
| successEl.style.display = "none"; | |
| outputEl.innerHTML = ""; | |
| try { | |
| const resp = await fetch("/upload", { method: "POST", body: formData }); | |
| const data = await resp.json(); | |
| loadingEl.style.display = "none"; | |
| if (data.error) { | |
| alert("Error: " + data.error); | |
| return; | |
| } | |
| // 🧱 Display the generated HTML preview | |
| const iframe = document.createElement("iframe"); | |
| iframe.id = "generatedFrame"; | |
| iframe.style.width = "100%"; | |
| iframe.style.height = "72vh"; | |
| if (data.link) { | |
| iframe.src = data.link; | |
| } else { | |
| const blob = new Blob([data.html], { type: "text/html" }); | |
| iframe.src = URL.createObjectURL(blob); | |
| } | |
| outputEl.appendChild(iframe); | |
| // Add Download Report button | |
| const btn = document.createElement("button"); | |
| btn.textContent = "📥 Download Report"; | |
| btn.style.marginTop = "12px"; | |
| btn.onclick = async () => { | |
| btn.disabled = true; | |
| btn.textContent = "⏳ Generating report..."; | |
| try { | |
| const resp = await fetch("/generate_report", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ url: data.link }), | |
| }); | |
| if (!resp.ok) throw new Error("Failed to generate report"); | |
| const blob = await resp.blob(); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement("a"); | |
| a.href = url; | |
| a.download = "UI_Report.pdf"; | |
| a.click(); | |
| window.URL.revokeObjectURL(url); | |
| btn.textContent = "📥 Download Report"; | |
| } catch (err) { | |
| alert("Error generating report — check logs"); | |
| console.error(err); | |
| btn.textContent = "❌ Failed"; | |
| } finally { | |
| btn.disabled = false; | |
| } | |
| }; | |
| outputEl.appendChild(btn); | |
| // 🌐 Add link display for full-screen view | |
| if (data.link) { | |
| const viewLink = document.createElement("a"); | |
| viewLink.id = "generatedLink"; | |
| viewLink.href = data.link; | |
| viewLink.target = "_blank"; | |
| viewLink.textContent = "🌐 View Full Screen UI"; | |
| outputEl.appendChild(viewLink); | |
| } | |
| successEl.style.display = "block"; | |
| } catch (err) { | |
| loadingEl.style.display = "none"; | |
| console.error("Upload/generate error:", err); | |
| alert("Upload failed — check console for details."); | |
| } | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |