Spaces:

namish10
/

contextflow-env

Running

App Files Files Community

namish10 commited on Apr 12

Commit

81e5178

verified ·

1 Parent(s): b37e8f2

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +146 -140

index.html CHANGED Viewed

@@ -19,32 +19,33 @@
         .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>
@@ -76,7 +77,7 @@
         <div class="card">
             <h2>Results</h2>
-            <div id="result" class="result">Waiting for environment...</div>
         </div>
         <div class="card">
@@ -85,32 +86,34 @@
         </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');
@@ -123,142 +126,145 @@
             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>

         .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; }
+        .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; }
+        .status.loading { background: #fff3cd; color: #856404; }
         .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; }
+        .loading { text-align: center; padding: 50px; }
+        .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #667eea; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>ContextFlow OpenEnv</h1>
+        <p class="subtitle">Learning Confusion Prediction with RL Agents</p>
+        <div id="status" class="status loading">Connecting to ContextFlow API...</div>
         <div class="card">
             <h2>Environment Setup</h2>
             <div class="controls">
                 <select id="difficulty">
+                    <option value="easy">Easy (50 steps, threshold: 0.5)</option>
+                    <option value="medium" selected>Medium (75 steps, threshold: 0.6)</option>
+                    <option value="hard">Hard (100 steps, threshold: 0.7)</option>
                 </select>
                 <button onclick="reset()">Reset Environment</button>
             </div>
         <div class="card">
             <h2>Results</h2>
+            <div id="result" class="result">Click "Reset Environment" to start...</div>
         </div>
         <div class="card">
         </div>
         <div class="card">
+            <h2>Active ContextFlow Agents</h2>
             <div class="agent-info">
                 <div class="agent-card">
+                    <h3>RL Doubt Predictor</h3>
                     <p>Q-Learning</p>
                 </div>
                 <div class="agent-card">
+                    <h3>Behavioral Analyzer</h3>
+                    <p>Signal Fusion</p>
                 </div>
                 <div class="agent-card">
+                    <h3>Knowledge Graph</h3>
+                    <p>Prerequisites</p>
                 </div>
                 <div class="agent-card">
+                    <h3>Gesture Recognizer</h3>
+                    <p>Hand Tracking</p>
                 </div>
             </div>
         </div>
     </div>
     <script>
+        const API_BASE = 'https://namish10-contextflow-env-api.hf.space';
         let episodeId = null;
         let stepCount = 0;
         let episodeReward = 0;
+        let currentDifficulty = 'medium';
         const confusionSlider = document.getElementById('confusion');
         const confusionValue = document.getElementById('confusionValue');
             confusionValue.textContent = parseFloat(confusionSlider.value).toFixed(2);
         };
+        async function checkAPI() {
+            try {
+                const resp = await fetch(API_BASE + '/health');
+                const data = await resp.json();
+                statusEl.className = 'status ready';
+                statusEl.textContent = 'Connected to ContextFlow API - ' + data.status;
+            } catch (e) {
+                statusEl.className = 'status error';
+                statusEl.textContent = 'API Connection Failed: ' + e.message;
+            }
         }
+        async function reset() {
+            currentDifficulty = document.getElementById('difficulty').value;
+            statusEl.className = 'status loading';
+            statusEl.textContent = 'Resetting environment...';
+            stepBtn.disabled = true;
+            try {
+                const resp = await fetch(API_BASE + '/reset?difficulty=' + currentDifficulty, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                const data = await resp.json();
+                episodeId = data.episode_id;
+                stepCount = 0;
+                episodeReward = 0;
+                const obs = data.observation;
+                statusEl.className = 'status ready';
+                statusEl.textContent = `Episode: ${episodeId.substring(0, 12)}... | ${obs.learning_context.difficulty.toUpperCase()} | Steps: 0/${currentDifficulty === 'easy' ? 50 : currentDifficulty === 'hard' ? 100 : 75}`;
+                resultEl.innerHTML = JSON.stringify({
+                    "Episode Started": {
+                        episode_id: episodeId,
+                        difficulty: obs.learning_context.difficulty,
+                        topic: obs.learning_context.topic,
+                        multimodal_fused: obs.multimodal_fused,
+                        prediction_window: obs.prediction_window,
+                        available_interventions: obs.available_interventions,
+                        agent_state: { epsilon: 1.0 }
+                    }
+                }, null, 2);
+                metricsEl.innerHTML = '';
+                stepBtn.disabled = false;
+            } catch (e) {
+                statusEl.className = 'status error';
+                statusEl.textContent = 'Error: ' + e.message;
+            }
         }
+        async function step() {
+            if (!episodeId) return;
             const predicted = parseFloat(confusionSlider.value);
             const intervention = document.getElementById('intervention').value;
+            statusEl.className = 'status loading';
+            statusEl.textContent = 'Processing step...';
+            try {
+                const resp = 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: predicted,
+                        intervention_type: intervention || null,
+                        intervention_intensity: intervention ? 0.7 : null
+                    })
+                });
+                const data = await resp.json();
+                stepCount++;
+                if (data.error) {
+                    statusEl.className = 'status error';
+                    statusEl.textContent = data.error;
+                    return;
                 }
+                const reward = data.reward;
+                const obs = data.observation;
+                episodeReward += reward.total;
+                if (data.done) {
+                    const grader = data.info.grader_result;
+                    statusEl.className = grader.passed ? 'status ready' : 'status error';
+                    statusEl.textContent = grader.passed ? 'EPISODE PASSED!' : 'Episode Ended';
+                    resultEl.innerHTML = JSON.stringify({
+                        "Episode Complete": {
+                            total_steps: stepCount,
+                            total_reward: episodeReward.toFixed(3),
+                            grader_result: grader
                         }
+                    }, null, 2);
+                    metricsEl.innerHTML = `
+                        <div class="metric" style="font-size:28px;${grader.passed ? '' : 'background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);'}">${grader.passed ? 'PASSED' : 'FAILED'}</div>
+                        <div class="metric">Score: ${grader.score.toFixed(3)}</div>
+                        <div class="metric">MAE: ${grader.metrics.mae.toFixed(3)}</div>
+                        <div class="metric">Early Detection: ${(grader.metrics.early_detection_rate * 100).toFixed(0)}%</div>
+                        <div class="metric">Interventions: ${grader.metrics.total_interventions}</div>
+                    `;
+                    stepBtn.disabled = true;
+                } else {
+                    statusEl.className = 'status ready';
+                    statusEl.textContent = `Episode: ${episodeId.substring(0, 12)}... | Steps: ${stepCount}/${currentDifficulty === 'easy' ? 50 : currentDifficulty === 'hard' ? 100 : 75} | Reward: ${episodeReward.toFixed(2)}`;
+                    resultEl.innerHTML = JSON.stringify({
+                        step: stepCount,
+                        reward: reward.total.toFixed(3),
+                        ground_truth: reward.metadata.ground_truth.toFixed(3),
+                        prediction_error: reward.metadata.prediction_error.toFixed(3),
+                        prediction: predicted.toFixed(2),
+                        intervention: intervention || null,
+                        learner_state: obs.learner_state
+                    }, null, 2);
+                    metricsEl.innerHTML = `
+                        <div class="metric">Step: ${stepCount}</div>
+                        <div class="metric">Reward: ${reward.total.toFixed(3)}</div>
+                        <div class="metric">Error: ${reward.metadata.prediction_error.toFixed(3)}</div>
+                    `;
+                }
+            } catch (e) {
+                statusEl.className = 'status error';
+                statusEl.textContent = 'Error: ' + e.message;
             }
         }
+        checkAPI();
     </script>
 </body>
 </html>