Hugging Face's logo

Spaces:
Albian2025
/
elliott-wave-analisis
Running

App Files Community
Albian2025 commited on
Commit
cfce8da
·
verified ·
1 Parent(s): 9a34bf6

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +580 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Elliott Wave Analisis
3
- emoji: 🏢
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: elliott-wave-analisis
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,580 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Elliott Wave Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/fabric@5.3.1/dist/fabric.min.js"></script>
11
+ <style>
12
+ .dropzone {
13
+ border: 2px dashed #3b82f6;
14
+ border-radius: 0.5rem;
15
+ transition: all 0.3s ease;
16
+ }
17
+ .dropzone.active {
18
+ border-color: #10b981;
19
+ background-color: #f0f9ff;
20
+ }
21
+ .wave-tooltip {
22
+ position: absolute;
23
+ background: rgba(0, 0, 0, 0.7);
24
+ color: white;
25
+ padding: 5px 10px;
26
+ border-radius: 4px;
27
+ font-size: 12px;
28
+ pointer-events: none;
29
+ z-index: 100;
30
+ transform: translate(-50%, -100%);
31
+ white-space: nowrap;
32
+ }
33
+ .canvas-container {
34
+ position: relative;
35
+ margin: 0 auto;
36
+ }
37
+ .probability-meter {
38
+ height: 8px;
39
+ border-radius: 4px;
40
+ background: linear-gradient(to right, #ef4444, #f59e0b, #10b981);
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 min-h-screen">
45
+ <div class="container mx-auto px-4 py-8">
46
+ <header class="text-center mb-8">
47
+ <h1 class="text-3xl font-bold text-blue-600 mb-2">Elliott Wave Analyzer</h1>
48
+ <p class="text-gray-600">Upload your market chart and get automated Elliott Wave analysis with probability indicators</p>
49
+ </header>
50
+
51
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
52
+ <div class="grid md:grid-cols-2 gap-8">
53
+ <div>
54
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Upload Chart</h2>
55
+ <div id="dropzone" class="dropzone p-8 text-center cursor-pointer mb-4">
56
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i>
57
+ <p class="text-gray-600 mb-2">Drag & drop your chart image here</p>
58
+ <p class="text-sm text-gray-500">or click to browse files</p>
59
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
60
+ </div>
61
+ <div class="bg-blue-50 p-4 rounded-lg mb-4">
62
+ <h3 class="font-medium text-blue-800 mb-2">Chart Requirements</h3>
63
+ <ul class="text-sm text-blue-700 space-y-1">
64
+ <li><i class="fas fa-check-circle text-blue-500 mr-2"></i>Clear price action visible</li>
65
+ <li><i class="fas fa-check-circle text-blue-500 mr-2"></i>Preferred timeframes: 1H, 4H, Daily</li>
66
+ <li><i class="fas fa-check-circle text-blue-500 mr-2"></i>PNG or JPG format</li>
67
+ </ul>
68
+ </div>
69
+ <button id="analyzeBtn" disabled class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
70
+ <i class="fas fa-wave-square mr-2"></i> Analyze Elliott Waves
71
+ </button>
72
+ </div>
73
+
74
+ <div>
75
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Elliott Wave Basics</h2>
76
+ <div class="bg-gray-50 p-4 rounded-lg">
77
+ <div class="flex items-start mb-3">
78
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
79
+ <i class="fas fa-arrow-up text-blue-600"></i>
80
+ </div>
81
+ <div>
82
+ <h4 class="font-medium">Impulse Waves (5 waves)</h4>
83
+ <p class="text-sm text-gray-600">Directional moves with the trend</p>
84
+ </div>
85
+ </div>
86
+ <div class="flex items-start">
87
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
88
+ <i class="fas fa-undo text-purple-600"></i>
89
+ </div>
90
+ <div>
91
+ <h4 class="font-medium">Corrective Waves (3 waves)</h4>
92
+ <p class="text-sm text-gray-600">Counter-trend moves</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ <div class="mt-4 bg-yellow-50 p-4 rounded-lg">
97
+ <h3 class="font-medium text-yellow-800 mb-2">Analysis Parameters</h3>
98
+ <div class="space-y-3">
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-700 mb-1">Wave Degree</label>
101
+ <select id="waveDegree" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
102
+ <option value="minute">Minute</option>
103
+ <option value="minor">Minor</option>
104
+ <option value="intermediate" selected>Intermediate</option>
105
+ <option value="primary">Primary</option>
106
+ <option value="cycle">Cycle</option>
107
+ </select>
108
+ </div>
109
+ <div>
110
+ <label class="block text-sm font-medium text-gray-700 mb-1">Analysis Aggressiveness</label>
111
+ <select id="analysisMode" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
112
+ <option value="conservative">Conservative (Higher accuracy)</option>
113
+ <option value="moderate" selected>Moderate (Balanced)</option>
114
+ <option value="aggressive">Aggressive (More wave counts)</option>
115
+ </select>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div id="resultsSection" class="hidden max-w-6xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
124
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Analysis Results</h2>
125
+
126
+ <div class="grid md:grid-cols-3 gap-6 mb-6">
127
+ <div class="bg-green-50 p-4 rounded-lg">
128
+ <h3 class="font-medium text-green-800 mb-2">Current Wave</h3>
129
+ <div class="flex items-center">
130
+ <div class="text-2xl font-bold text-green-600 mr-3" id="currentWave">Wave 3</div>
131
+ <div class="text-sm text-green-700" id="waveType">Impulse Wave</div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="bg-blue-50 p-4 rounded-lg">
136
+ <h3 class="font-medium text-blue-800 mb-2">Probability Score</h3>
137
+ <div class="mb-2 text-sm text-blue-700" id="probabilityText">High Confidence (78%)</div>
138
+ <div class="probability-meter">
139
+ <div id="probabilityBar" class="h-full bg-green-500 rounded" style="width: 78%"></div>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="bg-purple-50 p-4 rounded-lg">
144
+ <h3 class="font-medium text-purple-800 mb-2">Next Expected Move</h3>
145
+ <div class="flex items-center">
146
+ <div id="nextMoveDirection" class="text-2xl font-bold text-purple-600 mr-3">↑</div>
147
+ <div class="text-sm text-purple-700" id="nextMoveText">Wave 4 Correction Expected</div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="mb-6">
153
+ <h3 class="font-medium text-gray-800 mb-3">Support & Resistance Levels</h3>
154
+ <div class="grid md:grid-cols-2 gap-4">
155
+ <div class="bg-red-50 p-3 rounded-lg">
156
+ <h4 class="font-medium text-red-700 mb-1">Resistance Levels</h4>
157
+ <ul class="text-sm text-red-600 space-y-1" id="resistanceLevels">
158
+ <li><i class="fas fa-level-up-alt mr-2"></i>1.2350 (Strong)</li>
159
+ <li><i class="fas fa-level-up-alt mr-2"></i>1.2420 (Moderate)</li>
160
+ <li><i class="fas fa-level-up-alt mr-2"></i>1.2500 (Weak)</li>
161
+ </ul>
162
+ </div>
163
+ <div class="bg-green-50 p-3 rounded-lg">
164
+ <h4 class="font-medium text-green-700 mb-1">Support Levels</h4>
165
+ <ul class="text-sm text-green-600 space-y-1" id="supportLevels">
166
+ <li><i class="fas fa-level-down-alt mr-2"></i>1.2200 (Strong)</li>
167
+ <li><i class="fas fa-level-down-alt mr-2"></i>1.2150 (Moderate)</li>
168
+ <li><i class="fas fa-level-down-alt mr-2"></i>1.2100 (Weak)</li>
169
+ </ul>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="canvas-container">
175
+ <div class="flex justify-between items-center mb-3">
176
+ <h3 class="font-medium text-gray-800">Annotated Chart</h3>
177
+ <button id="downloadBtn" class="text-sm bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded">
178
+ <i class="fas fa-download mr-1"></i> Download Analysis
179
+ </button>
180
+ </div>
181
+ <canvas id="analysisCanvas" class="border border-gray-200 rounded-lg"></canvas>
182
+ <div id="waveTooltip" class="wave-tooltip" style="display: none;"></div>
183
+ </div>
184
+
185
+ <div class="mt-6 bg-gray-50 p-4 rounded-lg">
186
+ <h3 class="font-medium text-gray-800 mb-2">Analysis Notes</h3>
187
+ <div class="text-sm text-gray-700 space-y-2" id="analysisNotes">
188
+ <p><i class="fas fa-check-circle text-green-500 mr-2"></i>Wave 3 shows strong momentum with extended characteristics.</p>
189
+ <p><i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>Watch for potential truncation if price fails to exceed 1.2350.</p>
190
+ <p><i class="fas fa-arrow-right text-blue-500 mr-2"></i>Next expected move is Wave 4 correction, typically retracing 38.2% of Wave 3.</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <script>
197
+ document.addEventListener('DOMContentLoaded', function() {
198
+ // DOM elements
199
+ const dropzone = document.getElementById('dropzone');
200
+ const fileInput = document.getElementById('fileInput');
201
+ const analyzeBtn = document.getElementById('analyzeBtn');
202
+ const resultsSection = document.getElementById('resultsSection');
203
+ const canvas = document.getElementById('analysisCanvas');
204
+ const waveTooltip = document.getElementById('waveTooltip');
205
+ const downloadBtn = document.getElementById('downloadBtn');
206
+
207
+ // Fabric.js setup
208
+ const fabricCanvas = new fabric.Canvas('analysisCanvas', {
209
+ backgroundColor: '#ffffff',
210
+ selection: false
211
+ });
212
+
213
+ let uploadedImage = null;
214
+
215
+ // Event listeners
216
+ dropzone.addEventListener('click', () => fileInput.click());
217
+
218
+ fileInput.addEventListener('change', function(e) {
219
+ if (e.target.files.length) {
220
+ handleFileUpload(e.target.files[0]);
221
+ }
222
+ });
223
+
224
+ dropzone.addEventListener('dragover', (e) => {
225
+ e.preventDefault();
226
+ dropzone.classList.add('active');
227
+ });
228
+
229
+ dropzone.addEventListener('dragleave', () => {
230
+ dropzone.classList.remove('active');
231
+ });
232
+
233
+ dropzone.addEventListener('drop', (e) => {
234
+ e.preventDefault();
235
+ dropzone.classList.remove('active');
236
+
237
+ if (e.dataTransfer.files.length) {
238
+ handleFileUpload(e.dataTransfer.files[0]);
239
+ }
240
+ });
241
+
242
+ analyzeBtn.addEventListener('click', analyzeElliottWaves);
243
+ downloadBtn.addEventListener('click', downloadAnalysis);
244
+
245
+ // Canvas mouse events
246
+ fabricCanvas.on('mouse:move', function(options) {
247
+ if (!options.target) {
248
+ waveTooltip.style.display = 'none';
249
+ return;
250
+ }
251
+
252
+ if (options.target.waveData) {
253
+ const pointer = fabricCanvas.getPointer(options.e);
254
+ waveTooltip.style.left = pointer.x + 'px';
255
+ waveTooltip.style.top = pointer.y + 'px';
256
+ waveTooltip.style.display = 'block';
257
+ waveTooltip.innerHTML = `
258
+ <strong>${options.target.waveData.label}</strong><br>
259
+ Type: ${options.target.waveData.type}<br>
260
+ Confidence: ${options.target.waveData.confidence}%
261
+ `;
262
+ } else {
263
+ waveTooltip.style.display = 'none';
264
+ }
265
+ });
266
+
267
+ fabricCanvas.on('mouse:out', function() {
268
+ waveTooltip.style.display = 'none';
269
+ });
270
+
271
+ // Functions
272
+ function handleFileUpload(file) {
273
+ if (!file.type.match('image.*')) {
274
+ alert('Please upload an image file');
275
+ return;
276
+ }
277
+
278
+ const reader = new FileReader();
279
+
280
+ reader.onload = function(e) {
281
+ // Remove previous image if exists
282
+ if (uploadedImage) {
283
+ fabricCanvas.remove(uploadedImage);
284
+ }
285
+
286
+ fabric.Image.fromURL(e.target.result, function(img) {
287
+ // Scale image to fit canvas while maintaining aspect ratio
288
+ const scale = Math.min(
289
+ canvas.width / img.width,
290
+ canvas.height / img.height
291
+ );
292
+
293
+ img.set({
294
+ left: canvas.width / 2,
295
+ top: canvas.height / 2,
296
+ originX: 'center',
297
+ originY: 'center',
298
+ scaleX: scale * 0.95,
299
+ scaleY: scale * 0.95
300
+ });
301
+
302
+ uploadedImage = img;
303
+ fabricCanvas.add(img);
304
+ fabricCanvas.renderAll();
305
+
306
+ // Enable analyze button
307
+ analyzeBtn.disabled = false;
308
+ });
309
+ };
310
+
311
+ reader.readAsDataURL(file);
312
+ }
313
+
314
+ function analyzeElliottWaves() {
315
+ if (!uploadedImage) return;
316
+
317
+ // Show loading state
318
+ analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...';
319
+ analyzeBtn.disabled = true;
320
+
321
+ // Simulate analysis delay
322
+ setTimeout(() => {
323
+ // Generate random analysis results for demo
324
+ const waveDegree = document.getElementById('waveDegree').value;
325
+ const analysisMode = document.getElementById('analysisMode').value;
326
+
327
+ // This is where you would normally call your actual Elliott Wave analysis logic
328
+ // For this demo, we'll simulate results
329
+ simulateElliottWaveAnalysis(waveDegree, analysisMode);
330
+
331
+ // Show results section
332
+ resultsSection.classList.remove('hidden');
333
+
334
+ // Reset button
335
+ analyzeBtn.innerHTML = '<i class="fas fa-wave-square mr-2"></i> Analyze Elliott Waves';
336
+ analyzeBtn.disabled = false;
337
+ }, 2000);
338
+ }
339
+
340
+ function simulateElliottWaveAnalysis(waveDegree, analysisMode) {
341
+ // Clear previous drawings
342
+ fabricCanvas.getObjects().forEach(obj => {
343
+ if (obj !== uploadedImage) {
344
+ fabricCanvas.remove(obj);
345
+ }
346
+ });
347
+
348
+ // Get image dimensions
349
+ const imgWidth = uploadedImage.width * uploadedImage.scaleX;
350
+ const imgHeight = uploadedImage.height * uploadedImage.scaleY;
351
+ const imgLeft = uploadedImage.left - imgWidth / 2;
352
+ const imgTop = uploadedImage.top - imgHeight / 2;
353
+
354
+ // Generate random wave points (simulated analysis)
355
+ const wavePoints = [];
356
+ const segmentCount = 8; // Number of wave segments to draw
357
+
358
+ for (let i = 0; i < segmentCount; i++) {
359
+ const x = imgLeft + (imgWidth / (segmentCount - 1)) * i;
360
+ const baseY = imgTop + imgHeight / 2;
361
+ const amplitude = imgHeight / (4 + Math.random() * 4);
362
+ const y = baseY + amplitude * Math.sin(i * Math.PI / 2);
363
+
364
+ wavePoints.push({ x, y });
365
+ }
366
+
367
+ // Draw wave segments with labels
368
+ for (let i = 0; i < wavePoints.length - 1; i++) {
369
+ const start = wavePoints[i];
370
+ const end = wavePoints[i + 1];
371
+
372
+ // Determine wave type (impulse or corrective)
373
+ const isImpulse = i % 2 === 0;
374
+ const waveType = isImpulse ? 'Impulse' : 'Corrective';
375
+ const waveLabel = isImpulse ? `Wave ${Math.floor(i/2) + 1}` : `Wave ${Math.floor(i/2) + 1} Correction`;
376
+
377
+ // Random confidence based on analysis mode
378
+ let confidence;
379
+ if (analysisMode === 'conservative') {
380
+ confidence = 70 + Math.floor(Math.random() * 25);
381
+ } else if (analysisMode === 'moderate') {
382
+ confidence = 60 + Math.floor(Math.random() * 35);
383
+ } else {
384
+ confidence = 50 + Math.floor(Math.random() * 45);
385
+ }
386
+
387
+ // Draw wave line
388
+ const line = new fabric.Line([start.x, start.y, end.x, end.y], {
389
+ stroke: isImpulse ? '#3b82f6' : '#8b5cf6',
390
+ strokeWidth: 3,
391
+ selectable: false,
392
+ waveData: {
393
+ label: waveLabel,
394
+ type: waveType,
395
+ confidence: confidence
396
+ }
397
+ });
398
+
399
+ // Add arrowhead
400
+ const angle = Math.atan2(end.y - start.y, end.x - start.x);
401
+ const arrowSize = 12;
402
+
403
+ const arrow = new fabric.Triangle({
404
+ left: end.x,
405
+ top: end.y,
406
+ width: arrowSize,
407
+ height: arrowSize,
408
+ fill: isImpulse ? '#3b82f6' : '#8b5cf6',
409
+ angle: angle * 180 / Math.PI,
410
+ originX: 'center',
411
+ originY: 'center',
412
+ selectable: false
413
+ });
414
+
415
+ // Add wave label
416
+ const midX = (start.x + end.x) / 2;
417
+ const midY = (start.y + end.y) / 2;
418
+
419
+ const label = new fabric.Text(waveLabel, {
420
+ left: midX,
421
+ top: midY - 20,
422
+ fontSize: 12,
423
+ fill: isImpulse ? '#3b82f6' : '#8b5cf6',
424
+ fontWeight: 'bold',
425
+ originX: 'center',
426
+ selectable: false
427
+ });
428
+
429
+ // Add confidence indicator
430
+ const confidenceText = new fabric.Text(`${confidence}%`, {
431
+ left: midX,
432
+ top: midY + 5,
433
+ fontSize: 10,
434
+ fill: '#6b7280',
435
+ originX: 'center',
436
+ selectable: false
437
+ });
438
+
439
+ fabricCanvas.add(line, arrow, label, confidenceText);
440
+ }
441
+
442
+ // Draw support/resistance levels
443
+ const supportLevels = [
444
+ { price: '1.2200', strength: 'Strong' },
445
+ { price: '1.2150', strength: 'Moderate' },
446
+ { price: '1.2100', strength: 'Weak' }
447
+ ];
448
+
449
+ const resistanceLevels = [
450
+ { price: '1.2350', strength: 'Strong' },
451
+ { price: '1.2420', strength: 'Moderate' },
452
+ { price: '1.2500', strength: 'Weak' }
453
+ ];
454
+
455
+ // Draw support levels (left side)
456
+ supportLevels.forEach((level, i) => {
457
+ const y = imgTop + imgHeight * (0.3 + i * 0.2);
458
+
459
+ const line = new fabric.Line([imgLeft, y, imgLeft + imgWidth * 0.8, y], {
460
+ stroke: '#10b981',
461
+ strokeWidth: 1,
462
+ strokeDashArray: [5, 3],
463
+ selectable: false
464
+ });
465
+
466
+ const label = new fabric.Text(`S: ${level.price}`, {
467
+ left: imgLeft + 5,
468
+ top: y - 10,
469
+ fontSize: 10,
470
+ fill: '#10b981',
471
+ selectable: false
472
+ });
473
+
474
+ fabricCanvas.add(line, label);
475
+ });
476
+
477
+ // Draw resistance levels (right side)
478
+ resistanceLevels.forEach((level, i) => {
479
+ const y = imgTop + imgHeight * (0.2 + i * 0.25);
480
+
481
+ const line = new fabric.Line([imgLeft + imgWidth * 0.2, y, imgLeft + imgWidth, y], {
482
+ stroke: '#ef4444',
483
+ strokeWidth: 1,
484
+ strokeDashArray: [5, 3],
485
+ selectable: false
486
+ });
487
+
488
+ const label = new fabric.Text(`R: ${level.price}`, {
489
+ left: imgLeft + imgWidth - 35,
490
+ top: y - 10,
491
+ fontSize: 10,
492
+ fill: '#ef4444',
493
+ selectable: false
494
+ });
495
+
496
+ fabricCanvas.add(line, label);
497
+ });
498
+
499
+ // Update UI with analysis results
500
+ document.getElementById('currentWave').textContent = 'Wave 3';
501
+ document.getElementById('waveType').textContent = 'Impulse Wave';
502
+
503
+ const probability = 78;
504
+ document.getElementById('probabilityText').textContent = `High Confidence (${probability}%)`;
505
+ document.getElementById('probabilityBar').style.width = `${probability}%`;
506
+
507
+ document.getElementById('nextMoveDirection').textContent = '↓';
508
+ document.getElementById('nextMoveText').textContent = 'Wave 4 Correction Expected';
509
+
510
+ // Update support/resistance lists
511
+ const supportList = document.getElementById('supportLevels');
512
+ const resistanceList = document.getElementById('resistanceLevels');
513
+
514
+ supportList.innerHTML = supportLevels.map(level =>
515
+ `<li><i class="fas fa-level-down-alt mr-2"></i>${level.price} (${level.strength})</li>`
516
+ ).join('');
517
+
518
+ resistanceList.innerHTML = resistanceLevels.map(level =>
519
+ `<li><i class="fas fa-level-up-alt mr-2"></i>${level.price} (${level.strength})</li>`
520
+ ).join('');
521
+
522
+ // Update wave degree in notes
523
+ const degreeMap = {
524
+ 'minute': 'Minute',
525
+ 'minor': 'Minor',
526
+ 'intermediate': 'Intermediate',
527
+ 'primary': 'Primary',
528
+ 'cycle': 'Cycle'
529
+ };
530
+
531
+ document.getElementById('analysisNotes').innerHTML = `
532
+ <p><i class="fas fa-check-circle text-green-500 mr-2"></i>Wave 3 shows strong momentum with extended characteristics.</p>
533
+ <p><i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>Watch for potential truncation if price fails to exceed 1.2350.</p>
534
+ <p><i class="fas fa-arrow-right text-blue-500 mr-2"></i>Next expected move is Wave 4 correction, typically retracing 38.2% of Wave 3.</p>
535
+ <p><i class="fas fa-info-circle text-gray-500 mr-2"></i>Analysis performed on ${degreeMap[waveDegree]} degree chart.</p>
536
+ `;
537
+ }
538
+
539
+ function downloadAnalysis() {
540
+ // Create temporary link to download canvas as image
541
+ const link = document.createElement('a');
542
+ link.download = 'elliott-wave-analysis.png';
543
+ link.href = fabricCanvas.toDataURL({
544
+ format: 'png',
545
+ quality: 1
546
+ });
547
+ link.click();
548
+ }
549
+
550
+ // Initialize canvas size
551
+ function resizeCanvas() {
552
+ const container = document.querySelector('.canvas-container');
553
+ canvas.width = container.clientWidth - 40;
554
+ canvas.height = Math.min(600, window.innerHeight * 0.6);
555
+ fabricCanvas.setDimensions({ width: canvas.width, height: canvas.height });
556
+
557
+ if (uploadedImage) {
558
+ // Re-center and scale image
559
+ const scale = Math.min(
560
+ canvas.width / (uploadedImage.width * uploadedImage.scaleX / uploadedImage.scaleX),
561
+ canvas.height / (uploadedImage.height * uploadedImage.scaleY / uploadedImage.scaleY)
562
+ );
563
+
564
+ uploadedImage.set({
565
+ left: canvas.width / 2,
566
+ top: canvas.height / 2,
567
+ scaleX: scale * 0.95,
568
+ scaleY: scale * 0.95
569
+ });
570
+
571
+ fabricCanvas.renderAll();
572
+ }
573
+ }
574
+
575
+ window.addEventListener('resize', resizeCanvas);
576
+ resizeCanvas();
577
+ });
578
+ </script>
579
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Albian2025/elliott-wave-analisis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
580
+ </html>