Spaces:

crazychon
/

me-ia

Running

me-ia / index.html

import requests import json # 1. Obtener datos de Notion API notion_data = get_notion_data() # [implementar con API de Notion] # 2. Preparar prompt para DeepSeek prompt = f""" Eres mi ME IA de bienestar. Analiza: {json.dumps(notion_data)} Devuelve solo JSON: {{ "patron": str, "accion": str, "pronostico": str }} """ # 3. Consultar API DeepSeek-R1 (gratis) url = "https://api.deepseek.com/v1/chat/completions" headers = {"Authorization": "Bearer TU_API_KEY"} data = { "model": "deepseek-r1", "messages": [{"role": "user", "content": prompt}] } response = requests.post(url, json=data, headers=headers) alerta_ia = response.json()["choices"][0]["message"]["content"] # 4. Actualizar Notion con la alerta update_notion(alerta_ia) # ← ¡Tu ME IA ya funciona! - Follow Up Deployment

55595a6 verified about 2 months ago

raw

history blame contribute delete

28 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Wellness AI Dashboard</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gradient-bg {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.pulse-animation {
	animation: pulse 2s infinite;
	}
	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
	}
	.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.smooth-transition {
	transition: all 0.3s ease;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<div class="min-h-screen flex flex-col">
	<!-- Header -->
	<header class="gradient-bg text-white shadow-lg">
	<div class="container mx-auto px-4 py-6">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="flex items-center mb-4 md:mb-0">
	<i class="fas fa-brain text-3xl mr-3"></i>
	<h1 class="text-2xl font-bold">Wellness AI Dashboard</h1>
	</div>
	<div class="flex items-center space-x-4">
	<button id="connectNotionBtn" class="bg-white text-indigo-700 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 smooth-transition">
	<i class="fas fa-plug mr-2"></i>Connect Notion
	</button>
	<div class="relative">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer border-2 border-white">
	<span class="absolute top-0 right-0 h-3 w-3 bg-green-400 rounded-full border-2 border-white"></span>
	</div>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="flex-grow container mx-auto px-4 py-8">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
	<!-- Left Column -->
	<div class="lg:col-span-2 space-y-6">
	<!-- Notion Data Card -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
	<div class="p-6">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-xl font-semibold text-gray-800">
	<i class="fas fa-database text-indigo-500 mr-2"></i>Notion Wellness Data
	</h2>
	<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Live</span>
	</div>
	<div id="notionData" class="bg-gray-50 p-4 rounded-lg mb-4">
	<div class="text-center py-8 text-gray-400">
	<i class="fas fa-cloud-download-alt text-3xl mb-2"></i>
	<p>Connect to Notion to load your wellness data</p>
	</div>
	</div>
	<div class="flex justify-between items-center">
	<div class="text-sm text-gray-500">
	Last synced: <span id="lastSynced">Never</span>
	</div>
	<button id="refreshDataBtn" class="text-indigo-600 hover:text-indigo-800 smooth-transition">
	<i class="fas fa-sync-alt mr-1"></i>Refresh
	</button>
	</div>
	</div>
	</div>

	<!-- AI Analysis Card -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
	<div class="p-6">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-xl font-semibold text-gray-800">
	<i class="fas fa-robot text-purple-500 mr-2"></i>AI Wellness Analysis
	</h2>
	<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">DeepSeek-R1</span>
	</div>
	<div id="aiAnalysis" class="space-y-4">
	<div class="text-center py-8 text-gray-400">
	<i class="fas fa-magic text-3xl mb-2"></i>
	<p>Analyze your data to get personalized insights</p>
	</div>
	</div>
	<div class="mt-6">
	<button id="analyzeBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg smooth-transition pulse-animation">
	<i class="fas fa-bolt mr-2"></i>Run Analysis
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Right Column -->
	<div class="space-y-6">
	<!-- Wellness Summary -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
	<div class="p-6">
	<h2 class="text-xl font-semibold text-gray-800 mb-4">
	<i class="fas fa-heartbeat text-red-500 mr-2"></i>Wellness Summary
	</h2>
	<div class="space-y-4">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
	<i class="fas fa-bed text-red-500"></i>
	</div>
	<div>
	<p class="text-sm text-gray-500">Sleep Quality</p>
	<p class="font-medium" id="sleepQuality">--</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
	<i class="fas fa-walking text-blue-500"></i>
	</div>
	<div>
	<p class="text-sm text-gray-500">Activity Level</p>
	<p class="font-medium" id="activityLevel">--</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
	<i class="fas fa-utensils text-green-500"></i>
	</div>
	<div>
	<p class="text-sm text-gray-500">Nutrition</p>
	<p class="font-medium" id="nutrition">--</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
	<i class="fas fa-brain text-yellow-500"></i>
	</div>
	<div>
	<p class="text-sm text-gray-500">Mental Health</p>
	<p class="font-medium" id="mentalHealth">--</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Action Items -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
	<div class="p-6">
	<h2 class="text-xl font-semibold text-gray-800 mb-4">
	<i class="fas fa-tasks text-emerald-500 mr-2"></i>Recommended Actions
	</h2>
	<div id="actionItems" class="space-y-3">
	<div class="text-center py-8 text-gray-400">
	<i class="fas fa-lightbulb text-3xl mb-2"></i>
	<p>Get personalized recommendations after analysis</p>
	</div>
	</div>
	<div class="mt-4">
	<button id="updateNotionBtn" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-3 px-4 rounded-lg smooth-transition">
	<i class="fas fa-save mr-2"></i>Update Notion
	</button>
	</div>
	</div>
	</div>

	<!-- Status -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden smooth-transition card-hover">
	<div class="p-6">
	<h2 class="text-xl font-semibold text-gray-800 mb-4">
	<i class="fas fa-info-circle text-blue-500 mr-2"></i>System Status
	</h2>
	<div class="space-y-3">
	<div class="flex justify-between items-center">
	<span class="text-gray-600">Notion Connection</span>
	<span id="notionStatus" class="px-2 py-1 text-xs rounded-full bg-gray-200 text-gray-800">Disconnected</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-gray-600">API Credits</span>
	<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">100 remaining</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-gray-600">Last Analysis</span>
	<span id="lastAnalysis" class="px-2 py-1 text-xs rounded-full bg-gray-200 text-gray-800">Never</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-gray-800 text-white py-6">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="mb-4 md:mb-0">
	<p class="text-sm">© 2023 Wellness AI Dashboard. All rights reserved.</p>
	</div>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-300 hover:text-white smooth-transition">
	<i class="fab fa-github"></i>
	</a>
	<a href="#" class="text-gray-300 hover:text-white smooth-transition">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="text-gray-300 hover:text-white smooth-transition">
	<i class="fab fa-discord"></i>
	</a>
	</div>
	</div>
	</div>
	</footer>
	</div>

	<!-- Notion Connection Modal -->
	<div id="notionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
	<div class="bg-white rounded-xl p-6 w-full max-w-md">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-xl font-semibold">Connect to Notion</h3>
	<button id="closeModalBtn" class="text-gray-400 hover:text-gray-600">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="mb-6">
	<p class="text-gray-600 mb-4">To connect your Notion workspace, please enter your API key:</p>
	<input type="password" id="notionApiKey" placeholder="Enter your Notion API key" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	<p class="text-xs text-gray-500 mt-2">We don't store your API key on our servers.</p>
	</div>
	<div class="flex justify-end space-x-3">
	<button id="cancelConnectBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 smooth-transition">Cancel</button>
	<button id="confirmConnectBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 smooth-transition">Connect</button>
	</div>
	</div>
	</div>

	<script>
	// DOM Elements
	const connectNotionBtn = document.getElementById('connectNotionBtn');
	const refreshDataBtn = document.getElementById('refreshDataBtn');
	const analyzeBtn = document.getElementById('analyzeBtn');
	const updateNotionBtn = document.getElementById('updateNotionBtn');
	const notionModal = document.getElementById('notionModal');
	const closeModalBtn = document.getElementById('closeModalBtn');
	const cancelConnectBtn = document.getElementById('cancelConnectBtn');
	const confirmConnectBtn = document.getElementById('confirmConnectBtn');
	const notionApiKey = document.getElementById('notionApiKey');
	const notionStatus = document.getElementById('notionStatus');
	const lastSynced = document.getElementById('lastSynced');
	const lastAnalysis = document.getElementById('lastAnalysis');
	const notionData = document.getElementById('notionData');
	const aiAnalysis = document.getElementById('aiAnalysis');
	const actionItems = document.getElementById('actionItems');

	// Mock data for demonstration
	const mockNotionData = {
	sleep: {
	average_hours: 6.5,
	quality: "Fair",
	consistency: "Needs improvement"
	},
	activity: {
	steps: 7500,
	workouts: 3,
	intensity: "Moderate"
	},
	nutrition: {
	hydration: "Good",
	balanced_meals: 70,
	processed_foods: "Occasional"
	},
	mental_health: {
	stress_level: "Medium",
	mindfulness_minutes: 10,
	mood: "Neutral"
	}
	};

	const mockAnalysis = {
	patron: "Irregular sleep patterns affecting energy levels",
	accion: "Establish consistent bedtime routine, limit screen time before bed",
	pronostico: "Expected 20% improvement in daily energy with better sleep habits"
	};

	// Event Listeners
	connectNotionBtn.addEventListener('click', () => {
	notionModal.classList.remove('hidden');
	});

	closeModalBtn.addEventListener('click', () => {
	notionModal.classList.add('hidden');
	});

	cancelConnectBtn.addEventListener('click', () => {
	notionModal.classList.add('hidden');
	});

	confirmConnectBtn.addEventListener('click', () => {
	if (notionApiKey.value.trim() !== '') {
	// In a real app, you would validate the API key here
	notionStatus.textContent = "Connected";
	notionStatus.classList.remove('bg-gray-200', 'text-gray-800');
	notionStatus.classList.add('bg-green-100', 'text-green-800');
	connectNotionBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Connected';
	connectNotionBtn.classList.remove('bg-white', 'text-indigo-700');
	connectNotionBtn.classList.add('bg-green-100', 'text-green-700');
	notionModal.classList.add('hidden');

	// Update last synced time
	const now = new Date();
	lastSynced.textContent = now.toLocaleString();

	// Load mock data for demonstration
	loadNotionData();
	} else {
	alert('Please enter a valid Notion API key');
	}
	});

	refreshDataBtn.addEventListener('click', () => {
	if (notionStatus.textContent === "Connected") {
	// Show loading state
	notionData.innerHTML = `
	<div class="text-center py-8">
	<i class="fas fa-circle-notch fa-spin text-3xl text-indigo-500 mb-2"></i>
	<p>Refreshing data from Notion...</p>
	</div>
	`;

	// Simulate API call delay
	setTimeout(() => {
	loadNotionData();
	const now = new Date();
	lastSynced.textContent = now.toLocaleString();
	}, 1500);
	} else {
	alert('Please connect to Notion first');
	}
	});

	analyzeBtn.addEventListener('click', () => {
	if (notionStatus.textContent === "Connected") {
	// Show loading state
	aiAnalysis.innerHTML = `
	<div class="text-center py-8">
	<i class="fas fa-circle-notch fa-spin text-3xl text-purple-500 mb-2"></i>
	<p>Analyzing your wellness data with AI...</p>
	</div>
	`;

	// Simulate API call delay
	setTimeout(() => {
	displayAnalysis();
	const now = new Date();
	lastAnalysis.textContent = now.toLocaleString();
	}, 2000);
	} else {
	alert('Please connect to Notion and load data first');
	}
	});

	updateNotionBtn.addEventListener('click', () => {
	if (aiAnalysis.querySelector('.text-center') === null) {
	// Show loading state
	const originalText = updateNotionBtn.innerHTML;
	updateNotionBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i>Updating...';
	updateNotionBtn.disabled = true;

	// Simulate API call delay
	setTimeout(() => {
	updateNotionBtn.innerHTML = originalText;
	updateNotionBtn.disabled = false;

	// Show success notification
	const notification = document.createElement('div');
	notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
	notification.innerHTML = `
	<i class="fas fa-check-circle mr-2"></i>
	<span>Successfully updated Notion!</span>
	`;
	document.body.appendChild(notification);

	// Remove notification after 3 seconds
	setTimeout(() => {
	notification.classList.add('opacity-0', 'translate-y-2');
	setTimeout(() => {
	document.body.removeChild(notification);
	}, 300);
	}, 3000);
	}, 1500);
	} else {
	alert('Please analyze your data first');
	}
	});

	// Functions
	function loadNotionData() {
	notionData.innerHTML = `
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div class="bg-white p-4 rounded-lg border border-gray-200">
	<h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-bed text-indigo-500 mr-1"></i> Sleep</h3>
	<p><span class="text-gray-500">Hours:</span> ${mockNotionData.sleep.average_hours}h</p>
	<p><span class="text-gray-500">Quality:</span> ${mockNotionData.sleep.quality}</p>
	<p><span class="text-gray-500">Consistency:</span> ${mockNotionData.sleep.consistency}</p>
	</div>
	<div class="bg-white p-4 rounded-lg border border-gray-200">
	<h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-walking text-blue-500 mr-1"></i> Activity</h3>
	<p><span class="text-gray-500">Steps:</span> ${mockNotionData.activity.steps.toLocaleString()}</p>
	<p><span class="text-gray-500">Workouts:</span> ${mockNotionData.activity.workouts}/week</p>
	<p><span class="text-gray-500">Intensity:</span> ${mockNotionData.activity.intensity}</p>
	</div>
	<div class="bg-white p-4 rounded-lg border border-gray-200">
	<h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-utensils text-green-500 mr-1"></i> Nutrition</h3>
	<p><span class="text-gray-500">Hydration:</span> ${mockNotionData.nutrition.hydration}</p>
	<p><span class="text-gray-500">Balanced meals:</span> ${mockNotionData.nutrition.balanced_meals}%</p>
	<p><span class="text-gray-500">Processed foods:</span> ${mockNotionData.nutrition.processed_foods}</p>
	</div>
	<div class="bg-white p-4 rounded-lg border border-gray-200">
	<h3 class="font-medium text-gray-700 mb-2"><i class="fas fa-brain text-yellow-500 mr-1"></i> Mental Health</h3>
	<p><span class="text-gray-500">Stress:</span> ${mockNotionData.mental_health.stress_level}</p>
	<p><span class="text-gray-500">Mindfulness:</span> ${mockNotionData.mental_health.mindfulness_minutes} min/day</p>
	<p><span class="text-gray-500">Mood:</span> ${mockNotionData.mental_health.mood}</p>
	</div>
	</div>
	`;

	// Update summary cards
	document.getElementById('sleepQuality').textContent = mockNotionData.sleep.quality;
	document.getElementById('activityLevel').textContent = mockNotionData.activity.intensity;
	document.getElementById('nutrition').textContent = mockNotionData.nutrition.hydration;
	document.getElementById('mentalHealth').textContent = mockNotionData.mental_health.stress_level;
	}

	function displayAnalysis() {
	aiAnalysis.innerHTML = `
	<div class="bg-purple-50 border-l-4 border-purple-500 p-4">
	<h3 class="font-medium text-purple-800 mb-1">Identified Pattern</h3>
	<p class="text-gray-700">${mockAnalysis.patron}</p>
	</div>
	<div class="bg-blue-50 border-l-4 border-blue-500 p-4">
	<h3 class="font-medium text-blue-800 mb-1">Recommended Action</h3>
	<p class="text-gray-700">${mockAnalysis.accion}</p>
	</div>
	<div class="bg-green-50 border-l-4 border-green-500 p-4">
	<h3 class="font-medium text-green-800 mb-1">Expected Outcome</h3>
	<p class="text-gray-700">${mockAnalysis.pronostico}</p>
	</div>
	`;

	actionItems.innerHTML = `
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
	<i class="fas fa-check text-emerald-500 text-xs"></i>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-700">Set consistent bedtime (10:30pm-6:30am)</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
	<i class="fas fa-check text-emerald-500 text-xs"></i>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-700">Add 10-minute evening meditation</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
	<i class="fas fa-check text-emerald-500 text-xs"></i>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-700">Increase water intake to 2.5L daily</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
	<i class="fas fa-check text-emerald-500 text-xs"></i>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-700">Add 2 high-intensity workouts weekly</p>
	</div>
	</div>
	`;
	}
	</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=crazychon/me-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>