Hugging Face's logo

Spaces:
namish10
/
contextflow-env
Running

App Files Community
namish10 commited on
Commit
259e5e3
·
verified ·
1 Parent(s): e9b3ade

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +157 -19
index.html CHANGED
@@ -1,19 +1,157 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html>
4
+ <head>
5
+ <title>ContextFlow OpenEnv</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <style>
8
+ body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
9
+ .card { background: white; padding: 20px; border-radius: 10px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
10
+ h1 { color: #333; text-align: center; }
11
+ h2 { color: #666; border-bottom: 2px solid #007bff; padding-bottom: 10px; }
12
+ button { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px; }
13
+ button:hover { background: #0056b3; }
14
+ button:disabled { background: #ccc; cursor: not-allowed; }
15
+ input, select { padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin: 5px; }
16
+ .result { background: #e9ecef; padding: 15px; border-radius: 5px; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }
17
+ .success { color: green; }
18
+ .error { color: red; }
19
+ .metric { display: inline-block; background: #007bff; color: white; padding: 5px 15px; border-radius: 20px; margin: 5px; }
20
+ </style>
21
+ </head>
22
+ <body>
23
+ <h1>ContextFlow OpenEnv</h1>
24
+ <p style="text-align:center;color:#666;">Learning Confusion Prediction Environment</p>
25
+
26
+ <div class="card">
27
+ <h2>Setup</h2>
28
+ <select id="difficulty">
29
+ <option value="easy">Easy</option>
30
+ <option value="medium" selected>Medium</option>
31
+ <option value="hard">Hard</option>
32
+ </select>
33
+ <button onclick="reset()">Reset Environment</button>
34
+ <div id="status" class="result"></div>
35
+ </div>
36
+
37
+ <div class="card">
38
+ <h2>Predict Confusion</h2>
39
+ <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>
40
+ <p>Intervention:
41
+ <select id="intervention">
42
+ <option value="">None</option>
43
+ <option value="hint">Hint</option>
44
+ <option value="simplify">Simplify</option>
45
+ <option value="breakdown">Breakdown</option>
46
+ <option value="example">Example</option>
47
+ <option value="scaffold">Scaffold</option>
48
+ </select>
49
+ </p>
50
+ <button id="stepBtn" onclick="step()" disabled>Step</button>
51
+ <div id="result" class="result"></div>
52
+ </div>
53
+
54
+ <div class="card">
55
+ <h2>Episode Summary</h2>
56
+ <div id="metrics"></div>
57
+ <div id="finalResult" class="result"></div>
58
+ </div>
59
+
60
+ <script>
61
+ let episodeId = null;
62
+ let stepCount = 0;
63
+
64
+ const API_BASE = window.location.origin;
65
+
66
+ function updateConfusion() {
67
+ document.getElementById('confusionValue').textContent = document.getElementById('confusion').value;
68
+ }
69
+
70
+ async function reset() {
71
+ const difficulty = document.getElementById('difficulty').value;
72
+ document.getElementById('status').textContent = 'Resetting...';
73
+
74
+ try {
75
+ const response = await fetch(API_BASE + '/reset?difficulty=' + difficulty, { method: 'POST' });
76
+ const data = await response.json();
77
+
78
+ episodeId = data.episode_id;
79
+ stepCount = 0;
80
+
81
+ const obs = data.observation;
82
+ document.getElementById('status').innerHTML =
83
+ '<span class="success">Episode started!</span>\n' +
84
+ 'Episode ID: ' + episodeId.substring(0, 8) + '...\n' +
85
+ 'Difficulty: ' + obs.learning_context.difficulty + '\n' +
86
+ 'Multi-modal fused: ' + obs.multimodal_fused + '\n' +
87
+ 'Available interventions: ' + obs.available_interventions.join(', ');
88
+
89
+ document.getElementById('stepBtn').disabled = false;
90
+ document.getElementById('result').textContent = '';
91
+ document.getElementById('finalResult').textContent = '';
92
+ document.getElementById('metrics').innerHTML = '';
93
+ } catch (e) {
94
+ document.getElementById('status').innerHTML = '<span class="error">Error: ' + e.message + '</span>';
95
+ }
96
+ }
97
+
98
+ async function step() {
99
+ if (!episodeId) return;
100
+
101
+ const confusion = document.getElementById('confusion').value;
102
+ const intervention = document.getElementById('intervention').value;
103
+
104
+ try {
105
+ const response = await fetch(API_BASE + '/step', {
106
+ method: 'POST',
107
+ headers: { 'Content-Type': 'application/json' },
108
+ body: JSON.stringify({
109
+ episode_id: episodeId,
110
+ action_type: intervention ? 'trigger_intervention' : 'predict_confusion',
111
+ predicted_confusion: parseFloat(confusion),
112
+ intervention_type: intervention || null,
113
+ intervention_intensity: intervention ? 0.7 : null
114
+ })
115
+ });
116
+
117
+ const data = await response.json();
118
+ stepCount++;
119
+
120
+ if (data.error) {
121
+ document.getElementById('result').innerHTML = '<span class="error">' + data.error + '</span>';
122
+ return;
123
+ }
124
+
125
+ const obs = data.observation;
126
+ const reward = data.reward;
127
+
128
+ document.getElementById('result').innerHTML =
129
+ 'Step ' + stepCount + ':\n' +
130
+ 'Reward: ' + reward.total.toFixed(3) + '\n' +
131
+ 'Ground Truth: ' + reward.metadata.ground_truth.toFixed(2) + '\n' +
132
+ 'Prediction Error: ' + reward.metadata.prediction_error.toFixed(2);
133
+
134
+ if (data.done) {
135
+ document.getElementById('stepBtn').disabled = true;
136
+ const grader = data.info.grader_result;
137
+ document.getElementById('finalResult').innerHTML =
138
+ '<span class="' + (grader.passed ? 'success' : 'error') + '">' +
139
+ (grader.passed ? 'PASSED' : 'FAILED') + '</span>\n' +
140
+ 'Score: ' + grader.score.toFixed(3) + '\n\n' +
141
+ grader.feedback;
142
+
143
+ document.getElementById('metrics').innerHTML =
144
+ '<span class="metric">MAE: ' + grader.metrics.mae.toFixed(3) + '</span>' +
145
+ '<span class="metric">Early Detection: ' + (grader.metrics.early_detection_rate * 100).toFixed(0) + '%</span>' +
146
+ '<span class="metric">Interventions: ' + grader.metrics.total_interventions + '</span>';
147
+ }
148
+ } catch (e) {
149
+ document.getElementById('result').innerHTML = '<span class="error">Error: ' + e.message + '</span>';
150
+ }
151
+ }
152
+
153
+ // Auto-reset on load
154
+ window.onload = reset;
155
+ </script>
156
+ </body>
157
+ </html>