Hugging Face's logo

Spaces:
STACTIQ
/
README
Running

App Files Community
Kylinho commited on
Commit
5cc39e7
·
verified ·
1 Parent(s): bc7ff41

Create index.html- Stactiq Tactical Generator

Browse files

Added the HTML UI for Stactiq Tactical Diagram Generator.
Includes text input, OpenAI image generation logic, and visual output section.

Files changed (1) hide show
  1. index.html +129 -0
index.html ADDED
@@ -0,0 +1,129 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Stactiq — Tactical Diagram Generator</title>
7
+
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ font-family: "Inter", sans-serif;
12
+ background-color: #0b0f12;
13
+ color: #e6f1ff;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ justify-content: center;
18
+ min-height: 100vh;
19
+ }
20
+
21
+ h1 {
22
+ color: #00ff88;
23
+ letter-spacing: 1px;
24
+ text-align: center;
25
+ }
26
+
27
+ .container {
28
+ width: 90%;
29
+ max-width: 600px;
30
+ background: #10161b;
31
+ border: 1px solid #182029;
32
+ border-radius: 16px;
33
+ padding: 32px;
34
+ box-shadow: 0 0 15px #00ff8844;
35
+ }
36
+
37
+ textarea {
38
+ width: 100%;
39
+ background: #0b0f12;
40
+ border: 1px solid #00ff88;
41
+ border-radius: 8px;
42
+ color: #e6f1ff;
43
+ font-size: 16px;
44
+ padding: 12px;
45
+ resize: vertical;
46
+ min-height: 100px;
47
+ margin-top: 12px;
48
+ }
49
+
50
+ button {
51
+ background-color: #00ff88;
52
+ color: #0b0f12;
53
+ border: none;
54
+ border-radius: 8px;
55
+ font-size: 16px;
56
+ font-weight: bold;
57
+ padding: 10px 20px;
58
+ margin-top: 16px;
59
+ cursor: pointer;
60
+ transition: background 0.2s;
61
+ width: 100%;
62
+ }
63
+
64
+ button:hover {
65
+ background-color: #39ffb3;
66
+ }
67
+
68
+ img {
69
+ margin-top: 24px;
70
+ width: 100%;
71
+ border-radius: 8px;
72
+ border: 1px solid #00ff88;
73
+ }
74
+
75
+ footer {
76
+ text-align: center;
77
+ margin-top: 24px;
78
+ font-size: 14px;
79
+ color: #7f8c8d;
80
+ }
81
+
82
+ </style>
83
+
84
+ <script type="module">
85
+ async function generateDiagram() {
86
+ const description = document.getElementById("sessionText").value;
87
+ const output = document.getElementById("output");
88
+ output.innerHTML = "⚙️ Generating tactical diagram...";
89
+
90
+ try {
91
+ const res = await fetch("https://api.openai.com/v1/images/generations", {
92
+ method: "POST",
93
+ headers: {
94
+ "Content-Type": "application/json",
95
+ "Authorization": `Bearer YOUR_OPENAI_API_KEY`, // replace later with environment variable
96
+ },
97
+ body: JSON.stringify({
98
+ model: "gpt-image-1",
99
+ prompt: `Top-down tactical soccer diagram visualizing: ${description}. Show field zones, player positions, movement arrows, and formations.`,
100
+ size: "1024x1024"
101
+ }),
102
+ });
103
+
104
+ const data = await res.json();
105
+ const url = data.data?.[0]?.url;
106
+ if (url) {
107
+ output.innerHTML = `<img src="${url}" alt="Generated Tactical Diagram" />`;
108
+ } else {
109
+ output.innerHTML = "⚠️ No image returned from API.";
110
+ }
111
+ } catch (err) {
112
+ output.innerHTML = "❌ Error: " + err.message;
113
+ }
114
+ }
115
+ </script>
116
+ </head>
117
+
118
+ <body>
119
+ <div class="container">
120
+ <h1>⚽ Stactiq Tactical Generator</h1>
121
+ <p>Type your training session or tactical idea below and generate a realistic AI diagram.</p>
122
+ <textarea id="sessionText" placeholder="e.g., 4v4 positional rondo focusing on pressing triggers"></textarea>
123
+ <button onclick="generateDiagram()">Generate Diagram</button>
124
+ <div id="output"></div>
125
+ </div>
126
+
127
+ <footer>© 2025 Stactiq — Built on Hugging Face Spaces</footer>
128
+ </body>
129
+ </html>