| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Stactiq — Tactical Diagram Generator</title> |
|
|
| <style> |
| body { |
| margin: 0; |
| font-family: "Inter", sans-serif; |
| background-color: #0b0f12; |
| color: #e6f1ff; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| min-height: 100vh; |
| } |
| |
| h1 { |
| color: #00ff88; |
| letter-spacing: 1px; |
| text-align: center; |
| } |
| |
| .container { |
| width: 90%; |
| max-width: 600px; |
| background: #10161b; |
| border: 1px solid #182029; |
| border-radius: 16px; |
| padding: 32px; |
| box-shadow: 0 0 15px #00ff8844; |
| } |
| |
| textarea { |
| width: 100%; |
| background: #0b0f12; |
| border: 1px solid #00ff88; |
| border-radius: 8px; |
| color: #e6f1ff; |
| font-size: 16px; |
| padding: 12px; |
| resize: vertical; |
| min-height: 100px; |
| margin-top: 12px; |
| } |
| |
| button { |
| background-color: #00ff88; |
| color: #0b0f12; |
| border: none; |
| border-radius: 8px; |
| font-size: 16px; |
| font-weight: bold; |
| padding: 10px 20px; |
| margin-top: 16px; |
| cursor: pointer; |
| transition: background 0.2s; |
| width: 100%; |
| } |
| |
| button:hover { |
| background-color: #39ffb3; |
| } |
| |
| img { |
| margin-top: 24px; |
| width: 100%; |
| border-radius: 8px; |
| border: 1px solid #00ff88; |
| } |
| |
| footer { |
| text-align: center; |
| margin-top: 24px; |
| font-size: 14px; |
| color: #7f8c8d; |
| } |
| |
| </style> |
|
|
| <script type="module"> |
| async function generateDiagram() { |
| const description = document.getElementById("sessionText").value; |
| const output = document.getElementById("output"); |
| output.innerHTML = "⚙️ Generating tactical diagram..."; |
| |
| try { |
| const res = await fetch("https://api.openai.com/v1/images/generations", { |
| method: "POST", |
| headers: { |
| "Content-Type": "application/json", |
| "Authorization": `Bearer YOUR_OPENAI_API_KEY`, |
| }, |
| body: JSON.stringify({ |
| model: "gpt-image-1", |
| prompt: `Top-down tactical soccer diagram visualizing: ${description}. Show field zones, player positions, movement arrows, and formations.`, |
| size: "1024x1024" |
| }), |
| }); |
| |
| const data = await res.json(); |
| const url = data.data?.[0]?.url; |
| if (url) { |
| output.innerHTML = `<img src="${url}" alt="Generated Tactical Diagram" />`; |
| } else { |
| output.innerHTML = "⚠️ No image returned from API."; |
| } |
| } catch (err) { |
| output.innerHTML = "❌ Error: " + err.message; |
| } |
| } |
| </script> |
| </head> |
|
|
| <body> |
| <div class="container"> |
| <h1>⚽ Stactiq Tactical Generator</h1> |
| <p>Type your training session or tactical idea below and generate a realistic AI diagram.</p> |
| <textarea id="sessionText" placeholder="e.g., 4v4 positional rondo focusing on pressing triggers"></textarea> |
| <button onclick="generateDiagram()">Generate Diagram</button> |
| <div id="output"></div> |
| </div> |
|
|
| <footer>© 2025 Stactiq — Built on Hugging Face Spaces</footer> |
| </body> |
| </html> |
