Hugging Face's logo

Spaces:
HI7RAI
/
anycoder-c9e89e4e
Running

App Files Community
HI7RAI commited on
Commit
46017ef
·
verified ·
1 Parent(s): 7b5d609

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +258 -19
index.html CHANGED
@@ -1,19 +1,258 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
6
+ <title>Universal Code Fixer & Visual FX Studio</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@2.20.0/dist/transformers.min.js"></script>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
10
+ <style>
11
+ :root {
12
+ --primary: #00ff9d;
13
+ --secondary: #ff0055;
14
+ --bg: #050505;
15
+ --panel: #111;
16
+ --glass: rgba(17,17,17,0.85);
17
+ }
18
+ body {
19
+ background: var(--bg);
20
+ color: #eee;
21
+ font-family: 'Fira Code', monospace;
22
+ overflow-x: hidden;
23
+ }
24
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
25
+ ::-webkit-scrollbar-track { background: #0a0a0a; }
26
+ ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
27
+ ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
28
+
29
+ .glass-panel {
30
+ background: var(--glass);
31
+ backdrop-filter: blur(12px);
32
+ border: 1px solid #222;
33
+ }
34
+
35
+ .neon-border {
36
+ border: 1px solid var(--primary);
37
+ box-shadow: 0 0 10px rgba(0,255,157,0.2), inset 0 0 10px rgba(0,255,157,0.05);
38
+ }
39
+
40
+ .btn-neon {
41
+ background: transparent;
42
+ border: 1px solid var(--primary);
43
+ color: var(--primary);
44
+ padding: 8px 16px;
45
+ cursor: pointer;
46
+ transition: all 0.2s;
47
+ text-transform: uppercase;
48
+ font-size: 11px;
49
+ letter-spacing: 1px;
50
+ }
51
+ .btn-neon:hover {
52
+ background: var(--primary);
53
+ color: #000;
54
+ box-shadow: 0 0 20px rgba(0,255,157,0.5);
55
+ }
56
+
57
+ .btn-danger {
58
+ border-color: var(--secondary);
59
+ color: var(--secondary);
60
+ }
61
+ .btn-danger:hover {
62
+ background: var(--secondary);
63
+ color: white;
64
+ box-shadow: 0 0 20px rgba(255,0,85,0.5);
65
+ }
66
+
67
+ textarea, input[type="text"] {
68
+ background: #0a0a0a;
69
+ border: 1px solid #333;
70
+ color: var(--primary);
71
+ font-family: 'Fira Code', monospace;
72
+ font-size: 12px;
73
+ padding: 10px;
74
+ outline: none;
75
+ resize: vertical;
76
+ }
77
+ textarea:focus, input:focus {
78
+ border-color: var(--primary);
79
+ box-shadow: 0 0 5px rgba(0,255,157,0.3);
80
+ }
81
+
82
+ .loading-bar {
83
+ height: 3px;
84
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
85
+ transition: width 0.3s;
86
+ }
87
+
88
+ .status-dot {
89
+ width: 8px;
90
+ height: 8px;
91
+ border-radius: 50%;
92
+ background: #333;
93
+ }
94
+ .status-dot.ready { background: var(--primary); box-shadow: 0 0 10px var(--primary); }
95
+ .status-dot.loading { background: #ffaa00; animation: pulse 1s infinite; }
96
+ .status-dot.error { background: var(--secondary); }
97
+
98
+ @keyframes pulse {
99
+ 0%, 100% { opacity: 1; }
100
+ 50% { opacity: 0.5; }
101
+ }
102
+
103
+ @keyframes slideIn {
104
+ from { transform: translateX(-20px); opacity: 0; }
105
+ to { transform: translateX(0); opacity: 1; }
106
+ }
107
+
108
+ .fx-layer {
109
+ position: absolute;
110
+ top: 0;
111
+ left: 0;
112
+ width: 100%;
113
+ height: 100%;
114
+ pointer-events: none;
115
+ transition: opacity 0.5s;
116
+ }
117
+
118
+ .viewport-frame {
119
+ position: relative;
120
+ width: 100%;
121
+ height: 100%;
122
+ overflow: hidden;
123
+ }
124
+
125
+ .copy-btn {
126
+ position: absolute;
127
+ right: 5px;
128
+ top: 5px;
129
+ background: #222;
130
+ border: 1px solid #444;
131
+ color: #888;
132
+ font-size: 10px;
133
+ padding: 2px 6px;
134
+ cursor: pointer;
135
+ }
136
+ .copy-btn:hover {
137
+ color: var(--primary);
138
+ border-color: var(--primary);
139
+ }
140
+ </style>
141
+ </head>
142
+ <body class="flex flex-col h-screen">
143
+
144
+ <!-- Header -->
145
+ <header class="h-14 border-b border-[#222] flex justify-between items-center px-4 shrink-0 glass-panel z-30">
146
+ <div class="flex items-center gap-4">
147
+ <div class="text-[var(--primary)] font-bold tracking-widest text-lg">⚡ UNIVERSAL CODE FIXER</div>
148
+ <div class="flex items-center gap-2">
149
+ <div id="modelStatus" class="status-dot"></div>
150
+ <span id="modelStatusText" class="text-xs text-gray-500">Initialisiere...</span>
151
+ </div>
152
+ </div>
153
+ <div class="flex items-center gap-3">
154
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-gray-400 hover:text-[var(--primary)] transition-colors">
155
+ Built with <span class="text-[var(--primary)] underline">anycoder</span>
156
+ </a>
157
+ <button class="btn-neon" id="btnClearHistory">Clear History</button>
158
+ </div>
159
+ </header>
160
+
161
+ <!-- Progress Bar -->
162
+ <div id="progressContainer" class="h-1 bg-[#111]">
163
+ <div id="progressBar" class="loading-bar" style="width: 0%"></div>
164
+ </div>
165
+
166
+ <div class="flex flex-1 overflow-hidden">
167
+ <!-- LEFT: Code Input Panel -->
168
+ <aside class="w-1/3 border-r border-[#222] glass-panel flex flex-col p-3 gap-3 z-20">
169
+ <div class="flex justify-between items-center">
170
+ <div class="text-xs font-bold text-gray-400">CODE INPUT</div>
171
+ <div class="flex gap-2">
172
+ <button class="btn-neon text-[10px]" id="btnLoadExample">Load Example</button>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="relative flex-1">
177
+ <textarea id="codeInput" class="w-full h-full min-h-[200px]" placeholder="// Paste your code here..."></textarea>
178
+ <button class="copy-btn" onclick="copyToClipboard('codeInput')">COPY</button>
179
+ </div>
180
+
181
+ <div class="flex gap-2">
182
+ <button class="btn-neon flex-1" id="btnFix">🔧 Auto Fix</button>
183
+ <button class="btn-neon flex-1 btn-danger" id="btnExecute">▶ Execute</button>
184
+ </div>
185
+
186
+ <div class="text-xs text-gray-500">
187
+ Language:
188
+ <select id="languageSelect" class="bg-[#0a0a0a] border border-[#333] text-[var(--primary)] px-2 py-1 ml-2">
189
+ <option value="javascript">JavaScript</option>
190
+ <option value="python">Python</option>
191
+ <option value="html">HTML</option>
192
+ <option value="css">CSS</option>
193
+ </select>
194
+ </div>
195
+ </aside>
196
+
197
+ <!-- CENTER: Visual FX Viewport -->
198
+ <main class="flex-1 relative flex flex-col bg-[#080808]">
199
+ <div class="h-8 border-b border-[#222] flex items-center px-3 gap-2 bg-[#0a0a0a]">
200
+ <span class="text-xs text-gray-400">VISUAL FX STUDIO</span>
201
+ <div class="flex-1"></div>
202
+ <label class="text-xs text-gray-500">
203
+ <input type="checkbox" id="enableBW" checked> B&W Overlay
204
+ </label>
205
+ <input type="range" id="bwAlpha" min="0" max="100" value="50" class="w-20">
206
+ <button class="btn-neon text-[10px]" id="btnCapture">📷 Capture</button>
207
+ </div>
208
+
209
+ <div id="viewportFrame" class="flex-1 relative viewport-frame">
210
+ <!-- Canvas layers for double exposure effect -->
211
+ <canvas id="mainCanvas" class="absolute top-0 left-0 w-full h-full"></canvas>
212
+ <canvas id="bwOverlay" class="fx-layer" style="opacity: 0.5; mix-blend-mode: saturation;"></canvas>
213
+ <video id="videoSource" class="hidden" loop muted playsinline></video>
214
+ </div>
215
+
216
+ <!-- FX Controls -->
217
+ <div class="h-32 border-t border-[#222] glass-panel p-3 flex gap-3 overflow-x-auto">
218
+ <div class="flex flex-col gap-2 min-w-[200px]">
219
+ <div class="text-xs text-gray-400">ANIMATION</div>
220
+ <label class="text-xs text-gray-500">Speed: <input type="range" id="animSpeed" min="0" max="100" value="50" class="w-24 ml-2"></label>
221
+ <label class="text-xs text-gray-500">Scale: <input type="range" id="animScale" min="10" max="200" value="100" class="w-24 ml-2"></label>
222
+ </div>
223
+ <div class="flex flex-col gap-2 min-w-[200px]">
224
+ <div class="text-xs text-gray-400">COLOR FILTER</div>
225
+ <label class="text-xs text-gray-500">Hue: <input type="range" id="colorHue" min="0" max="360" value="0" class="w-24 ml-2"></label>
226
+ <label class="text-xs text-gray-500">Sat: <input type="range" id="colorSat" min="0" max="100" value="50" class="w-24 ml-2"></label>
227
+ </div>
228
+ <div class="flex flex-col gap-2 min-w-[200px]">
229
+ <div class="text-xs text-gray-400">DOUBLE EXPOSURE</div>
230
+ <label class="text-xs text-gray-500">Mix: <input type="range" id="exposureMix" min="0" max="100" value="50" class="w-24 ml-2"></label>
231
+ <label class="text-xs text-gray-500">Offset: <input type="range" id="exposureOffset" min="0" max="100" value="0" class="w-24 ml-2"></label>
232
+ </div>
233
+ </div>
234
+ </main>
235
+
236
+ <!-- RIGHT: Output & History -->
237
+ <aside class="w-1/3 border-l border-[#222] glass-panel flex flex-col p-3 gap-3 z-20">
238
+ <div class="flex justify-between items-center">
239
+ <div class="text-xs font-bold text-gray-400">OUTPUT & HISTORY</div>
240
+ <button class="btn-neon text-[10px]" id="btnSaveOutput">💾 Save</button>
241
+ </div>
242
+
243
+ <div class="relative flex-1">
244
+ <textarea id="codeOutput" class="w-full h-full min-h-[200px]" placeholder="// Fixed code will appear here..." readonly></textarea>
245
+ <button class="copy-btn" onclick="copyToClipboard('codeOutput')">COPY</button>
246
+ </div>
247
+
248
+ <div class="text-xs font-bold text-gray-400 mt-2">EXECUTION LOG</div>
249
+ <div id="execLog" class="h-32 overflow-y-auto border border-[#222] p-2 bg-[#0a0a0a] text-[10px] font-mono"></div>
250
+ </aside>
251
+ </div>
252
+
253
+ <!-- Hidden iframe for safe code execution -->
254
+ <iframe id="sandboxFrame" class="hidden" sandbox="allow-scripts"></iframe>
255
+
256
+ <script src="index.js"></script>
257
+ </body>
258
+ </html>