Spaces:

namish10
/

contextflow-env

Running

App Files Files Community

namish10 commited on Apr 12

Commit

b37e8f2

verified ·

1 Parent(s): 259e5e3

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +264 -157

index.html CHANGED Viewed

@@ -1,157 +1,264 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>ContextFlow OpenEnv</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
-        .card { background: white; padding: 20px; border-radius: 10px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        h1 { color: #333; text-align: center; }
-        h2 { color: #666; border-bottom: 2px solid #007bff; padding-bottom: 10px; }
-        button { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px; }
-        button:hover { background: #0056b3; }
-        button:disabled { background: #ccc; cursor: not-allowed; }
-        input, select { padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin: 5px; }
-        .result { background: #e9ecef; padding: 15px; border-radius: 5px; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }
-        .success { color: green; }
-        .error { color: red; }
-        .metric { display: inline-block; background: #007bff; color: white; padding: 5px 15px; border-radius: 20px; margin: 5px; }
-    </style>
-</head>
-<body>
-    <h1>ContextFlow OpenEnv</h1>
-    <p style="text-align:center;color:#666;">Learning Confusion Prediction Environment</p>
-    <div class="card">
-        <h2>Setup</h2>
-        <select id="difficulty">
-            <option value="easy">Easy</option>
-            <option value="medium" selected>Medium</option>
-            <option value="hard">Hard</option>
-        </select>
-        <button onclick="reset()">Reset Environment</button>
-        <div id="status" class="result"></div>
-    </div>
-    <div class="card">
-        <h2>Predict Confusion</h2>
-        <p>Predicted Confusion (0-1): <input type="range" id="confusion" min="0" max="1" step="0.1" value="0.5" oninput="updateConfusion()"> <span id="confusionValue">0.5</span></p>
-        <p>Intervention:
-            <select id="intervention">
-                <option value="">None</option>
-                <option value="hint">Hint</option>
-                <option value="simplify">Simplify</option>
-                <option value="breakdown">Breakdown</option>
-                <option value="example">Example</option>
-                <option value="scaffold">Scaffold</option>
-            </select>
-        </p>
-        <button id="stepBtn" onclick="step()" disabled>Step</button>
-        <div id="result" class="result"></div>
-    </div>
-    <div class="card">
-        <h2>Episode Summary</h2>
-        <div id="metrics"></div>
-        <div id="finalResult" class="result"></div>
-    </div>
-    <script>
-        let episodeId = null;
-        let stepCount = 0;
-        const API_BASE = window.location.origin;
-        function updateConfusion() {
-            document.getElementById('confusionValue').textContent = document.getElementById('confusion').value;
-        }
-        async function reset() {
-            const difficulty = document.getElementById('difficulty').value;
-            document.getElementById('status').textContent = 'Resetting...';
-            try {
-                const response = await fetch(API_BASE + '/reset?difficulty=' + difficulty, { method: 'POST' });
-                const data = await response.json();
-                episodeId = data.episode_id;
-                stepCount = 0;
-                const obs = data.observation;
-                document.getElementById('status').innerHTML =
-                    '<span class="success">Episode started!</span>\n' +
-                    'Episode ID: ' + episodeId.substring(0, 8) + '...\n' +
-                    'Difficulty: ' + obs.learning_context.difficulty + '\n' +
-                    'Multi-modal fused: ' + obs.multimodal_fused + '\n' +
-                    'Available interventions: ' + obs.available_interventions.join(', ');
-                document.getElementById('stepBtn').disabled = false;
-                document.getElementById('result').textContent = '';
-                document.getElementById('finalResult').textContent = '';
-                document.getElementById('metrics').innerHTML = '';
-            } catch (e) {
-                document.getElementById('status').innerHTML = '<span class="error">Error: ' + e.message + '</span>';
-            }
-        }
-        async function step() {
-            if (!episodeId) return;
-            const confusion = document.getElementById('confusion').value;
-            const intervention = document.getElementById('intervention').value;
-            try {
-                const response = await fetch(API_BASE + '/step', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        episode_id: episodeId,
-                        action_type: intervention ? 'trigger_intervention' : 'predict_confusion',
-                        predicted_confusion: parseFloat(confusion),
-                        intervention_type: intervention || null,
-                        intervention_intensity: intervention ? 0.7 : null
-                    })
-                });
-                const data = await response.json();
-                stepCount++;
-                if (data.error) {
-                    document.getElementById('result').innerHTML = '<span class="error">' + data.error + '</span>';
-                    return;
-                }
-                const obs = data.observation;
-                const reward = data.reward;
-                document.getElementById('result').innerHTML =
-                    'Step ' + stepCount + ':\n' +
-                    'Reward: ' + reward.total.toFixed(3) + '\n' +
-                    'Ground Truth: ' + reward.metadata.ground_truth.toFixed(2) + '\n' +
-                    'Prediction Error: ' + reward.metadata.prediction_error.toFixed(2);
-                if (data.done) {
-                    document.getElementById('stepBtn').disabled = true;
-                    const grader = data.info.grader_result;
-                    document.getElementById('finalResult').innerHTML =
-                        '<span class="' + (grader.passed ? 'success' : 'error') + '">' +
-                        (grader.passed ? 'PASSED' : 'FAILED') + '</span>\n' +
-                        'Score: ' + grader.score.toFixed(3) + '\n\n' +
-                        grader.feedback;
-                    document.getElementById('metrics').innerHTML =
-                        '<span class="metric">MAE: ' + grader.metrics.mae.toFixed(3) + '</span>' +
-                        '<span class="metric">Early Detection: ' + (grader.metrics.early_detection_rate * 100).toFixed(0) + '%</span>' +
-                        '<span class="metric">Interventions: ' + grader.metrics.total_interventions + '</span>';
-                }
-            } catch (e) {
-                document.getElementById('result').innerHTML = '<span class="error">Error: ' + e.message + '</span>';
-            }
-        }
-        // Auto-reset on load
-        window.onload = reset;
-    </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html>
+<head>
+    <title>ContextFlow OpenEnv</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        * { box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
+        .container { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
+        h1 { color: #667eea; text-align: center; margin-bottom: 5px; }
+        .subtitle { text-align: center; color: #888; margin-bottom: 30px; }
+        h2 { color: #333; border-bottom: 3px solid #667eea; padding-bottom: 10px; margin-top: 30px; }
+        .card { background: #f8f9fa; padding: 20px; border-radius: 15px; margin: 15px 0; }
+        .controls { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; margin: 15px 0; }
+        button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 30px; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; }
+        button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102,126,234,0.4); }
+        button:disabled { background: #ccc; cursor: not-allowed; transform: none; }
+        select, input[type="range"] { padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 16px; }
+        .result { background: #1a1a2e; color: #0f0; padding: 20px; border-radius: 10px; margin: 15px 0; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; }
+        .metrics { display: flex; gap: 10px; flex-wrap: wrap; margin: 15px 0; }
+        .metric { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 20px; border-radius: 25px; font-weight: bold; }
+        .score { font-size: 48px; font-weight: bold; text-align: center; }
+        .pass { color: #10b981; }
+        .fail { color: #ef4444; }
+        .agent-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 15px 0; }
+        .agent-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 10px; text-align: center; }
+        .agent-card h3 { margin: 0 0 5px 0; font-size: 14px; }
+        .agent-card p { margin: 0; font-size: 24px; font-weight: bold; }
+        .status { text-align: center; padding: 10px; border-radius: 10px; margin: 10px 0; font-weight: bold; }
+        .status.ready { background: #d4edda; color: #155724; }
+        .status.error { background: #f8d7da; color: #721c24; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>ContextFlow OpenEnv</h1>
+        <p class="subtitle">Learning Confusion Prediction Environment</p>
+        <div id="status" class="status ready">Click "Reset Environment" to start</div>
+        <div class="card">
+            <h2>Environment Setup</h2>
+            <div class="controls">
+                <select id="difficulty">
+                    <option value="easy">Easy (50 steps)</option>
+                    <option value="medium" selected>Medium (75 steps)</option>
+                    <option value="hard">Hard (100 steps)</option>
+                </select>
+                <button onclick="reset()">Reset Environment</button>
+            </div>
+        </div>
+        <div class="card">
+            <h2>Make Prediction</h2>
+            <div class="controls">
+                <label>Predicted Confusion:</label>
+                <input type="range" id="confusion" min="0" max="1" step="0.05" value="0.5">
+                <span id="confusionValue" style="font-size:24px;font-weight:bold;color:#667eea;">0.50</span>
+            </div>
+            <div class="controls">
+                <label>Intervention:</label>
+                <select id="intervention">
+                    <option value="">None</option>
+                    <option value="hint">Hint</option>
+                    <option value="simplify">Simplify</option>
+                    <option value="breakdown">Breakdown</option>
+                    <option value="example">Example</option>
+                    <option value="scaffold">Scaffold</option>
+                    <option value="peer_connect">Peer Connect</option>
+                    <option value="break">Break</option>
+                    <option value="encourage">Encourage</option>
+                </select>
+            </div>
+            <button id="stepBtn" onclick="step()" disabled>Step</button>
+        </div>
+        <div class="card">
+            <h2>Results</h2>
+            <div id="result" class="result">Waiting for environment...</div>
+        </div>
+        <div class="card">
+            <h2>Metrics</h2>
+            <div class="metrics" id="metrics"></div>
+        </div>
+        <div class="card">
+            <h2>Active Agents</h2>
+            <div class="agent-info">
+                <div class="agent-card">
+                    <h3>RL Predictor</h3>
+                    <p>Q-Learning</p>
+                </div>
+                <div class="agent-card">
+                    <h3>Knowledge Graph</h3>
+                    <p>Prerequisites</p>
+                </div>
+                <div class="agent-card">
+                    <h3>Peer Learning</h3>
+                    <p>Connect Learners</p>
+                </div>
+                <div class="agent-card">
+                    <h3>Recall System</h3>
+                    <p>Spaced Repetition</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let episodeId = null;
+        let stepCount = 0;
+        let episodeReward = 0;
+        const confusionSlider = document.getElementById('confusion');
+        const confusionValue = document.getElementById('confusionValue');
+        const statusEl = document.getElementById('status');
+        const resultEl = document.getElementById('result');
+        const metricsEl = document.getElementById('metrics');
+        const stepBtn = document.getElementById('stepBtn');
+        confusionSlider.oninput = () => {
+            confusionValue.textContent = parseFloat(confusionSlider.value).toFixed(2);
+        };
+        const state = {
+            step_count: 0,
+            max_steps: 75,
+            predictions: [],
+            interventions: [],
+            rewards: [],
+            ground_truth: [],
+            multimodal_fused: true,
+            agent_epsilon: 1.0
+        };
+        function generateConfusion(step, difficulty) {
+            const configs = {
+                easy: { base: 0.3, noise: 0.1, spikeProb: 0.08 },
+                medium: { base: 0.5, noise: 0.2, spikeProb: 0.12 },
+                hard: { base: 0.6, noise: 0.3, spikeProb: 0.15 }
+            };
+            const cfg = configs[difficulty] || configs.medium;
+            let confusion = cfg.base + Math.sin(step * 0.1) * 0.2;
+            confusion += (Math.random() - 0.5) * 2 * cfg.noise;
+            if (Math.random() < cfg.spikeProb) confusion += 0.3;
+            return Math.max(0, Math.min(1, confusion));
+        }
+        function reset() {
+            const difficulty = document.getElementById('difficulty').value;
+            state.step_count = 0;
+            state.max_steps = difficulty === 'easy' ? 50 : difficulty === 'hard' ? 100 : 75;
+            state.predictions = [];
+            state.interventions = [];
+            state.rewards = [];
+            state.ground_truth = [];
+            state.agent_epsilon = 1.0;
+            state.multimodal_fused = true;
+            stepCount = 0;
+            episodeReward = 0;
+            episodeId = 'ep_' + Date.now();
+            const gt = generateConfusion(0, difficulty);
+            state.ground_truth.push(gt);
+            statusEl.className = 'status ready';
+            statusEl.textContent = `Episode: ${episodeId.slice(0,12)}... | Difficulty: ${difficulty} | Steps: 0/${state.max_steps}`;
+            resultEl.innerHTML = JSON.stringify({
+                "Episode Started": {
+                    episode_id: episodeId,
+                    difficulty: difficulty,
+                    multimodal_fused: state.multimodal_fused,
+                    available_interventions: ["hint", "simplify", "breakdown", "example", "scaffold", "peer_connect", "break", "encourage"],
+                    prediction_window: difficulty === 'easy' ? 3 : difficulty === 'hard' ? 7 : 5,
+                    ground_truth_confusion: gt.toFixed(3),
+                    agent_state: { epsilon: state.agent_epsilon.toFixed(3) }
+                }
+            }, null, 2);
+            metricsEl.innerHTML = '';
+            stepBtn.disabled = false;
+        }
+        function step() {
+            const predicted = parseFloat(confusionSlider.value);
+            const intervention = document.getElementById('intervention').value;
+            state.step_count++;
+            stepCount++;
+            const gt = state.ground_truth[state.ground_truth.length - 1];
+            const error = Math.abs(predicted - gt);
+            let reward = (1 - error) * 0.4;
+            if (state.ground_truth.length > 1) {
+                const prev = state.ground_truth[state.ground_truth.length - 2];
+                if (gt > prev && predicted > prev) reward += 0.2;
+            }
+            if (intervention) {
+                state.interventions.push({ step: stepCount, type: intervention, intensity: 0.7 });
+                if (gt > 0.5) reward += 0.3;
+            }
+            episodeReward += reward;
+            state.rewards.push(reward);
+            state.predictions.push(predicted);
+            const nextGt = generateConfusion(state.step_count, document.getElementById('difficulty').value);
+            state.ground_truth.push(nextGt);
+            state.agent_epsilon = Math.max(0.01, state.agent_epsilon * 0.995);
+            const done = stepCount >= state.max_steps;
+            if (done) {
+                const preds = state.predictions;
+                const gts = state.ground_truth.slice(0, preds.length);
+                const mae = preds.reduce((sum, p, i) => sum + Math.abs(p - gts[i]), 0) / preds.length;
+                let spikes = 0, detected = 0;
+                for (let i = 1; i < gts.length; i++) {
+                    if (gts[i] > 0.6) { spikes++; if (preds[i] > 0.6) detected++; }
+                }
+                const edr = spikes > 0 ? detected / spikes : 0;
+                const ie = state.interventions.length > 0 ? state.interventions.length / preds.length : 0;
+                const score = (1 - mae) * 0.4 + edr * 0.3 + ie * 0.3;
+                const threshold = document.getElementById('difficulty').value === 'easy' ? 0.5 : document.getElementById('difficulty').value === 'hard' ? 0.7 : 0.6;
+                const passed = score >= threshold;
+                resultEl.innerHTML = JSON.stringify({
+                    "Episode Complete": {
+                        step: stepCount,
+                        total_reward: episodeReward.toFixed(3),
+                        grader_result: {
+                            score: score.toFixed(3),
+                            passed: passed,
+                            feedback: `MAE: ${mae.toFixed(3)} | Early Detection: ${(edr*100).toFixed(0)}% | Intervention Effect: ${(ie*100).toFixed(0)}%`,
+                            metrics: { mae: mae.toFixed(3), early_detection_rate: edr.toFixed(3), intervention_effectiveness: ie.toFixed(3), total_predictions: preds.length, total_interventions: state.interventions.length }
+                        }
+                    }
+                }, null, 2);
+                metricsEl.innerHTML = `<div class="metric" style="font-size:36px;">${passed ? 'PASSED' : 'FAILED'}</div><div class="metric">Score: ${score.toFixed(3)}</div><div class="metric">MAE: ${mae.toFixed(3)}</div><div class="metric">E.D.R: ${(edr*100).toFixed(0)}%</div><div class="metric">Reward: ${episodeReward.toFixed(2)}</div>`;
+                stepBtn.disabled = true;
+                statusEl.textContent = `${passed ? 'PASSED' : 'FAILED'} - Click Reset to try again`;
+            } else {
+                resultEl.innerHTML = JSON.stringify({
+                    step: stepCount,
+                    reward: reward.toFixed(3),
+                    ground_truth: gt.toFixed(3),
+                    prediction_error: error.toFixed(3),
+                    prediction: predicted.toFixed(2),
+                    intervention: intervention || null,
+                    agent_state: { epsilon: state.agent_epsilon.toFixed(3) }
+                }, null, 2);
+                statusEl.textContent = `Episode: ${episodeId.slice(0,12)}... | Steps: ${stepCount}/${state.max_steps} | Reward: ${episodeReward.toFixed(2)}`;
+            }
+        }
+        window.onload = reset;
+    </script>
+</body>
+</html>