Spaces:

olywwe
/

https-huggingface-co-spaces-olywwe-rede2

Running

https-huggingface-co-spaces-olywwe-rede2 / index.html

acionar campo de de geração do script avançado e proficssional do trading view e automaatico , crie pela rede neural, crie a evolução da rede neural da curva financeira - Follow Up Deployment

227c653 verified 7 months ago

raw

history blame contribute delete

20.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>NeuralNet HFT Trading Strategy</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

	* {
	font-family: 'JetBrains Mono', monospace;
	}

	.gradient-bg {
	background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
	}

	.card-glass {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
	}

	.neon-text {
	text-shadow: 0 0 5px #00b3ff, 0 0 10px #00b3ff, 0 0 15px #00b3ff;
	}

	.pulse {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 179, 255, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(0, 179, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 179, 255, 0); }
	}

	.progress-gradient {
	background: linear-gradient(90deg, #00b3ff 0%, #0062ff 100%);
	}

	.blink {
	animation: blink 1s step-start infinite;
	}

	@keyframes blink {
	50% { opacity: 0.3; }
	}
	</style>
	</head>
	<body class="gradient-bg min-h-screen text-gray-200">
	<!-- Header -->
	<header class="container mx-auto py-6 px-4">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="flex items-center mb-4 md:mb-0">
	<div class="w-12 h-12 rounded-full bg-blue-500 mr-3 pulse"></div>
	<h1 class="text-2xl font-bold neon-text">NeuralNet HFT</h1>
	</div>

	<div class="flex space-x-4">
	<div class="card-glass px-4 py-2 flex items-center">
	<span class="text-green-400 mr-2"><i class="fas fa-circle"></i></span>
	<span>Live</span>
	</div>
	<div class="card-glass px-4 py-2">
	XRP/USDT \| Bybit
	</div>
	<div class="card-glass px-4 py-2">
	1min TF
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="container mx-auto px-4 pb-10">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Left Column - Charts -->
	<div class="lg:col-span-2 space-y-6">
	<!-- Price Chart -->
	<div class="card-glass p-4">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-xl font-semibold">XRP/USDT Price Action</h2>
	<div class="text-green-400 flex items-center">
	<span class="mr-2">+2.34%</span>
	<span>0.5421</span>
	</div>
	</div>
	<div class="h-80">
	<canvas id="priceChart"></canvas>
	</div>
	</div>

	<!-- TradingView Script Generator -->
	<div class="card-glass p-4 mb-6">
	<h2 class="text-xl font-semibold mb-4">NeuralNet Script Generator</h2>
	<div class="mb-4">
	<label class="block text-sm font-medium mb-2">Strategy Complexity</label>
	<select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm">
	<option>Basic Mean Reversion</option>
	<option>Advanced Momentum</option>
	<option selected>NeuralNet HFT</option>
	<option>Quantum Pattern</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium mb-2">Custom Parameters</label>
	<textarea class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-32" placeholder="// Custom neural network parameters..."></textarea>
	</div>
	<button class="w-full bg-blue-600 hover:bg-blue-500 py-2 rounded-md">Generate TradingView Script</button>
	</div>

	<!-- Performance Metrics -->
	<div class="card-glass p-4">
	<h2 class="text-xl font-semibold mb-4">Performance Metrics</h2>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
	<div class="bg-gray-800 rounded-lg p-3 text-center">
	<div class="text-sm text-gray-400">Win Rate</div>
	<div class="text-xl font-bold text-green-400">72.8%</div>
	</div>
	<div class="bg-gray-800 rounded-lg p-3 text-center">
	<div class="text-sm text-gray-400">Profit Factor</div>
	<div class="text-xl font-bold text-blue-400">2.41</div>
	</div>
	<div class="bg-gray-800 rounded-lg p-3 text-center">
	<div class="text-sm text-gray-400">Sharpe Ratio</div>
	<div class="text-xl font-bold text-purple-400">3.26</div>
	</div>
	<div class="bg-gray-800 rounded-lg p-3 text-center">
	<div class="text-sm text-gray-400">Max Drawdown</div>
	<div class="text-xl font-bold text-red-400">-8.2%</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Right Column - Controls & Info -->
	<div class="space-y-6">
	<!-- Strategy Controls -->
	<div class="card-glass p-4">
	<h2 class="text-xl font-semibold mb-4">Strategy Controls</h2>

	<div class="mb-4">
	<label class="block text-sm font-medium mb-2">Neural Network Confidence</label>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="progress-gradient h-2.5 rounded-full" style="width: 87%"></div>
	</div>
	<div class="flex justify-between text-xs mt-1">
	<span>Low</span>
	<span>87%</span>
	<span>High</span>
	</div>
	</div>

	<div class="mb-4">
	<label class="block text-sm font-medium mb-2">Trade Frequency</label>
	<div class="flex space-x-2">
	<button class="bg-blue-600 text-white px-3 py-1 rounded-md text-sm">Low</button>
	<button class="bg-blue-800 px-3 py-1 rounded-md text-sm">Medium</button>
	<button class="bg-gray-800 px-3 py-1 rounded-md text-sm">High</button>
	</div>
	</div>

	<div class="mb-4">
	<label class="block text-sm font-medium mb-2">Risk Management</label>
	<div class="flex items-center">
	<span class="text-xs mr-2">1.5%</span>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="progress-gradient h-2.5 rounded-full" style="width: 30%"></div>
	</div>
	<span class="text-xs ml-2">5%</span>
	</div>
	</div>

	<div class="grid grid-cols-2 gap-2 mt-6">
	<button id="startStrategy" class="bg-green-700 hover:bg-green-600 py-2 rounded-md">Start Strategy</button>
	<button id="emergencyStop" class="bg-red-700 hover:bg-red-600 py-2 rounded-md">Emergency Stop</button>
	</div>
	</div>

	<!-- Recent Signals -->
	<div class="card-glass p-4">
	<h2 class="text-xl font-semibold mb-4">Recent Signals</h2>

	<div class="space-y-3">
	<div class="flex justify-between items-center p-2 bg-gray-800 rounded">
	<div>
	<div class="font-medium">BUY</div>
	<div class="text-xs text-gray-400">12:45:23</div>
	</div>
	<div class="text-green-400">0.5412</div>
	</div>

	<div class="flex justify-between items-center p-2 bg-gray-800 rounded">
	<div>
	<div class="font-medium">SELL</div>
	<div class="text-xs text-gray-400">12:32:10</div>
	</div>
	<div class="text-red-400">0.5401</div>
	</div>

	<div class="flex justify-between items-center p-2 bg-gray-800 rounded">
	<div>
	<div class="font-medium">BUY</div>
	<div class="text-xs text-gray-400">12:18:57</div>
	</div>
	<div class="text-green-400">0.5398</div>
	</div>
	</div>
	</div>

	<!-- Model Status -->
	<div class="card-glass p-4">
	<h2 class="text-xl font-semibold mb-4">Model Status</h2>

	<div class="mb-3">
	<div class="flex justify-between text-sm mb-1">
	<span>Training Progress</span>
	<span>94%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="progress-gradient h-2.5 rounded-full" style="width: 94%"></div>
	</div>
	</div>

	<div class="mb-3">
	<div class="flex justify-between text-sm mb-1">
	<span>Data Quality</span>
	<span>98%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2.5">
	<div class="progress-gradient h-2.5 rounded-full" style="width: 98%"></div>
	</div>
	</div>

	<div class="flex items-center mt-4">
	<span class="h-3 w-3 rounded-full bg-green-500 mr-2 blink"></span>
	<span class="text-sm">Live prediction active</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Logs Section -->
	<div class="card-glass p-4 mt-6">
	<h2 class="text-xl font-semibold mb-4">Trading Logs</h2>
	<div class="bg-black bg-opacity-50 rounded p-3 h-40 overflow-y-auto">
	<div class="text-sm font-mono">
	<div class="text-green-400">[12:45:23] BUY signal generated at 0.5412 \| Confidence: 92%</div>
	<div class="text-gray-400">[12:44:18] Model retraining completed \| Accuracy improved by 0.42%</div>
	<div class="text-red-400">[12:32:10] SELL signal generated at 0.5401 \| Profit: +0.21%</div>
	<div class="text-gray-400">[12:30:55] New market data processed \| 1247 ticks</div>
	<div class="text-green-400">[12:18:57] BUY signal generated at 0.5398 \| Confidence: 87%</div>
	<div class="text-gray-400">[12:15:30] Neural network optimization cycle completed</div>
	</div>
	</div>
	</div>
	</main>

	<script>
	// Initialize price chart
	document.addEventListener('DOMContentLoaded', function() {
	const ctx = document.getElementById('priceChart').getContext('2d');

	// Generate mock price data
	const data = [];
	let value = 0.5380;
	for (let i = 0; i < 100; i++) {
	value += (Math.random() - 0.5) * 0.002;
	data.push(value);
	}

	const chart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: Array.from({length: 100}, (_, i) => i + 1),
	datasets: [{
	label: 'XRP/USDT',
	data: data,
	borderColor: '#00b3ff',
	backgroundColor: 'rgba(0, 179, 255, 0.1)',
	borderWidth: 2,
	pointRadius: 0,
	fill: true,
	tension: 0.1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	display: false
	},
	tooltip: {
	mode: 'index',
	intersect: false,
	}
	},
	scales: {
	x: {
	grid: {
	color: 'rgba(255, 255, 255, 0.05)'
	},
	ticks: {
	color: 'rgba(255, 255, 255, 0.7)'
	}
	},
	y: {
	grid: {
	color: 'rgba(255, 255, 255, 0.05)'
	},
	ticks: {
	color: 'rgba(255, 255, 255, 0.7)'
	}
	}
	}
	}
	});

	// Button event handlers
	document.getElementById('startStrategy').addEventListener('click', function() {
	alert('Strategy started successfully!');
	// Here you would add your actual strategy start logic
	});

	document.getElementById('emergencyStop').addEventListener('click', function() {
	if (confirm('Are you sure you want to emergency stop the strategy?')) {
	alert('Strategy stopped! All positions closed.');
	// Here you would add your actual emergency stop logic
	}
	});

	// Initialize neural network evolution chart
	const nnCtx = document.getElementById('nnChart').getContext('2d');

	// Generate mock neural network training data
	const nnData = [];
	let accuracy = 80;
	for (let i = 0; i < 50; i++) {
	accuracy += Math.random() * 0.5;
	if (accuracy > 98) accuracy = 98;
	nnData.push(accuracy);
	}

	const nnChart = new Chart(nnCtx, {
	type: 'line',
	data: {
	labels: Array.from({length: 50}, (_, i) => i + 1),
	datasets: [
	{
	label: 'Accuracy',
	data: nnData,
	borderColor: '#00b3ff',
	borderWidth: 2,
	pointRadius: 0,
	tension: 0.3,
	yAxisID: 'y'
	},
	{
	label: 'Loss',
	data: nnData.map(v => 100-v),
	borderColor: '#ff4d4d',
	borderWidth: 1,
	pointRadius: 0,
	tension: 0.3,
	yAxisID: 'y1'
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	interaction: {
	mode: 'index',
	intersect: false,
	},
	plugins: {
	legend: {
	position: 'top',
	labels: {
	color: 'rgba(255, 255, 255, 0.7)'
	}
	},
	tooltip: {
	mode: 'index',
	intersect: false,
	}
	},
	scales: {
	x: {
	grid: {
	color: 'rgba(255, 255, 255, 0.05)'
	},
	ticks: {
	color: 'rgba(255, 255, 255, 0.7)'
	}
	},
	y: {
	type: 'linear',
	display: true,
	position: 'left',
	min: 70,
	max: 100,
	grid: {
	color: 'rgba(255, 255, 255, 0.05)'
	},
	ticks: {
	color: 'rgba(255, 255, 255, 0.7)'
	}
	},
	y1: {
	type: 'linear',
	display: true,
	position: 'right',
	min: 0,
	max: 30,
	grid: {
	drawOnChartArea: false,
	},
	ticks: {
	color: 'rgba(255, 255, 255, 0.7)'
	}
	}
	}
	}
	});

	// Simulate live data updates
	setInterval(() => {
	const newValue = data[data.length - 1] + (Math.random() - 0.5) * 0.001;
	data.push(newValue);
	data.shift();
	chart.update();

	// Update neural network chart
	const newAccuracy = nnData[nnData.length - 1] + (Math.random() - 0.45) * 0.2;
	if (newAccuracy > 98.5) nnData.push(98.5);
	else if (newAccuracy < 97.5) nnData.push(97.5);
	else nnData.push(newAccuracy);
	nnData.shift();
	nnChart.data.datasets[1].data = nnData.map(v => 100-v);
	nnChart.update();
	}, 2000);
	});
	</script>
	<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=olywwe/https-huggingface-co-spaces-olywwe-rede2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>