Rename Dockerfile to index.html

Dockerfile

@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

index.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تحليل البيانات والرسم البياني ببايثون</title>
+    <!-- مكتبة Pyodide -->
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"></script>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
+        body { display: flex; flex-direction: column; height: 100vh; background: #1e1e1e; color: #fff; }
+        header { padding: 12px 20px; background: #252526; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }
+        header h1 { font-size: 1.1rem; color: #3572A5; }
+        .btn-run { background: #007acc; color: white; border: none; padding: 8px 18px; font-weight: bold; cursor: pointer; border-radius: 4px; transition: 0.2s; }
+        .btn-run:disabled { background: #555; cursor: not-allowed; }
+        .btn-run:hover:not(:disabled) { background: #005999; }
+        .container { display: flex; flex: 1; overflow: hidden; }
+        .editor, .output { width: 50%; display: flex; flex-direction: column; padding: 10px; gap: 10px; }
+        .editor { border-left: 1px solid #333; }
+        .output { overflow-y: auto; background: #141414; }
+        h3 { font-size: 0.85rem; color: #aaa; text-transform: uppercase; }
+        textarea { flex: 1; background: #252526; color: #d4d4d4; border: 1px solid #333; padding: 12px; font-family: 'Consolas', monospace; font-size: 13px; resize: none; outline: none; direction: ltr; text-align: left; line-height: 1.5; }
+        pre { background: #000; color: #00ff66; padding: 12px; font-family: 'Consolas', monospace; font-size: 13px; direction: ltr; text-align: left; white-space: pre-wrap; border: 1px solid #333; border-radius: 4px; }
+        .plot-container { text-align: center; margin-top: 5px; }
+        .plot-container img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid #333; }
+        .status { font-size: 0.85rem; color: #e5c07b; margin-left: 15px; }
+        @media (max-width: 768px) { .container { flex-direction: column; } .editor, .output { width: 100%; height: 50%; } }
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>📊 تحليلات بايثون (Pandas & Matplotlib)</h1>
+        <div>
+            <span id="status" class="status">جاري تحميل المحرك والمكتبات...</span>
+            <button id="run-btn" class="btn-run" onclick="runPython()" disabled>تشغيل التحليل ▶</button>
+        </div>
+    </header>
+
+    <div class="container">
+        <!-- قسم المحرر -->
+        <div class="editor">
+            <h3>كود بايثون</h3>
+            <textarea id="code" placeholder="اكتب كود بايثون هنا...">import pandas as pd
+import matplotlib.pyplot as plt
+
+# 1. إنشاء جدول بيانات (DataFrame)
+data = {
+    'الشهر': ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    'المبيعات': [1500, 2300, 1800, 3100, 2900],
+    'الأرباح': [400, 700, 500, 1100, 950]
+}
+
+df = pd.DataFrame(data)
+
+# عرض البيانات في الكونسول
+print("--- جدول البيانات ---")
+print(df)
+print("\n--- الإحصائيات الوصفية ---")
+print(df.describe())
+
+# 2. إنشاء الرسم البياني
+plt.figure(figsize=(6, 3.5))
+plt.bar(df['الشهر'], df['المبيعات'], color='#3572A5', label='Sales')
+plt.plot(df['الشهر'], df['الأرباح'], color='#ff6b6b', marker='o', linewidth=2, label='Profit')
+
+plt.title('Monthly Performance')
+plt.xlabel('Month')
+plt.ylabel('Amount ($)')
+plt.legend()
+plt.grid(axis='y', linestyle='--', alpha=0.3)
+</textarea>
+        </div>
+
+        <!-- قسم المخرجات -->
+        <div class="output">
+            <h3>المخرجات النصية (Console)</h3>
+            <pre id="console">بانتظار تجهيز المكتبات...</pre>
+
+            <h3>الرسم البياني الناتج</h3>
+            <div id="plot-output" class="plot-container">
+                <span style="color: #666; font-size: 0.85rem;">سيظهر الرسم البياني هنا بعد التشغيل</span>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let pyodide;
+        const consoleEl = document.getElementById('console');
+        const plotEl = document.getElementById('plot-output');
+        const statusEl = document.getElementById('status');
+        const runBtn = document.getElementById('run-btn');
+
+        // تحميل بايثون والمكتبات عند فتح الصفحة
+        async function initPyodide() {
+            try {
+                pyodide = await loadPyodide();
+                statusEl.innerText = "جاري تثبيت Pandas & Matplotlib...";
+                
+                // تحميل مكتبات بايثون المطلوبة
+                await pyodide.loadPackage(['pandas', 'matplotlib']);
+                
+                statusEl.innerText = "المكتبات جاهزة للعمل!";
+                statusEl.style.color = "#98c379";
+                consoleEl.innerText = "جاهز لتشغيل التحليل...";
+                runBtn.disabled = false;
+            } catch (err) {
+                statusEl.innerText = "خطأ في تحميل المكتبات";
+                consoleEl.innerText = "تفاصيل الخطأ: " + err;
+            }
+        }
+
+        // تنفيذ الكود والتقاط النص والرسم البياني
+        async function runPython() {
+            if (!pyodide) return;
+            
+            runBtn.disabled = true;
+            statusEl.innerText = "جاري المعالجة...";
+            consoleEl.innerText = "جاري الحسابات...\n";
+            plotEl.innerHTML = "";
+
+            const code = document.getElementById('code').value;
+
+            // توجيه أومر الطباعة
+            pyodide.runPython(`
+                import sys
+                import io
+                sys.stdout = io.StringIO()
+            `);
+
+            try {
+                // تنفيذ كود المستخدم
+                await pyodide.runPythonAsync(code);
+                
+                // جلب المخرجات النصية
+                const stdout = pyodide.runPython("sys.stdout.getvalue()");
+                consoleEl.innerText = stdout || "(تم التنفيذ - لا توجد مخرجات نصية)";
+
+                // استخراج رسم Matplotlib إن وجد وتحويله لـ Base64
+                const plotBase64 = pyodide.runPython(`
+                    import matplotlib.pyplot as plt
+                    import io, base64
+
+                    img_str = ""
+                    if plt.get_fignums():
+                        buf = io.BytesIO()
+                        plt.savefig(buf, format='png', bbox_inches='tight', dpi=120)
+                        buf.seek(0)
+                        img_str = base64.b64encode(buf.read()).decode('utf-8')
+                        plt.close('all')
+                    img_str
+                `);
+
+                if (plotBase64) {
+                    plotEl.innerHTML = `<img src="data:image/png;base64,${plotBase64}" alt="الرسم البياني" />`;
+                } else {
+                    plotEl.innerHTML = `<span style="color: #666; font-size: 0.85rem;">لم يتم إنشاء رسم بياني في هذا الكود.</span>`;
+                }
+
+            } catch (err) {
+                consoleEl.innerText = "حدث خطأ أثناء التنفيذ:\n" + err;
+            } finally {
+                runBtn.disabled = false;
+                statusEl.innerText = "جاهز!";
+            }
+        }
+
+        initPyodide();
+    </script>
+</body>
+</html>